Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
govuk-frontend
Advanced tools
govuk-frontend - npm Package Compare versions
Comparing version 1.1.1 to 1.2.0
344
all.js
@@ -884,173 +884,2 @@ (function (global, factory) { | ||
| function Checkboxes ($module) { | ||
| this.$module = $module; | ||
| this.$inputs = $module.querySelectorAll('input[type="checkbox"]'); | ||
| } | ||
| Checkboxes.prototype.init = function () { | ||
| var $module = this.$module; | ||
| var $inputs = this.$inputs; | ||
| /** | ||
| * Loop over all items with [data-controls] | ||
| * Check if they have a matching conditional reveal | ||
| * If they do, assign attributes. | ||
| **/ | ||
| nodeListForEach($inputs, function ($input) { | ||
| var controls = $input.getAttribute('data-aria-controls'); | ||
| // Check if input controls anything | ||
| // Check if content exists, before setting attributes. | ||
| if (!controls || !$module.querySelector('#' + controls)) { | ||
| return | ||
| } | ||
| // If we have content that is controlled, set attributes. | ||
| $input.setAttribute('aria-controls', controls); | ||
| $input.removeAttribute('data-aria-controls'); | ||
| this.setAttributes($input); | ||
| }.bind(this)); | ||
| // Handle events | ||
| $module.addEventListener('click', this.handleClick.bind(this)); | ||
| }; | ||
| Checkboxes.prototype.setAttributes = function ($input) { | ||
| var inputIsChecked = $input.checked; | ||
| $input.setAttribute('aria-expanded', inputIsChecked); | ||
| var $content = document.querySelector('#' + $input.getAttribute('aria-controls')); | ||
| $content.setAttribute('aria-hidden', !inputIsChecked); | ||
| }; | ||
| Checkboxes.prototype.handleClick = function (event) { | ||
| var $target = event.target; | ||
| // If a checkbox with aria-controls, handle click | ||
| var isCheckbox = $target.getAttribute('type') === 'checkbox'; | ||
| var hasAriaControls = $target.getAttribute('aria-controls'); | ||
| if (isCheckbox && hasAriaControls) { | ||
| this.setAttributes($target); | ||
| } | ||
| }; | ||
| function ErrorSummary ($module) { | ||
| this.$module = $module; | ||
| } | ||
| ErrorSummary.prototype.init = function () { | ||
| var $module = this.$module; | ||
| if (!$module) { | ||
| return | ||
| } | ||
| window.addEventListener('load', function () { | ||
| $module.focus(); | ||
| }); | ||
| }; | ||
| function Header ($module) { | ||
| this.$module = $module; | ||
| } | ||
| Header.prototype.init = function () { | ||
| // Check for module | ||
| var $module = this.$module; | ||
| if (!$module) { | ||
| return | ||
| } | ||
| // Check for button | ||
| var $toggleButton = $module.querySelector('.js-header-toggle'); | ||
| if (!$toggleButton) { | ||
| return | ||
| } | ||
| // Handle $toggleButton click events | ||
| $toggleButton.addEventListener('click', this.handleClick.bind(this)); | ||
| }; | ||
| /** | ||
| * Toggle class | ||
| * @param {object} node element | ||
| * @param {string} className to toggle | ||
| */ | ||
| Header.prototype.toggleClass = function (node, className) { | ||
| if (node.className.indexOf(className) > 0) { | ||
| node.className = node.className.replace(' ' + className, ''); | ||
| } else { | ||
| node.className += ' ' + className; | ||
| } | ||
| }; | ||
| /** | ||
| * An event handler for click event on $toggleButton | ||
| * @param {object} event event | ||
| */ | ||
| Header.prototype.handleClick = function (event) { | ||
| var $module = this.$module; | ||
| var $toggleButton = event.target || event.srcElement; | ||
| var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls')); | ||
| // If a button with aria-controls, handle click | ||
| if ($toggleButton && $target) { | ||
| this.toggleClass($target, 'govuk-header__navigation--open'); | ||
| this.toggleClass($toggleButton, 'govuk-header__menu-button--open'); | ||
| $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true'); | ||
| $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false'); | ||
| } | ||
| }; | ||
| function Radios ($module) { | ||
| this.$module = $module; | ||
| this.$inputs = $module.querySelectorAll('input[type="radio"]'); | ||
| } | ||
| Radios.prototype.init = function () { | ||
| var $module = this.$module; | ||
| var $inputs = this.$inputs; | ||
| /** | ||
| * Loop over all items with [data-controls] | ||
| * Check if they have a matching conditional reveal | ||
| * If they do, assign attributes. | ||
| **/ | ||
| nodeListForEach($inputs, function ($input) { | ||
| var controls = $input.getAttribute('data-aria-controls'); | ||
| // Check if input controls anything | ||
| // Check if content exists, before setting attributes. | ||
| if (!controls || !$module.querySelector('#' + controls)) { | ||
| return | ||
| } | ||
| // If we have content that is controlled, set attributes. | ||
| $input.setAttribute('aria-controls', controls); | ||
| $input.removeAttribute('data-aria-controls'); | ||
| this.setAttributes($input); | ||
| }.bind(this)); | ||
| // Handle events | ||
| $module.addEventListener('click', this.handleClick.bind(this)); | ||
| }; | ||
| Radios.prototype.setAttributes = function ($input) { | ||
| var inputIsChecked = $input.checked; | ||
| $input.setAttribute('aria-expanded', inputIsChecked); | ||
| var $content = document.querySelector('#' + $input.getAttribute('aria-controls')); | ||
| $content.setAttribute('aria-hidden', !inputIsChecked); | ||
| }; | ||
| Radios.prototype.handleClick = function (event) { | ||
| nodeListForEach(this.$inputs, function ($input) { | ||
| // If a radio with aria-controls, handle click | ||
| var isRadio = $input.getAttribute('type') === 'radio'; | ||
| var hasAriaControls = $input.getAttribute('aria-controls'); | ||
| if (isRadio && hasAriaControls) { | ||
| this.setAttributes($input); | ||
| } | ||
| }.bind(this)); | ||
| }; | ||
| (function(undefined) { | ||
@@ -1411,2 +1240,173 @@ | ||
| function Checkboxes ($module) { | ||
| this.$module = $module; | ||
| this.$inputs = $module.querySelectorAll('input[type="checkbox"]'); | ||
| } | ||
| Checkboxes.prototype.init = function () { | ||
| var $module = this.$module; | ||
| var $inputs = this.$inputs; | ||
| /** | ||
| * Loop over all items with [data-controls] | ||
| * Check if they have a matching conditional reveal | ||
| * If they do, assign attributes. | ||
| **/ | ||
| nodeListForEach($inputs, function ($input) { | ||
| var controls = $input.getAttribute('data-aria-controls'); | ||
| // Check if input controls anything | ||
| // Check if content exists, before setting attributes. | ||
| if (!controls || !$module.querySelector('#' + controls)) { | ||
| return | ||
| } | ||
| // If we have content that is controlled, set attributes. | ||
| $input.setAttribute('aria-controls', controls); | ||
| $input.removeAttribute('data-aria-controls'); | ||
| this.setAttributes($input); | ||
| }.bind(this)); | ||
| // Handle events | ||
| $module.addEventListener('click', this.handleClick.bind(this)); | ||
| }; | ||
| Checkboxes.prototype.setAttributes = function ($input) { | ||
| var inputIsChecked = $input.checked; | ||
| $input.setAttribute('aria-expanded', inputIsChecked); | ||
| var $content = document.querySelector('#' + $input.getAttribute('aria-controls')); | ||
| $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked); | ||
| }; | ||
| Checkboxes.prototype.handleClick = function (event) { | ||
| var $target = event.target; | ||
| // If a checkbox with aria-controls, handle click | ||
| var isCheckbox = $target.getAttribute('type') === 'checkbox'; | ||
| var hasAriaControls = $target.getAttribute('aria-controls'); | ||
| if (isCheckbox && hasAriaControls) { | ||
| this.setAttributes($target); | ||
| } | ||
| }; | ||
| function ErrorSummary ($module) { | ||
| this.$module = $module; | ||
| } | ||
| ErrorSummary.prototype.init = function () { | ||
| var $module = this.$module; | ||
| if (!$module) { | ||
| return | ||
| } | ||
| window.addEventListener('load', function () { | ||
| $module.focus(); | ||
| }); | ||
| }; | ||
| function Header ($module) { | ||
| this.$module = $module; | ||
| } | ||
| Header.prototype.init = function () { | ||
| // Check for module | ||
| var $module = this.$module; | ||
| if (!$module) { | ||
| return | ||
| } | ||
| // Check for button | ||
| var $toggleButton = $module.querySelector('.js-header-toggle'); | ||
| if (!$toggleButton) { | ||
| return | ||
| } | ||
| // Handle $toggleButton click events | ||
| $toggleButton.addEventListener('click', this.handleClick.bind(this)); | ||
| }; | ||
| /** | ||
| * Toggle class | ||
| * @param {object} node element | ||
| * @param {string} className to toggle | ||
| */ | ||
| Header.prototype.toggleClass = function (node, className) { | ||
| if (node.className.indexOf(className) > 0) { | ||
| node.className = node.className.replace(' ' + className, ''); | ||
| } else { | ||
| node.className += ' ' + className; | ||
| } | ||
| }; | ||
| /** | ||
| * An event handler for click event on $toggleButton | ||
| * @param {object} event event | ||
| */ | ||
| Header.prototype.handleClick = function (event) { | ||
| var $module = this.$module; | ||
| var $toggleButton = event.target || event.srcElement; | ||
| var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls')); | ||
| // If a button with aria-controls, handle click | ||
| if ($toggleButton && $target) { | ||
| this.toggleClass($target, 'govuk-header__navigation--open'); | ||
| this.toggleClass($toggleButton, 'govuk-header__menu-button--open'); | ||
| $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true'); | ||
| $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false'); | ||
| } | ||
| }; | ||
| function Radios ($module) { | ||
| this.$module = $module; | ||
| this.$inputs = $module.querySelectorAll('input[type="radio"]'); | ||
| } | ||
| Radios.prototype.init = function () { | ||
| var $module = this.$module; | ||
| var $inputs = this.$inputs; | ||
| /** | ||
| * Loop over all items with [data-controls] | ||
| * Check if they have a matching conditional reveal | ||
| * If they do, assign attributes. | ||
| **/ | ||
| nodeListForEach($inputs, function ($input) { | ||
| var controls = $input.getAttribute('data-aria-controls'); | ||
| // Check if input controls anything | ||
| // Check if content exists, before setting attributes. | ||
| if (!controls || !$module.querySelector('#' + controls)) { | ||
| return | ||
| } | ||
| // If we have content that is controlled, set attributes. | ||
| $input.setAttribute('aria-controls', controls); | ||
| $input.removeAttribute('data-aria-controls'); | ||
| this.setAttributes($input); | ||
| }.bind(this)); | ||
| // Handle events | ||
| $module.addEventListener('click', this.handleClick.bind(this)); | ||
| }; | ||
| Radios.prototype.setAttributes = function ($input) { | ||
| var inputIsChecked = $input.checked; | ||
| $input.setAttribute('aria-expanded', inputIsChecked); | ||
| var $content = document.querySelector('#' + $input.getAttribute('aria-controls')); | ||
| $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked); | ||
| }; | ||
| Radios.prototype.handleClick = function (event) { | ||
| nodeListForEach(this.$inputs, function ($input) { | ||
| // If a radio with aria-controls, handle click | ||
| var isRadio = $input.getAttribute('type') === 'radio'; | ||
| var hasAriaControls = $input.getAttribute('aria-controls'); | ||
| if (isRadio && hasAriaControls) { | ||
| this.setAttributes($input); | ||
| } | ||
| }.bind(this)); | ||
| }; | ||
| function Tabs ($module) { | ||
@@ -1417,3 +1417,3 @@ this.$module = $module; | ||
| this.keys = { left: 37, right: 39, up: 38, down: 40 }; | ||
| this.jsHiddenClass = 'js-hidden'; | ||
| this.jsHiddenClass = 'govuk-tabs__panel--hidden'; | ||
| } | ||
@@ -1420,0 +1420,0 @@ |
@@ -662,2 +662,357 @@ (function (global, factory) { | ||
| (function(undefined) { | ||
| // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js | ||
| var detect = ( | ||
| 'DOMTokenList' in this && (function (x) { | ||
| return 'classList' in x ? !x.classList.toggle('x', false) && !x.className : true; | ||
| })(document.createElement('x')) | ||
| ); | ||
| if (detect) return | ||
| // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/polyfill.js | ||
| (function (global) { | ||
| var nativeImpl = "DOMTokenList" in global && global.DOMTokenList; | ||
| if ( | ||
| !nativeImpl || | ||
| ( | ||
| !!document.createElementNS && | ||
| !!document.createElementNS('http://www.w3.org/2000/svg', 'svg') && | ||
| !(document.createElementNS("http://www.w3.org/2000/svg", "svg").classList instanceof DOMTokenList) | ||
| ) | ||
| ) { | ||
| global.DOMTokenList = (function() { // eslint-disable-line no-unused-vars | ||
| var dpSupport = true; | ||
| var defineGetter = function (object, name, fn, configurable) { | ||
| if (Object.defineProperty) | ||
| Object.defineProperty(object, name, { | ||
| configurable: false === dpSupport ? true : !!configurable, | ||
| get: fn | ||
| }); | ||
| else object.__defineGetter__(name, fn); | ||
| }; | ||
| /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */ | ||
| try { | ||
| defineGetter({}, "support"); | ||
| } | ||
| catch (e) { | ||
| dpSupport = false; | ||
| } | ||
| var _DOMTokenList = function (el, prop) { | ||
| var that = this; | ||
| var tokens = []; | ||
| var tokenMap = {}; | ||
| var length = 0; | ||
| var maxLength = 0; | ||
| var addIndexGetter = function (i) { | ||
| defineGetter(that, i, function () { | ||
| preop(); | ||
| return tokens[i]; | ||
| }, false); | ||
| }; | ||
| var reindex = function () { | ||
| /** Define getter functions for array-like access to the tokenList's contents. */ | ||
| if (length >= maxLength) | ||
| for (; maxLength < length; ++maxLength) { | ||
| addIndexGetter(maxLength); | ||
| } | ||
| }; | ||
| /** Helper function called at the start of each class method. Internal use only. */ | ||
| var preop = function () { | ||
| var error; | ||
| var i; | ||
| var args = arguments; | ||
| var rSpace = /\s+/; | ||
| /** Validate the token/s passed to an instance method, if any. */ | ||
| if (args.length) | ||
| for (i = 0; i < args.length; ++i) | ||
| if (rSpace.test(args[i])) { | ||
| error = new SyntaxError('String "' + args[i] + '" ' + "contains" + ' an invalid character'); | ||
| error.code = 5; | ||
| error.name = "InvalidCharacterError"; | ||
| throw error; | ||
| } | ||
| /** Split the new value apart by whitespace*/ | ||
| if (typeof el[prop] === "object") { | ||
| tokens = ("" + el[prop].baseVal).replace(/^\s+|\s+$/g, "").split(rSpace); | ||
| } else { | ||
| tokens = ("" + el[prop]).replace(/^\s+|\s+$/g, "").split(rSpace); | ||
| } | ||
| /** Avoid treating blank strings as single-item token lists */ | ||
| if ("" === tokens[0]) tokens = []; | ||
| /** Repopulate the internal token lists */ | ||
| tokenMap = {}; | ||
| for (i = 0; i < tokens.length; ++i) | ||
| tokenMap[tokens[i]] = true; | ||
| length = tokens.length; | ||
| reindex(); | ||
| }; | ||
| /** Populate our internal token list if the targeted attribute of the subject element isn't empty. */ | ||
| preop(); | ||
| /** Return the number of tokens in the underlying string. Read-only. */ | ||
| defineGetter(that, "length", function () { | ||
| preop(); | ||
| return length; | ||
| }); | ||
| /** Override the default toString/toLocaleString methods to return a space-delimited list of tokens when typecast. */ | ||
| that.toLocaleString = | ||
| that.toString = function () { | ||
| preop(); | ||
| return tokens.join(" "); | ||
| }; | ||
| that.item = function (idx) { | ||
| preop(); | ||
| return tokens[idx]; | ||
| }; | ||
| that.contains = function (token) { | ||
| preop(); | ||
| return !!tokenMap[token]; | ||
| }; | ||
| that.add = function () { | ||
| preop.apply(that, args = arguments); | ||
| for (var args, token, i = 0, l = args.length; i < l; ++i) { | ||
| token = args[i]; | ||
| if (!tokenMap[token]) { | ||
| tokens.push(token); | ||
| tokenMap[token] = true; | ||
| } | ||
| } | ||
| /** Update the targeted attribute of the attached element if the token list's changed. */ | ||
| if (length !== tokens.length) { | ||
| length = tokens.length >>> 0; | ||
| if (typeof el[prop] === "object") { | ||
| el[prop].baseVal = tokens.join(" "); | ||
| } else { | ||
| el[prop] = tokens.join(" "); | ||
| } | ||
| reindex(); | ||
| } | ||
| }; | ||
| that.remove = function () { | ||
| preop.apply(that, args = arguments); | ||
| /** Build a hash of token names to compare against when recollecting our token list. */ | ||
| for (var args, ignore = {}, i = 0, t = []; i < args.length; ++i) { | ||
| ignore[args[i]] = true; | ||
| delete tokenMap[args[i]]; | ||
| } | ||
| /** Run through our tokens list and reassign only those that aren't defined in the hash declared above. */ | ||
| for (i = 0; i < tokens.length; ++i) | ||
| if (!ignore[tokens[i]]) t.push(tokens[i]); | ||
| tokens = t; | ||
| length = t.length >>> 0; | ||
| /** Update the targeted attribute of the attached element. */ | ||
| if (typeof el[prop] === "object") { | ||
| el[prop].baseVal = tokens.join(" "); | ||
| } else { | ||
| el[prop] = tokens.join(" "); | ||
| } | ||
| reindex(); | ||
| }; | ||
| that.toggle = function (token, force) { | ||
| preop.apply(that, [token]); | ||
| /** Token state's being forced. */ | ||
| if (undefined !== force) { | ||
| if (force) { | ||
| that.add(token); | ||
| return true; | ||
| } else { | ||
| that.remove(token); | ||
| return false; | ||
| } | ||
| } | ||
| /** Token already exists in tokenList. Remove it, and return FALSE. */ | ||
| if (tokenMap[token]) { | ||
| that.remove(token); | ||
| return false; | ||
| } | ||
| /** Otherwise, add the token and return TRUE. */ | ||
| that.add(token); | ||
| return true; | ||
| }; | ||
| return that; | ||
| }; | ||
| return _DOMTokenList; | ||
| }()); | ||
| } | ||
| // Add second argument to native DOMTokenList.toggle() if necessary | ||
| (function () { | ||
| var e = document.createElement('span'); | ||
| if (!('classList' in e)) return; | ||
| e.classList.toggle('x', false); | ||
| if (!e.classList.contains('x')) return; | ||
| e.classList.constructor.prototype.toggle = function toggle(token /*, force*/) { | ||
| var force = arguments[1]; | ||
| if (force === undefined) { | ||
| var add = !this.contains(token); | ||
| this[add ? 'add' : 'remove'](token); | ||
| return add; | ||
| } | ||
| force = !!force; | ||
| this[force ? 'add' : 'remove'](token); | ||
| return force; | ||
| }; | ||
| }()); | ||
| // Add multiple arguments to native DOMTokenList.add() if necessary | ||
| (function () { | ||
| var e = document.createElement('span'); | ||
| if (!('classList' in e)) return; | ||
| e.classList.add('a', 'b'); | ||
| if (e.classList.contains('b')) return; | ||
| var native = e.classList.constructor.prototype.add; | ||
| e.classList.constructor.prototype.add = function () { | ||
| var args = arguments; | ||
| var l = arguments.length; | ||
| for (var i = 0; i < l; i++) { | ||
| native.call(this, args[i]); | ||
| } | ||
| }; | ||
| }()); | ||
| // Add multiple arguments to native DOMTokenList.remove() if necessary | ||
| (function () { | ||
| var e = document.createElement('span'); | ||
| if (!('classList' in e)) return; | ||
| e.classList.add('a'); | ||
| e.classList.add('b'); | ||
| e.classList.remove('a', 'b'); | ||
| if (!e.classList.contains('b')) return; | ||
| var native = e.classList.constructor.prototype.remove; | ||
| e.classList.constructor.prototype.remove = function () { | ||
| var args = arguments; | ||
| var l = arguments.length; | ||
| for (var i = 0; i < l; i++) { | ||
| native.call(this, args[i]); | ||
| } | ||
| }; | ||
| }()); | ||
| }(this)); | ||
| }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {}); | ||
| (function(undefined) { | ||
| // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/detect.js | ||
| var detect = ( | ||
| 'document' in this && "classList" in document.documentElement && 'Element' in this && 'classList' in Element.prototype && (function () { | ||
| var e = document.createElement('span'); | ||
| e.classList.add('a', 'b'); | ||
| return e.classList.contains('b'); | ||
| }()) | ||
| ); | ||
| if (detect) return | ||
| // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/polyfill.js | ||
| (function (global) { | ||
| var dpSupport = true; | ||
| var defineGetter = function (object, name, fn, configurable) { | ||
| if (Object.defineProperty) | ||
| Object.defineProperty(object, name, { | ||
| configurable: false === dpSupport ? true : !!configurable, | ||
| get: fn | ||
| }); | ||
| else object.__defineGetter__(name, fn); | ||
| }; | ||
| /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */ | ||
| try { | ||
| defineGetter({}, "support"); | ||
| } | ||
| catch (e) { | ||
| dpSupport = false; | ||
| } | ||
| /** Polyfills a property with a DOMTokenList */ | ||
| var addProp = function (o, name, attr) { | ||
| defineGetter(o.prototype, name, function () { | ||
| var tokenList; | ||
| var THIS = this, | ||
| /** Prevent this from firing twice for some reason. What the hell, IE. */ | ||
| gibberishProperty = "__defineGetter__" + "DEFINE_PROPERTY" + name; | ||
| if(THIS[gibberishProperty]) return tokenList; | ||
| THIS[gibberishProperty] = true; | ||
| /** | ||
| * IE8 can't define properties on native JavaScript objects, so we'll use a dumb hack instead. | ||
| * | ||
| * What this is doing is creating a dummy element ("reflection") inside a detached phantom node ("mirror") | ||
| * that serves as the target of Object.defineProperty instead. While we could simply use the subject HTML | ||
| * element instead, this would conflict with element types which use indexed properties (such as forms and | ||
| * select lists). | ||
| */ | ||
| if (false === dpSupport) { | ||
| var visage; | ||
| var mirror = addProp.mirror || document.createElement("div"); | ||
| var reflections = mirror.childNodes; | ||
| var l = reflections.length; | ||
| for (var i = 0; i < l; ++i) | ||
| if (reflections[i]._R === THIS) { | ||
| visage = reflections[i]; | ||
| break; | ||
| } | ||
| /** Couldn't find an element's reflection inside the mirror. Materialise one. */ | ||
| visage || (visage = mirror.appendChild(document.createElement("div"))); | ||
| tokenList = DOMTokenList.call(visage, THIS, attr); | ||
| } else tokenList = new DOMTokenList(THIS, attr); | ||
| defineGetter(THIS, name, function () { | ||
| return tokenList; | ||
| }); | ||
| delete THIS[gibberishProperty]; | ||
| return tokenList; | ||
| }, true); | ||
| }; | ||
| addProp(global.Element, "classList", "className"); | ||
| addProp(global.HTMLElement, "classList", "className"); | ||
| addProp(global.HTMLLinkElement, "relList", "rel"); | ||
| addProp(global.HTMLAnchorElement, "relList", "rel"); | ||
| addProp(global.HTMLAreaElement, "relList", "rel"); | ||
| }(this)); | ||
| }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {}); | ||
| /** | ||
@@ -715,3 +1070,3 @@ * TODO: Ideally this would be a NodeList.prototype.forEach polyfill | ||
| var $content = document.querySelector('#' + $input.getAttribute('aria-controls')); | ||
| $content.setAttribute('aria-hidden', !inputIsChecked); | ||
| $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked); | ||
| }; | ||
@@ -718,0 +1073,0 @@ |
@@ -158,2 +158,78 @@ # Checkboxes | ||
| ### Checkboxes with hints on items | ||
| [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-hints-on-items/preview) | ||
| #### Markup | ||
| <div class="govuk-form-group"> | ||
| <fieldset class="govuk-fieldset"> | ||
| <legend class="govuk-fieldset__legend"> | ||
| <h1 class="govuk-fieldset__heading"> | ||
| How do you want to sign in? | ||
| </h1> | ||
| </legend> | ||
| <div class="govuk-checkboxes"> | ||
| <div class="govuk-checkboxes__item"> | ||
| <input class="govuk-checkboxes__input" id="government-gateway" name="gateway" type="checkbox" value="gov-gateway" aria-describedby="government-gateway-item-hint"> | ||
| <label class="govuk-label govuk-checkboxes__label" for="government-gateway"> | ||
| Sign in with Government Gateway | ||
| </label> | ||
| <span id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint"> | ||
| You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before. | ||
| </span> | ||
| </div> | ||
| <div class="govuk-checkboxes__item"> | ||
| <input class="govuk-checkboxes__input" id="govuk-verify" name="verify" type="checkbox" value="gov-verify" aria-describedby="govuk-verify-item-hint"> | ||
| <label class="govuk-label govuk-checkboxes__label" for="govuk-verify"> | ||
| Sign in with GOV.UK Verify | ||
| </label> | ||
| <span id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint"> | ||
| You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
| #### Macro | ||
| {% from "checkboxes/macro.njk" import govukCheckboxes %} | ||
| {{ govukCheckboxes({ | ||
| "fieldset": { | ||
| "legend": { | ||
| "text": "How do you want to sign in?", | ||
| "isPageHeading": true | ||
| } | ||
| }, | ||
| "items": [ | ||
| { | ||
| "name": "gateway", | ||
| "id": "government-gateway", | ||
| "value": "gov-gateway", | ||
| "text": "Sign in with Government Gateway", | ||
| "hint": { | ||
| "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before." | ||
| } | ||
| }, | ||
| { | ||
| "name": "verify", | ||
| "id": "govuk-verify", | ||
| "value": "gov-verify", | ||
| "text": "Sign in with GOV.UK Verify", | ||
| "hint": { | ||
| "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity." | ||
| } | ||
| } | ||
| ] | ||
| }) }} | ||
| ### Checkboxes with disabled item | ||
@@ -653,3 +729,3 @@ | ||
| <td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See fieldset component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See <a href="../fieldset/README.md#component-arguments">fieldset</a> component.</td> | ||
@@ -666,3 +742,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td> | ||
@@ -679,3 +755,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td> | ||
@@ -776,3 +852,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Provide additional attributes to each checkbox item label. See `label` component for more details.</td> | ||
| <td class="govuk-table__cell ">Provide additional attributes and classes to each checkbox item label. See [label](../label/README.md#component-arguments) component for more details.</td> | ||
@@ -783,2 +859,14 @@ </tr> | ||
| <th class="govuk-table__header" scope="row">items.{}.hint</th> | ||
| <td class="govuk-table__cell ">object</td> | ||
| <td class="govuk-table__cell ">No</td> | ||
| <td class="govuk-table__cell ">Provide optional hint to each checkbox item. See `hint` component for more details.</td> | ||
| </tr> | ||
| <tr class="govuk-table__row"> | ||
| <th class="govuk-table__header" scope="row">items.{}.checked</th> | ||
@@ -785,0 +873,0 @@ |
@@ -658,3 +658,3 @@ # Date input | ||
| <td class="govuk-table__cell ">Optional hint. See hint component.</td> | ||
| <td class="govuk-table__cell ">Optional hint. See <a href="../hint/README.md#component-arguments">hint</a> component.</td> | ||
@@ -671,3 +671,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Optional error message. See errorMessage component.</td> | ||
| <td class="govuk-table__cell ">Optional error message. See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td> | ||
@@ -684,3 +684,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See fieldset component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See <a href="../fieldset/README.md#component-arguments">fieldset</a> component.</td> | ||
@@ -687,0 +687,0 @@ </tr> |
@@ -258,3 +258,3 @@ # File upload | ||
| <td class="govuk-table__cell ">Arguments for the label component. See label component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the label component. See <a href="../label/README.md#component-arguments">label</a> component.</td> | ||
@@ -271,3 +271,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td> | ||
@@ -284,3 +284,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td> | ||
@@ -287,0 +287,0 @@ </tr> |
@@ -478,3 +478,3 @@ # Input | ||
| <td class="govuk-table__cell ">Arguments for the label component. See label component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the label component. See <a href="../label/README.md#component-arguments">label</a> component.</td> | ||
@@ -491,3 +491,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td> | ||
@@ -504,3 +504,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td> | ||
@@ -507,0 +507,0 @@ </tr> |
@@ -102,3 +102,3 @@ # Phase banner | ||
| <td class="govuk-table__cell ">Arguments for the tag object. See tag component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the tag object. See <a href="../tag/README.md#component-arguments">tag</a> component.</td> | ||
@@ -105,0 +105,0 @@ </tr> |
@@ -662,2 +662,357 @@ (function (global, factory) { | ||
| (function(undefined) { | ||
| // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js | ||
| var detect = ( | ||
| 'DOMTokenList' in this && (function (x) { | ||
| return 'classList' in x ? !x.classList.toggle('x', false) && !x.className : true; | ||
| })(document.createElement('x')) | ||
| ); | ||
| if (detect) return | ||
| // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/polyfill.js | ||
| (function (global) { | ||
| var nativeImpl = "DOMTokenList" in global && global.DOMTokenList; | ||
| if ( | ||
| !nativeImpl || | ||
| ( | ||
| !!document.createElementNS && | ||
| !!document.createElementNS('http://www.w3.org/2000/svg', 'svg') && | ||
| !(document.createElementNS("http://www.w3.org/2000/svg", "svg").classList instanceof DOMTokenList) | ||
| ) | ||
| ) { | ||
| global.DOMTokenList = (function() { // eslint-disable-line no-unused-vars | ||
| var dpSupport = true; | ||
| var defineGetter = function (object, name, fn, configurable) { | ||
| if (Object.defineProperty) | ||
| Object.defineProperty(object, name, { | ||
| configurable: false === dpSupport ? true : !!configurable, | ||
| get: fn | ||
| }); | ||
| else object.__defineGetter__(name, fn); | ||
| }; | ||
| /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */ | ||
| try { | ||
| defineGetter({}, "support"); | ||
| } | ||
| catch (e) { | ||
| dpSupport = false; | ||
| } | ||
| var _DOMTokenList = function (el, prop) { | ||
| var that = this; | ||
| var tokens = []; | ||
| var tokenMap = {}; | ||
| var length = 0; | ||
| var maxLength = 0; | ||
| var addIndexGetter = function (i) { | ||
| defineGetter(that, i, function () { | ||
| preop(); | ||
| return tokens[i]; | ||
| }, false); | ||
| }; | ||
| var reindex = function () { | ||
| /** Define getter functions for array-like access to the tokenList's contents. */ | ||
| if (length >= maxLength) | ||
| for (; maxLength < length; ++maxLength) { | ||
| addIndexGetter(maxLength); | ||
| } | ||
| }; | ||
| /** Helper function called at the start of each class method. Internal use only. */ | ||
| var preop = function () { | ||
| var error; | ||
| var i; | ||
| var args = arguments; | ||
| var rSpace = /\s+/; | ||
| /** Validate the token/s passed to an instance method, if any. */ | ||
| if (args.length) | ||
| for (i = 0; i < args.length; ++i) | ||
| if (rSpace.test(args[i])) { | ||
| error = new SyntaxError('String "' + args[i] + '" ' + "contains" + ' an invalid character'); | ||
| error.code = 5; | ||
| error.name = "InvalidCharacterError"; | ||
| throw error; | ||
| } | ||
| /** Split the new value apart by whitespace*/ | ||
| if (typeof el[prop] === "object") { | ||
| tokens = ("" + el[prop].baseVal).replace(/^\s+|\s+$/g, "").split(rSpace); | ||
| } else { | ||
| tokens = ("" + el[prop]).replace(/^\s+|\s+$/g, "").split(rSpace); | ||
| } | ||
| /** Avoid treating blank strings as single-item token lists */ | ||
| if ("" === tokens[0]) tokens = []; | ||
| /** Repopulate the internal token lists */ | ||
| tokenMap = {}; | ||
| for (i = 0; i < tokens.length; ++i) | ||
| tokenMap[tokens[i]] = true; | ||
| length = tokens.length; | ||
| reindex(); | ||
| }; | ||
| /** Populate our internal token list if the targeted attribute of the subject element isn't empty. */ | ||
| preop(); | ||
| /** Return the number of tokens in the underlying string. Read-only. */ | ||
| defineGetter(that, "length", function () { | ||
| preop(); | ||
| return length; | ||
| }); | ||
| /** Override the default toString/toLocaleString methods to return a space-delimited list of tokens when typecast. */ | ||
| that.toLocaleString = | ||
| that.toString = function () { | ||
| preop(); | ||
| return tokens.join(" "); | ||
| }; | ||
| that.item = function (idx) { | ||
| preop(); | ||
| return tokens[idx]; | ||
| }; | ||
| that.contains = function (token) { | ||
| preop(); | ||
| return !!tokenMap[token]; | ||
| }; | ||
| that.add = function () { | ||
| preop.apply(that, args = arguments); | ||
| for (var args, token, i = 0, l = args.length; i < l; ++i) { | ||
| token = args[i]; | ||
| if (!tokenMap[token]) { | ||
| tokens.push(token); | ||
| tokenMap[token] = true; | ||
| } | ||
| } | ||
| /** Update the targeted attribute of the attached element if the token list's changed. */ | ||
| if (length !== tokens.length) { | ||
| length = tokens.length >>> 0; | ||
| if (typeof el[prop] === "object") { | ||
| el[prop].baseVal = tokens.join(" "); | ||
| } else { | ||
| el[prop] = tokens.join(" "); | ||
| } | ||
| reindex(); | ||
| } | ||
| }; | ||
| that.remove = function () { | ||
| preop.apply(that, args = arguments); | ||
| /** Build a hash of token names to compare against when recollecting our token list. */ | ||
| for (var args, ignore = {}, i = 0, t = []; i < args.length; ++i) { | ||
| ignore[args[i]] = true; | ||
| delete tokenMap[args[i]]; | ||
| } | ||
| /** Run through our tokens list and reassign only those that aren't defined in the hash declared above. */ | ||
| for (i = 0; i < tokens.length; ++i) | ||
| if (!ignore[tokens[i]]) t.push(tokens[i]); | ||
| tokens = t; | ||
| length = t.length >>> 0; | ||
| /** Update the targeted attribute of the attached element. */ | ||
| if (typeof el[prop] === "object") { | ||
| el[prop].baseVal = tokens.join(" "); | ||
| } else { | ||
| el[prop] = tokens.join(" "); | ||
| } | ||
| reindex(); | ||
| }; | ||
| that.toggle = function (token, force) { | ||
| preop.apply(that, [token]); | ||
| /** Token state's being forced. */ | ||
| if (undefined !== force) { | ||
| if (force) { | ||
| that.add(token); | ||
| return true; | ||
| } else { | ||
| that.remove(token); | ||
| return false; | ||
| } | ||
| } | ||
| /** Token already exists in tokenList. Remove it, and return FALSE. */ | ||
| if (tokenMap[token]) { | ||
| that.remove(token); | ||
| return false; | ||
| } | ||
| /** Otherwise, add the token and return TRUE. */ | ||
| that.add(token); | ||
| return true; | ||
| }; | ||
| return that; | ||
| }; | ||
| return _DOMTokenList; | ||
| }()); | ||
| } | ||
| // Add second argument to native DOMTokenList.toggle() if necessary | ||
| (function () { | ||
| var e = document.createElement('span'); | ||
| if (!('classList' in e)) return; | ||
| e.classList.toggle('x', false); | ||
| if (!e.classList.contains('x')) return; | ||
| e.classList.constructor.prototype.toggle = function toggle(token /*, force*/) { | ||
| var force = arguments[1]; | ||
| if (force === undefined) { | ||
| var add = !this.contains(token); | ||
| this[add ? 'add' : 'remove'](token); | ||
| return add; | ||
| } | ||
| force = !!force; | ||
| this[force ? 'add' : 'remove'](token); | ||
| return force; | ||
| }; | ||
| }()); | ||
| // Add multiple arguments to native DOMTokenList.add() if necessary | ||
| (function () { | ||
| var e = document.createElement('span'); | ||
| if (!('classList' in e)) return; | ||
| e.classList.add('a', 'b'); | ||
| if (e.classList.contains('b')) return; | ||
| var native = e.classList.constructor.prototype.add; | ||
| e.classList.constructor.prototype.add = function () { | ||
| var args = arguments; | ||
| var l = arguments.length; | ||
| for (var i = 0; i < l; i++) { | ||
| native.call(this, args[i]); | ||
| } | ||
| }; | ||
| }()); | ||
| // Add multiple arguments to native DOMTokenList.remove() if necessary | ||
| (function () { | ||
| var e = document.createElement('span'); | ||
| if (!('classList' in e)) return; | ||
| e.classList.add('a'); | ||
| e.classList.add('b'); | ||
| e.classList.remove('a', 'b'); | ||
| if (!e.classList.contains('b')) return; | ||
| var native = e.classList.constructor.prototype.remove; | ||
| e.classList.constructor.prototype.remove = function () { | ||
| var args = arguments; | ||
| var l = arguments.length; | ||
| for (var i = 0; i < l; i++) { | ||
| native.call(this, args[i]); | ||
| } | ||
| }; | ||
| }()); | ||
| }(this)); | ||
| }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {}); | ||
| (function(undefined) { | ||
| // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/detect.js | ||
| var detect = ( | ||
| 'document' in this && "classList" in document.documentElement && 'Element' in this && 'classList' in Element.prototype && (function () { | ||
| var e = document.createElement('span'); | ||
| e.classList.add('a', 'b'); | ||
| return e.classList.contains('b'); | ||
| }()) | ||
| ); | ||
| if (detect) return | ||
| // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/polyfill.js | ||
| (function (global) { | ||
| var dpSupport = true; | ||
| var defineGetter = function (object, name, fn, configurable) { | ||
| if (Object.defineProperty) | ||
| Object.defineProperty(object, name, { | ||
| configurable: false === dpSupport ? true : !!configurable, | ||
| get: fn | ||
| }); | ||
| else object.__defineGetter__(name, fn); | ||
| }; | ||
| /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */ | ||
| try { | ||
| defineGetter({}, "support"); | ||
| } | ||
| catch (e) { | ||
| dpSupport = false; | ||
| } | ||
| /** Polyfills a property with a DOMTokenList */ | ||
| var addProp = function (o, name, attr) { | ||
| defineGetter(o.prototype, name, function () { | ||
| var tokenList; | ||
| var THIS = this, | ||
| /** Prevent this from firing twice for some reason. What the hell, IE. */ | ||
| gibberishProperty = "__defineGetter__" + "DEFINE_PROPERTY" + name; | ||
| if(THIS[gibberishProperty]) return tokenList; | ||
| THIS[gibberishProperty] = true; | ||
| /** | ||
| * IE8 can't define properties on native JavaScript objects, so we'll use a dumb hack instead. | ||
| * | ||
| * What this is doing is creating a dummy element ("reflection") inside a detached phantom node ("mirror") | ||
| * that serves as the target of Object.defineProperty instead. While we could simply use the subject HTML | ||
| * element instead, this would conflict with element types which use indexed properties (such as forms and | ||
| * select lists). | ||
| */ | ||
| if (false === dpSupport) { | ||
| var visage; | ||
| var mirror = addProp.mirror || document.createElement("div"); | ||
| var reflections = mirror.childNodes; | ||
| var l = reflections.length; | ||
| for (var i = 0; i < l; ++i) | ||
| if (reflections[i]._R === THIS) { | ||
| visage = reflections[i]; | ||
| break; | ||
| } | ||
| /** Couldn't find an element's reflection inside the mirror. Materialise one. */ | ||
| visage || (visage = mirror.appendChild(document.createElement("div"))); | ||
| tokenList = DOMTokenList.call(visage, THIS, attr); | ||
| } else tokenList = new DOMTokenList(THIS, attr); | ||
| defineGetter(THIS, name, function () { | ||
| return tokenList; | ||
| }); | ||
| delete THIS[gibberishProperty]; | ||
| return tokenList; | ||
| }, true); | ||
| }; | ||
| addProp(global.Element, "classList", "className"); | ||
| addProp(global.HTMLElement, "classList", "className"); | ||
| addProp(global.HTMLLinkElement, "relList", "rel"); | ||
| addProp(global.HTMLAnchorElement, "relList", "rel"); | ||
| addProp(global.HTMLAreaElement, "relList", "rel"); | ||
| }(this)); | ||
| }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {}); | ||
| /** | ||
@@ -715,3 +1070,3 @@ * TODO: Ideally this would be a NodeList.prototype.forEach polyfill | ||
| var $content = document.querySelector('#' + $input.getAttribute('aria-controls')); | ||
| $content.setAttribute('aria-hidden', !inputIsChecked); | ||
| $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked); | ||
| }; | ||
@@ -718,0 +1073,0 @@ |
@@ -353,2 +353,151 @@ # Radios | ||
| ### Radios with a divider | ||
| [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-a-divider/preview) | ||
| #### Markup | ||
| <div class="govuk-form-group"> | ||
| <fieldset class="govuk-fieldset"> | ||
| <legend class="govuk-fieldset__legend"> | ||
| How do you want to sign in? | ||
| </legend> | ||
| <div class="govuk-radios"> | ||
| <div class="govuk-radios__item"> | ||
| <input class="govuk-radios__input" id="example-divider-1" name="example" type="radio" value="governement-gateway"> | ||
| <label class="govuk-label govuk-radios__label" for="example-divider-1"> | ||
| Use Government Gateway | ||
| </label> | ||
| </div> | ||
| <div class="govuk-radios__item"> | ||
| <input class="govuk-radios__input" id="example-divider-2" name="example" type="radio" value="govuk-verify"> | ||
| <label class="govuk-label govuk-radios__label" for="example-divider-2"> | ||
| Use GOV.UK Verify | ||
| </label> | ||
| </div> | ||
| <div class="govuk-radios__divider">or</div> | ||
| <div class="govuk-radios__item"> | ||
| <input class="govuk-radios__input" id="example-divider-4" name="example" type="radio" value="create-account"> | ||
| <label class="govuk-label govuk-radios__label" for="example-divider-4"> | ||
| Create an account | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
| #### Macro | ||
| {% from "radios/macro.njk" import govukRadios %} | ||
| {{ govukRadios({ | ||
| "idPrefix": "example-divider", | ||
| "name": "example", | ||
| "fieldset": { | ||
| "legend": { | ||
| "text": "How do you want to sign in?" | ||
| } | ||
| }, | ||
| "items": [ | ||
| { | ||
| "value": "governement-gateway", | ||
| "text": "Use Government Gateway" | ||
| }, | ||
| { | ||
| "value": "govuk-verify", | ||
| "text": "Use GOV.UK Verify" | ||
| }, | ||
| { | ||
| "divider": "or" | ||
| }, | ||
| { | ||
| "value": "create-account", | ||
| "text": "Create an account" | ||
| } | ||
| ] | ||
| }) }} | ||
| ### Radios with hints on items | ||
| [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-hints-on-items/preview) | ||
| #### Markup | ||
| <div class="govuk-form-group"> | ||
| <fieldset class="govuk-fieldset"> | ||
| <legend class="govuk-fieldset__legend"> | ||
| <h1 class="govuk-fieldset__heading"> | ||
| How do you want to sign in? | ||
| </h1> | ||
| </legend> | ||
| <div class="govuk-radios"> | ||
| <div class="govuk-radios__item"> | ||
| <input class="govuk-radios__input" id="gov-1" name="gov" type="radio" value="gateway" aria-describedby="gov-1-item-hint"> | ||
| <label class="govuk-label govuk-radios__label" for="gov-1"> | ||
| Sign in with Government Gateway | ||
| </label> | ||
| <span id="gov-1-item-hint" class="govuk-hint govuk-radios__hint"> | ||
| You'll have a user ID if you've registered for Self Assessment or filed a tax return online before. | ||
| </span> | ||
| </div> | ||
| <div class="govuk-radios__item"> | ||
| <input class="govuk-radios__input" id="gov-2" name="gov" type="radio" value="verify" aria-describedby="gov-2-item-hint"> | ||
| <label class="govuk-label govuk-radios__label" for="gov-2"> | ||
| Sign in with GOV.UK Verify | ||
| </label> | ||
| <span id="gov-2-item-hint" class="govuk-hint govuk-radios__hint"> | ||
| You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
| #### Macro | ||
| {% from "radios/macro.njk" import govukRadios %} | ||
| {{ govukRadios({ | ||
| "idPrefix": "gov", | ||
| "name": "gov", | ||
| "fieldset": { | ||
| "legend": { | ||
| "text": "How do you want to sign in?", | ||
| "isPageHeading": true | ||
| } | ||
| }, | ||
| "items": [ | ||
| { | ||
| "value": "gateway", | ||
| "text": "Sign in with Government Gateway", | ||
| "hint": { | ||
| "text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before." | ||
| } | ||
| }, | ||
| { | ||
| "value": "verify", | ||
| "text": "Sign in with GOV.UK Verify", | ||
| "hint": { | ||
| "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity." | ||
| } | ||
| } | ||
| ] | ||
| }) }} | ||
| ### Radios without fieldset | ||
@@ -540,3 +689,3 @@ | ||
| <td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See fieldset component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See <a href="../fieldset/README.md#component-arguments">fieldset</a> component.</td> | ||
@@ -553,3 +702,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td> | ||
@@ -662,3 +811,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Provide additional attributes to each radio item label. See `label` component for more details.</td> | ||
| <td class="govuk-table__cell ">Provide additional attributes and classes to each radio item label. See [label](../label/README.md#component-arguments) component for more details.</td> | ||
@@ -669,2 +818,26 @@ </tr> | ||
| <th class="govuk-table__header" scope="row">items.{}.hint</th> | ||
| <td class="govuk-table__cell ">object</td> | ||
| <td class="govuk-table__cell ">No</td> | ||
| <td class="govuk-table__cell ">Provide optional hint to each radio item. See `hint` component for more details.</td> | ||
| </tr> | ||
| <tr class="govuk-table__row"> | ||
| <th class="govuk-table__header" scope="row">items.{}.divider</th> | ||
| <td class="govuk-table__cell ">string</td> | ||
| <td class="govuk-table__cell ">No</td> | ||
| <td class="govuk-table__cell ">Optional divider text to separate radio items, for example the text "or".</td> | ||
| </tr> | ||
| <tr class="govuk-table__row"> | ||
| <th class="govuk-table__header" scope="row">items.{}.checked</th> | ||
@@ -671,0 +844,0 @@ |
@@ -313,3 +313,3 @@ # Select | ||
| <td class="govuk-table__cell ">Optional label text or HTML by specifying value for either text or html keys. See label component.</td> | ||
| <td class="govuk-table__cell ">Optional label text or HTML by specifying value for either text or html keys. See <a href="../label/README.md#component-arguments">label</a> component.</td> | ||
@@ -326,3 +326,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td> | ||
@@ -339,3 +339,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td> | ||
@@ -342,0 +342,0 @@ </tr> |
@@ -1036,3 +1036,3 @@ (function (global, factory) { | ||
| this.keys = { left: 37, right: 39, up: 38, down: 40 }; | ||
| this.jsHiddenClass = 'js-hidden'; | ||
| this.jsHiddenClass = 'govuk-tabs__panel--hidden'; | ||
| } | ||
@@ -1039,0 +1039,0 @@ |
@@ -276,3 +276,3 @@ # Textarea | ||
| <td class="govuk-table__cell ">Arguments for the label component. See label component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the label component. See <a href="../label/README.md#component-arguments">label</a> component.</td> | ||
@@ -289,3 +289,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td> | ||
@@ -302,3 +302,3 @@ </tr> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td> | ||
| <td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td> | ||
@@ -305,0 +305,0 @@ </tr> |
| { | ||
| "name": "govuk-frontend", | ||
| "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.", | ||
| "version": "1.1.1", | ||
| "version": "1.2.0", | ||
| "main": "all.js", | ||
@@ -6,0 +6,0 @@ "sass": "all.scss", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.83%
1374381
- Lines of code
- increased by8.12%
7910
No dependency changes