Skip to content

Commit

Permalink
Place new organisation colours behind a feature flag
Browse files Browse the repository at this point in the history
  • Loading branch information
@querkmachine
querkmachine committed Feb 23, 2024
1 parent 526ed84 commit 750d178
Show file tree
Hide file tree
Showing 4 changed files with 279 additions and 21 deletions.
8 changes: 6 additions & 2 deletions packages/govuk-frontend/src/govuk/helpers/_colour.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
71 changes: 71 additions & 0 deletions packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
`
})
})
})
})
192 changes: 173 additions & 19 deletions packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
///
Expand All @@ -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
),
Expand All @@ -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": (
Expand All @@ -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
Expand All @@ -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": (
Expand All @@ -87,33 +92,28 @@ $govuk-colours-organisations: (
),
"department-for-science-innovation-technology": (
colour: #00f9f8,
colour-websafe: #008180,
contrast-safe: #008180
),
"department-for-transport": (
colour: #006853
),
"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": (
Expand Down Expand Up @@ -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."
Expand Down Expand Up @@ -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
Expand All @@ -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"
Expand Down

0 comments on commit 750d178

Please sign in to comment.