From 39f4ce2e16fdbf2771d126e4ca8eb3bb5d543968 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 18 Apr 2019 17:07:41 +0100 Subject: [PATCH 001/186] Add new palette and toggle for legacy palette --- src/settings/_colours-palette.scss | 71 +++++++++++++++++++++++++++--- 1 file changed, 65 insertions(+), 6 deletions(-) diff --git a/src/settings/_colours-palette.scss b/src/settings/_colours-palette.scss index 898e50824b..3d6abcbb46 100644 --- a/src/settings/_colours-palette.scss +++ b/src/settings/_colours-palette.scss @@ -2,16 +2,26 @@ /// @group settings/colours //// -/// Colour palette -/// -/// @type Map +/// Use 'legacy' colour palette /// -/// @prop $colour - Representation for the given $colour, where $colour is the -/// friendly name for the colour (e.g. "red": #ff0000); +/// Whether or not to use the colour palette from GOV.UK Elements / Frontend +/// Toolkit, for teams that are migrating to GOV.UK Frontend and may be using +/// components from both places in a single application. /// +/// @type Boolean /// @access public -$govuk-colours: ( +$govuk-use-legacy-palette: true !default; + +/// Legacy colour palette +/// +/// This exists only because you cannot easily set a !default variable +/// conditionally (thanks to the way scope works in Sass) so we set +/// `$govuk-colour-palette` using the `if` function. +/// +/// @access private + +$_govuk-colour-palette-legacy: ( "purple": #2e358b, "light-purple": #6f72af, "bright-purple": #912b88, @@ -34,4 +44,53 @@ $govuk-colours: ( "grey-3": #dee0e2, "grey-4": #f8f8f8, "white": #ffffff +); + +/// Modern colour palette +/// +/// This exists only because you cannot easily set a !default variable +/// conditionally (thanks to the way scope works in Sass) so we set +/// `$govuk-colour-palette` using the `if` function. +/// +/// @access private + +$_govuk-colour-palette-modern: ( + "red": #d4351c, + "yellow": #ffdd00, + "green": #00703c, + "blue": #1d70b8, + "dark-blue": #003078, + "light-blue": #5694ca, + + "black": #0b0c0c, + "dark-grey": #6f777b, + "mid-grey": #b1b4b6, + "light-grey": #f3f2f1, + "white": #ffffff, + + "purple": #2e358b, + "light-purple": #6f72af, + "bright-purple": #912b88, + "pink": #d53880, + "light-pink": #f499be, + "bright-red": #df3034, + "orange": #f47738, + "brown": #b58840, + "light-green": #85994b, + "turquoise": #28a197 +); + +/// Colour palette +/// +/// @type Map +/// +/// @prop $colour - Representation for the given $colour, where $colour is the +/// friendly name for the colour (e.g. "red": #ff0000); +/// +/// @access public + +$govuk-colours: if( + $govuk-use-legacy-palette, + $_govuk-colour-palette-legacy, + $_govuk-colour-palette-modern ) !default; From 6a48ceae6f4908955b60f0cd7e9d9ea8fb58d45d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:12:14 +0100 Subject: [PATCH 002/186] Allow govuk-colour function to return 'legacy' colours This will allow us to maintain the existing colour palette for users of GOV.UK Frontend who are migrating, and using it alongside GOV.UK Elements, Template or Frontend Toolkit. --- src/helpers/_colour.scss | 23 +++++- src/helpers/colour.test.js | 147 ++++++++++++++++++++++++++++++++++--- 2 files changed, 160 insertions(+), 10 deletions(-) diff --git a/src/helpers/_colour.scss b/src/helpers/_colour.scss index e2a34153d6..2fc311e73c 100644 --- a/src/helpers/_colour.scss +++ b/src/helpers/_colour.scss @@ -9,11 +9,32 @@ /// /// @param {String} $colour - Name of colour from the colour palette /// (`$govuk-colours`) +/// @param {String} $legacy - Either the name of colour from the legacy palette +/// or a colour literal, to return instead when in 'legacy mode' - matching +/// the palette from GOV.UK Template, Elements or Frontend Toolkit /// @return {Colour} Representation of named colour +/// +/// @example scss - Using legacy colours from the palette +/// .foo { +/// background-colour: govuk-colour("mid-grey", $legacy: "grey-2"); +/// } +/// +/// @example scss - Using legacy colour literals +/// .foo { +/// background-colour: govuk-colour("green", $legacy: #BADA55); +/// } +/// /// @throw if `$colour` is not a colour from the colour palette /// @access public -@function govuk-colour($colour) { +@function govuk-colour($colour, $legacy: false) { + @if ($govuk-use-legacy-palette and $legacy) { + @if (type-of($legacy) == "color") { + @return $legacy; + } + $colour: $legacy; + } + $colour: quote($colour); @if not map-has-key($govuk-colours, $colour) { diff --git a/src/helpers/colour.test.js b/src/helpers/colour.test.js index f619ddf889..dc99ae9bdf 100644 --- a/src/helpers/colour.test.js +++ b/src/helpers/colour.test.js @@ -13,15 +13,19 @@ const sassConfig = { } describe('@function govuk-colour', () => { - const sassBootstrap = ` - $govuk-colours: ( - "red": #ff0000, - "green": #00ff00, - "blue": #0000ff - ); - - @import "helpers/colour"; - ` + let sassBootstrap = `` + + beforeEach(() => { + sassBootstrap = ` + $govuk-colours: ( + "red": #ff0000, + "green": #00ff00, + "blue": #0000ff + ); + + @import "helpers/colour"; + ` + }) it('returns a colour from the colour palette', async () => { const sass = ` @@ -63,6 +67,131 @@ describe('@function govuk-colour', () => { 'Unknown colour `hooloovoo`' ) }) + + describe('when $govuk-use-legacy-palette is true', () => { + beforeEach(() => { + sassBootstrap = ` + $govuk-use-legacy-palette: true; + ${sassBootstrap} + ` + }) + + it('returns the legacy colour if specified', async () => { + const sass = ` + ${sassBootstrap} + + .foo { + color: govuk-colour('red', $legacy: 'blue'); + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo { color: #0000ff; }') + }) + + it('returns the legacy literal if specified', async () => { + const sass = ` + ${sassBootstrap} + + .foo { + color: govuk-colour('red', $legacy: #BADA55); + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo { color: #BADA55; }') + }) + + it('does not error if the non-legacy colour does not exist', async () => { + const sass = ` + ${sassBootstrap} + + .foo { + color: govuk-colour('hooloovoo', $legacy: 'blue'); + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo { color: #0000ff; }') + }) + + it('throws an error if the legacy colour does not exist', async () => { + const sass = ` + ${sassBootstrap} + .foo { + color: govuk-colour('red', $legacy: 'hooloovoo'); + }` + + await expect(sassRender({ data: sass, ...sassConfig })) + .rejects + .toThrow( + 'Unknown colour `hooloovoo`' + ) + }) + }) + + describe('when $govuk-use-legacy-palette is false', () => { + beforeEach(() => { + sassBootstrap = ` + $govuk-use-legacy-palette: false; + ${sassBootstrap} + ` + }) + + it('does not return the legacy colour', async () => { + const sass = ` + ${sassBootstrap} + + .foo { + color: govuk-colour('red', $legacy: 'blue'); + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }') + }) + + it('does not returns the legacy literal when specified', async () => { + const sass = ` + ${sassBootstrap} + + .foo { + color: govuk-colour('red', $legacy: #BADA55); + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }') + }) + + it('throws an error if the non-legacy colour does not exist', async () => { + const sass = ` + ${sassBootstrap} + + .foo { + color: govuk-colour('hooloovoo', $legacy: 'blue'); + }` + + await expect(sassRender({ data: sass, ...sassConfig })) + .rejects + .toThrow( + 'Unknown colour `hooloovoo`' + ) + }) + + it('does not error if the legacy colour does not exist', async () => { + const sass = ` + ${sassBootstrap} + + .foo { + color: govuk-colour('red', $legacy: 'hooloovoo'); + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }') + }) + }) }) describe('@function govuk-organisation-colour', () => { From 92ee6e3480546c382070cffaf25d0314ae37281e Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:13:18 +0100 Subject: [PATCH 003/186] Remove 'bright red' from modern palette We are removing this because the red in the palette has been updated, and there is now very little difference between 'red' and 'bright red'. --- src/settings/_colours-palette.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/settings/_colours-palette.scss b/src/settings/_colours-palette.scss index 3d6abcbb46..b723c6f0b6 100644 --- a/src/settings/_colours-palette.scss +++ b/src/settings/_colours-palette.scss @@ -73,7 +73,6 @@ $_govuk-colour-palette-modern: ( "bright-purple": #912b88, "pink": #d53880, "light-pink": #f499be, - "bright-red": #df3034, "orange": #f47738, "brown": #b58840, "light-green": #85994b, From 72d7fbc48c4c7598212861aaf1eabe1d376bacac Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:14:03 +0100 Subject: [PATCH 004/186] Update purple to match the visited link colour --- src/settings/_colours-palette.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/_colours-palette.scss b/src/settings/_colours-palette.scss index b723c6f0b6..c7b6c03ec0 100644 --- a/src/settings/_colours-palette.scss +++ b/src/settings/_colours-palette.scss @@ -61,6 +61,7 @@ $_govuk-colour-palette-modern: ( "blue": #1d70b8, "dark-blue": #003078, "light-blue": #5694ca, + "purple": #4c2c92, "black": #0b0c0c, "dark-grey": #6f777b, @@ -68,7 +69,6 @@ $_govuk-colour-palette-modern: ( "light-grey": #f3f2f1, "white": #ffffff, - "purple": #2e358b, "light-purple": #6f72af, "bright-purple": #912b88, "pink": #d53880, From 45f907611a464095a0c078200552e03c1acbee63 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:17:28 +0100 Subject: [PATCH 005/186] Update 'applied' colour palette --- src/settings/_colours-applied.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/settings/_colours-applied.scss b/src/settings/_colours-applied.scss index e09ea81c9b..ba1777bb30 100644 --- a/src/settings/_colours-applied.scss +++ b/src/settings/_colours-applied.scss @@ -31,7 +31,7 @@ $govuk-text-colour: govuk-colour("black") !default; /// @type Colour /// @access public -$govuk-canvas-background-colour: govuk-colour("grey-3") !default; +$govuk-canvas-background-colour: govuk-colour("light-grey", $legacy: "grey-3") !default; /// Body background colour /// @@ -56,7 +56,7 @@ $govuk-print-text-colour: #000000 !default; /// @type Colour /// @access public -$govuk-secondary-text-colour: govuk-colour("grey-1") !default; +$govuk-secondary-text-colour: govuk-colour("dark-grey", $legacy: "grey-1") !default; /// Focus colour /// @@ -94,7 +94,7 @@ $govuk-error-colour: govuk-colour("red") !default; /// @type Colour /// @access public -$govuk-border-colour: govuk-colour("grey-2") !default; +$govuk-border-colour: govuk-colour("mid-grey", $legacy: "grey-2"); /// Input border colour /// @@ -112,7 +112,7 @@ $govuk-input-border-colour: govuk-colour("black") !default; /// @type Colour /// @access public -$govuk-hover-colour: govuk-colour("grey-3") !default; +$govuk-hover-colour: govuk-colour("mid-grey", $legacy: "grey-3"); // ============================================================================= @@ -131,18 +131,18 @@ $govuk-link-colour: govuk-colour("blue") !default; /// @type Colour /// @access public -$govuk-link-visited-colour: #4c2c92 !default; +$govuk-link-visited-colour: govuk-colour("purple", $legacy: #4c2c92) !default; /// Link hover colour /// /// @type Colour /// @access public -$govuk-link-hover-colour: govuk-colour("light-blue") !default; +$govuk-link-hover-colour: govuk-colour("dark-blue", $legacy: "light-blue") !default; /// Active link colour /// /// @type Colour /// @access public -$govuk-link-active-colour: govuk-colour("light-blue") !default; +$govuk-link-active-colour: govuk-colour("black", $legacy: "light-blue") !default; From f8a11a98f0aba8eef320e660dd13f05340dc1126 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:30:15 +0100 Subject: [PATCH 006/186] Update footer component to use new palette --- src/components/footer/_footer.scss | 44 ++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss index f113a8a802..09604bbf20 100644 --- a/src/components/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -7,11 +7,24 @@ @include govuk-exports("govuk/component/footer") { $govuk-footer-background: $govuk-canvas-background-colour; - $govuk-footer-border-top: #a1acb2; - $govuk-footer-border: govuk-colour("grey-2"); - $govuk-footer-text: #454a4c; + $govuk-footer-border: $govuk-border-colour; + // This variable can be removed entirely once the legacy palette goes away, + // as it'll just be the same as $govuk-footer-border. + $govuk-footer-border-top: $govuk-border-colour; + $govuk-footer-text: $govuk-text-colour; $govuk-footer-link: $govuk-footer-text; - $govuk-footer-link-hover: #171819; + $govuk-footer-link-hover: false; + + @if ($govuk-use-legacy-palette) { + // sass-lint:disable no-color-literals + $govuk-footer-border-top: #a1acb2; + $govuk-footer-border: govuk-colour("grey-2"); + $govuk-footer-text: #454a4c; + $govuk-footer-link: $govuk-footer-text; + + // Only used with the legacy palette + $govuk-footer-link-hover: #171819; + } // Based on the govuk-crest-2x.png image dimensions. $govuk-footer-crest-image-width-2x: 250px; @@ -33,14 +46,23 @@ .govuk-footer__link { @include govuk-focusable-fill; - &:link, - &:visited { - color: $govuk-footer-link; - } + @if ($govuk-use-legacy-palette) { + &:link, + &:visited { + color: $govuk-footer-link; + } - &:hover, - &:active { - color: $govuk-footer-link-hover; + &:hover, + &:active { + color: $govuk-footer-link-hover; + } + } @else { + &:link, + &:visited, + &:hover, + &:active { + color: $govuk-footer-link; + } } // When focussed, the text colour needs to be darker to ensure that colour From 4f00970c08f569f56cfa1ae4e3d556298f3fa444 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:31:37 +0100 Subject: [PATCH 007/186] Update accordions to use new grey The hover style for this component will eventually change, but to keep changes contained we're just updating it with the closest colour right now. --- src/components/accordion/_accordion.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 4e72fe2afb..668f45ba20 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -92,7 +92,8 @@ // Section headers have a grey background on hover as an additional affodance .govuk-accordion__section-header:hover { - background-color: govuk-colour("grey-4"); + background-color: govuk-colour("light-grey", $legacy: "grey-4"); + // For devices that can't hover such as touch devices, // remove hover state as it can be stuck in that state (iOS). @media (hover: none) { From 65aa04c69c0d18ffa1388fc7131a3aa64d7d9157 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:31:50 +0100 Subject: [PATCH 008/186] Update tabs to use new grey --- src/components/tabs/_tabs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 79db524e04..bbb61e7fe5 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -82,7 +82,7 @@ padding-left: govuk-spacing(4); float: left; color: govuk-colour("black"); - background-color: govuk-colour("grey-4"); + background-color: govuk-colour("light-grey", $legacy: "grey-4"); text-align: center; text-decoration: none; From 5ea9d034dc45ca01d162586117f4db2f58ea14e7 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:32:00 +0100 Subject: [PATCH 009/186] Update tags to use new grey --- src/components/tag/_tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index d3fe9b10d5..b7e78161bb 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -28,6 +28,6 @@ } .govuk-tag--inactive { - background-color: govuk-colour("grey-1"); + background-color: govuk-colour("dark-grey", $legacy: "grey-1"); } } From 20c9332eb9e3d6a84591ad55724141c5381da218 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:32:30 +0100 Subject: [PATCH 010/186] Update button to use new green from the palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Finally. πŸŽ‰ --- src/components/button/_button.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index a39a62e293..03eafee1dc 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -3,14 +3,13 @@ @import "../../helpers/all"; @include govuk-exports("govuk/component/button") { - // Primary button variables - $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals + $govuk-button-colour: govuk-colour("green", $legacy: #00823b); // sass-lint:disable no-color-literals $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%); $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%); $govuk-button-text-colour: govuk-colour("white"); // Secondary button variables - $govuk-secondary-button-colour: govuk-colour("grey-3"); + $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3"); $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%); $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%); $govuk-secondary-button-text-colour: govuk-colour("black"); From 448eba8498b69ffaff475bc161a9438a908b4b5d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:34:50 +0100 Subject: [PATCH 011/186] Update panel to use green background This addresses an issue with low colour contrast between the text (white) and the background (turquoise) whilst simplifying the palette --- src/components/panel/_panel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss index 7215b527e4..d0267f7fc5 100644 --- a/src/components/panel/_panel.scss +++ b/src/components/panel/_panel.scss @@ -23,7 +23,7 @@ .govuk-panel--confirmation { color: govuk-colour("white"); - background: govuk-colour("turquoise"); + background: govuk-colour("green", $legacy: "turquoise"); } .govuk-panel__title { From 5f33b5dbab1557c7ca118e064ce2bb7bda984a59 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Apr 2019 16:40:53 +0100 Subject: [PATCH 012/186] Link colour palette to compatibility mode --- src/helpers/_colour.scss | 1 + src/settings/_colours-palette.scss | 6 +++++- src/settings/colours.test.js | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/helpers/_colour.scss b/src/helpers/_colour.scss index 2fc311e73c..b6f9ae708e 100644 --- a/src/helpers/_colour.scss +++ b/src/helpers/_colour.scss @@ -1,3 +1,4 @@ +@import "../settings/compatibility"; @import "../settings/colours-palette"; @import "../settings/colours-organisations"; diff --git a/src/settings/_colours-palette.scss b/src/settings/_colours-palette.scss index c7b6c03ec0..4e16625147 100644 --- a/src/settings/_colours-palette.scss +++ b/src/settings/_colours-palette.scss @@ -11,7 +11,11 @@ /// @type Boolean /// @access public -$govuk-use-legacy-palette: true !default; +$govuk-use-legacy-palette: if(( + $govuk-compatibility-govukfrontendtoolkit or + $govuk-compatibility-govuktemplate or + $govuk-compatibility-govukelements + ), true, false) !default; /// Legacy colour palette /// diff --git a/src/settings/colours.test.js b/src/settings/colours.test.js index 15efd83f34..7c6f9ffa9f 100644 --- a/src/settings/colours.test.js +++ b/src/settings/colours.test.js @@ -15,6 +15,7 @@ const sassConfig = { describe('Organisation colours', () => { it('should define websafe colours that meet contrast requirements', async () => { const sass = ` + @import "settings/compatibility"; @import "settings/colours-palette"; @import "settings/colours-organisations"; @import "settings/colours-applied"; From fa914b94b6ff7f4a8b8d27e551fa904514ccb84f Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 29 Apr 2019 14:58:28 +0100 Subject: [PATCH 013/186] Document in changelog --- CHANGELOG.md | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 91 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c31f30f2c..d7741835de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,100 @@ # Changelog -## Unreleased +## Unreleased v3.0 See the [versioning documentation for how to update this changelog](./docs/contributing/versioning.md#updating-changelog). +- The colour palette has been updated. + + **Note:** If you are using [compatibility mode], the existing palette will be + preserved. + + Purple, red, yellow, green, blue and light blue have all been updated to new + colours. + + Dark blue has been added, and bright red has been removed. + + Greys 1-through-4 have been replaced with dark, mid and light-grey. As a + general rule of thumb, dark grey replaces grey-1 and is designed to be used as + a foreground colour; light grey replaces both grey-3 and grey-4 and is + designed to be used as a background colour, and mid-grey replaces grey-2 and + is designed to be used for borders. + + To migrate you'll need to update any references to bright-red, grey-1, grey-2, + grey-3 or grey-4 to use the new colours from the palette. + + | Colour | Before | After | Notes | + | ------------- | --------- | --------- | --------------------------------- | + | purple | `#2e358b` | `#4c2c92` | updated - matches visited links | + | light-purple | `#6f72af` | `#6f72af` | | + | bright-purple | `#912b88` | `#912b88` | | + | pink | `#d53880` | `#d53880` | | + | light-pink | `#f499be` | `#f499be` | | + | red | `#b10e1e` | `#d4351c` | updated | + | bright-red | `#df3034` | | removed - similar to the new red | + | orange | `#f47738` | `#f47738` | | + | brown | `#b58840` | `#b58840` | | + | yellow | `#ffbf47` | `#ffdd00` | updated | + | light-green | `#85994b` | `#85994b` | | + | green | `#006435` | `#00703c` | updated | + | turquoise | `#28a197` | `#28a197` | | + | light-blue | `#2b8cc4` | `#5694ca` | updated | + | blue | `#005ea5` | `#1d70b8` | updated | + | dark-blue | | `#003078` | added | + | black | `#0b0c0c` | `#0b0c0c` | | + | grey-1 | `#6f777b` | | removed | + | dark-grey | | `#6f777b` | added | + | grey-2 | `#bfc1c3` | | removed | + | mid-grey | | `#b1b4b6` | added | + | grey-3 | `#dee0e2` | | removed | + | grey-4 | `#f8f8f8` | | removed | + | light-grey | | `#f3f2f1` | added | + | white | `#ffffff` | `#ffffff` | | + + ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288)) + +- The button component now uses the green from the colour palette, instead of + a custom green used only for the button. + + **Note:** If you are using [compatibility mode], the existing button colour + will be preserved. + + ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288)) + +- The confirmation panel now uses a green background rather than a turquoise + background. + + **Note:** If you are using [compatibility mode], the existing turquoise panel + colour will be preserved. + + ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288)) + +- Links now get darker when hovered, rather than lighter. + + **Note:** If you are using [compatibility mode], the existing link hover style + will be preserved. + + ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288)) + +πŸ†• New features: + +- A new setting `$govuk-use-legacy-palette` has been added, which by default + will be true if any of the `$govuk-compatibility-*` settings are true. + + When set to `true`, the existing colour palette from v2.x of GOV.UK Frontend + will be used. + + ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288)) + +- The `govuk-colour` function has been updated to add a `$legacy` argument, + which allows you to specify a colour (either a literal, or a name of a colour + from the legacy palette) to use when `$govuk-use-legacy-palette` is true. + + ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288)) + +[compatibility mode]: https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#compatibility-mode + ## 2.13.0 πŸ†• New features From 5c73defe4e86d138cf76942f044672e472fcf46c Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 24 Apr 2019 17:32:18 +0100 Subject: [PATCH 014/186] Rename border-width-mobile to reflect how it's used Despite its name, the variable isn't used on mobile. Standardise the border width on error summary on mobile to use the standard border width. From @dashouse): "The 4px border is used in the conditional reveals because it has to be an even number in order to be centred under the 40px checkbox or radio. 5px would put it 1px too far left or right and it was noticeable. The error summary change is probably not needed." Fixes https://github.com/alphagov/govuk-frontend/issues/1240 --- src/components/checkboxes/_checkboxes.scss | 4 +++- src/components/error-summary/_error-summary.scss | 6 +----- src/components/radios/_radios.scss | 4 +++- src/settings/_measurements.scss | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 0ff04c3325..0f0f1ff9a0 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -149,7 +149,9 @@ // Conditional reveals // ========================================================= - $conditional-border-width: $govuk-border-width-mobile; + // The narrow border is used in the conditional reveals because the border has + // to be an even number in order to be centred under the 40px checkbox or radio. + $conditional-border-width: $govuk-border-width-narrow; // Calculate the amount of padding needed to keep the border centered against the checkbox. $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2); // Move the border centered with the checkbox diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 81a38abd87..2b2d0e6823 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -12,11 +12,7 @@ @include govuk-responsive-margin(8, "bottom"); @include govuk-focusable; - border: $govuk-border-width-mobile solid $govuk-error-colour; - - @include govuk-media-query($from: tablet) { - border: $govuk-border-width solid $govuk-error-colour; - } + border: $govuk-border-width solid $govuk-error-colour; } .govuk-error-summary__title { diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 8333e035ae..bf2c1ce1c5 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -187,7 +187,9 @@ // Conditional reveals // ========================================================= - $conditional-border-width: $govuk-border-width-mobile; + // The narrow border is used in the conditional reveals because the border has + // to be an even number in order to be centred under the 40px checkbox or radio. + $conditional-border-width: $govuk-border-width-narrow; // Calculate the amount of padding needed to keep the border centered against the radios. $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2); // Move the border centered with the radios diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss index bd2ac483aa..bbbd73c7f1 100644 --- a/src/settings/_measurements.scss +++ b/src/settings/_measurements.scss @@ -63,12 +63,12 @@ $govuk-border-width: 5px !default; $govuk-border-width-wide: 10px !default; -/// Border width on mobile +/// Narrow border width /// /// @type Number /// @access public -$govuk-border-width-mobile: 4px !default; +$govuk-border-width-narrow: 4px !default; /// Form control border width /// From 5881584ad92c311e05f9f49ad16207455fb91d78 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 24 Apr 2019 17:55:02 +0100 Subject: [PATCH 015/186] Update changelog --- CHANGELOG.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7741835de..3a3f7aa83e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,16 @@ # Changelog -## Unreleased v3.0 +## Unreleased 3.0.0 (Breaking release) See the [versioning documentation for how to update this changelog](./docs/contributing/versioning.md#updating-changelog). +- Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow` + + To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`. + + ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287)) + - The colour palette has been updated. **Note:** If you are using [compatibility mode], the existing palette will be @@ -95,6 +101,16 @@ changelog](./docs/contributing/versioning.md#updating-changelog). [compatibility mode]: https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#compatibility-mode +πŸ”§ Fixes: + +- Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow` + + This better reflects how the variable is used. + + Also make the error summary border the standard width on mobile. + + ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287)) + ## 2.13.0 πŸ†• New features From dbcde932df691dbbc2e0c2a7afa573b4006b5e91 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Wed, 1 May 2019 13:34:06 +0100 Subject: [PATCH 016/186] Fixes an issue with styling links When visiting the links example page, if you had previously visited the home page then the unvisited link and visited link example looked identical. This commit passes a random number to the view. The view adds the randomId to the href as a hash. Co-authored-by: Nick Colley --- app/app.js | 4 +++- app/views/examples/links/index.njk | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/app.js b/app/app.js index ead1877186..ff918867dd 100644 --- a/app/app.js +++ b/app/app.js @@ -177,7 +177,9 @@ module.exports = (options) => { // Example view app.get('/examples/:example', function (req, res, next) { - res.render(`${req.params.example}/index`, function (error, html) { + // Passing a random number used for the links so that they will be unique and not display as "visited" + const randomPageHash = (Math.random() * 1000000).toFixed() + res.render(`${req.params.example}/index`, { randomPageHash }, function (error, html) { if (error) { next(error) } else { diff --git a/app/views/examples/links/index.njk b/app/views/examples/links/index.njk index 12c50f6f0f..490004424a 100644 --- a/app/views/examples/links/index.njk +++ b/app/views/examples/links/index.njk @@ -42,7 +42,7 @@ {% for state_description, state_class in states %}

