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)) 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. 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 {') + }) + }) +}) 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;