diff --git a/CHANGELOG.md b/CHANGELOG.md index 20e8f1317b..31dc21ce13 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -198,6 +198,20 @@ To fix this error, replace any imports of `node_modules/govuk-frontend/govuk/cor This change was introduced in [pull request #22463: Move template styles from `core` to `objects` layer](https://github.com/alphagov/govuk-frontend/pull/2463). +#### 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. We've also removed the logic that assumes a 2-section layout displays as a 'two-thirds and one-third' layout. Footer sections now display as full-width by default. + +If you're using the Nunjucks macros, check your footer displays as expected and use the `width` macro option to set the width you want for each section. + +If you're not using the Nunjucks macros, check your footer displays as expected and use the standard Design System grid classes on the `govuk-footer__section` element to set the width. For example: + +```html +
...
+``` + +This change was introduced in [pull request #2462: Fix footer alignment with grid classes and add `width` macro option](https://github.com/alphagov/govuk-frontend/pull/2462). + ### 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. diff --git a/app/views/examples/footer-alignment/index.njk b/app/views/examples/footer-alignment/index.njk index 5c9943527f..c7ad68bf8c 100644 --- a/app/views/examples/footer-alignment/index.njk +++ b/app/views/examples/footer-alignment/index.njk @@ -39,8 +39,8 @@ {{ govukFooter({ "navigation": [ { - "title": "Single column list 1", - "columns": 1, + "title": "One-third", + "width": "one-third", "items": [ { "href": "#1", @@ -57,8 +57,8 @@ ] }, { - "title": "Single column list 2", - "columns": 1, + "title": "One-third", + "width": "one-third", "items": [ { "href": "#1", @@ -75,8 +75,8 @@ ] }, { - "title": "Single column list 3", - "columns": 1, + "title": "One-third", + "width": "one-third", "items": [ { "href": "#1", @@ -96,7 +96,7 @@ }) }}
-

Two column list on the left

+

Two-thirds (two columns) / one-third layout

One third

@@ -122,7 +122,8 @@ {{ govukFooter({ "navigation": [ { - "title": "Two column list", + "title": "Two-thirds (two columns)", + "width": "two-thirds", "columns": 2, "items": [ { @@ -152,7 +153,8 @@ ] }, { - "title": "Single column list", + "title": "One-third", + "width": "one-third", "items": [ { "href": "#1", @@ -172,7 +174,7 @@ }) }}
-

Two column list on the right

+

Two-thirds (one column) / one-third layout

One third

@@ -198,7 +200,8 @@ {{ govukFooter({ "navigation": [ { - "title": "Single column list", + "title": "Two-thirds (one column)", + "width": "two-thirds", "items": [ { "href": "#1", @@ -215,8 +218,8 @@ ] }, { - "title": "Two column list", - "columns": 2, + "title": "One-third", + "width": "one-third", "items": [ { "href": "#1", @@ -229,8 +232,74 @@ { "href": "#3", "text": "Navigation item 3" + } + ] + } + ] + }) }} + +
+

One-third / two-thirds (two columns) layout

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+
+ + {{ govukFooter({ + "navigation": [ + { + "title": "One-third", + "width": "one-third", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" }, { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + } + ] + }, + { + "title": "Two-thirds (two columns)", + "width": "two-thirds", + "columns": 2, + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + }, + { "href": "#4", "text": "Navigation item 4" }, @@ -248,7 +317,72 @@ }) }}
-

Two equal columns

+

One-third / two-thirds (one column) layout

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+
+ + {{ govukFooter({ + "navigation": [ + { + "title": "One-third", + "width": "one-third", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + } + ] + }, + { + "title": "Two-thirds (one column)", + "width": "two-thirds", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + } + ] + } + ] + }) }} + +
+

Quarters

One quarter

@@ -280,7 +414,26 @@ {{ govukFooter({ "navigation": [ { - "title": "Single column list", + "title": "One quarter", + "width": "one-quarter", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + } + ] + }, + { + "title": "One quarter", + "width": "one-quarter", "items": [ { "href": "#1", @@ -297,8 +450,79 @@ ] }, { - "title": "Single column list", - "columns": 1, + "title": "One quarter", + "width": "one-quarter", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + } + ] + }, + { + "title": "One quarter", + "width": "one-quarter", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + } + ] + } + ] + }) }} + +
+

One-half (one column)

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+
+ + {{ govukFooter({ + "navigation": [ + { + "title": "One half", + "width": "one-half", "items": [ { "href": "#1", @@ -313,6 +537,253 @@ "text": "Navigation item 3" } ] + }, + { + "title": "One half", + "width": "one-half", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + } + ] + } + ] + }) }} + +
+

One-half (two columns)

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One quarter

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+
+ + {{ govukFooter({ + "navigation": [ + { + "title": "One half", + "width": "one-half", + "columns": 2, + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + }, + { + "href": "#4", + "text": "Navigation item 4" + }, + { + "href": "#5", + "text": "Navigation item 5" + }, + { + "href": "#6", + "text": "Navigation item 6" + } + ] + }, + { + "title": "One half", + "width": "one-half", + "columns": 2, + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + }, + { + "href": "#4", + "text": "Navigation item 4" + }, + { + "href": "#5", + "text": "Navigation item 5" + }, + { + "href": "#6", + "text": "Navigation item 6" + } + ] + } + ] + }) }} + +
+

Full width

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+
+ + {{ govukFooter({ + "navigation": [ + { + "title": "Full width", + "columns": 3, + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + }, + { + "href": "#4", + "text": "Navigation item 4" + }, + { + "href": "#5", + "text": "Navigation item 5" + }, + { + "href": "#6", + "text": "Navigation item 6" + } + ] + } + ] + }) }} + +
+

Multi-row layout

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+

One third

+

+ This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. +

+
+
+
+ + {{ govukFooter({ + "navigation": [ + { + "title": "Two-thirds (one column)", + "width": "two-thirds", + "columns": 2, + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + } + ] + }, + { + "title": "Two-thirds (two-columns)", + "width": "two-thirds", + "columns": 2, + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + }, + { + "href": "#4", + "text": "Navigation item 4" + } + ] + }, + { + "title": "One-third", + "width": "one-third", + "items": [ + { + "href": "#1", + "text": "Navigation item 1" + } + ] } ] }) }} diff --git a/app/views/full-page-examples/announcements/index.njk b/app/views/full-page-examples/announcements/index.njk index f629bf5e84..67baeaeea0 100644 --- a/app/views/full-page-examples/announcements/index.njk +++ b/app/views/full-page-examples/announcements/index.njk @@ -157,6 +157,7 @@ notes: Based on https://www.gov.uk/government/news/strictly-vampires-and-sausage navigation: [ { title: "Services and information", + width: "two-thirds", columns: 2, items: [ { @@ -227,6 +228,7 @@ notes: Based on https://www.gov.uk/government/news/strictly-vampires-and-sausage }, { title: "Departments and policy", + width: "one-third", items: [ { href: "#", diff --git a/app/views/full-page-examples/campaign-page/index.njk b/app/views/full-page-examples/campaign-page/index.njk index 2078e98d14..c2b1b080c5 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,148 @@ notes: >-
{% endblock %} + +{% block footer %} + + + {{ govukFooter({ + navigation: [ + { + title: "Coronavirus (COVID-19)", + width: "two-thirds", + 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", + width: "two-thirds", + 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", + width: "one-third", + 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 %} diff --git a/src/govuk/components/footer/_index.scss b/src/govuk/components/footer/_index.scss index 81b4fde52f..441dba5449 100644 --- a/src/govuk/components/footer/_index.scss +++ b/src/govuk/components/footer/_index.scss @@ -136,8 +136,9 @@ } .govuk-footer__heading { - @include govuk-responsive-margin(7, "bottom"); + margin-bottom: govuk-spacing(6); padding-bottom: govuk-spacing(4); + @include govuk-media-query ($until: tablet) { padding-bottom: govuk-spacing(2); } @@ -145,35 +146,15 @@ } .govuk-footer__navigation { - display: flex; // Support: Flexbox + @include govuk-clearfix; margin-right: -$govuk-gutter-half; margin-left: -$govuk-gutter-half; - flex-wrap: wrap; // Support: Flexbox } .govuk-footer__section { display: inline-block; - margin-right: $govuk-gutter-half; margin-bottom: $govuk-gutter; - margin-left: $govuk-gutter-half; vertical-align: top; - // Ensure columns take up equal width (typically one-half:one-half) - flex-grow: 1; // Support: Flexbox - flex-shrink: 1; // Support: Flexbox - @include govuk-media-query ($until: desktop) { - // Make sure columns do not drop below 200px in width - // Will typically result in wrapping, and end up in a single column on smaller screens. - flex-basis: 200px; // Support: Flexbox - } - } - - // If there are only two sections, set the layout to be two-third:one-third on desktop - @include govuk-media-query ($from: desktop) { - // We match the first section with `:first-child`. - // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`. - .govuk-footer__section:first-child:nth-last-child(2) { - flex-grow: 2; // Support: Flexbox - } } .govuk-footer__list { diff --git a/src/govuk/components/footer/footer.yaml b/src/govuk/components/footer/footer.yaml index beb2e6bde1..61b853ade4 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: width + type: string + required: false + description: Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'. - name: items type: array required: false @@ -161,10 +165,46 @@ examples: meta: text: GOV.UK Prototype Kit v7.0.1 +- name: with default width navigation (one column) + data: + navigation: + - title: Navigation section + items: + - href: '#1' + text: Navigation item 1 + - href: '#2' + text: Navigation item 2 + - href: '#3' + text: Navigation item 3 + - href: '#4' + text: Navigation item 4 + - href: '#5' + text: Navigation item 5 + - href: '#6' + +- name: with default width navigation (two columns) + data: + navigation: + - title: Navigation section + columns: 2 + items: + - href: '#1' + text: Navigation item 1 + - href: '#2' + text: Navigation item 2 + - href: '#3' + text: Navigation item 3 + - href: '#4' + text: Navigation item 4 + - href: '#5' + text: Navigation item 5 + - href: '#6' + - name: with navigation data: navigation: - title: Two column list + width: two-thirds columns: 2 items: - href: '#1' @@ -180,6 +220,7 @@ examples: - href: '#6' text: Navigation item 6 - title: Single column list + width: one-third items: - href: '#1' text: Navigation item 1 @@ -188,11 +229,22 @@ 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: + - title: Coronavirus (COVID-19) + width: two-thirds + items: + - href: '/coronavirus' + text: 'Coronavirus (COVID-19): guidance and support' + - title: Brexit + width: one-third + items: + - href: '/brexit' + text: Check what you need to do - title: Services and information + width: two-thirds columns: 2 items: - href: '/browse/benefits' @@ -228,6 +280,7 @@ examples: - href: '/browse/working' text: Working, jobs and pensions - title: Departments and policy + width: one-third items: - href: '/government/how-government-works' text: How government works @@ -260,6 +313,7 @@ examples: data: navigation: - title: Single column list 1 + width: one-third columns: 1 items: - href: '#1' @@ -275,6 +329,7 @@ examples: - href: '#6' text: Navigation item 6 - title: Single column list 2 + width: one-third columns: 1 items: - href: '#1' @@ -290,6 +345,7 @@ examples: - href: '#6' text: Navigation item 6 - title: Single column list 3 + width: one-third columns: 1 items: - href: '#1' @@ -307,32 +363,40 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes + hidden: true data: attributes: data-test-attribute: value data-test-attribute-2: value-2 - name: classes + hidden: true data: classes: app-footer--custom-modifier - name: with container classes + hidden: true data: containerClasses: app-width-container - name: with empty meta + hidden: true data: meta: {} - name: with empty meta items + hidden: true data: meta: items: [] - name: meta html as text + hidden: true data: meta: text: GOV.UK Prototype Kit v7.0.1 - name: with meta html + hidden: true data: meta: html: GOV.UK Prototype Kit v7.0.1 - name: with meta item attributes + hidden: true data: meta: items: @@ -342,9 +406,11 @@ examples: data-attribute: my-attribute data-attribute-2: my-attribute-2 - name: with empty navigation + hidden: true data: navigation: [] - name: with navigation item attributes + hidden: true data: navigation: - title: Single column list 1 diff --git a/src/govuk/components/footer/template.njk b/src/govuk/components/footer/template.njk index 3b53788f82..61226227e8 100644 --- a/src/govuk/components/footer/template.njk +++ b/src/govuk/components/footer/template.njk @@ -4,7 +4,7 @@ {% if params.navigation | length %}
{% for nav in params.navigation %} -
+

{{ nav.title }}

{% if nav.items | length %} {% set listClasses %} diff --git a/src/govuk/components/footer/template.test.js b/src/govuk/components/footer/template.test.js index 05fc7ce790..86a91f47b6 100644 --- a/src/govuk/components/footer/template.test.js +++ b/src/govuk/components/footer/template.test.js @@ -75,15 +75,13 @@ describe('footer', () => { it('doesn\'t render footer link list when no items are provided', () => { const $ = render('footer', examples['with empty meta items']) - const $component = $('.govuk-footer') - expect($component.find('.govuk-footer__inline-list').length).toEqual(0) + expect($('.govuk-footer__inline-list').length).toEqual(0) }) it('renders links', () => { const $ = render('footer', examples['with meta']) - const $component = $('.govuk-footer') - const $list = $component.find('ul.govuk-footer__inline-list') + const $list = $('ul.govuk-footer__inline-list') const $items = $list.find('li.govuk-footer__inline-list-item') const $firstItem = $items.find('a.govuk-footer__link:first-child') expect($items.length).toEqual(3) @@ -94,24 +92,21 @@ describe('footer', () => { it('renders custom meta text', () => { const $ = render('footer', examples['with custom meta']) - const $component = $('.govuk-footer') - const $custom = $component.find('.govuk-footer__meta-custom') + const $custom = $('.govuk-footer__meta-custom') expect($custom.text()).toContain('GOV.UK Prototype Kit v7.0.1') }) it('renders custom meta html as text', () => { const $ = render('footer', examples['meta html as text']) - const $component = $('.govuk-footer') - const $custom = $component.find('.govuk-footer__meta-custom') + const $custom = $('.govuk-footer__meta-custom') expect($custom.text()).toContain('GOV.UK Prototype Kit v7.0.1') }) it('renders custom meta html', () => { const $ = render('footer', examples['with meta html']) - const $component = $('.govuk-footer') - const $custom = $component.find('.govuk-footer__meta-custom') + const $custom = $('.govuk-footer__meta-custom') expect($custom.text()).toContain('GOV.UK Prototype Kit v7.0.1') }) @@ -135,16 +130,14 @@ describe('footer', () => { it('no items displayed when no item array is provided', () => { const $ = render('footer', examples['with empty navigation']) - const $component = $('.govuk-footer') - expect($component.find('.govuk-footer__navigation').length).toEqual(0) + expect($('.govuk-footer__navigation').length).toEqual(0) }) it('renders headings', () => { const $ = render('footer', examples['with navigation']) - const $component = $('.govuk-footer') - const $firstSection = $component.find('.govuk-footer__section:first-child') - const $lastSection = $component.find('.govuk-footer__section:last-child') + const $firstSection = $('.govuk-footer__section:first-child') + const $lastSection = $('.govuk-footer__section:last-child') const $firstHeading = $firstSection.find('h2.govuk-footer__heading') const $lastHeading = $lastSection.find('h2.govuk-footer__heading') expect($firstHeading.text()).toEqual('Two column list') @@ -154,8 +147,7 @@ describe('footer', () => { it('renders lists of links', () => { const $ = render('footer', examples['with navigation']) - const $component = $('.govuk-footer') - const $list = $component.find('ul.govuk-footer__list') + const $list = $('ul.govuk-footer__list') const $items = $list.find('li.govuk-footer__list-item') const $firstItem = $items.find('a.govuk-footer__link:first-child') expect($items.length).toEqual(9) @@ -174,26 +166,44 @@ describe('footer', () => { it('renders lists in columns', () => { const $ = render('footer', examples['with navigation']) - const $component = $('.govuk-footer') - const $list = $component.find('ul.govuk-footer__list') + const $list = $('ul.govuk-footer__list') expect($list.hasClass('govuk-footer__list--columns-2')).toBeTruthy() }) + + it('renders one-column section full width by default', () => { + const $ = render('footer', examples['with default width navigation (one column)']) + + const $section = $('.govuk-footer__section') + expect($section.hasClass('govuk-grid-column-full')).toBeTruthy() + }) + + it('renders two-column section full width by default', () => { + const $ = render('footer', examples['with default width navigation (two columns)']) + + const $section = $('.govuk-footer__section') + expect($section.hasClass('govuk-grid-column-full')).toBeTruthy() + }) + + it('renders section custom width when width specified', () => { + const $ = render('footer', examples['with navigation']) + + const $section = $('.govuk-footer__section') + expect($section.hasClass('govuk-grid-column-two-thirds')).toBeTruthy() + }) }) describe('section break', () => { it('renders when there is a navigation', () => { const $ = render('footer', examples['with navigation']) - const $component = $('.govuk-footer') - const $sectionBreak = $component.find('hr.govuk-footer__section-break') + const $sectionBreak = $('hr.govuk-footer__section-break') expect($sectionBreak.length).toBeTruthy() }) it('renders nothing when there is only meta', () => { const $ = render('footer', examples['with meta']) - const $component = $('.govuk-footer') - const $sectionBreak = $component.find('hr.govuk-footer__section-break') + const $sectionBreak = $('hr.govuk-footer__section-break') expect($sectionBreak.length).toBeFalsy() }) })