It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
+ It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+ - name: classes
+ hidden: true
+ data:
+ classes: app-inset-text--custom-modifier
+ - name: id
+ hidden: true
+ data:
+ id: my-inset-text
+ - name: html as text
+ hidden: true
+ data:
+ text: It can take
+{% if params.fieldset %}
+ {% call govukFieldset({
+ describedBy: describedBy,
+ classes: params.fieldset.classes,
+ attributes: params.fieldset.attributes,
+ legend: params.fieldset.legend
+ }) %}
+ {{ innerHtml | trim | safe }}
+ {% endcall %}
+{% else %}
+ {{ innerHtml | trim | safe }}
+{% endif %}
+
diff --git a/src/govuk/components/radios/template.test.js b/src/govuk/components/radios/template.test.js
new file mode 100644
index 0000000000..0de8f5ff00
--- /dev/null
+++ b/src/govuk/components/radios/template.test.js
@@ -0,0 +1,383 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-env jest */
+
+const axe = require('../../../../lib/axe-helper')
+
+const { render, getExamples, htmlWithClassName } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('radios')
+
+const WORD_BOUNDARY = '\\b'
+const WHITESPACE = '\\s'
+
+describe('Radios', () => {
+ it('default example passes accessibility tests', async () => {
+ const $ = render('radios', examples.default)
+
+ const results = await axe($.html())
+ expect(results).toHaveNoViolations()
+ })
+
+ it('render example with minimum required name and items', () => {
+ const $ = render('radios', examples.default)
+
+ const $component = $('.govuk-radios')
+
+ const $firstInput = $component.find('.govuk-radios__item:first-child input')
+ const $firstLabel = $component.find('.govuk-radios__item:first-child label')
+ expect($firstInput.attr('name')).toEqual('example-default')
+ expect($firstInput.val()).toEqual('yes')
+ expect($firstLabel.text()).toContain('Yes')
+
+ const $lastInput = $component.find('.govuk-radios__item:last-child input')
+ const $lastLabel = $component.find('.govuk-radios__item:last-child label')
+ expect($lastInput.attr('name')).toEqual('example-default')
+ expect($lastInput.val()).toEqual('no')
+ expect($lastLabel.text()).toContain('No')
+ })
+
+ it('renders without falsely items', () => {
+ const $ = render('radios', examples['with falsey items'])
+
+ const $component = $('.govuk-radios')
+ const $items = $component.find('.govuk-radios__item input')
+ expect($items.length).toEqual(2)
+ })
+
+ it('render classes', () => {
+ const $ = render('radios', examples.inline)
+
+ const $component = $('.govuk-radios')
+
+ expect($component.hasClass('govuk-radios--inline')).toBeTruthy()
+ })
+
+ it('renders initial aria-describedby on fieldset', () => {
+ const describedById = 'some-id'
+
+ const $ = render('radios', examples['fieldset with describedBy'])
+
+ const $fieldset = $('.govuk-fieldset')
+ expect($fieldset.attr('aria-describedby')).toMatch(describedById)
+ })
+
+ it('render attributes', () => {
+ const $ = render('radios', examples.attributes)
+
+ const $component = $('.govuk-radios')
+
+ expect($component.attr('data-attribute')).toEqual('value')
+ expect($component.attr('data-second-attribute')).toEqual('second-value')
+ })
+
+ it('render a custom class on the form group', () => {
+ const $ = render('radios', examples['with optional form-group classes showing group error'])
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.hasClass('govuk-form-group--error')).toBeTruthy()
+ })
+
+ describe('items', () => {
+ it('render a matching label and input using name by default', () => {
+ const $ = render('radios', examples.default)
+
+ const $component = $('.govuk-radios')
+
+ const $firstInput = $component.find('.govuk-radios__item:first-child input')
+ const $firstLabel = $component.find('.govuk-radios__item:first-child label')
+ expect($firstInput.attr('id')).toEqual('example-default')
+ expect($firstLabel.attr('for')).toEqual('example-default')
+
+ const $lastInput = $component.find('.govuk-radios__item:last-child input')
+ const $lastLabel = $component.find('.govuk-radios__item:last-child label')
+ expect($lastInput.attr('id')).toEqual('example-default-2')
+ expect($lastLabel.attr('for')).toEqual('example-default-2')
+ })
+
+ it('render a matching label and input using custom idPrefix', () => {
+ const $ = render('radios', examples['with idPrefix'])
+
+ const $component = $('.govuk-radios')
+
+ const $firstInput = $component.find('.govuk-radios__item:first-child input')
+ const $firstLabel = $component.find('.govuk-radios__item:first-child label')
+ expect($firstInput.attr('id')).toEqual('example-id-prefix')
+ expect($firstLabel.attr('for')).toEqual('example-id-prefix')
+
+ const $lastInput = $component.find('.govuk-radios__item:last-child input')
+ const $lastLabel = $component.find('.govuk-radios__item:last-child label')
+ expect($lastInput.attr('id')).toEqual('example-id-prefix-2')
+ expect($lastLabel.attr('for')).toEqual('example-id-prefix-2')
+ })
+
+ it('render disabled', () => {
+ const $ = render('radios', examples['with disabled'])
+
+ const $component = $('.govuk-radios')
+
+ const $firstInput = $component.find('.govuk-radios__item:first-child input')
+ expect($firstInput.attr('disabled')).toEqual('disabled')
+
+ const $lastInput = $component.find('.govuk-radios__item:last-child input')
+ expect($lastInput.attr('disabled')).toEqual('disabled')
+ })
+
+ it('render checked', () => {
+ const $ = render('radios', examples.default)
+
+ const $component = $('.govuk-radios')
+ const $lastInput = $component.find('.govuk-radios__item:last-child input')
+ expect($lastInput.attr('checked')).toEqual('checked')
+ })
+
+ describe('when they include attributes', () => {
+ it('it renders the attributes', () => {
+ const $ = render('radios', examples['items with attributes'])
+
+ const $component = $('.govuk-radios')
+
+ const $firstInput = $component.find('.govuk-radios__item:first-child input')
+ expect($firstInput.attr('data-attribute')).toEqual('ABC')
+ expect($firstInput.attr('data-second-attribute')).toEqual('DEF')
+
+ const $lastInput = $component.find('.govuk-radios__item:last-child input')
+ expect($lastInput.attr('data-attribute')).toEqual('GHI')
+ expect($lastInput.attr('data-second-attribute')).toEqual('JKL')
+ })
+ })
+
+ describe('when they include a hint', () => {
+ it('it renders the hint text', () => {
+ const $ = render('radios', examples['with hints on items'])
+
+ expect($('.govuk-radios__hint').text())
+ .toContain('You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.')
+ })
+
+ it('it renders the correct id attribute for the hint', () => {
+ const $ = render('radios', examples['with hints on items'])
+
+ expect($('.govuk-radios__hint').attr('id')).toBe('gateway-item-hint')
+ })
+
+ it('the input describedBy attribute matches the item hint id', () => {
+ const $ = render('radios', examples['with hints on items'])
+
+ expect($('.govuk-radios__input').attr('aria-describedby')).toBe('gateway-item-hint')
+ })
+ })
+
+ describe('render conditionals', () => {
+ it('hidden by default when not checked', () => {
+ const $ = render('radios', examples['with conditional items'])
+
+ const $component = $('.govuk-radios')
+
+ const $hiddenConditional = $component.find('.govuk-radios__conditional').first()
+ expect($hiddenConditional.text()).toContain('Mobile phone number')
+ expect($hiddenConditional.hasClass('govuk-radios__conditional--hidden')).toBeTruthy()
+ })
+
+ it('visible by default when checked', () => {
+ const $ = render('radios', examples['with conditional item checked'])
+
+ const $component = $('.govuk-radios')
+
+ const $visibleConditional = $component.find('.govuk-radios__conditional').first()
+ expect($visibleConditional.text()).toContain('Email')
+ expect($visibleConditional.hasClass('govuk-radios__conditional--hidden')).toBeFalsy()
+ })
+
+ it('with association to the input they are controlled by', () => {
+ const $ = render('radios', examples['with conditional items'])
+
+ const $component = $('.govuk-radios')
+
+ const $firstInput = $component.find('.govuk-radios__input').first()
+ const $firstConditional = $component.find('.govuk-radios__conditional').first()
+
+ expect($firstInput.attr('data-aria-controls')).toBe('conditional-how-contacted')
+ expect($firstConditional.attr('id')).toBe('conditional-how-contacted')
+ })
+
+ it('omits empty conditionals', () => {
+ const $ = render('radios', examples['with empty conditional'])
+
+ const $component = $('.govuk-radios')
+ expect($component.find('.govuk-radios__conditional').length).toEqual(0)
+ })
+
+ it('does not associate radios with empty conditionals', () => {
+ const $ = render('radios', examples['with empty conditional'])
+
+ const $input = $('.govuk-radios__input').first()
+ expect($input.attr('data-aria-controls')).toBeFalsy()
+ })
+ })
+
+ it('render divider', () => {
+ const $ = render('radios', examples['with a divider'])
+
+ const $component = $('.govuk-radios')
+ const $divider = $component.find('.govuk-radios__divider')
+ expect($divider.text()).toBe('or')
+ })
+
+ it('render additional label classes', () => {
+ const $ = render('radios', examples['label with classes'])
+
+ const $component = $('.govuk-radios')
+ const $label = $component.find('.govuk-radios__item label')
+ expect($label.hasClass('bold')).toBeTruthy()
+ })
+
+ it('renders with a form group wrapper', () => {
+ const $ = render('radios', examples.default)
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.length).toBeTruthy()
+ })
+ })
+
+ describe('when they include a hint', () => {
+ it('renders the hint', () => {
+ const $ = render('radios', examples['with hints on parent and items'])
+
+ expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot()
+ })
+
+ it('associates the fieldset as "described by" the hint', () => {
+ const $ = render('radios', examples['with hints on parent and items'])
+
+ const $fieldset = $('.govuk-fieldset')
+
+ expect($fieldset.attr('aria-describedby')).toMatch('example-multiple-hints-hint')
+ })
+
+ it('associates the fieldset as "described by" the hint and parent fieldset', () => {
+ const $ = render('radios', examples['with describedBy and hint'])
+ const $fieldset = $('.govuk-fieldset')
+
+ expect($fieldset.attr('aria-describedby')).toMatch('some-id')
+ })
+ })
+
+ describe('when they include an error message', () => {
+ it('renders the error message', () => {
+ const $ = render('radios', examples['with error message'])
+
+ expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot()
+ })
+
+ it('uses the idPrefix for the error message id if provided', () => {
+ const $ = render('radios', examples['with error message and idPrefix'])
+ const $errorMessage = $('.govuk-error-message')
+
+ expect($errorMessage.attr('id')).toEqual('id-prefix-error')
+ })
+
+ it('falls back to using the name for the error message id', () => {
+ const $ = render('radios', examples['with error message'])
+
+ const $errorMessage = $('.govuk-error-message')
+
+ expect($errorMessage.attr('id')).toEqual('example-error-message-error')
+ })
+
+ it('associates the fieldset as "described by" the error message', () => {
+ const $ = render('radios', examples['with fieldset and error message'])
+
+ const $fieldset = $('.govuk-fieldset')
+ const $errorMessage = $('.govuk-error-message')
+
+ const errorMessageId = new RegExp(
+ WORD_BOUNDARY + $errorMessage.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($fieldset.attr('aria-describedby'))
+ .toMatch(errorMessageId)
+ })
+
+ it('associates the fieldset as "described by" the error message and parent fieldset', () => {
+ const $ = render('radios', examples['with fieldset, error message and describedBy'])
+
+ const $fieldset = $('.govuk-fieldset')
+ const $errorMessage = $('.govuk-error-message')
+
+ const errorMessageId = new RegExp(
+ WORD_BOUNDARY + 'some-id' + WHITESPACE + $errorMessage.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($fieldset.attr('aria-describedby'))
+ .toMatch(errorMessageId)
+ })
+
+ it('renders with a form group wrapper that has an error state', () => {
+ const $ = render('radios', examples['with error message'])
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.hasClass('govuk-form-group--error')).toBeTruthy()
+ })
+ })
+
+ describe('when they include both a hint and an error message', () => {
+ it('associates the fieldset as described by both the hint and the error message', () => {
+ const $ = render('radios', examples['with hint and error message'])
+
+ const $fieldset = $('.govuk-fieldset')
+ const errorMessageId = $('.govuk-error-message').attr('id')
+ const hintId = $('.govuk-hint').attr('id')
+
+ const combinedIds = new RegExp(
+ WORD_BOUNDARY + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+ )
+
+ expect($fieldset.attr('aria-describedby'))
+ .toMatch(combinedIds)
+ })
+
+ it('associates the fieldset as described by the hint, error message and parent fieldset', () => {
+ const $ = render('radios', examples['with hint, error message and describedBy'])
+
+ const $fieldset = $('.govuk-fieldset')
+ const errorMessageId = $('.govuk-error-message').attr('id')
+ const hintId = $('.govuk-hint').attr('id')
+
+ const combinedIds = new RegExp(
+ WORD_BOUNDARY + 'some-id' + WHITESPACE + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+ )
+
+ expect($fieldset.attr('aria-describedby'))
+ .toMatch(combinedIds)
+ })
+ })
+
+ describe('nested dependant components', () => {
+ it('have correct nesting order', () => {
+ const $ = render('radios', examples.inline)
+
+ const $component = $('.govuk-form-group > .govuk-fieldset > .govuk-radios')
+ expect($component.length).toBeTruthy()
+ })
+
+ it('passes through label params without breaking', () => {
+ const $ = render('radios', examples['label with attributes'])
+
+ expect(htmlWithClassName($, '.govuk-radios__label')).toMatchSnapshot()
+ })
+
+ it('passes through fieldset params without breaking', () => {
+ const $ = render('radios', examples['fieldset params'])
+
+ expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot()
+ })
+
+ it('passes through html fieldset params without breaking', () => {
+ const $ = render('radios', examples['fieldset with html'])
+
+ expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot()
+ })
+ })
+})
diff --git a/src/govuk/components/select/README.md b/src/govuk/components/select/README.md
new file mode 100644
index 0000000000..c8d4740dfc
--- /dev/null
+++ b/src/govuk/components/select/README.md
@@ -0,0 +1,15 @@
+# Select
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/select/#options-select-example) for details.
diff --git a/src/govuk/components/select/__snapshots__/template.test.js.snap b/src/govuk/components/select/__snapshots__/template.test.js.snap
new file mode 100644
index 0000000000..4201d35300
--- /dev/null
+++ b/src/govuk/components/select/__snapshots__/template.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select when it includes a hint renders the hint 1`] = `
+
+ {{ govukLabel({
+ html: params.label.html,
+ text: params.label.text,
+ classes: params.label.classes,
+ isPageHeading: params.label.isPageHeading,
+ attributes: params.label.attributes,
+ for: params.id
+ }) | indent(2) | trim }}
+{% if params.hint %}
+ {% set hintId = params.id + '-hint' %}
+ {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+ {{ govukHint({
+ id: hintId,
+ classes: params.hint.classes,
+ attributes: params.hint.attributes,
+ html: params.hint.html,
+ text: params.hint.text
+ }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+ {% set errorId = params.id + '-error' %}
+ {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+ {{ govukErrorMessage({
+ id: errorId,
+ classes: params.errorMessage.classes,
+ attributes: params.errorMessage.attributes,
+ html: params.errorMessage.html,
+ text: params.errorMessage.text,
+ visuallyHiddenText: params.errorMessage.visuallyHiddenText
+ }) | indent(2) | trim }}
+{% endif %}
+
+ {% for item in params.items %}
+ {% if item %}
+ {{ item.text }}
+ {% endif %}
+ {% endfor %}
+
+
diff --git a/src/govuk/components/select/template.test.js b/src/govuk/components/select/template.test.js
new file mode 100644
index 0000000000..9bb4adc8ef
--- /dev/null
+++ b/src/govuk/components/select/template.test.js
@@ -0,0 +1,254 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-env jest */
+
+const axe = require('../../../../lib/axe-helper')
+
+const { render, getExamples, htmlWithClassName } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('select')
+
+const WORD_BOUNDARY = '\\b'
+const WHITESPACE = '\\s'
+
+describe('Select', () => {
+ describe('by default', () => {
+ it('passes accessibility tests', async () => {
+ const $ = render('select', examples.default)
+
+ const results = await axe($.html())
+ expect(results).toHaveNoViolations()
+ })
+
+ it('renders with id', () => {
+ const $ = render('select', examples.default)
+
+ const $component = $('.govuk-select')
+ expect($component.attr('id')).toEqual('select-1')
+ })
+
+ it('renders with name', () => {
+ const $ = render('select', examples.default)
+
+ const $component = $('.govuk-select')
+ expect($component.attr('name')).toEqual('select-1')
+ })
+
+ it('renders with items', () => {
+ const $ = render('select', examples.default)
+ const $items = $('.govuk-select option')
+ expect($items.length).toEqual(3)
+ })
+
+ it('renders item with value', () => {
+ const $ = render('select', examples.default)
+
+ const $firstItem = $('.govuk-select option:first-child')
+ expect($firstItem.attr('value')).toEqual('1')
+ })
+
+ it('renders item with text', () => {
+ const $ = render('select', examples.default)
+
+ const $firstItem = $('.govuk-select option:first-child')
+ expect($firstItem.text()).toEqual('GOV.UK frontend option 1')
+ })
+
+ it('renders item with selected', () => {
+ const $ = render('select', examples.default)
+
+ const $selectedItem = $('.govuk-select option:nth-child(2)')
+ expect($selectedItem.attr('selected')).toBeTruthy()
+ })
+
+ it('renders item with disabled', () => {
+ const $ = render('select', examples.default)
+
+ const $disabledItem = $('.govuk-select option:last-child')
+ expect($disabledItem.attr('disabled')).toBeTruthy()
+ })
+
+ it('renders with a form group wrapper', () => {
+ const $ = render('select', examples.default)
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.length).toBeTruthy()
+ })
+
+ it('renders with a form group wrapper that has extra classes', () => {
+ const $ = render('select', examples['with optional form-group classes'])
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.hasClass('extra-class')).toBeTruthy()
+ })
+
+ it('renders without falsely items', () => {
+ const $ = render('select', examples['with falsey values'])
+
+ const $items = $('.govuk-select option')
+ expect($items.length).toEqual(2)
+ })
+ })
+
+ describe('custom options', () => {
+ it('renders with classes', () => {
+ const $ = render('select', examples['with full width override'])
+
+ const $component = $('.govuk-select')
+ expect($component.hasClass('govuk-!-width-full')).toBeTruthy()
+ })
+
+ it('renders with aria-describedby', () => {
+ const $ = render('select', examples['with describedBy'])
+
+ const $component = $('.govuk-select')
+ expect($component.attr('aria-describedby')).toMatch('some-id')
+ })
+
+ it('renders with attributes', () => {
+ const $ = render('select', examples.attributes)
+
+ const $component = $('.govuk-select')
+ expect($component.attr('data-attribute')).toEqual('my data value')
+ })
+
+ it('renders with attributes on items', () => {
+ const $ = render('select', examples['attributes on items'])
+
+ const $component = $('.govuk-select')
+
+ const $firstInput = $component.find('option:first-child')
+ expect($firstInput.attr('data-attribute')).toEqual('ABC')
+ expect($firstInput.attr('data-second-attribute')).toEqual('DEF')
+
+ const $secondInput = $component.find('option:last-child')
+ expect($secondInput.attr('data-attribute')).toEqual('GHI')
+ expect($secondInput.attr('data-second-attribute')).toEqual('JKL')
+ })
+ })
+
+ describe('when it includes a hint', () => {
+ it('renders the hint', () => {
+ const $ = render('select', examples.hint)
+
+ expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot()
+ })
+
+ it('associates the select as "described by" the hint', () => {
+ const $ = render('select', examples.hint)
+
+ const $select = $('.govuk-select')
+ const $hint = $('.govuk-hint')
+
+ const hintId = new RegExp(
+ WORD_BOUNDARY + $hint.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($select.attr('aria-describedby'))
+ .toMatch(hintId)
+ })
+
+ it('associates the select as "described by" the hint and parent fieldset', () => {
+ const $ = render('select', examples['hint and describedBy'])
+
+ const $select = $('.govuk-select')
+
+ expect($select.attr('aria-describedby'))
+ .toMatch('some-id')
+ })
+ })
+
+ describe('when it includes an error message', () => {
+ it('renders with error message', () => {
+ const $ = render('select', examples.error)
+
+ expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot()
+ })
+
+ it('associates the select as "described by" the error message', () => {
+ const $ = render('select', examples.error)
+
+ const $input = $('.govuk-select')
+ const $errorMessage = $('.govuk-error-message')
+
+ const errorMessageId = new RegExp(
+ WORD_BOUNDARY + $errorMessage.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($input.attr('aria-describedby'))
+ .toMatch(errorMessageId)
+ })
+
+ it('associates the select as "described by" the error message and parent fieldset', () => {
+ const $ = render('select', examples['error and describedBy'])
+
+ const $input = $('.govuk-select')
+
+ expect($input.attr('aria-describedby'))
+ .toMatch('some-id')
+ })
+
+ it('adds the error class to the select', () => {
+ const $ = render('select', examples.error)
+
+ const $component = $('.govuk-select')
+ expect($component.hasClass('govuk-select--error')).toBeTruthy()
+ })
+
+ it('renders with a form group wrapper that has an error state', () => {
+ const $ = render('select', examples.error)
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.hasClass('govuk-form-group--error')).toBeTruthy()
+ })
+ })
+
+ describe('when it includes both a hint and an error message', () => {
+ it('associates the select as described by both the hint and the error message', () => {
+ const $ = render('select', examples['with hint text and error message'])
+
+ const $component = $('.govuk-select')
+ const errorMessageId = $('.govuk-error-message').attr('id')
+ const hintId = $('.govuk-hint').attr('id')
+
+ const combinedIds = new RegExp(
+ WORD_BOUNDARY + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+ )
+
+ expect($component.attr('aria-describedby'))
+ .toMatch(combinedIds)
+ })
+
+ it('associates the select as described by the hint, error message and parent fieldset', () => {
+ const $ = render('select', examples['with hint text and error message'])
+
+ const $component = $('.govuk-select')
+
+ expect($component.attr('aria-describedby'))
+ .toMatch('select-2-hint select-2-error')
+ })
+ })
+
+ describe('with dependant components', () => {
+ it('have correct nesting order', () => {
+ const $ = render('select', examples['with hint text and error message'])
+
+ const $component = $('.govuk-form-group > .govuk-select')
+ expect($component.length).toBeTruthy()
+ })
+
+ it('renders with label', () => {
+ const $ = render('select', examples.default)
+
+ expect(htmlWithClassName($, '.govuk-label')).toMatchSnapshot()
+ })
+
+ it('renders label with "for" attribute reffering the select "id"', () => {
+ const $ = render('select', examples.default)
+
+ const $label = $('.govuk-label')
+ expect($label.attr('for')).toEqual('select-1')
+ })
+ })
+})
diff --git a/src/govuk/components/skip-link/README.md b/src/govuk/components/skip-link/README.md
new file mode 100644
index 0000000000..65edcab0bd
--- /dev/null
+++ b/src/govuk/components/skip-link/README.md
@@ -0,0 +1,15 @@
+# Skip link
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/skip-link/#options-skip-link-example) for details.
diff --git a/src/govuk/components/skip-link/_index.scss b/src/govuk/components/skip-link/_index.scss
new file mode 100644
index 0000000000..df21ba0f3f
--- /dev/null
+++ b/src/govuk/components/skip-link/_index.scss
@@ -0,0 +1,34 @@
+@include govuk-exports("govuk/component/skip-link") {
+ .govuk-skip-link {
+ @include govuk-visually-hidden-focusable;
+ @include govuk-typography-common;
+ @include govuk-link-style-text;
+ @include govuk-typography-responsive($size: 16);
+
+ display: block;
+ padding: govuk-spacing(2) govuk-spacing(3);
+
+ // Respect 'display cutout' safe area (avoids notches and rounded corners)
+ @supports (padding: unquote("max(calc(0px))")) {
+ $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
+ $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
+
+ // Use max() to pick largest padding, default or with safe area
+ // Escaped due to Sass max() vs. CSS native max()
+ padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
+ padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
+ }
+
+ &:focus {
+ outline: $govuk-focus-width solid $govuk-focus-colour;
+ outline-offset: 0;
+ background-color: $govuk-focus-colour;
+
+ // Undo unwanted changes when global styles are enabled
+ @if ($govuk-global-styles) {
+ box-shadow: none;
+ text-decoration: underline;
+ }
+ }
+ }
+}
diff --git a/src/govuk/components/skip-link/_skip-link.scss b/src/govuk/components/skip-link/_skip-link.scss
new file mode 100644
index 0000000000..bfabb03440
--- /dev/null
+++ b/src/govuk/components/skip-link/_skip-link.scss
@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";
diff --git a/src/components/skip-link/macro.njk b/src/govuk/components/skip-link/macro.njk
similarity index 100%
rename from src/components/skip-link/macro.njk
rename to src/govuk/components/skip-link/macro.njk
diff --git a/src/govuk/components/skip-link/skip-link.yaml b/src/govuk/components/skip-link/skip-link.yaml
new file mode 100644
index 0000000000..57f34c3bef
--- /dev/null
+++ b/src/govuk/components/skip-link/skip-link.yaml
@@ -0,0 +1,65 @@
+params:
+- name: text
+ type: string
+ required: true
+ description: If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
+- name: html
+ type: string
+ required: true
+ description: If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
+- name: href
+ type: string
+ required: false
+ description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.
+- name: classes
+ type: string
+ required: false
+ description: Classes to add to the skip link.
+- name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the skip link.
+
+examples:
+ - name: default
+ data:
+ text: Skip to main content
+ href: '#content'
+
+ - name: with focus
+ description: Simulate triggering the :focus CSS pseudo-class, not available in the production build.
+ data:
+ classes: :focus
+ text: Skip to main content
+ href: '#content'
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+ - name: default values
+ hidden: true
+ data: {}
+ - name: custom href
+ hidden: true
+ data:
+ href: "#custom"
+ - name: custom text
+ hidden: true
+ data:
+ text: skip
+ - name: html as text
+ hidden: true
+ data:
+ text: Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers' League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."
+ Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."
Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.
actions:
items:
@@ -478,3 +545,106 @@ examples:
text: Stop
- href: '#'
text: Format
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+ - name: attributes
+ hidden: true
+ data:
+ attributes:
+ data-attribute-1: value-1
+ data-attribute-2: value-2
+ - name: with falsey values
+ hidden: true
+ data:
+ rows:
+ - key:
+ text: Name
+ - null
+ - false
+ - ""
+ - key:
+ text: Name 2
+ - name: key with html
+ hidden: true
+ data:
+ rows:
+ - key:
+ html: s are allowed in a definition list
+ dlitem: { enabled: false },
+ 'definition-list': { enabled: false }
+ }
+ })
+ expect(results).toHaveNoViolations()
+ })
+ })
+
+ describe('custom options', () => {
+ it('renders classes', async () => {
+ const $ = render('summary-list', examples['no-border'])
+
+ const $component = $('.govuk-summary-list')
+ expect($component.hasClass('govuk-summary-list--no-border')).toBeTruthy()
+ })
+
+ it('renders with attributes', () => {
+ const $ = render('summary-list', examples.attributes)
+
+ const $component = $('.govuk-summary-list')
+ expect($component.attr('data-attribute-1')).toEqual('value-1')
+ expect($component.attr('data-attribute-2')).toEqual('value-2')
+ })
+ })
+
+ describe('rows', () => {
+ it('renders list without falsely values', async () => {
+ const $ = render('summary-list', examples['with falsey values'])
+
+ const $component = $('.govuk-summary-list')
+ const $row = $component.find('.govuk-summary-list__row')
+ expect($row.length).toBe(2)
+ })
+
+ it('renders classes', async () => {
+ const $ = render('summary-list', examples['rows with classes'])
+
+ const $component = $('.govuk-summary-list')
+ const $row = $component.find('.govuk-summary-list__row')
+ expect($row.hasClass('app-custom-class')).toBeTruthy()
+ })
+
+ describe('keys', () => {
+ it('renders text', async () => {
+ const $ = render('summary-list', examples.default)
+
+ const $component = $('.govuk-summary-list')
+ const $key = $component.find('dt.govuk-summary-list__key')
+
+ expect($key.html()).toContain('Name')
+ })
+
+ it('renders html', async () => {
+ const $ = render('summary-list', examples['key with html'])
+
+ const $component = $('.govuk-summary-list')
+ const $key = $component.find('dt.govuk-summary-list__key')
+
+ expect($key.html()).toContain('
Name ')
+ })
+
+ it('renders classes', async () => {
+ const $ = render('summary-list', examples['key with classes'])
+
+ const $component = $('.govuk-summary-list')
+ const $key = $component.find('dt.govuk-summary-list__key')
+ expect($key.hasClass('app-custom-class')).toBeTruthy()
+ })
+ })
+
+ describe('values', () => {
+ it('renders text', async () => {
+ const $ = render('summary-list', examples.default)
+
+ const $component = $('.govuk-summary-list')
+ const $value = $component.find('dd.govuk-summary-list__value')
+
+ expect($value.html()).toContain('Firstname Lastname')
+ })
+
+ it('renders html', async () => {
+ const $ = render('summary-list', examples['value with html'])
+
+ const $component = $('.govuk-summary-list')
+ const $value = $component.find('dd.govuk-summary-list__value')
+
+ expect($value.html()).toContain('
email@email.com ')
+ })
+
+ it('renders classes', async () => {
+ const $ = render('summary-list', examples['overridden-widths'])
+
+ const $component = $('.govuk-summary-list')
+ const $value = $component.find('dd.govuk-summary-list__value')
+ expect($value.hasClass('govuk-!-width-one-quarter')).toBeTruthy()
+ })
+ })
+
+ describe('actions', () => {
+ it('renders href', async () => {
+ const $ = render('summary-list', examples['actions href'])
+
+ const $component = $('.govuk-summary-list')
+ const $actionLink = $component.find('.govuk-summary-list__actions > a')
+
+ expect($actionLink.attr('href')).toBe('https://www.gov.uk')
+ })
+
+ it('renders text', async () => {
+ const $ = render('summary-list', examples['with actions'])
+
+ const $component = $('.govuk-summary-list')
+ const $actionLink = $component.find('.govuk-summary-list__actions > a')
+
+ expect($actionLink.text().trim()).toContain('Change date of birth')
+ })
+
+ it('renders html', async () => {
+ const $ = render('summary-list', examples['actions with html'])
+
+ const $component = $('.govuk-summary-list')
+ const $actionLink = $component.find('.govuk-summary-list__actions > a')
+
+ expect($actionLink.html()).toContain('Edit
name ')
+ })
+
+ it('renders custom accessible name', async () => {
+ const $ = render('summary-list', examples['with actions'])
+
+ const $component = $('.govuk-summary-list')
+ const $actionLink = $component.find('.govuk-summary-list__actions > a')
+ expect($actionLink.text().trim()).toContain('Change date of birth')
+ })
+
+ it('renders classes', async () => {
+ const $ = render('summary-list', examples['actions with classes'])
+
+ const $component = $('.govuk-summary-list')
+ const $actionList = $component.find('.govuk-summary-list__actions')
+
+ expect($actionList.hasClass('app-custom-class')).toBeTruthy()
+ })
+
+ it('renders attributes', async () => {
+ const $ = render('summary-list', examples['actions with attributes'])
+
+ const $component = $('.govuk-summary-list')
+ const $actionLink = $component.find('.govuk-summary-list__actions > a')
+
+ expect($actionLink.attr('data-test-attribute')).toEqual('value')
+ expect($actionLink.attr('data-test-attribute-2')).toEqual('value-2')
+ })
+
+ it('renders a single anchor with one action', async () => {
+ const $ = render('summary-list', examples['single action with anchor'])
+
+ const $component = $('.govuk-summary-list')
+ const $action = $component.find('.govuk-summary-list__actions > a')
+
+ expect($action.html().trim()).toBe('First action')
+ })
+
+ it('renders a list with mutliple actions', async () => {
+ const $ = render('summary-list', examples['with some actions'])
+
+ const $component = $('.govuk-summary-list')
+ const $actionList = $component.find('.govuk-summary-list__actions')
+ const $secondAction = $actionList.find('.govuk-summary-list__actions-list-item:last-child')
+
+ expect($secondAction.text().trim()).toBe('Delete name')
+ })
+
+ it('renders classes on actions', async () => {
+ const $ = render('summary-list', examples['classes on items'])
+
+ const $component = $('.govuk-summary-list')
+ const $action = $component.find('.govuk-summary-list__actions > a')
+
+ expect($action.hasClass('govuk-link--no-visited-state')).toBeTruthy()
+ })
+
+ it('skips the action column when no array is provided', async () => {
+ const $ = render('summary-list', examples.default)
+
+ const $component = $('.govuk-summary-list')
+ const $action = $component.find('.govuk-summary-list__actions')
+
+ expect($action.length).toEqual(0)
+ })
+
+ it('skips the action column when no items are in the array provided', async () => {
+ const $ = render('summary-list', examples['empty items array'])
+
+ const $component = $('.govuk-summary-list')
+ const $action = $component.find('.govuk-summary-list__actions')
+
+ expect($action.length).toEqual(0)
+ })
+
+ it('adds dummy action columns when only some rows have actions', async () => {
+ const $ = render('summary-list', examples['with some actions'])
+
+ const $component = $('.govuk-summary-list')
+ const $action = $component.find('.govuk-summary-list__actions')
+
+ // First action column contains link text
+ expect($action[0].tagName).toEqual('dd')
+ expect($($action[0]).text()).toContain('Edit')
+
+ // Second action column is a dummy
+ expect($action[1].tagName).toEqual('span')
+ expect($($action[1]).text()).toEqual('')
+ })
+ })
+ })
+})
diff --git a/src/govuk/components/table/README.md b/src/govuk/components/table/README.md
new file mode 100644
index 0000000000..5a1b9e918d
--- /dev/null
+++ b/src/govuk/components/table/README.md
@@ -0,0 +1,15 @@
+# Table
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the table component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/table).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/table/#options-table-example) for details.
diff --git a/src/govuk/components/table/_index.scss b/src/govuk/components/table/_index.scss
new file mode 100644
index 0000000000..f9f799e31d
--- /dev/null
+++ b/src/govuk/components/table/_index.scss
@@ -0,0 +1,50 @@
+@include govuk-exports("govuk/component/table") {
+ .govuk-table {
+ @include govuk-font($size: 19);
+ @include govuk-text-colour;
+ width: 100%;
+ @include govuk-responsive-margin(6, "bottom");
+
+ border-spacing: 0;
+ border-collapse: collapse;
+ }
+
+ .govuk-table__header {
+ @include govuk-typography-weight-bold;
+ }
+
+ .govuk-table__header,
+ .govuk-table__cell {
+ padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
+ 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 {
+ @include govuk-font($size: false, $tabular: true);
+ }
+
+ .govuk-table__header--numeric,
+ .govuk-table__cell--numeric {
+ text-align: right;
+ }
+
+ .govuk-table__header:last-child,
+ .govuk-table__cell:last-child {
+ padding-right: 0;
+ }
+
+ .govuk-table__caption {
+ @include govuk-typography-weight-bold;
+
+ display: table-caption;
+ text-align: left;
+ }
+}
diff --git a/src/govuk/components/table/_table.scss b/src/govuk/components/table/_table.scss
new file mode 100644
index 0000000000..bfabb03440
--- /dev/null
+++ b/src/govuk/components/table/_table.scss
@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";
diff --git a/src/components/table/macro.njk b/src/govuk/components/table/macro.njk
similarity index 100%
rename from src/components/table/macro.njk
rename to src/govuk/components/table/macro.njk
diff --git a/src/govuk/components/table/table.yaml b/src/govuk/components/table/table.yaml
new file mode 100644
index 0000000000..136c117cfb
--- /dev/null
+++ b/src/govuk/components/table/table.yaml
@@ -0,0 +1,315 @@
+params:
+- name: rows
+ type: array
+ required: true
+ description: Array of table rows and cells.
+ params:
+ - name: text
+ type: string
+ required: true
+ description: If `html` is set, this is not required. Text for cells in table rows. If `html` is provided, the `text` argument will be ignored.
+ - name: html
+ type: string
+ required: true
+ description: If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignore
+ - name: format
+ type: string
+ required: false
+ description: Specify format of a cell. Currently we only use "numeric".
+ - name: classes
+ type: string
+ required: false
+ description: Classes to add to the table row cell.
+ - name: colspan
+ type: integer
+ required: false
+ description: Specify how many columns a cell extends.
+ - name: rowspan
+ type: integer
+ required: false
+ description: Specify how many rows a cell extends.
+ - name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the table cell.
+- name: head
+ type: array
+ required: false
+ description: Array of table head cells.
+ params:
+ - name: text
+ type: string
+ required: false
+ description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.
+ - name: html
+ type: string
+ required: false
+ description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore
+ - name: format
+ type: string
+ required: false
+ description: Specify format of a cell. Currently we only use "numeric".
+ - name: classes
+ type: string
+ required: false
+ description: Classes to add to the table head cell.
+ - name: colspan
+ type: integer
+ required: false
+ description: Specify how many columns a cell extends.
+ - name: rowspan
+ type: integer
+ required: false
+ description: Specify how many rows a cell extends.
+ - name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the table cell.
+- name: caption
+ type: string
+ required: false
+ description: Caption text
+- name: captionClasses
+ type: string
+ required: false
+ description: Classes for caption text size. Classes should correspond to the available typography heading classes.
+- name: firstCellIsHeader
+ type: boolean
+ required: false
+ description: If set to true, first cell in table row will be a TH instead of a TD.
+- name: classes
+ type: string
+ required: false
+ description: Classes to add to the table container.
+- name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the table container.
+
+examples:
+ - name: default
+ data:
+ rows:
+ -
+ - text: January
+ - text: £85
+ format: numeric
+ - text: £95
+ format: numeric
+ -
+ - text: February
+ - text: £75
+ format: numeric
+ - text: £55
+ format: numeric
+ -
+ - text: March
+ - text: £165
+ format: numeric
+ - text: £125
+ format: numeric
+ - name: table with head
+ data:
+ head:
+ - text: Month you apply
+ - text: Rate for bicycles
+ format: numeric
+ - text: Rate for vehicles
+ format: numeric
+ rows:
+ -
+ - text: January
+ - text: £85
+ format: numeric
+ - text: £95
+ format: numeric
+ -
+ - text: February
+ - text: £75
+ format: numeric
+ - text: £55
+ format: numeric
+ -
+ - text: March
+ - text: £165
+ format: numeric
+ - text: £125
+ format: numeric
+ - name: table with head and caption
+ data:
+ caption: 'Caption 1: Months and rates'
+ captionClasses: govuk-heading-m
+ firstCellIsHeader: true
+ head:
+ - text: Month you apply
+ - text: Rate for bicycles
+ format: numeric
+ - text: Rate for vehicles
+ format: numeric
+ rows:
+ -
+ - text: January
+ - text: £85
+ format: numeric
+ - text: £95
+ format: numeric
+ -
+ - text: February
+ - text: £75
+ format: numeric
+ - text: £55
+ format: numeric
+ -
+ - text: March
+ - text: £165
+ format: numeric
+ - text: £125
+ format: numeric
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+ - name: classes
+ hidden: true
+ data:
+ classes: custom-class-goes-here
+ - name: attributes
+ hidden: true
+ data:
+ attributes:
+ data-foo: bar
+ - name: html as text
+ hidden: true
+ data:
+ head:
+ - text: Foo
+ rows:
+ -
+ - text: Foo
+ - name: html
+ hidden: true
+ data:
+ head:
+ - html: Foo
bar
+ rows:
+ -
+ - html: Foo
bar
+ - name: head with classes
+ hidden: true
+ data:
+ head:
+ - text: Foo
+ classes: my-custom-class
+ - name: head with rowspan and colspan
+ hidden: true
+ data:
+ head:
+ - text: Foo
+ rowspan: 2
+ colspan: 2
+ - name: head with attributes
+ hidden: true
+ data:
+ head:
+ - attributes:
+ data-fizz: buzz
+ - name: with firstCellIsHeader true
+ hidden: true
+ data:
+ firstCellIsHeader: true
+ rows:
+ -
+ - text: January
+ - text: £85
+ format: numeric
+ - text: £95
+ format: numeric
+ -
+ - text: February
+ - text: £75
+ format: numeric
+ - text: £55
+ format: numeric
+ -
+ - text: March
+ - text: £165
+ format: numeric
+ - text: £125
+ format: numeric
+ - name: firstCellIsHeader with classes
+ hidden: true
+ data:
+ firstCellIsHeader: true
+ rows:
+ -
+ - text: Foo
+ classes: my-custom-class
+ - name: firstCellIsHeader with html
+ hidden: true
+ data:
+ firstCellIsHeader: true
+ rows:
+ -
+ - html: Foo
bar
+ - name: firstCellIsHeader with html as text
+ hidden: true
+ data:
+ firstCellIsHeader: true
+ rows:
+ -
+ - text: Foo
+ - name: firstCellIsHeader with rowspan and colspan
+ hidden: true
+ data:
+ firstCellIsHeader: true
+ rows:
+ -
+ - text: Foo
+ rowspan: 2
+ colspan: 2
+ - name: firstCellIsHeader with attributes
+ hidden: true
+ data:
+ firstCellIsHeader: true
+ rows:
+ -
+ - text: Foo
+ attributes:
+ data-fizz: buzz
+ - name: with falsey items
+ hidden: true
+ data:
+ rows:
+ -
+ - text: A
+ - text: 1
+ - false
+ - null
+ -
+ - text: B
+ - text: 2
+ -
+ - text: C
+ - text: 3
+ - name: rows with classes
+ hidden: true
+ data:
+ rows:
+ -
+ - text: Foo
+ classes: my-custom-class
+ - name: rows with rowspan and colspan
+ hidden: true
+ data:
+ rows:
+ -
+ - text: Foo
+ rowspan: 2
+ colspan: 2
+ - name: rows with attributes
+ hidden: true
+ data:
+ rows:
+ -
+ - text: Foo
+ attributes:
+ data-fizz: buzz
+
diff --git a/src/govuk/components/table/template.njk b/src/govuk/components/table/template.njk
new file mode 100644
index 0000000000..0f05260463
--- /dev/null
+++ b/src/govuk/components/table/template.njk
@@ -0,0 +1,45 @@
+
+ {% if params.caption %}
+ {{ params.caption }}
+ {% endif %}
+ {% if params.head %}
+
+
+ {% for item in params.head %}
+
+ {% endfor %}
+
+
+ {% endif %}
+
+ {% for row in params.rows %}
+ {% if row %}
+
+ {% for cell in row %}
+ {% set commonAttributes %}
+ {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+ {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+ {% endset %}
+ {% if loop.first and params.firstCellIsHeader %}
+
+ {% else %}
+ {{ cell.html | safe if cell.html else cell.text }}
+ {% endif %}
+ {% endfor %}
+
+ {% endif %}
+ {% endfor %}
+
+
diff --git a/src/govuk/components/table/template.test.js b/src/govuk/components/table/template.test.js
new file mode 100644
index 0000000000..64c5bf4ef9
--- /dev/null
+++ b/src/govuk/components/table/template.test.js
@@ -0,0 +1,318 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-env jest */
+
+const axe = require('../../../../lib/axe-helper')
+
+const { render, getExamples } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('table')
+
+describe('Table', () => {
+ it('passes basic accessibility tests', async () => {
+ const $ = render('table', examples.default)
+
+ const results = await axe($.html())
+ expect(results).toHaveNoViolations()
+ })
+
+ it('can have additional classes', () => {
+ const $ = render('table', examples.classes)
+
+ expect($('.govuk-table').hasClass('custom-class-goes-here')).toBeTruthy()
+ })
+
+ it('can have additional attributes', () => {
+ const $ = render('table', examples.attributes)
+
+ expect($('.govuk-table').attr('data-foo')).toEqual('bar')
+ })
+
+ // =========================================================
+ // Captions
+ // =========================================================
+
+ describe('captions', () => {
+ it('can have custom text', () => {
+ const $ = render('table', examples['table with head and caption'])
+ const $caption = $('.govuk-table__caption')
+
+ expect($caption.text()).toBe('Caption 1: Months and rates')
+ })
+
+ it('can have additional classes', () => {
+ const $ = render('table', examples['table with head and caption'])
+ const $caption = $('.govuk-table__caption')
+
+ expect($caption.hasClass('govuk-heading-m')).toBeTruthy()
+ })
+ })
+
+ // =========================================================
+ // Column headers
+ // =========================================================
+
+ describe('column headers', () => {
+ it('can be specified', () => {
+ const args = examples['table with head']
+ const $ = render('table', args)
+
+ const headings = $('.govuk-table').find('thead tr th')
+ .map((_, e) => $(e).text())
+ .get()
+
+ expect(headings).toEqual([
+ 'Month you apply',
+ 'Rate for bicycles',
+ 'Rate for vehicles'
+ ])
+ })
+
+ it('have HTML escaped when passed as text', () => {
+ const $ = render('table', examples['html as text'])
+
+ const $th = $('.govuk-table thead tr th')
+
+ expect($th.html()).toEqual('Foo <script>hacking.do(1337)</script>')
+ })
+
+ it('allow HTML when passed as HTML', () => {
+ const $ = render('table', examples.html)
+
+ const $th = $('.govuk-table thead tr th')
+
+ expect($th.html()).toEqual('Foo
bar ')
+ })
+
+ it('can have a format specified', () => {
+ const $ = render('table', examples['table with head'])
+
+ const $th = $('.govuk-table thead tr th')
+
+ expect($th.hasClass('govuk-table__header--numeric')).toBeTruthy()
+ })
+
+ it('can have additional classes', () => {
+ const $ = render('table', examples['head with classes'])
+
+ const $th = $('.govuk-table thead tr th')
+
+ expect($th.hasClass('my-custom-class')).toBeTruthy()
+ })
+
+ it('can have rowspan specified', () => {
+ const $ = render('table', examples['head with rowspan and colspan'])
+
+ const $th = $('.govuk-table thead tr th')
+
+ expect($th.attr('rowspan')).toEqual('2')
+ })
+
+ it('can have colspan specified', () => {
+ const $ = render('table', examples['head with rowspan and colspan'])
+
+ const $th = $('.govuk-table thead tr th')
+
+ expect($th.attr('colspan')).toEqual('2')
+ })
+
+ it('can have additional attributes', () => {
+ const $ = render('table', examples['head with attributes'])
+
+ const $th = $('.govuk-table thead tr th')
+
+ expect($th.attr('data-fizz')).toEqual('buzz')
+ })
+ })
+
+ // =========================================================
+ // Row headers
+ // =========================================================
+
+ describe('row headers', () => {
+ describe('when firstCellIsHeader is false', () => {
+ it('are not included', () => {
+ const $ = render('table', examples.default)
+
+ const cells = $('.govuk-table').find('tbody tr td')
+ .map((_, e) => $(e).text())
+ .get()
+
+ expect(cells).toEqual(
+ ['January', '£85', '£95', 'February', '£75', '£55', 'March', '£165', '£125']
+ )
+ })
+ })
+
+ describe('when firstCellIsHeader is true', () => {
+ it('are included', () => {
+ const $ = render('table', examples['with firstCellIsHeader true'])
+
+ const headings = $('.govuk-table').find('tbody tr th')
+ .map((_, e) => $(e).text())
+ .get()
+
+ expect(headings).toEqual(['January', 'February', 'March'])
+ })
+
+ it('have HTML escaped when passed as text', () => {
+ const $ = render('table', examples['firstCellIsHeader with html as text'])
+
+ const $th = $('.govuk-table tbody tr th')
+
+ expect($th.html()).toEqual('Foo <script>hacking.do(1337)</script>')
+ })
+
+ it('allow HTML when passed as HTML', () => {
+ const $ = render('table', examples['firstCellIsHeader with html'])
+
+ const $th = $('.govuk-table tbody tr th')
+
+ expect($th.html()).toEqual('Foo
bar ')
+ })
+
+ it('are associated with their rows using scope="row"', () => {
+ const $ = render('table', examples['with firstCellIsHeader true'])
+
+ const $th = $('.govuk-table').find('tbody tr th')
+
+ expect($th.attr('scope')).toEqual('row')
+ })
+
+ it('have the govuk-table__header class', () => {
+ const $ = render('table', examples['with firstCellIsHeader true'])
+
+ const $th = $('.govuk-table').find('tbody tr th')
+
+ expect($th.hasClass('govuk-table__header')).toBeTruthy()
+ })
+
+ it('can have additional classes', () => {
+ const $ = render('table', examples['firstCellIsHeader with classes'])
+
+ const $th = $('.govuk-table').find('tbody tr th')
+
+ expect($th.hasClass('my-custom-class')).toBeTruthy()
+ })
+
+ it('can have rowspan specified', () => {
+ const $ = render('table', examples['firstCellIsHeader with rowspan and colspan'])
+
+ const $th = $('.govuk-table').find('tbody tr th')
+
+ expect($th.attr('rowspan')).toEqual('2')
+ })
+
+ it('can have colspan specified', () => {
+ const $ = render('table', examples['firstCellIsHeader with rowspan and colspan'])
+
+ const $th = $('.govuk-table').find('tbody tr th')
+
+ expect($th.attr('colspan')).toEqual('2')
+ })
+
+ it('can have additional attributes', () => {
+ const $ = render('table', examples['firstCellIsHeader with attributes'])
+
+ const $th = $('.govuk-table').find('tbody tr th')
+
+ expect($th.attr('data-fizz')).toEqual('buzz')
+ })
+ })
+ })
+
+ // =========================================================
+ // Cells
+ // =========================================================
+
+ describe('cells', () => {
+ it('can be specified', () => {
+ const $ = render('table', examples.default)
+
+ const cells = $('.govuk-table').find('tbody tr')
+ .map((_, tr) => {
+ return [$(tr).find('td').map((_, td) => $(td).text()).get()]
+ })
+ .get()
+
+ expect(cells).toEqual([
+ ['January', '£85', '£95'],
+ ['February', '£75', '£55'],
+ ['March', '£165', '£125']
+ ])
+ })
+
+ it('can be skipped when falsely', () => {
+ const $ = render('table', examples['with falsey items'])
+
+ const cells = $('.govuk-table').find('tbody tr')
+ .map((_, tr) => {
+ return [$(tr).find('td').map((_, td) => $(td).text()).get()]
+ })
+ .get()
+
+ expect(cells).toEqual([
+ ['A', '1'],
+ ['B', '2'],
+ ['C', '3']
+ ])
+ })
+
+ it('have HTML escaped when passed as text', () => {
+ const $ = render('table', examples['html as text'])
+
+ const $td = $('.govuk-table td')
+
+ expect($td.html()).toEqual('Foo <script>hacking.do(1337)</script>')
+ })
+
+ it('allow HTML when passed as HTML', () => {
+ const $ = render('table', examples.html)
+
+ const $td = $('.govuk-table td')
+
+ expect($td.html()).toEqual('Foo
bar ')
+ })
+
+ it('can have a format specified', () => {
+ const $ = render('table', examples.default)
+
+ const $td = $('.govuk-table td')
+
+ expect($td.hasClass('govuk-table__cell--numeric')).toBeTruthy()
+ })
+
+ it('can have additional classes', () => {
+ const $ = render('table', examples['rows with classes'])
+
+ const $td = $('.govuk-table td')
+
+ expect($td.hasClass('my-custom-class')).toBeTruthy()
+ })
+
+ it('can have rowspan specified', () => {
+ const $ = render('table', examples['rows with rowspan and colspan'])
+
+ const $td = $('.govuk-table td')
+
+ expect($td.attr('rowspan')).toEqual('2')
+ })
+
+ it('can have colspan specified', () => {
+ const $ = render('table', examples['rows with rowspan and colspan'])
+
+ const $td = $('.govuk-table td')
+
+ expect($td.attr('colspan')).toEqual('2')
+ })
+
+ it('can have additional attributes', () => {
+ const $ = render('table', examples['rows with attributes'])
+
+ const $td = $('.govuk-table td')
+
+ expect($td.attr('data-fizz')).toEqual('buzz')
+ })
+ })
+})
diff --git a/src/govuk/components/tabs/README.md b/src/govuk/components/tabs/README.md
new file mode 100644
index 0000000000..433c3665ec
--- /dev/null
+++ b/src/govuk/components/tabs/README.md
@@ -0,0 +1,15 @@
+# Tabs
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/tabs/#options-tabs-example) for details.
diff --git a/src/govuk/components/tabs/_index.scss b/src/govuk/components/tabs/_index.scss
new file mode 100644
index 0000000000..131c7feb87
--- /dev/null
+++ b/src/govuk/components/tabs/_index.scss
@@ -0,0 +1,135 @@
+@include govuk-exports("govuk/component/tabs") {
+ .govuk-tabs {
+ @include govuk-responsive-margin(1, "top");
+ @include govuk-responsive-margin(6, "bottom");
+ }
+
+ .govuk-tabs__title {
+ @include govuk-font($size: 19);
+ @include govuk-text-colour;
+ margin-bottom: govuk-spacing(2);
+ }
+
+ .govuk-tabs__list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ @include govuk-responsive-margin(6, "bottom");
+ }
+
+ .govuk-tabs__list-item {
+ @include govuk-font($size: 19);
+ margin-left: govuk-spacing(5);
+
+ &:before {
+ @include govuk-text-colour;
+ content: "\2014 "; // "— "
+ margin-left: - govuk-spacing(5);
+ padding-right: govuk-spacing(1);
+ }
+ }
+
+ .govuk-tabs__tab {
+ @include govuk-link-style-default;
+
+ display: inline-block;
+ margin-bottom: govuk-spacing(2);
+
+ // Focus state for mobile and when JavaScript is disabled
+ // It is removed for JS-enabled desktop styles
+ &:focus {
+ @include govuk-focused-text;
+ }
+ }
+
+ .govuk-tabs__panel {
+ @include govuk-responsive-margin(8, "bottom");
+ }
+
+ // JavaScript enabled
+ .js-enabled {
+
+ @include govuk-media-query($from: tablet) {
+ .govuk-tabs__list {
+ @include govuk-clearfix;
+ margin-bottom: 0;
+ border-bottom: 1px solid $govuk-border-colour;
+ }
+
+ .govuk-tabs__title {
+ display: none;
+ }
+
+ .govuk-tabs__list-item {
+ position: relative;
+
+ margin-right: govuk-spacing(1);
+ margin-bottom: 0;
+ margin-left: 0;
+ padding: govuk-spacing(2) govuk-spacing(4);
+
+ float: left;
+ background-color: govuk-colour("light-grey", $legacy: "grey-4");
+ text-align: center;
+
+ &:before {
+ content: none;
+ }
+ }
+
+ .govuk-tabs__list-item--selected {
+ $border-width: 1px;
+
+ position: relative;
+
+ margin-top: - govuk-spacing(1);
+
+ // Compensation for border (otherwise we get a shift)
+ margin-bottom: -$border-width;
+ padding-top: govuk-spacing(3) - $border-width;
+ padding-right: govuk-spacing(4) - $border-width;
+ padding-bottom: govuk-spacing(3) + $border-width;
+ padding-left: govuk-spacing(4) - $border-width;
+
+ border: $border-width solid $govuk-border-colour;
+ border-bottom: 0;
+
+ background-color: $govuk-body-background-colour;
+
+ .govuk-tabs__tab {
+ text-decoration: none;
+ }
+ }
+
+ .govuk-tabs__tab {
+ @include govuk-link-style-text;
+
+ margin-bottom: 0;
+
+ &:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+ }
+
+ .govuk-tabs__panel {
+ @include govuk-responsive-margin(0, "bottom");
+ padding: govuk-spacing(6) govuk-spacing(4);
+ border: 1px solid $govuk-border-colour;
+ border-top: 0;
+
+ & > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .govuk-tabs__panel--hidden {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/src/govuk/components/tabs/_tabs.scss b/src/govuk/components/tabs/_tabs.scss
new file mode 100644
index 0000000000..bfabb03440
--- /dev/null
+++ b/src/govuk/components/tabs/_tabs.scss
@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";
diff --git a/src/components/tabs/macro.njk b/src/govuk/components/tabs/macro.njk
similarity index 100%
rename from src/components/tabs/macro.njk
rename to src/govuk/components/tabs/macro.njk
diff --git a/src/govuk/components/tabs/tabs.js b/src/govuk/components/tabs/tabs.js
new file mode 100644
index 0000000000..2fb4b3becd
--- /dev/null
+++ b/src/govuk/components/tabs/tabs.js
@@ -0,0 +1,282 @@
+import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Element/prototype/classList'
+import '../../vendor/polyfills/Element/prototype/nextElementSibling'
+import '../../vendor/polyfills/Element/prototype/previousElementSibling'
+import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import { nodeListForEach } from '../../common'
+
+function Tabs ($module) {
+ this.$module = $module
+ this.$tabs = $module.querySelectorAll('.govuk-tabs__tab')
+
+ this.keys = { left: 37, right: 39, up: 38, down: 40 }
+ this.jsHiddenClass = 'govuk-tabs__panel--hidden'
+}
+
+Tabs.prototype.init = function () {
+ if (typeof window.matchMedia === 'function') {
+ this.setupResponsiveChecks()
+ } else {
+ this.setup()
+ }
+}
+
+Tabs.prototype.setupResponsiveChecks = function () {
+ this.mql = window.matchMedia('(min-width: 40.0625em)')
+ this.mql.addListener(this.checkMode.bind(this))
+ this.checkMode()
+}
+
+Tabs.prototype.checkMode = function () {
+ if (this.mql.matches) {
+ this.setup()
+ } else {
+ this.teardown()
+ }
+}
+
+Tabs.prototype.setup = function () {
+ var $module = this.$module
+ var $tabs = this.$tabs
+ var $tabList = $module.querySelector('.govuk-tabs__list')
+ var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
+
+ if (!$tabs || !$tabList || !$tabListItems) {
+ return
+ }
+
+ $tabList.setAttribute('role', 'tablist')
+
+ nodeListForEach($tabListItems, function ($item) {
+ $item.setAttribute('role', 'presentation')
+ })
+
+ nodeListForEach($tabs, function ($tab) {
+ // Set HTML attributes
+ this.setAttributes($tab)
+
+ // Save bounded functions to use when removing event listeners during teardown
+ $tab.boundTabClick = this.onTabClick.bind(this)
+ $tab.boundTabKeydown = this.onTabKeydown.bind(this)
+
+ // Handle events
+ $tab.addEventListener('click', $tab.boundTabClick, true)
+ $tab.addEventListener('keydown', $tab.boundTabKeydown, true)
+
+ // Remove old active panels
+ this.hideTab($tab)
+ }.bind(this))
+
+ // Show either the active tab according to the URL's hash or the first tab
+ var $activeTab = this.getTab(window.location.hash) || this.$tabs[0]
+ this.showTab($activeTab)
+
+ // Handle hashchange events
+ $module.boundOnHashChange = this.onHashChange.bind(this)
+ window.addEventListener('hashchange', $module.boundOnHashChange, true)
+}
+
+Tabs.prototype.teardown = function () {
+ var $module = this.$module
+ var $tabs = this.$tabs
+ var $tabList = $module.querySelector('.govuk-tabs__list')
+ var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
+
+ if (!$tabs || !$tabList || !$tabListItems) {
+ return
+ }
+
+ $tabList.removeAttribute('role')
+
+ nodeListForEach($tabListItems, function ($item) {
+ $item.removeAttribute('role', 'presentation')
+ })
+
+ nodeListForEach($tabs, function ($tab) {
+ // Remove events
+ $tab.removeEventListener('click', $tab.boundTabClick, true)
+ $tab.removeEventListener('keydown', $tab.boundTabKeydown, true)
+
+ // Unset HTML attributes
+ this.unsetAttributes($tab)
+ }.bind(this))
+
+ // Remove hashchange event handler
+ window.removeEventListener('hashchange', $module.boundOnHashChange, true)
+}
+
+Tabs.prototype.onHashChange = function (e) {
+ var hash = window.location.hash
+ var $tabWithHash = this.getTab(hash)
+ if (!$tabWithHash) {
+ return
+ }
+
+ // Prevent changing the hash
+ if (this.changingHash) {
+ this.changingHash = false
+ return
+ }
+
+ // Show either the active tab according to the URL's hash or the first tab
+ var $previousTab = this.getCurrentTab()
+
+ this.hideTab($previousTab)
+ this.showTab($tabWithHash)
+ $tabWithHash.focus()
+}
+
+Tabs.prototype.hideTab = function ($tab) {
+ this.unhighlightTab($tab)
+ this.hidePanel($tab)
+}
+
+Tabs.prototype.showTab = function ($tab) {
+ this.highlightTab($tab)
+ this.showPanel($tab)
+}
+
+Tabs.prototype.getTab = function (hash) {
+ return this.$module.querySelector('.govuk-tabs__tab[href="' + hash + '"]')
+}
+
+Tabs.prototype.setAttributes = function ($tab) {
+ // set tab attributes
+ var panelId = this.getHref($tab).slice(1)
+ $tab.setAttribute('id', 'tab_' + panelId)
+ $tab.setAttribute('role', 'tab')
+ $tab.setAttribute('aria-controls', panelId)
+ $tab.setAttribute('aria-selected', 'false')
+ $tab.setAttribute('tabindex', '-1')
+
+ // set panel attributes
+ var $panel = this.getPanel($tab)
+ $panel.setAttribute('role', 'tabpanel')
+ $panel.setAttribute('aria-labelledby', $tab.id)
+ $panel.classList.add(this.jsHiddenClass)
+}
+
+Tabs.prototype.unsetAttributes = function ($tab) {
+ // unset tab attributes
+ $tab.removeAttribute('id')
+ $tab.removeAttribute('role')
+ $tab.removeAttribute('aria-controls')
+ $tab.removeAttribute('aria-selected')
+ $tab.removeAttribute('tabindex')
+
+ // unset panel attributes
+ var $panel = this.getPanel($tab)
+ $panel.removeAttribute('role')
+ $panel.removeAttribute('aria-labelledby')
+ $panel.classList.remove(this.jsHiddenClass)
+}
+
+Tabs.prototype.onTabClick = function (e) {
+ if (!e.target.classList.contains('govuk-tabs__tab')) {
+ // Allow events on child DOM elements to bubble up to tab parent
+ return false
+ }
+ e.preventDefault()
+ var $newTab = e.target
+ var $currentTab = this.getCurrentTab()
+ this.hideTab($currentTab)
+ this.showTab($newTab)
+ this.createHistoryEntry($newTab)
+}
+
+Tabs.prototype.createHistoryEntry = function ($tab) {
+ var $panel = this.getPanel($tab)
+
+ // Save and restore the id
+ // so the page doesn't jump when a user clicks a tab (which changes the hash)
+ var id = $panel.id
+ $panel.id = ''
+ this.changingHash = true
+ window.location.hash = this.getHref($tab).slice(1)
+ $panel.id = id
+}
+
+Tabs.prototype.onTabKeydown = function (e) {
+ switch (e.keyCode) {
+ case this.keys.left:
+ case this.keys.up:
+ this.activatePreviousTab()
+ e.preventDefault()
+ break
+ case this.keys.right:
+ case this.keys.down:
+ this.activateNextTab()
+ e.preventDefault()
+ break
+ }
+}
+
+Tabs.prototype.activateNextTab = function () {
+ var currentTab = this.getCurrentTab()
+ var nextTabListItem = currentTab.parentNode.nextElementSibling
+ if (nextTabListItem) {
+ var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab')
+ }
+ if (nextTab) {
+ this.hideTab(currentTab)
+ this.showTab(nextTab)
+ nextTab.focus()
+ this.createHistoryEntry(nextTab)
+ }
+}
+
+Tabs.prototype.activatePreviousTab = function () {
+ var currentTab = this.getCurrentTab()
+ var previousTabListItem = currentTab.parentNode.previousElementSibling
+ if (previousTabListItem) {
+ var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab')
+ }
+ if (previousTab) {
+ this.hideTab(currentTab)
+ this.showTab(previousTab)
+ previousTab.focus()
+ this.createHistoryEntry(previousTab)
+ }
+}
+
+Tabs.prototype.getPanel = function ($tab) {
+ var $panel = this.$module.querySelector(this.getHref($tab))
+ return $panel
+}
+
+Tabs.prototype.showPanel = function ($tab) {
+ var $panel = this.getPanel($tab)
+ $panel.classList.remove(this.jsHiddenClass)
+}
+
+Tabs.prototype.hidePanel = function (tab) {
+ var $panel = this.getPanel(tab)
+ $panel.classList.add(this.jsHiddenClass)
+}
+
+Tabs.prototype.unhighlightTab = function ($tab) {
+ $tab.setAttribute('aria-selected', 'false')
+ $tab.parentNode.classList.remove('govuk-tabs__list-item--selected')
+ $tab.setAttribute('tabindex', '-1')
+}
+
+Tabs.prototype.highlightTab = function ($tab) {
+ $tab.setAttribute('aria-selected', 'true')
+ $tab.parentNode.classList.add('govuk-tabs__list-item--selected')
+ $tab.setAttribute('tabindex', '0')
+}
+
+Tabs.prototype.getCurrentTab = function () {
+ return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
+}
+
+// this is because IE doesn't always return the actual value but a relative full path
+// should be a utility function most prob
+// http://labs.thesedays.com/blog/2010/01/08/getting-the-href-value-with-jquery-in-ie/
+Tabs.prototype.getHref = function ($tab) {
+ var href = $tab.getAttribute('href')
+ var hash = href.slice(href.indexOf('#'), href.length)
+ return hash
+}
+
+export default Tabs
diff --git a/src/components/tabs/tabs.test.js b/src/govuk/components/tabs/tabs.test.js
similarity index 77%
rename from src/components/tabs/tabs.test.js
rename to src/govuk/components/tabs/tabs.test.js
index 387e53e022..2a98759597 100644
--- a/src/components/tabs/tabs.test.js
+++ b/src/govuk/components/tabs/tabs.test.js
@@ -1,34 +1,24 @@
-/**
- * @jest-environment ./lib/puppeteer/environment.js
- */
/* eslint-env jest */
const devices = require('puppeteer/DeviceDescriptors')
const iPhone = devices['iPhone 6']
-// const iPad = devices['iPad landscape']
-const configPaths = require('../../../config/paths.json')
+const configPaths = require('../../../../config/paths.json')
const PORT = configPaths.ports.test
-let browser
-let page
-let baseUrl = 'http://localhost:' + PORT
-
-beforeAll(async (done) => {
- browser = global.__BROWSER__
- page = await browser.newPage()
- done()
-})
-
-afterAll(async (done) => {
- await page.close()
- done()
-})
+const baseUrl = 'http://localhost:' + PORT
describe('/components/tabs', () => {
describe('/components/tabs/preview', () => {
describe('when JavaScript is unavailable or fails', () => {
- it('falls back to making all tab containers visible', async () => {
+ beforeAll(async () => {
await page.setJavaScriptEnabled(false)
+ })
+
+ afterAll(async () => {
+ await page.setJavaScriptEnabled(true)
+ })
+
+ it('falls back to making all tab containers visible', async () => {
await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
const isContentVisible = await page.waitForSelector('.govuk-tabs__panel', { visible: true, timeout: 1000 })
expect(isContentVisible).toBeTruthy()
@@ -37,14 +27,13 @@ describe('/components/tabs', () => {
describe('when JavaScript is available', () => {
it('should indicate the open state of the first tab', async () => {
- await page.setJavaScriptEnabled(true)
await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
const firstTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:first-child .govuk-tabs__tab').getAttribute('aria-selected'))
expect(firstTabAriaSelected).toEqual('true')
- const firstTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:first-child .govuk-tabs__tab').className)
- expect(firstTabClasses).toContain('govuk-tabs__tab--selected')
+ const firstTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:first-child').className)
+ expect(firstTabClasses).toContain('govuk-tabs__list-item--selected')
})
it('should display the first tab panel', async () => {
@@ -72,8 +61,8 @@ describe('/components/tabs', () => {
const secondTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-selected'))
expect(secondTabAriaSelected).toEqual('true')
- const secondTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').className)
- expect(secondTabClasses).toContain('govuk-tabs__tab--selected')
+ const secondTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2)').className)
+ expect(secondTabClasses).toContain('govuk-tabs__list-item--selected')
})
it('should display the tab panel associated with the selected tab', async () => {
@@ -88,6 +77,27 @@ describe('/components/tabs', () => {
})
expect(secondTabPanelIsHidden).toBeFalsy()
})
+
+ describe('when the tab contains a DOM element', () => {
+ it('should display the tab panel associated with the selected tab', async () => {
+ await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
+
+ await page.evaluate(() => {
+ // Replace contents of second tab with a DOM element
+ const secondTab = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab')
+ secondTab.innerHTML = '
Tab 2 '
+ })
+
+ // Click the DOM element inside the second tab
+ await page.click('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab span')
+
+ const secondTabPanelIsHidden = await page.evaluate(() => {
+ const secondTabAriaControls = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-controls')
+ return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('govuk-tabs__panel--hidden')
+ })
+ expect(secondTabPanelIsHidden).toBeFalsy()
+ })
+ })
})
describe('when first tab is focused and the right arrow key is pressed', () => {
@@ -101,8 +111,8 @@ describe('/components/tabs', () => {
const secondTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-selected'))
expect(secondTabAriaSelected).toEqual('true')
- const secondTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').className)
- expect(secondTabClasses).toContain('govuk-tabs__tab--selected')
+ const secondTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2)').className)
+ expect(secondTabClasses).toContain('govuk-tabs__list-item--selected')
})
it('should display the tab panel associated with the selected tab', async () => {
@@ -127,8 +137,8 @@ describe('/components/tabs', () => {
const currentTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__tab[href="#past-week"]').getAttribute('aria-selected'))
expect(currentTabAriaSelected).toEqual('true')
- const currentTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__tab[href="#past-week"]').className)
- expect(currentTabClasses).toContain('govuk-tabs__tab--selected')
+ const currentTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__tab[href="#past-week"]').parentNode.className)
+ expect(currentTabClasses).toContain('govuk-tabs__list-item--selected')
const currentTabPanelIsHidden = await page.evaluate(() => document.getElementById('past-week').classList.contains('govuk-tabs__panel--hidden'))
expect(currentTabPanelIsHidden).toBeFalsy()
diff --git a/src/govuk/components/tabs/tabs.yaml b/src/govuk/components/tabs/tabs.yaml
new file mode 100644
index 0000000000..ed0651d3b6
--- /dev/null
+++ b/src/govuk/components/tabs/tabs.yaml
@@ -0,0 +1,298 @@
+params:
+- name: id
+ type: string
+ required: false
+ description: This is used for the main component and to compose id attribute for each item.
+- name: idPrefix
+ type: string
+ required: false
+ description: String to prefix id for each tab item if no id is specified on each item
+- name: title
+ type: string
+ required: false
+ description: Title for the tabs table of contents
+- name: items
+ type: array
+ required: true
+ description: Array of tab items.
+ params:
+ - name: id
+ type: string
+ required: true
+ description: Specific id attribute for the tab item. If omitted, then `idPrefix` string will be applied.
+ - name: label
+ type: string
+ required: true
+ description: The text label of a tab item.
+ - name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the tab.
+ - name: panel
+ description: Content for the panel
+ type: object
+ required: true
+ params:
+ - name: text
+ type: string
+ required: true
+ description: If `html` is set, this is not required. Text to use within each tab panel. If `html` is provided, the `text` argument will be ignored.
+ - name: html
+ type: string
+ required: true
+ description: If `text` is set, this is not required. HTML to use within the each tab panel. If `html` is provided, the `text` argument will be ignored.
+ - name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the tab panel.
+- name: classes
+ type: string
+ required: false
+ description: Classes to add to the tabs component.
+- name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the tabs component.
+
+examples:
+ - name: default
+ data:
+ items:
+ - label: Past day
+ id: past-day
+ panel:
+ html: |
+
Past day
+
+
+
+
+
+
+
+
+
+
+ David Francis
+ 3
+ 0
+
+
+ Paul Farmer
+ 1
+ 0
+
+
+ Rita Patel
+ 2
+ 0
+
+
+
+ - label: Past week
+ id: past-week
+ panel:
+ html: |
+
Past week
+
+
+
+
+
+
+
+
+
+
+ David Francis
+ 24
+ 18
+
+
+ Paul Farmer
+ 16
+ 20
+
+
+ Rita Patel
+ 24
+ 27
+
+
+
+ - label: Past month
+ id: past-month
+ panel:
+ html: |
+
Past month
+
+
+
+
+
+
+
+
+
+
+ David Francis
+ 98
+ 95
+
+
+ Paul Farmer
+ 122
+ 131
+
+
+ Rita Patel
+ 126
+ 142
+
+
+
+ - label: Past year
+ id: past-year
+ panel:
+ html: |
+
Past year
+
+
+
+
+
+
+
+
+
+
+ David Francis
+ 1380
+ 1472
+
+
+ Paul Farmer
+ 1129
+ 1083
+
+
+ Rita Patel
+ 1539
+ 1265
+
+
+
+
+ - name: tabs-with-anchor-in-panel
+ description: Ensure that anchors that are in tab panels work correctly
+ data:
+ items:
+ - label: Tab 1
+ id: tab-1
+ panel:
+ html: |
+
Tab 1
+
Testing that when you click the anchor it moves to the anchor point successfully
+
Anchor
+
Anchor Point
+ - label: Tab 2
+ id: tab-2
+ panel:
+ html: |
+
Tab 2
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+ - name: classes
+ hidden: true
+ data:
+ classes: app-tabs--custom-modifier
+ - name: id
+ hidden: true
+ data:
+ id: my-tabs
+ - name: title
+ hidden: true
+ data:
+ title: Custom title for Contents
+ - name: attributes
+ hidden: true
+ data:
+ attributes:
+ data-attribute: my data value
+ - name: item with attributes
+ hidden: true
+ data:
+ items:
+ - id: tab-1
+ label: Tab 1
+ attributes:
+ data-attribute: my-attribute
+ data-attribute-2: my-attribute-2
+ - name: panel with attributes
+ hidden: true
+ data:
+ items:
+ - id: tab-1
+ label: Tab 1
+ panel:
+ text: Panel text
+ attributes:
+ data-attribute: my-attribute
+ data-attribute-2: my-attribute-2
+ - name: no item list
+ hidden: true
+ data:
+ id: my-tabs
+ classes: app-tabs--custom-modifier
+ - name: empty item list
+ hidden: true
+ data:
+ items: []
+ - name: with falsey values
+ hidden: true
+ data:
+ items:
+ - label: Tab 1
+ id: tab-1
+ panel:
+ text: Panel 1 content
+ - null
+ - false
+ - ""
+ - label: Tab 2
+ id: tab-2
+ panel:
+ text: Panel 2 content
+ - name: idPrefix
+ hidden: true
+ data:
+ idPrefix: custom
+ items:
+ - label: Tab 1
+ panel:
+ text: Panel 1 content
+ - label: Tab 2
+ panel:
+ text: Panel 2 content
+ - name: html as text
+ hidden: true
+ data:
+ items:
+ - label: Tab 1
+ panel:
+ text:
Panel 1 content
+ - label: Tab 2
+ panel:
+ text:
Panel 2 content
+ - name: html
+ hidden: true
+ data:
+ items:
+ - label: Tab 1
+ panel:
+ html:
Panel 1 content
+ - label: Tab 2
+ panel:
+ html:
Panel 2 content
+
+
diff --git a/src/govuk/components/tabs/template.njk b/src/govuk/components/tabs/template.njk
new file mode 100644
index 0000000000..f60600215d
--- /dev/null
+++ b/src/govuk/components/tabs/template.njk
@@ -0,0 +1,32 @@
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+ instead. We need this for error messages and hints as well -#}
+{% set idPrefix = params.idPrefix if params.idPrefix -%}
+
+
+
+ {{ params.title | default ("Contents") }}
+
+ {% if(params.items | length) %}
+
+ {% for item in params.items %}
+ {% if item %}
+ {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+
+
+ {{ item.label }}
+
+
+ {% endif %}
+ {% endfor %}
+
+ {% endif %}
+ {% for item in params.items %}
+ {% if item %}
+ {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+
+ {{ item.panel.html | safe if item.panel.html else item.panel.text }}
+
+ {% endif %}
+ {% endfor %}
+
diff --git a/src/govuk/components/tabs/template.test.js b/src/govuk/components/tabs/template.test.js
new file mode 100644
index 0000000000..0eced00803
--- /dev/null
+++ b/src/govuk/components/tabs/template.test.js
@@ -0,0 +1,156 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-env jest */
+
+const axe = require('../../../../lib/axe-helper')
+
+const { render, getExamples } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('tabs')
+
+describe('Tabs', () => {
+ describe('default example', () => {
+ it('passes accessibility tests', async () => {
+ const $ = render('tabs', examples.default)
+
+ const results = await axe($.html())
+ expect(results).toHaveNoViolations()
+ })
+
+ it('renders the first tab selected', () => {
+ const $ = render('tabs', examples.default)
+
+ const $tab = $('[href="#past-day"]').parent()
+ expect($tab.hasClass('govuk-tabs__list-item--selected')).toBeTruthy()
+ })
+
+ it('hides all but the first panel', () => {
+ const $ = render('tabs', examples.default)
+
+ expect($('#past-week').hasClass('govuk-tabs__panel--hidden')).toBeTruthy()
+ expect($('#past-month').hasClass('govuk-tabs__panel--hidden')).toBeTruthy()
+ expect($('#past-year').hasClass('govuk-tabs__panel--hidden')).toBeTruthy()
+ })
+ })
+
+ describe('custom options', () => {
+ it('renders with classes', () => {
+ const $ = render('tabs', examples.classes)
+
+ const $component = $('.govuk-tabs')
+ expect($component.hasClass('app-tabs--custom-modifier')).toBeTruthy()
+ })
+
+ it('renders with id', () => {
+ const $ = render('tabs', examples.id)
+
+ const $component = $('.govuk-tabs')
+ expect($component.attr('id')).toEqual('my-tabs')
+ })
+
+ it('allows custom title text to be passed', () => {
+ const $ = render('tabs', examples.title)
+
+ const content = $('.govuk-tabs__title').html().trim()
+ expect(content).toEqual('Custom title for Contents')
+ })
+
+ it('renders with attributes', () => {
+ const $ = render('tabs', examples.attributes)
+
+ const $component = $('.govuk-tabs')
+ expect($component.attr('data-attribute')).toEqual('my data value')
+ })
+ })
+
+ describe('items', () => {
+ it('doesn\'t render a list if items is not defined', () => {
+ const $ = render('tabs', examples['no item list'])
+
+ const $component = $('.govuk-tabs')
+ expect($component.find('.govuk-tabs__list').length).toEqual(0)
+ })
+
+ it('doesn\'t render a list if items is empty', () => {
+ const $ = render('tabs', examples['empty item list'])
+
+ const $component = $('.govuk-tabs')
+ expect($component.find('.govuk-tabs__list').length).toEqual(0)
+ })
+
+ it('render a matching tab and panel using item id', () => {
+ const $ = render('tabs', examples.default)
+
+ const $component = $('.govuk-tabs')
+
+ const $firstTab = $component.find('.govuk-tabs__list-item:first-child .govuk-tabs__tab')
+ const $firstPanel = $component.find('.govuk-tabs__panel')
+ expect($firstTab.attr('href')).toEqual('#past-day')
+ expect($firstPanel.attr('id')).toEqual('past-day')
+ })
+
+ it('render without falsey values', () => {
+ const $ = render('tabs', examples['with falsey values'])
+
+ const $component = $('.govuk-tabs')
+
+ const $items = $component.find('.govuk-tabs__list-item')
+ expect($items.length).toEqual(2)
+ })
+
+ it('render a matching tab and panel using custom idPrefix', () => {
+ const $ = render('tabs', examples.idPrefix)
+
+ const $component = $('.govuk-tabs')
+
+ const $firstTab = $component.find('.govuk-tabs__list-item:first-child .govuk-tabs__tab')
+ const $firstPanel = $component.find('.govuk-tabs__panel')
+ expect($firstTab.attr('href')).toEqual('#custom-1')
+ expect($firstPanel.attr('id')).toEqual('custom-1')
+ })
+
+ it('render the label', () => {
+ const $ = render('tabs', examples.default)
+
+ const $component = $('.govuk-tabs')
+
+ const $firstTab = $component.find('.govuk-tabs__list-item:first-child .govuk-tabs__tab')
+ expect($firstTab.text().trim()).toEqual('Past day')
+ })
+
+ it('render escaped html when passed to text content', () => {
+ const $ = render('tabs', examples['html as text'])
+
+ const $component = $('.govuk-tabs')
+
+ const $firstPanel = $component.find('.govuk-tabs__panel')
+ expect($firstPanel.html().trim()).toEqual('<p>Panel 1 content</p>')
+ })
+
+ it('render html when passed to content', () => {
+ const $ = render('tabs', examples.html)
+
+ const $component = $('.govuk-tabs')
+
+ const $firstPanel = $component.find('.govuk-tabs__panel')
+ expect($firstPanel.html().trim()).toEqual('
Panel 1 content
')
+ })
+
+ it('render a tab anchor with attributes', () => {
+ const $ = render('tabs', examples['item with attributes'])
+
+ const $tabItemLink = $('.govuk-tabs__tab')
+ expect($tabItemLink.attr('data-attribute')).toEqual('my-attribute')
+ expect($tabItemLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+ })
+
+ it('render a tab panel with attributes', () => {
+ const $ = render('tabs', examples['panel with attributes'])
+
+ const $tabPanelItems = $('.govuk-tabs__panel')
+ expect($tabPanelItems.attr('data-attribute')).toEqual('my-attribute')
+ expect($tabPanelItems.attr('data-attribute-2')).toEqual('my-attribute-2')
+ })
+ })
+})
diff --git a/src/govuk/components/tag/README.md b/src/govuk/components/tag/README.md
new file mode 100644
index 0000000000..41f1434411
--- /dev/null
+++ b/src/govuk/components/tag/README.md
@@ -0,0 +1,15 @@
+# Tag
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/tag/#options-tag-example) for details.
diff --git a/src/govuk/components/tag/_index.scss b/src/govuk/components/tag/_index.scss
new file mode 100644
index 0000000000..f80d83ecca
--- /dev/null
+++ b/src/govuk/components/tag/_index.scss
@@ -0,0 +1,86 @@
+@include govuk-exports("govuk/component/tag") {
+ .govuk-tag {
+
+ display: inline-block;
+
+ // When a user customises their colours often the background is removed,
+ // by adding a outline we ensure that the tag component still keeps it's meaning.
+ // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+ outline: 2px solid transparent;
+ outline-offset: -2px;
+
+ color: govuk-colour("white");
+ background-color: govuk-colour("blue");
+ letter-spacing: 1px;
+
+ text-decoration: none;
+ text-transform: uppercase;
+
+ @if $govuk-use-legacy-font {
+ // Since New Transport sits slightly higher than other common fonts.
+ // We use intentionally uneven padding to make it balanced, this can be
+ // removed using the version of the font that has a more common vertical spacing.
+ @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
+ padding-top: 4px;
+ padding-right: 8px;
+ padding-bottom: 1px;
+ padding-left: 8px;
+ } @else {
+ @include govuk-font($size: 16, $weight: bold, $line-height: 1);
+ padding-top: 5px;
+ padding-right: 8px;
+ padding-bottom: 4px;
+ padding-left: 8px;
+ }
+ }
+
+ // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
+ .govuk-tag--inactive {
+ background-color: govuk-colour("dark-grey", $legacy: "grey-1");
+ }
+
+ .govuk-tag--grey {
+ color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
+ background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+ }
+
+ .govuk-tag--purple {
+ color: govuk-shade(govuk-colour("purple"), 20);
+ background: govuk-tint(govuk-colour("purple"), 80);
+ }
+
+ .govuk-tag--turquoise {
+ color: govuk-shade(govuk-colour("turquoise"), 60);
+ background: govuk-tint(govuk-colour("turquoise"), 70);
+ }
+
+ .govuk-tag--blue {
+ color: govuk-shade(govuk-colour("blue"), 30);
+ background: govuk-tint(govuk-colour("blue"), 80);
+ }
+
+ .govuk-tag--yellow {
+ color: govuk-shade(govuk-colour("yellow"), 65);
+ background: govuk-tint(govuk-colour("yellow"), 75);
+ }
+
+ .govuk-tag--orange {
+ color: govuk-shade(govuk-colour("orange"), 55);
+ background: govuk-tint(govuk-colour("orange"), 70);
+ }
+
+ .govuk-tag--red {
+ color: govuk-shade(govuk-colour("red"), 30);
+ background: govuk-tint(govuk-colour("red"), 80);
+ }
+
+ .govuk-tag--pink {
+ color: govuk-shade(govuk-colour("pink"), 40);
+ background: govuk-tint(govuk-colour("pink"), 80);
+ }
+
+ .govuk-tag--green {
+ color: govuk-shade(govuk-colour("green"), 20);
+ background: govuk-tint(govuk-colour("green"), 80);
+ }
+}
diff --git a/src/govuk/components/tag/_tag.scss b/src/govuk/components/tag/_tag.scss
new file mode 100644
index 0000000000..bfabb03440
--- /dev/null
+++ b/src/govuk/components/tag/_tag.scss
@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";
diff --git a/src/components/tag/macro.njk b/src/govuk/components/tag/macro.njk
similarity index 100%
rename from src/components/tag/macro.njk
rename to src/govuk/components/tag/macro.njk
diff --git a/src/govuk/components/tag/tag.yaml b/src/govuk/components/tag/tag.yaml
new file mode 100644
index 0000000000..3121df940d
--- /dev/null
+++ b/src/govuk/components/tag/tag.yaml
@@ -0,0 +1,79 @@
+params:
+- name: text
+ type: string
+ required: true
+ description: If `html` is set, this is not required. Text to use within the tag component. If `html` is provided, the `text` argument will be ignored.
+- name: html
+ type: string
+ required: true
+ description: If `text` is set, this is not required. HTML to use within the tag component. If `html` is provided, the `text` argument will be ignored.
+- name: classes
+ type: string
+ required: false
+ description: Classes to add to the tag.
+- name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the tag.
+
+examples:
+- name: default
+ data:
+ text: alpha
+- name: inactive
+ data:
+ text: alpha
+ classes: govuk-tag--inactive
+- name: grey
+ data:
+ text: Grey
+ classes: govuk-tag--grey
+- name: blue
+ data:
+ text: Blue
+ classes: govuk-tag--blue
+- name: turquoise
+ data:
+ text: Turquoise
+ classes: govuk-tag--turquoise
+- name: green
+ data:
+ text: Green
+ classes: govuk-tag--green
+- name: purple
+ data:
+ text: Purple
+ classes: govuk-tag--purple
+- name: pink
+ data:
+ text: Pink
+ classes: govuk-tag--pink
+- name: red
+ data:
+ text: Red
+ classes: govuk-tag--red
+- name: orange
+ data:
+ text: Orange
+ classes: govuk-tag--orange
+- name: yellow
+ data:
+ text: Yellow
+ classes: govuk-tag--yellow
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+- name: attributes
+ hidden: true
+ data:
+ text: Tag with attributes
+ attributes:
+ data-test: attribute
+ id: my-tag
+- name: html as text
+ hidden: true
+ data:
+ text:
alpha
+- name: html
+ hidden: true
+ data:
+ html:
alpha
diff --git a/src/components/tag/template.njk b/src/govuk/components/tag/template.njk
similarity index 100%
rename from src/components/tag/template.njk
rename to src/govuk/components/tag/template.njk
diff --git a/src/govuk/components/tag/template.test.js b/src/govuk/components/tag/template.test.js
new file mode 100644
index 0000000000..a62b5416f5
--- /dev/null
+++ b/src/govuk/components/tag/template.test.js
@@ -0,0 +1,69 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-env jest */
+
+const axe = require('../../../../lib/axe-helper')
+
+const { render, getExamples } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('tag')
+
+describe('Tag', () => {
+ describe('default example', () => {
+ it('passes accessibility tests', async () => {
+ const $ = render('tag', examples.default)
+
+ const results = await axe($.html())
+ expect(results).toHaveNoViolations()
+ })
+
+ it('renders the default example with strong element and text', () => {
+ const $ = render('tag', examples.default)
+
+ const $component = $('.govuk-tag')
+ expect($component.get(0).tagName).toEqual('strong')
+ expect($component.text()).toContain('alpha')
+ })
+
+ it('renders classes', () => {
+ const $ = render('tag', examples.inactive)
+
+ const $component = $('.govuk-tag')
+ expect($component.hasClass('govuk-tag--inactive')).toBeTruthy()
+ })
+ })
+
+ describe('custom options', () => {
+ it('renders custom text', () => {
+ const $ = render('tag', examples.grey)
+
+ const $component = $('.govuk-tag')
+ expect($component.html()).toContain('Grey')
+ })
+
+ it('renders attributes', () => {
+ const $ = render('tag', examples.attributes)
+
+ const $component = $('.govuk-tag')
+ expect($component.attr('data-test')).toEqual('attribute')
+ expect($component.attr('id')).toEqual('my-tag')
+ })
+ })
+
+ describe('html', () => {
+ it('renders escaped html when passed to text', () => {
+ const $ = render('tag', examples['html as text'])
+
+ const $component = $('.govuk-tag')
+ expect($component.html()).toContain('<span>alpha</span>')
+ })
+
+ it('renders html', () => {
+ const $ = render('tag', examples.html)
+
+ const $component = $('.govuk-tag')
+ expect($component.html()).toContain('
alpha ')
+ })
+ })
+})
diff --git a/src/govuk/components/textarea/README.md b/src/govuk/components/textarea/README.md
new file mode 100644
index 0000000000..41f2cf05cd
--- /dev/null
+++ b/src/govuk/components/textarea/README.md
@@ -0,0 +1,15 @@
+# Textarea
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/textarea/#options-textarea-example) for details.
diff --git a/src/govuk/components/textarea/__snapshots__/template.test.js.snap b/src/govuk/components/textarea/__snapshots__/template.test.js.snap
new file mode 100644
index 0000000000..0acb285371
--- /dev/null
+++ b/src/govuk/components/textarea/__snapshots__/template.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Textarea when it includes a hint renders with hint 1`] = `
+
+ Don't include personal or financial information, eg your National Insurance number or credit card details.
+
+`;
+
+exports[`Textarea when it includes an error message renders with error message 1`] = `
+
+ You must provide an explanation
+
+`;
+
+exports[`Textarea with dependant components renders with label 1`] = `
+
+ Can you provide more detail?
+
+`;
diff --git a/src/govuk/components/textarea/_index.scss b/src/govuk/components/textarea/_index.scss
new file mode 100644
index 0000000000..52f94a15e6
--- /dev/null
+++ b/src/govuk/components/textarea/_index.scss
@@ -0,0 +1,47 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/textarea") {
+ .govuk-textarea {
+ @include govuk-font($size: 19, $line-height: 1.25);
+
+ box-sizing: border-box; // should this be global?
+ display: block;
+ width: 100%;
+ min-height: 40px;
+ @include govuk-responsive-margin(6, "bottom");
+ padding: govuk-spacing(1);
+
+ resize: vertical;
+
+ border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+ border-radius: 0;
+
+ -webkit-appearance: none;
+
+ &:focus {
+ outline: $govuk-focus-width solid $govuk-focus-colour;
+ // Ensure outline appears outside of the element
+ outline-offset: 0;
+ // Double the border by adding its width again. Use `box-shadow` to do
+ // this instead of changing `border-width` (which changes element size) and
+ // since `outline` is already used for the yellow focus state.
+ box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+ @include govuk-if-ie8 {
+ // IE8 doesn't support `box-shadow` so double the border with
+ // `border-width`.
+ border-width: $govuk-border-width-form-element * 2;
+ }
+ }
+ }
+
+ .govuk-textarea--error {
+ border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+ &:focus {
+ border-color: $govuk-input-border-colour;
+ }
+ }
+}
diff --git a/src/govuk/components/textarea/_textarea.scss b/src/govuk/components/textarea/_textarea.scss
new file mode 100644
index 0000000000..bfabb03440
--- /dev/null
+++ b/src/govuk/components/textarea/_textarea.scss
@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";
diff --git a/src/components/textarea/macro.njk b/src/govuk/components/textarea/macro.njk
similarity index 100%
rename from src/components/textarea/macro.njk
rename to src/govuk/components/textarea/macro.njk
diff --git a/src/govuk/components/textarea/template.njk b/src/govuk/components/textarea/template.njk
new file mode 100644
index 0000000000..84e8e514b2
--- /dev/null
+++ b/src/govuk/components/textarea/template.njk
@@ -0,0 +1,45 @@
+{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../hint/macro.njk" import govukHint %}
+{% from "../label/macro.njk" import govukLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+ aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+
+ {{ govukLabel({
+ html: params.label.html,
+ text: params.label.text,
+ classes: params.label.classes,
+ isPageHeading: params.label.isPageHeading,
+ attributes: params.label.attributes,
+ for: params.id
+ }) | indent(2) | trim }}
+{% if params.hint %}
+ {% set hintId = params.id + '-hint' %}
+ {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+ {{ govukHint({
+ id: hintId,
+ classes: params.hint.classes,
+ attributes: params.hint.attributes,
+ html: params.hint.html,
+ text: params.hint.text
+ }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+ {% set errorId = params.id + '-error' %}
+ {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+ {{ govukErrorMessage({
+ id: errorId,
+ classes: params.errorMessage.classes,
+ attributes: params.errorMessage.attributes,
+ html: params.errorMessage.html,
+ text: params.errorMessage.text,
+ visuallyHiddenText: params.errorMessage.visuallyHiddenText
+ }) | indent(2) | trim }}
+{% endif %}
+
+
diff --git a/src/govuk/components/textarea/template.test.js b/src/govuk/components/textarea/template.test.js
new file mode 100644
index 0000000000..3aeae156e2
--- /dev/null
+++ b/src/govuk/components/textarea/template.test.js
@@ -0,0 +1,276 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-env jest */
+
+const axe = require('../../../../lib/axe-helper')
+
+const { render, getExamples, htmlWithClassName } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('textarea')
+
+const WORD_BOUNDARY = '\\b'
+const WHITESPACE = '\\s'
+
+describe('Textarea', () => {
+ describe('default example', () => {
+ it('passes accessibility tests', async () => {
+ const $ = render('textarea', examples.default)
+
+ const results = await axe($.html())
+ expect(results).toHaveNoViolations()
+ })
+
+ it('renders with id', () => {
+ const $ = render('textarea', examples.default)
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('id')).toEqual('more-detail')
+ })
+
+ it('renders with name', () => {
+ const $ = render('textarea', examples.default)
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('name')).toEqual('more-detail')
+ })
+
+ it('renders with default number of rows', () => {
+ const $ = render('textarea', examples.default)
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('rows')).toEqual('5')
+ })
+
+ it('renders with a form group wrapper', () => {
+ const $ = render('textarea', examples.default)
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.length).toBeTruthy()
+ })
+ })
+
+ describe('custom options', () => {
+ it('renders with classes', () => {
+ const $ = render('textarea', examples.classes)
+
+ const $component = $('.govuk-textarea')
+ expect($component.hasClass('app-textarea--custom-modifier')).toBeTruthy()
+ })
+
+ it('renders with value', () => {
+ const $ = render('textarea', examples['with default value'])
+
+ const $component = $('.govuk-textarea')
+ expect($component.text()).toEqual('221B Baker Street\nLondon\nNW1 6XE\n')
+ })
+
+ it('renders with attributes', () => {
+ const $ = render('textarea', examples.attributes)
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('data-attribute')).toEqual('my data value')
+ })
+
+ it('renders with aria-describedby', () => {
+ const $ = render('textarea', examples['with describedBy'])
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('aria-describedby')).toMatch('some-id')
+ })
+
+ it('renders with rows', () => {
+ const $ = render('textarea', examples['with custom rows'])
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('rows')).toEqual('8')
+ })
+
+ it('renders with a form group wrapper that has extra classes', () => {
+ const $ = render('textarea', examples['with optional form-group classes'])
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.hasClass('extra-class')).toBeTruthy()
+ })
+ })
+
+ describe('when it has the spellcheck attribute', () => {
+ it('renders with spellcheck attribute set to true', () => {
+ const $ = render('textarea', examples['with spellcheck enabled'])
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('spellcheck')).toEqual('true')
+ })
+
+ it('renders with spellcheck attribute set to false', () => {
+ const $ = render('textarea', examples['with spellcheck disabled'])
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('spellcheck')).toEqual('false')
+ })
+
+ it('renders without spellcheck attribute by default', () => {
+ const $ = render('textarea', examples.default)
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('spellcheck')).toBeUndefined()
+ })
+ })
+
+ describe('when it includes a hint', () => {
+ it('renders with hint', () => {
+ const $ = render('textarea', examples['with hint'])
+
+ expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot()
+ })
+
+ it('associates the textarea as "described by" the hint', () => {
+ const $ = render('textarea', examples['with hint'])
+
+ const $textarea = $('.govuk-textarea')
+ const $hint = $('.govuk-hint')
+
+ const hintId = new RegExp(
+ WORD_BOUNDARY + $hint.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($textarea.attr('aria-describedby'))
+ .toMatch(hintId)
+ })
+
+ it('associates the textarea as "described by" the hint and parent fieldset', () => {
+ const $ = render('textarea', examples['with hint and described by'])
+
+ const $textarea = $('.govuk-textarea')
+ const $hint = $('.govuk-hint')
+
+ const hintId = new RegExp(
+ WORD_BOUNDARY + 'some-id' + WHITESPACE + $hint.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($textarea.attr('aria-describedby'))
+ .toMatch(hintId)
+ })
+ })
+
+ describe('when it includes an error message', () => {
+ it('renders with error message', () => {
+ const $ = render('textarea', examples['with error message'])
+
+ expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot()
+ })
+
+ it('associates the textarea as "described by" the error message', () => {
+ const $ = render('textarea', examples['with error message'])
+
+ const $component = $('.govuk-textarea')
+ const $errorMessage = $('.govuk-error-message')
+
+ const errorMessageId = new RegExp(
+ WORD_BOUNDARY + $errorMessage.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($component.attr('aria-describedby'))
+ .toMatch(errorMessageId)
+ })
+
+ it('associates the textarea as "described by" the error message and parent fieldset', () => {
+ const $ = render('textarea', examples['with error message and described by'])
+
+ const $component = $('.govuk-textarea')
+ const $errorMessage = $('.govuk-error-message')
+
+ const errorMessageId = new RegExp(
+ WORD_BOUNDARY + 'some-id' + WHITESPACE + $errorMessage.attr('id') + WORD_BOUNDARY
+ )
+
+ expect($component.attr('aria-describedby'))
+ .toMatch(errorMessageId)
+ })
+
+ it('adds the error class to the textarea', () => {
+ const $ = render('textarea', examples['with error message'])
+
+ const $component = $('.govuk-textarea')
+ expect($component.hasClass('govuk-textarea--error')).toBeTruthy()
+ })
+
+ it('renders with a form group wrapper that has an error state', () => {
+ const $ = render('textarea', examples['with error message'])
+
+ const $formGroup = $('.govuk-form-group')
+ expect($formGroup.hasClass('govuk-form-group--error')).toBeTruthy()
+ })
+ })
+
+ describe('when it includes both a hint and an error message', () => {
+ it('associates the textarea as described by both the hint and the error message', () => {
+ const $ = render('textarea', examples['with hint and error message'])
+
+ const $component = $('.govuk-textarea')
+ const errorMessageId = $('.govuk-error-message').attr('id')
+ const hintId = $('.govuk-hint').attr('id')
+
+ const combinedIds = new RegExp(
+ WORD_BOUNDARY + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+ )
+
+ expect($component.attr('aria-describedby'))
+ .toMatch(combinedIds)
+ })
+
+ it('associates the textarea as described by the hint, error message and parent fieldset', () => {
+ const $ = render('textarea', examples['with hint, error message and described by'])
+
+ const $component = $('.govuk-textarea')
+ const errorMessageId = $('.govuk-error-message').attr('id')
+ const hintId = $('.govuk-hint').attr('id')
+
+ const combinedIds = new RegExp(
+ WORD_BOUNDARY + 'some-id' + WHITESPACE + hintId + WHITESPACE + errorMessageId + WORD_BOUNDARY
+ )
+
+ expect($component.attr('aria-describedby'))
+ .toMatch(combinedIds)
+ })
+ })
+
+ describe('with dependant components', () => {
+ it('have correct nesting order', () => {
+ const $ = render('textarea', examples.default)
+
+ const $component = $('.govuk-form-group > .govuk-textarea')
+ expect($component.length).toBeTruthy()
+ })
+
+ it('renders with label', () => {
+ const $ = render('textarea', examples.default)
+
+ expect(htmlWithClassName($, '.govuk-label')).toMatchSnapshot()
+ })
+
+ it('renders label with "for" attribute reffering the textarea "id"', () => {
+ const $ = render('textarea', examples.default)
+
+ const $label = $('.govuk-label')
+ expect($label.attr('for')).toEqual('more-detail')
+ })
+
+ it('renders label as page heading', () => {
+ const $ = render('textarea', examples['with label as page heading'])
+
+ const $label = $('.govuk-label')
+ expect($('.govuk-label-wrapper')).toBeTruthy()
+ expect($label.attr('for')).toEqual('textarea-with-page-heading')
+ })
+ })
+
+ describe('when it includes an autocomplete attribute', () => {
+ it('renders the autocomplete attribute', () => {
+ const $ = render('textarea', examples['with autocomplete attribute'])
+
+ const $component = $('.govuk-textarea')
+ expect($component.attr('autocomplete')).toEqual('street-address')
+ })
+ })
+})
diff --git a/src/govuk/components/textarea/textarea.yaml b/src/govuk/components/textarea/textarea.yaml
new file mode 100644
index 0000000000..2022c78165
--- /dev/null
+++ b/src/govuk/components/textarea/textarea.yaml
@@ -0,0 +1,190 @@
+params:
+- name: id
+ type: string
+ required: true
+ description: The id of the textarea.
+- name: name
+ type: string
+ required: true
+ description: The name of the textarea, which is submitted with the form data.
+- name: spellcheck
+ type: boolean
+ required: false
+ description: Optional field to enable or disable the spellcheck attribute on the textarea.
+- name: rows
+ type: string
+ required: false
+ description: Optional number of textarea rows (default is 5 rows).
+- name: value
+ type: string
+ required: false
+ description: Optional initial value of the textarea.
+- name: describedBy
+ type: string
+ required: false
+ description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
+- name: label
+ type: object
+ required: true
+ description: Options for the label component.
+ isComponent: true
+- name: hint
+ type: object
+ required: false
+ description: Options for the hint component.
+ isComponent: true
+- name: errorMessage
+ type: object
+ required: false
+ description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+ isComponent: true
+- name: formGroup
+ type: object
+ required: false
+ description: Options for the form-group wrapper
+ params:
+ - name: classes
+ type: string
+ required: false
+ description: Classes to add to the form group (e.g. to show error state for the whole group)
+- name: classes
+ type: string
+ required: false
+ description: Classes to add to the textarea.
+- name: autocomplete
+ type: string
+ required: false
+ description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+- name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the textarea.
+
+examples:
+ - name: default
+ data:
+ name: more-detail
+ id: more-detail
+ label:
+ text: Can you provide more detail?
+ - name: with hint
+ data:
+ name: more-detail
+ id: more-detail
+ label:
+ text: Can you provide more detail?
+ hint:
+ text: Don't include personal or financial information, eg your National Insurance number or credit card details.
+
+ - name: with error message
+ data:
+ name: no-ni-reason
+ id: no-ni-reason
+ label:
+ text: Why can’t you provide a National Insurance number?
+ errorMessage:
+ text: You must provide an explanation
+
+ - name: with default value
+ data:
+ id: full-address
+ name: address
+ value: |
+ 221B Baker Street
+ London
+ NW1 6XE
+ label:
+ text: Full address
+
+ - name: with custom rows
+ data:
+ id: full-address
+ name: address
+ label:
+ text: Full address
+ rows: 8
+
+ - name: with label as page heading
+ data:
+ id: textarea-with-page-heading
+ name: address
+ label:
+ text: Full address
+ isPageHeading: true
+
+ - name: with optional form-group classes
+ data:
+ id: textarea-with-page-heading
+ name: address
+ label:
+ text: Full address
+ formGroup:
+ classes: extra-class
+
+ - name: with autocomplete attribute
+ data:
+ id: textarea-with-autocomplete-attribute
+ name: address
+ label:
+ text: Full address
+ autocomplete: street-address
+
+ - name: with spellcheck enabled
+ data:
+ label:
+ text: Spellcheck is enabled
+ id: textarea-with-spellcheck-enabled
+ name: spellcheck
+ spellcheck: true
+
+ - name: with spellcheck disabled
+ data:
+ label:
+ text: Spellcheck is disabled
+ id: textarea-with-spellcheck-disabled
+ name: spellcheck
+ spellcheck: false
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+ - name: classes
+ hidden: true
+ data:
+ classes: app-textarea--custom-modifier
+ - name: attributes
+ hidden: true
+ data:
+ attributes:
+ data-attribute: my data value
+ - name: with describedBy
+ hidden: true
+ data:
+ describedBy: some-id
+ - name: with hint and described by
+ hidden: true
+ data:
+ describedBy: some-id
+ hint:
+ text: It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
+ - name: with error message and described by
+ hidden: true
+ data:
+ describedBy: some-id
+ id: textarea-with-error
+ errorMessage:
+ text: Error message
+ - name: with hint and error message
+ hidden: true
+ data:
+ errorMessage:
+ text: Error message
+ hint:
+ text: Hint
+ - name: with hint, error message and described by
+ hidden: true
+ data:
+ describedBy: some-id
+ errorMessage:
+ text: Error message
+ hint:
+ text: Hint
+
diff --git a/src/govuk/components/warning-text/README.md b/src/govuk/components/warning-text/README.md
new file mode 100644
index 0000000000..9168535414
--- /dev/null
+++ b/src/govuk/components/warning-text/README.md
@@ -0,0 +1,15 @@
+# Warning text
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the warning text component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/warning-text).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/warning-text/#options-warning-text-example) for details.
diff --git a/src/govuk/components/warning-text/_index.scss b/src/govuk/components/warning-text/_index.scss
new file mode 100644
index 0000000000..12b5d3fafb
--- /dev/null
+++ b/src/govuk/components/warning-text/_index.scss
@@ -0,0 +1,54 @@
+@include govuk-exports("govuk/component/warning-text") {
+ .govuk-warning-text {
+ position: relative;
+ @include govuk-responsive-margin(6, "bottom");
+ padding: govuk-spacing(2) 0;
+ }
+
+ .govuk-warning-text__assistive {
+ @include govuk-visually-hidden;
+ }
+
+ .govuk-warning-text__icon {
+ @include govuk-font($size: false, $weight: bold);
+
+ box-sizing: border-box;
+
+ display: inline-block;
+
+ position: absolute;
+ left: 0;
+
+ min-width: 35px;
+ min-height: 35px;
+ margin-top: -7px;
+
+ @include govuk-media-query($from: tablet) {
+ margin-top: -5px;
+ }
+
+ // When a user customises their colours the background colour will often be removed.
+ // Adding a border to the component keeps it's shape as a circle.
+ border: 3px solid govuk-colour("black");
+ border-radius: 50%;
+
+ color: govuk-colour("white");
+ background: govuk-colour("black");
+
+ font-size: 30px;
+ line-height: 29px;
+
+ text-align: center;
+
+ // Prevent the exclamation mark from being included when the warning text
+ // is copied, for example.
+ user-select: none;
+ }
+
+ .govuk-warning-text__text {
+ @include govuk-font($size: 19, $weight: bold);
+ @include govuk-text-colour;
+ display: block;
+ padding-left: 45px;
+ }
+}
diff --git a/src/govuk/components/warning-text/_warning-text.scss b/src/govuk/components/warning-text/_warning-text.scss
new file mode 100644
index 0000000000..bfabb03440
--- /dev/null
+++ b/src/govuk/components/warning-text/_warning-text.scss
@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";
diff --git a/src/components/warning-text/macro.njk b/src/govuk/components/warning-text/macro.njk
similarity index 100%
rename from src/components/warning-text/macro.njk
rename to src/govuk/components/warning-text/macro.njk
diff --git a/src/components/warning-text/template.njk b/src/govuk/components/warning-text/template.njk
similarity index 100%
rename from src/components/warning-text/template.njk
rename to src/govuk/components/warning-text/template.njk
diff --git a/src/govuk/components/warning-text/template.test.js b/src/govuk/components/warning-text/template.test.js
new file mode 100644
index 0000000000..f8bacaf77e
--- /dev/null
+++ b/src/govuk/components/warning-text/template.test.js
@@ -0,0 +1,89 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-env jest */
+
+const axe = require('../../../../lib/axe-helper')
+
+const { render, getExamples } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('warning-text')
+
+describe('Warning text', () => {
+ describe('default example', () => {
+ it('passes accessibility tests', async () => {
+ const $ = render('warning-text', examples.default)
+
+ const results = await axe($.html())
+ expect(results).toHaveNoViolations()
+ })
+
+ it('renders with text', () => {
+ const $ = render('warning-text', examples.default)
+
+ const $component = $('.govuk-warning-text')
+ expect($component.text()).toContain('You can be fined up to £5,000 if you don’t register.')
+ })
+
+ it('renders with assistive text', () => {
+ const $ = render('warning-text', examples.default)
+
+ const $assistiveText = $('.govuk-warning-text__assistive')
+ expect($assistiveText.text()).toEqual('Warning')
+ })
+
+ it('hides the icon from screen readers using the aria-hidden attribute', () => {
+ const $ = render('warning-text', examples.default)
+
+ const $icon = $('.govuk-warning-text__icon')
+ expect($icon.attr('aria-hidden')).toEqual('true')
+ })
+ })
+
+ describe('custom options', () => {
+ it('renders classes', () => {
+ const $ = render('warning-text', examples.classes)
+
+ const $component = $('.govuk-warning-text')
+ expect($component.hasClass('govuk-warning-text--custom-class')).toBeTruthy()
+ })
+
+ it('renders with text option only', () => {
+ const $ = render('warning-text', examples['text only'])
+
+ const $component = $('.govuk-warning-text')
+ expect($component.html()).toContain('Some custom warning text')
+ })
+
+ it('renders custom assistive text', () => {
+ const $ = render('warning-text', examples['icon fallback text only'])
+
+ const $assistiveText = $('.govuk-warning-text__assistive')
+ expect($assistiveText.html()).toContain('Some custom fallback text')
+ })
+
+ it('renders attributes', () => {
+ const $ = render('warning-text', examples.attributes)
+
+ const $component = $('.govuk-warning-text')
+ expect($component.attr('data-test')).toEqual('attribute')
+ expect($component.attr('id')).toEqual('my-warning-text')
+ })
+ })
+
+ describe('html', () => {
+ it('renders escaped html when passed to text', () => {
+ const $ = render('warning-text', examples['html as text'])
+
+ const $component = $('.govuk-warning-text')
+ expect($component.html()).toContain('<span>Some custom warning text</span>')
+ })
+
+ it('renders html', () => {
+ const $ = render('warning-text', examples.html)
+
+ const $component = $('.govuk-warning-text')
+ expect($component.html()).toContain('
Some custom warning text ')
+ })
+ })
+})
diff --git a/src/govuk/components/warning-text/warning-text.yaml b/src/govuk/components/warning-text/warning-text.yaml
new file mode 100644
index 0000000000..8a6cefe416
--- /dev/null
+++ b/src/govuk/components/warning-text/warning-text.yaml
@@ -0,0 +1,61 @@
+params:
+- name: text
+ type: string
+ required: true
+ description: If `html` is set, this is not required. Text to use within the warning text component. If `html` is provided, the `text` argument will be ignored.
+- name: html
+ type: string
+ required: true
+ description: If `text` is set, this is not required. HTML to use within the warning text component. If `html` is provided, the `text` argument will be ignored.
+- name: iconFallbackText
+ type: string
+ required: true
+ description: The fallback text for the icon.
+- name: classes
+ type: string
+ required: false
+ description: Classes to add to the warning text.
+- name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the warning text.
+
+examples:
+ - name: default
+ data:
+ text: You can be fined up to £5,000 if you don’t register.
+ iconFallbackText: Warning
+ - name: multiple lines
+ data:
+ text: "If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does."
+ iconFallbackText: Warning
+
+# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+ - name: attributes
+ hidden: true
+ data:
+ attributes:
+ id: my-warning-text
+ data-test: attribute
+ - name: classes
+ hidden: true
+ data:
+ text: Warning text
+ iconFallbackText: Warning
+ classes: govuk-warning-text--custom-class
+ - name: html
+ hidden: true
+ data:
+ html:
Some custom warning text
+ - name: html as text
+ hidden: true
+ data:
+ text:
Some custom warning text
+ - name: icon fallback text only
+ hidden: true
+ data:
+ iconFallbackText: Some custom fallback text
+ - name: text only
+ hidden: true
+ data:
+ text: Some custom warning text
diff --git a/src/core/_all.scss b/src/govuk/core/_all.scss
similarity index 100%
rename from src/core/_all.scss
rename to src/govuk/core/_all.scss
diff --git a/src/govuk/core/_global-styles.scss b/src/govuk/core/_global-styles.scss
new file mode 100644
index 0000000000..0131eee1dd
--- /dev/null
+++ b/src/govuk/core/_global-styles.scss
@@ -0,0 +1,25 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+@import "links";
+@import "typography";
+
+@mixin govuk-global-styles {
+ a {
+ @extend %govuk-link;
+ }
+
+ p {
+ @extend %govuk-body-m;
+ }
+}
+
+@include govuk-exports("govuk/core/global-styles") {
+
+ @if $govuk-global-styles == true {
+ @include govuk-global-styles;
+ }
+}
diff --git a/src/govuk/core/_links.scss b/src/govuk/core/_links.scss
new file mode 100644
index 0000000000..b1d31a364e
--- /dev/null
+++ b/src/govuk/core/_links.scss
@@ -0,0 +1,33 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+@include govuk-exports("govuk/core/links") {
+
+ %govuk-link {
+ @include govuk-link-common;
+ @include govuk-link-style-default;
+ @include govuk-link-print-friendly;
+ }
+
+ .govuk-link {
+ @extend %govuk-link;
+ }
+
+ // Variant classes should always be used in conjunction with the .govuk-link
+ // class, so we do not need the common link styles as they will be inherited.
+
+ .govuk-link--muted {
+ @include govuk-link-style-muted;
+ }
+
+ .govuk-link--text-colour {
+ @include govuk-link-style-text;
+ }
+
+ .govuk-link--no-visited-state {
+ @include govuk-link-style-no-visited-state;
+ }
+}
diff --git a/src/govuk/core/_lists.scss b/src/govuk/core/_lists.scss
new file mode 100644
index 0000000000..6412130353
--- /dev/null
+++ b/src/govuk/core/_lists.scss
@@ -0,0 +1,72 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+@include govuk-exports("govuk/core/lists") {
+
+ %govuk-list {
+ @include govuk-font($size: 19);
+ @include govuk-text-colour;
+ margin-top: 0;
+ @include govuk-responsive-margin(4, "bottom");
+ padding-left: 0;
+ list-style-type: none;
+
+ // Add a top margin for nested lists
+ %govuk-list {
+ margin-top: govuk-spacing(2);
+ }
+ }
+
+ %govuk-list > li {
+ // Lists without numbers or bullets should always have extra space between
+ // list items. Lists with numbers or bullets only have this extra space on
+ // tablet and above
+ margin-bottom: govuk-spacing(1);
+ }
+
+ .govuk-list {
+ @extend %govuk-list;
+ }
+
+ %govuk-list--bullet {
+ padding-left: govuk-spacing(4);
+ list-style-type: disc;
+ }
+
+ %govuk-list--number {
+ padding-left: govuk-spacing(4);
+ list-style-type: decimal;
+ }
+
+ %govuk-list--bullet > li,
+ %govuk-list--number > li {
+ margin-bottom: 0;
+
+ @include govuk-media-query($from: tablet) {
+ margin-bottom: govuk-spacing(1);
+ }
+ }
+
+ %govuk-list--spaced > li {
+ margin-bottom: govuk-spacing(2);
+
+ @include govuk-media-query($from: tablet) {
+ margin-bottom: govuk-spacing(3);
+ }
+ }
+
+ .govuk-list--bullet {
+ @extend %govuk-list--bullet;
+ }
+
+ .govuk-list--number {
+ @extend %govuk-list--number;
+ }
+
+ .govuk-list--spaced {
+ @extend %govuk-list--spaced;
+ }
+}
diff --git a/src/govuk/core/_section-break.scss b/src/govuk/core/_section-break.scss
new file mode 100644
index 0000000000..7104e1818e
--- /dev/null
+++ b/src/govuk/core/_section-break.scss
@@ -0,0 +1,62 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+@include govuk-exports("govuk/core/section-break") {
+
+ %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 {
+ @extend %govuk-section-break;
+ }
+
+ // Sizes
+
+ %govuk-section-break--xl {
+ @include govuk-responsive-margin(8, "top");
+ @include govuk-responsive-margin(8, "bottom");
+ }
+
+ .govuk-section-break--xl {
+ @extend %govuk-section-break--xl;
+ }
+
+ %govuk-section-break--l {
+ @include govuk-responsive-margin(6, "top");
+ @include govuk-responsive-margin(6, "bottom");
+ }
+
+ .govuk-section-break--l {
+ @extend %govuk-section-break--l;
+ }
+
+ %govuk-section-break--m {
+ @include govuk-responsive-margin(4, "top");
+ @include govuk-responsive-margin(4, "bottom");
+ }
+
+ .govuk-section-break--m {
+ @extend %govuk-section-break--m;
+ }
+
+ // Visible variant
+
+ %govuk-section-break--visible {
+ border-bottom: 1px solid $govuk-border-colour;
+ }
+
+ .govuk-section-break--visible {
+ @extend %govuk-section-break--visible;
+ }
+}
diff --git a/src/govuk/core/_template.scss b/src/govuk/core/_template.scss
new file mode 100644
index 0000000000..1c003a8f22
--- /dev/null
+++ b/src/govuk/core/_template.scss
@@ -0,0 +1,34 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+@include govuk-exports("govuk/core/template") {
+
+ // Applied to the element
+ .govuk-template {
+ // Set the overall page background colour to the same colour as used by the
+ // footer to give the illusion of a long footer.
+ background-color: $govuk-canvas-background-colour;
+
+ // Prevent automatic text sizing, as we already cater for small devices and
+ // would like the browser to stay on 100% text zoom by default.
+ text-size-adjust: 100%;
+
+ // Force the scrollbar to always display in IE, to prevent horizontal page
+ // jumps as content height changes (e.g. autocomplete results open).
+ @include govuk-media-query($media-type: screen) {
+ overflow-y: scroll;
+ }
+ }
+
+ // Applied to the element
+ .govuk-template__body {
+ // The default margins set by user-agents are not required since we have our
+ // own containers.
+ margin: 0;
+ // Set the overall body of the page back to the typical background colour.
+ background-color: $govuk-body-background-colour;
+ }
+}
diff --git a/src/govuk/core/_typography.scss b/src/govuk/core/_typography.scss
new file mode 100644
index 0000000000..ad56961b9f
--- /dev/null
+++ b/src/govuk/core/_typography.scss
@@ -0,0 +1,192 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+@include govuk-exports("govuk/core/typography") {
+
+ // Headings
+
+ %govuk-heading-xl {
+ @include govuk-text-colour;
+ @include govuk-font($size: 48, $weight: bold);
+
+ display: block;
+
+ margin-top: 0;
+ @include govuk-responsive-margin(8, "bottom");
+ }
+
+ .govuk-heading-xl {
+ @extend %govuk-heading-xl;
+ }
+
+ %govuk-heading-l {
+ @include govuk-text-colour;
+ @include govuk-font($size: 36, $weight: bold);
+
+ display: block;
+
+ margin-top: 0;
+ @include govuk-responsive-margin(6, "bottom");
+ }
+
+ .govuk-heading-l {
+ @extend %govuk-heading-l;
+ }
+
+ %govuk-heading-m {
+ @include govuk-text-colour;
+ @include govuk-font($size: 24, $weight: bold);
+
+ display: block;
+
+ margin-top: 0;
+ @include govuk-responsive-margin(4, "bottom");
+ }
+
+ .govuk-heading-m {
+ @extend %govuk-heading-m;
+ }
+
+ %govuk-heading-s {
+ @include govuk-text-colour;
+ @include govuk-font($size: 19, $weight: bold);
+
+ display: block;
+
+ margin-top: 0;
+ @include govuk-responsive-margin(4, "bottom");
+ }
+
+ .govuk-heading-s {
+ @extend %govuk-heading-s;
+ }
+
+ // Captions to be used inside headings
+
+ .govuk-caption-xl {
+ @include govuk-font($size: 27);
+
+ display: block;
+
+ margin-bottom: govuk-spacing(1);
+
+ color: $govuk-secondary-text-colour;
+ }
+
+ .govuk-caption-l {
+ @include govuk-font($size: 24);
+
+ display: block;
+
+ margin-bottom: govuk-spacing(1);
+ color: $govuk-secondary-text-colour;
+
+ @include govuk-media-query($from: tablet) {
+ margin-bottom: 0;
+ }
+ }
+
+ .govuk-caption-m {
+ @include govuk-font($size: 19);
+
+ display: block;
+
+ color: $govuk-secondary-text-colour;
+ }
+
+ // Body (paragraphs)
+
+ %govuk-body-l {
+ @include govuk-text-colour;
+ @include govuk-font($size: 24);
+
+ margin-top: 0;
+ @include govuk-responsive-margin(6, "bottom");
+ }
+
+ .govuk-body-l {
+ @extend %govuk-body-l;
+ }
+
+ %govuk-body-m {
+ @include govuk-text-colour;
+ @include govuk-font($size: 19);
+
+ margin-top: 0;
+ @include govuk-responsive-margin(4, "bottom");
+ }
+
+ .govuk-body-m {
+ @extend %govuk-body-m;
+ }
+
+ %govuk-body-s {
+ @include govuk-text-colour;
+ @include govuk-font($size: 16);
+
+ margin-top: 0;
+ @include govuk-responsive-margin(4, "bottom");
+ }
+
+ .govuk-body-s {
+ @extend %govuk-body-s;
+ }
+
+ %govuk-body-xs {
+ @include govuk-text-colour;
+ @include govuk-font($size: 14);
+
+ margin-top: 0;
+ @include govuk-responsive-margin(4, "bottom");
+ }
+
+ .govuk-body-xs {
+ @extend %govuk-body-xs;
+ }
+
+ // Usage aliases
+
+ // Using extend to alias means we also inherit any contextual adjustments that
+ // refer to the 'original' class name
+
+ .govuk-body-lead {
+ @extend %govuk-body-l;
+ }
+
+ .govuk-body {
+ @extend %govuk-body-m;
+ }
+
+ // Contextual adjustments
+ // Add top padding to headings that appear directly after paragraphs.
+
+ %govuk-body-l + %govuk-heading-l {
+ padding-top: govuk-spacing(1);
+
+ @include govuk-media-query($from: tablet) {
+ padding-top: govuk-spacing(2);
+ }
+ }
+
+ %govuk-body-m + %govuk-heading-l,
+ %govuk-body-s + %govuk-heading-l,
+ %govuk-list + %govuk-heading-l {
+ @include govuk-responsive-padding(4, "top");
+ }
+
+ %govuk-body-m + %govuk-heading-m,
+ %govuk-body-s + %govuk-heading-m,
+ %govuk-list + %govuk-heading-m,
+ %govuk-body-m + %govuk-heading-s,
+ %govuk-body-s + %govuk-heading-s,
+ %govuk-list + %govuk-heading-s {
+ padding-top: govuk-spacing(1);
+
+ @include govuk-media-query($from: tablet) {
+ padding-top: govuk-spacing(2);
+ }
+ }
+}
diff --git a/src/govuk/core/core.test.js b/src/govuk/core/core.test.js
new file mode 100644
index 0000000000..351cc370fa
--- /dev/null
+++ b/src/govuk/core/core.test.js
@@ -0,0 +1,31 @@
+/* eslint-env jest */
+
+const sass = require('node-sass')
+
+const glob = require('glob')
+const { renderSass } = require('../../../lib/jest-helpers')
+const configPaths = require('../../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/core/**/*.scss`)
+
+it.each(sassFiles)('%s renders with a deprecation warning', (file) => {
+ // 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(sass.NULL)
+
+ return renderSass({
+ file: file,
+ functions: {
+ '@warn': mockWarnFunction
+ }
+ }).then(() => {
+ // Expect our mocked @warn function to have been called once with a single
+ // argument, which should be the deprecation notice
+ return expect(mockWarnFunction.mock.calls[0][0].getValue())
+ .toEqual(
+ 'Importing items from the core layer without first importing `base` ' +
+ 'is deprecated, and will no longer work as of GOV.UK Frontend v4.0.'
+ )
+ })
+})
diff --git a/src/govuk/helpers/_all.scss b/src/govuk/helpers/_all.scss
new file mode 100644
index 0000000000..668065bb4a
--- /dev/null
+++ b/src/govuk/helpers/_all.scss
@@ -0,0 +1,14 @@
+@import "clearfix";
+@import "colour";
+@import "device-pixels";
+@import "focused";
+//@import "font-faces";
+@import "grid";
+@import "links";
+@import "media-queries";
+@import "shape-arrow";
+@import "spacing";
+@import "typography";
+@import "visually-hidden";
+
+@import "_sdn/all";
diff --git a/src/govuk/helpers/_clearfix.scss b/src/govuk/helpers/_clearfix.scss
new file mode 100644
index 0000000000..a9d2302c00
--- /dev/null
+++ b/src/govuk/helpers/_clearfix.scss
@@ -0,0 +1,15 @@
+////
+/// @group helpers/layout
+////
+
+/// Clear floated content within a container using a pseudo element
+///
+/// @access public
+
+@mixin govuk-clearfix {
+ &:after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+}
diff --git a/src/govuk/helpers/_colour.scss b/src/govuk/helpers/_colour.scss
new file mode 100644
index 0000000000..3535befa7e
--- /dev/null
+++ b/src/govuk/helpers/_colour.scss
@@ -0,0 +1,95 @@
+@import "../settings/compatibility";
+@import "../settings/colours-palette";
+@import "../settings/colours-organisations";
+
+////
+/// @group helpers/colour
+////
+
+/// Get colour
+///
+/// @param {String} $colour - Name of colour from the colour palette
+/// (`$govuk-colours`)
+/// @param {String} $legacy - Either the name of colour from the legacy palette
+/// or a colour literal, to return instead when in 'legacy mode' - matching
+/// the palette from GOV.UK Template, Elements or Frontend Toolkit
+/// @return {Colour} Representation of named colour
+///
+/// @example scss - Using legacy colours from the palette
+/// .foo {
+/// background-colour: govuk-colour("mid-grey", $legacy: "grey-2");
+/// }
+///
+/// @example scss - Using legacy colour literals
+/// .foo {
+/// background-colour: govuk-colour("green", $legacy: #BADA55);
+/// }
+///
+/// @throw if `$colour` is not a colour from the colour palette
+/// @access public
+
+@function govuk-colour($colour, $legacy: false) {
+ @if ($govuk-use-legacy-palette and $legacy) {
+ @if (type-of($legacy) == "color") {
+ @return $legacy;
+ }
+ $colour: $legacy;
+ }
+
+ $colour: quote($colour);
+
+ @if not map-has-key($govuk-colours, $colour) {
+ @error "Unknown colour `#{$colour}`";
+ }
+
+ @return map-get($govuk-colours, $colour);
+}
+
+/// Get the colour for a government organisation
+///
+/// @param {String} $organisation - Organisation name, lowercase, hyphenated
+/// @param {Boolean} $websafe [true] - By default a 'websafe' version of the
+/// colour will be returned which meets contrast requirements . If you want to
+/// use the non-websafe version you can set this to `false` but your should
+/// ensure that you still meets contrast requirements for accessibility - for
+/// example, do not use the non-websafe version for text.
+///
+/// @return {Colour} Representation of colour for organisation
+/// @throw if `$organisation` is not a known organisation
+/// @access public
+
+@function govuk-organisation-colour($organisation, $websafe: true) {
+ @if not map-has-key($govuk-colours-organisations, $organisation) {
+ @error "Unknown organisation `#{$organisation}`";
+ }
+
+ $org-colour: map-get($govuk-colours-organisations, $organisation);
+
+ @if ($websafe and map-has-key($org-colour, colour-websafe)) {
+ @return map-get($org-colour, colour-websafe);
+ } @else {
+ @return map-get($org-colour, colour);
+ }
+}
+
+/// Make a colour darker by mixing it with black
+///
+/// @param {Colour} $colour - colour to shade
+/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @return {Colour}
+/// @access public
+
+@function govuk-shade($colour, $percentage) {
+ @return mix(#000000, $colour, $percentage);
+}
+
+/// Make a colour lighter by mixing it with white
+///
+/// @param {Colour} $colour - colour to tint
+/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @return {Colour}
+/// @access public
+
+@function govuk-tint($colour, $percentage) {
+ @return mix(govuk-colour("white"), $colour, $percentage);
+}
diff --git a/src/govuk/helpers/_device-pixels.scss b/src/govuk/helpers/_device-pixels.scss
new file mode 100644
index 0000000000..ae83f50646
--- /dev/null
+++ b/src/govuk/helpers/_device-pixels.scss
@@ -0,0 +1,38 @@
+////
+/// @group helpers
+////
+
+/// Media query for retina images (device-pixel-ratio)
+///
+/// @param {Number} $ratio [2] - Device pixel ratio
+/// @content Passed content will be outputted within the media query
+///
+/// @example scss - Providing a @2x image for screens that support it
+/// background-image: govuk-image-url("my-image.png");
+///
+/// @include govuk-device-pixel-ratio {
+/// background-image: govuk-image-url("my-image-2x.png");
+/// }
+///
+/// @example scss - Using a custom ratio
+/// background-image: govuk-image-url("my-image.png");
+///
+/// @include govuk-device-pixel-ratio {
+/// background-image: govuk-image-url("my-image-2x.png");
+/// }
+///
+/// @include govuk-device-pixel-ratio(3) {
+/// background-image: govuk-image-url("my-image-3x.png");
+/// }
+///
+/// @access public
+
+@mixin govuk-device-pixel-ratio($ratio: 2) {
+ // stylelint-disable indentation
+ @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+ only screen and (-o-min-device-pixel-ratio: #{($ratio * 10)} / 10),
+ only screen and (min-resolution: #{($ratio * 96)}dpi),
+ only screen and (min-resolution: #{$ratio}dppx) {
+ @content;
+ }
+}
diff --git a/src/govuk/helpers/_focused.scss b/src/govuk/helpers/_focused.scss
new file mode 100644
index 0000000000..979acbe9e4
--- /dev/null
+++ b/src/govuk/helpers/_focused.scss
@@ -0,0 +1,28 @@
+////
+/// @group helpers/accessibility
+////
+
+/// Focused text
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Used for interactive text-based elements.
+///
+/// @access public
+
+@mixin govuk-focused-text {
+ // When colours are overridden, for example when users have a dark mode,
+ // backgrounds and box-shadows disappear, so we need to ensure there's a
+ // transparent outline which will be set to a visible colour.
+
+ // Since Internet Explorer 8 does not support box-shadow, we want to force the
+ // user-agent outlines
+ @include govuk-not-ie8 {
+ outline: $govuk-focus-width solid transparent;
+ }
+ color: $govuk-focus-text-colour;
+ background-color: $govuk-focus-colour;
+ box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+ // When link is focussed, hide the default underline since the
+ // box shadow adds the "underline"
+ text-decoration: none;
+}
diff --git a/src/govuk/helpers/_font-faces.scss b/src/govuk/helpers/_font-faces.scss
new file mode 100644
index 0000000000..e2a379361c
--- /dev/null
+++ b/src/govuk/helpers/_font-faces.scss
@@ -0,0 +1,41 @@
+////
+/// @group helpers
+////
+
+@import "../tools/exports";
+
+/// Font Face - GDS Transport
+///
+/// Outputs the font-face declaration for GDS Transport at the root of the CSS document
+/// the first time it is called.
+///
+/// @access private
+
+@mixin _govuk-font-face-gds-transport {
+ @include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
+ @include govuk-exports("govuk/helpers/font-faces") {
+ @at-root {
+ /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud */
+ @font-face {
+ font-family: "GDS Transport";
+ font-style: normal;
+ font-weight: normal;
+ src:
+ govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
+ govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
+ font-display: fallback;
+ }
+
+ @font-face {
+ font-family: "GDS Transport";
+ font-style: normal;
+ font-weight: bold;
+ src:
+ govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
+ govuk-font-url("bold-affa96571d-v2.woff") format("woff");
+ font-display: fallback;
+ }
+ }
+ }
+ }
+}
diff --git a/src/govuk/helpers/_grid.scss b/src/govuk/helpers/_grid.scss
new file mode 100644
index 0000000000..f900861bdd
--- /dev/null
+++ b/src/govuk/helpers/_grid.scss
@@ -0,0 +1,61 @@
+////
+/// @group helpers/layout
+////
+
+/// Grid width percentage
+///
+/// @param {String} $key - Name of grid width (e.g. two-thirds)
+/// @return {Number} Percentage width
+/// @throw if `$key` is not a valid grid width
+/// @access public
+
+@function govuk-grid-width($key) {
+ @if map-has-key($govuk-grid-widths, $key) {
+ @return map-get($govuk-grid-widths, $key);
+ }
+
+ @error "Unknown grid width `#{$key}`";
+}
+
+/// Generate grid column styles
+///
+/// Creates a grid column with standard gutter between the columns.
+///
+/// Grid widths are defined in the `$govuk-grid-widths` map.
+///
+/// By default the column width changes from 100% to specified width at the
+/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
+///
+/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
+/// @param {String} $float [left] left | right
+/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+///
+/// @example scss - Default
+/// .govuk-grid-column-two-thirds {
+/// @include govuk-grid-column(two-thirds)
+/// }
+///
+/// @example scss - Customising the breakpoint where width percentage is applied
+/// .govuk-grid-column-one-half-at-desktop {
+/// @include govuk-grid-column(one-half, $at: desktop);
+/// }
+///
+/// @example scss - Customising the float direction
+/// .govuk-grid-column-one-half-right {
+/// @include govuk-grid-column(two-thirds, $float: right);
+/// }
+///
+/// @access public
+
+@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {
+ box-sizing: border-box;
+ @if $at != desktop {
+ width: 100%;
+ }
+ padding: 0 $govuk-gutter-half;
+ @include govuk-media-query($from: $at) {
+ width: govuk-grid-width($width);
+ float: $float;
+ }
+}
diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss
new file mode 100644
index 0000000000..b85ce6c4a2
--- /dev/null
+++ b/src/govuk/helpers/_links.scss
@@ -0,0 +1,212 @@
+////
+/// @group helpers/links
+////
+
+/// Common link mixin
+///
+/// Provides the typography and focus state, regardless of link style.
+///
+/// @access public
+
+@mixin govuk-link-common {
+ @include govuk-typography-common;
+
+ &:focus {
+ @include govuk-focused-text;
+ }
+}
+
+/// Default link style mixin
+///
+/// Provides the default unvisited, visited, hover and active states for links.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+/// .govuk-component__link {
+/// @include govuk-link-common;
+/// @include govuk-link-style-default;
+/// }
+///
+/// @access public
+
+@mixin govuk-link-style-default {
+ &:link {
+ color: $govuk-link-colour;
+ }
+
+ &:visited {
+ color: $govuk-link-visited-colour;
+ }
+
+ &:hover {
+ color: $govuk-link-hover-colour;
+ }
+
+ &:active {
+ color: $govuk-link-active-colour;
+ }
+
+ // When focussed, the text colour needs to be darker to ensure that colour
+ // contrast is still acceptable
+ &: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 style link mixin
+///
+/// Used for secondary links on a page - the link will appear in muted colours
+/// regardless of visited state.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+/// .govuk-component__link {
+/// @include govuk-link-common;
+/// @include govuk-link-style-muted;
+/// }
+///
+/// @access public
+
+@mixin govuk-link-style-muted {
+ &:link,
+ &:visited,
+ &:hover,
+ &:active {
+ color: $govuk-secondary-text-colour;
+ }
+
+ // When focussed, the text colour needs to be darker to ensure that colour
+ // contrast is still acceptable
+ &: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 style link mixin
+///
+/// Overrides the colour of links to match the text colour. Generally used by
+/// navigation components, such as breadcrumbs or the back link.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+/// .govuk-component__link {
+/// @include govuk-link-common;
+/// @include govuk-link-style-text;
+/// }
+///
+/// @access public
+
+@mixin govuk-link-style-text {
+ // Override link colour to use text colour
+ &:link,
+ &:visited,
+ &:hover,
+ &:active,
+ &: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;
+ }
+ }
+}
+
+/// No visited state link mixin
+///
+/// Used in cases where it is not helpful to distinguish between visited and
+/// non-visited links.
+///
+/// For example, navigation links to pages with dynamic content like admin
+/// dashboards. The content on the page is changing all the time, so the fact
+/// that you’ve visited it before is not important.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+/// .govuk-component__link {
+/// @include govuk-link-common;
+/// @include govuk-link-style-no-visited-state;
+/// }
+///
+/// @access public
+
+@mixin govuk-link-style-no-visited-state {
+ &:link {
+ color: $govuk-link-colour;
+ }
+
+ &:visited {
+ color: $govuk-link-colour;
+ }
+
+ &:hover {
+ color: $govuk-link-hover-colour;
+ }
+
+ &:active {
+ color: $govuk-link-active-colour;
+ }
+
+ // When focussed, the text colour needs to be darker to ensure that colour
+ // contrast is still acceptable
+ &:focus {
+ color: $govuk-focus-text-colour;
+ }
+}
+
+/// Print friendly link mixin
+///
+/// When printing, append the the destination URL to the link text, as long
+/// as the URL starts with either `/`, `http://` or `https://`.
+///
+/// @access public
+
+@mixin govuk-link-print-friendly {
+ @include govuk-media-query($media-type: print) {
+ &[href^="/"],
+ &[href^="http://"],
+ &[href^="https://"] {
+ &:after {
+ content: " (" attr(href) ")";
+ font-size: 90%;
+
+ // Because the URLs may be very long, ensure that they may be broken
+ // at arbitrary points if there are no otherwise acceptable break
+ // points in the line
+ word-wrap: break-word;
+ }
+ }
+ }
+}
diff --git a/src/govuk/helpers/_media-queries.scss b/src/govuk/helpers/_media-queries.scss
new file mode 100644
index 0000000000..f78c119ed3
--- /dev/null
+++ b/src/govuk/helpers/_media-queries.scss
@@ -0,0 +1,91 @@
+////
+/// @group helpers/layout
+////
+
+// =========================================================
+// Wrangle sass-mq config...
+// =========================================================
+
+// Pass our breakpoints and static breakpoint definitions through to sass-mq.
+$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
+$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop);
+
+$mq-show-breakpoints: ();
+
+@if (variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints) {
+ $mq-show-breakpoints: map-keys($govuk-breakpoints);
+}
+
+// When building a stylesheet for IE8, set $mq-responsive to false in order to
+// 'rasterize' any media queries.
+
+$mq-responsive: true;
+@if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) {
+ $mq-responsive: false;
+}
+
+// This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
+// the current breakpoint from being included multiple times.
+//
+// We can't use the `exports` mixin for this because import directives cannot be
+// used within control directives 😠
+$sass-mq-already-included: false !default;
+
+@if $sass-mq-already-included {
+ $mq-show-breakpoints: ();
+}
+
+@import "../vendor/sass-mq";
+
+$sass-mq-already-included: true;
+
+// =========================================================
+// Helpers
+// =========================================================
+
+/// Media Query
+///
+/// This is a currently a wrapper for sass-mq - abstracted so that we can
+/// replace it in the future if we so choose.
+///
+/// @param {String | Boolean} $from [false] - One of $govuk-breakpoints
+/// @param {String | Boolean} $until [false] - One of $govuk-breakpoints
+/// @param {String | Boolean} $and [false] - Additional media query parameters
+/// @param {String} $media-type [all] - Media type: screen, print…
+///
+/// @ignore Undocumented mq API, for advanced use only:
+/// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
+/// @ignore @param {String} $static-breakpoint [$govuk-ie8-breakpoint]
+/// @ignore @param {Boolean} $responsive [$govuk-is-ie8]
+///
+/// @content styling rules, wrapped into a @media query when $responsive is true
+///
+/// @example scss
+/// .element {
+/// @include govuk-media-query($from: mobile) {
+/// color: red;
+/// }
+/// @include govuk-media-query($until: tablet) {
+/// color: blue;
+/// }
+/// @include govuk-media-query(mobile, tablet) {
+/// color: green;
+/// }
+/// @include govuk-media-query($from: tablet, $and: '(orientation: landscape)') {
+/// color: teal;
+/// }
+/// @include govuk-media-query(950px) {
+/// color: hotpink;
+/// }
+/// @include govuk-media-query(tablet, $media-type: screen) {
+/// color: hotpink;
+/// }
+/// }
+///
+/// @access public
+
+@mixin govuk-media-query($args...) {
+ @include mq($args...) {
+ @content;
+ }
+}
diff --git a/src/govuk/helpers/_shape-arrow.scss b/src/govuk/helpers/_shape-arrow.scss
new file mode 100644
index 0000000000..935d19ce8b
--- /dev/null
+++ b/src/govuk/helpers/_shape-arrow.scss
@@ -0,0 +1,76 @@
+////
+/// @group helpers/shapes
+////
+
+/// Calculate the height of an equilateral triangle
+///
+/// Multiplying half the length of the base of an equilateral triangle by the
+/// square root of three gives us its height. We use 1.732 as an approximation.
+///
+/// @param {Number} $base - Length of the base of the triangle
+/// @return {Number} Calculated height of the triangle
+/// @access private
+
+@function _govuk-equilateral-height($base) {
+ $square-root-of-three: 1.732;
+
+ @return ($base / 2) * $square-root-of-three;
+}
+
+/// Arrow mixin
+///
+/// Generate Arrows (triangles) by using a mix of transparent (1) and coloured
+/// borders. The coloured borders inherit the text colour of the element (2).
+///
+/// Ensure the arrow is rendered correctly if browser colours are overridden by
+/// providing a clip path (3). Without this the transparent borders are
+/// overridden to become visible which results in a square.
+///
+/// We need both because older browsers do not support clip-path.
+///
+/// @param {String} $direction - Direction for arrow: up, right, down, left.
+/// @param {Number} $base - Length of the triangle 'base' side
+/// @param {Number} $height [null] - Height of triangle. Omit for equilateral.
+/// @param {String} $display [block] - CSS display property of the arrow
+///
+/// @access public
+
+@mixin govuk-shape-arrow($direction, $base, $height: null, $display: block) {
+ display: $display;
+
+ width: 0;
+ height: 0;
+
+ border-style: solid;
+ border-color: transparent; // 1
+
+ $perpendicular: $base / 2;
+
+ @if ($height == null) {
+ $height: _govuk-equilateral-height($base);
+ }
+
+ @if $direction == "up" {
+ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
+
+ border-width: 0 $perpendicular $height $perpendicular;
+ border-bottom-color: inherit; // 2
+ } @else if $direction == "right" {
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3
+
+ border-width: $perpendicular 0 $perpendicular $height;
+ border-left-color: inherit; // 2
+ } @else if $direction == "down" {
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3
+
+ border-width: $height $perpendicular 0 $perpendicular;
+ border-top-color: inherit; // 2
+ } @else if $direction == "left" {
+ clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3
+
+ border-width: $perpendicular $height $perpendicular 0;
+ border-right-color: inherit; // 2
+ } @else {
+ @error "Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`";
+ }
+}
diff --git a/src/govuk/helpers/_spacing.scss b/src/govuk/helpers/_spacing.scss
new file mode 100644
index 0000000000..293651e9da
--- /dev/null
+++ b/src/govuk/helpers/_spacing.scss
@@ -0,0 +1,153 @@
+////
+/// @group helpers/spacing
+////
+
+// stylelint-disable indentation
+
+/// Single point spacing
+///
+/// Returns measurement corresponding to the spacing point requested.
+///
+/// @param {Number} $spacing-point - Point on the spacing scale (set in `settings/_spacing.sccs`)
+///
+/// @returns {String} Spacing Measurement eg. 10px
+///
+/// @example scss
+/// .element {
+/// padding: govuk-spacing(5);
+/// top: govuk-spacing(2) !important; // if `!important` is required
+/// }
+/// @access public
+
+@function govuk-spacing($spacing-point) {
+
+ $actual-input-type: type-of($spacing-point);
+ @if $actual-input-type != "number" {
+ @error "Expected a number (integer), but got a "
+ + "#{$actual-input-type}.";
+ }
+
+ @if not map-has-key($govuk-spacing-points, $spacing-point) {
+ @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
+ }
+
+ @return map-get($govuk-spacing-points, $spacing-point);
+}
+
+/// Responsive spacing
+///
+/// Adds responsive spacing (either padding or margin, depending on `$property`)
+/// by fetching a 'spacing map' from the responsive spacing scale, which defines
+/// different spacing values at different breakpoints.
+///
+/// To generate responsive spacing, use 'govuk-responsive-margin' or
+/// 'govuk-responsive-padding' mixins
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+/// scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+/// @param {String} $direction [all] - Direction to add spacing to
+/// (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing by
+///
+/// @access private
+
+@mixin _govuk-responsive-spacing($responsive-spacing-point, $property, $direction: "all", $important: false, $adjustment: false) {
+
+ $actual-input-type: type-of($responsive-spacing-point);
+ @if $actual-input-type != "number" {
+ @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
+ }
+
+ @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
+ @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
+ + "responsive spacing scale in `_settings/spacing.scss`.";
+ }
+
+ // Make sure that the return value from `_settings/spacing.scss` is a map.
+ $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);
+ $actual-map-type: type-of($scale-map);
+ @if $actual-map-type != "map" {
+ @error "Expected a number (integer), but got a "
+ + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
+ }
+
+ // Loop through each breakpoint in the map
+ @each $breakpoint, $breakpoint-value in $scale-map {
+
+ @if ($adjustment) {
+ $breakpoint-value: $breakpoint-value + $adjustment;
+ }
+
+ // The 'null' breakpoint is for mobile.
+ @if $breakpoint == null {
+
+ @if $direction == all {
+ #{$property}: $breakpoint-value if($important, !important, null);
+ } @else {
+ #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+ }
+ } @else {
+ @include govuk-media-query($from: $breakpoint) {
+ @if $direction == all {
+ #{$property}: $breakpoint-value if($important, !important, null);
+ } @else {
+ #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+ }
+ }
+ }
+ }
+}
+
+/// Responsive margin
+///
+/// Adds responsive margin by fetching a 'spacing map' from the responsive
+/// spacing scale, which defines different spacing values at different
+/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
+///
+/// @see {mixin} _govuk-responsive-spacing
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+/// scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $direction [all] - Direction to add spacing to
+/// (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing by
+///
+/// @example scss
+/// .element {
+/// @include govuk-responsive-margin(6, "left", $adjustment: 1px);
+/// }
+///
+/// @access public
+
+@mixin govuk-responsive-margin($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
+ @include _govuk-responsive-spacing($responsive-spacing-point, "margin", $direction, $important, $adjustment);
+}
+
+/// Responsive padding
+///
+/// Adds responsive padding by fetching a 'spacing map' from the responsive
+/// spacing scale, which defines different spacing values at different
+/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
+///
+/// @see {mixin} _govuk-responsive-spacing
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+/// scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $direction [all] - Direction to add spacing to
+/// (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing
+///
+/// @example scss
+/// .element {
+/// @include govuk-responsive-padding(6, "left", $adjustment: 1px);
+/// }
+///
+/// @access public
+
+@mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
+ @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
+}
diff --git a/src/govuk/helpers/_typography.scss b/src/govuk/helpers/_typography.scss
new file mode 100644
index 0000000000..6ba1ba73c2
--- /dev/null
+++ b/src/govuk/helpers/_typography.scss
@@ -0,0 +1,205 @@
+////
+/// @group helpers/typography
+////
+
+@import "../tools/px-to-rem";
+
+/// 'Common typography' helper
+///
+/// Sets the font family and associated properties, such as font smoothing. Also
+/// overrides the font for print.
+///
+/// @param {List} $font-family [$govuk-font-family] Font family to use
+/// @access public
+
+@mixin govuk-typography-common($font-family: $govuk-font-family) {
+ font-family: $font-family;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ // If the user is using the default GDS Transport font we need to include
+ // the font-face declarations.
+ //
+ // We do not need to include the GDS Transport font-face declarations if
+ // alphagov/govuk_template is being used since nta will already be included by
+ // default.
+ @if ($govuk-include-default-font-face) {
+ @include _govuk-font-face-gds-transport;
+ }
+
+ @include govuk-media-query($media-type: print) {
+ font-family: $govuk-font-family-print;
+ }
+}
+
+/// Text colour helper
+///
+/// Sets the text colour, including a suitable override for print.
+///
+/// @access public
+
+@mixin govuk-text-colour {
+ color: $govuk-text-colour;
+
+ @include govuk-media-query($media-type: print) {
+ color: $govuk-print-text-colour;
+ }
+}
+
+/// Regular font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+/// `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-regular($important: false) {
+ font-weight: $govuk-font-weight-regular if($important, !important, null);
+}
+
+/// Bold font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+/// `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-bold($important: false) {
+ font-weight: $govuk-font-weight-bold if($important, !important, null);
+}
+
+/// Convert line-heights specified in pixels into a relative value, unless
+/// they are already unit-less (and thus already treated as relative values)
+/// or the units do not match the units used for the font size.
+///
+/// @param {Number} $line-height Line height
+/// @param {Number} $font-size Font size
+/// @return {Number} The line height as either a relative value or unmodified
+///
+/// @access private
+
+@function _govuk-line-height($line-height, $font-size) {
+ @if not unitless($line-height) and unit($line-height) == unit($font-size) {
+ $line-height: $line-height / $font-size;
+ }
+
+ @return $line-height;
+}
+
+/// Responsive typography helper
+///
+/// Takes a 'font map' as an argument and uses it to create font-size and
+/// line-height declarations for different breakpoints, and for print.
+///
+/// Example font map:
+///
+/// $my-font-map: (
+/// null: (
+/// font-size: 16px,
+/// line-height: 20px
+/// ),
+/// tablet: (
+/// font-size: 19px,
+/// line-height: 25px
+/// ),
+/// print: (
+/// font-size: 14pt,
+/// line-height: 1.15
+/// )
+/// );
+///
+/// @param {Map} $font-map - Font map
+/// @param {Number} $override-line-height [false] - Non responsive custom line
+/// height. Omit to use the line height from the font map.
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+/// `!important`.
+///
+/// @access public
+
+@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
+
+ @if not map-has-key($govuk-typography-scale, $size) {
+ @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
+ }
+
+ $font-map: map-get($govuk-typography-scale, $size);
+
+ @each $breakpoint, $breakpoint-map in $font-map {
+ $font-size: map-get($breakpoint-map, "font-size");
+ $font-size-rem: govuk-px-to-rem($font-size);
+
+ $line-height: _govuk-line-height(
+ $line-height: if(
+ $override-line-height,
+ $override-line-height,
+ map-get($breakpoint-map, "line-height")
+ ),
+ $font-size: $font-size
+ );
+
+ // Mark rules as !important if $important is true - this will result in
+ // these variables becoming strings, so this needs to happen *after* they
+ // are used in calculations
+ $font-size: $font-size if($important, !important, null);
+ $font-size-rem: $font-size-rem if($important, !important, null);
+ $line-height: $line-height if($important, !important, null);
+
+ @if $breakpoint == null {
+ font-size: $font-size;
+ @if $govuk-typography-use-rem {
+ font-size: $font-size-rem;
+ }
+ line-height: $line-height;
+ } @else if $breakpoint == "print" {
+ @include govuk-media-query($media-type: print) {
+ font-size: $font-size;
+ line-height: $line-height;
+ }
+ } @else {
+ @include govuk-media-query($from: $breakpoint) {
+ font-size: $font-size;
+ @if $govuk-typography-use-rem {
+ font-size: $font-size-rem;
+ }
+ line-height: $line-height;
+ }
+ }
+ }
+}
+
+/// Font helper
+///
+/// @param {Number} $size - Size of the font as it would appear on desktop -
+/// uses the responsive font size map
+/// @param {String} $weight [regular] - Weight: `bold` or `regular`
+/// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not
+/// @param {Number} $line-height [false] - Line-height, if overriding the default
+///
+/// @access public
+
+@mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
+ @if $tabular {
+ // if govuk-font-family-tabular is set use $govuk-font-family-tabular
+ @if $govuk-font-family-tabular {
+ @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+ } @else {
+ @include govuk-typography-common;
+ font-feature-settings: "tnum" 1;
+
+ @supports (font-variant-numeric: tabular-nums) {
+ font-feature-settings: normal;
+ font-variant-numeric: tabular-nums;
+ }
+ }
+ } @else {
+ @include govuk-typography-common;
+ }
+
+ @if $weight == regular {
+ @include govuk-typography-weight-regular;
+ } @else if $weight == bold {
+ @include govuk-typography-weight-bold;
+ }
+
+ @if $size {
+ @include govuk-typography-responsive($size, $override-line-height: $line-height);
+ }
+}
diff --git a/src/govuk/helpers/_visually-hidden.scss b/src/govuk/helpers/_visually-hidden.scss
new file mode 100644
index 0000000000..e77082dbd1
--- /dev/null
+++ b/src/govuk/helpers/_visually-hidden.scss
@@ -0,0 +1,81 @@
+////
+/// @group helpers/accessibility
+////
+
+/// Hide an element visually, but have it available for screen readers
+///
+/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+/// - Hiding Content for Accessibility, Jonathan Snook, February 2011
+/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
+/// - h5bp/html5-boilerplate - Thanks!
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @access public
+
+@mixin govuk-visually-hidden($important: true) {
+ position: absolute if($important, !important, null);
+
+ width: 1px if($important, !important, null);
+ height: 1px if($important, !important, null);
+ // If margin is set to a negative value it can cause text to be announced in
+ // the wrong order in VoiceOver for OSX
+ margin: 0 if($important, !important, null);
+ padding: 0 if($important, !important, null);
+
+ overflow: hidden if($important, !important, null);
+ clip: rect(0 0 0 0) if($important, !important, null);
+ clip-path: inset(50%) if($important, !important, null);
+
+ border: 0 if($important, !important, null);
+
+ // For long content, line feeds are not interpreted as spaces and small width
+ // causes content to wrap 1 word per line:
+ // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ white-space: nowrap if($important, !important, null);
+}
+
+/// Hide an element visually, but have it available for screen readers whilst
+/// allowing the element to be focused when navigated to via the keyboard (e.g.
+/// for the skip link)
+///
+/// This is slightly less opinionated about borders and padding to make it
+/// easier to style the focussed element.
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @access public
+
+@mixin govuk-visually-hidden-focusable($important: true) {
+ position: absolute if($important, !important, null);
+
+ width: 1px if($important, !important, null);
+ height: 1px if($important, !important, null);
+ // If margin is set to a negative value it can cause text to be announced in
+ // the wrong order in VoiceOver for OSX
+ margin: 0 if($important, !important, null);
+
+ overflow: hidden if($important, !important, null);
+ clip: rect(0 0 0 0) if($important, !important, null);
+ clip-path: inset(50%) if($important, !important, null);
+
+ // For long content, line feeds are not interpreted as spaces and small width
+ // causes content to wrap 1 word per line:
+ // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ white-space: nowrap if($important, !important, null);
+
+ &:active,
+ &:focus {
+ position: static if($important, !important, null);
+
+ width: auto if($important, !important, null);
+ height: auto if($important, !important, null);
+ margin: inherit if($important, !important, null);
+
+ overflow: visible if($important, !important, null);
+ clip: auto if($important, !important, null);
+ clip-path: none if($important, !important, null);
+
+ white-space: inherit if($important, !important, null);
+ }
+}
diff --git a/src/govuk/helpers/colour.test.js b/src/govuk/helpers/colour.test.js
new file mode 100644
index 0000000000..c1b54718a6
--- /dev/null
+++ b/src/govuk/helpers/colour.test.js
@@ -0,0 +1,259 @@
+/* eslint-env jest */
+
+const { renderSass } = require('../../../lib/jest-helpers')
+
+const sassConfig = {
+ outputStyle: 'compact'
+}
+
+describe('@function govuk-colour', () => {
+ let sassBootstrap = ''
+
+ beforeEach(() => {
+ sassBootstrap = `
+ $govuk-colours: (
+ "red": #ff0000,
+ "green": #00ff00,
+ "blue": #0000ff
+ );
+
+ @import "helpers/colour";
+ `
+ })
+
+ it('returns a colour from the colour palette', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('red');
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }')
+ })
+
+ it('works with unquoted strings', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour(red);
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }')
+ })
+
+ it('throws an error if a non-existent colour is requested', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('hooloovoo');
+ }`
+
+ await expect(renderSass({ data: sass, ...sassConfig }))
+ .rejects
+ .toThrow(
+ 'Unknown colour `hooloovoo`'
+ )
+ })
+
+ describe('when $govuk-use-legacy-palette is true', () => {
+ beforeEach(() => {
+ sassBootstrap = `
+ $govuk-use-legacy-palette: true;
+ ${sassBootstrap}
+ `
+ })
+
+ it('returns the legacy colour if specified', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('red', $legacy: 'blue');
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #0000ff; }')
+ })
+
+ it('returns the legacy literal if specified', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('red', $legacy: #BADA55);
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #BADA55; }')
+ })
+
+ it('does not error if the non-legacy colour does not exist', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('hooloovoo', $legacy: 'blue');
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #0000ff; }')
+ })
+
+ it('throws an error if the legacy colour does not exist', async () => {
+ const sass = `
+ ${sassBootstrap}
+ .foo {
+ color: govuk-colour('red', $legacy: 'hooloovoo');
+ }`
+
+ await expect(renderSass({ data: sass, ...sassConfig }))
+ .rejects
+ .toThrow(
+ 'Unknown colour `hooloovoo`'
+ )
+ })
+ })
+
+ describe('when $govuk-use-legacy-palette is false', () => {
+ beforeEach(() => {
+ sassBootstrap = `
+ $govuk-use-legacy-palette: false;
+ ${sassBootstrap}
+ `
+ })
+
+ it('does not return the legacy colour', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('red', $legacy: 'blue');
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }')
+ })
+
+ it('does not returns the legacy literal when specified', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('red', $legacy: #BADA55);
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }')
+ })
+
+ it('throws an error if the non-legacy colour does not exist', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('hooloovoo', $legacy: 'blue');
+ }`
+
+ await expect(renderSass({ data: sass, ...sassConfig }))
+ .rejects
+ .toThrow(
+ 'Unknown colour `hooloovoo`'
+ )
+ })
+
+ it('does not error if the legacy colour does not exist', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-colour('red', $legacy: 'hooloovoo');
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }')
+ })
+ })
+})
+
+describe('@function govuk-organisation-colour', () => {
+ const sassBootstrap = `
+ $govuk-colours-organisations: (
+ 'floo-network-authority': (
+ colour: #EC22FF,
+ colour-websafe: #9A00A8
+ ),
+ 'broom-regulatory-control': (
+ colour: #A81223
+ )
+ );
+
+ @import "helpers/colour";
+ `
+
+ it('returns the websafe colour for a given organisation by default', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-organisation-colour('floo-network-authority');
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #9A00A8; }')
+ })
+
+ it('falls back to the default colour if a websafe colour is not explicitly defined', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-organisation-colour('broom-regulatory-control');
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { color: #A81223; }')
+ })
+
+ it('can be overridden to return the non-websafe colour', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ border-color: govuk-organisation-colour('floo-network-authority', $websafe: false);
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo { border-color: #EC22FF; }')
+ })
+
+ it('throws an error if a non-existent organisation is requested', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-organisation-colour('muggle-born-registration-commission');
+ }`
+
+ await expect(renderSass({ data: sass, ...sassConfig }))
+ .rejects
+ .toThrow(
+ 'Unknown organisation `muggle-born-registration-commission`'
+ )
+ })
+})
diff --git a/src/govuk/helpers/grid.test.js b/src/govuk/helpers/grid.test.js
new file mode 100644
index 0000000000..2acd410546
--- /dev/null
+++ b/src/govuk/helpers/grid.test.js
@@ -0,0 +1,176 @@
+/* eslint-env jest */
+
+const outdent = require('outdent')
+
+const { renderSass } = require('../../../lib/jest-helpers')
+
+const sassConfig = {
+ outputStyle: 'nested'
+}
+
+describe('grid system', () => {
+ const sassImports = `
+ @import "settings/ie8";
+ @import "settings/media-queries";
+ @import "settings/spacing";
+ @import "settings/measurements";
+
+ @import "helpers/grid";
+ @import "helpers/media-queries";
+
+ @import "tools/exports";
+ `
+ describe('govuk-grid-width function', () => {
+ it('outputs the specified key value from the map of widths', async () => {
+ const sass = `
+ ${sassImports}
+
+ .foo {
+ content: govuk-grid-width(one-quarter);
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe(outdent`
+ .foo {
+ content: 25%; }`)
+ })
+
+ it('throws an error that the specified key does not exist in the map of widths', async () => {
+ const sass = `
+ ${sassImports}
+
+ $value: govuk-grid-width(seven-fifths);
+ `
+
+ await expect(renderSass({ data: sass, ...sassConfig }))
+ .rejects
+ .toThrow('Unknown grid width `seven-fifths`')
+ })
+ })
+
+ describe('@govuk-grid-column mixin', () => {
+ it('outputs the CSS required for a column in the grid', async () => {
+ const sass = `
+ ${sassImports}
+
+ .govuk-grid-column-full {
+ @include govuk-grid-column();
+ }
+ `
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css
+ .toString()
+ .trim())
+ .toBe(outdent`
+ .govuk-grid-column-full {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0 15px; }
+ @media (min-width: 40.0625em) {
+ .govuk-grid-column-full {
+ width: 100%;
+ float: left; } }`)
+ })
+
+ it('allows different widths to be specified using $width', async () => {
+ const sass = `
+ ${sassImports}
+
+ .govuk-grid-column-two-thirds {
+ @include govuk-grid-column(two-thirds);
+ }
+ `
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css
+ .toString()
+ .trim())
+ .toBe(outdent`
+ .govuk-grid-column-two-thirds {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0 15px; }
+ @media (min-width: 40.0625em) {
+ .govuk-grid-column-two-thirds {
+ width: 66.6666%;
+ float: left; } }
+ `)
+ })
+
+ it('allows predefined breakpoints to be specified using $at', async () => {
+ const sass = `
+ ${sassImports}
+
+ .govuk-grid-column-one-quarter-at-desktop {
+ @include govuk-grid-column(one-quarter, $at: desktop);
+ }
+ `
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css
+ .toString()
+ .trim())
+ .toBe(outdent`
+ .govuk-grid-column-one-quarter-at-desktop {
+ box-sizing: border-box;
+ padding: 0 15px; }
+ @media (min-width: 48.0625em) {
+ .govuk-grid-column-one-quarter-at-desktop {
+ width: 25%;
+ float: left; } }
+ `)
+ })
+ it('allows custom breakpoints to be specified using $at', async () => {
+ const sass = `
+ ${sassImports}
+
+ .govuk-grid-column-one-quarter-at-500px {
+ @include govuk-grid-column(one-quarter, $at: 500px);
+ }
+ `
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css
+ .toString()
+ .trim())
+ .toBe(outdent`
+ .govuk-grid-column-one-quarter-at-500px {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0 15px; }
+ @media (min-width: 31.25em) {
+ .govuk-grid-column-one-quarter-at-500px {
+ width: 25%;
+ float: left; } }
+ `)
+ })
+
+ it('allows columns to float right using $float: right', async () => {
+ const sass = `
+ ${sassImports}
+
+ .govuk-grid-column-one-half-right {
+ @include govuk-grid-column(one-half, $float: right);
+ }
+ `
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css
+ .toString()
+ .trim())
+ .toBe(outdent`
+ .govuk-grid-column-one-half-right {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0 15px; }
+ @media (min-width: 40.0625em) {
+ .govuk-grid-column-one-half-right {
+ width: 50%;
+ float: right; } }
+ `)
+ })
+ })
+})
diff --git a/src/govuk/helpers/helpers.test.js b/src/govuk/helpers/helpers.test.js
new file mode 100644
index 0000000000..00127532fc
--- /dev/null
+++ b/src/govuk/helpers/helpers.test.js
@@ -0,0 +1,42 @@
+/* eslint-env jest */
+
+const glob = require('glob')
+const path = require('path')
+
+const sassdoc = require('sassdoc')
+
+const { renderSass } = require('../../../lib/jest-helpers')
+const configPaths = require('../../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/helpers/**/*.scss`)
+
+describe('The helpers layer', () => {
+ it('should not output any CSS', async () => {
+ const helpers = path.join(configPaths.src, 'helpers', '_all.scss')
+
+ const output = await renderSass({ file: helpers })
+ expect(output.css.toString()).toEqual('')
+ })
+
+ it.each(sassFiles)('%s renders to CSS without errors', (file) => {
+ return renderSass({ file: file })
+ })
+
+ describe('Sass documentation', () => {
+ it('associates everything with a "helpers" group', async () => {
+ return sassdoc.parse(path.join(configPaths.src, 'helpers', '*.scss'))
+ .then(docs => docs.forEach(doc => {
+ return expect(doc).toMatchObject({
+ // Include doc.context.name in the expected result when this fails,
+ // giving you the context to be able to fix it
+ context: {
+ name: doc.context.name
+ },
+ group: [
+ expect.stringMatching(/^helpers/)
+ ]
+ })
+ }))
+ })
+ })
+})
diff --git a/src/helpers/media-queries.test.js b/src/govuk/helpers/media-queries.test.js
similarity index 83%
rename from src/helpers/media-queries.test.js
rename to src/govuk/helpers/media-queries.test.js
index 6b1ceacd41..3e982d43eb 100644
--- a/src/helpers/media-queries.test.js
+++ b/src/govuk/helpers/media-queries.test.js
@@ -1,14 +1,8 @@
/* 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 { renderSass } = require('../../../lib/jest-helpers')
const sassConfig = {
- includePaths: [ configPaths.src ],
outputStyle: 'compressed'
}
@@ -32,7 +26,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media (min-width: 20em){.foo{color:red}}')
})
@@ -48,7 +42,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media (min-width: 20em){.foo{color:red}}')
})
@@ -63,7 +57,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media (max-width: 20em){.foo{color:red}}')
})
@@ -79,7 +73,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media (max-width: 61.24em){.foo{color:red}}')
})
@@ -94,7 +88,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media (min-width: 20em) and (max-width: 40em){.foo{color:red}}')
})
@@ -110,7 +104,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media (min-width: 20em) and (max-width: 46.24em){.foo{color:red}}')
})
@@ -125,7 +119,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media (max-width: 40em) and (orientation: landscape){.foo{color:red}}')
})
@@ -140,7 +134,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('@media aural and (max-width: 40em){.foo{color:red}}')
})
@@ -168,7 +162,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('.foo{color:forestgreen}')
})
@@ -187,7 +181,7 @@ describe('@mixin govuk-media-query', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('.foo{color:blue}')
})
diff --git a/src/helpers/spacing.test.js b/src/govuk/helpers/spacing.test.js
similarity index 86%
rename from src/helpers/spacing.test.js
rename to src/govuk/helpers/spacing.test.js
index 159ff3bd8b..29eb09404a 100644
--- a/src/helpers/spacing.test.js
+++ b/src/govuk/helpers/spacing.test.js
@@ -1,15 +1,10 @@
/* eslint-env jest */
-const util = require('util')
-
-const configPaths = require('../../config/paths.json')
-
const outdent = require('outdent')
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
+
+const { renderSass } = require('../../../lib/jest-helpers')
const sassConfig = {
- includePaths: [ configPaths.src ],
outputStyle: 'nested'
}
@@ -50,7 +45,7 @@ describe('@function govuk-spacing', () => {
top: govuk-spacing($spacing-point)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -65,7 +60,7 @@ describe('@function govuk-spacing', () => {
top: govuk-spacing('margin')
}`
- await expect(sassRender({ data: sass, ...sassConfig }))
+ await expect(renderSass({ data: sass, ...sassConfig }))
.rejects
.toThrow(
'Expected a number (integer), but got a string.'
@@ -82,7 +77,7 @@ describe('@mixin _govuk-responsive-spacing', () => {
@include _govuk-responsive-spacing($spacing-point, 'margin')
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -100,7 +95,7 @@ describe('@mixin _govuk-responsive-spacing', () => {
@include _govuk-responsive-spacing($spacing-point, 'padding', 'top');
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -118,7 +113,7 @@ describe('@mixin _govuk-responsive-spacing', () => {
@include _govuk-responsive-spacing(14px, 'margin')
}`
- await expect(sassRender({ data: sass, ...sassConfig }))
+ await expect(renderSass({ data: sass, ...sassConfig }))
.rejects
.toThrow(
'Unknown spacing point `14px`. Make sure you are using a point from the responsive spacing scale in `_settings/spacing.scss`.'
@@ -138,7 +133,7 @@ describe('@mixin _govuk-responsive-spacing', () => {
)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -161,7 +156,7 @@ describe('@mixin _govuk-responsive-spacing', () => {
)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -185,7 +180,7 @@ describe('@mixin _govuk-responsive-spacing', () => {
)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -208,7 +203,7 @@ describe('@mixin _govuk-responsive-spacing', () => {
)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -229,7 +224,7 @@ describe('@mixin govuk-responsive-margin', () => {
@include govuk-responsive-margin($spacing-point)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -252,7 +247,7 @@ describe('@mixin govuk-responsive-margin', () => {
)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -272,7 +267,7 @@ describe('@mixin govuk-responsive-padding', () => {
@include govuk-responsive-padding($spacing-point)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -295,7 +290,7 @@ describe('@mixin govuk-responsive-padding', () => {
)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
diff --git a/src/helpers/typography.test.js b/src/govuk/helpers/typography.test.js
similarity index 91%
rename from src/helpers/typography.test.js
rename to src/govuk/helpers/typography.test.js
index b347b1123a..8a429d5a03 100644
--- a/src/helpers/typography.test.js
+++ b/src/govuk/helpers/typography.test.js
@@ -1,15 +1,10 @@
/* eslint-env jest */
-const util = require('util')
-
-const configPaths = require('../../config/paths.json')
-
const outdent = require('outdent')
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
+
+const { renderSass } = require('../../../lib/jest-helpers')
const sassConfig = {
- includePaths: [ configPaths.src ],
outputStyle: 'nested'
}
@@ -146,7 +141,7 @@ describe('@function _govuk-line-height', () => {
line-height: _govuk-line-height($line-height: 3.141, $font-size: 20px);
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -161,7 +156,7 @@ describe('@function _govuk-line-height', () => {
line-height: _govuk-line-height($line-height: 2em, $font-size: 20px);
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -176,7 +171,7 @@ describe('@function _govuk-line-height', () => {
line-height: _govuk-line-height($line-height: 30px, $font-size: 20px);
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -193,7 +188,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 14)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -215,7 +210,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 12)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -236,7 +231,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive(3.14159265359)
}`
- await expect(sassRender({ data: sass, ...sassConfig }))
+ await expect(renderSass({ data: sass, ...sassConfig }))
.rejects
.toThrow(
'Unknown font size `3.14159` - expected a point from the typography scale.'
@@ -252,7 +247,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 14, $important: true);
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -274,7 +269,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 12, $important: true);
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -297,7 +292,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 14, $override-line-height: 21px);
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -322,7 +317,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 14)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -344,7 +339,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 14)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -366,7 +361,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 14, $important: true);
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
@@ -390,7 +385,7 @@ describe('@mixin govuk-typography-responsive', () => {
@include govuk-typography-responsive($size: 14)
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe(outdent`
.foo {
diff --git a/src/objects/_all.scss b/src/govuk/objects/_all.scss
similarity index 100%
rename from src/objects/_all.scss
rename to src/govuk/objects/_all.scss
diff --git a/src/govuk/objects/_form-group.scss b/src/govuk/objects/_form-group.scss
new file mode 100644
index 0000000000..2545fa7a3c
--- /dev/null
+++ b/src/govuk/objects/_form-group.scss
@@ -0,0 +1,23 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/form-group") {
+ .govuk-form-group {
+ @include govuk-clearfix;
+ @include govuk-responsive-margin(6, "bottom");
+
+ .govuk-form-group:last-of-type {
+ margin-bottom: 0; // Remove margin from last item in nested groups
+ }
+ }
+
+ .govuk-form-group--error {
+ padding-left: govuk-spacing(3);
+ border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
+
+ .govuk-form-group {
+ // Reset error styles in nested form groups that might have error class
+ padding: 0;
+ border: 0;
+ }
+ }
+}
diff --git a/src/govuk/objects/_grid.scss b/src/govuk/objects/_grid.scss
new file mode 100644
index 0000000000..4ae792a92e
--- /dev/null
+++ b/src/govuk/objects/_grid.scss
@@ -0,0 +1,24 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/grid") {
+ .govuk-grid-row {
+ @include govuk-clearfix;
+ margin-right: - ($govuk-gutter-half);
+ margin-left: - ($govuk-gutter-half);
+ }
+
+ @each $width in map-keys($govuk-grid-widths) {
+ .govuk-grid-column-#{$width} {
+ @include govuk-grid-column($width);
+ }
+ }
+
+ // These *must* be defined in a separate loop as they have the same
+ // specificity as the non-breakpoint specific classes, so need to appear after
+ // them in the outputted CSS
+ @each $width in map-keys($govuk-grid-widths) {
+ .govuk-grid-column-#{$width}-from-desktop {
+ @include govuk-grid-column($width, $at: desktop);
+ }
+ }
+}
diff --git a/src/govuk/objects/_main-wrapper.scss b/src/govuk/objects/_main-wrapper.scss
new file mode 100644
index 0000000000..44779db0db
--- /dev/null
+++ b/src/govuk/objects/_main-wrapper.scss
@@ -0,0 +1,68 @@
+@import "../base";
+
+////
+/// @group objects/layout
+////
+
+// Example usage with Breadcrumbs, phase banners, back links:
+//
+//
+// Example usage without Breadcrumbs, phase banners, back links:
+//
+
+/// @deprecated Replace this mixin with more direct references to the [spacing
+/// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
+@mixin govuk-main-wrapper {
+ // In IE11 the `main` element can be used, but is not recognized –
+ // meaning it's not defined in IE's default style sheet,
+ // so it uses CSS initial value, which is inline.
+ display: block;
+ padding-top: govuk-spacing(4);
+ padding-bottom: govuk-spacing(4);
+
+ @include govuk-media-query($from: tablet) {
+ // This spacing is manually adjusted to replicate the margin of
+ // govuk-heading-xl (50px) minus the spacing of back link and
+ // breadcrumbs (10px)
+ padding-top: govuk-spacing(7);
+ padding-bottom: govuk-spacing(7);
+ }
+}
+
+/// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase
+/// banners or back links.
+///
+/// @deprecated Replace this mixin with more direct references to the [spacing
+/// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
+@mixin govuk-main-wrapper--l {
+ @include govuk-responsive-padding(8, "top");
+}
+
+@include govuk-exports("govuk/objects/main-wrapper") {
+ .govuk-main-wrapper {
+ @include govuk-main-wrapper;
+ }
+
+ // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
+ // correct spacing depending on whether there are any elements
+ // (such the back link, breadcrumbs or phase banner components) before the
+ // `.govuk-main-wrapper` in the `govuk-width-container`.
+ //
+ // If you need to control the spacing manually, use the
+ // `govuk-main-wrapper--l` modifier instead.
+ .govuk-main-wrapper--auto-spacing:first-child,
+ .govuk-main-wrapper--l {
+ @include govuk-main-wrapper--l;
+ }
+}
diff --git a/src/govuk/objects/_width-container.scss b/src/govuk/objects/_width-container.scss
new file mode 100644
index 0000000000..ba5326d66a
--- /dev/null
+++ b/src/govuk/objects/_width-container.scss
@@ -0,0 +1,84 @@
+@import "../base";
+
+////
+/// @group objects/layout
+////
+
+/// Width container mixin
+///
+/// Used to create page width and custom width container classes.
+///
+/// @param {String} $width [$govuk-page-width] - Width in pixels
+///
+/// @example scss - Creating a 1200px wide container class
+/// .app-width-container--wide {
+/// @include govuk-width-container(1200px);
+/// }
+///
+/// @access public
+
+@mixin govuk-width-container($width: $govuk-page-width) {
+
+ // By default, limit the width of the container to the page width
+ max-width: $width;
+
+ // On mobile, add half width gutters
+ margin-right: $govuk-gutter-half;
+ margin-left: $govuk-gutter-half;
+
+ // Respect 'display cutout' safe area (avoids notches and rounded corners)
+ @supports (margin: unquote("max(calc(0px))")) {
+ $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+ $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+ // Use max() to pick largest margin, default or with safe area
+ // Escaped due to Sass max() vs. CSS native max()
+ margin-right: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
+ margin-left: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
+ }
+
+ // On tablet, add full width gutters
+ @include govuk-media-query($from: tablet) {
+ margin-right: $govuk-gutter;
+ margin-left: $govuk-gutter;
+
+ // Respect 'display cutout' safe area (avoids notches and rounded corners)
+ @supports (margin: unquote("max(calc(0px))")) {
+ $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+ $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+ // Use max() to pick largest margin, default or with safe area
+ // Escaped due to Sass max() vs. CSS native max()
+ margin-right: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
+ margin-left: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
+ }
+ }
+
+ // As soon as the viewport is greater than the width of the page plus the
+ // gutters, just centre the content instead of adding gutters.
+ @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
+ margin-right: auto;
+ margin-left: auto;
+
+ // Since a safe area may have previously been set above,
+ // we need to duplicate this margin that centers the page.
+ @supports (margin: unquote("max(calc(0px))")) {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ }
+
+ @include govuk-if-ie8 {
+ width: $width;
+ // Since media queries are not supported in IE8,
+ // we need to duplicate this margin that centers the page.
+ margin-right: auto;
+ margin-left: auto;
+ }
+}
+
+@include govuk-exports("govuk/objects/width-container") {
+ .govuk-width-container {
+ @include govuk-width-container;
+ }
+}
diff --git a/src/govuk/objects/objects.test.js b/src/govuk/objects/objects.test.js
new file mode 100644
index 0000000000..e17c7e696b
--- /dev/null
+++ b/src/govuk/objects/objects.test.js
@@ -0,0 +1,34 @@
+/* eslint-env jest */
+
+const glob = require('glob')
+const path = require('path')
+
+const sassdoc = require('sassdoc')
+
+const { renderSass } = require('../../../lib/jest-helpers')
+const configPaths = require('../../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/objects/**/*.scss`)
+
+describe('The objects layer', () => {
+ it.each(sassFiles)('%s renders to CSS without errors', (file) => {
+ return renderSass({ file: file })
+ })
+ describe('Sass documentation', () => {
+ it('associates everything with a "objects" group', async () => {
+ return sassdoc.parse(path.join(configPaths.src, 'objects', '*.scss'))
+ .then(docs => docs.forEach(doc => {
+ return expect(doc).toMatchObject({
+ // Include doc.context.name in the expected result when this fails,
+ // giving you the context to be able to fix it
+ context: {
+ name: doc.context.name
+ },
+ group: [
+ expect.stringMatching(/^objects/)
+ ]
+ })
+ }))
+ })
+ })
+})
diff --git a/src/govuk/objects/width-container.test.js b/src/govuk/objects/width-container.test.js
new file mode 100644
index 0000000000..152884e11a
--- /dev/null
+++ b/src/govuk/objects/width-container.test.js
@@ -0,0 +1,52 @@
+/* eslint-env jest */
+
+const outdent = require('outdent')
+
+const { renderSass } = require('../../../lib/jest-helpers')
+
+const sassConfig = {
+ outputStyle: 'nested'
+}
+
+describe('@mixin govuk-width-container', () => {
+ it('allows different widths to be specified using $width', async () => {
+ const sass = `
+ @import "objects/width-container";
+
+ .app-width-container--wide {
+ @include govuk-width-container(1200px);
+ }
+ `
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css
+ .toString()
+ .trim())
+ .toContain(outdent`
+ .app-width-container--wide {
+ max-width: 1200px;
+ margin-right: 15px;
+ margin-left: 15px; }
+ @supports (margin: max(calc(0px))) {
+ .app-width-container--wide {
+ margin-right: max(15px, calc(15px + env(safe-area-inset-right)));
+ margin-left: max(15px, calc(15px + env(safe-area-inset-left))); } }
+ @media (min-width: 40.0625em) {
+ .app-width-container--wide {
+ margin-right: 30px;
+ margin-left: 30px; }
+ @supports (margin: max(calc(0px))) {
+ .app-width-container--wide {
+ margin-right: max(30px, calc(15px + env(safe-area-inset-right)));
+ margin-left: max(30px, calc(15px + env(safe-area-inset-left))); } } }
+ @media (min-width: 1260px) {
+ .app-width-container--wide {
+ margin-right: auto;
+ margin-left: auto; }
+ @supports (margin: max(calc(0px))) {
+ .app-width-container--wide {
+ margin-right: auto;
+ margin-left: auto; } } }
+ `)
+ })
+})
diff --git a/src/overrides/_all.scss b/src/govuk/overrides/_all.scss
similarity index 100%
rename from src/overrides/_all.scss
rename to src/govuk/overrides/_all.scss
diff --git a/src/govuk/overrides/_display.scss b/src/govuk/overrides/_display.scss
new file mode 100644
index 0000000000..78951d3481
--- /dev/null
+++ b/src/govuk/overrides/_display.scss
@@ -0,0 +1,30 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/display") {
+ .govuk-\!-display-inline {
+ display: inline !important;
+ }
+
+ .govuk-\!-display-inline-block {
+ display: inline-block !important;
+ }
+
+ .govuk-\!-display-block {
+ display: block !important;
+ }
+
+ .govuk-\!-display-none {
+ display: none !important;
+ }
+
+ @include govuk-media-query($media-type: print) {
+ .govuk-\!-display-none-print {
+ display: none !important;
+ }
+ }
+}
diff --git a/src/govuk/overrides/_spacing.scss b/src/govuk/overrides/_spacing.scss
new file mode 100644
index 0000000000..7f54fe0244
--- /dev/null
+++ b/src/govuk/overrides/_spacing.scss
@@ -0,0 +1,64 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+////
+/// @group overrides
+////
+
+/// Directions for spacing
+///
+/// @type Map
+/// @access private
+
+$_spacing-directions: (
+ "top",
+ "right",
+ "bottom",
+ "left"
+) !default;
+
+/// Spacing override classes
+///
+/// Generate spacing override classes for the given property (e.g. margin)
+/// for each point in the spacing scale.
+///
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+///
+/// @example scss
+/// .govuk-\!-margin-0 {
+/// margin: 0;
+/// }
+///
+/// .govuk-\!-margin-top-1 {
+/// margin-top: [whatever spacing point 1 is...]
+/// }
+///
+/// @access private
+
+@mixin _govuk-generate-spacing-overrides($property) {
+ // For each point in the spacing scale (defined in settings), create an
+ // override that affects all directions...
+ @each $scale-point, $scale-map in $govuk-spacing-responsive-scale {
+
+ .govuk-\!-#{$property}-#{$scale-point} {
+
+ @include _govuk-responsive-spacing($scale-point, $property, "all", true);
+ }
+
+ // ... and then an override for each individual direction
+ @each $direction in $_spacing-directions {
+
+ .govuk-\!-#{$property}-#{$direction}-#{$scale-point} {
+ @include _govuk-responsive-spacing($scale-point, $property, $direction, true);
+ }
+ }
+ }
+}
+
+@include govuk-exports("govuk/overrides/spacing") {
+ @include _govuk-generate-spacing-overrides("margin");
+ @include _govuk-generate-spacing-overrides("padding");
+}
diff --git a/src/govuk/overrides/_typography.scss b/src/govuk/overrides/_typography.scss
new file mode 100644
index 0000000000..9541f308a7
--- /dev/null
+++ b/src/govuk/overrides/_typography.scss
@@ -0,0 +1,27 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+@include govuk-exports("govuk/overrides/typography") {
+ // Font size and line height
+
+ // Generate typography override classes for each responsive font map in the
+ // typography scale eg .govuk-\!-font-size-80
+ @each $size in map-keys($govuk-typography-scale) {
+ .govuk-\!-font-size-#{$size} {
+ @include govuk-typography-responsive($size, $important: true);
+ }
+ }
+
+ // Weights
+
+ .govuk-\!-font-weight-regular {
+ @include govuk-typography-weight-regular($important: true);
+ }
+
+ .govuk-\!-font-weight-bold {
+ @include govuk-typography-weight-bold($important: true);
+ }
+}
diff --git a/src/govuk/overrides/_width.scss b/src/govuk/overrides/_width.scss
new file mode 100644
index 0000000000..a498cf000e
--- /dev/null
+++ b/src/govuk/overrides/_width.scss
@@ -0,0 +1,52 @@
+@if not mixin-exists("govuk-exports") {
+ @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/width") {
+ .govuk-\!-width-full {
+ width: 100% !important;
+ }
+
+ .govuk-\!-width-three-quarters {
+ width: 100% !important;
+
+ @include govuk-media-query($from: tablet) {
+ width: 75% !important;
+ }
+ }
+
+ .govuk-\!-width-two-thirds {
+ width: 100% !important;
+
+ @include govuk-media-query($from: tablet) {
+ width: 66.66% !important;
+ }
+ }
+
+ .govuk-\!-width-one-half {
+ width: 100% !important;
+
+ @include govuk-media-query($from: tablet) {
+ width: 50% !important;
+ }
+ }
+
+ .govuk-\!-width-one-third {
+ width: 100% !important;
+
+ @include govuk-media-query($from: tablet) {
+ width: 33.33% !important;
+ }
+ }
+
+ .govuk-\!-width-one-quarter {
+ width: 100% !important;
+
+ @include govuk-media-query($from: tablet) {
+ width: 25% !important;
+ }
+ }
+}
diff --git a/src/govuk/overrides/overrides.test.js b/src/govuk/overrides/overrides.test.js
new file mode 100644
index 0000000000..d83d68d3fe
--- /dev/null
+++ b/src/govuk/overrides/overrides.test.js
@@ -0,0 +1,31 @@
+/* eslint-env jest */
+
+const sass = require('node-sass')
+
+const glob = require('glob')
+const { renderSass } = require('../../../lib/jest-helpers')
+const configPaths = require('../../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/overrides/**/*.scss`)
+
+it.each(sassFiles)('%s renders with a deprecation warning', (file) => {
+ // 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(sass.NULL)
+
+ return renderSass({
+ file: file,
+ functions: {
+ '@warn': mockWarnFunction
+ }
+ }).then(() => {
+ // Expect our mocked @warn function to have been called once with a single
+ // argument, which should be the deprecation notice
+ return expect(mockWarnFunction.mock.calls[0][0].getValue())
+ .toEqual(
+ 'Importing items from the overrides layer without first importing ' +
+ '`base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.'
+ )
+ })
+})
diff --git a/src/settings/_all.scss b/src/govuk/settings/_all.scss
similarity index 100%
rename from src/settings/_all.scss
rename to src/govuk/settings/_all.scss
diff --git a/src/settings/_assets.scss b/src/govuk/settings/_assets.scss
similarity index 100%
rename from src/settings/_assets.scss
rename to src/govuk/settings/_assets.scss
diff --git a/src/govuk/settings/_colours-applied.scss b/src/govuk/settings/_colours-applied.scss
new file mode 100644
index 0000000000..8c8f11389d
--- /dev/null
+++ b/src/govuk/settings/_colours-applied.scss
@@ -0,0 +1,146 @@
+////
+/// @group settings/colours
+////
+
+@import "../helpers/colour";
+
+// =========================================================
+// Generic
+// =========================================================
+
+/// Brand colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-brand-colour: govuk-colour("blue") !default;
+
+/// Text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-text-colour: govuk-colour("black") !default;
+
+/// Canvas background colour
+///
+/// Used by the footer component and template to give the illusion of a long
+/// footer.
+///
+/// @type Colour
+/// @access public
+
+$govuk-canvas-background-colour: govuk-colour("light-grey", $legacy: "grey-3") !default;
+
+/// Body background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-body-background-colour: govuk-colour("white") !default;
+
+/// Text colour for print media
+///
+/// Use 'true black' to avoid printers using colour ink to print body text
+///
+/// @type Colour
+/// @access public
+
+$govuk-print-text-colour: #000000 !default;
+
+/// Secondary text colour
+///
+/// Used in for example 'muted' text and help text.
+///
+/// @type Colour
+/// @access public
+
+$govuk-secondary-text-colour: govuk-colour("dark-grey", $legacy: "grey-1") !default;
+
+/// Focus colour
+///
+/// Used for outline (and background, where appropriate) when interactive
+/// elements (links, form controls) have keyboard focus.
+///
+/// @type Colour
+/// @access public
+
+$govuk-focus-colour: govuk-colour("yellow") !default;
+
+/// Focused text colour
+///
+/// Ensure that the contrast between the text and background colour passes
+/// WCAG Level AA contrast requirements.
+///
+/// @type Colour
+/// @access public
+
+$govuk-focus-text-colour: govuk-colour("black") !default;
+
+/// Error colour
+///
+/// Used to highlight error messages and form controls in an error state
+///
+/// @type Colour
+/// @access public
+
+$govuk-error-colour: govuk-colour("red") !default;
+
+/// Border colour
+///
+/// Used in for example borders, separators, rules and keylines.
+///
+/// @type Colour
+/// @access public
+
+$govuk-border-colour: govuk-colour("mid-grey", $legacy: "grey-2");
+
+/// Input border colour
+///
+/// Used for form inputs and controls
+///
+/// @type Colour
+/// @access public
+
+$govuk-input-border-colour: govuk-colour("black") !default;
+
+/// Input hover colour
+///
+/// Used for hover states on form controls
+///
+/// @type Colour
+/// @access public
+
+$govuk-hover-colour: govuk-colour("mid-grey", $legacy: "grey-3");
+
+// =============================================================================
+// Links
+// =============================================================================
+
+/// Link colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-link-colour: govuk-colour("blue") !default;
+
+/// Visited link colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-link-visited-colour: govuk-colour("purple", $legacy: #4c2c92) !default;
+
+/// Link hover colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-link-hover-colour: govuk-colour("dark-blue", $legacy: "light-blue") !default;
+
+/// Active link colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-link-active-colour: govuk-colour("black", $legacy: "light-blue") !default;
diff --git a/src/govuk/settings/_colours-organisations.scss b/src/govuk/settings/_colours-organisations.scss
new file mode 100644
index 0000000000..4e407ec61b
--- /dev/null
+++ b/src/govuk/settings/_colours-organisations.scss
@@ -0,0 +1,139 @@
+////
+/// @group settings/colours
+////
+
+/// Organisation colours
+///
+/// @type Map
+///
+/// @prop $organisation.colour - Colour for the given `$organisation`
+/// @prop $organisation.colour-websafe - Websafe colour for the given
+/// `$organisation`. We use `websafe` to mean strong enough contrast against
+/// white to be used for copy and meet the AAA (large text) and AA (smaller
+/// copy) WCAG guidelines.
+///
+/// @access public
+
+$govuk-colours-organisations: (
+ "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-and-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-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
+ )
+) !default;
diff --git a/src/govuk/settings/_colours-palette.scss b/src/govuk/settings/_colours-palette.scss
new file mode 100644
index 0000000000..d81d98d62f
--- /dev/null
+++ b/src/govuk/settings/_colours-palette.scss
@@ -0,0 +1,108 @@
+@import "compatibility";
+
+// stylelint-disable value-list-max-empty-lines -- allow empty lines in lists
+// in this file to allow grouping
+
+////
+/// @group settings/colours
+////
+
+/// Use 'legacy' colour palette
+///
+/// Whether or not to use the colour palette from GOV.UK Elements / Frontend
+/// Toolkit, for teams that are migrating to GOV.UK Frontend and may be using
+/// components from both places in a single application.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-use-legacy-palette: if(
+ (
+ $govuk-compatibility-govukfrontendtoolkit or
+ $govuk-compatibility-govuktemplate or
+ $govuk-compatibility-govukelements
+ ),
+ true,
+ false
+) !default;
+
+/// Modern colour palette
+///
+/// This exists only because you cannot easily set a !default variable
+/// conditionally (thanks to the way scope works in Sass) so we set
+/// `$govuk-colour-palette` using the `if` function.
+///
+/// @access private
+
+$_govuk-colour-palette-modern: (
+ "red": #d4351c,
+ "yellow": #ffdd00,
+ "green": #00703c,
+ "blue": #1d70b8,
+ "dark-blue": #003078,
+ "light-blue": #5694ca,
+ "purple": #4c2c92,
+
+ "black": #0b0c0c,
+ "dark-grey": #505a5f,
+ "mid-grey": #b1b4b6,
+ "light-grey": #f3f2f1,
+ "white": #ffffff,
+
+ "light-purple": #6f72af,
+ "bright-purple": #912b88,
+ "pink": #d53880,
+ "light-pink": #f499be,
+ "orange": #f47738,
+ "brown": #b58840,
+ "light-green": #85994b,
+ "turquoise": #28a197
+);
+
+/// Legacy colour palette
+///
+/// This exists only because you cannot easily set a !default variable
+/// conditionally (thanks to the way scope works in Sass) so we set
+/// `$govuk-colour-palette` using the `if` function.
+///
+/// @access private
+
+$_govuk-colour-palette-legacy: (
+ "purple": #2e358b,
+ "light-purple": #6f72af,
+ "bright-purple": #912b88,
+ "pink": #d53880,
+ "light-pink": #f499be,
+ "red": #b10e1e,
+ "bright-red": #df3034,
+ "orange": #f47738,
+ "brown": #b58840,
+ "yellow": #ffbf47,
+ "light-green": #85994b,
+ "green": #006435,
+ "turquoise": #28a197,
+ "light-blue": #2b8cc4,
+ "blue": #005ea5,
+
+ "black": #0b0c0c,
+ "grey-1": #6f777b,
+ "grey-2": #bfc1c3,
+ "grey-3": #dee0e2,
+ "grey-4": #f8f8f8,
+ "white": #ffffff
+);
+
+/// Colour palette
+///
+/// @type Map
+///
+/// @prop $colour - Representation for the given $colour, where $colour is the
+/// friendly name for the colour (e.g. "red": #ff0000);
+///
+/// @access public
+
+$govuk-colours: if(
+ $govuk-use-legacy-palette,
+ $_govuk-colour-palette-legacy,
+ $_govuk-colour-palette-modern
+) !default;
diff --git a/src/govuk/settings/_compatibility.scss b/src/govuk/settings/_compatibility.scss
new file mode 100644
index 0000000000..5c6dcdff46
--- /dev/null
+++ b/src/govuk/settings/_compatibility.scss
@@ -0,0 +1,74 @@
+////
+/// 'Compatibility Mode'
+///
+/// Enabling these flags improves compatibility if you are using GOV.UK Frontend
+/// in an application that also uses govuk_elements, govuk_frontend_toolkit or
+/// govuk_template (the 'legacy repos').
+///
+/// Enabling any of these settings will, by default:
+///
+/// - switch GOV.UK Frontend to using the same colour palette as the legacy
+/// repos, by setting `$govuk-use-legacy-palette` to true.
+///
+/// - prevent GOV.UK Frontend from using rem for font sizing, by setting
+/// `$govuk-typography-use-rem` to false.
+///
+/// @group settings/compatibility
+////
+
+/// Compatibility Mode: alphagov/govuk_frontend_toolkit
+///
+/// Set this to true if you are also including alphagov/govuk_frontend_toolkit
+/// in your application.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-compatibility-govukfrontendtoolkit: false !default;
+
+/// Compatibility Mode: alphagov/govuk_template
+///
+/// Enabling this will:
+///
+/// - prevent GOV.UK Frontend from including the New Transport typeface, as
+/// it'll use the version of New Transport included with GOV.UK Template.
+///
+/// - alter some of the CSS outputted by GOV.UK Frontend to 'counter'
+/// specific CSS rules in GOV.UK Template.
+///
+/// Set this to true if you are also including alphagov/govuk_template in your
+/// application.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-compatibility-govuktemplate: false !default;
+
+/// Compatibility Mode: alphagov/govuk_elements
+///
+/// Enabling this will:
+///
+/// - alter some of the CSS outputted by GOV.UK Frontend to 'counter'
+/// specific CSS rules in GOV.UK Elements.
+///
+/// Set this to true if you are also including alphagov/govuk_elements in your
+/// application.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-compatibility-govukelements: false !default;
+
+/// Compatibility Product Map
+///
+/// Maps product names to their settings that we can use to lookup states from
+/// within the `@govuk-compatibility` mixin.
+///
+/// @type Map
+/// @access private
+
+$_govuk-compatibility: (
+ govuk_frontend_toolkit: $govuk-compatibility-govukfrontendtoolkit,
+ govuk_template: $govuk-compatibility-govuktemplate,
+ govuk_elements: $govuk-compatibility-govukelements,
+);
diff --git a/src/settings/_global-styles.scss b/src/govuk/settings/_global-styles.scss
similarity index 100%
rename from src/settings/_global-styles.scss
rename to src/govuk/settings/_global-styles.scss
diff --git a/src/govuk/settings/_ie8.scss b/src/govuk/settings/_ie8.scss
new file mode 100644
index 0000000000..45bf053b5e
--- /dev/null
+++ b/src/govuk/settings/_ie8.scss
@@ -0,0 +1,18 @@
+////
+/// @group settings/internet-explorer-8
+////
+
+/// Whether the stylesheet being built is targeting Internet Explorer 8.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-is-ie8: false !default;
+
+/// The name of the breakpoint to use as the target when rasterizing media
+/// queries
+///
+/// @type String
+/// @access public
+
+$govuk-ie8-breakpoint: desktop !default;
diff --git a/src/govuk/settings/_measurements.scss b/src/govuk/settings/_measurements.scss
new file mode 100644
index 0000000000..2df9442f1a
--- /dev/null
+++ b/src/govuk/settings/_measurements.scss
@@ -0,0 +1,105 @@
+////
+/// @group settings/measurements
+////
+
+// =========================================================
+// Page layout
+// =========================================================
+
+/// Width of main container
+///
+/// @type Number
+/// @access public
+
+$govuk-page-width: 960px !default;
+
+/// Map of grid column widths
+///
+/// @type Map
+/// @access public
+
+$govuk-grid-widths: (
+ one-quarter: 25%,
+ one-third: 33.3333%,
+ one-half: 50%,
+ two-thirds: 66.6666%,
+ three-quarters: 75%,
+ full: 100%
+) !default;
+
+/// Width of gutter between grid columns
+///
+/// @type Number
+/// @access public
+
+$govuk-gutter: 30px !default;
+
+/// Width of half the gutter between grid columns
+///
+/// @type Number
+/// @access public
+
+$govuk-gutter-half: $govuk-gutter / 2;
+
+// =========================================================
+// Borders
+// =========================================================
+
+/// Standard border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width: 5px !default;
+
+/// Wide border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-wide: 10px !default;
+
+/// Narrow border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-narrow: 4px !default;
+
+/// Form control border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-form-element: 2px !default;
+
+/// Form control border width when in error state
+///
+/// @type Number
+/// @access public
+/// @deprecated Use $govuk-border-width-form-element instead. There should be no
+/// difference in thickness for inputs in the error state, in order to
+/// maintain a distinct focus state.
+
+$govuk-border-width-form-element-error: 2px !default;
+
+/// Form group border width when in error state
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-form-group-error: $govuk-border-width !default;
+
+/// Border width of focus outline
+///
+/// @type Number
+/// @access public
+
+$govuk-focus-width: 3px !default;
+
+/// Hover width for form controls with a hover state
+///
+/// @type Number
+/// @access public
+
+$govuk-hover-width: 10px !default;
diff --git a/src/settings/_media-queries.scss b/src/govuk/settings/_media-queries.scss
similarity index 100%
rename from src/settings/_media-queries.scss
rename to src/govuk/settings/_media-queries.scss
diff --git a/src/settings/_spacing.scss b/src/govuk/settings/_spacing.scss
similarity index 100%
rename from src/settings/_spacing.scss
rename to src/govuk/settings/_spacing.scss
diff --git a/src/govuk/settings/_typography-font-families.scss b/src/govuk/settings/_typography-font-families.scss
new file mode 100644
index 0000000000..9a3df10c1e
--- /dev/null
+++ b/src/govuk/settings/_typography-font-families.scss
@@ -0,0 +1,32 @@
+////
+/// @group settings/typography
+////
+
+/// List of font families to use if using GDS Transport (the default font
+/// 'stack' for GOV.UK)
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-gds-transport: "GDS Transport", arial, sans-serif;
+
+/// List of font families to use if using NTA (old font 'stack' for
+/// GOV.UK)
+///
+/// @type List
+/// @access public
+/// @deprecated To be removed once support for compatibility mode is dropped
+
+$govuk-font-family-nta: "nta", arial, sans-serif;
+
+/// List of font families to use if using the 'tabular numbers' subset of NTA
+/// (the default font 'stack' for GOV.UK)
+///
+/// Because ntatabularnumbers only includes the digits 0-10, all other glyphs
+/// will 'fall-through' the stack to NTA.
+///
+/// @type List
+/// @access public
+/// @deprecated To be removed once support for compatibility mode is dropped
+
+$govuk-font-family-nta-tabular: "ntatabularnumbers", $govuk-font-family-nta;
diff --git a/src/govuk/settings/_typography-font.scss b/src/govuk/settings/_typography-font.scss
new file mode 100644
index 0000000000..df0dc642b0
--- /dev/null
+++ b/src/govuk/settings/_typography-font.scss
@@ -0,0 +1,86 @@
+@import "compatibility";
+@import "typography-font-families";
+
+////
+/// @group settings/typography
+////
+
+/// Use 'legacy' fonts
+///
+/// Whether or not to use v1 nta font from GOV.UK Elements / Frontend
+/// Toolkit, for teams that are migrating to GOV.UK Frontend and may be using
+/// components from both places in a single application.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-use-legacy-font: if(
+ (
+ $govuk-compatibility-govukfrontendtoolkit or
+ $govuk-compatibility-govuktemplate or
+ $govuk-compatibility-govukelements
+ ),
+ true,
+ false
+) !default;
+
+// =========================================================
+// Font families
+// =========================================================
+
+/// Font families to use for all typography on screen media
+///
+/// @type List
+/// @access public
+
+$govuk-font-family: if(
+ $govuk-use-legacy-font,
+ $govuk-font-family-nta,
+ $govuk-font-family-gds-transport
+) !default;
+
+/// Font families to use when displaying tabular numbers
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-tabular: if(
+ $govuk-use-legacy-font,
+ $govuk-font-family-nta-tabular,
+ false
+) !default;
+
+/// Font families to use for print media
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-print: sans-serif !default;
+
+/// Include the default @font-face declarations
+///
+/// If you have set $govuk-font-family to something other than
+/// `$govuk-font-family-gds-transport` this option is disabled by default.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-include-default-font-face: (
+ $govuk-font-family == $govuk-font-family-gds-transport
+) !default;
+
+// =========================================================
+// Font weights
+// =========================================================
+
+/// Font weight for regular typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-regular: 400 !default;
+
+/// Font weight for bold typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-bold: 700 !default;
diff --git a/src/govuk/settings/_typography-responsive.scss b/src/govuk/settings/_typography-responsive.scss
new file mode 100644
index 0000000000..21203c3bac
--- /dev/null
+++ b/src/govuk/settings/_typography-responsive.scss
@@ -0,0 +1,183 @@
+@import "compatibility";
+
+////
+/// @group settings/typography
+////
+
+/// Whether or not to define font sizes in rem, improving accessibility by
+/// allowing users to adjust the base font-size. This is enabled by default,
+/// unless any of the compatibility mode settings are enabled.
+///
+/// You should make sure that $govuk-root-font-size is set correctly for your
+/// project.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-typography-use-rem: if(
+ (
+ $govuk-compatibility-govukfrontendtoolkit or
+ $govuk-compatibility-govuktemplate or
+ $govuk-compatibility-govukelements
+ ),
+ false,
+ true
+) !default;
+
+/// Root font size
+///
+/// This is used to calculate rem sizes for the typography, and should match the
+/// _effective_ font-size of your root (or html) element.
+///
+/// Ideally you should not be setting the font-size on the html or root element
+/// in order to allow it to scale with user-preference, in which case this
+/// should be set to 16px.
+///
+/// If you are integrating Frontend into an existing project that also uses
+/// alphagov/govuk_template and you wish to enable `$govuk-typography-use-rem`
+/// then you should set this to 10px to match the 62.5% (10px) base font size
+/// that govuk_template sets on the element.
+///
+/// @type Number
+/// @access public
+
+$govuk-root-font-size: 16px !default;
+
+/// Responsive typography font map
+///
+/// This is used to generate responsive typography that adapts according to the
+/// breakpoints.
+///
+/// Font size and font weight can be defined for each breakpoint. You can define
+/// different behaviour on tablet and desktop. The 'null' breakpoint is for
+/// mobile.
+///
+/// Line-heights will automatically be converted from pixel measurements into
+/// relative values. For example, with a font-size of 16px and a line-height of
+/// 24px, the line-height will be converted to 1.5 before output.
+///
+/// You can also specify a separate font size and line height for print media.
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access public
+
+$govuk-typography-scale: (
+ 80: (
+ null: (
+ font-size: 53px,
+ line-height: 55px
+ ),
+ tablet: (
+ font-size: 80px,
+ line-height: 80px
+ ),
+ print: (
+ font-size: 53pt,
+ line-height: 1.1
+ )
+ ),
+ 48: (
+ null: (
+ font-size: 32px,
+ line-height: 35px
+ ),
+ tablet: (
+ font-size: 48px,
+ line-height: 50px
+ ),
+ print: (
+ font-size: 32pt,
+ line-height: 1.15
+ )
+ ),
+ 36: (
+ null: (
+ font-size: 24px,
+ line-height: 25px
+ ),
+ tablet: (
+ font-size: 36px,
+ line-height: 40px
+ ),
+ print: (
+ font-size: 24pt,
+ line-height: 1.05
+ )
+ ),
+ 27: (
+ null: (
+ font-size: 18px,
+ line-height: 20px
+ ),
+ tablet: (
+ font-size: 27px,
+ line-height: 30px
+ ),
+ print: (
+ font-size: 18pt,
+ line-height: 1.15
+ )
+ ),
+ 24: (
+ null: (
+ font-size: 18px,
+ line-height: 20px
+ ),
+ tablet: (
+ font-size: 24px,
+ line-height: 30px
+ ),
+ print: (
+ font-size: 18pt,
+ line-height: 1.15
+ )
+ ),
+ 19: (
+ null: (
+ font-size: 16px,
+ line-height: 20px
+ ),
+ tablet: (
+ font-size: 19px,
+ line-height: 25px
+ ),
+ print: (
+ font-size: 14pt,
+ line-height: 1.15
+ )
+ ),
+ 16: (
+ null: (
+ font-size: 14px,
+ line-height: 16px
+ ),
+ tablet: (
+ font-size: 16px,
+ line-height: 20px
+ ),
+ print: (
+ font-size: 14pt,
+ line-height: 1.2
+ )
+ ),
+ 14: (
+ null: (
+ font-size: 12px,
+ line-height: 15px
+ ),
+ tablet: (
+ font-size: 14px,
+ line-height: 20px
+ ),
+ print: (
+ font-size: 12pt,
+ line-height: 1.2
+ )
+ )
+) !default;
diff --git a/src/settings/colours.test.js b/src/govuk/settings/colours.test.js
similarity index 78%
rename from src/settings/colours.test.js
rename to src/govuk/settings/colours.test.js
index 15efd83f34..b6e1a20c62 100644
--- a/src/settings/colours.test.js
+++ b/src/govuk/settings/colours.test.js
@@ -1,20 +1,18 @@
/* eslint-env jest */
-const util = require('util')
+const { renderSass } = require('../../../lib/jest-helpers')
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
-
-const configPaths = require('../../config/paths.json')
+const configPaths = require('../../../config/paths.json')
const sassConfig = {
- includePaths: [ configPaths.src, 'node_modules/' ],
+ includePaths: [configPaths.src, 'node_modules/'],
outputStyle: 'compressed'
}
describe('Organisation colours', () => {
it('should define websafe colours that meet contrast requirements', async () => {
const sass = `
+ @import "settings/compatibility";
@import "settings/colours-palette";
@import "settings/colours-organisations";
@import "settings/colours-applied";
@@ -36,6 +34,6 @@ describe('Organisation colours', () => {
}
}`
- await sassRender({ data: sass, ...sassConfig })
+ await renderSass({ data: sass, ...sassConfig })
})
})
diff --git a/src/govuk/settings/settings.test.js b/src/govuk/settings/settings.test.js
new file mode 100644
index 0000000000..896d8a4418
--- /dev/null
+++ b/src/govuk/settings/settings.test.js
@@ -0,0 +1,42 @@
+/* eslint-env jest */
+
+const glob = require('glob')
+const path = require('path')
+
+const sassdoc = require('sassdoc')
+
+const { renderSass } = require('../../../lib/jest-helpers')
+const configPaths = require('../../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/settings/**/*.scss`)
+
+describe('The settings layer', () => {
+ it('should not output any CSS', async () => {
+ const settings = path.join(configPaths.src, 'settings', '_all.scss')
+
+ const output = await renderSass({ file: settings })
+ expect(output.css.toString()).toEqual('')
+ })
+
+ it.each(sassFiles)('%s renders to CSS without errors', (file) => {
+ return renderSass({ file: file })
+ })
+
+ describe('Sass documentation', () => {
+ it('associates everything with a "settings" group', async () => {
+ return sassdoc.parse(path.join(configPaths.src, 'settings', '*.scss'))
+ .then(docs => docs.forEach(doc => {
+ return expect(doc).toMatchObject({
+ // Include doc.context.name in the expected result when this fails,
+ // giving you the context to be able to fix it
+ context: {
+ name: doc.context.name
+ },
+ group: [
+ expect.stringMatching(/^settings/)
+ ]
+ })
+ }))
+ })
+ })
+})
diff --git a/src/govuk/template.njk b/src/govuk/template.njk
new file mode 100644
index 0000000000..13a170f25c
--- /dev/null
+++ b/src/govuk/template.njk
@@ -0,0 +1,60 @@
+{% from "./components/skip-link/macro.njk" import govukSkipLink -%}
+{% from "./components/header/macro.njk" import govukHeader -%}
+{% from "./components/footer/macro.njk" import govukFooter -%}
+{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
+{%- set assetUrl = assetUrl | default(assetPath) -%}
+
+
+
+
+
{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}
+
+ {% block beforeContent %}{% endblock %}
+
+ {% block content %}{% endblock %}
+
+
+ {% endblock %}
+
+ {% block footer %}
+ {{ govukFooter({}) }}
+ {% endblock %}
+
+ {% block bodyEnd %}{% endblock %}
+
+
diff --git a/src/govuk/template.test.js b/src/govuk/template.test.js
new file mode 100644
index 0000000000..7f3dbc4f4e
--- /dev/null
+++ b/src/govuk/template.test.js
@@ -0,0 +1,250 @@
+/* eslint-env jest */
+
+const nunjucks = require('nunjucks')
+const configPaths = require('../../config/paths.json')
+const crypto = require('crypto')
+
+const { renderTemplate } = require('../../lib/jest-helpers')
+
+describe('Template', () => {
+ describe('with default nunjucks configuration', () => {
+ it('should not have any whitespace before the doctype', () => {
+ nunjucks.configure(configPaths.src)
+ const output = nunjucks.render('./template.njk')
+ expect(output.charAt(0)).toEqual('<')
+ })
+ })
+
+ describe('with nunjucks block trimming enabled', () => {
+ it('should not have any whitespace before the doctype', () => {
+ nunjucks.configure(configPaths.src, {
+ trimBlocks: true,
+ lstripBlocks: true
+ })
+ const output = nunjucks.render('./template.njk')
+ expect(output.charAt(0)).toEqual('<')
+ })
+ })
+
+ describe('', () => {
+ it('defaults to lang="en"', () => {
+ const $ = renderTemplate()
+ expect($('html').attr('lang')).toEqual('en')
+ })
+
+ it('can have a custom lang set using htmlLang', () => {
+ const $ = renderTemplate({ htmlLang: 'zu' })
+ expect($('html').attr('lang')).toEqual('zu')
+ })
+
+ it('can have custom classes added using htmlClasses', () => {
+ const $ = renderTemplate({ htmlClasses: 'my-custom-class' })
+ expect($('html').hasClass('my-custom-class')).toBeTruthy()
+ })
+ })
+
+ describe('', () => {
+ it('can have custom social media icons specified using the headIcons block', () => {
+ const headIcons = '', () => {
+ const expectedTitle = 'GOV.UK - The best place to find government services and information'
+ it(`defaults to '${expectedTitle}'`, () => {
+ const $ = renderTemplate()
+ expect($('title').text()).toEqual(expectedTitle)
+ })
+
+ it('can be overridden using the pageTitle block', () => {
+ const $ = renderTemplate({}, { pageTitle: 'Foo' })
+ expect($('title').text()).toEqual('Foo')
+ })
+
+ it('does not have a lang attribute by default', () => {
+ const $ = renderTemplate()
+ expect($('title').attr('lang')).toBeUndefined()
+ })
+
+ it('can have a lang attribute specified using pageTitleLang', () => {
+ const $ = renderTemplate({ pageTitleLang: 'zu' })
+ expect($('title').attr('lang')).toEqual('zu')
+ })
+ })
+ })
+
+ describe('<body>', () => {
+ it('can have custom classes added using bodyClasses', () => {
+ const $ = renderTemplate({ bodyClasses: 'custom-body-class' })
+ expect($('body').hasClass('custom-body-class')).toBeTruthy()
+ })
+
+ it('can have custom attributes added using bodyAttributes', () => {
+ const $ = renderTemplate({ bodyAttributes: { 'data-foo': 'bar' } })
+ expect($('body').attr('data-foo')).toEqual('bar')
+ })
+
+ it('can have additional content added after the opening tag using bodyStart block', () => {
+ const bodyStart = '<div>bodyStart</div>'
+
+ const $ = renderTemplate({}, { bodyStart })
+
+ expect($('body > div:first-of-type').text()).toEqual('bodyStart')
+ })
+
+ it('can have additional content added before the closing tag using bodyEnd block', () => {
+ const bodyEnd = '<div>bodyEnd</div>'
+
+ const $ = renderTemplate({}, { bodyEnd })
+
+ expect($('body > div:last-of-type').text()).toEqual('bodyEnd')
+ })
+
+ describe('inline script that adds "js-enabled" class', () => {
+ it('should match the hash published in docs', () => {
+ const $ = renderTemplate()
+ const script = $('body > script').first().html()
+
+ // Create a base64 encoded hash of the contents of the script tag
+ const hash = crypto.createHash('sha256').update(script).digest('base64')
+
+ // A change to the inline script would be a breaking change, and it would also require
+ // updating the hash published in https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#if-your-javascript-isn-t-working-properly
+ expect('sha256-' + hash).toEqual('sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=')
+ })
+ })
+
+ describe('skip link', () => {
+ it('can be overridden using the skipLink block', () => {
+ const skipLink = '<div class="my-skip-link">skipLink</div>'
+
+ const $ = renderTemplate({}, { skipLink })
+
+ expect($('.my-skip-link').length).toEqual(1)
+ expect($('.govuk-skip-link').length).toEqual(0)
+ })
+ })
+
+ describe('header', () => {
+ it('can be overridden using the header block', () => {
+ const header = '<div class="my-header">header</div>'
+
+ const $ = renderTemplate({}, { header })
+
+ expect($('.my-header').length).toEqual(1)
+ expect($('.govuk-header').length).toEqual(0)
+ })
+ })
+
+ describe('<main>', () => {
+ it('has role="main", supporting browsers that do not natively support HTML5 elements', () => {
+ const $ = renderTemplate()
+ expect($('main').attr('role')).toEqual('main')
+ })
+
+ it('can have custom classes added using mainClasses', () => {
+ const $ = renderTemplate({ mainClasses: 'custom-main-class' })
+ expect($('main').hasClass('custom-main-class')).toBeTruthy()
+ })
+
+ it('does not have a lang attribute by default', () => {
+ const $ = renderTemplate()
+ expect($('main').attr('lang')).toBeUndefined()
+ })
+
+ it('can have a lang attribute specified using mainLang', () => {
+ const $ = renderTemplate({ mainLang: 'zu' })
+ expect($('main').attr('lang')).toEqual('zu')
+ })
+
+ it('can be overridden using the main block', () => {
+ const main = '<main class="my-main">header</main>'
+
+ const $ = renderTemplate({}, { main })
+
+ expect($('main').length).toEqual(1)
+ expect($('main').hasClass('my-main')).toBe(true)
+ })
+
+ it('can have content injected before it using the beforeContent block', () => {
+ const beforeContent = '<div class="before-content">beforeContent</div>'
+
+ const $ = renderTemplate({}, { beforeContent })
+
+ expect($('.before-content').next().is('main')).toBe(true)
+ })
+
+ it('can have content specified using the content block', () => {
+ const content = 'Foo'
+
+ const $ = renderTemplate({}, { content })
+
+ expect($('main').text().trim()).toEqual('Foo')
+ })
+ })
+
+ describe('footer', () => {
+ it('can be overridden using the footer block', () => {
+ const footer = '<div class="my-footer">footer</div>'
+
+ const $ = renderTemplate({}, { footer })
+
+ expect($('.my-footer').length).toEqual(1)
+ expect($('.govuk-footer').length).toEqual(0)
+ })
+ })
+ })
+})
diff --git a/src/tools/_all.scss b/src/govuk/tools/_all.scss
similarity index 100%
rename from src/tools/_all.scss
rename to src/govuk/tools/_all.scss
diff --git a/src/govuk/tools/_compatibility.scss b/src/govuk/tools/_compatibility.scss
new file mode 100644
index 0000000000..9decd65355
--- /dev/null
+++ b/src/govuk/tools/_compatibility.scss
@@ -0,0 +1,36 @@
+////
+/// @group tools/compatibility-mode
+////
+
+/// 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
+
+@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}'";
+ }
+}
diff --git a/src/tools/_exports.scss b/src/govuk/tools/_exports.scss
similarity index 100%
rename from src/tools/_exports.scss
rename to src/govuk/tools/_exports.scss
diff --git a/src/govuk/tools/_font-url.scss b/src/govuk/tools/_font-url.scss
new file mode 100644
index 0000000000..072ae5a608
--- /dev/null
+++ b/src/govuk/tools/_font-url.scss
@@ -0,0 +1,25 @@
+////
+/// @group tools/assets
+////
+
+/// Font URL
+///
+/// If a custom font-url handler is defined ($govuk-font-url-function) then
+/// it will be called, otherwise a url will be returned with the filename
+/// appended to the font path.
+///
+/// @param {String} $filename - Font filename
+/// @return {String} URL for the filename, wrapped in `url()`
+/// @access public
+
+@function govuk-font-url($filename) {
+ $use-custom-function: variable-exists("govuk-font-url-function")
+ and $govuk-font-url-function
+ and function-exists($govuk-font-url-function);
+
+ @if ($use-custom-function) {
+ @return call(get-function($govuk-font-url-function), $filename);
+ } @else {
+ @return url($govuk-fonts-path + $filename);
+ }
+}
diff --git a/src/govuk/tools/_ie8.scss b/src/govuk/tools/_ie8.scss
new file mode 100644
index 0000000000..e1f52da783
--- /dev/null
+++ b/src/govuk/tools/_ie8.scss
@@ -0,0 +1,51 @@
+////
+/// @group tools/internet-explorer-8
+////
+
+/// Conditionally include rules only for IE8
+///
+/// @content Passed content is only outputted if we're compiling a stylesheet
+/// that targets IE8 (if `$govuk-is-ie8` is true)
+///
+/// @example scss - Usage
+///
+/// .foo {
+/// min-width: 100px;
+/// // Specify width for IE8 only
+/// @include govuk-if-ie8 {
+/// width: 100px;
+/// }
+/// }
+///
+/// @access public
+
+@mixin govuk-if-ie8 {
+ @if $govuk-is-ie8 {
+ @content;
+ }
+}
+
+/// Conditionally exclude rules for IE8
+///
+/// @content Passed content is only outputted if we're not compiling a
+/// stylesheet that targets IE8 (if `$govuk-is-ie8` is false)
+///
+/// @example scss - Usage
+///
+/// .foo {
+/// font-weight: bold;
+///
+/// // Enhance foo only for modern browsers (not IE8)
+/// @include govuk-not-ie8 {
+/// font-family: "Comic Sans MS", "Curlz MT" cursive, sans-serif;
+/// color: #FF69B4;
+/// }
+/// }
+///
+/// @access public
+
+@mixin govuk-not-ie8 {
+ @if not $govuk-is-ie8 {
+ @content;
+ }
+}
diff --git a/src/govuk/tools/_iff.scss b/src/govuk/tools/_iff.scss
new file mode 100644
index 0000000000..51cf5f5ffc
--- /dev/null
+++ b/src/govuk/tools/_iff.scss
@@ -0,0 +1,17 @@
+////
+/// @group tools
+////
+
+/// Syntactic sugar around Sass' built-in `if` function that does not require
+/// you to pass a value for `$if-false`.
+///
+/// @param {Boolean} $condition - Whether to return the value of `$if-true`
+/// @param {Mixed} $if-true - Value to return if `$condition` is truthy
+/// @return {Mixed} Value of `$if-true` if `$condition` is truthy, else null
+/// @access private
+/// @deprecated We will be removing this function in a future release, use `if($condition, $if-true, null);` instead.
+
+@function iff($condition, $if-true) {
+ @warn "The `iff` function will be removed in a future release, use `if($condition, $if-true, null);` instead.";
+ @return if($condition, $if-true, null);
+}
diff --git a/src/govuk/tools/_image-url.scss b/src/govuk/tools/_image-url.scss
new file mode 100644
index 0000000000..d3c83967d9
--- /dev/null
+++ b/src/govuk/tools/_image-url.scss
@@ -0,0 +1,25 @@
+////
+/// @group tools/assets
+////
+
+/// Image URL
+///
+/// If a custom image-url handler is defined ($govuk-image-url-function) then
+/// it will be called, otherwise a url will be returned with the filename
+/// appended to the image path.
+///
+/// @param {String} Filename for the image to load
+/// @return {String} URL for the filename, wrapped in `url()`
+/// @access public
+
+@function govuk-image-url($filename) {
+ $use-custom-function: variable-exists("govuk-image-url-function")
+ and $govuk-image-url-function
+ and function-exists($govuk-image-url-function);
+
+ @if ($use-custom-function) {
+ @return call(get-function($govuk-image-url-function), $filename);
+ } @else {
+ @return url($govuk-images-path + $filename);
+ }
+}
diff --git a/src/govuk/tools/_px-to-em.scss b/src/govuk/tools/_px-to-em.scss
new file mode 100644
index 0000000000..733183149e
--- /dev/null
+++ b/src/govuk/tools/_px-to-em.scss
@@ -0,0 +1,20 @@
+////
+/// @group tools/unit-conversion
+////
+
+/// Convert pixels to em
+///
+/// @param {Number} $value - Length in pixels
+/// @param {Number} $context-font-size - Font size of element
+/// @return {Number} Length in ems
+/// @access public
+
+@function govuk-em($value, $context-font-size) {
+ @if (unitless($value)) {
+ $value: $value * 1px;
+ }
+ @if (unitless($context-font-size)) {
+ $context-font-size: $context-font-size * 1px;
+ }
+ @return $value / $context-font-size * 1em;
+}
diff --git a/src/govuk/tools/_px-to-rem.scss b/src/govuk/tools/_px-to-rem.scss
new file mode 100644
index 0000000000..c82fcf001a
--- /dev/null
+++ b/src/govuk/tools/_px-to-rem.scss
@@ -0,0 +1,20 @@
+////
+/// @group tools/unit-conversion
+////
+
+/// Convert pixels to rem
+///
+/// The $govuk-root-font-size (defined in settings/_typography-responsive.scss)
+/// must be configured to match the font-size of your root (html) element
+///
+/// @param {Number} $value - Length in pixels
+/// @return {Number} Length in rems
+/// @access public
+
+@function govuk-px-to-rem($value) {
+ @if (unitless($value)) {
+ $value: $value * 1px;
+ }
+
+ @return $value / $govuk-root-font-size * 1rem;
+}
diff --git a/src/tools/compatibility.test.js b/src/govuk/tools/compatibility.test.js
similarity index 75%
rename from src/tools/compatibility.test.js
rename to src/govuk/tools/compatibility.test.js
index a398bb38ad..d230051be3 100644
--- a/src/tools/compatibility.test.js
+++ b/src/govuk/tools/compatibility.test.js
@@ -1,14 +1,8 @@
/* 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 { renderSass } = require('../../../lib/jest-helpers')
const sassConfig = {
- includePaths: [ configPaths.src ],
outputStyle: 'compressed'
}
@@ -25,7 +19,7 @@ describe('@mixin govuk-compatibility', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString()).toEqual('')
})
@@ -42,7 +36,7 @@ describe('@mixin govuk-compatibility', () => {
}
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toBe('.foo{color:red}')
})
@@ -59,7 +53,7 @@ describe('@mixin govuk-compatibility', () => {
}
}`
- await expect(sassRender({ data: sass, ...sassConfig }))
+ await expect(renderSass({ data: sass, ...sassConfig }))
.rejects
.toThrow('Non existent product \'non_existent_app\'')
})
diff --git a/src/govuk/tools/exports.test.js b/src/govuk/tools/exports.test.js
new file mode 100644
index 0000000000..3192cc77ca
--- /dev/null
+++ b/src/govuk/tools/exports.test.js
@@ -0,0 +1,52 @@
+/* eslint-env jest */
+
+const { renderSass } = require('../../../lib/jest-helpers')
+
+const sassConfig = {
+ outputStyle: 'compressed'
+}
+
+describe('@mixin govuk-exports', () => {
+ it('will only output a named section once', async () => {
+ const sass = `
+ @import "tools/exports";
+
+ @include govuk-exports(foo) {
+ .foo {
+ color: red;
+ }
+ }
+
+ @include govuk-exports(foo) {
+ .foo {
+ color: blue;
+ }
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toEqual('.foo{color:red}')
+ })
+
+ it('will export differently named sections', async () => {
+ const sass = `
+ @import "tools/exports";
+
+ @include govuk-exports(foo) {
+ .foo {
+ color: red;
+ }
+ }
+
+ @include govuk-exports(bar) {
+ .bar {
+ color: blue;
+ }
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim())
+ .toEqual('.foo{color:red}.bar{color:blue}')
+ })
+})
diff --git a/src/tools/font-url.test.js b/src/govuk/tools/font-url.test.js
similarity index 79%
rename from src/tools/font-url.test.js
rename to src/govuk/tools/font-url.test.js
index f328aa1f87..801048da1b 100644
--- a/src/tools/font-url.test.js
+++ b/src/govuk/tools/font-url.test.js
@@ -1,14 +1,8 @@
/* 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 { renderSass } = require('../../../lib/jest-helpers')
const sassConfig = {
- includePaths: [ configPaths.src ],
outputStyle: 'compressed'
}
@@ -24,7 +18,7 @@ describe('@function font-url', () => {
src: govuk-font-url("whatever.woff2");
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toEqual(
'@font-face{font-family:"whatever";src:url("/path/to/fonts/whatever.woff2")}'
@@ -42,7 +36,7 @@ describe('@function font-url', () => {
src: govuk-font-url("whatever.woff2");
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toEqual(
'@font-face{font-family:"whatever";src:"WHATEVER.WOFF2"}'
@@ -65,7 +59,7 @@ describe('@function font-url', () => {
src: govuk-font-url("whatever.woff2");
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toEqual(
'@font-face{font-family:"whatever";src:url("/custom/whatever.woff2")}'
diff --git a/src/govuk/tools/iff.test.js b/src/govuk/tools/iff.test.js
new file mode 100644
index 0000000000..b97c7962bd
--- /dev/null
+++ b/src/govuk/tools/iff.test.js
@@ -0,0 +1,35 @@
+/* eslint-env jest */
+
+const { renderSass } = require('../../../lib/jest-helpers')
+
+const sassConfig = {
+ outputStyle: 'compressed'
+}
+
+describe('@function iff', () => {
+ it('outputs if the condition is truthy', async () => {
+ const sass = `
+ @import 'tools/iff';
+
+ .foo {
+ color: red iff(true, !important);
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo{color:red !important}')
+ })
+
+ it('does not output if the condition is falsey', async () => {
+ const sass = `
+ @import 'tools/iff';
+
+ .foo {
+ color: red iff(false, !important);
+ }`
+
+ const results = await renderSass({ data: sass, ...sassConfig })
+
+ expect(results.css.toString().trim()).toBe('.foo{color:red}')
+ })
+})
diff --git a/src/tools/image-url.test.js b/src/govuk/tools/image-url.test.js
similarity index 77%
rename from src/tools/image-url.test.js
rename to src/govuk/tools/image-url.test.js
index 8fc6ac4de3..3aceb2d01b 100644
--- a/src/tools/image-url.test.js
+++ b/src/govuk/tools/image-url.test.js
@@ -1,14 +1,8 @@
/* 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 { renderSass } = require('../../../lib/jest-helpers')
const sassConfig = {
- includePaths: [ configPaths.src ],
outputStyle: 'compressed'
}
@@ -23,7 +17,7 @@ describe('@function image-url', () => {
background-image: govuk-image-url("baz.png");
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toEqual(
'.foo{background-image:url("/path/to/images/baz.png")}'
@@ -40,7 +34,7 @@ describe('@function image-url', () => {
background-image: govuk-image-url("baz.png");
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toEqual(
'.foo{background-image:"BAZ.PNG"}'
@@ -62,7 +56,7 @@ describe('@function image-url', () => {
background-image: govuk-image-url("baz.png");
}`
- const results = await sassRender({ data: sass, ...sassConfig })
+ const results = await renderSass({ data: sass, ...sassConfig })
expect(results.css.toString().trim()).toEqual(
'.foo{background-image:url("/custom/baz.png")}'
diff --git a/src/govuk/tools/tools.test.js b/src/govuk/tools/tools.test.js
new file mode 100644
index 0000000000..4ef58193bc
--- /dev/null
+++ b/src/govuk/tools/tools.test.js
@@ -0,0 +1,42 @@
+/* eslint-env jest */
+
+const glob = require('glob')
+const path = require('path')
+
+const sassdoc = require('sassdoc')
+
+const { renderSass } = require('../../../lib/jest-helpers')
+const configPaths = require('../../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/tools/**/*.scss`)
+
+describe('The tools layer', () => {
+ it('should not output any CSS', async () => {
+ const tools = path.join(configPaths.src, 'tools', '_all.scss')
+
+ const output = await renderSass({ file: tools })
+ expect(output.css.toString()).toEqual('')
+ })
+
+ it.each(sassFiles)('%s renders to CSS without errors', (file) => {
+ return renderSass({ file: file })
+ })
+
+ describe('Sass documentation', () => {
+ it('associates everything with a "tools" group', async () => {
+ return sassdoc.parse(path.join(configPaths.src, 'tools', '*.scss'))
+ .then(docs => docs.forEach(doc => {
+ return expect(doc).toMatchObject({
+ // Include doc.context.name in the expected result when this fails,
+ // giving you the context to be able to fix it
+ context: {
+ name: doc.context.name
+ },
+ group: [
+ expect.stringMatching(/^tools/)
+ ]
+ })
+ }))
+ })
+ })
+})
diff --git a/src/utilities/_all.scss b/src/govuk/utilities/_all.scss
similarity index 100%
rename from src/utilities/_all.scss
rename to src/govuk/utilities/_all.scss
diff --git a/src/utilities/_clearfix.scss b/src/govuk/utilities/_clearfix.scss
similarity index 100%
rename from src/utilities/_clearfix.scss
rename to src/govuk/utilities/_clearfix.scss
diff --git a/src/govuk/utilities/_visually-hidden.scss b/src/govuk/utilities/_visually-hidden.scss
new file mode 100644
index 0000000000..3bed9490a3
--- /dev/null
+++ b/src/govuk/utilities/_visually-hidden.scss
@@ -0,0 +1,9 @@
+@include govuk-exports("govuk/utilities/visually-hidden") {
+ .govuk-visually-hidden {
+ @include govuk-visually-hidden;
+ }
+
+ .govuk-visually-hidden-focusable {
+ @include govuk-visually-hidden-focusable;
+ }
+}
diff --git a/src/vendor/_sass-mq.scss b/src/govuk/vendor/_sass-mq.scss
similarity index 99%
rename from src/vendor/_sass-mq.scss
rename to src/govuk/vendor/_sass-mq.scss
index 7d69930446..88d1e7e9fb 100644
--- a/src/vendor/_sass-mq.scss
+++ b/src/govuk/vendor/_sass-mq.scss
@@ -1,8 +1,6 @@
// mq() v4.0.2
// sass-mq/sass-mq
-// sass-lint:disable-all
-
@charset "UTF-8"; // Fixes an issue where Ruby locale is not set properly
// See https://github.com/sass-mq/sass-mq/pull/10
@@ -347,5 +345,3 @@ $mq-media-type: all !default;
@if length($mq-show-breakpoints) > 0 {
@include mq-show-breakpoints;
}
-
-// sass-lint:enable-all
diff --git a/src/vendor/polyfills/DOMTokenList.js b/src/govuk/vendor/polyfills/DOMTokenList.js
similarity index 100%
rename from src/vendor/polyfills/DOMTokenList.js
rename to src/govuk/vendor/polyfills/DOMTokenList.js
diff --git a/src/vendor/polyfills/Document.js b/src/govuk/vendor/polyfills/Document.js
similarity index 100%
rename from src/vendor/polyfills/Document.js
rename to src/govuk/vendor/polyfills/Document.js
diff --git a/src/vendor/polyfills/Element.js b/src/govuk/vendor/polyfills/Element.js
similarity index 100%
rename from src/vendor/polyfills/Element.js
rename to src/govuk/vendor/polyfills/Element.js
diff --git a/src/vendor/polyfills/Element/prototype/classList.js b/src/govuk/vendor/polyfills/Element/prototype/classList.js
similarity index 100%
rename from src/vendor/polyfills/Element/prototype/classList.js
rename to src/govuk/vendor/polyfills/Element/prototype/classList.js
diff --git a/src/govuk/vendor/polyfills/Element/prototype/closest.js b/src/govuk/vendor/polyfills/Element/prototype/closest.js
new file mode 100644
index 0000000000..45d193e108
--- /dev/null
+++ b/src/govuk/vendor/polyfills/Element/prototype/closest.js
@@ -0,0 +1,24 @@
+import './matches'
+
+(function(undefined) {
+
+ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/detect.js
+ var detect = (
+ 'document' in this && "closest" in document.documentElement
+ )
+
+ if (detect) return
+
+ // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+ Element.prototype.closest = function closest(selector) {
+ var node = this;
+
+ while (node) {
+ if (node.matches(selector)) return node;
+ else node = 'SVGElement' in window && node instanceof SVGElement ? node.parentNode : node.parentElement;
+ }
+
+ return null;
+ };
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
diff --git a/src/vendor/polyfills/Element/prototype/matches.js b/src/govuk/vendor/polyfills/Element/prototype/matches.js
similarity index 100%
rename from src/vendor/polyfills/Element/prototype/matches.js
rename to src/govuk/vendor/polyfills/Element/prototype/matches.js
diff --git a/src/govuk/vendor/polyfills/Element/prototype/nextElementSibling.js b/src/govuk/vendor/polyfills/Element/prototype/nextElementSibling.js
new file mode 100644
index 0000000000..72ff79caa7
--- /dev/null
+++ b/src/govuk/vendor/polyfills/Element/prototype/nextElementSibling.js
@@ -0,0 +1,22 @@
+import '../../Object/defineProperty'
+import '../../Element'
+
+(function(undefined) {
+
+ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
+ var detect = (
+ 'document' in this && "nextElementSibling" in document.documentElement
+ )
+
+ if (detect) return
+
+ // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+ Object.defineProperty(Element.prototype, "nextElementSibling", {
+ get: function(){
+ var el = this.nextSibling;
+ while (el && el.nodeType !== 1) { el = el.nextSibling; }
+ return el;
+ }
+ });
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
diff --git a/src/govuk/vendor/polyfills/Element/prototype/previousElementSibling.js b/src/govuk/vendor/polyfills/Element/prototype/previousElementSibling.js
new file mode 100644
index 0000000000..daeef5ff60
--- /dev/null
+++ b/src/govuk/vendor/polyfills/Element/prototype/previousElementSibling.js
@@ -0,0 +1,22 @@
+import '../../Object/defineProperty'
+import '../../Element'
+
+(function(undefined) {
+
+ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
+ var detect = (
+ 'document' in this && "previousElementSibling" in document.documentElement
+ )
+
+ if (detect) return
+
+ // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+ Object.defineProperty(Element.prototype, 'previousElementSibling', {
+ get: function(){
+ var el = this.previousSibling;
+ while (el && el.nodeType !== 1) { el = el.previousSibling; }
+ return el;
+ }
+ });
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
diff --git a/src/vendor/polyfills/Event.js b/src/govuk/vendor/polyfills/Event.js
similarity index 100%
rename from src/vendor/polyfills/Event.js
rename to src/govuk/vendor/polyfills/Event.js
diff --git a/src/vendor/polyfills/Function/prototype/bind.js b/src/govuk/vendor/polyfills/Function/prototype/bind.js
similarity index 100%
rename from src/vendor/polyfills/Function/prototype/bind.js
rename to src/govuk/vendor/polyfills/Function/prototype/bind.js
diff --git a/src/vendor/polyfills/Object/defineProperty.js b/src/govuk/vendor/polyfills/Object/defineProperty.js
similarity index 100%
rename from src/vendor/polyfills/Object/defineProperty.js
rename to src/govuk/vendor/polyfills/Object/defineProperty.js
diff --git a/src/vendor/polyfills/Window.js b/src/govuk/vendor/polyfills/Window.js
similarity index 100%
rename from src/vendor/polyfills/Window.js
rename to src/govuk/vendor/polyfills/Window.js
diff --git a/src/helpers/_all.scss b/src/helpers/_all.scss
deleted file mode 100644
index 2bf0991315..0000000000
--- a/src/helpers/_all.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "clearfix";
-@import "colour";
-@import "device-pixels";
-@import "focusable";
-//@import "font-faces";
-@import "grid";
-@import "links";
-@import "media-queries";
-@import "shape-arrow";
-@import "spacing";
-@import "typography";
-@import "visually-hidden";
-
-@import "_sdn/all";
diff --git a/src/helpers/_clearfix.scss b/src/helpers/_clearfix.scss
deleted file mode 100644
index b5c2e14419..0000000000
--- a/src/helpers/_clearfix.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Clear floated content within a container using a pseudo element
-///
-/// @access public
-
-@mixin govuk-clearfix {
- &:after {
- content: "";
- display: block;
- clear: both;
- }
-}
diff --git a/src/helpers/_colour.scss b/src/helpers/_colour.scss
deleted file mode 100644
index 8c9e58a7ea..0000000000
--- a/src/helpers/_colour.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import "../settings/colours-palette";
-@import "../settings/colours-organisations";
-
-////
-/// @group helpers/colour
-////
-
-/// Get colour
-///
-/// @param {String} $colour - Name of colour from the colour palette
-/// (`$govuk-colours`)
-/// @return {Colour} Representation of named colour
-/// @throw if `$colour` is not a colour from the colour palette
-/// @access public
-
-@function govuk-colour($colour) {
- $colour: quote($colour);
-
- @if not map-has-key($govuk-colours, $colour) {
- @error "Unknown colour `#{$colour}`";
- }
-
- @return map-get($govuk-colours, $colour);
-}
-
-/// Get the colour for a government organisation
-///
-/// @param {String} $organisation - Organisation name, lowercase, hyphenated
-/// @param {Boolean} $websafe [true] - By default a 'websafe' version of the
-/// colour will be returned which meets contrast requirements . If you want to
-/// use the non-websafe version you can set this to `false` but your should
-/// ensure that you still meets contrast requirements for accessibility - for
-/// example, don't use the non-websafe version for text.
-///
-/// @return {Colour} Representation of colour for organisation
-/// @throw if `$organisation` is not a known organisation
-/// @access public
-
-@function govuk-organisation-colour($organisation, $websafe: true) {
- @if not map-has-key($govuk-colours-organisations, $organisation) {
- @error "Unknown organisation `#{$organisation}`";
- }
-
- $org-colour: map-get($govuk-colours-organisations, $organisation);
-
- @if ($websafe and map-has-key($org-colour, colour-websafe)) {
- @return map-get($org-colour, colour-websafe);
- } @else {
- @return map-get($org-colour, colour);
- }
-}
diff --git a/src/helpers/_device-pixels.scss b/src/helpers/_device-pixels.scss
deleted file mode 100644
index d2b0f77693..0000000000
--- a/src/helpers/_device-pixels.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Media query for retina images (device-pixel-ratio)
-///
-/// @param {Number} $ratio [2] - Device pixel ratio
-/// @content Passed content will be outputted within the media query
-///
-/// @example scss - Providing a @2x image for screens that support it
-/// background-image: govuk-image-url("my-image.png");
-///
-/// @include govuk-device-pixel-ratio {
-/// background-image: govuk-image-url("my-image-2x.png");
-/// }
-///
-/// @example scss - Using a custom ratio
-/// background-image: govuk-image-url("my-image.png");
-///
-/// @include govuk-device-pixel-ratio {
-/// background-image: govuk-image-url("my-image-2x.png");
-/// }
-///
-/// @include govuk-device-pixel-ratio(3) {
-/// background-image: govuk-image-url("my-image-3x.png");
-/// }
-///
-/// @access public
-
-@mixin govuk-device-pixel-ratio($ratio: 2) {
- @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
- only screen and (min--moz-device-pixel-ratio: $ratio),
- only screen and ( -o-min-device-pixel-ratio: #{($ratio*10)} / 10),
- only screen and ( min-device-pixel-ratio: $ratio),
- only screen and ( min-resolution: #{($ratio*96)}dpi),
- only screen and ( min-resolution: #{$ratio}dppx) {
- @content;
- }
-}
diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss
deleted file mode 100644
index 4b80de08cd..0000000000
--- a/src/helpers/_focusable.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Focusable helper
-///
-/// Provides an additional outline to clearly indicate when the target element is
-/// focussed. Used for interactive elements which themselves have some background
-/// or border, such as most form elements.
-///
-/// @access public
-
-@mixin govuk-focusable {
- &:focus {
- outline: $govuk-focus-width solid $govuk-focus-colour;
- outline-offset: 0;
- }
-}
-
-/// Focusable with fill helper
-///
-/// Provides an additional outline and background colour to clearly indicate when
-/// the target element is focussed. Used for interactive text-based elements such
-/// as links.
-///
-/// @access public
-
-@mixin govuk-focusable-fill {
- &:focus {
- outline: $govuk-focus-width solid $govuk-focus-colour;
- outline-offset: 0;
- background-color: $govuk-focus-colour;
- }
-}
diff --git a/src/helpers/_font-faces.scss b/src/helpers/_font-faces.scss
deleted file mode 100644
index 794c0a7bdf..0000000000
--- a/src/helpers/_font-faces.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-////
-/// @group helpers
-////
-
-// Disables linting for this file only
-// sass-lint:disable no-css-comments, no-duplicate-properties, property-sort-order, indentation
-
-@import "../tools/exports";
-
-/// Font Face - NTA
-///
-/// Outputs the font-face declaration for NTA at the root of the CSS document
-/// the first time it is called.
-///
-/// @access private
-
-@mixin _govuk-font-face-nta {
- @include govuk-exports("govuk/helpers/font-face") {
- @at-root {
- /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
-
- @font-face {
- font-family: "nta";
- src: govuk-font-url("light-2c037cf7e1-v1.eot");
- src: govuk-font-url("light-2c037cf7e1-v1.eot?#iefix") format("embedded-opentype"),
- govuk-font-url("light-f38ad40456-v1.woff2") format("woff2"),
- govuk-font-url("light-458f8ea81c-v1.woff") format("woff");
- font-weight: normal;
- font-style: normal;
- font-display: fallback;
- }
-
- @font-face {
- font-family: "nta";
- src: govuk-font-url("bold-fb2676462a-v1.eot");
- src: govuk-font-url("bold-fb2676462a-v1.eot?#iefix") format("embedded-opentype"),
- govuk-font-url("bold-a2452cb66f-v1.woff2") format("woff2"),
- govuk-font-url("bold-f38c792ac2-v1.woff") format("woff");
- font-weight: bold;
- font-style: normal;
- font-display: fallback;
- }
-
- @font-face {
- font-family: "ntatabularnumbers";
- src: govuk-font-url("light-tabular-498ea8ffe2-v1.eot");
- src: govuk-font-url("light-tabular-498ea8ffe2-v1.eot?#iefix") format("embedded-opentype"),
- govuk-font-url("light-tabular-851b10ccdd-v1.woff2") format("woff2"),
- govuk-font-url("light-tabular-62cc6f0a28-v1.woff") format("woff");
- font-weight: normal;
- font-style: normal;
- font-display: fallback;
- }
-
- @font-face {
- font-family: "ntatabularnumbers";
- src: govuk-font-url("bold-tabular-357fdfbcc3-v1.eot");
- src: govuk-font-url("bold-tabular-357fdfbcc3-v1.eot?#iefix") format("embedded-opentype"),
- govuk-font-url("bold-tabular-b89238d840-v1.woff2") format("woff2"),
- govuk-font-url("bold-tabular-784c21afb8-v1.woff") format("woff");
- font-weight: bold;
- font-style: normal;
- font-display: fallback;
- }
- }
- }
-}
diff --git a/src/helpers/_grid.scss b/src/helpers/_grid.scss
deleted file mode 100644
index 605c0e3e1a..0000000000
--- a/src/helpers/_grid.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Grid width percentage
-///
-/// @param {String} $key - Name of grid width (e.g. two-thirds)
-/// @return {Number} Percentage width
-/// @throw if `$key` is not a valid grid width
-/// @access public
-
-@function govuk-grid-width($key) {
- @if map-has-key($govuk-grid-widths, $key) {
- @return map-get($govuk-grid-widths, $key);
- }
-
- @error "Unknown grid width `#{$key}`";
-}
-
-/// Grid width percentage (alias)
-///
-/// @alias govuk-grid-width
-/// @deprecated To be removed in v3.0, replaced by govuk-grid-width
-@function grid-width($key) {
- @return govuk-grid-width($key);
-}
-
-/// Generate grid row styles
-///
-/// Creates a grid row class with a standardised margin.
-///
-/// @param {String} $class [govuk-grid-row] CSS class name
-///
-/// @example scss - Default
-/// @include govuk-grid-row;
-///
-/// @example scss - Customising the class name
-/// @include govuk-grid-row("app-grid");
-///
-/// @access public
-/// @deprecated To be removed in v3.0, replaced by the govuk-grid-row class
-
-@mixin govuk-grid-row($class: "govuk-grid-row") {
- .#{$class} {
- @include govuk-clearfix;
- margin-right: - ($govuk-gutter-half);
- margin-left: - ($govuk-gutter-half);
- }
-}
-
-/// Generate grid column styles
-///
-/// Creates a grid column with standard gutter between the columns.
-///
-/// If a `$class` is provided (which is the default, but deprecated behaviour),
-/// the generated rules will be wrapped in a predefined selector in the format
-/// `$class-$width` (e.g. `govuk-grid-column-full`). This behaviour is
-/// deprecated and will be removed in v3.0
-///
-/// Grid widths are defined in the `$govuk-grid-widths` map.
-///
-/// By default the column width changes from 100% to specified width at the
-/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
-/// parameter.
-///
-/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
-/// @param {String} $float [left] left | right
-/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
-/// @param {String} $class [govuk-grid-column] CSS class name (deprecated)
-///
-/// @example scss - Default
-/// .govuk-grid-column-two-thirds {
-/// @include govuk-grid-column(two-thirds, $class: false)
-/// }
-///
-/// @example scss - Customising the breakpoint where width percentage is applied
-/// .govuk-grid-column-one-half-at-desktop {
-/// @include govuk-grid-column(one-half, $at: desktop);
-/// }
-///
-/// @example scss - Customising the float direction
-/// .govuk-grid-column-one-half-right {
-/// @include govuk-grid-column(two-thirds, $float: right, $class: false);
-/// }
-///
-/// @example scss - Customising the class name (deprecated)
-/// @include govuk-grid-column(one-half, $class: "test-column");
-///
-/// @access public
-
-@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "govuk-grid-column") {
- @if ($class) {
- .#{$class}-#{$width} {
- @include govuk-grid-column($width, $float, $at, $class: false);
- }
- } @else {
- box-sizing: border-box;
- @if $at != desktop {
- width: 100%;
- }
- padding: 0 $govuk-gutter-half;
- @include govuk-media-query($from: $at) {
- width: govuk-grid-width($width);
- float: $float;
- }
- }
-}
diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss
deleted file mode 100644
index a828592cc3..0000000000
--- a/src/helpers/_links.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Common link mixin
-///
-/// Provides the typography and focus state, regardless of link style.
-///
-/// @access public
-
-@mixin govuk-link-common {
- @include govuk-typography-common;
- @include govuk-focusable-fill;
-}
-
-/// Default link style mixin
-///
-/// Provides the default unvisited, visited, hover and active states for links.
-///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
-///
-/// @example scss
-/// .govuk-component__link {
-/// @include govuk-link-common;
-/// @include govuk-link-style-default;
-/// }
-///
-/// @access public
-
-@mixin govuk-link-style-default {
- &:link {
- color: $govuk-link-colour;
- }
-
- &:visited {
- color: $govuk-link-visited-colour;
- }
-
- &:hover {
- color: $govuk-link-hover-colour;
- }
-
- &:active {
- color: $govuk-link-active-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: $govuk-focus-text-colour;
- }
-}
-
-/// Muted style link mixin
-///
-/// Used for secondary links on a page - the link will appear in muted colours
-/// regardless of visited state.
-///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
-///
-/// @example scss
-/// .govuk-component__link {
-/// @include govuk-link-common;
-/// @include govuk-link-style-muted;
-/// }
-///
-/// @access public
-
-@mixin govuk-link-style-muted {
- &:link,
- &:visited,
- &:hover,
- &:active {
- color: $govuk-secondary-text-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &: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 style link mixin
-///
-/// Overrides the colour of links to match the text colour. Generally used by
-/// navigation components, such as breadcrumbs or the back link.
-///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
-///
-/// @example scss
-/// .govuk-component__link {
-/// @include govuk-link-common;
-/// @include govuk-link-style-text;
-/// }
-///
-/// @access public
-
-@mixin govuk-link-style-text {
- // Override link colour to use text colour
- &:link,
- &:visited,
- &:hover,
- &:active,
- &: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;
- }
- }
-}
-
-
-/// No visited state link mixin
-///
-/// Used in cases where it is not helpful to distinguish between visited and
-/// non-visited links.
-///
-/// For example, navigation links to pages with dynamic content like admin
-/// dashboards. The content on the page is changing all the time, so the fact
-/// that you’ve visited it before is not important.
-///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
-///
-/// @example scss
-/// .govuk-component__link {
-/// @include govuk-link-common;
-/// @include govuk-link-style-no-visited-state;
-/// }
-///
-/// @access public
-
-@mixin govuk-link-style-no-visited-state {
- &:link {
- color: $govuk-link-colour;
- }
-
- &:visited {
- color: $govuk-link-colour;
- }
-
- &:hover {
- color: $govuk-link-hover-colour;
- }
-
- &:active {
- color: $govuk-link-active-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: $govuk-focus-text-colour;
- }
-}
-
-/// Print friendly link mixin
-///
-/// When printing, append the the destination URL to the link text, as long
-/// as the URL starts with either `/`, `http://` or `https://`.
-///
-/// @access public
-
-@mixin govuk-link-print-friendly {
- @include govuk-media-query($media-type: print) {
-
- &[href^="/"],
- &[href^="http://"],
- &[href^="https://"] {
- &::after {
- content: " (" attr(href) ")";
- font-size: 90%;
-
- // Because the URLs may be very long, ensure that they may be broken
- // at arbitrary points if there are no otherwise acceptable break
- // points in the line
- word-wrap: break-word;
- }
- }
- }
-}
diff --git a/src/helpers/_media-queries.scss b/src/helpers/_media-queries.scss
deleted file mode 100644
index 00ea0ae6c2..0000000000
--- a/src/helpers/_media-queries.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-////
-/// @group helpers
-////
-
-
-
-// =========================================================
-// Wrangle sass-mq config...
-// =========================================================
-
-// Pass our breakpoints and static breakpoint definitions through to sass-mq.
-$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
-$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop);
-
-$mq-show-breakpoints: ();
-
-@if (variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints) {
- $mq-show-breakpoints: map-keys($govuk-breakpoints);
-}
-
-// When building a stylesheet for IE8, set $mq-responsive to false in order to
-// 'rasterize' any media queries.
-
-$mq-responsive: true;
-@if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) {
- $mq-responsive: false;
-}
-
-// This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
-// the current breakpoint from being included multiple times.
-//
-// We can't use the `exports` mixin for this because import directives cannot be
-// used within control directives 😠
-$sass-mq-already-included: false !default;
-
-@if $sass-mq-already-included {
- $mq-show-breakpoints: ();
-}
-
-@import "../vendor/sass-mq";
-
-$sass-mq-already-included: true;
-
-
-
-// =========================================================
-// Helpers
-// =========================================================
-
-/// Media Query
-///
-/// This is a currently a wrapper for sass-mq - abstracted so that we can
-/// replace it in the future if we so choose.
-///
-/// @param {String | Boolean} $from [false] - One of $govuk-breakpoints
-/// @param {String | Boolean} $until [false] - One of $govuk-breakpoints
-/// @param {String | Boolean} $and [false] - Additional media query parameters
-/// @param {String} $media-type [all] - Media type: screen, print…
-///
-/// @ignore Undocumented mq API, for advanced use only:
-/// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
-/// @ignore @param {String} $static-breakpoint [$govuk-ie8-breakpoint]
-/// @ignore @param {Boolean} $responsive [$govuk-is-ie8]
-///
-/// @content styling rules, wrapped into a @media query when $responsive is true
-///
-/// @example scss
-/// .element {
-/// @include govuk-media-query($from: mobile) {
-/// color: red;
-/// }
-/// @include govuk-media-query($until: tablet) {
-/// color: blue;
-/// }
-/// @include govuk-media-query(mobile, tablet) {
-/// color: green;
-/// }
-/// @include govuk-media-query($from: tablet, $and: '(orientation: landscape)') {
-/// color: teal;
-/// }
-/// @include govuk-media-query(950px) {
-/// color: hotpink;
-/// }
-/// @include govuk-media-query(tablet, $media-type: screen) {
-/// color: hotpink;
-/// }
-/// }
-///
-/// @access public
-
-@mixin govuk-media-query($args...) {
- @include mq($args...) {
- @content;
- };
-}
diff --git a/src/helpers/_shape-arrow.scss b/src/helpers/_shape-arrow.scss
deleted file mode 100644
index 0b9ba3c22f..0000000000
--- a/src/helpers/_shape-arrow.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Calculate the height of an equilateral triangle
-///
-/// Multiplying half the length of the base of an equilateral triangle by the
-/// square root of three gives us its height. We use 1.732 as an approximation.
-///
-/// @param {Number} $base - Length of the base of the triangle
-/// @return {Number} Calculated height of the triangle
-/// @access private
-
-@function _govuk-equilateral-height($base) {
- $square-root-of-three: 1.732;
-
- @return ($base / 2) * $square-root-of-three;
-}
-
-/// Arrow mixin
-///
-/// Generate Arrows (triangles) by using a mix of transparent (1) and coloured
-/// borders. The coloured borders inherit the text colour of the element (2).
-///
-/// Ensure the arrow is rendered correctly if browser colours are overridden by
-/// providing a clip path (3). Without this the transparent borders are
-/// overridden to become visible which results in a square.
-///
-/// We need both because older browsers do not support clip-path.
-///
-/// @param {String} $direction - Direction for arrow: up, right, down, left.
-/// @param {Number} $base - Length of the triangle 'base' side
-/// @param {Number} $height [null] - Height of triangle. Omit for equilateral.
-/// @param {String} $display [block] - CSS display property of the arrow
-///
-/// @access public
-
-@mixin govuk-shape-arrow($direction, $base, $height: null, $display: block) {
- display: $display;
-
- width: 0;
- height: 0;
-
- border-style: solid;
- border-color: transparent; // 1
-
- $perpendicular: $base / 2;
-
- @if ($height == null) {
- $height: _govuk-equilateral-height($base);
- }
-
- @if $direction == "up" {
- clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
-
- border-width: 0 $perpendicular $height $perpendicular;
- border-bottom-color: inherit; // 2
- } @else if $direction == "right" {
- clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3
-
- border-width: $perpendicular 0 $perpendicular $height;
- border-left-color: inherit; // 2
- } @else if $direction == "down" {
- clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3
-
- border-width: $height $perpendicular 0 $perpendicular;
- border-top-color: inherit; // 2
- } @else if $direction == "left" {
- clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3
-
- border-width: $perpendicular $height $perpendicular 0;
- border-right-color: inherit; // 2
- } @else {
- @error "Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`";
- }
-}
diff --git a/src/helpers/_spacing.scss b/src/helpers/_spacing.scss
deleted file mode 100644
index 343ec8175c..0000000000
--- a/src/helpers/_spacing.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Single point spacing
-///
-/// Returns measurement corresponding to the spacing point requested.
-///
-/// @param {Number} $spacing-point - Point on the spacing scale (set in `settings/_spacing.sccs`)
-///
-/// @returns {String} Spacing Measurement eg. 10px
-///
-/// @example scss
-/// .element {
-/// padding: govuk-spacing(5);
-/// top: govuk-spacing(2) !important; // if `!important` is required
-/// }
-/// @access public
-
-@function govuk-spacing($spacing-point) {
-
- $actual-input-type: type-of($spacing-point);
- @if $actual-input-type != "number" {
- @error "Expected a number (integer), but got a "
- + "#{$actual-input-type}.";
- }
-
- @if not map-has-key($govuk-spacing-points, $spacing-point) {
- @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
- }
-
- @return map-get($govuk-spacing-points, $spacing-point);
-}
-
-/// Responsive spacing
-///
-/// Adds responsive spacing (either padding or margin, depending on `$property`)
-/// by fetching a 'spacing map' from the responsive spacing scale, which defines
-/// different spacing values at different breakpoints.
-///
-/// To generate responsive spacing, use 'govuk-responsive-margin' or
-/// 'govuk-responsive-padding' mixins
-///
-/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
-/// scale, corresponds to a map of breakpoints and spacing values
-/// @param {String} $property - Property to add spacing to (e.g. 'margin')
-/// @param {String} $direction [all] - Direction to add spacing to
-/// (`top`, `right`, `bottom`, `left`, `all`)
-/// @param {Boolean} $important [false] - Whether to mark as `!important`
-/// @param {Number} $adjustment [false] - Offset to adjust spacing by
-///
-/// @access private
-
-@mixin _govuk-responsive-spacing($responsive-spacing-point, $property, $direction: "all", $important: false, $adjustment: false) {
-
- $actual-input-type: type-of($responsive-spacing-point);
- @if $actual-input-type != "number" {
- @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
- }
-
- @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
- @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
- + "responsive spacing scale in `_settings/spacing.scss`.";
- }
-
- // Make sure that the return value from `_settings/spacing.scss` is a map.
- $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);
- $actual-map-type: type-of($scale-map);
- @if $actual-map-type != "map" {
- @error "Expected a number (integer), but got a "
- + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
- }
-
- // Loop through each breakpoint in the map
- @each $breakpoint, $breakpoint-value in $scale-map {
-
- @if ($adjustment) {
- $breakpoint-value: $breakpoint-value + $adjustment;
- }
-
- // The 'null' breakpoint is for mobile.
- @if $breakpoint == null {
-
- @if $direction == all {
- #{$property}: $breakpoint-value iff($important, !important);
- } @else {
- #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
- }
- } @else {
- @include govuk-media-query($from: $breakpoint) {
- @if $direction == all {
- #{$property}: $breakpoint-value iff($important, !important);
- } @else {
- #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
- }
- }
- }
- }
-}
-
-/// Responsive margin
-///
-/// Adds responsive margin by fetching a 'spacing map' from the responsive
-/// spacing scale, which defines different spacing values at different
-/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
-///
-/// @see {mixin} _govuk-responsive-spacing
-///
-/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
-/// scale, corresponds to a map of breakpoints and spacing values
-/// @param {String} $direction [all] - Direction to add spacing to
-/// (`top`, `right`, `bottom`, `left`, `all`)
-/// @param {Boolean} $important [false] - Whether to mark as `!important`
-/// @param {Number} $adjustment [false] - Offset to adjust spacing by
-///
-/// @example scss
-/// .element {
-/// @include govuk-responsive-margin(6, "left", $adjustment: 1px);
-/// }
-///
-/// @access public
-
-@mixin govuk-responsive-margin($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
- @include _govuk-responsive-spacing($responsive-spacing-point, "margin", $direction, $important, $adjustment);
-}
-
-/// Responsive padding
-///
-/// Adds responsive padding by fetching a 'spacing map' from the responsive
-/// spacing scale, which defines different spacing values at different
-/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
-///
-/// @see {mixin} _govuk-responsive-spacing
-///
-/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
-/// scale, corresponds to a map of breakpoints and spacing values
-/// @param {String} $direction [all] - Direction to add spacing to
-/// (`top`, `right`, `bottom`, `left`, `all`)
-/// @param {Boolean} $important [false] - Whether to mark as `!important`
-/// @param {Number} $adjustment [false] - Offset to adjust spacing
-///
-/// @example scss
-/// .element {
-/// @include govuk-responsive-padding(6, "left", $adjustment: 1px);
-/// }
-///
-/// @access public
-
-
-@mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
- @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
-}
diff --git a/src/helpers/_typography.scss b/src/helpers/_typography.scss
deleted file mode 100644
index 7248a83733..0000000000
--- a/src/helpers/_typography.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-////
-/// @group helpers
-////
-
-@import "../tools/px-to-rem";
-
-/// 'Common typography' helper
-///
-/// Sets the font family and associated properties, such as font smoothing. Also
-/// overrides the font for print.
-///
-/// @param {List} $font-family [$govuk-font-family] Font family to use
-/// @access public
-
-@mixin govuk-typography-common($font-family: $govuk-font-family) {
- font-family: $font-family;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- // If the user is using the default NTA font we need to include the font-face declarations.
- // We do not need to include the NTA font-face declarations if alphagov/govuk_template is being used since they will already be included.
- @if ($govuk-include-default-font-face) {
- @include _govuk-font-face-nta;
- }
-
- @include govuk-media-query($media-type: print) {
- font-family: $govuk-font-family-print;
- }
-}
-
-/// Text colour helper
-///
-/// Sets the text colour, including a suitable override for print.
-///
-/// @access public
-
-@mixin govuk-text-colour {
- color: $govuk-text-colour;
-
- @include govuk-media-query($media-type: print) {
- color: $govuk-print-text-colour;
- }
-}
-
-/// Regular font weight helper
-///
-/// @param {Boolean} $important [false] - Whether to mark declarations as
-/// `!important`. Generally Used to create override classes.
-/// @access public
-
-@mixin govuk-typography-weight-regular($important: false) {
- font-weight: $govuk-font-weight-regular iff($important, !important);
-}
-
-/// Bold font weight helper
-///
-/// @param {Boolean} $important [false] - Whether to mark declarations as
-/// `!important`. Generally Used to create override classes.
-/// @access public
-
-@mixin govuk-typography-weight-bold($important: false) {
- font-weight: $govuk-font-weight-bold iff($important, !important);
-}
-
-/// Convert line-heights specified in pixels into a relative value, unless
-/// they are already unit-less (and thus already treated as relative values)
-/// or the units do not match the units used for the font size.
-///
-/// @param {Number} $line-height Line height
-/// @param {Number} $font-size Font size
-/// @return {Number} The line height as either a relative value or unmodified
-///
-/// @access private
-@function _govuk-line-height($line-height, $font-size) {
- @if not unitless($line-height) and unit($line-height) == unit($font-size) {
- $line-height: $line-height / $font-size;
- }
-
- @return $line-height;
-}
-
-/// Responsive typography helper
-///
-/// Takes a 'font map' as an argument and uses it to create font-size and
-/// line-height declarations for different breakpoints, and for print.
-///
-/// Example font map:
-///
-/// $my-font-map: (
-/// null: (
-/// font-size: 16px,
-/// line-height: 20px
-/// ),
-/// tablet: (
-/// font-size: 19px,
-/// line-height: 25px
-/// ),
-/// print: (
-/// font-size: 14pt,
-/// line-height: 1.15
-/// )
-/// );
-///
-/// @param {Map} $font-map - Font map
-/// @param {Number} $override-line-height [false] - Non responsive custom line
-/// height. Omit to use the line height from the font map.
-/// @param {Boolean} $important [false] - Whether to mark declarations as
-/// `!important`.
-///
-/// @access public
-
-@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
-
- @if not map-has-key($govuk-typography-scale, $size) {
- @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
- }
-
- $font-map: map-get($govuk-typography-scale, $size);
-
- @each $breakpoint, $breakpoint-map in $font-map {
- $font-size: map-get($breakpoint-map, "font-size");
- $font-size-rem: govuk-px-to-rem($font-size);
-
- $line-height: _govuk-line-height(
- $line-height: if($override-line-height,
- $override-line-height,
- map-get($breakpoint-map, "line-height")
- ),
- $font-size: $font-size
- );
-
- // Mark rules as !important if $important is true - this will result in
- // these variables becoming strings, so this needs to happen *after* they
- // are used in calculations
- $font-size: $font-size iff($important, !important);
- $font-size-rem: $font-size-rem iff($important, !important);
- $line-height: $line-height iff($important, !important);
-
- @if $breakpoint == null {
- font-size: $font-size; // sass-lint:disable no-duplicate-properties
- @if $govuk-typography-use-rem {
- font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
- }
- line-height: $line-height;
- } @elseif $breakpoint == "print" {
- @include govuk-media-query($media-type: print) {
- font-size: $font-size;
- line-height: $line-height;
- }
- } @else {
- @include govuk-media-query($from: $breakpoint) {
- font-size: $font-size; // sass-lint:disable no-duplicate-properties
- @if $govuk-typography-use-rem {
- font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
- }
- line-height: $line-height;
- }
- }
- }
-}
-
-/// Font helper
-///
-/// @param {Number} $size - Size of the font as it would appear on desktop -
-/// uses the responsive font size map
-/// @param {String} $weight [regular] - Weight: `bold` or `regular`
-/// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not
-/// @param {Number} $line-height [false] - Line-height, if overriding the default
-///
-/// @access public
-
-@mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
- @if $tabular {
- @include govuk-typography-common($font-family: $govuk-font-family-tabular);
- } @else {
- @include govuk-typography-common;
- }
-
- @if $weight == regular {
- @include govuk-typography-weight-regular;
- } @else if $weight == bold {
- @include govuk-typography-weight-bold;
- }
-
- @if $size {
- @include govuk-typography-responsive($size, $override-line-height: $line-height);
- }
-}
diff --git a/src/helpers/_visually-hidden.scss b/src/helpers/_visually-hidden.scss
deleted file mode 100644
index f50895a081..0000000000
--- a/src/helpers/_visually-hidden.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Hide an element visually, but have it available for screen readers
-///
-/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-/// - Hiding Content for Accessibility, Jonathan Snook, February 2011
-/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
-/// - h5bp/html5-boilerplate - Thanks!
-///
-/// @param {Boolean} $important [true] - Whether to mark as `!important`
-///
-/// @access public
-
-@mixin govuk-visually-hidden($important: true) {
- position: absolute iff($important, !important);
-
- width: 1px iff($important, !important);
- height: 1px iff($important, !important);
- // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
- margin: 0 iff($important, !important);
- padding: 0 iff($important, !important);
-
- overflow: hidden iff($important, !important);
- clip: rect(0 0 0 0) iff($important, !important);
- clip-path: inset(50%) iff($important, !important);
-
- border: 0 iff($important, !important);
-
- // For long content, line feeds are not interpreted as spaces and small width
- // causes content to wrap 1 word per line:
- // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- white-space: nowrap iff($important, !important);
-}
-
-/// Hide an element visually, but have it available for screen readers whilst
-/// allowing the element to be focused when navigated to via the keyboard (e.g.
-/// for the skip link)
-///
-/// This is slightly less opinionated about borders and padding to make it
-/// easier to style the focussed element.
-///
-/// @param {Boolean} $important [true] - Whether to mark as `!important`
-///
-/// @access public
-
-@mixin govuk-visually-hidden-focusable($important: true) {
- position: absolute iff($important, !important);
-
- width: 1px iff($important, !important);
- height: 1px iff($important, !important);
- // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
- margin: 0 iff($important, !important);
-
- overflow: hidden iff($important, !important);
- clip: rect(0 0 0 0) iff($important, !important);
- clip-path: inset(50%) iff($important, !important);
-
- // For long content, line feeds are not interpreted as spaces and small width
- // causes content to wrap 1 word per line:
- // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- white-space: nowrap iff($important, !important);
-
- &:active,
- &:focus {
- position: static iff($important, !important);
-
- width: auto iff($important, !important);
- height: auto iff($important, !important);
- margin: inherit iff($important, !important);
-
- overflow: visible iff($important, !important);
- clip: auto iff($important, !important);
- clip-path: none iff($important, !important);
-
- white-space: inherit iff($important, !important);
- }
-}
diff --git a/src/helpers/colour.test.js b/src/helpers/colour.test.js
deleted file mode 100644
index f619ddf889..0000000000
--- a/src/helpers/colour.test.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/* 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 ],
- outputStyle: 'compact'
-}
-
-describe('@function govuk-colour', () => {
- const sassBootstrap = `
- $govuk-colours: (
- "red": #ff0000,
- "green": #00ff00,
- "blue": #0000ff
- );
-
- @import "helpers/colour";
- `
-
- it('returns a colour from the colour palette', async () => {
- const sass = `
- ${sassBootstrap}
-
- .foo {
- color: govuk-colour('red');
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }')
- })
-
- it('works with unquoted strings', async () => {
- const sass = `
- ${sassBootstrap}
-
- .foo {
- color: govuk-colour(red);
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe('.foo { color: #ff0000; }')
- })
-
- it('throws an error if a non-existent colour is requested', async () => {
- const sass = `
- ${sassBootstrap}
-
- .foo {
- color: govuk-colour('hooloovoo');
- }`
-
- await expect(sassRender({ data: sass, ...sassConfig }))
- .rejects
- .toThrow(
- 'Unknown colour `hooloovoo`'
- )
- })
-})
-
-describe('@function govuk-organisation-colour', () => {
- const sassBootstrap = `
- $govuk-colours-organisations: (
- 'floo-network-authority': (
- colour: #EC22FF,
- colour-websafe: #9A00A8
- ),
- 'broom-regulatory-control': (
- colour: #A81223
- )
- );
-
- @import "helpers/colour";
- `
-
- it('returns the websafe colour for a given organisation by default', async () => {
- const sass = `
- ${sassBootstrap}
-
- .foo {
- color: govuk-organisation-colour('floo-network-authority');
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe('.foo { color: #9A00A8; }')
- })
-
- it('falls back to the default colour if a websafe colour is not explicitly defined', async () => {
- const sass = `
- ${sassBootstrap}
-
- .foo {
- color: govuk-organisation-colour('broom-regulatory-control');
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe('.foo { color: #A81223; }')
- })
-
- it('can be overridden to return the non-websafe colour', async () => {
- const sass = `
- ${sassBootstrap}
-
- .foo {
- border-color: govuk-organisation-colour('floo-network-authority', $websafe: false);
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe('.foo { border-color: #EC22FF; }')
- })
-
- it('throws an error if a non-existent organisation is requested', async () => {
- const sass = `
- ${sassBootstrap}
-
- .foo {
- color: govuk-organisation-colour('muggle-born-registration-commission');
- }`
-
- await expect(sassRender({ data: sass, ...sassConfig }))
- .rejects
- .toThrow(
- 'Unknown organisation `muggle-born-registration-commission`'
- )
- })
-})
diff --git a/src/helpers/grid.test.js b/src/helpers/grid.test.js
deleted file mode 100644
index 115f051bb1..0000000000
--- a/src/helpers/grid.test.js
+++ /dev/null
@@ -1,274 +0,0 @@
-/* eslint-env jest */
-
-const util = require('util')
-const outdent = require('outdent')
-
-const configPaths = require('../../config/paths.json')
-
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
-
-const sassConfig = {
- includePaths: [ configPaths.src ],
- outputStyle: 'nested'
-}
-describe('grid system', () => {
- const sassImports = `
- @import "settings/ie8";
- @import "settings/media-queries";
- @import "settings/spacing";
- @import "settings/measurements";
-
- @import "helpers/grid";
- @import "helpers/media-queries";
-
- @import "tools/exports";
- `
- describe('govuk-grid-width function', () => {
- it('outputs the specified key value from the map of widths', async () => {
- const sass = `
- ${sassImports}
-
- .foo {
- content: govuk-grid-width(one-quarter);
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe(outdent`
- .foo {
- content: 25%; }`)
- })
-
- it('throws an error that the specified key does not exist in the map of widths', async () => {
- const sass = `
- ${sassImports}
-
- $value: govuk-grid-width(seven-fifths);
- `
-
- await expect(sassRender({ data: sass, ...sassConfig }))
- .rejects
- .toThrow('Unknown grid width `seven-fifths`')
- })
- })
-
- describe('@govuk-grid-row mixin', () => {
- it('outputs default defined styles for .govuk-grid-row class', async () => {
- const sass = `
- ${sassImports}
- @import "helpers/clearfix";
-
- @include govuk-grid-row();
- `
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .govuk-grid-row {
- margin-right: -15px;
- margin-left: -15px; }
- .govuk-grid-row:after {
- content: \"\";
- display: block;
- clear: both; }`)
- })
- it('outputs styles for the specified class', async () => {
- const sass = `
- ${sassImports}
- @import "helpers/clearfix";
-
- @include govuk-grid-row('app-grid-row');
- `
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .app-grid-row {
- margin-right: -15px;
- margin-left: -15px; }
- .app-grid-row:after {
- content: \"\";
- display: block;
- clear: both; }
- `)
- })
- })
-
- describe('@govuk-grid-column mixin', () => {
- it('outputs the CSS required for a column in the grid', async () => {
- const sass = `
- ${sassImports}
-
- .govuk-grid-column-full {
- @include govuk-grid-column($class: false);
- }
- `
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .govuk-grid-column-full {
- box-sizing: border-box;
- width: 100%;
- padding: 0 15px; }
- @media (min-width: 40.0625em) {
- .govuk-grid-column-full {
- width: 100%;
- float: left; } }`)
- })
-
- it('allows different widths to be specified using $width', async () => {
- const sass = `
- ${sassImports}
-
- .govuk-grid-column-two-thirds {
- @include govuk-grid-column(two-thirds, $class: false);
- }
- `
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .govuk-grid-column-two-thirds {
- box-sizing: border-box;
- width: 100%;
- padding: 0 15px; }
- @media (min-width: 40.0625em) {
- .govuk-grid-column-two-thirds {
- width: 66.6666%;
- float: left; } }
- `)
- })
-
- it('allows predefined breakpoints to be specified using $at', async () => {
- const sass = `
- ${sassImports}
-
- .govuk-grid-column-one-quarter-at-desktop {
- @include govuk-grid-column(one-quarter, $at: desktop, $class: false);
- }
- `
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .govuk-grid-column-one-quarter-at-desktop {
- box-sizing: border-box;
- padding: 0 15px; }
- @media (min-width: 48.0625em) {
- .govuk-grid-column-one-quarter-at-desktop {
- width: 25%;
- float: left; } }
- `)
- })
- it('allows custom breakpoints to be specified using $at', async () => {
- const sass = `
- ${sassImports}
-
- .govuk-grid-column-one-quarter-at-500px {
- @include govuk-grid-column(one-quarter, $at: 500px, $class: false);
- }
- `
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .govuk-grid-column-one-quarter-at-500px {
- box-sizing: border-box;
- width: 100%;
- padding: 0 15px; }
- @media (min-width: 31.25em) {
- .govuk-grid-column-one-quarter-at-500px {
- width: 25%;
- float: left; } }
- `)
- })
-
- it('allows columns to float right using $float: right', async () => {
- const sass = `
- ${sassImports}
-
- .govuk-grid-column-one-half-right {
- @include govuk-grid-column(one-half, $float: right, $class: false);
- }
- `
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .govuk-grid-column-one-half-right {
- box-sizing: border-box;
- width: 100%;
- padding: 0 15px; }
- @media (min-width: 40.0625em) {
- .govuk-grid-column-one-half-right {
- width: 50%;
- float: right; } }
- `)
- })
-
- it('includes the class name by default (deprecated)', async () => {
- const sass = `
- ${sassImports}
-
- @include govuk-grid-column();
- `
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .govuk-grid-column-full {
- box-sizing: border-box;
- width: 100%;
- padding: 0 15px; }
- @media (min-width: 40.0625em) {
- .govuk-grid-column-full {
- width: 100%;
- float: left; } }`)
- })
-
- it('allows the class name to be overridden (deprecated)', async () => {
- const sass = `
- ${sassImports}
-
- @include govuk-grid-column(three-quarters, $class:'large-column');
- `
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css
- .toString()
- .trim())
- .toBe(outdent`
- .large-column-three-quarters {
- box-sizing: border-box;
- width: 100%;
- padding: 0 15px; }
- @media (min-width: 40.0625em) {
- .large-column-three-quarters {
- width: 75%;
- float: left; } }
- `)
- })
- })
-})
diff --git a/src/helpers/helpers.test.js b/src/helpers/helpers.test.js
deleted file mode 100644
index 837eb0d411..0000000000
--- a/src/helpers/helpers.test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-env jest */
-
-const path = require('path')
-const util = require('util')
-
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
-
-const configPaths = require('../../config/paths.json')
-
-describe('The helpers layer', () => {
- it('should not output any CSS', async () => {
- const helpers = path.join(configPaths.src, 'helpers', '_all.scss')
-
- const output = await sassRender({ file: helpers })
- expect(output.css.toString()).toEqual('')
- })
-})
diff --git a/src/objects/_form-group.scss b/src/objects/_form-group.scss
deleted file mode 100644
index 29e9bf3531..0000000000
--- a/src/objects/_form-group.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-@include govuk-exports("govuk/objects/form-group") {
-
- .govuk-form-group {
- @include govuk-clearfix;
- @include govuk-responsive-margin(6, "bottom");
-
- .govuk-form-group:last-of-type {
- margin-bottom: 0; // Remove margin from last item in nested groups
- }
- }
-
- .govuk-form-group--error {
- padding-left: govuk-spacing(3);
- border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-
- .govuk-form-group {
- // Reset error styles in nested form groups that might have error class
- padding: 0;
- border: 0;
- }
- }
-}
diff --git a/src/objects/_grid.scss b/src/objects/_grid.scss
deleted file mode 100644
index 34bcb4a030..0000000000
--- a/src/objects/_grid.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-@include govuk-exports("govuk/objects/grid") {
-
- .govuk-grid-row {
- @include govuk-clearfix;
- margin-right: - ($govuk-gutter-half);
- margin-left: - ($govuk-gutter-half);
- }
-
- @each $width in map-keys($govuk-grid-widths) {
- .govuk-grid-column-#{$width} {
- @include govuk-grid-column($width, $class: false)
- }
- }
-
- // These *must* be defined in a separate loop as they have the same
- // specificity as the non-breakpoint specific classes, so need to appear after
- // them in the outputted CSS
- @each $width in map-keys($govuk-grid-widths) {
- .govuk-grid-column-#{$width}-from-desktop {
- @include govuk-grid-column($width, $at: desktop, $class: false)
- }
- }
-}
diff --git a/src/objects/_main-wrapper.scss b/src/objects/_main-wrapper.scss
deleted file mode 100644
index b836e6981f..0000000000
--- a/src/objects/_main-wrapper.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-// Example usage with Breadcrumbs, phase banners, back links:
-// <div class="govuk-width-container">
-// <!-- Breadcrumbs, phase banners, back links are placed in here. -->
-// <div class="govuk-main-wrapper">
-// <!-- Wrapper for the main content of your page which applies padding
-// to the top / bottom -->
-// </div>
-// </div>
-//
-// Example usage without Breadcrumbs, phase banners, back links:
-// <div class="govuk-width-container">
-// <div class="govuk-main-wrapper govuk-main-wrapper--l">
-// <!-- Wrapper for the main content of your page which applies padding
-// to the top / bottom -->
-// </div>
-// </div>
-
-
-@mixin govuk-main-wrapper {
- // In IE11 the `main` element can be used, but is not recognized –
- // meaning it's not defined in IE's default style sheet,
- // so it uses CSS initial value, which is inline.
- display: block;
- padding-top: govuk-spacing(4);
- padding-bottom: govuk-spacing(4);
-
- @include govuk-media-query($from: tablet) {
- // This spacing is manually adjusted to replicate the margin of
- // govuk-heading-xl (50px) minus the spacing of back link and
- // breadcrumbs (10px)
- padding-top: govuk-spacing(7);
- padding-bottom: govuk-spacing(7);
- }
-}
-
-// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links
-@mixin govuk-main-wrapper--l {
- @include govuk-responsive-padding(8, "top");
-}
-
-@include govuk-exports("govuk/objects/main-wrapper") {
- .govuk-main-wrapper {
- @include govuk-main-wrapper;
- }
-
- .govuk-main-wrapper--l {
- @include govuk-main-wrapper--l;
- }
-}
diff --git a/src/objects/_width-container.scss b/src/objects/_width-container.scss
deleted file mode 100644
index 996f1c1b37..0000000000
--- a/src/objects/_width-container.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-@mixin govuk-width-container {
- // Limit the width of the container to the page width
- max-width: $govuk-page-width;
-
- // On mobile, add half width gutters
- margin: 0 $govuk-gutter-half;
-
- // Respect 'display cutout' safe area (avoids notches and rounded corners)
- @supports (margin: unquote("max(calc(0px))")) {
- $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
- $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
-
- // Use max() to pick largest margin, default or with safe area
- // Escaped due to Sass max() vs. CSS native max()
- margin-right: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
- margin-left: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
- }
-
- // On tablet, add full width gutters
- @include govuk-media-query($from: tablet) {
- margin: 0 $govuk-gutter;
-
- // Respect 'display cutout' safe area (avoids notches and rounded corners)
- @supports (margin: unquote("max(calc(0px))")) {
- $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
- $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
-
- // Use max() to pick largest margin, default or with safe area
- // Escaped due to Sass max() vs. CSS native max()
- margin-right: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
- margin-left: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
- }
- }
-
- // As soon as the viewport is greater than the width of the page plus the
- // gutters, just centre the content instead of adding gutters.
- @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
- margin: 0 auto;
-
- // Since a safe area may have previously been set above,
- // we need to duplicate this margin that centers the page.
- @supports (margin: unquote("max(calc(0px))")) {
- margin: 0 auto;
- }
- }
-
- @include govuk-if-ie8 {
- width: $govuk-page-width;
- // Since media queries are not supported in IE8,
- // we need to duplicate this margin that centers the page.
- margin: 0 auto;
- }
-}
-
-@include govuk-exports("govuk/objects/width-container") {
- .govuk-width-container {
- @include govuk-width-container;
- }
-}
diff --git a/src/objects/objects.test.js b/src/objects/objects.test.js
deleted file mode 100644
index 5bcc8246aa..0000000000
--- a/src/objects/objects.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/* eslint-env jest */
-
-const glob = require('glob')
-const { renderSass } = require('../../lib/jest-helpers')
-const configPaths = require('../../config/paths.json')
-
-const sassFiles = glob.sync(`${configPaths.src}/objects/**/*.scss`)
-
-it.each(sassFiles)('%s renders to CSS without errors', (file) => {
- return renderSass({ file: file })
-})
diff --git a/src/overrides/_display.scss b/src/overrides/_display.scss
deleted file mode 100644
index e818900635..0000000000
--- a/src/overrides/_display.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-@include govuk-exports("govuk/overrides/display") {
-
- .govuk-\!-display-inline {
- display: inline !important;
- }
-
- .govuk-\!-display-inline-block {
- display: inline-block !important;
- }
-
- .govuk-\!-display-block {
- display: block !important;
- }
-}
diff --git a/src/overrides/_spacing.scss b/src/overrides/_spacing.scss
deleted file mode 100644
index 6ab7096be3..0000000000
--- a/src/overrides/_spacing.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-////
-/// @group overrides
-////
-
-/// Directions for spacing
-///
-/// @type Map
-/// @access private
-
-$_spacing-directions: (
- "top",
- "right",
- "bottom",
- "left"
-) !default;
-
-/// Spacing override classes
-///
-/// Generate spacing override classes for the given property (e.g. margin)
-/// for each point in the spacing scale.
-///
-/// @param {String} $property - Property to add spacing to (e.g. 'margin')
-///
-/// @example scss
-/// .govuk-\!-margin-0 {
-/// margin: 0;
-/// }
-///
-/// .govuk-\!-margin-top-1 {
-/// margin-top: [whatever spacing point 1 is...]
-/// }
-///
-/// @access private
-
-@mixin _govuk-generate-spacing-overrides($property) {
- // For each point in the spacing scale (defined in settings), create an
- // override that affects all directions...
- @each $scale-point, $scale-map in $govuk-spacing-responsive-scale {
-
- .govuk-\!-#{$property}-#{$scale-point} {
-
- @include _govuk-responsive-spacing($scale-point, $property, "all", true);
- }
-
- // ... and then an override for each individual direction
- @each $direction in $_spacing-directions {
-
- .govuk-\!-#{$property}-#{$direction}-#{$scale-point} {
- @include _govuk-responsive-spacing($scale-point, $property, $direction, true);
- }
- }
- }
-}
-
-@include govuk-exports("govuk/overrides/spacing") {
- @include _govuk-generate-spacing-overrides("margin");
- @include _govuk-generate-spacing-overrides("padding");
-}
diff --git a/src/overrides/_typography.scss b/src/overrides/_typography.scss
deleted file mode 100644
index 9ccf2fcef6..0000000000
--- a/src/overrides/_typography.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-@include govuk-exports("govuk/overrides/typography") {
- // Font size and line height
-
- // Generate typography override classes for each responsive font map in the
- // typography scale eg .govuk-\!-font-size-80
- @each $size in map-keys($govuk-typography-scale) {
- .govuk-\!-font-size-#{$size} {
- @include govuk-typography-responsive($size, $important: true);
- }
- }
-
- // Weights
-
- .govuk-\!-font-weight-regular {
- @include govuk-typography-weight-regular($important: true);
- }
-
- .govuk-\!-font-weight-bold {
- @include govuk-typography-weight-bold($important: true);
- }
-}
diff --git a/src/overrides/_width.scss b/src/overrides/_width.scss
deleted file mode 100644
index 1325a03765..0000000000
--- a/src/overrides/_width.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
-
-@include govuk-exports("govuk/overrides/width") {
- .govuk-\!-width-full {
- width: 100% !important;
- }
-
- .govuk-\!-width-three-quarters {
- width: 100% !important;
-
- @include govuk-media-query($from: tablet) {
- width: 75% !important;
- }
- }
-
- .govuk-\!-width-two-thirds {
- width: 100% !important;
-
- @include govuk-media-query($from: tablet) {
- width: 66.66% !important;
- }
- }
-
- .govuk-\!-width-one-half {
- width: 100% !important;
-
- @include govuk-media-query($from: tablet) {
- width: 50% !important;
- }
- }
-
- .govuk-\!-width-one-third {
- width: 100% !important;
-
- @include govuk-media-query($from: tablet) {
- width: 33.33% !important;
- }
- }
-
- .govuk-\!-width-one-quarter {
- width: 100% !important;
-
- @include govuk-media-query($from: tablet) {
- width: 25% !important;
- }
- }
-}
diff --git a/src/overrides/overrides.test.js b/src/overrides/overrides.test.js
deleted file mode 100644
index 59bed508ee..0000000000
--- a/src/overrides/overrides.test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/* eslint-env jest */
-
-const glob = require('glob')
-const { renderSass } = require('../../lib/jest-helpers')
-const configPaths = require('../../config/paths.json')
-
-const sassFiles = glob.sync(`${configPaths.src}/overrides/**/*.scss`)
-
-it.each(sassFiles)('%s renders to CSS without errors', (file) => {
- return renderSass({ file: file })
-})
diff --git a/src/settings/_colours-applied.scss b/src/settings/_colours-applied.scss
deleted file mode 100644
index e09ea81c9b..0000000000
--- a/src/settings/_colours-applied.scss
+++ /dev/null
@@ -1,148 +0,0 @@
-////
-/// @group settings/colours
-////
-
-@import "../helpers/colour";
-
-
-
-// =========================================================
-// Generic
-// =========================================================
-
-/// Brand colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-brand-colour: govuk-colour("blue") !default;
-
-/// Text colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-text-colour: govuk-colour("black") !default;
-
-/// Canvas background colour
-///
-/// Used by the footer component and template to give the illusion of a long footer.
-///
-/// @type Colour
-/// @access public
-
-$govuk-canvas-background-colour: govuk-colour("grey-3") !default;
-
-/// Body background colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-body-background-colour: govuk-colour("white") !default;
-
-/// Text colour for print media
-///
-/// Use 'true black' to avoid printers using colour ink to print body text
-///
-/// @type Colour
-/// @access public
-
-$govuk-print-text-colour: #000000 !default;
-
-/// Secondary text colour
-///
-/// Used for 'muted' text, help text, etc.
-///
-/// @type Colour
-/// @access public
-
-$govuk-secondary-text-colour: govuk-colour("grey-1") !default;
-
-/// Focus colour
-///
-/// Used for outline (and background, where appropriate) when interactive
-/// elements (links, form controls) have keyboard focus.
-///
-/// @type Colour
-/// @access public
-
-$govuk-focus-colour: govuk-colour("yellow") !default;
-
-/// Focused text colour
-///
-/// Ensure that the contrast between the text and background colour passes
-/// WCAG Level AA contrast requirements.
-///
-/// @type Colour
-/// @access public
-
-$govuk-focus-text-colour: govuk-colour("black") !default;
-
-/// Error colour
-///
-/// Used to highlight error messages and form controls in an error state
-///
-/// @type Colour
-/// @access public
-
-$govuk-error-colour: govuk-colour("red") !default;
-
-/// Border colour
-///
-/// Used for borders, separators, rules, keylines etc.
-///
-/// @type Colour
-/// @access public
-
-$govuk-border-colour: govuk-colour("grey-2") !default;
-
-/// Input border colour
-///
-/// Used for form inputs and controls
-///
-/// @type Colour
-/// @access public
-
-$govuk-input-border-colour: govuk-colour("black") !default;
-
-/// Input hover colour
-///
-/// Used for hover states on form controls
-///
-/// @type Colour
-/// @access public
-
-$govuk-hover-colour: govuk-colour("grey-3") !default;
-
-
-// =============================================================================
-// Links
-// =============================================================================
-
-/// Link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-colour: govuk-colour("blue") !default;
-
-/// Visited link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-visited-colour: #4c2c92 !default;
-
-/// Link hover colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-hover-colour: govuk-colour("light-blue") !default;
-
-/// Active link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-active-colour: govuk-colour("light-blue") !default;
diff --git a/src/settings/_colours-organisations.scss b/src/settings/_colours-organisations.scss
deleted file mode 100644
index 4207be6b65..0000000000
--- a/src/settings/_colours-organisations.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-////
-/// @group settings/colours
-////
-
-/// Organisation colours
-///
-/// @type Map
-///
-/// @prop $organisation.colour - Colour for the given `$organisation`
-/// @prop $organisation.colour-websafe - Websafe colour for the given
-/// `$organisation`. We use `websafe` to mean strong enough contrast against
-/// white to be used for copy and meet the AAA (large text) and AA (smaller
-/// copy) WCAG guidelines.
-///
-/// @access public
-
-$govuk-colours-organisations: (
- "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-and-local-government": (
- colour: #00857e,
- 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-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-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
- )
-) !default;
diff --git a/src/settings/_colours-palette.scss b/src/settings/_colours-palette.scss
deleted file mode 100644
index 898e50824b..0000000000
--- a/src/settings/_colours-palette.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-////
-/// @group settings/colours
-////
-
-/// Colour palette
-///
-/// @type Map
-///
-/// @prop $colour - Representation for the given $colour, where $colour is the
-/// friendly name for the colour (e.g. "red": #ff0000);
-///
-/// @access public
-
-$govuk-colours: (
- "purple": #2e358b,
- "light-purple": #6f72af,
- "bright-purple": #912b88,
- "pink": #d53880,
- "light-pink": #f499be,
- "red": #b10e1e,
- "bright-red": #df3034,
- "orange": #f47738,
- "brown": #b58840,
- "yellow": #ffbf47,
- "light-green": #85994b,
- "green": #006435,
- "turquoise": #28a197,
- "light-blue": #2b8cc4,
- "blue": #005ea5,
-
- "black": #0b0c0c,
- "grey-1": #6f777b,
- "grey-2": #bfc1c3,
- "grey-3": #dee0e2,
- "grey-4": #f8f8f8,
- "white": #ffffff
-) !default;
diff --git a/src/settings/_compatibility.scss b/src/settings/_compatibility.scss
deleted file mode 100644
index 5a5e23cf2b..0000000000
--- a/src/settings/_compatibility.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-////
-/// Compatibility with legacy repos (govuk_elements, govuk_frontend_tookkit and
-/// govuk_template) settings
-///
-/// We default these settings to `true` so that if they are missed we opt for a
-/// mild performance hit over a potential broken experience for the end-user.
-///
-/// @group settings/compatibility
-////
-
-
-/// Compatibility Mode: alphagov/govuk_frontend_toolkit
-///
-/// True if used in a project that also includes alphagov/govuk_frontend_toolkit.
-///
-/// @type Boolean
-/// @access public
-
-$govuk-compatibility-govukfrontendtoolkit: false !default;
-
-/// Compatibility Mode: alphagov/govuk_template
-///
-/// True if used in a project that also includes alphagov/govuk_template.
-///
-/// @type Boolean
-/// @access public
-
-$govuk-compatibility-govuktemplate: false !default;
-
-/// Compatibility Mode: alphagov/govuk_elements
-///
-/// True if used in a project that also includes alphagov/govuk_elements.
-///
-/// @type Boolean
-/// @access public
-
-$govuk-compatibility-govukelements: false !default;
-
-/// Compatibility Product Map
-///
-/// Maps product names to their settings that we can use to lookup states from
-/// within the `@govuk-compatibility` mixin.
-///
-/// @type Map
-/// @access private
-
-$_govuk-compatibility: (
- govuk_frontend_toolkit: $govuk-compatibility-govukfrontendtoolkit,
- govuk_template: $govuk-compatibility-govuktemplate,
- govuk_elements: $govuk-compatibility-govukelements,
-);
diff --git a/src/settings/_ie8.scss b/src/settings/_ie8.scss
deleted file mode 100644
index 2098da72e6..0000000000
--- a/src/settings/_ie8.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-////
-/// @group settings/ie8
-////
-
-/// Whether the stylesheet being built is targeting Internet Explorer 8.
-///
-/// @type Boolean
-/// @access public
-
-$govuk-is-ie8: false !default;
-
-/// The name of the breakpoint to use as the target when rasterizing media
-/// queries
-///
-/// @type String
-/// @access public
-
-$govuk-ie8-breakpoint: desktop !default;
diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss
deleted file mode 100644
index bd2ac483aa..0000000000
--- a/src/settings/_measurements.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-////
-/// @group settings/measurements
-////
-
-
-
-// =========================================================
-// Page layout
-// =========================================================
-
-/// Width of main container
-///
-/// @type Number
-/// @access public
-
-$govuk-page-width: 960px !default;
-
-/// Map of grid column widths
-///
-/// @type Map
-/// @access public
-
-$govuk-grid-widths: (
- one-quarter: 25%,
- one-third: 33.3333%,
- one-half: 50%,
- two-thirds: 66.6666%,
- three-quarters: 75%,
- full: 100%
-) !default;
-
-/// Width of gutter between grid columns
-///
-/// @type Number
-/// @access public
-
-$govuk-gutter: 30px !default;
-
-/// Width of half the gutter between grid columns
-///
-/// @type Number
-/// @access public
-
-$govuk-gutter-half: $govuk-gutter / 2;
-
-
-
-// =========================================================
-// Borders
-// =========================================================
-
-/// Standard border width
-///
-/// @type Number
-/// @access public
-
-$govuk-border-width: 5px !default;
-
-/// Wide border width
-///
-/// @type Number
-/// @access public
-
-$govuk-border-width-wide: 10px !default;
-
-/// Border width on mobile
-///
-/// @type Number
-/// @access public
-
-$govuk-border-width-mobile: 4px !default;
-
-/// Form control border width
-///
-/// @type Number
-/// @access public
-
-$govuk-border-width-form-element: 2px !default;
-
-/// Form control border width when in error state
-///
-/// @type Number
-/// @access public
-
-$govuk-border-width-form-element-error: 4px !default;
-
-/// Form group border width when in error state
-///
-/// @type Number
-/// @access public
-
-$govuk-border-width-form-group-error: $govuk-border-width !default;
-
-/// Border width of focus outline
-///
-/// @type Number
-/// @access public
-
-$govuk-focus-width: 3px !default;
-
-/// Hover width for form controls with a hover state
-///
-/// @type Number
-/// @access public
-
-$govuk-hover-width: 10px !default;
diff --git a/src/settings/_typography-font-families.scss b/src/settings/_typography-font-families.scss
deleted file mode 100644
index 2b58323dc2..0000000000
--- a/src/settings/_typography-font-families.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-////
-/// @group settings/typography
-////
-
-/// List of font families to use if using NTA (the default font 'stack' for
-/// GOV.UK)
-///
-/// @type List
-/// @access public
-
-$govuk-font-family-nta: "nta", Arial, sans-serif;
-
-/// List of font families to use if using the 'tabular numbers' subset of NTA
-/// (the default font 'stack' for GOV.UK)
-///
-/// Because ntatabularnumbers only includes the digits 0-10, all other glyphs
-/// will 'fall-through' the stack to NTA.
-///
-/// @type List
-/// @access public
-
-$govuk-font-family-nta-tabular: "ntatabularnumbers", $govuk-font-family-nta;
diff --git a/src/settings/_typography-font.scss b/src/settings/_typography-font.scss
deleted file mode 100644
index 958b0d7e9c..0000000000
--- a/src/settings/_typography-font.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-////
-/// @group settings/typography
-////
-
-
-
-// =========================================================
-// Font families
-// =========================================================
-
-/// Font families to use for all typography on screen media
-///
-/// @type List
-/// @access public
-
-$govuk-font-family: $govuk-font-family-nta !default;
-
-/// Font families to use when displaying tabular numbers
-///
-/// @type List
-/// @access public
-
-$govuk-font-family-tabular: $govuk-font-family-nta-tabular !default;
-
-/// Font families to use for print media
-///
-/// @type List
-/// @access public
-
-$govuk-font-family-print: sans-serif !default;
-
-/// Include the default @font-face declarations
-///
-/// If you have set $govuk-font-family to something other than $govuk-font-family-nta this option is disabled by default.
-///
-/// If you are using $govuk-compatibility-govuktemplate this option is disabled by default.
-///
-/// @type Boolean
-/// @access public
-
-$govuk-include-default-font-face: (
- $govuk-font-family == $govuk-font-family-nta and
- not($govuk-compatibility-govuktemplate)
- ) !default;
-
-// =========================================================
-// Font weights
-// =========================================================
-
-/// Font weight for regular typography
-///
-/// @type Number
-/// @access public
-$govuk-font-weight-regular: 400 !default;
-
-/// Font weight for bold typography
-///
-/// @type Number
-/// @access public
-$govuk-font-weight-bold: 700 !default;
diff --git a/src/settings/_typography-responsive.scss b/src/settings/_typography-responsive.scss
deleted file mode 100644
index e184d96dc6..0000000000
--- a/src/settings/_typography-responsive.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-////
-/// @group settings/typography
-////
-
-/// Whether or not to define font sizes in rem, improving accessibility by
-/// allowing users to adjust the base font-size. This is currently off by
-/// default, but will be enabled by default for projects that do not use
-/// alphagov/govuk_template in the next major release.
-///
-/// If this is enabled, you should make sure that $govuk-root-font-size is set
-/// correctly for your project
-///
-/// If any of the compatibility variables are set, then default
-/// responsive typography to off.
-///
-/// @type Boolean
-/// @access public
-
-$govuk-typography-use-rem: if((
- $govuk-compatibility-govukfrontendtoolkit or
- $govuk-compatibility-govuktemplate or
- $govuk-compatibility-govukelements
- ), false, true) !default;
-
-/// Root font size
-///
-/// This is used to calculate rem sizes for the typography, and should match the
-/// _effective_ font-size of your root (or html) element.
-///
-/// Ideally you should not be setting the font-size on the html or root element
-/// in order to allow it to scale with user-preference, in which case this
-/// should be set to 16px.
-///
-/// If you are integrating Frontend into an existing project that also uses
-/// alphagov/govuk_template then you should set this to 10px to match the 62.5%
-/// (10px) base font size that govuk_template sets on the <html> element.
-///
-/// @type Number
-/// @access public
-
-$govuk-root-font-size: 16px !default;
-
-/// Responsive typography font map
-///
-/// This is used to generate responsive typography that adapts according to the
-/// breakpoints.
-///
-/// Font size and font weight can be defined for each breakpoint. You can define
-/// different behaviour on tablet and desktop. The 'null' breakpoint is for
-/// mobile.
-///
-/// Line-heights will automatically be converted from pixel measurements into
-/// relative values. For example, with a font-size of 16px and a line-height of
-/// 24px, the line-height will be converted to 1.5 before output.
-///
-/// You can also specify a separate font size and line height for print media.
-///
-/// @type Map
-///
-/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
-/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
-/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
-/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
-///
-/// @access public
-
-$govuk-typography-scale: (
- 80: (
- null: (
- font-size: 53px,
- line-height: 55px
- ),
- tablet: (
- font-size: 80px,
- line-height: 80px
- ),
- print: (
- font-size: 53pt,
- line-height: 1.1
- )
- ),
- 48: (
- null: (
- font-size: 32px,
- line-height: 35px
- ),
- tablet: (
- font-size: 48px,
- line-height: 50px
- ),
- print: (
- font-size: 32pt,
- line-height: 1.15
- )
- ),
- 36: (
- null: (
- font-size: 24px,
- line-height: 25px
- ),
- tablet: (
- font-size: 36px,
- line-height: 40px
- ),
- print: (
- font-size: 24pt,
- line-height: 1.05
- )
- ),
- 27: (
- null: (
- font-size: 18px,
- line-height: 20px
- ),
- tablet: (
- font-size: 27px,
- line-height: 30px
- ),
- print: (
- font-size: 18pt,
- line-height: 1.15
- )
- ),
- 24: (
- null: (
- font-size: 18px,
- line-height: 20px
- ),
- tablet: (
- font-size: 24px,
- line-height: 30px
- ),
- print: (
- font-size: 18pt,
- line-height: 1.15
- )
- ),
- 19: (
- null: (
- font-size: 16px,
- line-height: 20px
- ),
- tablet: (
- font-size: 19px,
- line-height: 25px
- ),
- print: (
- font-size: 14pt,
- line-height: 1.15
- )
- ),
- 16: (
- null: (
- font-size: 14px,
- line-height: 16px
- ),
- tablet: (
- font-size: 16px,
- line-height: 20px
- ),
- print: (
- font-size: 14pt,
- line-height: 1.2
- )
- ),
- 14: (
- null: (
- font-size: 12px,
- line-height: 15px
- ),
- tablet: (
- font-size: 14px,
- line-height: 20px
- ),
- print: (
- font-size: 12pt,
- line-height: 1.2
- )
- )
-) !default;
diff --git a/src/settings/settings.test.js b/src/settings/settings.test.js
deleted file mode 100644
index c69c9ebca6..0000000000
--- a/src/settings/settings.test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-env jest */
-
-const path = require('path')
-const util = require('util')
-
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
-
-const configPaths = require('../../config/paths.json')
-
-describe('The settings layer', () => {
- it('should not output any CSS', async () => {
- const settings = path.join(configPaths.src, 'settings', '_all.scss')
-
- const output = await sassRender({ file: settings })
- expect(output.css.toString()).toEqual('')
- })
-})
diff --git a/src/template.njk b/src/template.njk
deleted file mode 100644
index f6b27c794b..0000000000
--- a/src/template.njk
+++ /dev/null
@@ -1,60 +0,0 @@
-{% from "./components/skip-link/macro.njk" import govukSkipLink -%}
-{% from "./components/header/macro.njk" import govukHeader -%}
-{% from "./components/footer/macro.njk" import govukFooter -%}
-{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
-{%- set assetUrl = assetUrl | default(assetPath) -%}
-<!DOCTYPE html>
-<html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
- <head>
- <meta charset="utf-8" />
- <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}
-
- {% block beforeContent %}{% endblock %}
-
- {% block content %}{% endblock %}
-
-
- {% endblock %}
-
- {% block footer %}
- {{ govukFooter({}) }}
- {% endblock %}
-
- {% block bodyEnd %}{% endblock %}
-
-
diff --git a/src/template.test.js b/src/template.test.js
deleted file mode 100644
index e90d5201e1..0000000000
--- a/src/template.test.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-env jest */
-
-const nunjucks = require('nunjucks')
-const configPaths = require('../config/paths.json')
-
-describe('Template', () => {
- describe('with default nunjucks configuration', () => {
- it('should not have any whitespace before the doctype', () => {
- nunjucks.configure(configPaths.src)
- const output = nunjucks.render('./template.njk')
- expect(output.charAt(0)).toEqual('<')
- })
- })
- describe('with nunjucks block trimming enabled', () => {
- it('should not have any whitespace before the doctype', () => {
- nunjucks.configure(configPaths.src, {
- trimBlocks: true,
- lstripBlocks: true
- })
- const output = nunjucks.render('./template.njk')
- expect(output.charAt(0)).toEqual('<')
- })
- })
-})
diff --git a/src/tools/_compatibility.scss b/src/tools/_compatibility.scss
deleted file mode 100644
index d157e158c3..0000000000
--- a/src/tools/_compatibility.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-////
-/// @group tools
-////
-
-/// 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
-
-@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}'";
- }
-}
diff --git a/src/tools/_font-url.scss b/src/tools/_font-url.scss
deleted file mode 100644
index c21d994d0d..0000000000
--- a/src/tools/_font-url.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-////
-/// @group tools
-////
-
-// Disable indentation linting in this file only
-// sass-lint:disable indentation
-
-/// Font URL
-///
-/// If a custom font-url handler is defined ($govuk-font-url-function) then
-/// it will be called, otherwise a url will be returned with the filename
-/// appended to the font path.
-///
-/// @param {String} $filename - Font filename
-/// @return {String} URL for the filename, wrapped in `url()`
-/// @access public
-
-@function govuk-font-url($filename) {
- $use-custom-function: variable-exists("govuk-font-url-function")
- and $govuk-font-url-function
- and function-exists($govuk-font-url-function);
-
- @if ($use-custom-function) {
- @return call(get-function($govuk-font-url-function), $filename);
- } @else {
- @return url($govuk-fonts-path + $filename);
- }
-}
diff --git a/src/tools/_ie8.scss b/src/tools/_ie8.scss
deleted file mode 100644
index 8fcea87225..0000000000
--- a/src/tools/_ie8.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-////
-/// @group tools
-////
-
-/// Conditionally include rules only for IE8
-///
-/// @content Passed content is only outputted if we're compiling a stylesheet
-/// that targets IE8 (if `$govuk-is-ie8` is true)
-///
-/// @example scss - Usage
-///
-/// .foo {
-/// min-width: 100px;
-/// // Specify width for IE8 only
-/// @include govuk-if-ie8 {
-/// width: 100px;
-/// }
-/// }
-///
-/// @access public
-
-@mixin govuk-if-ie8 {
- @if $govuk-is-ie8 {
- @content;
- }
-}
-
-/// Conditionally exclude rules for IE8
-///
-/// @content Passed content is only outputted if we're not compiling a
-/// stylesheet that targets IE8 (if `$govuk-is-ie8` is false)
-///
-/// @example scss - Usage
-///
-/// .foo {
-/// font-weight: bold;
-///
-/// // Enhance foo only for modern browsers (not IE8)
-/// @include govuk-not-ie8 {
-/// font-family: "Comic Sans MS", "Curlz MT" cursive, sans-serif;
-/// color: #FF69B4;
-/// }
-/// }
-///
-/// @access public
-
-@mixin govuk-not-ie8 {
- @if not $govuk-is-ie8 {
- @content;
- }
-}
diff --git a/src/tools/_iff.scss b/src/tools/_iff.scss
deleted file mode 100644
index 8817f5e941..0000000000
--- a/src/tools/_iff.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-////
-/// @group tools
-////
-
-/// Syntactic sugar around Sass' built-in `if` function that does not require
-/// you to pass a value for `$if-false`.
-///
-/// @param {Boolean} $condition - Whether to return the value of `$if-true`
-/// @param {Mixed} $if-true - Value to return if `$condition` is truthy
-/// @return {Mixed} Value of `$if-true` if `$condition` is truthy, else null
-/// @access public
-
-@function iff($condition, $if-true) {
- @return if($condition, $if-true, null);
-}
diff --git a/src/tools/_image-url.scss b/src/tools/_image-url.scss
deleted file mode 100644
index 3672ac7aa4..0000000000
--- a/src/tools/_image-url.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-////
-/// @group tools
-////
-
-// Disable indentation linting in this file only
-// sass-lint:disable indentation
-
-/// Image URL
-///
-/// If a custom image-url handler is defined ($govuk-image-url-function) then
-/// it will be called, otherwise a url will be returned with the filename
-/// appended to the image path.
-///
-/// @param {String} Filename for the image to load
-/// @return {String} URL for the filename, wrapped in `url()`
-/// @access public
-
-@function govuk-image-url($filename) {
- $use-custom-function: variable-exists("govuk-image-url-function")
- and $govuk-image-url-function
- and function-exists($govuk-image-url-function);
-
- @if ($use-custom-function) {
- @return call(get-function($govuk-image-url-function), $filename);
- } @else {
- @return url($govuk-images-path + $filename);
- }
-}
diff --git a/src/tools/_px-to-em.scss b/src/tools/_px-to-em.scss
deleted file mode 100644
index f39e73bcb9..0000000000
--- a/src/tools/_px-to-em.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-////
-/// @group tools
-////
-
-/// Convert pixels to em
-///
-/// @param {Number} $value - Length in pixels
-/// @param {Number} $context-font-size - Font size of element
-/// @return {Number} Length in ems
-/// @access public
-
-@function govuk-em($value, $context-font-size) {
- @if (unitless($value)) {
- $value: $value * 1px;
- }
- @if (unitless($context-font-size)) {
- $context-font-size: $context-font-size * 1px;
- }
- @return $value / $context-font-size * 1em;
-}
diff --git a/src/tools/_px-to-rem.scss b/src/tools/_px-to-rem.scss
deleted file mode 100644
index d4ff19caa7..0000000000
--- a/src/tools/_px-to-rem.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-////
-/// @group tools
-////
-
-/// Convert pixels to rem
-///
-/// The $govuk-root-font-size (defined in settings/_typography-responsive.scss)
-/// must be configured to match the font-size of your root (html) element
-///
-/// @param {Number} $value - Length in pixels
-/// @return {Number} Length in rems
-/// @access public
-
-@function govuk-px-to-rem($value) {
- @if (unitless($value)) {
- $value: $value * 1px;
- }
-
- @return $value / $govuk-root-font-size * 1rem;
-}
diff --git a/src/tools/exports.test.js b/src/tools/exports.test.js
deleted file mode 100644
index 39a3b4278d..0000000000
--- a/src/tools/exports.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/* 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 ],
- outputStyle: 'compressed'
-}
-
-describe('@mixin govuk-exports', () => {
- it('will only output a named section once', async () => {
- const sass = `
- @import "tools/exports";
-
- @include govuk-exports(foo) {
- .foo {
- color: red;
- }
- }
-
- @include govuk-exports(foo) {
- .foo {
- color: blue;
- }
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toEqual('.foo{color:red}')
- })
-
- it('will export differently named sections', async () => {
- const sass = `
- @import "tools/exports";
-
- @include govuk-exports(foo) {
- .foo {
- color: red;
- }
- }
-
- @include govuk-exports(bar) {
- .bar {
- color: blue;
- }
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim())
- .toEqual('.foo{color:red}.bar{color:blue}')
- })
-})
diff --git a/src/tools/iff.test.js b/src/tools/iff.test.js
deleted file mode 100644
index 21abdb0e44..0000000000
--- a/src/tools/iff.test.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/* 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 ],
- outputStyle: 'compressed'
-}
-
-describe('@function iff', () => {
- it('outputs if the condition is truthy', async () => {
- const sass = `
- @import 'tools/iff';
-
- .foo {
- color: red iff(true, !important);
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe(`.foo{color:red !important}`)
- })
-
- it('does not output if the condition is falsey', async () => {
- const sass = `
- @import 'tools/iff';
-
- .foo {
- color: red iff(false, !important);
- }`
-
- const results = await sassRender({ data: sass, ...sassConfig })
-
- expect(results.css.toString().trim()).toBe(`.foo{color:red}`)
- })
-})
diff --git a/src/tools/tools.test.js b/src/tools/tools.test.js
deleted file mode 100644
index 2d97f523d2..0000000000
--- a/src/tools/tools.test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-env jest */
-
-const path = require('path')
-const util = require('util')
-
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
-
-const configPaths = require('../../config/paths.json')
-
-describe('The tools layer', () => {
- it('should not output any CSS', async () => {
- const tools = path.join(configPaths.src, 'tools', '_all.scss')
-
- const output = await sassRender({ file: tools })
- expect(output.css.toString()).toEqual('')
- })
-})
diff --git a/src/utilities/_visually-hidden.scss b/src/utilities/_visually-hidden.scss
deleted file mode 100644
index 7ac7ae50d8..0000000000
--- a/src/utilities/_visually-hidden.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@include govuk-exports("govuk/utilities/visually-hidden") {
- .govuk-visually-hidden {
- @include govuk-visually-hidden;
- }
-
- .govuk-visually-hidden-focusable {
- @include govuk-visually-hidden-focusable;
- }
-
-}
diff --git a/src/vendor/polyfills/Element/prototype/closest.js b/src/vendor/polyfills/Element/prototype/closest.js
deleted file mode 100644
index 6ed55020fb..0000000000
--- a/src/vendor/polyfills/Element/prototype/closest.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import './matches'
-
-(function(undefined) {
-
- // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/detect.js
- var detect = (
- 'document' in this && "closest" in document.documentElement
- )
-
- if (detect) return
-
- // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
- Element.prototype.closest = function closest(selector) {
- var node = this;
-
- while (node) {
- if (node.matches(selector)) return node;
- else node = 'SVGElement' in window && node instanceof SVGElement ? node.parentNode : node.parentElement;
- }
-
- return null;
- };
-
-}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
diff --git a/tasks/gulp/__tests__/after-build-dist.test.js b/tasks/gulp/__tests__/after-build-dist.test.js
index 1a36ffc855..2dc9d4369f 100644
--- a/tasks/gulp/__tests__/after-build-dist.test.js
+++ b/tasks/gulp/__tests__/after-build-dist.test.js
@@ -5,7 +5,7 @@ const configPaths = require('../../../config/paths.json')
const recursive = require('recursive-readdir')
describe('dist/', () => {
- let version = require(path.join('../../../', configPaths.package, 'package.json')).version
+ const version = require(path.join('../../../', configPaths.package, 'package.json')).version
describe('assets/', () => {
it('should include the same files as in src/assets', () => {
@@ -18,7 +18,7 @@ describe('dist/', () => {
files => {
return files
// Remove /package prefix from filenames
- .map(file => file.replace(/^src\/assets\//, ''))
+ .map(file => file.replace(/^src\/govuk\/assets\//, ''))
// Sort to make comparison easier
.sort()
},
@@ -60,6 +60,10 @@ describe('dist/', () => {
it('should not contain current media query displayed on body element', () => {
expect(stylesheet).not.toMatch(/body:before{content:/)
})
+
+ it('should contain the copyright notice', () => {
+ expect(stylesheet).toContain('/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */')
+ })
})
describe(`navody-digital-ie8-${version}.min.css`, () => {
diff --git a/tasks/gulp/__tests__/after-build-package.test.js b/tasks/gulp/__tests__/after-build-package.test.js
index 834d9a0e4c..6df70afbc3 100644
--- a/tasks/gulp/__tests__/after-build-package.test.js
+++ b/tasks/gulp/__tests__/after-build-package.test.js
@@ -4,15 +4,16 @@ const fs = require('fs')
const path = require('path')
const util = require('util')
-const sass = require('node-sass')
const recursive = require('recursive-readdir')
var glob = require('glob')
const configPaths = require('../../../config/paths.json')
const lib = require('../../../lib/file-helper')
-const sassRender = util.promisify(sass.render)
+const { renderSass } = require('../../../lib/jest-helpers')
+
const readFile = util.promisify(fs.readFile)
+const componentNames = lib.allComponents.slice()
describe('package/', () => {
it('should contain the expected files', () => {
@@ -39,13 +40,16 @@ describe('package/', () => {
'.DS_Store',
'*.test.js',
'*.yaml',
- '*.snap'
+ '*.snap',
+ '*/govuk/README.md'
]
const additionalFilesNotInSrc = [
'package.json',
'govuk-prototype-kit.config.json',
- '**/macro-options.json'
+ '**/macro-options.json',
+ '**/fixtures.json',
+ 'README.md'
]
return recursive(configPaths.src, filesToIgnore).then(
@@ -92,16 +96,14 @@ describe('package/', () => {
describe('all.scss', () => {
it('should compile without throwing an exception', async () => {
- const allScssFile = path.join(configPaths.package, 'all.scss')
- await sassRender({ file: allScssFile })
+ const allScssFile = path.join(configPaths.package, 'govuk', 'all.scss')
+ await renderSass({ file: allScssFile })
})
})
describe('component', () => {
- const componentNames = lib.allComponents.slice()
-
- it.each(componentNames)(`'%s' should have macro-options.json that contains JSON`, (name) => {
- const filePath = path.join(configPaths.package, 'components', name, 'macro-options.json')
+ it.each(componentNames)('\'%s\' should have macro-options.json that contains JSON', (name) => {
+ const filePath = path.join(configPaths.package, 'govuk', 'components', name, 'macro-options.json')
return readFile(filePath, 'utf8')
.then((data) => {
var parsedData = JSON.parse(data)
@@ -122,4 +124,30 @@ describe('package/', () => {
})
})
})
+
+ describe('fixtures', () => {
+ it.each(componentNames)('\'%s\' should have fixtures.json that contains JSON', (name) => {
+ const filePath = path.join(configPaths.package, 'govuk', 'components', name, 'fixtures.json')
+ return readFile(filePath, 'utf8')
+ .then((data) => {
+ var parsedData = JSON.parse(data)
+ // We expect the component JSON to contain "component" and an array of "fixtures" with "name", "options", and "html"
+ expect(parsedData).toEqual(
+ expect.objectContaining({
+ component: name,
+ fixtures: expect.arrayContaining([
+ expect.objectContaining({
+ name: expect.any(String),
+ options: expect.any(Object),
+ html: expect.any(String)
+ })
+ ])
+ })
+ )
+ })
+ .catch(error => {
+ throw error
+ })
+ })
+ })
})
diff --git a/tasks/gulp/__tests__/check-individual-components-compile.test.js b/tasks/gulp/__tests__/check-individual-components-compile.test.js
index e39b048d66..941adb5577 100644
--- a/tasks/gulp/__tests__/check-individual-components-compile.test.js
+++ b/tasks/gulp/__tests__/check-individual-components-compile.test.js
@@ -1,10 +1,8 @@
/* eslint-env jest */
const path = require('path')
-const util = require('util')
-const sass = require('node-sass')
-const sassRender = util.promisify(sass.render)
+const { renderSass } = require('../../../lib/jest-helpers')
const lib = require('../../../lib/file-helper')
const configPaths = require('../../../config/paths.json')
@@ -16,7 +14,7 @@ describe('Individual components', () => {
const getSassRenders = () => {
return componentNames.map(name => {
const filePath = path.join(configPaths.components, name, `_${name}.scss`)
- return sassRender({ file: filePath })
+ return renderSass({ file: filePath })
})
}
diff --git a/tasks/gulp/asset-version.js b/tasks/gulp/asset-version.js
index bd99381c48..061ffb9c40 100644
--- a/tasks/gulp/asset-version.js
+++ b/tasks/gulp/asset-version.js
@@ -17,7 +17,7 @@ const isDist = taskArguments.destination === 'dist' || false
// Add all.package.json version
// ----------------------------------
gulp.task('update-assets-version', () => {
- let pkg = require('../../' + configPaths.package + 'package.json')
+ const pkg = require('../../' + configPaths.package + 'package.json')
fs.writeFileSync(taskArguments.destination + '/VERSION.txt', pkg.version + '\r\n')
return gulp.src([
taskArguments.destination + '/navody-digital.min.css',
diff --git a/tasks/gulp/clean.js b/tasks/gulp/clean.js
index 82b8994e1c..d5b747d8a0 100644
--- a/tasks/gulp/clean.js
+++ b/tasks/gulp/clean.js
@@ -10,10 +10,10 @@ const del = require('del')
// ------------------------------------------------------
gulp.task('clean', () => {
- let destination = taskArguments.destination
+ const destination = taskArguments.destination
if (destination === 'package') {
- return del.sync([
+ return del([
`${destination}/**`,
`!${destination}`,
`!${destination}/package.json`,
@@ -21,7 +21,7 @@ gulp.task('clean', () => {
`!${destination}/README.md`
])
} else {
- return del.sync([
+ return del([
`${destination}/**/*`
])
}
diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js
index 2af4633569..698759ae4b 100644
--- a/tasks/gulp/compile-assets.js
+++ b/tasks/gulp/compile-assets.js
@@ -35,11 +35,11 @@ const errorHandler = function (error) {
this.emit('end')
}
// different entry points for both streams below and depending on destination flag
-const compileStyleshet = isDist ? configPaths.src + 'all.scss' : configPaths.app + 'assets/scss/app.scss'
-const compileOldIeStyleshet = isDist ? configPaths.src + 'all-ie8.scss' : configPaths.app + 'assets/scss/app-ie8.scss'
+const compileStylesheet = isDist ? configPaths.src + 'all.scss' : configPaths.app + 'assets/scss/app.scss'
+const compileOldIeStylesheet = isDist ? configPaths.src + 'all-ie8.scss' : configPaths.app + 'assets/scss/app-ie8.scss'
gulp.task('scss:compile', () => {
- let compile = gulp.src(compileStyleshet)
+ const compile = gulp.src(compileStylesheet)
.pipe(plumber(errorHandler))
.pipe(sass())
// minify css add vendor prefixes and normalize to compiled css
@@ -61,7 +61,7 @@ gulp.task('scss:compile', () => {
))
.pipe(gulp.dest(taskArguments.destination + '/'))
- let compileOldIe = gulp.src(compileOldIeStyleshet)
+ const compileOldIe = gulp.src(compileOldIeStylesheet)
.pipe(plumber(errorHandler))
.pipe(sass())
// minify css add vendor prefixes and normalize to compiled css
@@ -102,10 +102,11 @@ gulp.task('scss:compile', () => {
// --------------------------------------
gulp.task('js:compile', () => {
// for dist/ folder we only want compiled 'all.js' file
- let srcFiles = isDist ? configPaths.src + 'all.js' : configPaths.src + '**/*.js'
+ const srcFiles = isDist ? configPaths.src + 'all.js' : configPaths.src + '**/*.js'
+
return gulp.src([
- '!' + configPaths.src + '**/*.test.js',
- srcFiles
+ srcFiles,
+ '!' + configPaths.src + '**/*.test.js'
])
.pipe(rollup({
// Used to set the `window` global and UMD/AMD export name.
@@ -125,5 +126,5 @@ gulp.task('js:compile', () => {
})
))
.pipe(eol())
- .pipe(gulp.dest(taskArguments.destination + '/'))
+ .pipe(gulp.dest(destinationPath))
})
diff --git a/tasks/gulp/copy-to-destination.js b/tasks/gulp/copy-to-destination.js
index 2db0db3329..e4708a4a30 100644
--- a/tasks/gulp/copy-to-destination.js
+++ b/tasks/gulp/copy-to-destination.js
@@ -1,5 +1,6 @@
'use strict'
+const nunjucks = require('nunjucks')
const gulp = require('gulp')
const configPaths = require('../../config/paths.json')
const postcss = require('gulp-postcss')
@@ -12,8 +13,8 @@ const path = require('path')
const map = require('map-stream')
const rename = require('gulp-rename')
-let scssFiles = filter([configPaths.src + '**/*.scss'], { restore: true })
-let yamlFiles = filter([configPaths.components + '**/*.yaml'], { restore: true })
+const scssFiles = filter([configPaths.src + '**/*.scss'], { restore: true })
+const yamlFiles = filter([configPaths.components + '**/*.yaml'], { restore: true })
gulp.task('copy-files', () => {
return gulp.src([
@@ -31,34 +32,88 @@ gulp.task('copy-files', () => {
.pipe(scssFiles.restore)
.pipe(yamlFiles)
.pipe(map(function (file, done) {
- let componentName = path.dirname(file.path).split(path.sep).slice(-1).toString()
- let componentPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
- let yaml
- let json
- let paramsJson
-
- try {
- yaml = fs.readFileSync(componentPath, { encoding: 'utf8', json: true })
- } catch (e) {
- console.error('ENOENT: no such file or directory: ', componentPath)
- }
-
- if (yaml) {
- json = yamlToJson.safeLoad(yaml)
- paramsJson = json.params // We only want the 'params' data from component yaml
-
- if (paramsJson) {
- file.contents = Buffer.from(JSON.stringify(paramsJson, null, 4))
- } else {
- console.error(componentPath + ' is missing "params"')
- }
- }
- done(null, file)
+ const fixturesFile = generateFixtures(file)
+ done(null, fixturesFile)
+ }))
+ .pipe(rename(path => {
+ path.basename = 'fixtures'
+ path.extname = '.json'
+ }))
+ .pipe(yamlFiles)
+ .pipe(map(function (file, done) {
+ const macroFile = generateMacroOptions(file)
+ done(null, macroFile)
}))
.pipe(rename(path => {
path.basename = 'macro-options'
path.extname = '.json'
}))
.pipe(yamlFiles.restore)
- .pipe(gulp.dest(taskArguments.destination + '/'))
+ .pipe(gulp.dest(taskArguments.destination + '/govuk/'))
})
+
+function generateFixtures (file) {
+ const json = convertYamlToJson(file)
+ const componentName = path.dirname(file.path).split(path.sep).slice(-1).toString()
+ const componentTemplatePath = path.join(configPaths.components, componentName, 'template.njk')
+
+ if (json) {
+ const examplesJson = json.examples
+
+ if (examplesJson) {
+ const fixtures = {
+ component: componentName,
+ fixtures: []
+ }
+
+ examplesJson.forEach(function (example) {
+ const fixture = {
+ name: example.name,
+ options: example.data,
+ html: nunjucks.render(componentTemplatePath, { params: example.data }).trim()
+ }
+
+ fixtures.fixtures.push(fixture)
+ })
+
+ file.contents = Buffer.from(JSON.stringify(fixtures, null, 4))
+ return file
+ } else {
+ console.error(file.path + ' is missing "examples" and/or "params"')
+ }
+ }
+}
+
+function generateMacroOptions (file) {
+ const json = convertYamlToJson(file)
+ let paramsJson
+
+ if (json) {
+ paramsJson = json.params // We only want the 'params' data from component yaml
+
+ if (paramsJson) {
+ file.contents = Buffer.from(JSON.stringify(paramsJson, null, 4))
+ return file
+ } else {
+ console.error(file.path + ' is missing "params"')
+ }
+ }
+}
+
+function convertYamlToJson (file) {
+ const componentName = path.dirname(file.path).split(path.sep).slice(-1).toString()
+ const componentPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
+ let yaml
+
+ try {
+ yaml = fs.readFileSync(componentPath, { encoding: 'utf8', json: true })
+ } catch (e) {
+ console.error('ENOENT: no such file or directory: ', componentPath)
+ }
+
+ if (yaml) {
+ return yamlToJson.safeLoad(yaml)
+ }
+
+ return false
+}
diff --git a/tasks/gulp/lint.js b/tasks/gulp/lint.js
deleted file mode 100644
index 5529347ee1..0000000000
--- a/tasks/gulp/lint.js
+++ /dev/null
@@ -1,16 +0,0 @@
-'use strict'
-
-const gulp = require('gulp')
-const configPaths = require('../../config/paths.json')
-const sasslint = require('gulp-sass-lint')
-
-// Scss lint check -----------------------
-// ---------------------------------------
-gulp.task('scss:lint', () => {
- return gulp.src(configPaths.src + '**/*.scss')
- .pipe(sasslint({
- configFile: configPaths.config + '.sass-lint.yml'
- }))
- .pipe(sasslint.format())
- .pipe(sasslint.failOnError())
-})
diff --git a/tasks/gulp/nodemon.js b/tasks/gulp/nodemon.js
new file mode 100644
index 0000000000..94972c2963
--- /dev/null
+++ b/tasks/gulp/nodemon.js
@@ -0,0 +1,18 @@
+'use strict'
+const gulp = require('gulp')
+const nodemon = require('nodemon')
+const paths = require('../../config/paths.json')
+
+// Nodemon task --------------------------
+// Restarts node app for changes affecting
+// js and json files
+// ---------------------------------------
+gulp.task('nodemon', () => {
+ return nodemon({
+ watch: [
+ paths.app,
+ paths.src
+ ],
+ script: 'app/start.js'
+ })
+})
diff --git a/tasks/gulp/sassdoc.js b/tasks/gulp/sassdoc.js
index 116d7f8bfb..c27d4da544 100644
--- a/tasks/gulp/sassdoc.js
+++ b/tasks/gulp/sassdoc.js
@@ -7,6 +7,13 @@ gulp.task('sassdoc', function () {
.pipe(sassdoc({
dest: paths.sassdoc,
groups: {
+ 'helpers/accessibility': 'Helpers / Accessibility',
+ 'helpers/colour': 'Helpers / Colour',
+ 'helpers/layout': 'Helpers / Layout',
+ 'helpers/links': 'Helpers / Links',
+ 'helpers/shapes': 'Helpers / Shapes',
+ 'helpers/spacing': 'Helpers / Spacing',
+ 'helpers/typography': 'Helpers / Typography',
'settings/assets': 'Settings / Assets',
'settings/colours': 'Settings / Colours',
'settings/compatibility': 'Settings / Compatibility',
@@ -18,7 +25,9 @@ gulp.task('sassdoc', function () {
'settings/typography': 'Settings / Typography',
tools: 'Tools',
helpers: 'Helpers',
- overrides: 'Overrides'
+ overrides: 'Overrides',
+ objects: 'Objects',
+ 'objects/layout': 'Objects / Layout'
}
}))
.resume()
diff --git a/tasks/gulp/stylelint.js b/tasks/gulp/stylelint.js
new file mode 100644
index 0000000000..cd7ae17918
--- /dev/null
+++ b/tasks/gulp/stylelint.js
@@ -0,0 +1,18 @@
+'use strict'
+
+const gulp = require('gulp')
+const configPaths = require('../../config/paths.json')
+const stylelint = require('gulp-stylelint')
+
+gulp.task('scss:lint', () => {
+ return gulp.src([
+ configPaths.app + '**/*.scss',
+ configPaths.src + '**/*.scss'
+ ])
+ .pipe(stylelint({
+ failAfterError: true,
+ reporters: [
+ { formatter: 'string', console: true }
+ ]
+ }))
+})
diff --git a/tasks/gulp/watch.js b/tasks/gulp/watch.js
index de6e69a961..261a4d48c0 100644
--- a/tasks/gulp/watch.js
+++ b/tasks/gulp/watch.js
@@ -5,7 +5,7 @@ const configPaths = require('../../config/paths.json')
// Watch task ----------------------------
// When a file is changed, re-run the build task.
// ---------------------------------------
-gulp.task('watch', () => {
- gulp.watch([configPaths.src + '**/**/*.scss', configPaths.app + 'assets/scss/**/*.scss'], ['styles', 'sassdoc'])
- gulp.watch([configPaths.src + '**/**/*.js'], ['scripts'])
-})
+gulp.task('watch', () => Promise.all([
+ gulp.watch([configPaths.src + '**/**/*.scss', configPaths.app + 'assets/scss/**/*.scss'], gulp.parallel('styles', 'sassdoc')),
+ gulp.watch([configPaths.src + '**/**/*.js'], gulp.series('scripts'))
+]))