Fix footer alignment with grid classes and add `width` macro option #2462

vanitabarrett · 2021-12-06T15:26:16Z

Why

This PR attempts to rework what was originally spiked in #2446 and #2428 to have the same outcome, but without using flexbox. When reviewing the previous PRs, we realised that due to the fallback provided for older browsers, we were 1) duplicating a lot of what our existing grid does, and 2) flexbox was only really being used for 'dynamic' half/half layouts.

One positive of using flexbox was that we could support more 'dynamic' layouts where the footer sections could shrink/grow accordingly. However, the downsides are that it makes the code difficult to follow and it was potentially also a bit of "magic" for users.

What

This PR makes the following changes:

Strips out flexbox, uses our grid instead
Removes certain assumptions we'd made about the layout of a footer dependent on the number of sections
Introduces a width macro option to explicitly set the width of the section if needed, using our grid widths
Sets the default width of a footer section to full width - this is most similar to the current behaviour where if you pass only one section it renders as full width

Links for testing

https://govuk-frontend-pr-2462.herokuapp.com/components/footer
https://govuk-frontend-pr-2462.herokuapp.com/examples/footer-alignment
https://govuk-frontend-pr-2462.herokuapp.com/full-page-examples/campaign-page

Screenshots

IE8

CHANGELOG.md

EoinShaughnessy

Content looks nice and clear! Just added a few comments.

36degrees

Generally think the approach is sound and the changes are looking good – a few minor comments.

Something of an edge case, but long words can overflow across other columns – but this is also true of the grid elsewhere. Not sure if it's worth worrying about as I couldn't think of any realistic examples, other than a long email address which seems an like unlikely thing to put in a section.

src/govuk/components/footer/_index.scss

src/govuk/components/footer/template.njk

36degrees · 2021-12-08T14:49:35Z

src/govuk/components/footer/template.test.js

+    it('renders two-column section full width by default', () => {
+      const $ = render('footer', examples['with default width navigation (two columns)'])
+
+      const $component = $('.govuk-footer')
+      const $section = $component.find('.govuk-footer__section')
+      expect($section.hasClass('govuk-grid-column-full')).toBeTruthy()
+    })


I'm not 100% sure what this is testing. I think the only difference between this and the previous test is that this one has columns set?

Yep, you're right, that is the only difference. I think I added it just to double check that columns being set doesn't have any impact on the width class being set because originally they were linked. But maybe that's not really worth testing now?

36degrees · 2021-12-08T14:51:57Z

src/govuk/components/footer/template.test.js

+      const $component = $('.govuk-footer')
+      const $section = $component.find('.govuk-footer__section')


I know this is consistent with some of the other tests, but not sure we're getting much from doing a query to find the 'component' and then a second query to find the section within it.

What do you think about just looking for the section in the first place?

Suggested change

const $component = $('.govuk-footer')

const $section = $component.find('.govuk-footer__section')

const $section = $('.govuk-footer__section')

Thanks, good point! I've added a new commit to remove these in the footer tests.

src/govuk/components/footer/footer.yaml

app/views/full-page-examples/announcements/index.njk

app/views/examples/footer-alignment/index.njk

Allow users to set the width of a footer section explicitly. For example: set `width: 'two-thirds'` for a two-third section.

Each list in the footer section as a bottom margin of 30px, and a top margin (which is actually set by a bottom margin on the heading) of 40px on desktop and 30px on mobile. This means that on desktop the spacing above and below the list is unequal. Having spoken to Chris, we've decided to make this spacing and drop the heading margin down to 30px on all breakpoints as it felt too large.

Update the footer YAML examples to use the new `width` macro option Update the full GOV.UK yaml example to reflect the current layout and use the new `width` macro option. This commit also renames the 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

This commit updates the announcement example to fix the footer layout to a two-thirds/one-third layout as it was before, using the new `width` macro option. This commit updates the campaign page example. It builds a footer based on the example screenshot from #1726

Some of the examples in the footer.yaml file that we use for tests were not marked as `hidden`. This commit adds those missing `hidden` attributes so they're not shown in the review app

The footer tests included a query to look up the `.govuk-footer` component, and then a second query to look up the specific element within that component to test. We can remove the first query and go straight to the second for most tests.

EoinShaughnessy

Looks great! 👍🏻

36degrees

Ship it! 🚢

See alphagov/govuk-frontend#2462

* This is in response to bumping our version of `govuk-frontend`: https://github.com/alphagov/govuk-frontend/blob/main/CHANGELOG.md#check-your-footer-displays-as-expected * The original PR which forces the change: alphagov/govuk-frontend#2462

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 6, 2021 15:26 Inactive

vanitabarrett force-pushed the footer-grid branch from 39832b3 to 06f398d Compare December 6, 2021 15:33

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 6, 2021 15:34 Inactive

vanitabarrett force-pushed the footer-grid branch from 06f398d to 4106b54 Compare December 6, 2021 15:41

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 6, 2021 15:41 Inactive

vanitabarrett changed the title ~~[WIP] Footer grid without flexbox~~ [WIP] Fix footer alignment with grid classes and add span macro option Dec 6, 2021

vanitabarrett changed the title ~~[WIP] Fix footer alignment with grid classes and add span macro option~~ Fix footer alignment with grid classes and add span macro option Dec 6, 2021

vanitabarrett mentioned this pull request Dec 6, 2021

Add support for footer sections that span multiple columns #2446

Closed

14 tasks

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 6, 2021 16:01 Inactive

vanitabarrett mentioned this pull request Dec 6, 2021