- + {{ state_description}}

From 1d9b43eec2598f82df1e2ec6e726fbaa9096d808 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Wed, 1 May 2019 14:42:13 +0100 Subject: [PATCH 017/186] Fixes govuk-elements focussed link colour overriding govuk-frontends govuk-elements uses specific css selector`a:link:focus` whereas govuk-frontend uses `.govuk-link:focus`. This fix makes govuk-frontend selector more specific `.govuk-link:link:focus` but only when compatibility mode is being used. Co-authored-by: Nick Colley --- CHANGELOG.md | 9 +++++++++ src/helpers/_links.scss | 11 +++++++++++ 2 files changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a3f7aa83e..ef55d21ab0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -111,6 +111,15 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287)) +- Fixes govuk-template focussed link colour overriding govuk-frontends + + govuk-template uses specific css selector`a:link:focus` whereas + govuk-frontend uses `.govuk-link:focus`. This fix makes govuk-frontend + selector more specific `.govuk-link:link:focus` but only when compatibility + mode is being used. + + ([PR #1310](https://github.com/alphagov/govuk-frontend/pull/1310)) + ## 2.13.0 πŸ†• New features diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss index a828592cc3..24240178bb 100644 --- a/src/helpers/_links.scss +++ b/src/helpers/_links.scss @@ -50,6 +50,17 @@ &:focus { color: $govuk-focus-text-colour; } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited link s a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors so + // so that unvisited links styled as buttons do not end up with dark blue + // text when focussed. + @include govuk-compatibility(govuk_template) { + &:link:focus { + color: $govuk-focus-text-colour; + } + } } /// Muted style link mixin From cfe99158c67b284b0707573b1e9d39bfb43d7288 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 3 May 2019 14:38:28 +0100 Subject: [PATCH 018/186] Allow banner to be hidden using query parameter This is helpful for e.g. Browserstack screenshots --- app/banner.js | 5 +++++ app/banner.test.js | 18 +++++++++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/app/banner.js b/app/banner.js index 60ef5b8832..af38b2ffcc 100644 --- a/app/banner.js +++ b/app/banner.js @@ -6,6 +6,11 @@ module.exports = function (app) { // Detect if banner should be shown based on cookies set app.use(cookieParser()) app.use(function (request, response, next) { + if ('hide-banner' in request.query) { + app.locals.shouldShowAppBanner = false + return next() + } + let cookie = request.cookies[BANNER_COOKIE_NAME] if (cookie === 'yes') { diff --git a/app/banner.test.js b/app/banner.test.js index 68a5352eb5..fedc3e8a49 100644 --- a/app/banner.test.js +++ b/app/banner.test.js @@ -15,7 +15,7 @@ const requestPath = request.defaults({ }) describe('Banner', () => { - it('should be visible by default', done => { + it('is visible by default', done => { requestPath.get('/', (err, res) => { let $ = cheerio.load(res.body) @@ -29,6 +29,22 @@ describe('Banner', () => { done(err) }) }) + + it('can be hidden using a url parameter', done => { + requestPath.get('/?hide-banner', (err, res) => { + let $ = cheerio.load(res.body) + + // Check the page responded correctly + expect(res.statusCode).toBe(200) + expect($.html()).toContain('GOV.UK Frontend') + + // Check that the banner is visible + let appBanner = $('[data-module="app-banner"]') + expect(appBanner.length).toBeFalsy() + done(err) + }) + }) + it.skip('should be dismissable', done => { requestPath.post('/hide-banner', { followAllRedirects: true, From 61459bca15021d2d1f93eb3e2bc739028d3a68a8 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 15:32:49 +0100 Subject: [PATCH 019/186] Adding govuk-focusable-text-link mixin This approach uses box-shadow, which has broadly good support across browser. We have found that Edge and Internet Explorer produce rendering issues. Edge 18 has quite problematic issues but this can be seen on any website using custom focus styles. Edge 18 supports 'drop-shadow()' which can work but only on elements that are `diplay: inline`, with this in mind we think the complexity is not worth the cost to users for all browsers. Edge 19+ will be using the Chromium rendering engine so this will not be an issue. Edge 17 and below, and IE 9-11 have lesser issues that we have determined will not cause a barrier. See: https://gist.github.com/nickcolley/3788eefd34e7f04391de07867a85018b for an example of how `drop-shadow()` could work. Co-authored-by: Nick Colley --- src/helpers/_focusable.scss | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss index 4b80de08cd..1ef15b7ded 100644 --- a/src/helpers/_focusable.scss +++ b/src/helpers/_focusable.scss @@ -32,3 +32,35 @@ background-color: $govuk-focus-colour; } } + +/// Focusable with box-shadow +/// +/// Removes the visible outline and replace with box-shadow and background colour. +/// Used for interactive text-based elements. +/// +/// @access public + +@mixin govuk-focusable-text-link { + &:focus { + // When colours are overridden, for example when users have a dark mode, + // backgrounds and box-shadows disappear, so we need to ensure there's a + // transparent outline which will be set to a visible colour. + + // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines + @include govuk-not-ie8 { + outline: $govuk-focus-width solid transparent; + outline-offset: 0; + } + color: $govuk-text-colour; + background-color: $govuk-focus-colour; + // sass-lint:disable indentation + box-shadow: -5px -1px 0 1px $govuk-focus-colour, + 5px -1px 0 1px $govuk-focus-colour, + -3px 1px 0 3px $govuk-text-colour, + 3px 1px 0 3px $govuk-text-colour; + // sass-lint:enable indentation + // When link is focussed, hide the default underline since the + // box shadow adds the "underline" + text-decoration: none; + } +} From 857d104f6d21fecf9bc8430cca25894a1e893ba8 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 15:34:46 +0100 Subject: [PATCH 020/186] Update govuk-link-common mixin to use new govuk-focusable-text-link mixin Co-authored-by: Nick Colley --- src/helpers/_links.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss index 24240178bb..a4d1d85caa 100644 --- a/src/helpers/_links.scss +++ b/src/helpers/_links.scss @@ -10,7 +10,7 @@ @mixin govuk-link-common { @include govuk-typography-common; - @include govuk-focusable-fill; + @include govuk-focusable-text-link; } /// Default link style mixin From fe1fff4c3d17b3be264ecf674e55ab0fd354b7f7 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 15:35:46 +0100 Subject: [PATCH 021/186] Update back-link component focus to avoid duplicate border Co-authored-by: Nick Colley --- src/components/back-link/_back-link.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/back-link/_back-link.scss b/src/components/back-link/_back-link.scss index 5cfe3a0681..1707dc4d4d 100644 --- a/src/components/back-link/_back-link.scss +++ b/src/components/back-link/_back-link.scss @@ -25,6 +25,12 @@ // Underline is provided by a bottom border text-decoration: none; + // When the back link is focused, hide the bottom link border as the + // focus styles has a bottom border. + &:focus { + border-bottom-color: transparent; + } + // Prepend left pointing arrow &:before { @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px); From 60cbb5212d4a0d26b36fdfb726aac744eea10a9a Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 16:02:26 +0100 Subject: [PATCH 022/186] Update details focus styles to match updated focussed state We can remove a lot of the custom focus styles since they were relevant to the relationship between the background and outline which are not used anymore. Co-authored-by: Nick Colley --- src/components/details/_details.scss | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss index 44c80ad587..224bce7c6f 100644 --- a/src/components/details/_details.scss +++ b/src/components/details/_details.scss @@ -27,6 +27,12 @@ // Style the summary to look like a link... color: $govuk-link-colour; cursor: pointer; + + &:hover { + color: $govuk-link-hover-colour; + } + + @include govuk-focusable-text-link; } // ...but only underline the text, not the arrow @@ -34,18 +40,9 @@ text-decoration: underline; } - .govuk-details__summary:hover { - color: $govuk-link-hover-colour; - } - - .govuk-details__summary:focus { - // -1px offset fixes gap between background and outline in Firefox - outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour; - outline-offset: -1px; - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - color: $govuk-focus-text-colour; - background: $govuk-focus-colour; + // Remove the underline when focussed to avoid duplicate borders + .govuk-details__summary:focus .govuk-details__summary-text { + text-decoration: none; } // Remove the default details marker so we can style our own consistently and @@ -59,7 +56,7 @@ content: ""; position: absolute; - top: 0; + top: -1px; bottom: 0; left: 0; From 2d3cf170008cf0cad5bdb24d22261b00da5b8283 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 30 Apr 2019 16:17:17 +0100 Subject: [PATCH 023/186] Add new focus style to error summary links --- src/components/error-summary/_error-summary.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 2b2d0e6823..6be17f2b8e 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -38,7 +38,7 @@ } .govuk-error-summary__list a { - @include govuk-focusable-fill; + @include govuk-focusable-text-link; @include govuk-typography-weight-bold; // Override default link styling to use error colour From 8a074e240bc377e45582dc340aa29db4ce7ba00c Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 30 Apr 2019 16:28:30 +0100 Subject: [PATCH 024/186] Use simpler focus styles for skip-link component --- src/components/skip-link/_skip-link.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/skip-link/_skip-link.scss b/src/components/skip-link/_skip-link.scss index ddccb1d2e5..3146effcac 100644 --- a/src/components/skip-link/_skip-link.scss +++ b/src/components/skip-link/_skip-link.scss @@ -5,7 +5,8 @@ @include govuk-exports("govuk/component/skip-link") { .govuk-skip-link { @include govuk-visually-hidden-focusable; - @include govuk-link-common; + @include govuk-typography-common; + @include govuk-focusable-fill; @include govuk-link-style-text; @include govuk-typography-responsive($size: 16); From 0638c7c3cbc2c2075fd55e896886b3be2d943f86 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 30 Apr 2019 16:38:16 +0100 Subject: [PATCH 025/186] Update header to align with new focus state styles --- src/components/header/_header.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index ed1cbbb864..501a9f929c 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -65,8 +65,6 @@ } .govuk-header__link { - @include govuk-focusable-fill; - text-decoration: none; &:link, @@ -78,6 +76,8 @@ text-decoration: underline; } + @include govuk-focusable-text-link; + // When focussed, the text colour needs to be darker to ensure that colour // contrast is still acceptable &:focus { @@ -116,6 +116,11 @@ // specified currentColor explicitly IE8 would ignore this rule. border-bottom: 1px solid; } + + // Remove any borders that show when focused and hovered. + &:focus { + border-bottom: 0; + } } .govuk-header__link--service-name { From c98e26428541cb794016556514fda2d1823946a3 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 1 May 2019 13:33:36 +0100 Subject: [PATCH 026/186] Remove incorrectly overriden error summary focus style When we updated the the focus styles for to have the same colour as the body text, we forgot to update the specific overrides we need when using GOV.UK Frontend with GOV.UK Template (legacy). This meant that when you focused a link in the error summary the color was red instead of black, removing this block achieves the result we want. --- src/components/error-summary/_error-summary.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 6be17f2b8e..e2faf59bb7 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -54,15 +54,6 @@ &:focus { color: $govuk-focus-text-colour; } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-error-colour; - } - } } } From 86f3e7de0fb20f123f56d5d4ef35707b84df0a63 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 12:05:19 +0100 Subject: [PATCH 027/186] Add CHANGELOG entry --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef55d21ab0..c1d91b3f1c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ See the [versioning documentation for how to update this changelog](./docs/contributing/versioning.md#updating-changelog). +- Update links (and things that look like links) to use the new focus style + + To migrate: [TODO add migration instructions before we ship v3.0.0] + + ([PR #1309](https://github.com/alphagov/govuk-frontend/pull/1309)) + - Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow` To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`. From 371024839750ef7a89af4c7551ccad73e5c434ea Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Tue, 30 Apr 2019 15:35:57 +0100 Subject: [PATCH 028/186] Update input focus style to comply with WCAG 2.1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there. --- src/components/input/_input.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss index 4176b3b174..fed27b00df 100644 --- a/src/components/input/_input.scss +++ b/src/components/input/_input.scss @@ -24,6 +24,20 @@ // Disable inner shadow and remove rounded corners appearance: none; + + &:focus { + // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with + // components such as textarea where we avoid changing `border-width` as + // it will change the element size. Also, `outline` cannot be utilised + // here as it is already used for the yellow focus state. + box-shadow: inset 0 0 0 $govuk-border-width-form-element; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so double the border with + // `border-width`. + border-width: $govuk-border-width-form-element * 2; + } + } } .govuk-input::-webkit-outer-spin-button, @@ -38,6 +52,13 @@ .govuk-input--error { border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `input--error` + // already has the thicker border. + box-shadow: none; + } } // The ex measurements are based on the number of W's that can fit inside the input From 93cfa380823042ab8d39abb4895b763391303172 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 1 May 2019 14:52:14 +0100 Subject: [PATCH 029/186] Update textarea focus style to comply with WCAG 2.1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there. --- src/components/textarea/_textarea.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/textarea/_textarea.scss b/src/components/textarea/_textarea.scss index d37145cc52..4214cfcbd1 100644 --- a/src/components/textarea/_textarea.scss +++ b/src/components/textarea/_textarea.scss @@ -24,9 +24,30 @@ border-radius: 0; -webkit-appearance: none; + + &:focus { + // Double the border by adding its width again. Use `box-shadow` to do + // this instead of changing `border-width` (which changes element size) and + // since `outline` is already used for the yellow focus state. + box-shadow: inset 0 0 0 $govuk-border-width-form-element; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so double the border with + // `border-width`. + border-width: $govuk-border-width-form-element * 2; + } + } } .govuk-textarea--error { border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `textarea--error` + // already has the thicker border. + box-shadow: none; + } + } } From bbc9beccd8c54194754a40f6d24e18cd7b533ae6 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 1 May 2019 15:08:16 +0100 Subject: [PATCH 030/186] Update select focus style to comply with WCAG 2.1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there. --- src/components/select/_select.scss | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss index acca14d67f..fcaa634b2b 100644 --- a/src/components/select/_select.scss +++ b/src/components/select/_select.scss @@ -16,6 +16,19 @@ height: 40px; padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements border: $govuk-border-width-form-element solid $govuk-input-border-colour; + + &:focus { + // Double the border by adding its width again. Use `box-shadow` to do + // this instead of changing `border-width` (which changes element size) and + // since `outline` is already used for the yellow focus state. + box-shadow: inset 0 0 0 $govuk-border-width-form-element; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so double the border with + // `border-width`. + border-width: $govuk-border-width-form-element * 2; + } + } } .govuk-select option:active, @@ -27,6 +40,13 @@ .govuk-select--error { border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `select--error` + // already has the thicker border. + box-shadow: none; + } } } From 3e02a1a76b3949156894dd099504c93f3ec38efb Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 1 May 2019 15:50:07 +0100 Subject: [PATCH 031/186] Update file upload focus style to comply with WCAG 2.1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there. The new focus styles make heavier use of `box-shadow` than the previous style and the styles visually overlap the component. Add some padding (and negative margin) to align element. --- src/components/file-upload/_file-upload.scss | 35 ++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss index d8a1c65666..ae82a24a31 100644 --- a/src/components/file-upload/_file-upload.scss +++ b/src/components/file-upload/_file-upload.scss @@ -7,13 +7,48 @@ @import "../label/label"; @include govuk-exports("govuk/component/file-upload") { + $component-padding: govuk-spacing(1); + .govuk-file-upload { @include govuk-font($size: 19); @include govuk-text-colour; @include govuk-focusable; + padding-top: $component-padding; + padding-bottom: $component-padding; + + &:focus { + // "Yank" the padding with negative margin to avoid a jump + // when element is focused + margin-right: -$component-padding; + margin-left: -$component-padding; + padding-right: $component-padding; + padding-left: $component-padding; + // Use `box-shadow` to add border instead of changing `border-width` + // (which changes element size) and since `outline` is already used for the + // yellow focus state. + box-shadow: inset 0 0 0 4px $govuk-input-border-colour; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so add an actual border + border: 4px solid $govuk-input-border-colour; + } + } } .govuk-file-upload--error { + // As `upload--error` has border, it needs to have the same padding as + // the standard focused element. + margin-right: -$component-padding; + margin-left: -$component-padding; + padding-right: $component-padding; + padding-left: $component-padding; border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `file-upload--error` + // already has the thicker border. + box-shadow: none; + } } } From a40385f04d814dbd44bf559a754ec17f2ea07b2c Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 8 May 2019 13:52:52 +0100 Subject: [PATCH 032/186] Fix file upload focus in FF Fix an existing undocumented issue where file upload component doesn't display focus indicator in Firefox (in standard or inverted colours mode). Underlying issue reported here: https://bugzilla.mozilla.org/show_bug.cgi?id=1430196 The focus state can be made to display in FF with `focus-within`. Unfortunately `focus-within` cannot be set together with `:focus` (to reduce duplication) as all versions of IE fail to recognise `focus-within` and don't set any styles from the block if `focus-within` is a selector. It's therefore set separately in the SASS. Also manually emulate styles from `govuk-focusable` for file upload in FF. Alternatively `govuk-focusable` mixin could be made to accept a new `$focusable-within` param that adds the `focus-within` styles. However from API point of view this it might be unclear whether the mixin adds both `focus` and `focus-within` styles if the param is set or just one or the other. Alternatively, a new mixin `govuk-focusable-within` mixin could be created but since `focus-within` has poor browser support (no IE or Edge) it seems preferable not to make it part of public API as someone might mistakenly use it instead of `govuk-focusable`. --- src/components/file-upload/_file-upload.scss | 28 ++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss index ae82a24a31..a3b3d419ae 100644 --- a/src/components/file-upload/_file-upload.scss +++ b/src/components/file-upload/_file-upload.scss @@ -33,6 +33,24 @@ border: 4px solid $govuk-input-border-colour; } } + + // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196 + // so that component receives focus in Firefox. + // This can't be set together with `:focus` as all versions of IE fail + // to recognise `focus-within` and don't set any styles from the block + // when it's a selector. + &:focus-within { + margin-right: -$component-padding; + margin-left: -$component-padding; + padding-right: $component-padding; + padding-left: $component-padding; + + // Emulate `govuk-focusable` mixin styles for this component in FF + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: 0; + + box-shadow: inset 0 0 0 4px $govuk-input-border-colour; + } } .govuk-file-upload--error { @@ -50,5 +68,15 @@ // already has the thicker border. box-shadow: none; } + + // Repeat `:focus` styles to prevent error styles from being applied when + // input button is pressed as this moves the focus to "within". + // This can't be set together with `:focus` as all versions of IE fail + // to recognise `focus-within` and don't set any styles from the block + // when it's a selector. + &:focus-within { + border-color: $govuk-input-border-colour; + box-shadow: none; + } } } From 76fea28e8d0ac64b4f8d273fb3e46e3e47f30001 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 8 May 2019 13:31:45 +0100 Subject: [PATCH 033/186] Update changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c1d91b3f1c..604dad713e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ See the [versioning documentation for how to update this changelog](./docs/contributing/versioning.md#updating-changelog). +- Update form inputs to use new WCAG 2.1 compliant focus style + + To migrate: [TODO add migration instructions before we ship v3.0.0] + + ([PR #1312](https://github.com/alphagov/govuk-frontend/pull/13)) + - Update links (and things that look like links) to use the new focus style To migrate: [TODO add migration instructions before we ship v3.0.0] From 7c2c40917bb8df4ebdd5019de605ba05eeb694b6 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 15:26:58 +0100 Subject: [PATCH 034/186] Use secondary button in application banner Also refactors some banner related styles... --- app/assets/scss/partials/_banner.scss | 23 ++--------------------- app/views/partials/banner.njk | 4 ++-- 2 files changed, 4 insertions(+), 23 deletions(-) diff --git a/app/assets/scss/partials/_banner.scss b/app/assets/scss/partials/_banner.scss index eb24667467..7f8d14cd0d 100644 --- a/app/assets/scss/partials/_banner.scss +++ b/app/assets/scss/partials/_banner.scss @@ -3,37 +3,18 @@ padding-bottom: govuk-spacing(6); overflow: hidden; @include govuk-font($size: 36, $line-height: 1.5) - font-family: sans-serif; - - .app-banner__button { - margin-bottom: 0; - } .govuk-body { color: inherit; font-size: inherit; } - .govuk-link { - color: govuk-colour("white"); - } - - .govuk-link:focus { - color: $govuk-text-colour; + .govuk-link:not(:focus) { + color: inherit; } } .app-banner--warning { color: govuk-colour("white"); background: govuk-colour("red"); - - .app-banner__button, - .app-banner__button:active, - .app-banner__button:hover, - .app-banner__button:focus { - margin-bottom: 0; - color: $govuk-text-colour; - background: govuk-colour("white"); - box-shadow: 0 2px 0 $govuk-text-colour; - } } diff --git a/app/views/partials/banner.njk b/app/views/partials/banner.njk index 255f6ead7c..e406fd2a23 100644 --- a/app/views/partials/banner.njk +++ b/app/views/partials/banner.njk @@ -7,8 +7,8 @@ See the GOV.UK Design System for recommended guidance.

- +
-{% endif %} \ No newline at end of file +{% endif %} From f3d261cb4eae9698b78fbe7b260ea6ee64b0dc32 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 3 May 2019 11:51:52 +0100 Subject: [PATCH 035/186] Increase border width on focused radios/checkboxes --- src/components/checkboxes/_checkboxes.scss | 1 + src/components/radios/_radios.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 0f0f1ff9a0..b644c671b8 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -125,6 +125,7 @@ // Since box-shadows are removed when users customise their colours, we set // a transparent outline that is shown instead. // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ + border-width: 4px; outline: $govuk-focus-width solid transparent; outline-offset: $govuk-focus-width; box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index bf2c1ce1c5..a725d8c297 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -126,6 +126,7 @@ // Since box-shadows are removed when users customise their colours we set a // transparent outline that is shown instead. // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ + border-width: 4px; outline: $govuk-focus-width solid transparent; outline-offset: $govuk-focus-width; box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; From d76e9bd6ec8cbba574a5a8d54c995d8eacf78bb2 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 3 May 2019 11:53:03 +0100 Subject: [PATCH 036/186] =?UTF-8?q?Reduce=20size=20of=20small=20radio=20?= =?UTF-8?q?=E2=80=98bullets=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This provides more space between the outline and the bullet when focused, and makes them visually more similar to the full-sized radios and checkboxes. --- src/components/radios/_radios.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index a725d8c297..757e98a561 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -278,9 +278,9 @@ // // Reduce the size of the 'button' and center it within the ring .govuk-radios__label::after { - top: 14px; - left: 6px; - border-width: 6px; + top: 15px; + left: 7px; + border-width: 5px; } // Fix position of hint with small radios From 8b20f0cb88a31fc16e93e6561227c33fa352017d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 3 May 2019 12:01:10 +0100 Subject: [PATCH 037/186] Remove transparent outline Now that there is a visible state change (the border-width increasing by 2px) when colours are overridden, the additional outline which was only used in that context can be removed. --- src/components/checkboxes/_checkboxes.scss | 5 ----- src/components/radios/_radios.scss | 5 ----- 2 files changed, 10 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index b644c671b8..edd055aa28 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -122,12 +122,7 @@ // Focused state .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - // Since box-shadows are removed when users customise their colours, we set - // a transparent outline that is shown instead. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ border-width: 4px; - outline: $govuk-focus-width solid transparent; - outline-offset: $govuk-focus-width; box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; } diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 757e98a561..09e9d6baba 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -123,12 +123,7 @@ // Focused state .govuk-radios__input:focus + .govuk-radios__label::before { - // Since box-shadows are removed when users customise their colours we set a - // transparent outline that is shown instead. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ border-width: 4px; - outline: $govuk-focus-width solid transparent; - outline-offset: $govuk-focus-width; box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; } From bc19b8ff860c3637bd3830e83eaca45ec18f851c Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 09:33:37 +0100 Subject: [PATCH 038/186] Document in CHANGELOG --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 604dad713e..89d6483514 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -97,6 +97,12 @@ changelog](./docs/contributing/versioning.md#updating-changelog). πŸ†• New features: +- Checkboxes and radios use a new focus state with a thicker border. The + transparent outline, previously required to show the focus state when custom + colour schemes are used, has been removed. + + ([PR #1316](https://github.com/alphagov/govuk-frontend/pull/1316)) + - A new setting `$govuk-use-legacy-palette` has been added, which by default will be true if any of the `$govuk-compatibility-*` settings are true. From 4fed9d2133d90628e7aa9fb39e35c26e8fe355d3 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 9 May 2019 16:27:37 +0100 Subject: [PATCH 039/186] Update tabs component to WCAG 2.1 compliant focus style Iterates on https://github.com/alphagov/govuk-frontend/pull/1245 --- src/components/tabs/_tabs.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index bbb61e7fe5..6e3b61afa3 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -84,7 +84,11 @@ color: govuk-colour("black"); background-color: govuk-colour("light-grey", $legacy: "grey-4"); text-align: center; - text-decoration: none; + text-decoration: underline; + + &:hover { + box-shadow: inset 0 4px 0 0 govuk-colour("light-blue"); + } &--selected { margin-top: - govuk-spacing(1); @@ -96,13 +100,18 @@ padding-bottom: govuk-spacing(3) + 1px; padding-left: govuk-spacing(4) - 1px; - border: 1px solid $govuk-border-colour; - border-bottom: 0; + border-top: 1px solid transparent; + border-right: 1px solid $govuk-border-colour; + border-bottom: 1px solid transparent; + border-left: 1px solid $govuk-border-colour; + color: govuk-colour("black"); background-color: govuk-colour("white"); + box-shadow: inset 0 4px 0 0 govuk-colour("blue"); + text-decoration: none; &:focus { - background-color: transparent; + box-shadow: inset 0 4px 0 0 govuk-colour("yellow"), inset 0 8px 0 0 govuk-colour("black"); } } } From e9d0e869e59810bf32a81c1ea441afeebf00f52d Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 9 May 2019 16:00:45 +0100 Subject: [PATCH 040/186] Update tabs new focus style for IE8 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit IE8 doesn’t support box-shadow so use border to indicate state. To prevent β€œjump” in selected state, make adjustments as this state modifies border width. Only use the black top border from the design which uses box-shadow to achieve a double border. --- src/components/tabs/_tabs.scss | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 6e3b61afa3..1c435e22e2 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -86,21 +86,40 @@ text-align: center; text-decoration: underline; + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so add an actual border that is + // modified to indicate state. + border-top: 4px solid transparent; + } + &:hover { box-shadow: inset 0 4px 0 0 govuk-colour("light-blue"); + + @include govuk-if-ie8 { + border-top: 4px solid govuk-colour("light-blue"); + } } &--selected { + $top-border-width: 1px; + $top-border-adjustment: 1px; + + @include govuk-if-ie8 { + // IE8 already has a top border so no adjustment is needed + $top-border-width: 4px; + $top-border-adjustment: 0; + } + margin-top: - govuk-spacing(1); margin-bottom: -1px; // 1px is compensation for border (otherwise we get a 1px shift) - padding-top: govuk-spacing(3) - 1px; + padding-top: govuk-spacing(3) - $top-border-adjustment; padding-right: govuk-spacing(4) - 1px; padding-bottom: govuk-spacing(3) + 1px; padding-left: govuk-spacing(4) - 1px; - border-top: 1px solid transparent; + border-top: $top-border-width solid transparent; border-right: 1px solid $govuk-border-colour; border-bottom: 1px solid transparent; border-left: 1px solid $govuk-border-colour; @@ -110,8 +129,16 @@ box-shadow: inset 0 4px 0 0 govuk-colour("blue"); text-decoration: none; + @include govuk-if-ie8 { + border-top: 4px solid govuk-colour("blue"); + } + &:focus { box-shadow: inset 0 4px 0 0 govuk-colour("yellow"), inset 0 8px 0 0 govuk-colour("black"); + + @include govuk-if-ie8 { + border-top: 4px solid govuk-colour("black"); + } } } } From d5acefa3949f17ea6d8cfd14c7d5a213da4f3a77 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 9 May 2019 10:22:16 +0100 Subject: [PATCH 041/186] Update changelog --- CHANGELOG.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89d6483514..66f885e41e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,11 +5,17 @@ See the [versioning documentation for how to update this changelog](./docs/contributing/versioning.md#updating-changelog). +- Update tabs to use new WCAG 2.1 compliant focus style + + To migrate: [TODO add migration instructions before we ship v3.0.0] + + ([PR #1326](https://github.com/alphagov/govuk-frontend/pull/1326)) + - Update form inputs to use new WCAG 2.1 compliant focus style To migrate: [TODO add migration instructions before we ship v3.0.0] - ([PR #1312](https://github.com/alphagov/govuk-frontend/pull/13)) + ([PR #1312](https://github.com/alphagov/govuk-frontend/pull/1312)) - Update links (and things that look like links) to use the new focus style From b0e6127e672c24ee96a683e1bb20a2e6196accb9 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 9 May 2019 15:09:22 +0100 Subject: [PATCH 042/186] PR fixes - will be squashed before merging --- src/components/tabs/_tabs.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 1c435e22e2..c215e5d54f 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -96,7 +96,7 @@ box-shadow: inset 0 4px 0 0 govuk-colour("light-blue"); @include govuk-if-ie8 { - border-top: 4px solid govuk-colour("light-blue"); + border-top-color: govuk-colour("light-blue"); } } @@ -121,23 +121,22 @@ border-top: $top-border-width solid transparent; border-right: 1px solid $govuk-border-colour; - border-bottom: 1px solid transparent; border-left: 1px solid $govuk-border-colour; - color: govuk-colour("black"); + color: $govuk-text-colour; background-color: govuk-colour("white"); - box-shadow: inset 0 4px 0 0 govuk-colour("blue"); + box-shadow: inset 0 4px 0 0 $govuk-link-colour; text-decoration: none; @include govuk-if-ie8 { - border-top: 4px solid govuk-colour("blue"); + border-top-color: $govuk-link-colour; } &:focus { - box-shadow: inset 0 4px 0 0 govuk-colour("yellow"), inset 0 8px 0 0 govuk-colour("black"); + box-shadow: inset 0 4px 0 0 $govuk-focus-colour, inset 0 8px 0 0 govuk-colour("black"); @include govuk-if-ie8 { - border-top: 4px solid govuk-colour("black"); + border-top-color: govuk-colour("black"); } } } From 1ec3a263b5b9a3229da4c22d7a70e751f4adcbab Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 13:59:50 +0100 Subject: [PATCH 043/186] Update footer links to use new focus style --- src/components/footer/_footer.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss index 09604bbf20..cc1195805f 100644 --- a/src/components/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -44,7 +44,12 @@ } .govuk-footer__link { - @include govuk-focusable-fill; + text-decoration: none; + + &:hover, + &:active { + text-decoration: underline; + } @if ($govuk-use-legacy-palette) { &:link, @@ -65,11 +70,7 @@ } } - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - &:focus { - color: $govuk-focus-text-colour; - } + @include govuk-focusable-text-link; // alphagov/govuk_template includes a specific a:link:focus selector // designed to make unvisited links a slightly darker blue when focussed, so From ed67000df4ac7698a2fe5dc7810e030b560e85d8 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 15:21:54 +0100 Subject: [PATCH 044/186] Add CHANGELOG entry --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66f885e41e..9b777bbb0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,12 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1312](https://github.com/alphagov/govuk-frontend/pull/1312)) +- Update footer links to use new focus style + + To migrate: [TODO add migration instructions before we ship v3.0.0] + + ([PR #1321](https://github.com/alphagov/govuk-frontend/pull/1321)) + - Update links (and things that look like links) to use the new focus style To migrate: [TODO add migration instructions before we ship v3.0.0] From eae2a742495763dfc1c994a3e262d358ac248354 Mon Sep 17 00:00:00 2001 From: Dave House Date: Fri, 10 May 2019 09:31:33 +0100 Subject: [PATCH 045/186] add example using secondary and warning button --- .../confirm-delete/index.njk | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 app/views/full-page-examples/confirm-delete/index.njk diff --git a/app/views/full-page-examples/confirm-delete/index.njk b/app/views/full-page-examples/confirm-delete/index.njk new file mode 100644 index 0000000000..5880622676 --- /dev/null +++ b/app/views/full-page-examples/confirm-delete/index.njk @@ -0,0 +1,48 @@ +{% extends "_generic.njk" %} + +{% from "warning-text/macro.njk" import govukWarningText %} +{% from "button/macro.njk" import govukButton %} + +{% set homepage_url = "/" %} +{% set pageTitle = "Are you sure you want to delete Josh Lyman’s account?" %} +{% block page_title %}GOV.UK - {{ pageTitle }}{% endblock %} +{% set mainClasses = "govuk-main-wrapper--l" %} + +{% block content %} +
+
+
+ +

+ {{ pageTitle }} +

+ +

Josh Lyman last logged in 3 days ago.

+ +

By deleting their administrator account they will no longer have access to this system. All cases that Josh Lyman is assigned to will remain open but their name will be removed from the case history.

+ + {{ govukWarningText({ + text: "This action is final and cannot be undone.", + iconFallbackText: "Warning", + classes: "govuk-!-margin-bottom-8" + }) }} + +
+ + {{ govukButton({ + text: "Delete account", + classes: "govuk-button--warning govuk-!-margin-right-3" + }) }} + + {{ govukButton({ + text: "Cancel", + classes: "govuk-button--secondary" + }) }} + +
+ +
+
+
+ +{% endblock %} From 1dcfaa6e2e9424b59b168a6b51e645eee643ddcf Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 10 May 2019 10:42:27 +0100 Subject: [PATCH 046/186] Underline meta information links in footer We want most links to not have a default underline, but keep it for the meta information links --- src/components/footer/_footer.scss | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss index cc1195805f..4b4a7a1e05 100644 --- a/src/components/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -44,13 +44,6 @@ } .govuk-footer__link { - text-decoration: none; - - &:hover, - &:active { - text-decoration: underline; - } - @if ($govuk-use-legacy-palette) { &:link, &:visited { @@ -82,6 +75,16 @@ } } + .govuk-footer__inline-list .govuk-footer__link, + .govuk-footer__list .govuk-footer__link { + text-decoration: none; + + &:hover, + &:active { + text-decoration: underline; + } + } + .govuk-footer__section-break { margin: 0; // Reset `
` default margins @include govuk-responsive-margin(8, "bottom"); From 87a38140aa2ffa7d0866427d243de7943d5413e3 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Fri, 10 May 2019 15:42:56 +0100 Subject: [PATCH 047/186] Fix poor colour contrast in IE8 for banner --- app/assets/scss/partials/_banner.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/assets/scss/partials/_banner.scss b/app/assets/scss/partials/_banner.scss index 7f8d14cd0d..23ac177b89 100644 --- a/app/assets/scss/partials/_banner.scss +++ b/app/assets/scss/partials/_banner.scss @@ -9,8 +9,12 @@ font-size: inherit; } - .govuk-link:not(:focus) { - color: inherit; + .govuk-link { + color: govuk-colour("white"); + } + + .govuk-link:focus { + color: $govuk-text-colour; } } From 5ba04dda1b34f35d14cbc29838b820b5619eb165 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 9 May 2019 16:25:12 +0100 Subject: [PATCH 048/186] Improve tabs heading spacing on mobile and no-js view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Split from https://github.com/alphagov/govuk-frontend/pull/1326 This amends the tab headings spacing on mobile and no-js view to be consistent with how we present the navigation on the Design System: Adjusts the padding/margin so that with the the list version of component that’s used on mobile and no-js we use have govuk-spacing(2) as bottom margin, consistent with what we do with on-page navigation in GOV.UK Design System when it's displayed as a list. For the desktop/js-enabled version of component remove bottom margin and use top and bottom padding instead. Also adjusts bottom margin of list item so that it’s applied on no-js version and add some more spacing under the tabs title. --- src/components/tabs/_tabs.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index c215e5d54f..73f432d6e0 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -13,16 +13,14 @@ .govuk-tabs__title { @include govuk-font($size: 19); - margin-bottom: govuk-spacing(1); + margin-bottom: govuk-spacing(2); } .govuk-tabs__list { margin: 0; padding: 0; list-style: none; - @include mq($until: tablet) { - @include govuk-responsive-margin(6, "bottom"); - } + @include govuk-responsive-margin(6, "bottom"); } .govuk-tabs__list-item { @@ -41,8 +39,7 @@ @include govuk-font($size: 19); display: inline-block; - padding-top: govuk-spacing(2); - padding-bottom: govuk-spacing(2); + margin-bottom: govuk-spacing(2); &[aria-current = "true"] { color: govuk-colour("black"); @@ -61,6 +58,7 @@ .govuk-tabs__list { @include govuk-clearfix; + margin-bottom: 0; border-bottom: 1px solid $govuk-border-colour; } @@ -86,6 +84,12 @@ text-align: center; text-decoration: underline; + @include mq($from: tablet) { + margin-bottom: 0; + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + } + @include govuk-if-ie8 { // IE8 doesn't support `box-shadow` so add an actual border that is // modified to indicate state. From 92b9e0c2fad85835db2650472fa51b3f10b67071 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 9 May 2019 17:09:12 +0100 Subject: [PATCH 049/186] Update changelog --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b777bbb0a..013fc32e8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -107,6 +107,14 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288)) +- Spacing of tabs list updated to be more inline with similar lists on GOV.UK and the Design System + + The tabs headings spacing has changed slightly on on mobile and when Javascript is disabled. See https://github.com/alphagov/govuk-frontend/pull/1330#issuecomment-491233294 + + To migrate: In the unlikely event that your app relies on the spacing of the tab headings being a certain height on mobile and with JS disabled, you should make the necessary adjustments in your code. + + ([PR #1330](https://github.com/alphagov/govuk-frontend/pull/1330)) + πŸ†• New features: - Checkboxes and radios use a new focus state with a thicker border. The From 4495c3fb968a8c9a13d9329c5bb1266ee4e6d3c3 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 15:16:25 +0100 Subject: [PATCH 050/186] Change input width This stops the input from being really small when the viewport is e.g. at the smallest tablet breakpoint. --- app/views/full-page-examples/what-is-your-nationality/index.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/full-page-examples/what-is-your-nationality/index.njk b/app/views/full-page-examples/what-is-your-nationality/index.njk index 87c0b734c4..e20a2a5a2c 100644 --- a/app/views/full-page-examples/what-is-your-nationality/index.njk +++ b/app/views/full-page-examples/what-is-your-nationality/index.njk @@ -37,7 +37,7 @@ id: "country-name", name: "country-name", type: "text", - classes: "govuk-!-width-one-third", + classes: "govuk-input--width-20", label: { text: "Country name" }, From fbcb8fd5060453fec504eb8c867e7e1485c02439 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 18:45:59 +0100 Subject: [PATCH 051/186] Add accordion example with focusable children --- src/components/accordion/accordion.yaml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/accordion/accordion.yaml b/src/components/accordion/accordion.yaml index 0d425e3e36..fc72438a02 100644 --- a/src/components/accordion/accordion.yaml +++ b/src/components/accordion/accordion.yaml @@ -130,3 +130,16 @@ examples:
  • Example item 2
+ +- name: with focusable elements inside + data: + id: with-focusable-elements + items: + - heading: + text: Section A + content: + html: Link A + - heading: + text: Section B + content: + html: Link B From e57ec2eb9e35d1573068a899f6f3c17bd4516de7 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 18:46:21 +0100 Subject: [PATCH 052/186] Split focussable mixin so it can be used without baked in :focus --- src/helpers/_focusable.scss | 44 ++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss index 1ef15b7ded..68738f99cb 100644 --- a/src/helpers/_focusable.scss +++ b/src/helpers/_focusable.scss @@ -33,6 +33,29 @@ } } +@mixin govuk-focusable-text { + // When colours are overridden, for example when users have a dark mode, + // backgrounds and box-shadows disappear, so we need to ensure there's a + // transparent outline which will be set to a visible colour. + + // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines + @include govuk-not-ie8 { + outline: $govuk-focus-width solid transparent; + outline-offset: 0; + } + color: $govuk-text-colour; + background-color: $govuk-focus-colour; + // sass-lint:disable indentation + box-shadow: -5px -1px 0 1px $govuk-focus-colour, + 5px -1px 0 1px $govuk-focus-colour, + -3px 1px 0 3px $govuk-text-colour, + 3px 1px 0 3px $govuk-text-colour; + // sass-lint:enable indentation + // When link is focussed, hide the default underline since the + // box shadow adds the "underline" + text-decoration: none; +} + /// Focusable with box-shadow /// /// Removes the visible outline and replace with box-shadow and background colour. @@ -42,25 +65,6 @@ @mixin govuk-focusable-text-link { &:focus { - // When colours are overridden, for example when users have a dark mode, - // backgrounds and box-shadows disappear, so we need to ensure there's a - // transparent outline which will be set to a visible colour. - - // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines - @include govuk-not-ie8 { - outline: $govuk-focus-width solid transparent; - outline-offset: 0; - } - color: $govuk-text-colour; - background-color: $govuk-focus-colour; - // sass-lint:disable indentation - box-shadow: -5px -1px 0 1px $govuk-focus-colour, - 5px -1px 0 1px $govuk-focus-colour, - -3px 1px 0 3px $govuk-text-colour, - 3px 1px 0 3px $govuk-text-colour; - // sass-lint:enable indentation - // When link is focussed, hide the default underline since the - // box shadow adds the "underline" - text-decoration: none; + @include govuk-focusable-text; } } From bb4bb043bc9c194563bd6a3d22127b2206ea57b9 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 18:46:35 +0100 Subject: [PATCH 053/186] Add new focus accordion styles These focus styles are necessary to meet WCAG 2.1 non-text contrast requirements --- src/components/accordion/_accordion.scss | 88 +++++++++++++++++------- 1 file changed, 65 insertions(+), 23 deletions(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 668f45ba20..12d5b2087d 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -5,6 +5,10 @@ @include govuk-exports("govuk/component/accordion") { + $govuk-accordion-link-colour: $govuk-link-colour; + $govuk-accordion-link-hover-colour: govuk-colour("light-blue"); + $govuk-accordion-border-width: 3px; + .govuk-accordion { @include govuk-responsive-margin(6, "bottom"); } @@ -15,6 +19,7 @@ } .govuk-accordion__section-header { + padding-top: govuk-spacing(3); padding-bottom: govuk-spacing(3); } @@ -52,7 +57,6 @@ // Borders between accordion sections .govuk-accordion__section { padding-top: 0; - border-top: 1px solid $govuk-border-colour; } // Hide the body of collapsed sections @@ -70,16 +74,18 @@ // This is styled to look like a link not a button .govuk-accordion__open-all { @include govuk-font($size: 16); - @include govuk-link-common; - display: inline; + position: relative; + z-index: 1; + margin: 0; + margin-right: 5px; + padding: 0; border-width: 0; color: $govuk-link-colour; background: none; cursor: pointer; - &:focus { - background: none; - } + @include govuk-link-common; + @include govuk-link-style-default; } // Section headers have a pointer cursor as an additional affordance @@ -87,47 +93,64 @@ position: relative; // Safe area on the right to avoid clashing with icon padding-right: 40px; + border-top: 1px solid $govuk-border-colour; + color: $govuk-accordion-link-colour; cursor: pointer; } - // Section headers have a grey background on hover as an additional affodance + .govuk-accordion__section--expanded .govuk-accordion__section-header { + border-top-color: $govuk-accordion-link-colour; + box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour; + } + .govuk-accordion__section-header:hover { - background-color: govuk-colour("light-grey", $legacy: "grey-4"); + border-top-color: $govuk-accordion-link-hover-colour; + box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-hover-colour; + } - // For devices that can't hover such as touch devices, - // remove hover state as it can be stuck in that state (iOS). - @media (hover: none) { - background-color: initial; + // For devices that can't hover such as touch devices, + // remove hover state as it can be stuck in that state (iOS). + @media (hover: none) { + .govuk-accordion__section-header:hover { + border-top-color: $govuk-accordion-link-colour; + box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour; } } // Setting focus styles on header so that summary that is not part of the button is included in focus .govuk-accordion__section-header--focused { // These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus) - outline: $govuk-focus-width solid $govuk-focus-colour; + outline: $govuk-focus-width solid transparent; outline-offset: 0; } + .govuk-accordion__section--expanded .govuk-accordion__section-header--focused { + border-top-color: $govuk-focus-colour; + color: $govuk-text-colour; + // sass-lint:disable indentation + box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour, + inset 0 ($govuk-accordion-border-width + $govuk-focus-width) 0 0 $govuk-text-colour; + // sass-lint:enable indentation + } + // Buttons within the headers don’t need default styling .govuk-accordion__section-button { - @include govuk-link-common; - width: 100%; + @include govuk-typography-common; margin-top: 0; margin-bottom: 0; margin-left: 0; - padding-top: govuk-spacing(3); - padding-bottom: 0; - padding-left: 0; + padding: 0; border-width: 0; - // Headings in section headers have link colours as an additional affodance - color: $govuk-link-colour; + color: inherit; background: none; text-align: left; cursor: pointer; - &:focus { - outline: none; - background: none; + @include govuk-not-ie8 { + &:focus { + outline: none; + background: none; + } } } @@ -141,6 +164,25 @@ left: 0; } + .govuk-accordion__section-button:hover:not(:focus) { + text-decoration: underline; + } + + // For devices that can't hover such as touch devices, + // remove hover state as it can be stuck in that state (iOS). + @media (hover: none) { + .govuk-accordion__section-button:hover { + text-decoration: none; + } + } + + // The accordion component has two focus state depending on if a section is expanded or closed. + // We also want to avoid styling when the secttion is pressed or `:active` + // to avoid the different focus styles from flashing quickly while the user interacts with the section. + .govuk-accordion__section:not(.govuk-accordion__section--expanded) .govuk-accordion__section-button:focus:not(:active) { + @include govuk-focusable-text; + } + .govuk-accordion__controls { text-align: right; } From 924fba9e49e049eba13824d16f6680c185253bb1 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 9 May 2019 10:26:30 +0100 Subject: [PATCH 054/186] Fix issue with pseudo-classes transform breaking :not() --- tasks/gulp/compile-assets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js index 85619aebd9..a2000e1c2f 100644 --- a/tasks/gulp/compile-assets.js +++ b/tasks/gulp/compile-assets.js @@ -19,7 +19,7 @@ const cssnano = require('cssnano') const postcsspseudoclasses = require('postcss-pseudo-classes')({ // Work around a bug in pseudo classes plugin that badly transforms // :not(:whatever) pseudo selectors - blacklist: [':not(', ':disabled)', ':last-child)', ':focus)'] + blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)'] }) // Compile CSS and JS task -------------- From 23395ac203f8a5ee99aaa8e921dc54b466e6738b Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 9 May 2019 11:40:05 +0100 Subject: [PATCH 055/186] Remove default button focus outlines in Firefox --- src/components/accordion/_accordion.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 12d5b2087d..b3293816d6 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -86,6 +86,12 @@ @include govuk-link-common; @include govuk-link-style-default; + + // Remove default button focus outline in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } } // Section headers have a pointer cursor as an additional affordance @@ -152,6 +158,12 @@ background: none; } } + + // Remove default button focus outline in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } } // Extend the touch area of the button to span the section header From 162a3fcc93e93f848c045576c7d4f2349f111a9f Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 9 May 2019 12:23:33 +0100 Subject: [PATCH 056/186] Improve focus styles when in overridden colours on Firefox --- src/components/accordion/_accordion.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index b3293816d6..04f0d9535f 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -83,6 +83,7 @@ color: $govuk-link-colour; background: none; cursor: pointer; + -webkit-appearance: none; @include govuk-link-common; @include govuk-link-style-default; @@ -123,15 +124,13 @@ } } - // Setting focus styles on header so that summary that is not part of the button is included in focus - .govuk-accordion__section-header--focused { - // These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus) - outline: $govuk-focus-width solid transparent; - outline-offset: 0; - } - .govuk-accordion__section--expanded .govuk-accordion__section-header--focused { border-top-color: $govuk-focus-colour; + // When colours are overridden, for example when users have a dark mode, + // backgrounds and box-shadows disappear, so we need to ensure there's a + // transparent outline which will be set to a visible colour. + outline: $govuk-focus-width solid transparent; + outline-offset: 0; color: $govuk-text-colour; // sass-lint:disable indentation box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour, @@ -151,6 +150,7 @@ background: none; text-align: left; cursor: pointer; + -webkit-appearance: none; @include govuk-not-ie8 { &:focus { From 6c2ddd23726533a5843a10253670107b2b4bac52 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 9 May 2019 12:38:19 +0100 Subject: [PATCH 057/186] Add fallback for IE8 styles --- src/components/accordion/_accordion.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 04f0d9535f..7660e10bb2 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -125,7 +125,9 @@ } .govuk-accordion__section--expanded .govuk-accordion__section-header--focused { - border-top-color: $govuk-focus-colour; + @include govuk-not-ie8 { + border-top-color: $govuk-focus-colour; + } // When colours are overridden, for example when users have a dark mode, // backgrounds and box-shadows disappear, so we need to ensure there's a // transparent outline which will be set to a visible colour. @@ -152,10 +154,10 @@ cursor: pointer; -webkit-appearance: none; - @include govuk-not-ie8 { + @include govuk-if-ie8 { &:focus { - outline: none; - background: none; + color: $govuk-text-colour; + background: $govuk-focus-colour; } } From 737ce8ddc24341e1461be46a0fb40771b13303ec Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 10 May 2019 11:41:03 +0100 Subject: [PATCH 058/186] Add CHANGELOG entry --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 013fc32e8e..165b39eb17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,12 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1326](https://github.com/alphagov/govuk-frontend/pull/1326)) +- Update accordion to use new WCAG 2.1 compliant focus style + + To migrate: [TODO add migration instructions before we ship v3.0.0] + + ([PR #1324](https://github.com/alphagov/govuk-frontend/pull/1324)) + - Update form inputs to use new WCAG 2.1 compliant focus style To migrate: [TODO add migration instructions before we ship v3.0.0] @@ -141,6 +147,10 @@ changelog](./docs/contributing/versioning.md#updating-changelog). πŸ”§ Fixes: +- Update accordion focus styles to remove firefox outlines + + ([PR #1324](https://github.com/alphagov/govuk-frontend/pull/1324)) + - Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow` This better reflects how the variable is used. From 527d150ab53bec249b1c0e96c5e9bb9334c083e2 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 11:46:01 +0100 Subject: [PATCH 059/186] Handle default focus styles on buttons --- src/components/accordion/_accordion.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 7660e10bb2..0bec54b539 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -154,6 +154,14 @@ cursor: pointer; -webkit-appearance: none; + @include govuk-not-ie8 { + // Ensure the default focus styles are not shown for buttons + &:focus { + outline: none; + background: none; + } + } + @include govuk-if-ie8 { &:focus { color: $govuk-text-colour; From 27b693d43b15e1b1a6303aeb3b7ccaff4a98d585 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 14:11:01 +0100 Subject: [PATCH 060/186] Add separate index page for full page examples --- app/app.js | 4 ++-- app/full-page-examples.js | 14 ++++++++++++ app/views/full-page-examples/index.njk | 30 ++++++++++++++++++++++++++ app/views/layouts/index.njk | 6 +++--- lib/file-helper.js | 11 +++++++++- 5 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 app/views/full-page-examples/index.njk diff --git a/app/app.js b/app/app.js index ff918867dd..5176f0dcc1 100644 --- a/app/app.js +++ b/app/app.js @@ -89,12 +89,12 @@ module.exports = (options) => { app.get('/', async function (req, res) { const components = fileHelper.allComponents const examples = await readdir(path.resolve(configPaths.examples)) - const fullPageExamples = await readdir(path.resolve(configPaths.fullPageExamples)) + const fullPageExamples = fileHelper.fullPageExamples() res.render('index', { componentsDirectory: components, examplesDirectory: examples, - fullPageExamplesDirectory: fullPageExamples + fullPageExamples: fullPageExamples }) }) diff --git a/app/full-page-examples.js b/app/full-page-examples.js index 589c8e35a8..ed9c8f7686 100644 --- a/app/full-page-examples.js +++ b/app/full-page-examples.js @@ -1,3 +1,5 @@ +const fileHelper = require('../lib/file-helper') + module.exports = (app) => { require('./views/full-page-examples/applicant-details')(app) require('./views/full-page-examples/have-you-changed-your-name')(app) @@ -12,6 +14,18 @@ module.exports = (app) => { require('./views/full-page-examples/what-is-your-postcode')(app) require('./views/full-page-examples/what-was-the-last-country-you-visited')(app) + app.get('/full-page-examples', (req, res, next) => { + res.locals.examples = fileHelper.fullPageExamples() + + res.render('full-page-examples/index', (error, html) => { + if (error) { + next(error) + } else { + res.send(html) + } + }) + }) + // Display full page examples index by default if not handled already app.get('/full-page-examples/:example', function (req, res, next) { res.render(`${req.params.example}/index`, function (error, html) { diff --git a/app/views/full-page-examples/index.njk b/app/views/full-page-examples/index.njk new file mode 100644 index 0000000000..88cf4d4d81 --- /dev/null +++ b/app/views/full-page-examples/index.njk @@ -0,0 +1,30 @@ +{% extends "layout.njk" %} +{% from "back-link/macro.njk" import govukBackLink %} + +{% block beforeContent %} + {{ govukBackLink({ + href: "/" + legacyQuery + }) }} +{% endblock %} + +{% block content %} +
+
+

+ Full page examples +

+ +

These examples are designed to test the styles, components and patterns from GOV.UK Frontend in a realistic context.

+ +

Your responses to any questions asked in the examples will not be recorded.

+ +
+ + {% for example in examples %} + +

{{ example.name | replace("-", " ") | capitalize }}

+ + {% endfor %} +
+
+{% endblock %} diff --git a/app/views/layouts/index.njk b/app/views/layouts/index.njk index 1d57cd0129..318d1273c7 100644 --- a/app/views/layouts/index.njk +++ b/app/views/layouts/index.njk @@ -29,11 +29,11 @@
-

Full page examples

+

Full page examples

diff --git a/lib/file-helper.js b/lib/file-helper.js index 54890279e3..4bdba3f94c 100644 --- a/lib/file-helper.js +++ b/lib/file-helper.js @@ -8,7 +8,7 @@ const configPaths = require('../config/paths.json') const childDirectories = dir => { return fs.readdirSync(dir) - .filter(file => fs.statSync(path.join(configPaths.components, file)).isDirectory()) + .filter(file => fs.statSync(path.join(dir, file)).isDirectory()) } // Generate component list from source directory, excluding anything that's not @@ -34,3 +34,12 @@ const getComponentData = componentName => { } exports.getComponentData = getComponentData + +exports.fullPageExamples = () => { + return childDirectories(path.resolve(configPaths.fullPageExamples)) + .map(folderName => ({ + name: folderName, + path: folderName + })) + .sort((a, b) => (a.name > b.name) ? 1 : -1) +} From df8634c9cf80c9eb99ba603290a89133ae10cc86 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 14:16:17 +0100 Subject: [PATCH 061/186] Read scenario and notes from front-matter --- .../full-page-examples/announcements/index.njk | 5 ++++- app/views/full-page-examples/index.njk | 12 ++++++++++++ lib/file-helper.js | 4 +++- package-lock.json | 17 +++++++++++++---- package.json | 1 + 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/app/views/full-page-examples/announcements/index.njk b/app/views/full-page-examples/announcements/index.njk index cc66d99f7d..14b6bec13f 100644 --- a/app/views/full-page-examples/announcements/index.njk +++ b/app/views/full-page-examples/announcements/index.njk @@ -1,4 +1,7 @@ -{# This example is based on the "2018’s oddest requests from Brits abroad: β€˜Strictly’, vampires and sausages" publication: https://www.gov.uk/government/news/strictly-vampires-and-sausages-2018s-oddest-requests-from-brits-abroad #} +--- +scenario: You want to read this article about '2018’s oddest requests from Brits abroad'. +notes: Based on https://www.gov.uk/government/news/strictly-vampires-and-sausages-2018s-oddest-requests-from-brits-abroad +--- {% extends "_generic.njk" %} {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} diff --git a/app/views/full-page-examples/index.njk b/app/views/full-page-examples/index.njk index 88cf4d4d81..3549658b0c 100644 --- a/app/views/full-page-examples/index.njk +++ b/app/views/full-page-examples/index.njk @@ -24,6 +24,18 @@

{{ example.name | replace("-", " ") | capitalize }}

+ {% if example.scenario %} +

+ {{ example.scenario }} +

+ {% endif %} + + {% if example.notes %} +

{{ example.notes }}

+ {% endif %} + +
+ {% endfor %}
diff --git a/lib/file-helper.js b/lib/file-helper.js index 4bdba3f94c..2cb48471f9 100644 --- a/lib/file-helper.js +++ b/lib/file-helper.js @@ -3,6 +3,7 @@ const fs = require('fs') const path = require('path') const yaml = require('js-yaml') +const fm = require('front-matter') const configPaths = require('../config/paths.json') @@ -39,7 +40,8 @@ exports.fullPageExamples = () => { return childDirectories(path.resolve(configPaths.fullPageExamples)) .map(folderName => ({ name: folderName, - path: folderName + path: folderName, + ...fm(readFileContents(path.join(configPaths.fullPageExamples, folderName, 'index.njk'))).attributes })) .sort((a, b) => (a.name > b.name) ? 1 : -1) } diff --git a/package-lock.json b/package-lock.json index 451c626f16..fd7cd22590 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5224,12 +5224,12 @@ "dev": true }, "front-matter": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.1.2.tgz", - "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-3.0.2.tgz", + "integrity": "sha512-iBGZaWyzqgsrPGsqrXZP6N4hp5FzSKDi18nfAoYpgz3qK5sAwFv/ojmn3VS60SOgLvq6CtojNqy0y6ZNz05IzQ==", "dev": true, "requires": { - "js-yaml": "^3.4.6" + "js-yaml": "^3.13.1" } }, "fs-exists-sync": { @@ -15573,6 +15573,15 @@ "object-assign": "^4.0.1" } }, + "front-matter": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.1.2.tgz", + "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=", + "dev": true, + "requires": { + "js-yaml": "^3.4.6" + } + }, "fs-extra": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz", diff --git a/package.json b/package.json index 470bbe1c7d..0c9007ab48 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "eslint": "^5.16.0", "express": "^4.16.4", "express-validator": "^5.3.1", + "front-matter": "^3.0.2", "glob": "^7.1.3", "govuk-elements-sass": "3.1.3", "govuk_frontend_toolkit": "8.1.0", From b3b2d3dd5b2df51be77ffc00864464007dbd15d3 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 14:20:52 +0100 Subject: [PATCH 062/186] Support markdown in scenarios --- app/app.js | 1 + app/assets/scss/app.scss | 1 + app/assets/scss/partials/_prose.scss | 59 ++++++ .../bank-holidays/index.njk | 16 +- app/views/full-page-examples/index.njk | 6 +- package-lock.json | 178 +++++++++++++----- package.json | 1 + 7 files changed, 211 insertions(+), 51 deletions(-) create mode 100644 app/assets/scss/partials/_prose.scss diff --git a/app/app.js b/app/app.js index 5176f0dcc1..3809414db8 100644 --- a/app/app.js +++ b/app/app.js @@ -39,6 +39,7 @@ module.exports = (options) => { // make the function available as a filter for all templates env.addFilter('componentNameToMacroName', helperFunctions.componentNameToMacroName) + env.addGlobal('markdown', require('marked')) // Set view engine app.set('view engine', 'njk') diff --git a/app/assets/scss/app.scss b/app/assets/scss/app.scss index a72cacd1e3..b0db00daae 100644 --- a/app/assets/scss/app.scss +++ b/app/assets/scss/app.scss @@ -3,3 +3,4 @@ $govuk-show-breakpoints: true; @import "../../../src/all"; @import "partials/app"; @import "partials/banner"; +@import "partials/prose"; diff --git a/app/assets/scss/partials/_prose.scss b/app/assets/scss/partials/_prose.scss new file mode 100644 index 0000000000..50043ce47d --- /dev/null +++ b/app/assets/scss/partials/_prose.scss @@ -0,0 +1,59 @@ +.app-prose-scope { + + h1 { + @extend %govuk-heading-xl; + } + + h2 { + @extend %govuk-heading-l; + } + + h3 { + @extend %govuk-heading-m; + } + + h4 { + @extend %govuk-heading-s; + } + + p { + @extend %govuk-body-m; + } + + strong, + b { + @include govuk-typography-weight-bold; + } + + ul, + ol { + @extend %govuk-list; + } + + ol { + @extend %govuk-list--number; + } + + ul { + @extend %govuk-list--bullet; + } + + a { + @extend %govuk-link; + } + + hr { + @extend %govuk-section-break; + @extend %govuk-section-break--visible; + @extend %govuk-section-break--xl; + } + + pre + h2 { + padding-top: govuk-spacing(4); + } + + pre + h3, + pre + h4 { + padding-top: govuk-spacing(2); + } +} diff --git a/app/views/full-page-examples/bank-holidays/index.njk b/app/views/full-page-examples/bank-holidays/index.njk index 271db559a3..e5809b707e 100644 --- a/app/views/full-page-examples/bank-holidays/index.njk +++ b/app/views/full-page-examples/bank-holidays/index.njk @@ -1,4 +1,18 @@ -{# This example is based of the live "UK bank holidays" page: https://www.gov.uk/bank-holidays #} +--- +scenario: >- + You want to know when the next bank holiday will be. + + + Things to try: + + 1. Find out when the next bank holiday is in Scotland. + + 2. Find out when the Boxing Day bank holiday is in 2020. + +notes: >- + This example is based on https://www.gov.uk/bank-holidays. + The data is not 'live' and so the answer is unlikely to be correct. +--- {% extends "_generic.njk" %} {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} diff --git a/app/views/full-page-examples/index.njk b/app/views/full-page-examples/index.njk index 3549658b0c..fb91e8edd6 100644 --- a/app/views/full-page-examples/index.njk +++ b/app/views/full-page-examples/index.njk @@ -25,9 +25,9 @@

{{ example.name | replace("-", " ") | capitalize }}

{% if example.scenario %} -

- {{ example.scenario }} -

+
+ {{ markdown(example.scenario) | safe }} +
{% endif %} {% if example.notes %} diff --git a/package-lock.json b/package-lock.json index fd7cd22590..4a6abf6f2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1886,7 +1886,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -1910,13 +1911,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1933,19 +1936,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2076,7 +2082,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2090,6 +2097,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2106,6 +2114,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2114,13 +2123,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2141,6 +2152,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2229,7 +2241,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2243,6 +2256,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2338,7 +2352,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -2380,6 +2395,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2401,6 +2417,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2449,13 +2466,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true + "dev": true, + "optional": true } } }, @@ -5283,7 +5302,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -5304,12 +5324,14 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5324,17 +5346,20 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5451,7 +5476,8 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -5463,6 +5489,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5477,6 +5504,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5484,12 +5512,14 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5508,6 +5538,7 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5588,7 +5619,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5600,6 +5632,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -5685,7 +5718,8 @@ "safe-buffer": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", - "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5721,6 +5755,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5740,6 +5775,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5783,12 +5819,14 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", - "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=" + "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", + "optional": true } } }, @@ -8809,7 +8847,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8833,13 +8872,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8856,19 +8897,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -8999,7 +9043,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -9013,6 +9058,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9029,6 +9075,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -9037,13 +9084,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9064,6 +9113,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -9152,7 +9202,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -9166,6 +9217,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -9261,7 +9313,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -9303,6 +9356,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9324,6 +9378,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9372,13 +9427,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true + "dev": true, + "optional": true } } } @@ -10795,9 +10852,9 @@ } }, "marked": { - "version": "0.3.19", - "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz", - "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==", + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.6.2.tgz", + "integrity": "sha512-LqxwVH3P/rqKX4EKGz7+c2G9r98WeM/SW34ybhgNGhUQNKtf1GmmSkJ6cDGJ/t6tiyae49qRkpyTw2B9HOrgUA==", "dev": true }, "matchdep": { @@ -11535,7 +11592,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -11559,13 +11617,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -11582,19 +11642,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -11725,7 +11788,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -11739,6 +11803,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -11755,6 +11820,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -11763,13 +11829,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -11790,6 +11858,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -11878,7 +11947,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -11892,6 +11962,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -11987,7 +12058,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -12029,6 +12101,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -12050,6 +12123,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -12098,13 +12172,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true + "dev": true, + "optional": true } } }, @@ -16228,6 +16304,14 @@ "dev": true, "requires": { "marked": "^0.3.19" + }, + "dependencies": { + "marked": { + "version": "0.3.19", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz", + "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==", + "dev": true + } } }, "sassdoc-theme-default": { diff --git a/package.json b/package.json index 0c9007ab48..2531c8ddf2 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "jest-serializer-html": "^6.0.0", "js-yaml": "^3.13.1", "map-stream": "0.0.7", + "marked": "^0.6.2", "merge-stream": "^1.0.1", "node-sass": "^4.11.0", "nodemon": "^1.18.11", From 579e49f8375baece6dd4775655ec1fb5ba66d2eb Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 14:21:23 +0100 Subject: [PATCH 063/186] Add scenarios and notes for all examples --- .../applicant-details/index.njk | 10 +++++++ .../check-your-answers/index.njk | 15 ++++++++++- .../full-page-examples/feedback/index.njk | 26 ++++++++++++++++--- .../have-you-changed-your-name/index.njk | 12 +++++++++ .../how-do-you-want-to-sign-in/index.njk | 14 ++++++++-- .../news-and-communications/index.njk | 18 +++++++++++++ .../passport-details/index.njk | 12 +++++++++ .../renew-driving-licence/index.njk | 10 ++++++- .../service-manual-topic/index.njk | 9 +++++++ .../full-page-examples/start-page/index.njk | 20 +++++++++++--- .../update-your-account-details/index.njk | 10 +++++++ .../upload-your-photo/index.njk | 14 ++++++++-- .../what-is-your-address/index.njk | 11 ++++++++ .../what-is-your-nationality/index.njk | 20 ++++++++++++++ .../what-is-your-postcode/index.njk | 10 +++++++ .../index.njk | 10 +++++++ 16 files changed, 208 insertions(+), 13 deletions(-) diff --git a/app/views/full-page-examples/applicant-details/index.njk b/app/views/full-page-examples/applicant-details/index.njk index c4e0cfda16..8cd6023d36 100644 --- a/app/views/full-page-examples/applicant-details/index.njk +++ b/app/views/full-page-examples/applicant-details/index.njk @@ -1,3 +1,13 @@ +--- +scenario: + As part of an online service you are asked to provide details for the + applicant. +notes: >- + This example shows GOV.UK Frontend used alongside our 'legacy' frontend + frameworks. The full name field, and links within the header and footer have + known accessibility issues. +--- + {% extends "govuk_template_jinja/views/layouts/govuk_template.html" %} {% from "back-link/macro.njk" import govukBackLink %} diff --git a/app/views/full-page-examples/check-your-answers/index.njk b/app/views/full-page-examples/check-your-answers/index.njk index 888a4e8fc9..09e50b3471 100644 --- a/app/views/full-page-examples/check-your-answers/index.njk +++ b/app/views/full-page-examples/check-your-answers/index.njk @@ -1,3 +1,16 @@ +--- +scenario: >- + As part of an online service, you are asked to check your answers before + you send your application. + + + Things to try: + + 1. You would like to change your answer for one of the questions. + +notes: The links to change your answers are not functional. +--- + {# This example is based of the "Check your answers before sending your application" example: https://design-system.service.gov.uk/patterns/check-answers/default/index.html #} {% extends "_generic.njk" %} @@ -196,7 +209,7 @@

- To find out more you can visit out website at: + To find out more you can visit out website at: https://reallylongurlformyeventthatneedsatemporaryeventsnotice.com

' diff --git a/app/views/full-page-examples/feedback/index.njk b/app/views/full-page-examples/feedback/index.njk index f1530d02dc..797882d9a8 100644 --- a/app/views/full-page-examples/feedback/index.njk +++ b/app/views/full-page-examples/feedback/index.njk @@ -1,4 +1,24 @@ -{# This example is based of the live "Send your feedback to GOV.UK Verify" start page: https://www.signin.service.gov.uk/feedback #} +--- +scenario: >- + You have used a service called GOV.UK Verify and wish to report an issue. + + + Things to try: + + 1. Intentionally put too much content in the feedback box. + + β€œWhat were you trying to do” question has a limit of 100 characters. + + β€œPlease provide details of your question, problem or feedback” has a limit + of 300 characters. + + 2. Say that you want a reply, but avoid filling in the details of how you + would like to be contacted. + + 3. Avoid answering the question β€œDo you want a reply?” + +notes: Based on https://www.signin.service.gov.uk/feedback +--- {% extends "_generic.njk" %} {% from "warning-text/macro.njk" import govukWarningText %} @@ -27,7 +47,7 @@ {% if errorSummary.length > 0 %} {{ govukErrorSummary({ titleText: "There is a problem", - errorList: errorSummary + errorList: errorSummary }) }} {% endif %} @@ -129,4 +149,4 @@ -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/views/full-page-examples/have-you-changed-your-name/index.njk b/app/views/full-page-examples/have-you-changed-your-name/index.njk index c71069f0c7..732aae1088 100644 --- a/app/views/full-page-examples/have-you-changed-your-name/index.njk +++ b/app/views/full-page-examples/have-you-changed-your-name/index.njk @@ -1,3 +1,15 @@ +--- +scenario: >- + + As part of an online service, you are asked if you have changed your name. + + + Things to try: + + 1. Intentionally avoid answering the question before continuing to the next + page. +--- + {# This example is based of the "Radios" example: https://design-system.service.gov.uk/components/radios #} {% extends "_generic.njk" %} diff --git a/app/views/full-page-examples/how-do-you-want-to-sign-in/index.njk b/app/views/full-page-examples/how-do-you-want-to-sign-in/index.njk index 2832547eca..3e47236429 100644 --- a/app/views/full-page-examples/how-do-you-want-to-sign-in/index.njk +++ b/app/views/full-page-examples/how-do-you-want-to-sign-in/index.njk @@ -1,5 +1,15 @@ -{# This example is based of the "How do you want to sign in? -" example: https://www.gov.uk/log-in-file-self-assessment-tax-return/sign-in/prove-identity #} +--- +scenario: >- + As part of an online service, you are asked to select how you want to sign in. + + + Things to try: + + 1. Intentionally avoid answering the question before continuing to the next page. + +notes: Based on https://www.gov.uk/log-in-file-self-assessment-tax-return/sign-in/prove-identity +--- + {% extends "_generic.njk" %} {% from "back-link/macro.njk" import govukBackLink %} diff --git a/app/views/full-page-examples/news-and-communications/index.njk b/app/views/full-page-examples/news-and-communications/index.njk index a3878395a7..a178f41a3c 100644 --- a/app/views/full-page-examples/news-and-communications/index.njk +++ b/app/views/full-page-examples/news-and-communications/index.njk @@ -1,3 +1,21 @@ +--- +scenario: >- + You would like to find relevant articles by sorting the results and filtering + by the organisation(s) that published the articles. + + + Things to try: + + 1. Sort the list of results so that the oldest results are first. + + 2. Filter the list of results to show only those published by the Ministry of + Defence. + +notes: >- + The filtering and sorting may not be accurate – this is just a demonstration + of the sort of interactions that you would find on a search page. +--- + {# This example is based of the live "News and communications" GOV.UK page: https://www.gov.uk/news-and-communications #} {% extends "_generic.njk" %} diff --git a/app/views/full-page-examples/passport-details/index.njk b/app/views/full-page-examples/passport-details/index.njk index 7e3ef433fd..e4b8a53c36 100644 --- a/app/views/full-page-examples/passport-details/index.njk +++ b/app/views/full-page-examples/passport-details/index.njk @@ -1,3 +1,15 @@ +--- +scenario: >- + As part of an online service, you are asked to provide your passport details. + + + Things to try: + + 1. Intentionally avoid answering the questions before continuing to the next page. + + 2. Intentionally only fill in the day (and not month or year) of the expiry date. +--- + {# This example is based of the "Passport details" pattern: https://design-system.service.gov.uk/patterns/question-pages/ #} {% extends "_generic.njk" %} diff --git a/app/views/full-page-examples/renew-driving-licence/index.njk b/app/views/full-page-examples/renew-driving-licence/index.njk index 922d16a0e9..54a16c0606 100644 --- a/app/views/full-page-examples/renew-driving-licence/index.njk +++ b/app/views/full-page-examples/renew-driving-licence/index.njk @@ -1,3 +1,11 @@ +--- +scenario: You want to renew your driving license. +notes: >- + The buttons and links on this page are not functional. This example shows + GOV.UK Frontend used alongside our 'legacy' frontend frameworks. + The links and buttons on this page have known accessibility issues. +--- + {# This example is based on the "Renew driving licence" example: https://www.gov.uk/renew-driving-licence #} {% extends "govuk_template_jinja/views/layouts/govuk_template.html" %} @@ -112,7 +120,7 @@ example: https://www.gov.uk/renew-driving-licence #}

You need to include these things with your completed forms:

    -
  • a recent passport type photo (do not sign the back of the photo)
    • +
  • a recent passport type photo (do not sign the back of the photo)
  • your current photocard licence, if you have it
  • a cheque or postal order for Β£17, payable to DVLA (no fee is needed if you have a medical short period licence or you’re aged 70 or over)
diff --git a/app/views/full-page-examples/service-manual-topic/index.njk b/app/views/full-page-examples/service-manual-topic/index.njk index 6ba9db3f94..fc9e541293 100644 --- a/app/views/full-page-examples/service-manual-topic/index.njk +++ b/app/views/full-page-examples/service-manual-topic/index.njk @@ -1,3 +1,12 @@ +--- +name: Topic page (Service Manual) +scenario: >- + You would like to access information on a given topic, perhaps by finding out + more about software development processes. + +notes: The links within each section are not functional. +--- + {# This example is based of the live "Service Manual - Technology" page: https://www.gov.uk/service-manual/technology #} {% extends "_generic.njk" %} diff --git a/app/views/full-page-examples/start-page/index.njk b/app/views/full-page-examples/start-page/index.njk index 46bd0cf56b..69d8587ebe 100644 --- a/app/views/full-page-examples/start-page/index.njk +++ b/app/views/full-page-examples/start-page/index.njk @@ -1,3 +1,15 @@ +--- +scenario: >- + You want to apply for a passport. + + + Things to try: + + 1. Find out other ways to apply + +notes: The buttons and links on this page are not functional. +--- + {# This example is based of the live "Apply online for a UK passport" start page: https://www.gov.uk/apply-renew-passport #} {% extends "_generic.njk" %} @@ -43,17 +55,17 @@ {% set moreInformationHTML %}

You’ll need a debit or credit card to use this service.

-

It’s Β£9.50 cheaper to apply for a passport online than by post.

+

It’s Β£9.50 cheaper to apply for a passport online than by post.

It should take around 6 weeks to get your first UK adult passport, but it can take longer.

All other application types (for example, renewing a passport or getting a child passport) should take 3 weeks. It can take longer if more information is needed or your application hasn’t been filled out correctly.

-

You should use a different service if you need your passport urgently.

+

You should use a different service if you need your passport urgently.

{% endset %} {% set otherWaysToApplyHTML %} -

You can pick up passport application forms from your local Post Office and apply by post, or use the Post Office Check and Send service.

+

You can pick up passport application forms from your local Post Office and apply by post, or use the Post Office Check and Send service.

{% endset %} {{ govukTabs({ @@ -107,4 +119,4 @@ -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/views/full-page-examples/update-your-account-details/index.njk b/app/views/full-page-examples/update-your-account-details/index.njk index 9d515e2ba3..2b50ee9554 100644 --- a/app/views/full-page-examples/update-your-account-details/index.njk +++ b/app/views/full-page-examples/update-your-account-details/index.njk @@ -1,3 +1,13 @@ +--- +scenario: >- + As part of an online service, you wish to update your account details. + + + Things to try: + + 1. Intentionally avoid answering the questions before continuing to the next page. +--- + {% extends "_generic.njk" %} {% from "back-link/macro.njk" import govukBackLink %} diff --git a/app/views/full-page-examples/upload-your-photo/index.njk b/app/views/full-page-examples/upload-your-photo/index.njk index 92bb4761b2..2a3af5eb58 100644 --- a/app/views/full-page-examples/upload-your-photo/index.njk +++ b/app/views/full-page-examples/upload-your-photo/index.njk @@ -1,3 +1,13 @@ +--- +scenario: >- + As part of an online service, you are asked to upload your photo. + + + Things to try: + + 1. Intentionally avoid uploading a file and accepting terms and conditions before continuing to the next page. +--- + {# This example is based of the live "Passport" service: https://www.passport.service.gov.uk/photo/upload #} {% extends "_generic.njk" %} @@ -52,7 +62,7 @@ {% if errorSummary.length > 0 %} {{ govukErrorSummary({ titleText: "There is a problem", - errorList: errorSummary + errorList: errorSummary }) }} {% endif %} @@ -98,4 +108,4 @@ -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/views/full-page-examples/what-is-your-address/index.njk b/app/views/full-page-examples/what-is-your-address/index.njk index 6795a9c1c4..0d611e305d 100644 --- a/app/views/full-page-examples/what-is-your-address/index.njk +++ b/app/views/full-page-examples/what-is-your-address/index.njk @@ -1,3 +1,14 @@ +--- +scenario: >- + As part of an online service, you are asked to provide your address. + + + Things to try: + + 1. Intentionally avoid answering the questions before continuing to the next + page. +--- + {# This example is based of the "What is your home address?" example: https://design-system.service.gov.uk/patterns/addresses/multiple/index.html #} {% extends "_generic.njk" %} diff --git a/app/views/full-page-examples/what-is-your-nationality/index.njk b/app/views/full-page-examples/what-is-your-nationality/index.njk index e20a2a5a2c..233a8fd65e 100644 --- a/app/views/full-page-examples/what-is-your-nationality/index.njk +++ b/app/views/full-page-examples/what-is-your-nationality/index.njk @@ -1,3 +1,23 @@ +--- +scenario: >- + As part of an online service, you are asked to provide your nationality. + + + Things to try: + + 1. Select 'British' or 'Irish' + + 2. Select 'Citizen of a different country' and provide a country name + + 3. Select 'Citizen of a different country' and submit the form without + providing a country name + + 4. Do not select any of the options, and use β€˜Help with nationality’ to + provide a reason why you cannot provide your nationality. + + 5. Intentionally submit the form without selecting any of the options +--- + {# This example is based of the "What is your nationality?" example: https://www.registertovote.service.gov.uk/register-to-vote/nationality #} {% extends "_generic.njk" %} diff --git a/app/views/full-page-examples/what-is-your-postcode/index.njk b/app/views/full-page-examples/what-is-your-postcode/index.njk index b44e92de0f..b57f6f668d 100644 --- a/app/views/full-page-examples/what-is-your-postcode/index.njk +++ b/app/views/full-page-examples/what-is-your-postcode/index.njk @@ -1,3 +1,13 @@ +--- +scenario: >- + As part of an online service, you are asked to provide your postcode. + + + Prompts: + + 1. Do not answer the question +--- + {# This example is based of the "What is your home postcode?" example: https://design-system.service.gov.uk/patterns/question-pages/postcode/index.html #} {% extends "_generic.njk" %} diff --git a/app/views/full-page-examples/what-was-the-last-country-you-visited/index.njk b/app/views/full-page-examples/what-was-the-last-country-you-visited/index.njk index 0630709b8d..2f51d12841 100644 --- a/app/views/full-page-examples/what-was-the-last-country-you-visited/index.njk +++ b/app/views/full-page-examples/what-was-the-last-country-you-visited/index.njk @@ -1,3 +1,13 @@ +--- +scenario: >- + As part of an online service, you are asked to provide the last country you visited. + + + Things to try: + + 1. Intentionally avoid answering the question before continuing to the next page. +--- + {# This example is based of the "What is your home postcode?" example: https://design-system.service.gov.uk/patterns/question-pages/postcode/index.html #} {% extends "_generic.njk" %} From 9cb997497b173ef16f383702bc39b110940adbce Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 14:22:24 +0100 Subject: [PATCH 064/186] Use case insensitive sort --- lib/file-helper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/file-helper.js b/lib/file-helper.js index 2cb48471f9..18ba8aef79 100644 --- a/lib/file-helper.js +++ b/lib/file-helper.js @@ -43,5 +43,5 @@ exports.fullPageExamples = () => { path: folderName, ...fm(readFileContents(path.join(configPaths.fullPageExamples, folderName, 'index.njk'))).attributes })) - .sort((a, b) => (a.name > b.name) ? 1 : -1) + .sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1) } From a1c8b40bbc8a64383834dba3b3715c9c5792ef4a Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 May 2019 14:29:05 +0100 Subject: [PATCH 065/186] Add missing govuk-link class --- app/views/layouts/index.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/index.njk b/app/views/layouts/index.njk index 318d1273c7..45ed249a14 100644 --- a/app/views/layouts/index.njk +++ b/app/views/layouts/index.njk @@ -29,7 +29,7 @@
-

Full page examples

+

Full page examples

    {% for example in fullPageExamples %} From c8793635dada06ac1fe60a64316c4757010224e3 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Fri, 3 May 2019 11:32:55 +0100 Subject: [PATCH 066/186] Add new focus style to buttons --- src/components/button/_button.scss | 46 ++++++++++++++++++------------ 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 03eafee1dc..ed0f2224c6 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -27,7 +27,6 @@ .govuk-button { @include govuk-font($size: 19, $line-height: 19px); - @include govuk-focusable; box-sizing: border-box; display: inline-block; @@ -63,37 +62,48 @@ text-decoration: none; } - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors so - // so that unvisited links styled as buttons do not end up with dark blue - // text when focussed. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-button-text-colour; - } - } - // Fix unwanted button padding in Firefox &::-moz-focus-inner { padding: 0; border: 0; } - &:hover, - &:focus { + &:hover { background-color: $govuk-button-hover-colour; } &:active { + // Bump the button down so it looks like its being pressed in top: $button-shadow-size; - box-shadow: none; @include govuk-if-ie8 { border-bottom-width: 0; } } + &:focus { + border-color: $govuk-focus-colour; + // When colours are overridden, for example when users have a dark mode, + // backgrounds and box-shadows disappear, so we need to ensure there's a + // transparent outline which will be set to a visible colour. + @include govuk-not-ie8 { + outline: $govuk-focus-width solid transparent; + outline-offset: 0; + } + @include govuk-if-ie8 { + color: $govuk-text-colour; + background-color: $govuk-focus-colour; + } + box-shadow: inset 0 0 0 1px $govuk-focus-colour; + } + + &:focus:not(:active):not(:hover) { + border-color: $govuk-focus-colour; + color: $govuk-text-colour; + background-color: $govuk-focus-colour; + box-shadow: 0 2px 0 $govuk-focus-text-colour; + } + // The following adjustments do not work for as // non-container elements cannot include pseudo elements (i.e. ::before). @@ -174,8 +184,7 @@ } } - &:hover, - &:focus { + &:hover { background-color: $govuk-secondary-button-hover-colour; &[disabled] { @@ -207,8 +216,7 @@ } } - &:hover, - &:focus { + &:hover { background-color: $govuk-warning-button-hover-colour; &[disabled] { From c4dd498d2da082a47c3491ea5b3a2fa428e734ee Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 14:34:38 +0100 Subject: [PATCH 067/186] Allow build process to use :not(:hover) --- tasks/gulp/compile-assets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js index a2000e1c2f..80118e6453 100644 --- a/tasks/gulp/compile-assets.js +++ b/tasks/gulp/compile-assets.js @@ -19,7 +19,7 @@ const cssnano = require('cssnano') const postcsspseudoclasses = require('postcss-pseudo-classes')({ // Work around a bug in pseudo classes plugin that badly transforms // :not(:whatever) pseudo selectors - blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)'] + blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)', ':hover)'] }) // Compile CSS and JS task -------------- From a169bc2f835ecc702e1048d54df531222efcaec6 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Mon, 13 May 2019 15:20:38 +0100 Subject: [PATCH 068/186] adds CHANGELOG entry --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 165b39eb17..5475de78c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,6 +35,12 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1309](https://github.com/alphagov/govuk-frontend/pull/1309)) +- Update buttons to use new focus style + + To migrate: [TODO add migration instructions before we ship v3.0.0] + + ([PR #1315](https://github.com/alphagov/govuk-frontend/pull/1315)) + - Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow` To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`. From 7d51124ad9c33ade653233de7a3f6799e9f9cc48 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 15:38:09 +0100 Subject: [PATCH 069/186] Improve comments explaining IE8 logic --- src/components/button/_button.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index ed0f2224c6..76bf91f3b3 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -86,10 +86,12 @@ // When colours are overridden, for example when users have a dark mode, // backgrounds and box-shadows disappear, so we need to ensure there's a // transparent outline which will be set to a visible colour. + // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines @include govuk-not-ie8 { outline: $govuk-focus-width solid transparent; outline-offset: 0; } + // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines. @include govuk-if-ie8 { color: $govuk-text-colour; background-color: $govuk-focus-colour; From 8ce2bb7c199ee66497a6d8ab9602653d3dc0bed8 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Mon, 13 May 2019 15:33:47 +0100 Subject: [PATCH 070/186] Fix Element div not allowed as child of element h2 in this context. It's currently not possible to exactly replicate the current GOV.UK panel. We should review this. --- app/views/full-page-examples/bank-holidays/index.njk | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/views/full-page-examples/bank-holidays/index.njk b/app/views/full-page-examples/bank-holidays/index.njk index e5809b707e..f0271d52b1 100644 --- a/app/views/full-page-examples/bank-holidays/index.njk +++ b/app/views/full-page-examples/bank-holidays/index.njk @@ -50,9 +50,9 @@ notes: >- {% set englandAndWalesHTML %} {% set englandAndWalesPanelTitleHtml %} -
    + The next bank holiday in England and Wales is -
    + 19 April {% endset %} @@ -1005,9 +1005,9 @@ notes: >- {% set scotlandHTML %} {% set scotlandPanelTitleHtml %} -
    + The next bank holiday in Scotland is -
    + 19 April {% endset %} @@ -2144,9 +2144,9 @@ notes: >- {% set irelandHTML %} {% set irelandPanelTitleHtml %} -
    + The next bank holiday in Northern Ireland is -
    + 19 April {% endset %} From d5b47a8982e3a6caaf1627e43672bd8067cf19e5 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Mon, 13 May 2019 15:37:17 +0100 Subject: [PATCH 071/186] Fix document must not include more than one visible main element. --- .../confirm-delete/index.njk | 56 +++++++++---------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/app/views/full-page-examples/confirm-delete/index.njk b/app/views/full-page-examples/confirm-delete/index.njk index 5880622676..44ff497a73 100644 --- a/app/views/full-page-examples/confirm-delete/index.njk +++ b/app/views/full-page-examples/confirm-delete/index.njk @@ -9,40 +9,38 @@ {% set mainClasses = "govuk-main-wrapper--l" %} {% block content %} -
    -
    -
    - -

    - {{ pageTitle }} -

    - -

    Josh Lyman last logged in 3 days ago.

    - -

    By deleting their administrator account they will no longer have access to this system. All cases that Josh Lyman is assigned to will remain open but their name will be removed from the case history.

    - - {{ govukWarningText({ - text: "This action is final and cannot be undone.", - iconFallbackText: "Warning", - classes: "govuk-!-margin-bottom-8" - }) }} +
    +
    + +

    + {{ pageTitle }} +

    + +

    Josh Lyman last logged in 3 days ago.

    + +

    By deleting their administrator account they will no longer have access to this system. All cases that Josh Lyman is assigned to will remain open but their name will be removed from the case history.

    -
    + {{ govukWarningText({ + text: "This action is final and cannot be undone.", + iconFallbackText: "Warning", + classes: "govuk-!-margin-bottom-8" + }) }} - {{ govukButton({ - text: "Delete account", - classes: "govuk-button--warning govuk-!-margin-right-3" - }) }} + - {{ govukButton({ - text: "Cancel", - classes: "govuk-button--secondary" - }) }} + {{ govukButton({ + text: "Delete account", + classes: "govuk-button--warning govuk-!-margin-right-3" + }) }} + + {{ govukButton({ + text: "Cancel", + classes: "govuk-button--secondary" + }) }} -
    + -
    -
    +
{% endblock %} From f24aab1cd2510576af550e83727707c557088586 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 14 May 2019 08:52:49 +0100 Subject: [PATCH 072/186] removes deprecated govuk-grid-row mixin https://github.com/alphagov/govuk-frontend/pull/1090 copied govuk-grid-row mixin to create a new concrete `.govuk-grid-row` class and marked the mixin as deprecated. ACTION TO BE TAKEN: Remove any references to `govuk-grid-row` mixin and use `.govuk-grid-row` class. closes: https://github.com/alphagov/govuk-frontend/issues/1092 --- src/helpers/_grid.scss | 23 ------------------- src/helpers/grid.test.js | 48 ---------------------------------------- 2 files changed, 71 deletions(-) diff --git a/src/helpers/_grid.scss b/src/helpers/_grid.scss index 605c0e3e1a..207b71d6f7 100644 --- a/src/helpers/_grid.scss +++ b/src/helpers/_grid.scss @@ -25,29 +25,6 @@ @return govuk-grid-width($key); } -/// Generate grid row styles -/// -/// Creates a grid row class with a standardised margin. -/// -/// @param {String} $class [govuk-grid-row] CSS class name -/// -/// @example scss - Default -/// @include govuk-grid-row; -/// -/// @example scss - Customising the class name -/// @include govuk-grid-row("app-grid"); -/// -/// @access public -/// @deprecated To be removed in v3.0, replaced by the govuk-grid-row class - -@mixin govuk-grid-row($class: "govuk-grid-row") { - .#{$class} { - @include govuk-clearfix; - margin-right: - ($govuk-gutter-half); - margin-left: - ($govuk-gutter-half); - } -} - /// Generate grid column styles /// /// Creates a grid column with standard gutter between the columns. diff --git a/src/helpers/grid.test.js b/src/helpers/grid.test.js index 115f051bb1..fcc786bee9 100644 --- a/src/helpers/grid.test.js +++ b/src/helpers/grid.test.js @@ -53,54 +53,6 @@ describe('grid system', () => { }) }) - describe('@govuk-grid-row mixin', () => { - it('outputs default defined styles for .govuk-grid-row class', async () => { - const sass = ` - ${sassImports} - @import "helpers/clearfix"; - - @include govuk-grid-row(); - ` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css - .toString() - .trim()) - .toBe(outdent` - .govuk-grid-row { - margin-right: -15px; - margin-left: -15px; } - .govuk-grid-row:after { - content: \"\"; - display: block; - clear: both; }`) - }) - it('outputs styles for the specified class', async () => { - const sass = ` - ${sassImports} - @import "helpers/clearfix"; - - @include govuk-grid-row('app-grid-row'); - ` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css - .toString() - .trim()) - .toBe(outdent` - .app-grid-row { - margin-right: -15px; - margin-left: -15px; } - .app-grid-row:after { - content: \"\"; - display: block; - clear: both; } - `) - }) - }) - describe('@govuk-grid-column mixin', () => { it('outputs the CSS required for a column in the grid', async () => { const sass = ` From 90cde6403703c752e6bc9e86e1c8b2b491096a15 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 14 May 2019 09:08:14 +0100 Subject: [PATCH 073/186] adds CHANGELOG entry --- CHANGELOG.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5475de78c3..ea5e644b53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -127,6 +127,15 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1330](https://github.com/alphagov/govuk-frontend/pull/1330)) +- Removes `govuk-grid-row` mixin + + https://github.com/alphagov/govuk-frontend/pull/1090 copied govuk-grid-row + mixin to create a new concrete `.govuk-grid-row` class and marked the mixin as deprecated. + + To migrate you'll need to remove any references to `govuk-grid-row` mixin and use `.govuk-grid-row` class instead. + + ([PR #1343](https://github.com/alphagov/govuk-frontend/pull/1343)) + πŸ†• New features: - Checkboxes and radios use a new focus state with a thicker border. The From ce56005f8760d48ff56d038677783bd728a959ac Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 14 May 2019 08:32:49 +0100 Subject: [PATCH 074/186] removes deprecated grid-width mixin https://github.com/alphagov/govuk-frontend/pull/1090 deprecated this mixin and left it in as an alias to govuk-grid-width. ACTION: Replace all instances of grid-width with govuk-grid-width --- src/helpers/_grid.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/helpers/_grid.scss b/src/helpers/_grid.scss index 207b71d6f7..e7c888024d 100644 --- a/src/helpers/_grid.scss +++ b/src/helpers/_grid.scss @@ -17,14 +17,6 @@ @error "Unknown grid width `#{$key}`"; } -/// Grid width percentage (alias) -/// -/// @alias govuk-grid-width -/// @deprecated To be removed in v3.0, replaced by govuk-grid-width -@function grid-width($key) { - @return govuk-grid-width($key); -} - /// Generate grid column styles /// /// Creates a grid column with standard gutter between the columns. From 4d02d99fac9f2654a533e6d17b67f1cc844f11b7 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 14 May 2019 08:42:21 +0100 Subject: [PATCH 075/186] adds CHANGELOG entry --- CHANGELOG.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea5e644b53..09cb0b8c81 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -136,6 +136,15 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1343](https://github.com/alphagov/govuk-frontend/pull/1343)) +- Remove grid-width mixin + + https://github.com/alphagov/govuk-frontend/pull/1090 deprecated this mixin + and left it in as an alias to govuk-grid-width. + + To migrate you'll need to replace any reference to the `grid-width` mixin with `govuk-grid-width` + + ([PR #1342](https://github.com/alphagov/govuk-frontend/pull/1342)) + πŸ†• New features: - Checkboxes and radios use a new focus state with a thicker border. The From ce036603de5dfb7b150985d5fbc9e837e374c043 Mon Sep 17 00:00:00 2001 From: Steven Proctor Date: Fri, 16 Nov 2018 07:34:47 +0000 Subject: [PATCH 076/186] Updated table scss --- src/components/table/_table.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 76ef87739d..583587cfd3 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -22,6 +22,7 @@ padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; border-bottom: 1px solid $govuk-border-colour; text-align: left; + vertical-align: top; // GOV.UK Elements sets the font-size and line-height for all headers and cells // in tables. @include govuk-compatibility(govuk_elements) { From b0f52a0aa3cb63cd413258398accc4e415aa3f2c Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 14 May 2019 16:00:54 +0100 Subject: [PATCH 077/186] Add CHANGELOG entry --- CHANGELOG.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 09cb0b8c81..08d12f3f69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,20 @@ See the [versioning documentation for how to update this changelog](./docs/contributing/versioning.md#updating-changelog). +- Update positioning on table headers and cells to help improve readability + + To migrate: If you rely on a centered certain vertical alignment, you could add + a custom class to your application. + + ```css + .app-table--vertical-align-middle .govuk-table__header, + .app-table--vertical-align-middle .govuk-table__cell { + vertical-align: middle; + } + ``` + + ([PR #1345](https://github.com/alphagov/govuk-frontend/pull/1345)) + - Update tabs to use new WCAG 2.1 compliant focus style To migrate: [TODO add migration instructions before we ship v3.0.0] From c179b0b60d0846d938b7c38b3a5abe680f2ef486 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 14 May 2019 17:07:20 +0100 Subject: [PATCH 078/186] Update header focus styles so the menu button is consistent --- src/components/header/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 501a9f929c..ce5cf24e32 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -176,7 +176,7 @@ margin-left: govuk-spacing(1); } - @include govuk-focusable; + @include govuk-focusable-text-link; @include mq ($from: tablet) { top: govuk-spacing(3); From a63da7acd870ee97feb0254626fd95d9a03c839c Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 16 May 2019 14:53:24 +0100 Subject: [PATCH 079/186] Replace govuk-text-colour variable with govuk-focus-text-colour This is a more appropriate variable to use for focus styles --- app/assets/scss/partials/_banner.scss | 2 +- src/components/button/_button.scss | 4 ++-- src/components/tabs/_tabs.scss | 4 ++-- src/helpers/_focusable.scss | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/scss/partials/_banner.scss b/app/assets/scss/partials/_banner.scss index 23ac177b89..e52fd92ac4 100644 --- a/app/assets/scss/partials/_banner.scss +++ b/app/assets/scss/partials/_banner.scss @@ -14,7 +14,7 @@ } .govuk-link:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } } diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 76bf91f3b3..c23f23e6f0 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -93,7 +93,7 @@ } // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines. @include govuk-if-ie8 { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; background-color: $govuk-focus-colour; } box-shadow: inset 0 0 0 1px $govuk-focus-colour; @@ -101,7 +101,7 @@ &:focus:not(:active):not(:hover) { border-color: $govuk-focus-colour; - color: $govuk-text-colour; + color: $govuk-focus-text-colour; background-color: $govuk-focus-colour; box-shadow: 0 2px 0 $govuk-focus-text-colour; } diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 73f432d6e0..fdb84e9e34 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -137,10 +137,10 @@ } &:focus { - box-shadow: inset 0 4px 0 0 $govuk-focus-colour, inset 0 8px 0 0 govuk-colour("black"); + box-shadow: inset 0 4px 0 0 $govuk-focus-colour, inset 0 8px 0 0 $govuk-focus-text-colour; @include govuk-if-ie8 { - border-top-color: govuk-colour("black"); + border-top-color: $govuk-focus-text-colour; } } } diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss index 68738f99cb..16f3b9345c 100644 --- a/src/helpers/_focusable.scss +++ b/src/helpers/_focusable.scss @@ -43,13 +43,13 @@ outline: $govuk-focus-width solid transparent; outline-offset: 0; } - color: $govuk-text-colour; + color: $govuk-focus-text-colour; background-color: $govuk-focus-colour; // sass-lint:disable indentation box-shadow: -5px -1px 0 1px $govuk-focus-colour, 5px -1px 0 1px $govuk-focus-colour, - -3px 1px 0 3px $govuk-text-colour, - 3px 1px 0 3px $govuk-text-colour; + -3px 1px 0 3px $govuk-focus-text-colour, + 3px 1px 0 3px $govuk-focus-text-colour; // sass-lint:enable indentation // When link is focussed, hide the default underline since the // box shadow adds the "underline" From 171b0a494c0070387877a4c8be61eb88d8b6ebe9 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Fri, 17 May 2019 11:21:23 +0100 Subject: [PATCH 080/186] fixes tabs keyboard navigation bug in IE8 In IE8, the browser could not find the next/previous tab because it does not support `nextElementSibling` and `previousElementSibling` DOM traversal methods. To fix it I applied a polyfill for it. Once the browser could find the tab we then had to find the `firstChildElement` (i.e the anchor element) to add/edit the various data attributes to show/hide the tab panel. Again IE8 doesn't support it and instead of introducing another polyfill I used `querySelector instead to look up the "a". I assumed the first element would always be anchor for navigation purposes and also the nunjucks template uses an anchor with the class name that I'm looking up. --- src/components/tabs/tabs.js | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index e3bb561f2f..3ef5ab2c55 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -204,10 +204,25 @@ Tabs.prototype.onTabKeydown = function (e) { } Tabs.prototype.activateNextTab = function () { + // IE doesn't support 'nextElementSibling' this code polyfills IE8 + // https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling#Polyfill_for_Internet_Explorer_8 + // Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js + if (!('nextElementSibling' in document.documentElement)) { + Object.defineProperty(Element.prototype, 'nextElementSibling', { // eslint-disable-line no-undef + get: function () { + var e = this.nextSibling + while (e && e.nodeType !== 1) { + e = e.nextSibling + } + return e + } + }) + } + var currentTab = this.getCurrentTab() var nextTabListItem = currentTab.parentNode.nextElementSibling if (nextTabListItem) { - var nextTab = nextTabListItem.firstElementChild + var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab') } if (nextTab) { this.hideTab(currentTab) @@ -218,10 +233,25 @@ Tabs.prototype.activateNextTab = function () { } Tabs.prototype.activatePreviousTab = function () { + // IE doesn't support 'previousElementSibling' this code polyfills IE8 + // https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling#Polyfill_for_Internet_Explorer_8 + // Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js + if (!('previousElementSibling' in document.documentElement)) { + Object.defineProperty(Element.prototype, 'previousElementSibling', { // eslint-disable-line no-undef + get: function () { + var e = this.previousSibling + while (e && e.nodeType !== 1) { + e = e.previousSibling + } + return e + } + }) + } + var currentTab = this.getCurrentTab() var previousTabListItem = currentTab.parentNode.previousElementSibling if (previousTabListItem) { - var previousTab = previousTabListItem.firstElementChild + var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab') } if (previousTab) { this.hideTab(currentTab) From 1a40fb767893b338a244a69c825d5b528a75299d Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Fri, 17 May 2019 12:05:51 +0100 Subject: [PATCH 081/186] Add two polyfills for nextElementSibling and previousElementSibling I've added two new files polyfill files although they didn't come directly from polyfill.io they were based off a PR that was merged in the library but not included in the new polyfill-library repo. I've added comments pointing to the original pull request for the detection and for the polyfill. --- src/components/tabs/tabs.js | 32 ++----------------- .../Element/prototype/nextElementSibling.js | 27 ++++++++++++++++ .../prototype/previousElementSibling.js | 25 +++++++++++++++ 3 files changed, 54 insertions(+), 30 deletions(-) create mode 100644 src/vendor/polyfills/Element/prototype/nextElementSibling.js create mode 100644 src/vendor/polyfills/Element/prototype/previousElementSibling.js diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 3ef5ab2c55..4ea8801b74 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -1,5 +1,7 @@ import '../../vendor/polyfills/Function/prototype/bind' import '../../vendor/polyfills/Element/prototype/classList' +import '../../vendor/polyfills/Element/prototype/nextElementSibling' +import '../../vendor/polyfills/Element/prototype/previousElementSibling' import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation import { nodeListForEach } from '../../common' @@ -204,21 +206,6 @@ Tabs.prototype.onTabKeydown = function (e) { } Tabs.prototype.activateNextTab = function () { - // IE doesn't support 'nextElementSibling' this code polyfills IE8 - // https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling#Polyfill_for_Internet_Explorer_8 - // Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js - if (!('nextElementSibling' in document.documentElement)) { - Object.defineProperty(Element.prototype, 'nextElementSibling', { // eslint-disable-line no-undef - get: function () { - var e = this.nextSibling - while (e && e.nodeType !== 1) { - e = e.nextSibling - } - return e - } - }) - } - var currentTab = this.getCurrentTab() var nextTabListItem = currentTab.parentNode.nextElementSibling if (nextTabListItem) { @@ -233,21 +220,6 @@ Tabs.prototype.activateNextTab = function () { } Tabs.prototype.activatePreviousTab = function () { - // IE doesn't support 'previousElementSibling' this code polyfills IE8 - // https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling#Polyfill_for_Internet_Explorer_8 - // Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js - if (!('previousElementSibling' in document.documentElement)) { - Object.defineProperty(Element.prototype, 'previousElementSibling', { // eslint-disable-line no-undef - get: function () { - var e = this.previousSibling - while (e && e.nodeType !== 1) { - e = e.previousSibling - } - return e - } - }) - } - var currentTab = this.getCurrentTab() var previousTabListItem = currentTab.parentNode.previousElementSibling if (previousTabListItem) { diff --git a/src/vendor/polyfills/Element/prototype/nextElementSibling.js b/src/vendor/polyfills/Element/prototype/nextElementSibling.js new file mode 100644 index 0000000000..ec3c615496 --- /dev/null +++ b/src/vendor/polyfills/Element/prototype/nextElementSibling.js @@ -0,0 +1,27 @@ +import '../../Object/defineProperty' +import '../../Element' + +(function(undefined) { + + // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c + var detect = ( + 'Element' in this && "nextElementSibling" in document.documentElement + ) + + if (detect) return + + + (function (global) { + + // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd + Object.defineProperty(Element.prototype, "nextElementSibling", { + get: function(){ + var el = this.nextSibling; + while (el && el.nodeType !== 1) { el = el.nextSibling; } + return (el.nodeType === 1) ? el : null; + } + }); + + }(this)); + +}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {}); diff --git a/src/vendor/polyfills/Element/prototype/previousElementSibling.js b/src/vendor/polyfills/Element/prototype/previousElementSibling.js new file mode 100644 index 0000000000..1184a0a3e3 --- /dev/null +++ b/src/vendor/polyfills/Element/prototype/previousElementSibling.js @@ -0,0 +1,25 @@ +import '../../Object/defineProperty' +import '../../Element' + +(function(undefined) { + + // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e + var detect = ( + 'Element' in this && 'previousElementSibling' in document.documentElement + ) + + if (detect) return + + (function (global) { + // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739 + Object.defineProperty(Element.prototype, 'previousElementSibling', { + get: function(){ + var el = this.previousSibling; + while (el && el.nodeType !== 1) { el = el.previousSibling; } + return (el.nodeType === 1) ? el : null; + } + }); + + }(this)); + +}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {}); From f297d090a4d9f03dfb1490b8a2114b25b07b9464 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Fri, 17 May 2019 11:46:04 +0100 Subject: [PATCH 082/186] adds CHANGELOG entry --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08d12f3f69..81be0dd510 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -185,6 +185,13 @@ changelog](./docs/contributing/versioning.md#updating-changelog). πŸ”§ Fixes: +- fixes tabs keyboard navigation bug in IE8 + + Users were unable to tab between tab panels using the keyboard and had to + use their mouse to toggle between panels. + + ([PR #1359](https://github.com/alphagov/govuk-frontend/pull/1359)) + - Update accordion focus styles to remove firefox outlines ([PR #1324](https://github.com/alphagov/govuk-frontend/pull/1324)) From d8fcb683b327bcd6387f5344994cb9fcbbd8349c Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 18:34:35 +0100 Subject: [PATCH 083/186] Update start button to use inline SVG This changes the icon to be a full opacity, which is consistent with all other icons. This design was originally proposed by Mia Allers. --- src/components/button/_button.scss | 21 ++++++++++++------- src/components/button/button.yaml | 2 +- src/components/button/template.njk | 28 +++++++++++++++++++++++--- src/components/button/template.test.js | 12 +++++++++++ 4 files changed, 52 insertions(+), 11 deletions(-) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index c23f23e6f0..61e2c5c884 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -231,20 +231,27 @@ @include govuk-typography-weight-bold; @include govuk-typography-responsive($size: 24, $override-line-height: 1); + display: inline-flex; min-height: auto; + padding-top: govuk-spacing(2) - $govuk-border-width-form-element; - padding-right: govuk-spacing(7); + padding-right: govuk-spacing(3); padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element; padding-left: govuk-spacing(3); - background-image: govuk-image-url("icon-pointer.png"); - background-repeat: no-repeat; - background-position: 100% 50%; + justify-content: center; + } + + .govuk-button__start-icon { + margin-top: -3px; + margin-left: govuk-spacing(1); - @include govuk-device-pixel-ratio { - background-image: govuk-image-url("icon-pointer-2x.png"); - background-size: 30px 19px; + @include govuk-media-query($from: desktop) { + margin-left: govuk-spacing(2); } + vertical-align: middle; + flex-shrink: 0; + align-self: center; } // Begin adjustments for font baseline offset diff --git a/src/components/button/button.yaml b/src/components/button/button.yaml index 0ee350502f..5e21da2582 100644 --- a/src/components/button/button.yaml +++ b/src/components/button/button.yaml @@ -65,7 +65,7 @@ examples: data: text: Start now link button href: '/' - classes: 'govuk-button--start' + isStartButton: true - name: input data: element: input diff --git a/src/components/button/template.njk b/src/components/button/template.njk index 3931126759..e29e7b1b83 100644 --- a/src/components/button/template.njk +++ b/src/components/button/template.njk @@ -1,6 +1,15 @@ -{# Determine type of element to use, if not explicitly set -#} +{# Set classes for this component #} +{%- set classNames = "govuk-button" -%} -{% if params.element %} +{%- if params.classes %} + {% set classNames = classNames + " " + params.classes %} +{% endif %} +{% if params.disabled %} + {% set classNames = classNames + " govuk-button--disabled" %} +{% endif -%} + +{# Determine type of element to use, if not explicitly set #} +{%- if params.element %} {% set element = params.element | lower %} {% else %} {% if params.href %} @@ -8,11 +17,20 @@ {% else %} {% set element = 'button' %} {% endif %} +{% endif -%} + +{% if params.isStartButton %} + {% set iconHtml %} + + + + {% endset %} + {% set classNames = classNames + " govuk-button--start" %} {% endif %} {#- Define common attributes that we can use across all element types #} -{%- set commonAttributes %} class="govuk-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %} +{%- set commonAttributes %} class="{{ classNames }}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %} {#- Define common attributes we can use for both button and input types #} @@ -23,11 +41,15 @@ {%- if element == 'a' %} {{ params.html | safe if params.html else params.text }} +{# Indentation is intentional to output HTML nicely #} +{{- iconHtml | safe | trim | indent(2, true) if iconHtml -}} {%- elseif element == 'button' %} {%- elseif element == 'input' %} diff --git a/src/components/button/template.test.js b/src/components/button/template.test.js index 72b51fda2d..f79c4d63ab 100644 --- a/src/components/button/template.test.js +++ b/src/components/button/template.test.js @@ -259,4 +259,16 @@ describe('Button', () => { expect($component.attr('type')).toEqual('submit') }) }) + + describe('Start button', () => { + it('renders a svg', () => { + const $ = render('button', { + href: '/', + isStartButton: true + }) + + const $component = $('.govuk-button .govuk-button__start-icon') + expect($component.get(0).tagName).toEqual('svg') + }) + }) }) From d2d18df1574efea132987a6627dbf2b04e23e376 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 18:34:47 +0100 Subject: [PATCH 084/186] Remove unused icon images --- src/assets/images/icon-pointer-2x.png | Bin 185 -> 0 bytes src/assets/images/icon-pointer.png | Bin 207 -> 0 bytes 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/assets/images/icon-pointer-2x.png delete mode 100644 src/assets/images/icon-pointer.png diff --git a/src/assets/images/icon-pointer-2x.png b/src/assets/images/icon-pointer-2x.png deleted file mode 100644 index 68b17184e05fdba23134095b10d5edad68591815..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 185 zcmeAS@N?(olHy`uVBq!ia0vp^HbAV#!3-qV=X2}@QYryHA+A9BKOwM%v-c%X9d}8P zUogYWg!z{5`we8(0v1PwJpu|_db&7)&})|<&=3YsS3j3^P6S-OzHR%=zWtAV9($<7PE|2?+S#kqrasGBZ+qd}9q!s< aYk3<6(cOvlUycHeX7F_Nb6Mw<&;$T_^2 From 89c8bc2cf18c6826cb0c011fda8d3f6dccf95f16 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 18:35:45 +0100 Subject: [PATCH 085/186] Add CHANGELOG entry --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 81be0dd510..1be6618b6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,22 @@ changelog](./docs/contributing/versioning.md#updating-changelog). ([PR #1345](https://github.com/alphagov/govuk-frontend/pull/1345)) +- Update start now button to have styled icon when focused + + Without migrating, start buttons will lose their icon, to migrate: + + **If you are using the button Nunjucks macro**, you should: + + - add macro option `isStartButton` and set it to `true` + - remove the class `.govuk-button--start`, as this is now automatically applied by the new option. + + For a full example see the [Nunjucks example on the Design System website](https://design-system.service.gov.uk/components/button/#start-buttons). + + **If you are using HTML**, you should update your HTML to include the new inline SVG, which can be found + in the [HTML example on the Design System website](https://design-system.service.gov.uk/components/button/#start-buttons). + + ([PR #1341](https://github.com/alphagov/govuk-frontend/pull/1341)) + - Update tabs to use new WCAG 2.1 compliant focus style To migrate: [TODO add migration instructions before we ship v3.0.0] From c38e14dc8cf08e50ef35606b7f35dd7c4639ba4b Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 15 May 2019 12:13:33 +0100 Subject: [PATCH 086/186] Update full page example to use new component flag --- app/views/full-page-examples/start-page/index.njk | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/views/full-page-examples/start-page/index.njk b/app/views/full-page-examples/start-page/index.njk index 69d8587ebe..a0cb3c1b88 100644 --- a/app/views/full-page-examples/start-page/index.njk +++ b/app/views/full-page-examples/start-page/index.njk @@ -49,7 +49,8 @@ notes: The buttons and links on this page are not functional. {{ govukButton({ text: "Start now", href: "#", - classes: "govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8" + classes: "govuk-!-margin-top-2 govuk-!-margin-bottom-8", + isStartButton: true }) }} {% set moreInformationHTML %} From 7510a7c72743959e700219e0f31a09f6022be6a1 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 15 May 2019 12:50:52 +0100 Subject: [PATCH 087/186] Ensure start button icon is not focusable in Internet Explorer --- src/components/button/template.njk | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/button/template.njk b/src/components/button/template.njk index e29e7b1b83..6ccb89782b 100644 --- a/src/components/button/template.njk +++ b/src/components/button/template.njk @@ -21,7 +21,10 @@ {% if params.isStartButton %} {% set iconHtml %} - +{#- The SVG needs `focusable="false"` so that Internet Explorer does not +treat it as an interactive element - without this it will be +'focusable' when using the keyboard to navigate. #} + {% endset %} From 552c8981d2c88b5c2d8c7c5ce727a63ab725ba9b Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 15 May 2019 10:38:56 +0100 Subject: [PATCH 088/186] Fix child elements in tab label breaking Fixes https://github.com/alphagov/govuk-frontend/issues/1252 --- src/components/tabs/tabs.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 4ea8801b74..4904b34d94 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -170,6 +170,10 @@ Tabs.prototype.unsetAttributes = function ($tab) { } Tabs.prototype.onTabClick = function (e) { + if (!e.target.classList.contains('govuk-tabs__tab')) { + // Allow events on child DOM elements to bubble up to tab parent + return false + } e.preventDefault() var $newTab = e.target var $currentTab = this.getCurrentTab() From 19a2ca51fd5c7d36497d01fe005073e64b51826c Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 15 May 2019 11:35:26 +0100 Subject: [PATCH 089/186] Update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1be6618b6d..cc052433b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -201,6 +201,10 @@ changelog](./docs/contributing/versioning.md#updating-changelog). πŸ”§ Fixes: +- Fix HTML elements in tabs label breaking + +([PR #1351](https://github.com/alphagov/govuk-frontend/pull/1351)) + - fixes tabs keyboard navigation bug in IE8 Users were unable to tab between tab panels using the keyboard and had to From e3588b0e41d4309a4aeb412af60ddf82e36f6743 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Fri, 17 May 2019 16:32:33 +0100 Subject: [PATCH 090/186] Add test to check tab label with DOM element renders --- src/components/tabs/tabs.test.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/tabs/tabs.test.js b/src/components/tabs/tabs.test.js index 9221010472..2e8cdb40f1 100644 --- a/src/components/tabs/tabs.test.js +++ b/src/components/tabs/tabs.test.js @@ -78,6 +78,27 @@ describe('/components/tabs', () => { }) expect(secondTabPanelIsHidden).toBeFalsy() }) + + describe('when the tab contains a DOM element', () => { + it('should display the tab panel associated with the selected tab', async () => { + await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' }) + + await page.evaluate(() => { + // Replace contents of second tab with a DOM element + const secondTab = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab') + secondTab.innerHTML = 'Tab 2' + }) + + // Click the DOM element inside the second tab + await page.click('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab span') + + const secondTabPanelIsHidden = await page.evaluate(() => { + const secondTabAriaControls = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-controls') + return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('govuk-tabs__panel--hidden') + }) + expect(secondTabPanelIsHidden).toBeFalsy() + }) + }) }) describe('when first tab is focused and the right arrow key is pressed', () => { From f0b764287d41862018d5a5fb2869429ec87d710d Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 15 May 2019 16:09:44 +0100 Subject: [PATCH 091/186] Remove unnecessary line-breaks in accordion template --- src/components/accordion/template.njk | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/accordion/template.njk b/src/components/accordion/template.njk index b01f8e28a2..89f3850d2d 100644 --- a/src/components/accordion/template.njk +++ b/src/components/accordion/template.njk @@ -3,7 +3,6 @@
- {% for item in params.items %}
@@ -23,5 +22,4 @@
{% endfor %} -
From 9b0adebdeab14f4308ceec73e6f5110ab32d59af Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 15 May 2019 16:11:38 +0100 Subject: [PATCH 092/186] Fix radios and checkbox hints from wrapping html output --- src/components/checkboxes/template.njk | 4 ++-- src/components/radios/template.njk | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/checkboxes/template.njk b/src/components/checkboxes/template.njk index 9a12be65cb..539e3bf270 100644 --- a/src/components/checkboxes/template.njk +++ b/src/components/checkboxes/template.njk @@ -74,7 +74,7 @@ attributes: item.label.attributes, for: id }) | indent(6) | trim }} - {%- if hasHint %} + {% if hasHint %} {{ govukHint({ id: itemHintId, classes: 'govuk-checkboxes__hint', @@ -82,7 +82,7 @@ html: item.hint.html, text: item.hint.text }) | indent(6) | trim }} - {%- endif %} + {% endif %} {% if item.conditional %}
diff --git a/src/components/radios/template.njk b/src/components/radios/template.njk index 5ef8b832c1..0fb25dd16f 100644 --- a/src/components/radios/template.njk +++ b/src/components/radios/template.njk @@ -68,7 +68,7 @@ attributes: item.label.attributes, for: id }) | indent(6) | trim }} - {%- if hasHint %} + {% if hasHint %} {{ govukHint({ id: itemHintId, classes: 'govuk-radios__hint', @@ -76,7 +76,7 @@ html: item.hint.html, text: item.hint.text }) | indent(6) | trim }} - {%- endif %} + {% endif %}
{% if item.conditional %}
From 612e97a6db4cf27b106c1b670d11fe7f4972e84f Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 15 May 2019 16:12:11 +0100 Subject: [PATCH 093/186] Remove unnecessary line breaks from header component --- src/components/header/template.njk | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/header/template.njk b/src/components/header/template.njk index b7f27efa74..d5b119a4bc 100644 --- a/src/components/header/template.njk +++ b/src/components/header/template.njk @@ -1,11 +1,10 @@