Socket
Socket
Sign inDemoInstall

govuk-frontend

Package Overview
Dependencies
0
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.14.0 to 4.0.0

govuk/components/skip-link/skip-link.js
govuk/objects/_template.scss

232

govuk/components/accordion/accordion.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Accordion', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Accordion = factory());
}(this, (function () { 'use strict';

@@ -765,15 +765,24 @@

this.$sections = $module.querySelectorAll('.govuk-accordion__section');
this.$openAllButton = '';
this.$showAllButton = '';
this.browserSupportsSessionStorage = helper.checkForSessionStorage();
this.controlsClass = 'govuk-accordion__controls';
this.openAllClass = 'govuk-accordion__open-all';
this.iconClass = 'govuk-accordion__icon';
this.showAllClass = 'govuk-accordion__show-all';
this.showAllTextClass = 'govuk-accordion__show-all-text';
this.sectionExpandedClass = 'govuk-accordion__section--expanded';
this.sectionButtonClass = 'govuk-accordion__section-button';
this.sectionHeaderClass = 'govuk-accordion__section-header';
this.sectionHeaderFocusedClass = 'govuk-accordion__section-header--focused';
this.sectionHeadingClass = 'govuk-accordion__section-heading';
this.sectionHeadingTextClass = 'govuk-accordion__section-heading-text';
this.sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus';
this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle';
this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus';
this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text';
this.upChevronIconClass = 'govuk-accordion-nav__chevron';
this.downChevronIconClass = 'govuk-accordion-nav__chevron--down';
this.sectionSummaryClass = 'govuk-accordion__section-summary';
this.sectionButtonClass = 'govuk-accordion__section-button';
this.sectionExpandedClass = 'govuk-accordion__section--expanded';
this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus';
}

@@ -789,8 +798,7 @@

this.initControls();
this.initSectionHeaders();
// See if "Open all" button text should be updated
// See if "Show all sections" button text should be updated
var areAllSectionsOpen = this.checkIfAllSectionsOpen();
this.updateOpenAllButton(areAllSectionsOpen);
this.updateShowAllButton(areAllSectionsOpen);
};

@@ -800,18 +808,26 @@

Accordion.prototype.initControls = function () {
// Create "Open all" button and set attributes
this.$openAllButton = document.createElement('button');
this.$openAllButton.setAttribute('type', 'button');
this.$openAllButton.innerHTML = 'Open all <span class="govuk-visually-hidden">sections</span>';
this.$openAllButton.setAttribute('class', this.openAllClass);
this.$openAllButton.setAttribute('aria-expanded', 'false');
this.$openAllButton.setAttribute('type', 'button');
// Create "Show all" button and set attributes
this.$showAllButton = document.createElement('button');
this.$showAllButton.setAttribute('type', 'button');
this.$showAllButton.setAttribute('class', this.showAllClass);
this.$showAllButton.setAttribute('aria-expanded', 'false');
// Create icon, add to element
var $icon = document.createElement('span');
$icon.classList.add(this.upChevronIconClass);
this.$showAllButton.appendChild($icon);
// Create control wrapper and add controls to it
var accordionControls = document.createElement('div');
accordionControls.setAttribute('class', this.controlsClass);
accordionControls.appendChild(this.$openAllButton);
this.$module.insertBefore(accordionControls, this.$module.firstChild);
var $accordionControls = document.createElement('div');
$accordionControls.setAttribute('class', this.controlsClass);
$accordionControls.appendChild(this.$showAllButton);
this.$module.insertBefore($accordionControls, this.$module.firstChild);
// Handle events for the controls
this.$openAllButton.addEventListener('click', this.onOpenOrCloseAllToggle.bind(this));
// Build additional wrapper for Show all toggle text and place after icon
var $wrappershowAllText = document.createElement('span');
$wrappershowAllText.classList.add(this.showAllTextClass);
this.$showAllButton.appendChild($wrappershowAllText);
// Handle click events on the show/hide all button
this.$showAllButton.addEventListener('click', this.onShowOrHideAllToggle.bind(this));
};

@@ -824,9 +840,8 @@

// Set header attributes
var header = $section.querySelector('.' + this.sectionHeaderClass);
this.initHeaderAttributes(header, i);
var $header = $section.querySelector('.' + this.sectionHeaderClass);
this.constructHeaderMarkup($header, i);
this.setExpanded(this.isExpanded($section), $section);
// Handle events
header.addEventListener('click', this.onSectionToggle.bind(this, $section));
$header.addEventListener('click', this.onSectionToggle.bind(this, $section));

@@ -839,5 +854,3 @@ // See if there is any state stored in sessionStorage and set the sections to

// Set individual header attributes
Accordion.prototype.initHeaderAttributes = function ($headerWrapper, index) {
var $module = this;
Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
var $span = $headerWrapper.querySelector('.' + this.sectionButtonClass);

@@ -847,6 +860,5 @@ var $heading = $headerWrapper.querySelector('.' + this.sectionHeadingClass);

// Copy existing span element to an actual button element, for improved accessibility.
// Create a button element that will replace the '.govuk-accordion__section-button' span
var $button = document.createElement('button');
$button.setAttribute('type', 'button');
$button.setAttribute('id', this.moduleId + '-heading-' + (index + 1));
$button.setAttribute('aria-controls', this.moduleId + '-content-' + (index + 1));

@@ -857,31 +869,83 @@

var attr = $span.attributes.item(i);
$button.setAttribute(attr.nodeName, attr.nodeValue);
// Add all attributes but not ID as this is being added to
// the section heading ($headingText)
if (attr.nodeName !== 'id') {
$button.setAttribute(attr.nodeName, attr.nodeValue);
}
}
$button.addEventListener('focusin', function (e) {
if (!$headerWrapper.classList.contains($module.sectionHeaderFocusedClass)) {
$headerWrapper.className += ' ' + $module.sectionHeaderFocusedClass;
// Create container for heading text so it can be styled
var $headingText = document.createElement('span');
$headingText.classList.add(this.sectionHeadingTextClass);
// Copy the span ID to the heading text to allow it to be referenced by `aria-labelledby` on the
// hidden content area without "Show this section"
$headingText.id = $span.id;
// Create an inner heading text container to limit the width of the focus state
var $headingTextFocus = document.createElement('span');
$headingTextFocus.classList.add(this.sectionHeadingTextFocusClass);
$headingText.appendChild($headingTextFocus);
// span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
$headingTextFocus.innerHTML = $span.innerHTML;
// Create container for show / hide icons and text.
var $showToggle = document.createElement('span');
$showToggle.classList.add(this.sectionShowHideToggleClass);
// Tell Google not to index the 'show' text as part of the heading
// For the snippet to work with JavaScript, it must be added before adding the page element to the
// page's DOM. See https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr
$showToggle.setAttribute('data-nosnippet', '');
// Create an inner container to limit the width of the focus state
var $showToggleFocus = document.createElement('span');
$showToggleFocus.classList.add(this.sectionShowHideToggleFocusClass);
$showToggle.appendChild($showToggleFocus);
// Create wrapper for the show / hide text. Append text after the show/hide icon
var $showToggleText = document.createElement('span');
var $icon = document.createElement('span');
$icon.classList.add(this.upChevronIconClass);
$showToggleFocus.appendChild($icon);
$showToggleText.classList.add(this.sectionShowHideTextClass);
$showToggleFocus.appendChild($showToggleText);
// Append elements to the button:
// 1. Heading text
// 2. Punctuation
// 3. (Optional: Summary line followed by punctuation)
// 4. Show / hide toggle
$button.appendChild($headingText);
$button.appendChild(this.getButtonPunctuationEl());
// If summary content exists add to DOM in correct order
if (typeof ($summary) !== 'undefined' && $summary !== null) {
// Create a new `span` element and copy the summary line content from the original `div` to the
// new `span`
// This is because the summary line text is now inside a button element, which can only contain
// phrasing content
var $summarySpan = document.createElement('span');
// Create an inner summary container to limit the width of the summary focus state
var $summarySpanFocus = document.createElement('span');
$summarySpanFocus.classList.add(this.sectionSummaryFocusClass);
$summarySpan.appendChild($summarySpanFocus);
// Get original attributes, and pass them to the replacement
for (var j = 0, l = $summary.attributes.length; j < l; ++j) {
var nodeName = $summary.attributes.item(j).nodeName;
var nodeValue = $summary.attributes.item(j).nodeValue;
$summarySpan.setAttribute(nodeName, nodeValue);
}
});
$button.addEventListener('blur', function (e) {
$headerWrapper.classList.remove($module.sectionHeaderFocusedClass);
});
// Copy original contents of summary to the new summary span
$summarySpanFocus.innerHTML = $summary.innerHTML;
if (typeof ($summary) !== 'undefined' && $summary !== null) {
$button.setAttribute('aria-describedby', this.moduleId + '-summary-' + (index + 1));
// Replace the original summary `div` with the new summary `span`
$summary.parentNode.replaceChild($summarySpan, $summary);
$button.appendChild($summarySpan);
$button.appendChild(this.getButtonPunctuationEl());
}
// $span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
$button.innerHTML = $span.innerHTML;
$button.appendChild($showToggle);
$heading.removeChild($span);
$heading.appendChild($button);
// Add "+/-" icon
var icon = document.createElement('span');
icon.className = this.iconClass;
icon.setAttribute('aria-hidden', 'true');
$button.appendChild(icon);
};

@@ -899,6 +963,5 @@

// When Open/Close All toggled, set and store state
Accordion.prototype.onOpenOrCloseAllToggle = function () {
Accordion.prototype.onShowOrHideAllToggle = function () {
var $module = this;
var $sections = this.$sections;
var nowExpanded = !this.checkIfAllSectionsOpen();

@@ -912,3 +975,3 @@

$module.updateOpenAllButton(nowExpanded);
$module.updateShowAllButton(nowExpanded);
};

@@ -918,14 +981,28 @@

Accordion.prototype.setExpanded = function (expanded, $section) {
var $icon = $section.querySelector('.' + this.upChevronIconClass);
var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass);
var $button = $section.querySelector('.' + this.sectionButtonClass);
var $newButtonText = expanded ? 'Hide' : 'Show';
// Build additional copy of "this section" for assistive technology and place inside toggle link
var $visuallyHiddenText = document.createElement('span');
$visuallyHiddenText.classList.add('govuk-visually-hidden');
$visuallyHiddenText.innerHTML = ' this section';
$showHideText.innerHTML = $newButtonText;
$showHideText.appendChild($visuallyHiddenText);
$button.setAttribute('aria-expanded', expanded);
// Swap icon, change class
if (expanded) {
$section.classList.add(this.sectionExpandedClass);
$icon.classList.remove(this.downChevronIconClass);
} else {
$section.classList.remove(this.sectionExpandedClass);
$icon.classList.add(this.downChevronIconClass);
}
// See if "Open all" button text should be updated
// See if "Show all sections" button text should be updated
var areAllSectionsOpen = this.checkIfAllSectionsOpen();
this.updateOpenAllButton(areAllSectionsOpen);
this.updateShowAllButton(areAllSectionsOpen);
};

@@ -949,8 +1026,16 @@

// Update "Open all" button
Accordion.prototype.updateOpenAllButton = function (expanded) {
var newButtonText = expanded ? 'Close all' : 'Open all';
newButtonText += '<span class="govuk-visually-hidden"> sections</span>';
this.$openAllButton.setAttribute('aria-expanded', expanded);
this.$openAllButton.innerHTML = newButtonText;
// Update "Show all sections" button
Accordion.prototype.updateShowAllButton = function (expanded) {
var $showAllIcon = this.$showAllButton.querySelector('.' + this.upChevronIconClass);
var $showAllText = this.$showAllButton.querySelector('.' + this.showAllTextClass);
var newButtonText = expanded ? 'Hide all sections' : 'Show all sections';
this.$showAllButton.setAttribute('aria-expanded', expanded);
$showAllText.innerHTML = newButtonText;
// Swap icon, toggle class
if (expanded) {
$showAllIcon.classList.remove(this.downChevronIconClass);
} else {
$showAllIcon.classList.add(this.downChevronIconClass);
}
};

@@ -979,3 +1064,3 @@

if (this.browserSupportsSessionStorage) {
// We need a unique way of identifying each content in the accordion. Since
// We need a unique way of identifying each content in the Accordion. Since
// an `#id` should be unique and an `id` is required for `aria-` attributes

@@ -1021,4 +1106,23 @@ // `id` can be safely used.

/**
* Create an element to improve semantics of the section button with punctuation
* @return {object} DOM element
*
* Used to add pause (with a comma) for assistive technology.
* Example: [heading]Section A ,[pause] Show this section.
* https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/
*
* Adding punctuation to the button can also improve its general semantics by dividing its contents
* into thematic chunks.
* See https://github.com/alphagov/govuk-frontend/issues/2327#issuecomment-922957442
*/
Accordion.prototype.getButtonPunctuationEl = function () {
var $punctuationEl = document.createElement('span');
$punctuationEl.classList.add('govuk-visually-hidden', 'govuk-accordion__section-heading-divider');
$punctuationEl.innerHTML = ', ';
return $punctuationEl
};
return Accordion;
})));

