From da990d80b5249a6d22cde3f221d8da572af65a78 Mon Sep 17 00:00:00 2001 From: Laurence de Bruxelles Date: Mon, 8 Nov 2021 11:21:41 +0000 Subject: [PATCH 1/5] Add span parameter to footer sections Allow having a footer section that spans multiple columns but does not have multiple columns of list items. Useful if you have multiple rows of sections and want to align a section with only a few items with a section with many items (for instance the current GOV.UK footer layout). --- src/govuk/components/footer/_index.scss | 10 ++++++---- src/govuk/components/footer/footer.yaml | 4 ++++ src/govuk/components/footer/template.njk | 6 ++++-- src/govuk/components/footer/template.test.js | 2 +- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/govuk/components/footer/_index.scss b/src/govuk/components/footer/_index.scss index 460aec46e7..9c14410325 100644 --- a/src/govuk/components/footer/_index.scss +++ b/src/govuk/components/footer/_index.scss @@ -171,21 +171,23 @@ } @include govuk-media-query ($from: tablet) { - .govuk-footer__section--span-2 { + .govuk-footer__section--span-2, + .govuk-footer__section--columns-2 { flex-grow: 0; width: (2 * 100% / 3); } - .govuk-footer__section--span-2 .govuk-footer__list { + .govuk-footer__section--columns-2 .govuk-footer__list { column-count: 2; // Support: Columns } - .govuk-footer__section--span-3 { + .govuk-footer__section--span-3, + .govuk-footer__section--columns-3 { flex-grow: 0; width: 100%; } - .govuk-footer__section--span-3 .govuk-footer__list { + .govuk-footer__section--columns-3 .govuk-footer__list { column-count: 3; // Support: Columns } } diff --git a/src/govuk/components/footer/footer.yaml b/src/govuk/components/footer/footer.yaml index beb2e6bde1..4b2b34edac 100644 --- a/src/govuk/components/footer/footer.yaml +++ b/src/govuk/components/footer/footer.yaml @@ -46,6 +46,10 @@ params: type: integer required: false description: Amount of columns to display items in navigation section of the footer. + - name: span + type: integer + required: false + description: Amount of columns to span (without wrapping) in navigation section of the footer. Useful if you have a multi-row layout. Overrides columns. - name: items type: array required: false diff --git a/src/govuk/components/footer/template.njk b/src/govuk/components/footer/template.njk index 6130023393..573229d379 100644 --- a/src/govuk/components/footer/template.njk +++ b/src/govuk/components/footer/template.njk @@ -5,8 +5,10 @@
{% for nav in params.navigation %} {% set sectionClasses -%} - {%- if nav.columns -%} - govuk-footer__section--span-{{ nav.columns }} + {%- if nav.span -%} + govuk-footer__section--span-{{ nav.span }} + {%- elif nav.columns -%} + govuk-footer__section--columns-{{ nav.columns }} {%- endif -%} {%- endset %}
diff --git a/src/govuk/components/footer/template.test.js b/src/govuk/components/footer/template.test.js index db6b1a2e5c..74c34f6be6 100644 --- a/src/govuk/components/footer/template.test.js +++ b/src/govuk/components/footer/template.test.js @@ -176,7 +176,7 @@ describe('footer', () => { const $component = $('.govuk-footer') const $section = $component.find('div.govuk-footer__section') - expect($section.hasClass('govuk-footer__section--span-2')).toBeTruthy() + expect($section.hasClass('govuk-footer__section--columns-2')).toBeTruthy() }) }) From 6b1ce5f25fe528cb1ad36b878ab3c0d303c3656c Mon Sep 17 00:00:00 2001 From: Laurence de Bruxelles Date: Mon, 8 Nov 2021 11:05:25 +0000 Subject: [PATCH 2/5] Update GOV.UK footer example --- src/govuk/components/footer/footer.yaml | 27 +++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/govuk/components/footer/footer.yaml b/src/govuk/components/footer/footer.yaml index 4b2b34edac..f805643986 100644 --- a/src/govuk/components/footer/footer.yaml +++ b/src/govuk/components/footer/footer.yaml @@ -196,6 +196,15 @@ examples: description: A full example based on GOV.UK's current footer data: navigation: + - title: Coronavirus (COVID-19) + span: 2 + items: + - href: '/coronavirus' + text: 'Coronavirus (COVID-19): guidance and support' + - title: Brexit + items: + - href: '/brexit' + text: Check what you need to do - title: Services and information columns: 2 items: @@ -239,12 +248,18 @@ examples: text: Departments - href: '/world' text: Worldwide - - href: '/government/policies' - text: Policies - - href: '/government/publications' - text: Publications - - href: '/government/announcements' - text: Announcements + - href: '/search/services' + text: Services + - href: '/search/guidance-and-regulation' + text: Guidance and regulation + - href: '/search/news-and-communications' + text: News and communications + - href: '/search/research-and-statistics' + text: Research and statistics + - href: '/search/policy-papers-and-consultations' + text: Policy papers and consultations + - href: '/search/transparency-and-freedom-of-information-releases' + text: Transparency and freedom of information release meta: items: - href: '/help' From c9bfb6debe7ab9b9d974b756a6b8643ffaecf008 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Mon, 29 Nov 2021 13:32:08 +0000 Subject: [PATCH 3/5] Update full page campaign page example with GOV.UK footer This commit takes the example screenshot from this issue https://github.com/alphagov/govuk-frontend/issues/1726 - where it's reported that it's not possible to build the layout given the alignment issues - and adds a version of the footer to the full page example campaign page in the review app so we have an example of this layout to test against. --- .../campaign-page/index.njk | 143 ++++++++++++++++++ 1 file changed, 143 insertions(+) diff --git a/app/views/full-page-examples/campaign-page/index.njk b/app/views/full-page-examples/campaign-page/index.njk index 2078e98d14..77f2460216 100644 --- a/app/views/full-page-examples/campaign-page/index.njk +++ b/app/views/full-page-examples/campaign-page/index.njk @@ -13,6 +13,7 @@ notes: >- {% from "header/macro.njk" import govukHeader %} {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} {% from "accordion/macro.njk" import govukAccordion %} +{% from "footer/macro.njk" import govukFooter %} {% set pageTitle = "Coronavirus (COVID‑19)" %} {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %} @@ -230,3 +231,145 @@ notes: >-
{% endblock %} + +{% block footer %} + + + {{ govukFooter({ + navigation: [ + { + title: "Coronavirus (COVID-19)", + columns: 2, + items: [ + { + href: "#", + text: "Coronavirus (COVID-19): guidance and support" + }, + { + href: "#", + text: "Another link" + }, + { + href: "#", + text: "Another link" + }, + { + href: "#4", + text: "Another link" + } + ] + }, + { + title: "Services and Information", + columns: 2, + items: [ + { + href: "#", + text: "Benefits" + }, + { + href: "#", + text: "Births, deaths and marriages" + }, + { + href: "#", + text: "Business and self-employed" + }, + { + href: "#", + text: "Childcare and parenting" + }, + { + href: "#", + text: "Citizenship and living in the UK" + }, + { + href: "#", + text: "Crime, justice and the law" + }, + { + href: "#", + text: "Disabled people" + }, + { + href: "#", + text: "Driving and transport" + }, + { + href: "#", + text: "Education and learning" + }, + { + href: "#", + text: "Employing people" + }, + { + href: "#", + text: "Environment and countryside" + }, + { + href: "#", + text: "Housing and local services" + }, + { + href: "#", + text: "Money and tax" + }, + { + href: "#", + text: "Passports and living abroad" + }, + { + href: "#", + text: "Visas and immigration" + }, + { + href: "#", + text: "Working, jobs and pensions" + } + ] + }, + { + title: "Departments and policy", + items: [ + { + href: "#", + text: "How government works" + }, + { + href: "#", + text: "Departments" + }, + { + href: "#", + text: "Worldwide" + }, + { + href: "#", + text: "Services" + }, + { + href: "#", + text: "Guidance and regulation" + }, + { + href: "#", + text: "News and communications" + }, + { + href: "#", + text: "Research and statistics" + }, + { + href: "#", + text: "Policy papers and consultations" + }, + { + href: "#", + text: "Transparency and freedom of information releases" + } + ] + } + ] + }) }} +{% endblock %} From 7c4ea3c074b898512181a5271942f4deb77f4876 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Wed, 1 Dec 2021 16:55:27 +0000 Subject: [PATCH 4/5] Rename GOV.UK footer example When the footer example has 'GOV.UK' in the name, it gets flagged by Chrome as a possible spam/phishing site which means you can't open that example in a new window. This commit works around that issue by renaming the example - it seems to be the word "GOV.UK" which triggers it --- src/govuk/components/footer/footer.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/govuk/components/footer/footer.yaml b/src/govuk/components/footer/footer.yaml index f805643986..9a6bc11840 100644 --- a/src/govuk/components/footer/footer.yaml +++ b/src/govuk/components/footer/footer.yaml @@ -192,7 +192,7 @@ examples: - href: '#3' text: Navigation item 3 -- name: GOV.UK +- name: Full GDS example description: A full example based on GOV.UK's current footer data: navigation: From c37954223a17b2451edcf0256b242ba1898c92e4 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Thu, 2 Dec 2021 14:03:00 +0000 Subject: [PATCH 5/5] Add to Changelog Add Changelog entries for https://github.com/alphagov/govuk-frontend/pull/2446 and https://github.com/alphagov/govuk-frontend/pull/2428 --- CHANGELOG.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4511e74489..c8ba6e9c8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -136,6 +136,22 @@ If you're passing custom HTML into the cookie banner component (for example, usi This change was introduced in [pull request #2432: Remove default font styles from cookie banner Sass](https://github.com/alphagov/govuk-frontend/pull/2432). +#### Check your footer displays as expected + +We’ve made some fixes to the alignment of columns within the footer component, so they align with our grid. This involved changing the name and position of the `govuk-footer__list—columns` classes. + +Replace any instances of `govuk-footer__list—columns` classes with `govuk-footer__section—columns`. + +If you're using HTML, you'll also need to move the classes from the `govuk-footer__list` element to the `govuk-footer__section` element. For example: + +``` +
+
    ...
+
+``` + +This change was introduced in [pull request #2428: Fix footer alignment with grid classes](https://github.com/alphagov/govuk-frontend/pull/2428) and [pull request #2446: Add support for footer sections that span multiple columns](https://github.com/alphagov/govuk-frontend/pull/2446). + ### Optional changes We've recently made some other changes to GOV.UK Frontend. While these are not breaking changes, implementing them will make your service work better. @@ -181,6 +197,24 @@ If you’re not using Nunjucks macros, add a new `data-nosnippet` attribute to t This was added in [pull request #2192: Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets](https://github.com/alphagov/govuk-frontend/pull/2192). +### New Features + +#### Add footer sections which span multiple columns + +You can now have footer sections which span multiple columns, but do not contain multiple columns of list items. + +This may be helpful if you want to highlight a specific link in the footer, but you also want it to align with a section below that has multiple columns of list items. + +To do this, use the `span` macro option. If you're using the HTML component, apply the appropriate class to the `govuk-footer__section` element, for example: + +``` +
+
    ...
+
+``` + +This feature was introduced in [pull request #2446: Add support for footer sections that span multiple columns](https://github.com/alphagov/govuk-frontend/pull/2446) + ### Fixes We’ve made fixes to GOV.UK Frontend in the following pull requests: