From 750d17808a19a8520ed39e6fe62e667c58f52b96 Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 23 Feb 2024 13:49:46 +0000 Subject: [PATCH] Place new organisation colours behind a feature flag --- .../src/govuk/helpers/_colour.scss | 8 +- .../src/govuk/helpers/colour.unit.test.js | 71 +++++++ .../settings/_colours-organisations.scss | 192 ++++++++++++++++-- .../src/govuk/settings/colours.unit.test.js | 29 +++ 4 files changed, 279 insertions(+), 21 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/helpers/_colour.scss b/packages/govuk-frontend/src/govuk/helpers/_colour.scss index fbedb811d9..ed6c578540 100644 --- a/packages/govuk-frontend/src/govuk/helpers/_colour.scss +++ b/packages/govuk-frontend/src/govuk/helpers/_colour.scss @@ -91,8 +91,12 @@ $contrast-safe: $websafe; } - @if $contrast-safe and map-has-key($org-colour, contrast-safe) { - @return map-get($org-colour, contrast-safe); + // Determine the contrast-safe key to use depending on whether it's the new + // palette or the legacy palette + $safe-key: if($govuk-new-organisation-colours, "contrast-safe", "colour-websafe"); + + @if $contrast-safe and map-has-key($org-colour, $safe-key) { + @return map-get($org-colour, $safe-key); } @else { @return map-get($org-colour, colour); } diff --git a/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js b/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js index e2b78431a7..58ce873091 100644 --- a/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js +++ b/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js @@ -103,6 +103,7 @@ describe('@function govuk-colour', () => { describe('@function govuk-organisation-colour', () => { const sassBootstrap = ` + $govuk-new-organisation-colours: true; $govuk-colours-organisations: ( 'floo-network-authority': ( colour: #EC22FF, @@ -249,4 +250,74 @@ describe('@function govuk-organisation-colour', () => { ` }) }) + + describe('legacy palette', () => { + const sassBootstrapLegacy = ` + $govuk-colours-organisations: ( + 'floo-network-authority': ( + colour: #EC22FF, + colour-websafe: #9A00A8 + ), + 'broom-regulatory-control': ( + colour: #A81223 + ) + ); + + @import "helpers/colour"; + ` + + it('returns the contrast-safe colour for a given organisation by default', async () => { + const sass = ` + ${sassBootstrapLegacy} + + .foo { + color: govuk-organisation-colour('floo-network-authority'); + } + ` + + await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({ + css: outdent` + .foo { + color: #9A00A8; + } + ` + }) + }) + + it('falls back to the default colour if a contrast-safe colour is not explicitly defined', async () => { + const sass = ` + ${sassBootstrapLegacy} + + .foo { + color: govuk-organisation-colour('broom-regulatory-control'); + } + ` + + await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({ + css: outdent` + .foo { + color: #A81223; + } + ` + }) + }) + + it('can be overridden to return the non-contrast-safe colour ($websafe parameter)', async () => { + const sass = ` + ${sassBootstrapLegacy} + + .foo { + border-color: govuk-organisation-colour('floo-network-authority', $websafe: false); + } + ` + + await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({ + css: outdent` + .foo { + border-color: #EC22FF; + } + ` + }) + }) + }) }) diff --git a/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss b/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss index bc4ea3e275..f8f57c5180 100644 --- a/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss +++ b/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss @@ -2,7 +2,19 @@ /// @group settings/colours //// -/// Organisation colours +/// Feature flag for updated organisation list and colours +/// +/// When set to true, $govuk-colours-organisations will use the new +/// organisation list and colour selection. +/// +/// Should be removed in 6.0. +/// +/// @type Boolean +/// @access public + +$govuk-new-organisation-colours: false !default; + +/// Current organisation colours /// /// @type Map /// @@ -11,16 +23,13 @@ /// `$organisation`. This colour has at least a 4.5:1 contrast against /// white, to be used for copy and meet the AAA (large text) and AA (smaller /// copy) WCAG guidelines. -/// @prop $organisation.colour-websafe - Deprecated. Use `contrast-safe` -/// instead. The values of both `colour-websafe` and `contrast-safe` should -/// be the same. /// @prop $organisation.deprecation-message - Marks this organisation as /// deprecated (usually because it has ceased to exist). Value is the /// deprecation message output to the terminal when compiling. /// -/// @access public +/// @access private -$govuk-colours-organisations: ( +$_govuk-organisation-colours: ( "attorney-generals-office": ( colour: #a91c8e ), @@ -32,7 +41,6 @@ $govuk-colours-organisations: ( ), "department-for-business-trade": ( colour: #e52d13, - colour-websafe: #e02c13, contrast-safe: #e02c13 ), "department-for-business-energy-industrial-strategy": ( @@ -47,10 +55,9 @@ $govuk-colours-organisations: ( ), "department-for-communities-local-government": ( colour: #009999, - colour-websafe: #008080, contrast-safe: #008080, deprecation-message: - "`department-for-communities-local-government` became `ministry-of-housing-communities-local-government` in 2018. As of 2023, it is equivalent to `department-for-levelling-up-housing-communities`." + "`department-for-communities-local-government` became `ministry-of-housing-communities-local-government` in 2018. As of 2021, it is equivalent to `department-for-levelling-up-housing-communities`." ), "department-for-culture-media-sport": ( colour: #d6006e @@ -65,12 +72,10 @@ $govuk-colours-organisations: ( ), "department-for-energy-security-net-zero": ( colour: #00a33b, - colour-websafe: #00852f, contrast-safe: #00852f ), "department-for-environment-food-rural-affairs": ( colour: #00af43, - colour-websafe: #008733, contrast-safe: #008733 ), "department-for-international-development": ( @@ -87,7 +92,6 @@ $govuk-colours-organisations: ( ), "department-for-science-innovation-technology": ( colour: #00f9f8, - colour-websafe: #008180, contrast-safe: #008180 ), "department-for-transport": ( @@ -95,25 +99,21 @@ $govuk-colours-organisations: ( ), "department-for-work-pensions": ( colour: #00bcb5, - colour-websafe: #00857e, contrast-safe: #00857e ), "department-of-energy-climate-change": ( colour: #009ddb, - colour-websafe: #007db3, contrast-safe: #007db3, deprecation-message: "`department-of-energy-climate-change` was merged into `department-for-business-energy-industrial-strategy` in 2016. As of 2023, it is equivalent to `department-for-energy-security-net-zero`." ), "department-of-health": ( colour: #00ad93, - colour-websafe: #008573, contrast-safe: #008573, deprecation-message: "`department-of-health` became `department-of-health-social-care` in 2018." ), "department-of-health-social-care": ( colour: #00a990, - colour-websafe: #008674, contrast-safe: #008674 ), "foreign-commonwealth-office": ( @@ -144,7 +144,6 @@ $govuk-colours-organisations: ( ), "ministry-of-housing-communities-local-government": ( colour: #009999, - colour-websafe: #008080, contrast-safe: #008080, deprecation-message: "`ministry-of-housing-communities-local-government` became `department-for-levelling-up-housing-communities` in 2021." @@ -189,6 +188,163 @@ $govuk-colours-organisations: ( colour: #a33038, deprecation-message: "`wales-office` became `office-of-the-secretary-of-state-for-wales` in 2018." ) +); + +/// Legacy organisation colours +/// +/// These are the colours included with Frontend prior to 5.3.0. They will be +/// removed in a future major version of Frontend. +/// +/// @type Map +/// +/// @prop $organisation.colour - Colour for the given `$organisation` +/// @prop $organisation.colour-websafe - Optional alternative shade of the +/// organisation colour. Despite the name, is not guaranteed to be websafe +/// nor provide better contrast than the base colour. +/// +/// @access private + +$_govuk-legacy-organisation-colours: ( + "attorney-generals-office": ( + colour: #9f1888, + colour-websafe: #a03a88 + ), + "cabinet-office": ( + colour: #005abb, + colour-websafe: #347da4 + ), + "civil-service": ( + colour: #af292e + ), + "department-for-business-innovation-skills": ( + colour: #003479, + colour-websafe: #347da4 + ), + "department-for-communities-local-government": ( + colour: #009999, + colour-websafe: #37836e + ), + "department-for-culture-media-sport": ( + colour: #d40072, + colour-websafe: #a03155 + ), + "department-for-education": ( + colour: #003a69, + colour-websafe: #347ca9 + ), + "department-for-environment-food-rural-affairs": ( + colour: #00a33b, + colour-websafe: #008938 + ), + "department-for-international-development": ( + colour: #002878, + colour-websafe: #405e9a + ), + "department-for-international-trade": ( + colour: #cf102d, + colour-websafe: #005ea5 + ), + "department-for-business-trade": ( + colour: #cf102d, + colour-websafe: #005ea5 + ), + "department-for-levelling-up-housing-communities": ( + colour: #012169 + ), + "department-for-transport": ( + colour: #006c56, + colour-websafe: #398373 + ), + "department-for-work-pensions": ( + colour: #00beb7, + colour-websafe: #37807b + ), + "department-of-energy-climate-change": ( + colour: #009ddb, + colour-websafe: #2b7cac + ), + "department-of-health": ( + colour: #00ad93, + colour-websafe: #39836e + ), + "foreign-commonwealth-development-office": ( + colour: #012169 + ), + "foreign-commonwealth-office": ( + colour: #003e74, + colour-websafe: #406e97 + ), + "government-equalities-office": ( + colour: #9325b2 + ), + "hm-government": ( + colour: #0076c0, + colour-websafe: #347da4 + ), + "hm-revenue-customs": ( + colour: #009390, + colour-websafe: #008670 + ), + "hm-treasury": ( + colour: #af292e, + colour-websafe: #832322 + ), + "home-office": ( + colour: #9325b2, + colour-websafe: #9440b2 + ), + "ministry-of-defence": ( + colour: #4d2942, + colour-websafe: #5a5c92 + ), + "ministry-of-justice": ( + colour: #231f20, + colour-websafe: #5a5c92 + ), + "northern-ireland-office": ( + colour: #002663, + colour-websafe: #3e598c + ), + "office-of-the-advocate-general-for-scotland": ( + colour: #002663, + colour-websafe: #005ea5 + ), + "office-of-the-leader-of-the-house-of-commons": ( + colour: #317023, + colour-websafe: #005f8f + ), + "office-of-the-leader-of-the-house-of-lords": ( + colour: #9c132e, + colour-websafe: #c2395d + ), + "scotland-office": ( + colour: #002663, + colour-websafe: #405c8a + ), + "uk-export-finance": ( + colour: #005747, + colour-websafe: #005ea5 + ), + "uk-trade-investment": ( + colour: #c80651, + colour-websafe: #005ea5 + ), + "wales-office": ( + colour: #a33038, + colour-websafe: #7a242a + ) +); + +/// Set public organisation colours variable to one of the two maps. +/// Users can also pass their own map to this to override it entirely. +/// +/// @type Map +/// @access public + +$govuk-colours-organisations: if( + $govuk-new-organisation-colours, + $_govuk-organisation-colours, + $_govuk-legacy-organisation-colours ) !default; /// Organisation colour aliases @@ -206,8 +362,6 @@ $govuk-colours-organisations: ( /// @access private $_govuk-colours-organisations-aliases: ( - // Various keys used to include the word 'and' when most others did not. - // We removed all the extra 'and's. "department-for-business-and-trade": "department-for-business-trade", "department-for-communities-and-local-government": "department-for-communities-local-government", "department-for-levelling-up-housing-and-communities": "department-for-levelling-up-housing-communities" diff --git a/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js b/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js index 561801b42d..2a4f818f22 100644 --- a/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js +++ b/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js @@ -2,6 +2,35 @@ const { compileSassString } = require('@govuk-frontend/helpers/tests') describe('Organisation colours', () => { it('should define websafe colours that meet contrast requirements', async () => { + const sass = ` + $govuk-new-organisation-colours: true; + + @import "settings/colours-palette"; + @import "settings/colours-organisations"; + @import "settings/colours-applied"; + @import "helpers/colour"; + + @import "sass-color-helpers/stylesheets/color-helpers"; + + $minimum-contrast: 4.5; + + @each $organisation in map-keys($govuk-colours-organisations) { + + $colour: govuk-organisation-colour($organisation); + $contrast: ch-color-contrast($govuk-body-background-colour, $colour); + + @if ($contrast < $minimum-contrast) { + @error "Contrast ratio for #{$organisation} too low." + + " #{$colour} on #{$govuk-body-background-colour} has a contrast of: #{$contrast}." + + " Must be higher than #{$minimum-contrast} for WCAG AA support."; + } + } + ` + + await expect(compileSassString(sass)).resolves + }) + + it('should define websafe colours that meet contrast requirements (legacy colours)', async () => { const sass = ` @import "settings/colours-palette"; @import "settings/colours-organisations";