42

govuk/components/accordion/fixtures.json

@@ -14,3 +14,3 @@ {

"content": {
"html": "<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n"
"html": "<p class=\"govuk-body\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n"
}

@@ -28,3 +28,3 @@ },

},
"html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
"html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n <p class=\"govuk-body\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
"hidden": false

@@ -45,3 +45,3 @@ },

"content": {
"html": "<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n"
"html": "<p class=\"govuk-body\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n"
}

@@ -54,3 +54,3 @@ },

"summary": {
"html": "<span class=\"govuk-!-font-weight-regular\">Additional description</span>"
"html": "<span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>"
},

@@ -63,6 +63,38 @@ "content": {

},
"html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n Test\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n Additional description\n </div>\n \n </div>\n <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n Test 2\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n <span class=\"govuk-!-font-weight-regular\">Additional description</span>\n </div>\n \n </div>\n <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
"html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n Test\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n Additional description\n </div>\n \n </div>\n <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n <p class=\"govuk-body\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n Test 2\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n <span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>\n </div>\n \n </div>\n <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
"hidden": false
},
{
"name": "with long content and description",
"options": {
"id": "with-long-content-and-description",
"items": [
{
"heading": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor."
},
"summary": {
"text": "Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem."
},
"content": {
"html": "<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n"
}
},
{
"heading": {
"text": "Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum."
},
"summary": {
"html": "<span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>"
},
"content": {
"html": "<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n"
}
}
]
},
"html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-1\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n </div>\n \n </div>\n <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-2\">\n Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n </div>\n \n </div>\n <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
"hidden": false
},
{
"name": "with one section open",

@@ -69,0 +101,0 @@ "options": {

6

govuk/components/accordion/macro-options.json

@@ -36,3 +36,3 @@ [

"required": true,
"description": "The title of each section. If `heading.html` is supplied, this is ignored. This is used both as the title for each section, and as the button to open or close each section."
"description": "The title of each section. If `heading.html` is supplied, this is ignored."
},

@@ -43,3 +43,3 @@ {

"required": true,
"description": "The HTML content of the header for each section which is used both as the title for each section, and as the button to open or close each section."
"description": "The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML `<button>` element, so you can only add [phrasing content](https://html.spec.whatwg.org/#phrasing-content) to it."
},

@@ -56,3 +56,3 @@ {

"required": false,
"description": "HTML content for summary line."
"description": "The HTML content for the summary line. The summary line is inside the HTML `<button>` element, so you can only add [phrasing content](https://html.spec.whatwg.org/#phrasing-content) to it."
},

@@ -59,0 +59,0 @@ {

4

govuk/components/button/button.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Button', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Button = factory());
}(this, (function () { 'use strict';

@@ -6,0 +6,0 @@

6

govuk/components/character-count/character-count.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.CharacterCount', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.CharacterCount = factory());
}(this, (function () { 'use strict';

@@ -1021,3 +1021,3 @@

if (this.$textarea) {
this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
this.$countMessage = document.getElementById(this.$textarea.id + '-info');
}

@@ -1024,0 +1024,0 @@ }

17

govuk/components/character-count/fixtures.json

@@ -61,3 +61,3 @@ {

},
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"exceeding-characters\">\n Full address\n </label>\n\n\n \n \n <span id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"exceeding-characters\">\n Full address\n </label>\n\n\n \n \n <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n </p>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
"hidden": false

@@ -224,3 +224,3 @@ },

},
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-custom-error-class\">\n With custom error class\n </label>\n\n\n \n \n <span id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-custom-error-class\">\n With custom error class\n </label>\n\n\n \n \n <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
"hidden": true

@@ -240,4 +240,17 @@ },

"hidden": true
},
{
"name": "with id with special characters",
"options": {
"id": "user1.profile[address]",
"name": "address",
"maxlength": 10,
"label": {
"text": "Full address"
}
},
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"user1.profile[address]\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n</div>\n\n <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
"hidden": false
}
]
}