Fix footer alignment with grid classes #2428

Closed

14 tasks

vanitabarrett marked this pull request as ready for review December 6, 2021 16:05

vanitabarrett linked an issue Dec 6, 2021 that may be closed by this pull request

Improve the layout options for the footer component. #1726

Closed

1 task

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 7, 2021 11:04 Inactive

vanitabarrett force-pushed the footer-grid branch from 9983d5f to 951e023 Compare December 8, 2021 10:20

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 10:20 Inactive

vanitabarrett force-pushed the footer-grid branch from 951e023 to 727b949 Compare December 8, 2021 10:52

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 10:53 Inactive

vanitabarrett force-pushed the footer-grid branch from 727b949 to 93d0f37 Compare December 8, 2021 11:20

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 11:20 Inactive

Vanita Barrett added 2 commits December 8, 2021 11:20

Remove assumption that two sections should be two-third/one-third

fd9e9b1

Remove flex and set default section width to full width

2ffea25

vanitabarrett changed the title ~~Fix footer alignment with grid classes and add span macro option~~ Fix footer alignment with grid classes and add width macro option Dec 8, 2021

vanitabarrett force-pushed the footer-grid branch from 93d0f37 to 2f9668f Compare December 8, 2021 11:28

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 11:28 Inactive

vanitabarrett force-pushed the footer-grid branch from 2f9668f to 8d8f12d Compare December 8, 2021 11:28

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 11:29 Inactive

vanitabarrett force-pushed the footer-grid branch from 8d8f12d to 92f67c0 Compare December 8, 2021 14:32

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 14:32 Inactive

vanitabarrett force-pushed the footer-grid branch from 92f67c0 to 43bc830 Compare December 8, 2021 14:34

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 14:34 Inactive

EoinShaughnessy reviewed Dec 8, 2021

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

EoinShaughnessy reviewed Dec 8, 2021

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

EoinShaughnessy reviewed Dec 8, 2021

View reviewed changes

36degrees reviewed Dec 8, 2021

View reviewed changes

Vanita Barrett added 5 commits December 8, 2021 16:10

Add new width macro option

1999234

Allow users to set the width of a footer section explicitly. For example: set `width: 'two-thirds'` for a two-third section.

Enhance alignment examples

83b173f

vanitabarrett force-pushed the footer-grid branch from 3e5f48c to ed08815 Compare December 8, 2021 16:10

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 16:11 Inactive

vanitabarrett force-pushed the footer-grid branch from ed08815 to 8a439c9 Compare December 8, 2021 16:16

vanitabarrett requested a review from 36degrees December 8, 2021 16:16

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 16:16 Inactive

Vanita Barrett added 3 commits December 8, 2021 16:45

Add to Changelog

be34d02

Mark hidden examples as hidden

69dc476

Some of the examples in the footer.yaml file that we use for tests were not marked as `hidden`. This commit adds those missing `hidden` attributes so they're not shown in the review app

vanitabarrett force-pushed the footer-grid branch from 8a439c9 to e745aa6 Compare December 8, 2021 16:46

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2462 December 8, 2021 16:46 Inactive

vanitabarrett requested a review from EoinShaughnessy December 8, 2021 16:47

EoinShaughnessy approved these changes Dec 8, 2021

View reviewed changes

36degrees approved these changes Dec 9, 2021

View reviewed changes

vanitabarrett merged commit 429af61 into main Dec 9, 2021

vanitabarrett deleted the footer-grid branch December 9, 2021 11:03

vanitabarrett mentioned this pull request Dec 15, 2021

Release v4.0.0 #2480

Merged

36degrees mentioned this pull request Dec 23, 2021

Long text in footer columns do not wrap #1647

Closed

andymantell added a commit to surevine/govuk-react-jsx that referenced this pull request Jan 29, 2022

Fix footer alignment with grid classes and add width component option

529a855

See alphagov/govuk-frontend#2462

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix footer alignment with grid classes and add `width` macro option #2462

Fix footer alignment with grid classes and add `width` macro option #2462

vanitabarrett commented Dec 6, 2021 •

edited

Loading

EoinShaughnessy left a comment

36degrees left a comment

36degrees Dec 8, 2021

vanitabarrett Dec 8, 2021

36degrees Dec 8, 2021

vanitabarrett Dec 8, 2021

EoinShaughnessy left a comment

36degrees left a comment

		const $component = $('.govuk-footer')
		const $section = $component.find('.govuk-footer__section')

	const $component = $('.govuk-footer')
	const $section = $component.find('.govuk-footer__section')
	const $section = $('.govuk-footer__section')

Fix footer alignment with grid classes and add width macro option #2462

Fix footer alignment with grid classes and add width macro option #2462

Conversation

vanitabarrett commented Dec 6, 2021 • edited Loading

Why

What

Links for testing

Screenshots

IE8

EoinShaughnessy left a comment

Choose a reason for hiding this comment

36degrees left a comment

Choose a reason for hiding this comment

36degrees Dec 8, 2021

Choose a reason for hiding this comment

vanitabarrett Dec 8, 2021

Choose a reason for hiding this comment

36degrees Dec 8, 2021

Choose a reason for hiding this comment

vanitabarrett Dec 8, 2021

Choose a reason for hiding this comment

EoinShaughnessy left a comment

Choose a reason for hiding this comment

36degrees left a comment

Choose a reason for hiding this comment

Fix footer alignment with grid classes and add `width` macro option #2462

Fix footer alignment with grid classes and add `width` macro option #2462

vanitabarrett commented Dec 6, 2021 •

edited

Loading