From 27f29cea0e7609dcd03589c98c647ec3a80843aa Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 25 Apr 2018 15:36:09 +0100 Subject: [PATCH 1/4] Global styles inclusion based on flag --- src/globals/_common.scss | 2 ++ src/globals/core/_global-styles.scss | 21 +++++++++++++++++++++ src/globals/settings/_global-styles.scss | 3 +++ 3 files changed, 26 insertions(+) create mode 100644 src/globals/core/_global-styles.scss create mode 100644 src/globals/settings/_global-styles.scss diff --git a/src/globals/_common.scss b/src/globals/_common.scss index e45a8d1e61..468342f2df 100644 --- a/src/globals/_common.scss +++ b/src/globals/_common.scss @@ -8,6 +8,7 @@ @import "settings/paths"; @import "settings/compatibility"; +@import "settings/global-styles"; @import "settings/ie8"; @import "settings/media-queries"; @@ -48,6 +49,7 @@ @import "core/typography"; @import "core/prose-scope"; @import "core/section-break"; +@import "core/global-styles"; // Objects @import "objects/form-group"; diff --git a/src/globals/core/_global-styles.scss b/src/globals/core/_global-styles.scss new file mode 100644 index 0000000000..aaef080617 --- /dev/null +++ b/src/globals/core/_global-styles.scss @@ -0,0 +1,21 @@ +@import "../tools/exports"; +@import "links"; +@import "typography"; +@import "../settings/global-styles"; + +@mixin govuk-global-styles { + a { + @extend %govuk-link; + } + + p { + @extend %govuk-body-m; + } +} + +@include govuk-exports("govuk-global-styles") { + + @if $govuk-global-styles == true { + @include govuk-global-styles; + } +} diff --git a/src/globals/settings/_global-styles.scss b/src/globals/settings/_global-styles.scss new file mode 100644 index 0000000000..e5be624abf --- /dev/null +++ b/src/globals/settings/_global-styles.scss @@ -0,0 +1,3 @@ +// set to include optional globals styles + +$govuk-global-styles: false !default; From f4d258aeab0fd4b4b73df7db48d7e2c22d55fef7 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 25 Apr 2018 16:28:29 +0100 Subject: [PATCH 2/4] Document in CHANGELOG --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa6c02c72d..51e72d67d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -45,6 +45,17 @@ New features: - Focus Error Summary on window load (PR [#671](https://github.com/alphagov/govuk-frontend/pull/671)) +- Opt-in Global `` and `

` styles + (PR [#658](https://github.com/alphagov/govuk-frontend/pull/658)) + + Global styles are not included by default. + + This is to avoid the risk of these globals conflicting with any pre-existing globals, for example in GOV.UK Elements or GOV.UK Template. + + Hovever, we do include them in the [GOV.UK Prototype Kit](https://github.com/alphagov/govuk-prototype-kit-private-beta) to speed up prototyping. + + To include global styles, you can set `$govuk-global-styles` variable to `true`. + Internal: - Update publishing docs (PR [#651](https://github.com/alphagov/govuk-frontend/pull/651)) From e32fd3947d851a2e0291d40657e0badeab6763b7 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Thu, 19 Apr 2018 11:51:29 +0100 Subject: [PATCH 3/4] Document settings in README --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index f2e12026aa..14c10bb295 100644 --- a/README.md +++ b/README.md @@ -138,6 +138,23 @@ After resolving the import paths you can import GOV.UK Frontend by using: @import "@govuk-frontend/button/button"; ``` +#### Global Styles + +[Global styles](src/globals/core/_global-styles.scss) are not included by default. + +This is to avoid the risk of these globals conflicting with any pre-existing globals, for example in GOV.UK Elements or GOV.UK Template. + +Hovever, we do include them in the [GOV.UK Prototype Kit](https://github.com/alphagov/govuk-prototype-kit-private-beta) to speed up prototyping. + +To include global styles, you can set `$govuk-global-styles` variable to `true`. +``` +// application.scss + +$govuk-global-styles: true; + +@import "govuk-frontend/all/all"; +``` + ### Import JavaScript You need to import the GOV.UK Frontend scripts into the main JavaScript file in your project. From 563d373e925c043de0808348e2b62de5ff14e19b Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 2 May 2018 12:13:43 +0100 Subject: [PATCH 4/4] Add tests to check output --- src/all/all.test.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/all/all.test.js diff --git a/src/all/all.test.js b/src/all/all.test.js new file mode 100644 index 0000000000..9901264332 --- /dev/null +++ b/src/all/all.test.js @@ -0,0 +1,34 @@ +/* eslint-env jest */ + +const util = require('util') + +const configPaths = require('../../config/paths.json') + +const sass = require('node-sass') +const sassRender = util.promisify(sass.render) + +const sassConfig = { + includePaths: [ configPaths.src ] +} + +describe('GOV.UK Frontend', () => { + describe('global styles', async() => { + it('are disabled by default', async () => { + const sass = ` + @import "all/all"; + ` + const results = await sassRender({ data: sass, ...sassConfig }) + expect(results.css.toString()).not.toContain(', a {') + expect(results.css.toString()).not.toContain(', p {') + }) + it('are enabled if $global-styles variable is set to true', async () => { + const sass = ` + $govuk-global-styles: true; + @import "all/all"; + ` + const results = await sassRender({ data: sass, ...sassConfig }) + expect(results.css.toString()).toContain(', a {') + expect(results.css.toString()).toContain(', p {') + }) + }) +})