18

govuk/components/checkboxes/checkboxes.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Checkboxes', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Checkboxes = factory());
}(this, (function () { 'use strict';

@@ -1059,3 +1059,3 @@

// target element does not exist.
if (!target || !$module.querySelector('#' + target)) {
if (!target || !document.getElementById(target)) {
return

@@ -1104,3 +1104,3 @@ }

Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
var $target = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
var $target = document.getElementById($input.getAttribute('aria-controls'));

@@ -1128,6 +1128,5 @@ if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {

$inputWithSameName.checked = false;
this.syncConditionalRevealWithInputState($inputWithSameName);
}
});
this.syncAllConditionalReveals();
}.bind(this));
};

@@ -1151,6 +1150,5 @@

$exclusiveInput.checked = false;
this.syncConditionalRevealWithInputState($exclusiveInput);
}
});
this.syncAllConditionalReveals();
}.bind(this));
};

@@ -1157,0 +1155,0 @@

31

govuk/components/cookie-banner/fixtures.json

@@ -127,2 +127,33 @@ {

{
"name": "with html",
"options": {
"messages": [
{
"headingHtml": "Cookies on <span>my service</span>",
"html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p><p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>",
"actions": [
{
"text": "Accept analytics cookies",
"type": "submit",
"name": "cookies",
"value": "accept"
},
{
"text": "Reject analytics cookies",
"type": "submit",
"name": "cookies",
"value": "reject"
},
{
"text": "View cookie preferences",
"href": "/cookie-preferences"
}
]
}
]
},
"html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p><p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Accept analytics cookies\n </button>\n \n \n \n <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Reject analytics cookies\n </button>\n \n \n \n \n \n \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \n \n \n </div>\n \n </div>\n \n</div>",
"hidden": false
},
{
"name": "heading html",

@@ -129,0 +160,0 @@ "options": {

12

govuk/components/date-input/fixtures.json

@@ -70,3 +70,3 @@ {

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -104,3 +104,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -139,3 +139,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <span id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -174,3 +174,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <span id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -209,3 +209,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <span id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": false

@@ -496,3 +496,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
"hidden": true

@@ -499,0 +499,0 @@ },

4

govuk/components/details/details.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Details', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Details = factory());
}(this, (function () { 'use strict';

@@ -6,0 +6,0 @@

16

govuk/components/error-message/fixtures.json

@@ -9,3 +9,3 @@ {

},
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</span>",
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</p>",
"hidden": false

@@ -19,3 +19,3 @@ },

},
"html": "<span id=\"my-error-message-id\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>",
"html": "<p id=\"my-error-message-id\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>",
"hidden": true

@@ -29,3 +29,3 @@ },

},
"html": "<span class=\"govuk-error-message custom-class\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>",
"html": "<p class=\"govuk-error-message custom-class\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>",
"hidden": true

@@ -38,3 +38,3 @@ },

},
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</span>",
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</p>",
"hidden": true

