Merge pull request #658 from alphagov/global-a-and-p-styles

Opt-in global anchor and paragraph styles

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 `<a>` and `<p>` 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))

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.

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

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";

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;
+  }
+}

src/globals/settings/_global-styles.scss

@@ -0,0 +1,3 @@
+// set to include optional globals styles 
+
+$govuk-global-styles: false !default;