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 0.0.32 to 1.0.0
630
all.js
@@ -1055,2 +1055,626 @@ (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 || {}); | ||
| function Tabs ($module) { | ||
| this.$module = $module; | ||
| this.$tabs = $module.querySelectorAll('.govuk-tabs__tab'); | ||
| this.keys = { left: 37, right: 39, up: 38, down: 40 }; | ||
| this.jsHiddenClass = 'js-hidden'; | ||
| } | ||
| Tabs.prototype.init = function () { | ||
| if (typeof window.matchMedia === 'function') { | ||
| this.setupResponsiveChecks(); | ||
| } else { | ||
| this.setup(); | ||
| } | ||
| }; | ||
| Tabs.prototype.setupResponsiveChecks = function () { | ||
| this.mql = window.matchMedia('(min-width: 40.0625em)'); | ||
| this.mql.addListener(this.checkMode.bind(this)); | ||
| this.checkMode(); | ||
| }; | ||
| Tabs.prototype.checkMode = function () { | ||
| if (this.mql.matches) { | ||
| this.setup(); | ||
| } else { | ||
| this.teardown(); | ||
| } | ||
| }; | ||
| Tabs.prototype.setup = function () { | ||
| var $module = this.$module; | ||
| var $tabs = this.$tabs; | ||
| var $tabList = $module.querySelector('.govuk-tabs__list'); | ||
| var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item'); | ||
| if (!$tabs || !$tabList || !$tabListItems) { | ||
| return | ||
| } | ||
| $tabList.setAttribute('role', 'tablist'); | ||
| nodeListForEach($tabListItems, function ($item) { | ||
| $item.setAttribute('role', 'presentation'); | ||
| }); | ||
| nodeListForEach($tabs, function ($tab) { | ||
| // Set HTML attributes | ||
| this.setAttributes($tab); | ||
| // Save bounded functions to use when removing event listeners during teardown | ||
| $tab.boundTabClick = this.onTabClick.bind(this); | ||
| $tab.boundTabKeydown = this.onTabKeydown.bind(this); | ||
| // Handle events | ||
| $tab.addEventListener('click', $tab.boundTabClick, true); | ||
| $tab.addEventListener('keydown', $tab.boundTabKeydown, true); | ||
| // Remove old active panels | ||
| this.hideTab($tab); | ||
| }.bind(this)); | ||
| // Show either the active tab according to the URL's hash or the first tab | ||
| var $activeTab = this.getTab(window.location.hash) || this.$tabs[0]; | ||
| this.showTab($activeTab); | ||
| // Handle hashchange events | ||
| $module.boundOnHashChange = this.onHashChange.bind(this); | ||
| window.addEventListener('hashchange', $module.boundOnHashChange, true); | ||
| }; | ||
| Tabs.prototype.teardown = function () { | ||
| var $module = this.$module; | ||
| var $tabs = this.$tabs; | ||
| var $tabList = $module.querySelector('.govuk-tabs__list'); | ||
| var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item'); | ||
| if (!$tabs || !$tabList || !$tabListItems) { | ||
| return | ||
| } | ||
| $tabList.removeAttribute('role'); | ||
| nodeListForEach($tabListItems, function ($item) { | ||
| $item.removeAttribute('role', 'presentation'); | ||
| }); | ||
| nodeListForEach($tabs, function ($tab) { | ||
| // Remove events | ||
| $tab.removeEventListener('click', $tab.boundTabClick, true); | ||
| $tab.removeEventListener('keydown', $tab.boundTabKeydown, true); | ||
| // Unset HTML attributes | ||
| this.unsetAttributes($tab); | ||
| }.bind(this)); | ||
| // Remove hashchange event handler | ||
| window.removeEventListener('hashchange', $module.boundOnHashChange, true); | ||
| }; | ||
| Tabs.prototype.onHashChange = function (e) { | ||
| var hash = window.location.hash; | ||
| if (!this.hasTab(hash)) { | ||
| return | ||
| } | ||
| // Prevent changing the hash | ||
| if (this.changingHash) { | ||
| this.changingHash = false; | ||
| return | ||
| } | ||
| // Show either the active tab according to the URL's hash or the first tab | ||
| var $previousTab = this.getCurrentTab(); | ||
| var $activeTab = this.getTab(hash) || this.$tabs[0]; | ||
| this.hideTab($previousTab); | ||
| this.showTab($activeTab); | ||
| $activeTab.focus(); | ||
| }; | ||
| Tabs.prototype.hasTab = function (hash) { | ||
| return this.$module.querySelector(hash) | ||
| }; | ||
| Tabs.prototype.hideTab = function ($tab) { | ||
| this.unhighlightTab($tab); | ||
| this.hidePanel($tab); | ||
| }; | ||
| Tabs.prototype.showTab = function ($tab) { | ||
| this.highlightTab($tab); | ||
| this.showPanel($tab); | ||
| }; | ||
| Tabs.prototype.getTab = function (hash) { | ||
| return this.$module.querySelector('a[role="tab"][href="' + hash + '"]') | ||
| }; | ||
| Tabs.prototype.setAttributes = function ($tab) { | ||
| // set tab attributes | ||
| var panelId = this.getHref($tab).slice(1); | ||
| $tab.setAttribute('id', 'tab_' + panelId); | ||
| $tab.setAttribute('role', 'tab'); | ||
| $tab.setAttribute('aria-controls', panelId); | ||
| $tab.setAttribute('tabindex', '-1'); | ||
| // set panel attributes | ||
| var $panel = this.getPanel($tab); | ||
| $panel.setAttribute('role', 'tabpanel'); | ||
| $panel.setAttribute('aria-labelledby', $tab.id); | ||
| $panel.classList.add(this.jsHiddenClass); | ||
| }; | ||
| Tabs.prototype.unsetAttributes = function ($tab) { | ||
| // unset tab attributes | ||
| $tab.removeAttribute('id'); | ||
| $tab.removeAttribute('role'); | ||
| $tab.removeAttribute('aria-controls'); | ||
| $tab.removeAttribute('tabindex'); | ||
| // unset panel attributes | ||
| var $panel = this.getPanel($tab); | ||
| $panel.removeAttribute('role'); | ||
| $panel.removeAttribute('aria-labelledby'); | ||
| $panel.classList.remove(this.jsHiddenClass); | ||
| }; | ||
| Tabs.prototype.onTabClick = function (e) { | ||
| e.preventDefault(); | ||
| var $newTab = e.target; | ||
| var $currentTab = this.getCurrentTab(); | ||
| this.hideTab($currentTab); | ||
| this.showTab($newTab); | ||
| this.createHistoryEntry($newTab); | ||
| }; | ||
| Tabs.prototype.createHistoryEntry = function ($tab) { | ||
| var $panel = this.getPanel($tab); | ||
| // Save and restore the id | ||
| // so the page doesn't jump when a user clicks a tab (which changes the hash) | ||
| var id = $panel.id; | ||
| $panel.id = ''; | ||
| this.changingHash = true; | ||
| window.location.hash = this.getHref($tab).slice(1); | ||
| $panel.id = id; | ||
| }; | ||
| Tabs.prototype.onTabKeydown = function (e) { | ||
| switch (e.keyCode) { | ||
| case this.keys.left: | ||
| case this.keys.up: | ||
| this.activatePreviousTab(); | ||
| e.preventDefault(); | ||
| break | ||
| case this.keys.right: | ||
| case this.keys.down: | ||
| this.activateNextTab(); | ||
| e.preventDefault(); | ||
| break | ||
| } | ||
| }; | ||
| Tabs.prototype.activateNextTab = function () { | ||
| var currentTab = this.getCurrentTab(); | ||
| var nextTabListItem = currentTab.parentNode.nextElementSibling; | ||
| if (nextTabListItem) { | ||
| var nextTab = nextTabListItem.firstElementChild; | ||
| } | ||
| if (nextTab) { | ||
| this.hideTab(currentTab); | ||
| this.showTab(nextTab); | ||
| nextTab.focus(); | ||
| this.createHistoryEntry(nextTab); | ||
| } | ||
| }; | ||
| Tabs.prototype.activatePreviousTab = function () { | ||
| var currentTab = this.getCurrentTab(); | ||
| var previousTabListItem = currentTab.parentNode.previousElementSibling; | ||
| if (previousTabListItem) { | ||
| var previousTab = previousTabListItem.firstElementChild; | ||
| } | ||
| if (previousTab) { | ||
| this.hideTab(currentTab); | ||
| this.showTab(previousTab); | ||
| previousTab.focus(); | ||
| this.createHistoryEntry(previousTab); | ||
| } | ||
| }; | ||
| Tabs.prototype.getPanel = function ($tab) { | ||
| var $panel = this.$module.querySelector(this.getHref($tab)); | ||
| return $panel | ||
| }; | ||
| Tabs.prototype.showPanel = function ($tab) { | ||
| var $panel = this.getPanel($tab); | ||
| $panel.classList.remove(this.jsHiddenClass); | ||
| }; | ||
| Tabs.prototype.hidePanel = function (tab) { | ||
| var $panel = this.getPanel(tab); | ||
| $panel.classList.add(this.jsHiddenClass); | ||
| }; | ||
| Tabs.prototype.unhighlightTab = function ($tab) { | ||
| $tab.setAttribute('aria-selected', 'false'); | ||
| $tab.setAttribute('tabindex', '-1'); | ||
| }; | ||
| Tabs.prototype.highlightTab = function ($tab) { | ||
| $tab.setAttribute('aria-selected', 'true'); | ||
| $tab.setAttribute('tabindex', '0'); | ||
| }; | ||
| Tabs.prototype.getCurrentTab = function () { | ||
| return this.$module.querySelector('[role=tab][aria-selected=true]') | ||
| }; | ||
| // this is because IE doesn't always return the actual value but a relative full path | ||
| // should be a utility function most prob | ||
| // http://labs.thesedays.com/blog/2010/01/08/getting-the-href-value-with-jquery-in-ie/ | ||
| Tabs.prototype.getHref = function ($tab) { | ||
| var href = $tab.getAttribute('href'); | ||
| var hash = href.slice(href.indexOf('#'), href.length); | ||
| return hash | ||
| }; | ||
| function initAll () { | ||
@@ -1081,2 +1705,7 @@ new Button(document).init(); | ||
| }); | ||
| var $tabs = document.querySelectorAll('[data-module="tabs"]'); | ||
| nodeListForEach($tabs, function ($tabs) { | ||
| new Tabs($tabs).init(); | ||
| }); | ||
| } | ||
@@ -1091,3 +1720,4 @@ | ||
| exports.Radios = Radios; | ||
| exports.Tabs = Tabs; | ||
| }))); |
@@ -50,2 +50,4 @@ # Back link | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -123,2 +125,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -125,0 +129,0 @@ |
@@ -231,2 +231,4 @@ # Breadcrumbs | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -316,2 +318,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -318,0 +322,0 @@ |
@@ -167,2 +167,4 @@ # Button | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -300,2 +302,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -302,0 +306,0 @@ |
@@ -534,2 +534,4 @@ # Checkboxes | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -763,2 +765,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -765,0 +769,0 @@ |
@@ -476,2 +476,4 @@ # Date input | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -621,2 +623,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -623,0 +627,0 @@ |
@@ -121,2 +121,4 @@ # Details | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -218,2 +220,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -220,0 +224,0 @@ |
@@ -51,2 +51,4 @@ # Error message | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -124,2 +126,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -126,0 +130,0 @@ |
@@ -87,2 +87,4 @@ # Error summary | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -196,2 +198,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -198,0 +202,0 @@ |
@@ -85,2 +85,4 @@ # Fieldset | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -194,2 +196,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -196,0 +200,0 @@ |
@@ -192,2 +192,4 @@ # File upload | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -313,2 +315,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -315,0 +319,0 @@ |
@@ -84,2 +84,4 @@ # Footer | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -265,2 +267,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -267,0 +271,0 @@ |
@@ -58,6 +58,3 @@ # Header | ||
| {{ govukHeader({ | ||
| "homepageUrl": "/", | ||
| "containerClasses": "govuk-width-container" | ||
| }) }} | ||
| {{ govukHeader({}) }} | ||
@@ -114,6 +111,4 @@ ### Header--with-service-name | ||
| {{ govukHeader({ | ||
| "homepageUrl": "/", | ||
| "serviceName": "Service Name", | ||
| "serviceUrl": "/components/header", | ||
| "containerClasses": "govuk-width-container" | ||
| "serviceUrl": "/components/header" | ||
| }) }} | ||
@@ -198,4 +193,2 @@ | ||
| {{ govukHeader({ | ||
| "homepageUrl": "/", | ||
| "containerClasses": "govuk-width-container", | ||
| "navigation": [ | ||
@@ -303,6 +296,4 @@ { | ||
| {{ govukHeader({ | ||
| "homepageUrl": "/", | ||
| "serviceName": "Service Name", | ||
| "serviceUrl": "/components/header", | ||
| "containerClasses": "govuk-width-container", | ||
| "navigation": [ | ||
@@ -349,2 +340,4 @@ { | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -518,2 +511,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -520,0 +515,0 @@ |
@@ -65,2 +65,4 @@ # Hint | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -138,2 +140,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -140,0 +144,0 @@ |
@@ -264,2 +264,4 @@ # Input | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -397,2 +399,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -399,0 +403,0 @@ |
@@ -65,2 +65,4 @@ # Inset text | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -138,2 +140,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -140,0 +144,0 @@ |
@@ -89,2 +89,4 @@ # Label | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -174,2 +176,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -176,0 +180,0 @@ |
@@ -59,2 +59,4 @@ # Panel | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -132,2 +134,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -134,0 +138,0 @@ |
@@ -60,2 +60,4 @@ # Phase banner | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -133,2 +135,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -135,0 +139,0 @@ |
@@ -438,2 +438,4 @@ # Radios | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -667,2 +669,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -669,0 +673,0 @@ |
@@ -199,2 +199,4 @@ # Select | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -368,2 +370,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -370,0 +374,0 @@ |
@@ -50,2 +50,4 @@ # Skip link | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -123,2 +125,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -125,0 +129,0 @@ |
@@ -361,2 +361,4 @@ # Table | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -566,2 +568,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -568,0 +572,0 @@ |
@@ -70,2 +70,4 @@ # Tag | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -131,2 +133,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -133,0 +137,0 @@ |
@@ -186,2 +186,4 @@ # Textarea | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -331,2 +333,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -333,0 +337,0 @@ |
@@ -56,2 +56,4 @@ # Warning text | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| <table class="govuk-table"> | ||
@@ -129,2 +131,4 @@ | ||
| **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).** | ||
| ### Setting up Nunjucks views and paths | ||
@@ -131,0 +135,0 @@ |
| { | ||
| "name": "govuk-frontend", | ||
| "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.", | ||
| "version": "0.0.32", | ||
| "version": "1.0.0", | ||
| "main": "all.js", | ||
@@ -6,0 +6,0 @@ "engines": { |
102
README.md
@@ -1,60 +0,96 @@ | ||
| # GOV.UK Frontend - All components | ||
| # GOV.UK Frontend | ||
| All of the components in GOV.UK Frontend, in a single package. | ||
| GOV.UK Frontend contains the code you need to start building a user interface | ||
| for government platforms and services. | ||
| ## Guidance | ||
| See live examples of GOV.UK Frontend components, and guidance on when to use | ||
| them in your service, in the [GOV.UK Design System](https://www.gov.uk/design-system). | ||
| Find out when to use the Back link component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital). | ||
| ## Contact the team | ||
| ## Dependencies | ||
| GOV.UK Frontend is maintained by a team at Government Digital Service. If you want to know more about GOV.UK Frontend, please email the [Design System | ||
| team](mailto:govuk-design-system-support@digital.cabinet-office.gov.uk) or get in touch with them on [Slack](https://ukgovernmentdigital.slack.com/messages/govuk-design-system). | ||
| To consume all components you must be running npm version 5 or above. | ||
| ## Quick start | ||
| ## Installation | ||
| There are 2 ways to start using GOV.UK Frontend in your app. | ||
| npm install --save govuk-frontend | ||
| Once installed, you will be able to use the code from the examples in the | ||
| [GOV.UK Design System](https://www.gov.uk/design-system in your service. | ||
| ## Requirements | ||
| ### 1. Install with npm (recommended) | ||
| ### Build tool configuration | ||
| We recommend [installing GOV.UK Frontend using node package manager | ||
| (npm)](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md). | ||
| When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp | ||
| ### 2. Install by using compiled files | ||
| .pipe(sass({ | ||
| includePaths: 'node_modules/' | ||
| })) | ||
| You can also [download the compiled and minified assets (CSS, JavaScript) from | ||
| GitHub](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-from-dist.md). | ||
| ### Static asset path configuration | ||
| ## Importing styles | ||
| To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js: | ||
| You need to import the GOV.UK Frontend styles into the main Sass file in your | ||
| project. You should place the below code before your own Sass rules (or Sass | ||
| imports) if you want to override GOV.UK Frontend with your own styles. | ||
| app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets'))) | ||
| To import add the below to your Sass file: | ||
| ### Setting up Nunjucks views and paths | ||
| ```scss | ||
| @import "node_modules/govuk-frontend/all"; | ||
| ``` | ||
| Below is an example setup using express configure views: | ||
| [More details on importing styles](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#importing-styles) | ||
| nunjucks.configure('node_modules/govuk-frontend/components/', { | ||
| autoescape: true, | ||
| cache: false, | ||
| express: app | ||
| }) | ||
| ## Importing JavaScript | ||
| Some of the JavaScript included in GOV.UK Frontend improves the usability and | ||
| accessibility of the components. You should make sure that you are importing and | ||
| initialising Javascript in your application to ensure that all users can use it successfully. | ||
| You can include Javascript for all components either by copying the `all.js` from `node_modules/govuk-frontend` into your application or referencing the file directly: | ||
| ```html | ||
| <script src="<path-to-govuk-frontend-all-file>/all.js"></script> | ||
| ``` | ||
| Next you need to initialise the script by adding: | ||
| ```html | ||
| <script>window.GOVUKFrontend.initAll()</script> | ||
| ``` | ||
| [More details on importing Javascript and advanced options](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#importing-javascript) | ||
| ## Importing assets | ||
| In order to import GOV.UK Frontend images and fonts to your project, you should configure your application to reference or copy the relevant GOV.UK Frontend assets. | ||
| [More details on importing assets](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#import-assets) | ||
| ## Getting updates | ||
| To check whether you have the latest version of the button run: | ||
| To check whether you have the latest version of GOV.UK Frontend, run: | ||
| npm outdated govuk-frontend | ||
| ``` | ||
| npm outdated govuk-frontend | ||
| ``` | ||
| To update the latest version run: | ||
| To update to the latest version, run: | ||
| npm update govuk-frontend | ||
| ``` | ||
| npm update govuk-frontend | ||
| ``` | ||
| ## Licence | ||
| ## Contribution | ||
| Unless stated otherwise, the codebase is released under the MIT License. This | ||
| covers both the codebase and any sample code in the documentation. The | ||
| documentation is © Crown copyright and available under the terms of the | ||
| Open Government 3.0 licence. | ||
| Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository") | ||
| ## Contribution guidelines | ||
| ## License | ||
| MIT | ||
| If you want to help us build GOV.UK Frontend, view our [contribution | ||
| guidelines](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md). |
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
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.73%
1321956
- Number of package files
- increased by3.06%
236
- Lines of code
- increased by43.16%
7314
- Number of medium maintenance alerts
- decreased by-100%
0
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by59.02%
97
No dependency changes