@@ -47,3 +47,3 @@ },

},
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</span>",
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</p>",
"hidden": true

@@ -60,3 +60,3 @@ },

},
"html": "<span class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>",
"html": "<p class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>",
"hidden": true

@@ -70,3 +70,3 @@ },

},
"html": "<span class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</span>",
"html": "<p class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</p>",
"hidden": true

@@ -80,3 +80,3 @@ },

},
"html": "<span class=\"govuk-error-message\">\n There is an error on line 42\n</span>",
"html": "<p class=\"govuk-error-message\">\n There is an error on line 42\n</p>",
"hidden": true

@@ -83,0 +83,0 @@ }

4

govuk/components/error-summary/error-summary.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.ErrorSummary', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.ErrorSummary = factory());
}(this, (function () { 'use strict';

@@ -6,0 +6,0 @@

8

govuk/components/file-upload/fixtures.json

@@ -46,3 +46,3 @@ {

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n\n\n \n \n <span id=\"file-upload-3-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n\n\n \n \n <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>",
"hidden": false

@@ -160,3 +160,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-with-error\">\n Upload a file\n </label>\n\n\n \n \n <span id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"file-upload-with-error\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-with-error\">\n Upload a file\n </label>\n\n\n \n \n <p id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"file-upload-with-error\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>",
"hidden": true

@@ -177,3 +177,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby\">\n Upload a file\n </label>\n\n\n \n \n <span id=\"file-upload-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby\" name=\"file-upload-error-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby\">\n Upload a file\n </label>\n\n\n \n \n <p id=\"file-upload-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby\" name=\"file-upload-error-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-error\">\n</div>",
"hidden": true

@@ -197,3 +197,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n hint\n </div>\n\n\n \n \n <span id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n Upload a file\n </label>\n\n \n \n <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n hint\n </div>\n\n\n \n \n <p id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>",
"hidden": true

@@ -200,0 +200,0 @@ }

6

govuk/components/footer/macro-options.json

@@ -73,2 +73,8 @@ [

{
"name": "width",
"type": "string",
"required": false,
"description": "Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'."
},
{
"name": "items",

@@ -75,0 +81,0 @@ "type": "array",

8

govuk/components/header/header.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Header', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Header = factory());
}(this, (function () { 'use strict';

@@ -1036,3 +1036,3 @@

this.syncState(this.$menu.classList.contains('govuk-header__navigation--open'));
this.syncState(this.$menu.classList.contains('govuk-header__navigation-list--open'));
this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));

@@ -1061,3 +1061,3 @@ };

Header.prototype.handleMenuButtonClick = function () {
var isVisible = this.$menu.classList.toggle('govuk-header__navigation--open');
var isVisible = this.$menu.classList.toggle('govuk-header__navigation-list--open');
this.syncState(isVisible);

@@ -1064,0 +1064,0 @@ };

10

govuk/components/input/fixtures.json

@@ -46,3 +46,3 @@ {

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <span id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>",
"hidden": false

@@ -329,3 +329,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <span id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
"hidden": false

@@ -448,3 +448,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-describedby\">\n With error describedBy\n </label>\n\n\n \n \n <span id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-describedby\">\n With error describedBy\n </label>\n\n\n \n \n <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n</div>",
"hidden": true

@@ -467,3 +467,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n With error and hint\n </label>\n\n \n \n <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n With error and hint\n </label>\n\n \n \n <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>",
"hidden": true

@@ -487,3 +487,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n With error, hint and describedBy\n </label>\n\n \n \n <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n With error, hint and describedBy\n </label>\n\n \n \n <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>",
"hidden": true

@@ -490,0 +490,0 @@ },

501

govuk/components/notification-banner/notification-banner.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.NotificationBanner', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.NotificationBanner = factory());
}(this, (function () { 'use strict';
(function(undefined) {
// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
var detect = ('Window' in this);
if (detect) return
// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Window&flags=always
if ((typeof WorkerGlobalScope === "undefined") && (typeof importScripts !== "function")) {
(function (global) {
if (global.constructor) {
global.Window = global.constructor;
} else {
(global.Window = global.constructor = new Function('return function Window() {}')()).prototype = this;
}
}(this));
}
})
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
(function(undefined) {
// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
var detect = ("Document" in this);
if (detect) return
// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Document&flags=always
if ((typeof WorkerGlobalScope === "undefined") && (typeof importScripts !== "function")) {
if (this.HTMLDocument) { // IE8
// HTMLDocument is an extension of Document. If the browser has HTMLDocument but not Document, the former will suffice as an alias for the latter.
this.Document = this.HTMLDocument;
} else {
// Create an empty function to act as the missing constructor for the document object, attach the document object as its prototype. The function needs to be anonymous else it is hoisted and causes the feature detect to prematurely pass, preventing the assignments below being made.
this.Document = this.HTMLDocument = document.constructor = (new Function('return function Document() {}')());
this.Document.prototype = document;
}
}
})
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
(function(undefined) {
// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Element/detect.js
var detect = ('Element' in this && 'HTMLElement' in this);
if (detect) return
// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Element&flags=always
(function () {
// IE8
if (window.Element && !window.HTMLElement) {
window.HTMLElement = window.Element;
return;
}
// create Element constructor
window.Element = window.HTMLElement = new Function('return function Element() {}')();
// generate sandboxed iframe
var vbody = document.appendChild(document.createElement('body'));
var frame = vbody.appendChild(document.createElement('iframe'));
// use sandboxed iframe to replicate Element functionality
var frameDocument = frame.contentWindow.document;
var prototype = Element.prototype = frameDocument.appendChild(frameDocument.createElement('*'));
var cache = {};
// polyfill Element.prototype on an element
var shiv = function (element, deep) {
var
childNodes = element.childNodes || [],
index = -1,
key, value, childNode;
if (element.nodeType === 1 && element.constructor !== Element) {
element.constructor = Element;
for (key in cache) {
value = cache[key];
element[key] = value;
}
}
while (childNode = deep && childNodes[++index]) {
shiv(childNode, deep);
}
return element;
};
var elements = document.getElementsByTagName('*');
var nativeCreateElement = document.createElement;
var interval;
var loopLimit = 100;
prototype.attachEvent('onpropertychange', function (event) {
var
propertyName = event.propertyName,
nonValue = !cache.hasOwnProperty(propertyName),
newValue = prototype[propertyName],
oldValue = cache[propertyName],
index = -1,
element;
while (element = elements[++index]) {
if (element.nodeType === 1) {
if (nonValue || element[propertyName] === oldValue) {
element[propertyName] = newValue;
}
}
}
cache[propertyName] = newValue;
});
prototype.constructor = Element;
if (!prototype.hasAttribute) {
// <Element>.hasAttribute
prototype.hasAttribute = function hasAttribute(name) {
return this.getAttribute(name) !== null;
};
}
// Apply Element prototype to the pre-existing DOM as soon as the body element appears.
function bodyCheck() {
if (!(loopLimit--)) clearTimeout(interval);
if (document.body && !document.body.prototype && /(complete|interactive)/.test(document.readyState)) {
shiv(document, true);
if (interval && document.body.prototype) clearTimeout(interval);
return (!!document.body.prototype);
}
return false;
}
if (!bodyCheck()) {
document.onreadystatechange = bodyCheck;
interval = setInterval(bodyCheck, 25);
}
// Apply to any new elements created after load
document.createElement = function createElement(nodeName) {
var element = nativeCreateElement(String(nodeName).toLowerCase());
return shiv(element);
};
// remove sandboxed iframe
document.removeChild(vbody);
}());
})
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
(function(undefined) {
// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
var detect = (
// In IE8, defineProperty could only act on DOM elements, so full support
// for the feature requires the ability to set a property on an arbitrary object
'defineProperty' in Object && (function() {
try {
var a = {};
Object.defineProperty(a, 'test', {value:42});
return true;
} catch(e) {
return false
}
}())
);
if (detect) return
// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Object.defineProperty&flags=always
(function (nativeDefineProperty) {
var supportsAccessors = Object.prototype.hasOwnProperty('__defineGetter__');
var ERR_ACCESSORS_NOT_SUPPORTED = 'Getters & setters cannot be defined on this javascript engine';
var ERR_VALUE_ACCESSORS = 'A property cannot both have accessors and be writable or have a value';
Object.defineProperty = function defineProperty(object, property, descriptor) {
// Where native support exists, assume it
if (nativeDefineProperty && (object === window || object === document || object === Element.prototype || object instanceof Element)) {
return nativeDefineProperty(object, property, descriptor);
}
if (object === null || !(object instanceof Object || typeof object === 'object')) {
throw new TypeError('Object.defineProperty called on non-object');
}
if (!(descriptor instanceof Object)) {
throw new TypeError('Property description must be an object');
}
var propertyString = String(property);
var hasValueOrWritable = 'value' in descriptor || 'writable' in descriptor;
var getterType = 'get' in descriptor && typeof descriptor.get;
var setterType = 'set' in descriptor && typeof descriptor.set;
// handle descriptor.get
if (getterType) {
if (getterType !== 'function') {
throw new TypeError('Getter must be a function');
}
if (!supportsAccessors) {
throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
}
if (hasValueOrWritable) {
throw new TypeError(ERR_VALUE_ACCESSORS);
}
Object.__defineGetter__.call(object, propertyString, descriptor.get);
} else {
object[propertyString] = descriptor.value;
}
// handle descriptor.set
if (setterType) {
if (setterType !== 'function') {
throw new TypeError('Setter must be a function');
}
if (!supportsAccessors) {
throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
}
if (hasValueOrWritable) {
throw new TypeError(ERR_VALUE_ACCESSORS);
}
Object.__defineSetter__.call(object, propertyString, descriptor.set);
}
// OK to define value unconditionally - if a getter has been specified as well, an error would be thrown above
if ('value' in descriptor) {
object[propertyString] = descriptor.value;
}
return object;
};
}(Object.defineProperty));
})
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
(function(undefined) {
// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Event/detect.js
var detect = (
(function(global) {
if (!('Event' in global)) return false;
if (typeof global.Event === 'function') return true;
try {
// In IE 9-11, the Event object exists but cannot be instantiated
new Event('click');
return true;
} catch(e) {
return false;
}
}(this))
);
if (detect) return
// Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Event&flags=always
(function () {
var unlistenableWindowEvents = {
click: 1,
dblclick: 1,
keyup: 1,
keypress: 1,
keydown: 1,
mousedown: 1,
mouseup: 1,
mousemove: 1,
mouseover: 1,
mouseenter: 1,
mouseleave: 1,
mouseout: 1,
storage: 1,
storagecommit: 1,
textinput: 1
};
// This polyfill depends on availability of `document` so will not run in a worker
// However, we asssume there are no browsers with worker support that lack proper
// support for `Event` within the worker
if (typeof document === 'undefined' || typeof window === 'undefined') return;
function indexOf(array, element) {
var
index = -1,
length = array.length;
while (++index < length) {
if (index in array && array[index] === element) {
return index;
}
}
return -1;
}
var existingProto = (window.Event && window.Event.prototype) || null;
window.Event = Window.prototype.Event = function Event(type, eventInitDict) {
if (!type) {
throw new Error('Not enough arguments');
}
var event;
// Shortcut if browser supports createEvent
if ('createEvent' in document) {
event = document.createEvent('Event');
var bubbles = eventInitDict && eventInitDict.bubbles !== undefined ? eventInitDict.bubbles : false;
var cancelable = eventInitDict && eventInitDict.cancelable !== undefined ? eventInitDict.cancelable : false;
event.initEvent(type, bubbles, cancelable);
return event;
}
event = document.createEventObject();
event.type = type;
event.bubbles = eventInitDict && eventInitDict.bubbles !== undefined ? eventInitDict.bubbles : false;
event.cancelable = eventInitDict && eventInitDict.cancelable !== undefined ? eventInitDict.cancelable : false;
return event;
};
if (existingProto) {
Object.defineProperty(window.Event, 'prototype', {
configurable: false,
enumerable: false,
writable: true,
value: existingProto
});
}
if (!('createEvent' in document)) {
window.addEventListener = Window.prototype.addEventListener = Document.prototype.addEventListener = Element.prototype.addEventListener = function addEventListener() {
var
element = this,
type = arguments[0],
listener = arguments[1];
if (element === window && type in unlistenableWindowEvents) {
throw new Error('In IE8 the event: ' + type + ' is not available on the window object. Please see https://github.com/Financial-Times/polyfill-service/issues/317 for more information.');
}
if (!element._events) {
element._events = {};
}
if (!element._events[type]) {
element._events[type] = function (event) {
var
list = element._events[event.type].list,
events = list.slice(),
index = -1,
length = events.length,
eventElement;
event.preventDefault = function preventDefault() {
if (event.cancelable !== false) {
event.returnValue = false;
}
};
event.stopPropagation = function stopPropagation() {
event.cancelBubble = true;
};
event.stopImmediatePropagation = function stopImmediatePropagation() {
event.cancelBubble = true;
event.cancelImmediate = true;
};
event.currentTarget = element;
event.relatedTarget = event.fromElement || null;
event.target = event.target || event.srcElement || element;
event.timeStamp = new Date().getTime();
if (event.clientX) {
event.pageX = event.clientX + document.documentElement.scrollLeft;
event.pageY = event.clientY + document.documentElement.scrollTop;
}
while (++index < length && !event.cancelImmediate) {
if (index in events) {
eventElement = events[index];
if (indexOf(list, eventElement) !== -1 && typeof eventElement === 'function') {
eventElement.call(element, event);
}
}
}
};
element._events[type].list = [];
if (element.attachEvent) {
element.attachEvent('on' + type, element._events[type]);
}
}
element._events[type].list.push(listener);
};
window.removeEventListener = Window.prototype.removeEventListener = Document.prototype.removeEventListener = Element.prototype.removeEventListener = function removeEventListener() {
var
element = this,
type = arguments[0],
listener = arguments[1],
index;
if (element._events && element._events[type] && element._events[type].list) {
index = indexOf(element._events[type].list, listener);
if (index !== -1) {
element._events[type].list.splice(index, 1);
if (!element._events[type].list.length) {
if (element.detachEvent) {
element.detachEvent('on' + type, element._events[type]);
}
delete element._events[type];
}
}
}
};
window.dispatchEvent = Window.prototype.dispatchEvent = Document.prototype.dispatchEvent = Element.prototype.dispatchEvent = function dispatchEvent(event) {
if (!arguments.length) {
throw new Error('Not enough arguments');
}
if (!event || typeof event.type !== 'string') {
throw new Error('DOM Events Exception 0');
}
var element = this, type = event.type;
try {
if (!event.bubbles) {
event.cancelBubble = true;
var cancelBubbleEvent = function (event) {
event.cancelBubble = true;
(element || window).detachEvent('on' + type, cancelBubbleEvent);
};
this.attachEvent('on' + type, cancelBubbleEvent);
}
this.fireEvent('on' + type, event);
} catch (error) {
event.target = element;
do {
event.currentTarget = element;
if ('_events' in element && typeof element._events[type] === 'function') {
element._events[type].call(element, event);
}
if (typeof element['on' + type] === 'function') {
element['on' + type].call(element, event);
}
element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
} while (element && !event.cancelBubble);
}
return true;
};
// Add the DOMContentLoaded Event
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') {
document.dispatchEvent(new Event('DOMContentLoaded', {
bubbles: true
}));
}
});
}
}());
})
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
function NotificationBanner ($module) {

@@ -8,0 +505,0 @@ this.$module = $module;

4

govuk/components/phase-banner/fixtures.json

@@ -68,7 +68,7 @@ {

"tag": {
"classes": "govuk-tag--inactive",
"classes": "govuk-tag--grey",
"text": "alpha"
}
},
"html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--inactive\">\n alpha\n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>",
"html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--grey\">\n alpha\n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>",
"hidden": true

@@ -75,0 +75,0 @@ }

8

govuk/components/radios/radios.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Radios', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Radios = factory());
}(this, (function () { 'use strict';

@@ -1059,3 +1059,3 @@

// target element does not exist.
if (!target || !$module.querySelector('#' + target)) {
if (!target || !document.getElementById(target)) {
return

@@ -1105,3 +1105,3 @@ }

Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
var $target = document.querySelector('#' + $input.getAttribute('aria-controls'));
var $target = document.getElementById($input.getAttribute('aria-controls'));

@@ -1108,0 +1108,0 @@ if ($target && $target.classList.contains('govuk-radios__conditional')) {

6

govuk/components/select/fixtures.json

@@ -61,3 +61,3 @@ {

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <span id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <p id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
"hidden": false

@@ -301,3 +301,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"hidden": true

@@ -325,3 +325,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"hidden": true

@@ -328,0 +328,0 @@ }

18

govuk/components/skip-link/fixtures.json

@@ -10,3 +10,3 @@ {

},
"html": "<a href=\"#content\" class=\"govuk-skip-link\">Skip to main content</a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to main content</a>",
"hidden": false

@@ -21,3 +21,3 @@ },

},
"html": "<a href=\"#content\" class=\"govuk-skip-link :focus\">Skip to main content</a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link :focus\" data-module=\"govuk-skip-link\">Skip to main content</a>",
"hidden": false

@@ -28,3 +28,3 @@ },

"options": {},
"html": "<a href=\"#content\" class=\"govuk-skip-link\"></a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\"></a>",
"hidden": true

@@ -38,3 +38,3 @@ },

},
"html": "<a href=\"#custom\" class=\"govuk-skip-link\">Skip to custom content</a>",
"html": "<a href=\"#custom\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to custom content</a>",
"hidden": true

@@ -47,3 +47,3 @@ },

},
"html": "<a href=\"#content\" class=\"govuk-skip-link\">skip</a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">skip</a>",
"hidden": true

