From e09d510ab8117630558a3e54bff939f7f314513a Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 26 Nov 2019 12:14:09 +0000 Subject: [PATCH] Revert "Replace govuk template with govuk frontend components - rewrite" --- app/.gitignore | 1 + app/__init__.py | 2 +- .../javascripts/collapsibleCheckboxes.js | 4 +- app/assets/javascripts/cookieMessage.js | 16 - .../javascripts/govuk/cookie-functions.js | 62 ---- app/assets/javascripts/listEntry.js | 4 +- app/assets/javascripts/main.js | 4 - app/assets/javascripts/modules/all.mjs | 34 -- app/assets/javascripts/templateFolderForm.js | 2 +- app/assets/stylesheets/app.scss | 58 ++++ .../components/cookie-message.scss | 8 - app/assets/stylesheets/globals.scss | 77 ----- .../stylesheets/govuk-frontend/_all.scss | 27 -- .../govuk-frontend/extensions.scss | 9 - .../stylesheets/govuk-frontend/overrides.scss | 58 ---- app/assets/stylesheets/main.scss | 6 - app/assets/stylesheets/print.scss | 85 ----- app/navigation.py | 4 - app/templates/admin_template.html | 304 ++++++------------ app/templates/components/file-upload.html | 2 +- app/templates/components/list-entry.html | 2 +- app/templates/components/notify-footer.html | 90 ------ app/templates/components/select-input.html | 2 +- app/templates/components/table.html | 6 +- app/templates/components/tick-cross.html | 4 +- app/templates/fullwidth_template.html | 9 +- app/templates/org_template.html | 19 +- .../components/footer/macro.njk | 3 - .../components/footer/template.njk | 87 ----- .../components/header/macro.njk | 3 - .../components/header/template.njk | 84 ----- .../components/skip-link/macro.njk | 3 - .../components/skip-link/template.njk | 3 - .../vendor/govuk-frontend/template.njk | 60 ---- app/templates/views/check/column-errors.html | 4 +- app/templates/views/check/ok.html | 4 +- app/templates/views/check/row-errors.html | 4 +- app/templates/views/choose-account.html | 2 +- app/templates/views/dashboard/dashboard.html | 2 +- .../views/organisations/add-organisation.html | 37 +-- app/templates/views/organisations/index.html | 75 ++--- app/templates/views/register.html | 2 +- app/templates/views/signedout.html | 14 +- app/templates/views/templates/_move_to.html | 6 +- app/templates/withnav_template.html | 31 +- app/templates/withoutnav_template.html | 15 +- gulpfile.js | 196 ++++------- package.json | 9 +- .../views/accounts/test_choose_accounts.py | 10 +- tests/app/main/views/test_index.py | 4 +- tests/app/main/views/test_notifications.py | 5 +- tests/app/main/views/test_send.py | 2 +- tests/app/main/views/test_service_settings.py | 4 +- tests/app/main/views/test_template_folders.py | 2 +- tests/app/test_navigation.py | 6 +- .../javascripts/collapsibleCheckboxes.test.js | 2 +- 56 files changed, 358 insertions(+), 1220 deletions(-) delete mode 100644 app/assets/javascripts/cookieMessage.js delete mode 100644 app/assets/javascripts/govuk/cookie-functions.js delete mode 100644 app/assets/javascripts/modules/all.mjs delete mode 100644 app/assets/stylesheets/components/cookie-message.scss delete mode 100644 app/assets/stylesheets/globals.scss delete mode 100644 app/assets/stylesheets/govuk-frontend/_all.scss delete mode 100644 app/assets/stylesheets/govuk-frontend/extensions.scss delete mode 100644 app/assets/stylesheets/govuk-frontend/overrides.scss delete mode 100644 app/assets/stylesheets/print.scss delete mode 100644 app/templates/components/notify-footer.html delete mode 100644 app/templates/vendor/govuk-frontend/components/footer/macro.njk delete mode 100644 app/templates/vendor/govuk-frontend/components/footer/template.njk delete mode 100644 app/templates/vendor/govuk-frontend/components/header/macro.njk delete mode 100644 app/templates/vendor/govuk-frontend/components/header/template.njk delete mode 100644 app/templates/vendor/govuk-frontend/components/skip-link/macro.njk delete mode 100644 app/templates/vendor/govuk-frontend/components/skip-link/template.njk delete mode 100644 app/templates/vendor/govuk-frontend/template.njk diff --git a/app/.gitignore b/app/.gitignore index 191f96b65..c60deb95a 100644 --- a/app/.gitignore +++ b/app/.gitignore @@ -1,2 +1,3 @@ /version.py +/templates/govuk_template.html /static diff --git a/app/__init__.py b/app/__init__.py index 790a3130d..e3ec26fce 100644 --- a/app/__init__.py +++ b/app/__init__.py @@ -720,7 +720,7 @@ def init_jinja(application): repo_root = os.path.abspath(os.path.join(os.path.dirname(__file__), '..')) template_folders = [ os.path.join(repo_root, 'app/templates'), - os.path.join(repo_root, 'app/templates/vendor/govuk-frontend'), + os.path.join(repo_root, 'node_modules/govuk-frontend'), ] jinja_loader = jinja2.FileSystemLoader(template_folders) application.jinja_loader = jinja_loader diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js index 7d92b273e..3eea8693d 100644 --- a/app/assets/javascripts/collapsibleCheckboxes.js +++ b/app/assets/javascripts/collapsibleCheckboxes.js @@ -53,7 +53,7 @@ } Footer.prototype.buttonContent = { change: (fieldLabel) => `Choose ${fieldLabel}s`, - done: (fieldLabel) => `Done choosing ${fieldLabel}s` + done: (fieldLabel) => `Done choosing ${fieldLabel}s` }; Footer.prototype.getEl = function (expanded) { const buttonState = expanded ? 'done' : 'change'; @@ -118,7 +118,7 @@ this.$heading = $(`${this.legendText}`); this.$fieldset.before(this.$heading); - this.$fieldset.find('legend').addClass('govuk-visually-hidden'); + this.$fieldset.find('legend').addClass('visuallyhidden'); }; CollapsibleCheckboxes.prototype.expand = function(e) { if (e !== undefined) { e.preventDefault(); } diff --git a/app/assets/javascripts/cookieMessage.js b/app/assets/javascripts/cookieMessage.js deleted file mode 100644 index 4e17cbec7..000000000 --- a/app/assets/javascripts/cookieMessage.js +++ /dev/null @@ -1,16 +0,0 @@ -(function () { - "use strict"; - - var root = this; - if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; } - - GOVUK.addCookieMessage = function () { - var message = document.getElementById('global-cookie-message'), - hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null); - - if (hasCookieMessage) { - message.style.display = 'block'; - GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 }); - } - }; -}).call(this); diff --git a/app/assets/javascripts/govuk/cookie-functions.js b/app/assets/javascripts/govuk/cookie-functions.js deleted file mode 100644 index fdabe48e3..000000000 --- a/app/assets/javascripts/govuk/cookie-functions.js +++ /dev/null @@ -1,62 +0,0 @@ -(function () { - "use strict"; - - var root = this; - if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; } - - /* - Cookie methods - ============== - - Usage: - - Setting a cookie: - GOVUK.cookie('hobnob', 'tasty', { days: 30 }); - - Reading a cookie: - GOVUK.cookie('hobnob'); - - Deleting a cookie: - GOVUK.cookie('hobnob', null); - */ - GOVUK.cookie = function (name, value, options) { - if(typeof value !== 'undefined'){ - if(value === false || value === null) { - return GOVUK.setCookie(name, '', { days: -1 }); - } else { - return GOVUK.setCookie(name, value, options); - } - } else { - return GOVUK.getCookie(name); - } - }; - GOVUK.setCookie = function (name, value, options) { - if(typeof options === 'undefined') { - options = {}; - } - var cookieString = name + "=" + value + "; path=/"; - if (options.days) { - var date = new Date(); - date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000)); - cookieString = cookieString + "; expires=" + date.toGMTString(); - } - if (document.location.protocol == 'https:'){ - cookieString = cookieString + "; Secure"; - } - document.cookie = cookieString; - }; - GOVUK.getCookie = function (name) { - var nameEQ = name + "="; - var cookies = document.cookie.split(';'); - for(var i = 0, len = cookies.length; i < len; i++) { - var cookie = cookies[i]; - while (cookie.charAt(0) == ' ') { - cookie = cookie.substring(1, cookie.length); - } - if (cookie.indexOf(nameEQ) === 0) { - return decodeURIComponent(cookie.substring(nameEQ.length)); - } - } - return null; - }; -}).call(this); diff --git a/app/assets/javascripts/listEntry.js b/app/assets/javascripts/listEntry.js index 211d42764..b5dd7c88e 100644 --- a/app/assets/javascripts/listEntry.js +++ b/app/assets/javascripts/listEntry.js @@ -28,7 +28,7 @@ ListEntry.prototype.entryTemplate = Hogan.compile( '
' + '' + '' + '{{#button}}' + '' + '{{/button}}' + '
' diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 9c45e0508..33ef38a0c 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -1,7 +1,3 @@ -window.GOVUK.Frontend.initAll(); - -$(() => GOVUK.addCookieMessage()); - $(() => $("time.timeago").timeago()); $(() => GOVUK.stickAtTopWhenScrolling.init()); diff --git a/app/assets/javascripts/modules/all.mjs b/app/assets/javascripts/modules/all.mjs deleted file mode 100644 index 7940c17df..000000000 --- a/app/assets/javascripts/modules/all.mjs +++ /dev/null @@ -1,34 +0,0 @@ -// JS Module used to combine all the JS modules used in the application into a single entry point, -// a bit like `app/__init__` in the Flask app. -// -// When processed by a bundler, this is turned into a Immediately Invoked Function Expression (IIFE) -// The IIFE format allows it to run in browsers that don't support JS Modules. -// -// Exported items will be added to the window.GOVUK namespace. -// For example, `export { Frontend }` will assign `Frontend` to `window.Frontend` -import Header from 'govuk-frontend/components/header/header'; - -// Copy of the initAll function from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/all.js -// except it only includes, and initialises, the components used by this application. -function initAll (options) { - // Set the options to an empty object by default if no options are passed. - options = typeof options !== 'undefined' ? options : {} - - // Allow the user to initialise GOV.UK Frontend in only certain sections of the page - // Defaults to the entire document if nothing is set. - var scope = typeof options.scope !== 'undefined' ? options.scope : document - - // Find first header module to enhance. - var $toggleButton = scope.querySelector('[data-module="header"]') - new Header($toggleButton).init() -} - -// Create separate namespace for GOVUK Frontend. -var Frontend = { - "Header": Header, - "initAll": initAll -} - -export { - Frontend -} diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js index c643b12fb..b85ab7ead 100644 --- a/app/assets/javascripts/templateFolderForm.js +++ b/app/assets/javascripts/templateFolderForm.js @@ -127,7 +127,7 @@ }); if (opts.hasOwnProperty('nonvisualText')) { - $btn.append(` ${opts.nonvisualText}`); + $btn.append(` ${opts.nonvisualText}`); } return $btn; diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index f3c76bd47..8fcb71000 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -1,4 +1,62 @@ // Extra CSS overlaying elements + +#global-header-bar { + background-color: $govuk-blue; +} + +#global-header, +#global-header.with-proposition { + + #logo { + + white-space: nowrap; + + #product-name { + font-size: 24px; + font-weight: 400; + padding-left: 5px; + } + + } + + .header-wrapper { + .header-global { + .header-logo { + + @include media(desktop) { + width: auto; + } + + &:after { + display: none; + } + + } + } + } + + .header-proposition { + #proposition-links { + li { + padding: 0 0 0 15px; + } + } + } + +} + +@include media(desktop) { + #proposition-menu { + float: right; + } +} + +a { + &:visited { + color: $link-colour; + } +} + .form-control-1-1 { width: 100%; } diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss deleted file mode 100644 index 559e07bbf..000000000 --- a/app/assets/stylesheets/components/cookie-message.scss +++ /dev/null @@ -1,8 +0,0 @@ -.notify-cookie-message { - @include govuk-font($size: 16); - padding: govuk-spacing(3) 0; - - .js-enabled & { - display: none; - } -} diff --git a/app/assets/stylesheets/globals.scss b/app/assets/stylesheets/globals.scss deleted file mode 100644 index e85cf2b69..000000000 --- a/app/assets/stylesheets/globals.scss +++ /dev/null @@ -1,77 +0,0 @@ -// needed for IE10 desktop snap mode: http://menacingcloud.com/?c=cssViewportOrMetaTag -@-ms-viewport { - width: device-width; -} - -b, -strong { - font-weight: 600; -} - -abbr[title] { - cursor: help; -} - -.js-enabled .js-hidden { - display: none; -} - -// To be removed when all search inputs use the GOV.UK Frontend text input component: -// https://design-system.service.gov.uk/components/text-input/ -/* - * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: searchfield-cancel-button; - margin-right: 2px; -} - -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -// To be removed when all links follow the GOV.UK Frontend conventions: -// https://design-system.service.gov.uk/styles/typography/#links -a { - &:link { - color: $link-colour; - } - - &:visited { - color: $link-visited-colour; - } - - &:hover { - color: $link-hover-colour; - } - - &:active { - color: $link-active-colour; - } -} - -// Each selector, and then the whole block when only one remains, to be removed when the -// element comes from the corresponding GOV.UK Frontend component: -// - https://design-system.service.gov.uk/components/text-input/ -// - https://design-system.service.gov.uk/components/textarea/ -// - https://design-system.service.gov.uk/components/select/ -// - https://design-system.service.gov.uk/components/button/ - -// Global styles for form controls - -input:focus, -textarea:focus, -select:focus, -button:focus { - outline: 3px solid $focus-colour; - outline-offset: 0; -} diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss deleted file mode 100644 index 56cc5fa0f..000000000 --- a/app/assets/stylesheets/govuk-frontend/_all.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Version of node_modules/govuk-frontend/components/all.scss specific to Notify -// Included to allow us to only include the components we need -// All imports come from node_modules/govuk-frontend - -// set asset URL root to match that of application -$govuk-assets-path: "/static/"; - -@import "settings/all"; -@import "tools/all"; -@import "helpers/all"; - -@import "core/all"; -@import "objects/all"; - -// section replacing @import 'components/all', specifying which components to include -@import 'components/skip-link/_skip-link'; -@import 'components/header/_header'; -@import 'components/footer/_footer'; - -@import "utilities/all"; -@import "overrides/all"; - -// Styles extending those from GOV.UK Frontend -@import './extensions'; - -// Styles for GOV.UK Frontend components specific to this application -@import './overrides'; diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss deleted file mode 100644 index e28474b05..000000000 --- a/app/assets/stylesheets/govuk-frontend/extensions.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Extends footer column styles to allow 4 columns -@include mq ($from: desktop) { - .govuk-footer__list--columns-4 { - // TODO: Move support for legacy properties to something like Post-CSS's auto-prefixer - -webkit-column-count: 4; - -moz-column-count: 4; - column-count: 4; - } -} diff --git a/app/assets/stylesheets/govuk-frontend/overrides.scss b/app/assets/stylesheets/govuk-frontend/overrides.scss deleted file mode 100644 index 30ca08c30..000000000 --- a/app/assets/stylesheets/govuk-frontend/overrides.scss +++ /dev/null @@ -1,58 +0,0 @@ -// Overrides for certain GOV.UK Frontend styles to make its components match this application's design - -// Notify's header navigation aligns to the right -.govuk-header__navigation { - text-align: right; - - // reset the alignment of each item to left-to-right - .govuk-header__navigation-item { - text-align: left; - } - -} - -// The GOV.UK Frontend header component wraps content that is `position: relative` -// This changes its z-index position, putting it above the `
` section -// We need the `
` section to be above it, like the default order, to hide the theme colour -// bar on full-width pages -.govuk-main-wrapper { - position: relative; -} - -// Additional padding-bottom override, following the GOV.UK Frontend spacing scale: -// https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale -.govuk-\!-padding-bottom-12 { - padding-bottom: 70px; - - @include govuk-media-query($from: tablet) { - padding-bottom: 90px; - } -} - -.govuk-footer__navigation { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap -} - -.govuk-footer__section { - -webkit-flex-basis: 200px; - -ms-flex-preferred-size: 200px; - flex-basis: 100%; -} - -@include govuk-media-query($from: tablet) { - - .govuk-footer__navigation { - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap - } - - .govuk-footer__section { - -webkit-flex-basis: 200px; - -ms-flex-preferred-size: 200px; - flex-basis: 200px; - } - -} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index d6b72051b..3571fe020 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -16,9 +16,6 @@ $path: '/static/images/'; // Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application @import 'url-helpers'; -// Specific to this application, needs to go at the top of the cascade -@import 'globals'; - // Dependencies from GOV.UK Elements // https://github.com/alphagov/govuk_elements @import 'elements/helpers'; @@ -34,12 +31,9 @@ $path: '/static/images/'; @import 'elements/panels'; @import 'elements/tables'; -// Dependencies from GOV.UK Frontend, packaged to be specific to this application -@import './govuk-frontend/all'; // Specific to this application @import 'grids'; -@import 'components/cookie-message'; @import 'components/site-footer'; @import 'components/placeholder'; @import 'components/sms-message'; diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss deleted file mode 100644 index 88a014faf..000000000 --- a/app/assets/stylesheets/print.scss +++ /dev/null @@ -1,85 +0,0 @@ -// sass-lint:disable no-important -// set asset URL root to match that of application -$govuk-assets-path: "/static/"; - -@import "settings/all"; -@import "tools/all"; -@import "helpers/all"; - -@import "core/all"; -@import "objects/all"; - -* { - background: transparent; - color: black; - text-shadow: none; - filter: none; - -ms-filter: none; -} - -body { - @include govuk-font($size: 14); - margin: 0; - padding: 0; - width: 100%; -} - -a, -a:visited { - word-wrap: break-word; -} - -a[href^="/"]:after, -a[href^="http://"]:after, -a[href^="https://"]:after { - content: " (" attr(href) ")"; - font-size: 90%; -} - -a[href^="javascript:"]:after, -a[href^="#"]:after { - content: ""; -} - -img { - max-width: 100% !important; -} - -select { - background: white; -} - -.govuk-header { - - .govuk-header__logo { - @include govuk-font($size: 19); - text-rendering: optimizeLegibility; - - a { - &, - &:visited { - text-decoration: none; - } - - &:after { - content: ""; - } - } - - svg { - width: 45px; - height: 40px; - position: relative; - top: -3px; - vertical-align: bottom; - } - } -} - -.govuk-visually-hidden, -.govuk-visually-hidden-focusable, -.notify-cookie-message, -.govuk-skip-link, -.govuk-footer { - display: none !important; -} diff --git a/app/navigation.py b/app/navigation.py index 281b8173e..d4faadcdf 100644 --- a/app/navigation.py +++ b/app/navigation.py @@ -328,10 +328,6 @@ class HeaderNavigation(Navigation): 'whitelist', } - # header HTML now comes from GOVUK Frontend so requires a boolean, not an attribute - def is_selected(self, navigation_item): - return request.endpoint in self.mapping[navigation_item] - class MainNavigation(Navigation): diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index 3f4af50d5..ff30b79cc 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -1,236 +1,114 @@ -{% extends "template.njk" %} +{% extends "govuk_template.html" %} {% from "components/banner.html" import banner %} -{% from "components/notify-footer.html" import notify_footer %} - -{% block headIcons %} - - {# Hardcoded value of $govuk-black #} - - - - -{% endblock %} {% block head %} - {% block meta %} {% endblock %} {% endblock %} -{% block pageTitle %} +{% block page_title %} {% block per_page_title %}{% endblock %} – GOV.UK Notify {% endblock %} -{% block bodyStart %} - {% block cookie_message %} -