diff --git a/packages/govuk-frontend/src/govuk/components/button/_index.scss b/packages/govuk-frontend/src/govuk/components/button/_index.scss index 973519bd0d..7cdafe9204 100644 --- a/packages/govuk-frontend/src/govuk/components/button/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/button/_index.scss @@ -101,17 +101,6 @@ $govuk-button-text-colour: govuk-colour("white") !default; box-shadow: inset 0 0 0 1px $govuk-focus-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 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; - } - } - &:focus:not(:active):not(:hover) { border-color: $govuk-focus-colour; color: $govuk-focus-text-colour; @@ -179,17 +168,6 @@ $govuk-button-text-colour: govuk-colour("white") !default; color: $govuk-secondary-button-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 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-secondary-button-text-colour; - } - } - &:hover { background-color: $govuk-secondary-button-hover-colour; @@ -211,17 +189,6 @@ $govuk-button-text-colour: govuk-colour("white") !default; color: $govuk-warning-button-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 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-warning-button-text-colour; - } - } - &:hover { background-color: $govuk-warning-button-hover-colour; @@ -243,17 +210,6 @@ $govuk-button-text-colour: govuk-colour("white") !default; color: $govuk-inverse-button-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 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-inverse-button-text-colour; - } - } - &:hover { background-color: $govuk-inverse-button-hover-colour; diff --git a/packages/govuk-frontend/src/govuk/components/footer/_index.scss b/packages/govuk-frontend/src/govuk/components/footer/_index.scss index bea7aca20f..97e18b4f1a 100644 --- a/packages/govuk-frontend/src/govuk/components/footer/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/footer/_index.scss @@ -24,15 +24,6 @@ .govuk-footer__link { @include govuk-link-common; @include govuk-link-style-text; - - // 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 { - @include govuk-text-colour; - } - } } .govuk-footer__section-break { diff --git a/packages/govuk-frontend/src/govuk/components/table/_index.scss b/packages/govuk-frontend/src/govuk/components/table/_index.scss index c52eaa32f1..f4872a1b52 100644 --- a/packages/govuk-frontend/src/govuk/components/table/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/table/_index.scss @@ -19,12 +19,6 @@ 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) { - font-size: inherit; - line-height: inherit; - } } .govuk-table__cell--numeric { diff --git a/packages/govuk-frontend/src/govuk/core/_section-break.scss b/packages/govuk-frontend/src/govuk/core/_section-break.scss index dea97fbd6d..fb9876e6d6 100644 --- a/packages/govuk-frontend/src/govuk/core/_section-break.scss +++ b/packages/govuk-frontend/src/govuk/core/_section-break.scss @@ -3,12 +3,6 @@ %govuk-section-break { margin: 0; border: 0; - - // fix double-width section break and forced visible section break - // when combined with styles from alphagov/elements - @include _govuk-compatibility(govuk_elements) { - height: 0; - } } .govuk-section-break { diff --git a/packages/govuk-frontend/src/govuk/helpers/_links.scss b/packages/govuk-frontend/src/govuk/helpers/_links.scss index 578d8e8f9c..5595debf98 100644 --- a/packages/govuk-frontend/src/govuk/helpers/_links.scss +++ b/packages/govuk-frontend/src/govuk/helpers/_links.scss @@ -96,17 +96,6 @@ &: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; - } - } } /// Error link styles @@ -144,17 +133,6 @@ &: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; - } - } } /// Success link styles @@ -192,17 +170,6 @@ &: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 link styles @@ -237,15 +204,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 { - @include govuk-text-colour; - } - } } /// Text link styles @@ -282,15 +240,6 @@ &:focus { @include govuk-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 { - @include govuk-text-colour; - } - } } /// Inverse link styles @@ -325,15 +274,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-focus-text-colour; - } - } } /// Default link styles, without a visited state diff --git a/packages/govuk-frontend/src/govuk/tools/_all.scss b/packages/govuk-frontend/src/govuk/tools/_all.scss index 7cc4052bf1..69d4bf0d63 100644 --- a/packages/govuk-frontend/src/govuk/tools/_all.scss +++ b/packages/govuk-frontend/src/govuk/tools/_all.scss @@ -1,4 +1,3 @@ -@import "compatibility"; @import "exports"; @import "font-url"; @import "image-url"; diff --git a/packages/govuk-frontend/src/govuk/tools/_compatibility.scss b/packages/govuk-frontend/src/govuk/tools/_compatibility.scss deleted file mode 100644 index ba4aaf680b..0000000000 --- a/packages/govuk-frontend/src/govuk/tools/_compatibility.scss +++ /dev/null @@ -1,50 +0,0 @@ -//// -/// @group tools/compatibility-mode -//// - -/// Temporary private version of govuk-compatibility to avoid deprecation warnings -/// -/// @access private - -@mixin _govuk-compatibility($product) { - @if map-has-key($_govuk-compatibility, $product) { - @if map-get($_govuk-compatibility, $product) == true { - @content; - } - } @else { - @error "Non existent product '#{$product}'"; - } -} - -/// Conditional Compatibility Mixin -/// -/// Selectively output a block (available to the mixin as @content) if a given -/// $product is also identified as being used in the project. -/// -/// This can then be used to include styles that are only needed to override -/// styles provided by those other products (e.g. where govuk_template has a -/// very specific link selector that otherwise affects buttons). -/// -/// @example scss -/// // Override .my-class if GOV.UK Template is also being used -/// @include govuk-compatibility(govuk_template) { -/// .my-class { -/// color: inherit; -/// } -/// } -/// -/// @param {String} $product - Name of product that we are 'defending' against. -/// @content Passed content is outputted only if Frontend is being used with -/// this product -/// @throw Errors if product name is not recognised -/// @access public -/// @deprecated Will be removed in v5.0 with the rest of the compatibility mode -/// suite of tools and settings - -@mixin govuk-compatibility($product) { - @include _warning(compatibility-helper, "govuk-compatibility is deprecated. " + - "From version 5.0, GOV.UK Frontend will not support compatibility mode."); - @include _govuk-compatibility($product) { - @content; - } -} diff --git a/packages/govuk-frontend/src/govuk/tools/compatibility.test.js b/packages/govuk-frontend/src/govuk/tools/compatibility.test.js deleted file mode 100644 index a3b334740f..0000000000 --- a/packages/govuk-frontend/src/govuk/tools/compatibility.test.js +++ /dev/null @@ -1,109 +0,0 @@ -const { compileSassString } = require('govuk-frontend-helpers/tests') -const { outdent } = require('outdent') -const { sassNull } = require('sass-embedded') - -// Create a mock warn function that we can use to override the native @warn -// function, that we can make assertions about post-render. -const mockWarnFunction = jest.fn() - .mockReturnValue(sassNull) - -const sassConfig = { - logger: { - warn: mockWarnFunction - } -} - -describe('@mixin govuk-compatibility', () => { - // Import the warning mixin - const warningsImport = '@import "settings/warnings";' - - it('does not output if the app is not marked as included', async () => { - const sass = ` - ${warningsImport} - - $_govuk-compatibility: (existing_app: false); - - @import "tools/compatibility"; - - @include govuk-compatibility(existing_app) { - .foo { - color: red; - } - } - ` - - await expect(compileSassString(sass)) - .resolves - .toMatchObject({ css: '' }) - }) - - it('outputs if the app is not marked as included', async () => { - const sass = ` - ${warningsImport} - $_govuk-compatibility: (existing_app: true); - - @import "tools/compatibility"; - - @include govuk-compatibility(existing_app) { - .foo { - color: red; - } - } - ` - - await expect(compileSassString(sass)) - .resolves - .toMatchObject({ - css: outdent` - .foo { - color: red; - } - ` - }) - }) - - it('throws an exception if the app is not recognised', async () => { - const sass = ` - ${warningsImport} - $_govuk-compatibility: (existing_app: true); - - @import "tools/compatibility"; - - @include govuk-compatibility(non_existent_app) { - .foo { - color: red; - } - } - ` - - await expect(compileSassString(sass, sassConfig)) - .rejects - .toThrow('Non existent product \'non_existent_app\'') - }) - - it('outputs a deprecation warning when called', async () => { - const sass = ` - ${warningsImport} - $_govuk-compatibility: (existing_app: true); - - @import "tools/compatibility"; - - @include govuk-compatibility(existing_app) { - .foo { - color: red; - } - } - ` - - await compileSassString(sass, sassConfig) - - // Expect our mocked @warn function to have been called once with a single - // argument, which should be the deprecation notice - expect(mockWarnFunction.mock.calls[0]) - .toEqual(expect.arrayContaining([ - 'govuk-compatibility is deprecated. From version 5.0, GOV.UK Frontend ' + - 'will not support compatibility mode. To silence this warning, ' + - 'update $govuk-suppressed-warnings with key: "compatibility-helper"' - ])) - }) -}) diff --git a/sassdoc.config.yaml b/sassdoc.config.yaml index 1b9efc054b..e0eda7ec88 100644 --- a/sassdoc.config.yaml +++ b/sassdoc.config.yaml @@ -23,7 +23,6 @@ groups: settings/warnings: Settings / Warnings tools: Tools tools/assets: Tools / Assets - tools/compatibility-mode: Tools / Compatibility Mode tools/unit-conversion: Tools / Unit Conversion helpers: Helpers overrides: Overrides