@@ -56,3 +56,3 @@ },

},
"html": "<a href=\"#content\" class=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>",
"hidden": true

@@ -65,3 +65,3 @@ },

},
"html": "<a href=\"#content\" class=\"govuk-skip-link\"><p>skip</p></a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\"><p>skip</p></a>",
"hidden": true

@@ -75,3 +75,3 @@ },

},
"html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\">Skip link</a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\" data-module=\"govuk-skip-link\">Skip link</a>",
"hidden": true

@@ -88,3 +88,3 @@ },

},
"html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\">Skip link</a>",
"html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\" data-module=\"govuk-skip-link\">Skip link</a>",
"hidden": true

@@ -91,0 +91,0 @@ }

4

govuk/components/tabs/tabs.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
(global.GOVUKFrontend = factory());
typeof define === 'function' && define.amd ? define('GOVUKFrontend.Tabs', factory) :
(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Tabs = factory());
}(this, (function () { 'use strict';

@@ -6,0 +6,0 @@

4

govuk/components/tag/fixtures.json

@@ -16,5 +16,5 @@ {

"text": "alpha",
"classes": "govuk-tag--inactive"
"classes": "govuk-tag--grey"
},
"html": "<strong class=\"govuk-tag govuk-tag--inactive\">\n alpha\n</strong>",
"html": "<strong class=\"govuk-tag govuk-tag--grey\">\n alpha\n</strong>",
"hidden": false

@@ -21,0 +21,0 @@ },

8

govuk/components/textarea/fixtures.json

@@ -43,3 +43,3 @@ {

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"no-ni-reason\">\n Why can’t you provide a National Insurance number?\n </label>\n\n\n \n \n <span id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"no-ni-reason\">\n Why can’t you provide a National Insurance number?\n </label>\n\n\n \n \n <p id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n </p>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>",
"hidden": false

@@ -210,3 +210,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"textarea-with-error\">\n Textarea with error\n </label>\n\n\n \n \n <span id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"textarea-with-error\">\n Textarea with error\n </label>\n\n\n \n \n <p id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>",
"hidden": true

@@ -229,3 +229,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error\">\n With hint and error\n </label>\n\n \n \n <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-hint-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error\">\n With hint and error\n </label>\n\n \n \n <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-hint-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>",
"hidden": true

@@ -249,3 +249,3 @@ },

},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n With hint, error and describedBy\n </label>\n\n \n \n <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>",
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n With hint, error and describedBy\n </label>\n\n \n \n <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>",
"hidden": true

@@ -252,0 +252,0 @@ }

2

package.json
{
"name": "govuk-frontend",
"description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
"version": "3.14.0",
"version": "4.0.0",
"main": "govuk/all.js",

@@ -6,0 +6,0 @@ "sass": "govuk/all.scss",

govuk/core/_template.scss
govuk/tools/_iff.scss
govuk/all.js

Sorry, the diff of this file is too big to display

govuk/components/accordion/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/checkboxes/fixtures.json

Sorry, the diff of this file is too big to display

govuk/components/cookie-banner/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/error-message/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/error-message/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/footer/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/footer/fixtures.json

Sorry, the diff of this file is too big to display

govuk/components/footer/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/header/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/header/fixtures.json

Sorry, the diff of this file is too big to display

govuk/components/header/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/hint/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/input/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/radios/fixtures.json

Sorry, the diff of this file is too big to display

govuk/components/radios/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/select/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/skip-link/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/skip-link/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/summary-list/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/summary-list/fixtures.json

Sorry, the diff of this file is too big to display

govuk/components/summary-list/template.njk

Sorry, the diff of this file is not supported yet

govuk/components/tabs/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/tag/_index.scss

Sorry, the diff of this file is not supported yet

govuk/components/textarea/_index.scss

Sorry, the diff of this file is not supported yet

govuk/core/_all.scss

Sorry, the diff of this file is not supported yet

govuk/core/_global-styles.scss

Sorry, the diff of this file is not supported yet

govuk/core/_links.scss

Sorry, the diff of this file is not supported yet

govuk/core/_lists.scss

Sorry, the diff of this file is not supported yet

govuk/core/_section-break.scss

Sorry, the diff of this file is not supported yet

govuk/core/_typography.scss

Sorry, the diff of this file is not supported yet

govuk/objects/_all.scss

Sorry, the diff of this file is not supported yet

govuk/objects/_main-wrapper.scss

Sorry, the diff of this file is not supported yet

govuk/overrides/_display.scss

Sorry, the diff of this file is not supported yet

govuk/overrides/_spacing.scss

Sorry, the diff of this file is not supported yet

govuk/overrides/_text-align.scss

Sorry, the diff of this file is not supported yet

govuk/overrides/_typography.scss

Sorry, the diff of this file is not supported yet

govuk/overrides/_width.scss

Sorry, the diff of this file is not supported yet

govuk/settings/_colours-organisations.scss

Sorry, the diff of this file is not supported yet

govuk/settings/_measurements.scss

Sorry, the diff of this file is not supported yet

govuk/tools/_all.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc