Release v5.1.0 #4734
Merged
Release v5.1.0 #4734
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4734
JavaScript changes to GitHub releasediff --git a/dist/govuk-frontend-5.0.0.min.js b/dist/govuk-frontend-5.1.0.min.js
index 94f82e48e..f4274f5bd 100644
--- a/dist/govuk-frontend-5.0.0.min.js
+++ b/dist/govuk-frontend-5.1.0.min.js
@@ -1,39 +1,64 @@
-const version = "5.0.0";
+const version = "5.1.0";
function mergeConfigs(...t) {
function flattenObject(t) {
const e = {};
- return function flattenLoop(t, i) {
- for (const [n, s] of Object.entries(t)) {
- const t = i ? `${i}.${n}` : n;
+ return function flattenLoop(t, n) {
+ for (const [i, s] of Object.entries(t)) {
+ const t = n ? `${n}.${i}` : i;
s && "object" == typeof s ? flattenLoop(s, t) : e[t] = s
}
}(t), e
}
const e = {};
- for (const i of t) {
- const t = flattenObject(i);
- for (const [i, n] of Object.entries(t)) e[i] = n
+ for (const n of t) {
+ const t = flattenObject(n);
+ for (const [n, i] of Object.entries(t)) e[n] = i
}
return e
}
function extractConfigByNamespace(t, e) {
- const i = {};
- for (const [n, s] of Object.entries(t)) {
- const t = n.split(".");
+ const n = {};
+ for (const [i, s] of Object.entries(t)) {
+ const t = i.split(".");
if (t[0] === e) {
t.length > 1 && t.shift();
- i[t.join(".")] = s
+ n[t.join(".")] = s
}
}
- return i
+ return n
}
function getFragmentFromUrl(t) {
if (t.includes("#")) return t.split("#").pop()
}
+function getBreakpoint(t) {
+ const e = `--govuk-frontend-breakpoint-${t}`;
+ return {
+ property: e,
+ value: window.getComputedStyle(document.documentElement).getPropertyValue(e) || void 0
+ }
+}
+
+function setFocus(t, e = {}) {
+ var n;
+ const i = t.getAttribute("tabindex");
+
+ function onBlur() {
+ var n;
+ null == (n = e.onBlur) || n.call(t), i || t.removeAttribute("tabindex")
+ }
+ i || t.setAttribute("tabindex", "-1"), t.addEventListener("focus", (function() {
+ t.addEventListener("blur", onBlur, {
+ once: !0
+ })
+ }), {
+ once: !0
+ }), null == (n = e.onBeforeFocus) || n.call(t), t.focus()
+}
+
function isSupported(t = document.body) {
return !!t && t.classList.contains("govuk-frontend-supported")
}
@@ -46,7 +71,7 @@ function normaliseString(t) {
function normaliseDataset(t) {
const e = {};
- for (const [i, n] of Object.entries(t)) e[i] = normaliseString(n);
+ for (const [n, i] of Object.entries(t)) e[n] = normaliseString(i);
return e
}
class GOVUKFrontendError extends Error {
@@ -70,12 +95,12 @@ class ElementError extends GOVUKFrontendError {
let e = "string" == typeof t ? t : "";
if ("object" == typeof t) {
const {
- componentName: i,
- identifier: n,
+ componentName: n,
+ identifier: i,
element: s,
expectedType: o
} = t;
- e = `${i}: ${n}`, e += s ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
+ e = `${n}: ${i}`, e += s ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
}
super(e), this.name = "ElementError"
}
@@ -90,28 +115,28 @@ class GOVUKFrontendComponent {
}
class I18n {
constructor(t = {}, e = {}) {
- var i;
- this.translations = void 0, this.locale = void 0, this.translations = t, this.locale = null != (i = e.locale) ? i : document.documentElement.lang || "en"
+ var n;
+ this.translations = void 0, this.locale = void 0, this.translations = t, this.locale = null != (n = e.locale) ? n : document.documentElement.lang || "en"
}
t(t, e) {
if (!t) throw new Error("i18n: lookup key missing");
"number" == typeof(null == e ? void 0 : e.count) && (t = `${t}.${this.getPluralSuffix(t,e.count)}`);
- const i = this.translations[t];
- if ("string" == typeof i) {
- if (i.match(/%{(.\S+)}/)) {
+ const n = this.translations[t];
+ if ("string" == typeof n) {
+ if (n.match(/%{(.\S+)}/)) {
if (!e) throw new Error("i18n: cannot replace placeholders in string if no option data provided");
- return this.replacePlaceholders(i, e)
+ return this.replacePlaceholders(n, e)
}
- return i
+ return n
}
return t
}
replacePlaceholders(t, e) {
- const i = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
- return t.replace(/%{(.\S+)}/g, (function(t, n) {
- if (Object.prototype.hasOwnProperty.call(e, n)) {
- const t = e[n];
- return !1 === t || "number" != typeof t && "string" != typeof t ? "" : "number" == typeof t ? i ? i.format(t) : `${t}` : t
+ const n = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
+ return t.replace(/%{(.\S+)}/g, (function(t, i) {
+ if (Object.prototype.hasOwnProperty.call(e, i)) {
+ const t = e[i];
+ return !1 === t || "number" != typeof t && "string" != typeof t ? "" : "number" == typeof t ? n ? n.format(t) : `${t}` : t
}
throw new Error(`i18n: no data found to replace ${t} placeholder in string`)
}))
@@ -121,9 +146,9 @@ class I18n {
}
getPluralSuffix(t, e) {
if (e = Number(e), !isFinite(e)) return "other";
- const i = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(e) : this.selectPluralFormUsingFallbackRules(e);
- if (`${t}.${i}` in this.translations) return i;
- if (`${t}.other` in this.translations) return console.warn(`i18n: Missing plural form ".${i}" for "${this.locale}" locale. Falling back to ".other".`), "other";
+ const n = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(e) : this.selectPluralFormUsingFallbackRules(e);
+ if (`${t}.${n}` in this.translations) return n;
+ if (`${t}.other` in this.translations) return console.warn(`i18n: Missing plural form ".${n}" for "${this.locale}" locale. Falling back to ".other".`), "other";
throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`)
}
selectPluralFormUsingFallbackRules(t) {
@@ -134,8 +159,8 @@ class I18n {
getPluralRulesForLocale() {
const t = this.locale.split("-")[0];
for (const e in I18n.pluralRulesMap) {
- const i = I18n.pluralRulesMap[e];
- if (i.includes(this.locale) || i.includes(t)) return e
+ const n = I18n.pluralRulesMap[e];
+ if (n.includes(this.locale) || n.includes(t)) return e
}
}
}
@@ -157,27 +182,27 @@ I18n.pluralRulesMap = {
irish: t => 1 === t ? "one" : 2 === t ? "two" : t >= 3 && t <= 6 ? "few" : t >= 7 && t <= 10 ? "many" : "other",
russian(t) {
const e = t % 100,
- i = e % 10;
- return 1 === i && 11 !== e ? "one" : i >= 2 && i <= 4 && !(e >= 12 && e <= 14) ? "few" : 0 === i || i >= 5 && i <= 9 || e >= 11 && e <= 14 ? "many" : "other"
+ n = e % 10;
+ return 1 === n && 11 !== e ? "one" : n >= 2 && n <= 4 && !(e >= 12 && e <= 14) ? "few" : 0 === n || n >= 5 && n <= 9 || e >= 11 && e <= 14 ? "many" : "other"
},
scottish: t => 1 === t || 11 === t ? "one" : 2 === t || 12 === t ? "two" : t >= 3 && t <= 10 || t >= 13 && t <= 19 ? "few" : "other",
spanish: t => 1 === t ? "one" : t % 1e6 == 0 && 0 !== t ? "many" : "other",
welsh: t => 0 === t ? "zero" : 1 === t ? "one" : 2 === t ? "two" : 3 === t ? "few" : 6 === t ? "many" : "other"
};
class Accordion extends GOVUKFrontendComponent {
- constructor(e, i = {}) {
+ constructor(e, n = {}) {
if (super(), this.$module = void 0, this.config = void 0, this.i18n = void 0, this.controlsClass = "govuk-accordion__controls", this.showAllClass = "govuk-accordion__show-all", this.showAllTextClass = "govuk-accordion__show-all-text", this.sectionClass = "govuk-accordion__section", this.sectionExpandedClass = "govuk-accordion__section--expanded", this.sectionButtonClass = "govuk-accordion__section-button", this.sectionHeaderClass = "govuk-accordion__section-header", this.sectionHeadingClass = "govuk-accordion__section-heading", this.sectionHeadingDividerClass = "govuk-accordion__section-heading-divider", this.sectionHeadingTextClass = "govuk-accordion__section-heading-text", this.sectionHeadingTextFocusClass = "govuk-accordion__section-heading-text-focus", this.sectionShowHideToggleClass = "govuk-accordion__section-toggle", this.sectionShowHideToggleFocusClass = "govuk-accordion__section-toggle-focus", this.sectionShowHideTextClass = "govuk-accordion__section-toggle-text", this.upChevronIconClass = "govuk-accordion-nav__chevron", this.downChevronIconClass = "govuk-accordion-nav__chevron--down", this.sectionSummaryClass = "govuk-accordion__section-summary", this.sectionSummaryFocusClass = "govuk-accordion__section-summary-focus", this.sectionContentClass = "govuk-accordion__section-content", this.$sections = void 0, this.browserSupportsSessionStorage = !1, this.$showAllButton = null, this.$showAllIcon = null, this.$showAllText = null, !(e instanceof HTMLElement)) throw new ElementError({
componentName: "Accordion",
element: e,
identifier: "Root element (`$module`)"
});
- this.$module = e, this.config = mergeConfigs(Accordion.defaults, i, normaliseDataset(e.dataset)), this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n"));
- const n = this.$module.querySelectorAll(`.${this.sectionClass}`);
- if (!n.length) throw new ElementError({
+ this.$module = e, this.config = mergeConfigs(Accordion.defaults, n, normaliseDataset(e.dataset)), this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n"));
+ const i = this.$module.querySelectorAll(`.${this.sectionClass}`);
+ if (!i.length) throw new ElementError({
componentName: "Accordion",
identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
});
- this.$sections = n, this.browserSupportsSessionStorage = t.checkForSessionStorage(), this.initControls(), this.initSectionHeaders();
+ this.$sections = i, this.browserSupportsSessionStorage = t.checkForSessionStorage(), this.initControls(), this.initSectionHeaders();
const s = this.checkIfAllSectionsOpen();
this.updateShowAllButton(s)
}
@@ -188,53 +213,53 @@ class Accordion extends GOVUKFrontendComponent {
}
initSectionHeaders() {
this.$sections.forEach(((t, e) => {
- const i = t.querySelector(`.${this.sectionHeaderClass}`);
- if (!i) throw new ElementError({
+ const n = t.querySelector(`.${this.sectionHeaderClass}`);
+ if (!n) throw new ElementError({
componentName: "Accordion",
identifier: `Section headers (\`<div class="${this.sectionHeaderClass}">\`)`
});
- this.constructHeaderMarkup(i, e), this.setExpanded(this.isExpanded(t), t), i.addEventListener("click", (() => this.onSectionToggle(t))), this.setInitialState(t)
+ this.constructHeaderMarkup(n, e), this.setExpanded(this.isExpanded(t), t), n.addEventListener("click", (() => this.onSectionToggle(t))), this.setInitialState(t)
}))
}
constructHeaderMarkup(t, e) {
- const i = t.querySelector(`.${this.sectionButtonClass}`),
- n = t.querySelector(`.${this.sectionHeadingClass}`),
+ const n = t.querySelector(`.${this.sectionButtonClass}`),
+ i = t.querySelector(`.${this.sectionHeadingClass}`),
s = t.querySelector(`.${this.sectionSummaryClass}`);
- if (!n) throw new ElementError({
+ if (!i) throw new ElementError({
componentName: "Accordion",
identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
});
- if (!i) throw new ElementError({
+ if (!n) throw new ElementError({
componentName: "Accordion",
identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
});
const o = document.createElement("button");
o.setAttribute("type", "button"), o.setAttribute("aria-controls", `${this.$module.id}-content-${e+1}`);
- for (const u of Array.from(i.attributes)) "id" !== u.nodeName && o.setAttribute(u.nodeName, `${u.nodeValue}`);
+ for (const d of Array.from(n.attributes)) "id" !== d.nodeName && o.setAttribute(d.nodeName, `${d.nodeValue}`);
const r = document.createElement("span");
- r.classList.add(this.sectionHeadingTextClass), r.id = i.id;
+ r.classList.add(this.sectionHeadingTextClass), r.id = n.id;
const a = document.createElement("span");
- a.classList.add(this.sectionHeadingTextFocusClass), r.appendChild(a), a.innerHTML = i.innerHTML;
+ a.classList.add(this.sectionHeadingTextFocusClass), r.appendChild(a), a.innerHTML = n.innerHTML;
const l = document.createElement("span");
l.classList.add(this.sectionShowHideToggleClass), l.setAttribute("data-nosnippet", "");
const c = document.createElement("span");
c.classList.add(this.sectionShowHideToggleFocusClass), l.appendChild(c);
const h = document.createElement("span"),
- d = document.createElement("span");
- if (d.classList.add(this.upChevronIconClass), c.appendChild(d), h.classList.add(this.sectionShowHideTextClass), c.appendChild(h), o.appendChild(r), o.appendChild(this.getButtonPunctuationEl()), null != s && s.parentNode) {
+ u = document.createElement("span");
+ if (u.classList.add(this.upChevronIconClass), c.appendChild(u), h.classList.add(this.sectionShowHideTextClass), c.appendChild(h), o.appendChild(r), o.appendChild(this.getButtonPunctuationEl()), null != s && s.parentNode) {
const t = document.createElement("span"),
e = document.createElement("span");
e.classList.add(this.sectionSummaryFocusClass), t.appendChild(e);
- for (const i of Array.from(s.attributes)) t.setAttribute(i.nodeName, `${i.nodeValue}`);
+ for (const n of Array.from(s.attributes)) t.setAttribute(n.nodeName, `${n.nodeValue}`);
e.innerHTML = s.innerHTML, s.parentNode.replaceChild(t, s), o.appendChild(t), o.appendChild(this.getButtonPunctuationEl())
}
- o.appendChild(l), n.removeChild(i), n.appendChild(o)
+ o.appendChild(l), i.removeChild(n), i.appendChild(o)
}
onBeforeMatch(t) {
const e = t.target;
if (!(e instanceof Element)) return;
- const i = e.closest(`.${this.sectionClass}`);
- i && this.setExpanded(!0, i)
+ const n = e.closest(`.${this.sectionClass}`);
+ n && this.setExpanded(!0, n)
}
onSectionToggle(t) {
const e = this.isExpanded(t);
@@ -247,26 +272,26 @@ class Accordion extends GOVUKFrontendComponent {
})), this.updateShowAllButton(t)
}
setExpanded(t, e) {
- const i = e.querySelector(`.${this.upChevronIconClass}`),
- n = e.querySelector(`.${this.sectionShowHideTextClass}`),
+ const n = e.querySelector(`.${this.upChevronIconClass}`),
+ i = e.querySelector(`.${this.sectionShowHideTextClass}`),
s = e.querySelector(`.${this.sectionButtonClass}`),
o = e.querySelector(`.${this.sectionContentClass}`);
if (!o) throw new ElementError({
componentName: "Accordion",
identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
});
- if (!i || !n || !s) return;
+ if (!n || !i || !s) return;
const r = t ? this.i18n.t("hideSection") : this.i18n.t("showSection");
- n.textContent = r, s.setAttribute("aria-expanded", `${t}`);
+ i.textContent = r, s.setAttribute("aria-expanded", `${t}`);
const a = [],
l = e.querySelector(`.${this.sectionHeadingTextClass}`);
l && a.push(`${l.textContent}`.trim());
const c = e.querySelector(`.${this.sectionSummaryClass}`);
c && a.push(`${c.textContent}`.trim());
const h = t ? this.i18n.t("hideSectionAriaLabel") : this.i18n.t("showSectionAriaLabel");
- a.push(h), s.setAttribute("aria-label", a.join(" , ")), t ? (o.removeAttribute("hidden"), e.classList.add(this.sectionExpandedClass), i.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), e.classList.remove(this.sectionExpandedClass), i.classList.add(this.downChevronIconClass));
- const d = this.checkIfAllSectionsOpen();
- this.updateShowAllButton(d)
+ a.push(h), s.setAttribute("aria-label", a.join(" , ")), t ? (o.removeAttribute("hidden"), e.classList.add(this.sectionExpandedClass), n.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), e.classList.remove(this.sectionExpandedClass), n.classList.add(this.downChevronIconClass));
+ const u = this.checkIfAllSectionsOpen();
+ this.updateShowAllButton(u)
}
isExpanded(t) {
return t.classList.contains(this.sectionExpandedClass)
@@ -282,8 +307,8 @@ class Accordion extends GOVUKFrontendComponent {
const e = t.querySelector(`.${this.sectionButtonClass}`);
if (e) {
const t = e.getAttribute("aria-controls"),
- i = e.getAttribute("aria-expanded");
- t && i && window.sessionStorage.setItem(t, i)
+ n = e.getAttribute("aria-expanded");
+ t && n && window.sessionStorage.setItem(t, n)
}
}
}
@@ -291,9 +316,9 @@ class Accordion extends GOVUKFrontendComponent {
if (this.browserSupportsSessionStorage && this.config.rememberExpanded) {
const e = t.querySelector(`.${this.sectionButtonClass}`);
if (e) {
- const i = e.getAttribute("aria-controls"),
- n = i ? window.sessionStorage.getItem(i) : null;
- null !== n && this.setExpanded("true" === n, t)
+ const n = e.getAttribute("aria-controls"),
+ i = n ? window.sessionStorage.getItem(n) : null;
+ null !== i && this.setExpanded("true" === i, t)
}
}
}
@@ -319,7 +344,7 @@ const t = {
let e;
try {
return window.sessionStorage.setItem(t, t), e = window.sessionStorage.getItem(t) === t.toString(), window.sessionStorage.removeItem(t), e
- } catch (i) {
+ } catch (n) {
return !1
}
}
@@ -345,15 +370,15 @@ class Button extends GOVUKFrontendComponent {
}
function closestAttributeValue(t, e) {
- const i = t.closest(`[${e}]`);
- return i ? i.getAttribute(e) : null
+ const n = t.closest(`[${e}]`);
+ return n ? n.getAttribute(e) : null
}
Button.moduleName = "govuk-button", Button.defaults = Object.freeze({
preventDoubleClick: !1
});
class CharacterCount extends GOVUKFrontendComponent {
constructor(t, e = {}) {
- var i, n;
+ var n, i;
if (super(), this.$module = void 0, this.$textarea = void 0, this.$visibleCountMessage = void 0, this.$screenReaderCountMessage = void 0, this.lastInputTimestamp = null, this.lastInputValue = "", this.valueChecker = null, this.config = void 0, this.i18n = void 0, this.maxLength = void 0, !(t instanceof HTMLElement)) throw new ElementError({
componentName: "Character count",
element: t,
@@ -373,22 +398,22 @@ class CharacterCount extends GOVUKFrontendComponent {
maxwords: void 0
}), this.config = mergeConfigs(CharacterCount.defaults, e, r, o);
const a = function(t, e) {
- const i = [];
- for (const [n, s] of Object.entries(t)) {
+ const n = [];
+ for (const [i, s] of Object.entries(t)) {
const t = [];
for (const {
- required: i,
- errorMessage: n
+ required: n,
+ errorMessage: i
}
- of s) i.every((t => !!e[t])) || t.push(n);
- "anyOf" !== n || s.length - t.length >= 1 || i.push(...t)
+ of s) n.every((t => !!e[t])) || t.push(i);
+ "anyOf" !== i || s.length - t.length >= 1 || n.push(...t)
}
- return i
+ return n
}(CharacterCount.schema, this.config);
if (a[0]) throw new ConfigError(`Character count: ${a[0]}`);
this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n"), {
locale: closestAttributeValue(t, "lang")
- }), this.maxLength = null != (i = null != (n = this.config.maxwords) ? n : this.config.maxlength) ? i : 1 / 0, this.$module = t, this.$textarea = s;
+ }), this.maxLength = null != (n = null != (i = this.config.maxwords) ? i : this.config.maxlength) ? n : 1 / 0, this.$module = t, this.$textarea = s;
const l = `${this.$textarea.id}-info`,
c = document.getElementById(l);
if (!c) throw new ElementError({
@@ -401,8 +426,8 @@ class CharacterCount extends GOVUKFrontendComponent {
})), this.$textarea.insertAdjacentElement("afterend", c);
const h = document.createElement("div");
h.className = "govuk-character-count__sr-status govuk-visually-hidden", h.setAttribute("aria-live", "polite"), this.$screenReaderCountMessage = h, c.insertAdjacentElement("afterend", h);
- const d = document.createElement("div");
- d.className = c.className, d.classList.add("govuk-character-count__status"), d.setAttribute("aria-hidden", "true"), this.$visibleCountMessage = d, c.insertAdjacentElement("afterend", d), c.classList.add("govuk-visually-hidden"), this.$textarea.removeAttribute("maxlength"), this.bindChangeEvents(), window.addEventListener("pageshow", (() => this.updateCountMessage())), this.updateCountMessage()
+ const u = document.createElement("div");
+ u.className = c.className, u.classList.add("govuk-character-count__status"), u.setAttribute("aria-hidden", "true"), this.$visibleCountMessage = u, c.insertAdjacentElement("afterend", u), c.classList.add("govuk-visually-hidden"), this.$textarea.removeAttribute("maxlength"), this.bindChangeEvents(), window.addEventListener("pageshow", (() => this.updateCountMessage())), this.updateCountMessage()
}
bindChangeEvents() {
this.$textarea.addEventListener("keyup", (() => this.handleKeyUp())), this.$textarea.addEventListener("focus", (() => this.handleFocus())), this.$textarea.addEventListener("blur", (() => this.handleBlur()))
@@ -445,8 +470,8 @@ class CharacterCount extends GOVUKFrontendComponent {
}
formatCountMessage(t, e) {
if (0 === t) return this.i18n.t(`${e}AtLimit`);
- const i = t < 0 ? "OverLimit" : "UnderLimit";
- return this.i18n.t(`${e}${i}`, {
+ const n = t < 0 ? "OverLimit" : "UnderLimit";
+ return this.i18n.t(`${e}${n}`, {
count: Math.abs(t)
})
}
@@ -519,10 +544,10 @@ class Checkboxes extends GOVUKFrontendComponent {
syncConditionalRevealWithInputState(t) {
const e = t.getAttribute("aria-controls");
if (!e) return;
- const i = document.getElementById(e);
- if (i && i.classList.contains("govuk-checkboxes__conditional")) {
+ const n = document.getElementById(e);
+ if (n && n.classList.contains("govuk-checkboxes__conditional")) {
const e = t.checked;
- t.setAttribute("aria-expanded", e.toString()), i.classList.toggle("govuk-checkboxes__conditional--hidden", !e)
+ t.setAttribute("aria-expanded", e.toString()), n.classList.toggle("govuk-checkboxes__conditional--hidden", !e)
}
}
unCheckAllInputsExcept(t) {
@@ -550,12 +575,7 @@ class ErrorSummary extends GOVUKFrontendComponent {
element: t,
identifier: "Root element (`$module`)"
});
- this.$module = t, this.config = mergeConfigs(ErrorSummary.defaults, e, normaliseDataset(t.dataset)), this.setFocus(), this.$module.addEventListener("click", (t => this.handleClick(t)))
- }
- setFocus() {
- this.config.disableAutoFocus || (this.$module.setAttribute("tabindex", "-1"), this.$module.addEventListener("blur", (() => {
- this.$module.removeAttribute("tabindex")
- })), this.$module.focus())
+ this.$module = t, this.config = mergeConfigs(ErrorSummary.defaults, e, normaliseDataset(t.dataset)), this.config.disableAutoFocus || setFocus(this.$module), this.$module.addEventListener("click", (t => this.handleClick(t)))
}
handleClick(t) {
const e = t.target;
@@ -565,25 +585,25 @@ class ErrorSummary extends GOVUKFrontendComponent {
if (!(t instanceof HTMLAnchorElement)) return !1;
const e = getFragmentFromUrl(t.href);
if (!e) return !1;
- const i = document.getElementById(e);
- if (!i) return !1;
- const n = this.getAssociatedLegendOrLabel(i);
- return !!n && (n.scrollIntoView(), i.focus({
+ const n = document.getElementById(e);
+ if (!n) return !1;
+ const i = this.getAssociatedLegendOrLabel(n);
+ return !!i && (i.scrollIntoView(), n.focus({
preventScroll: !0
}), !0)
}
getAssociatedLegendOrLabel(t) {
var e;
- const i = t.closest("fieldset");
- if (i) {
- const e = i.getElementsByTagName("legend");
+ const n = t.closest("fieldset");
+ if (n) {
+ const e = n.getElementsByTagName("legend");
if (e.length) {
- const i = e[0];
- if (t instanceof HTMLInputElement && ("checkbox" === t.type || "radio" === t.type)) return i;
- const n = i.getBoundingClientRect().top,
+ const n = e[0];
+ if (t instanceof HTMLInputElement && ("checkbox" === t.type || "radio" === t.type)) return n;
+ const i = n.getBoundingClientRect().top,
s = t.getBoundingClientRect();
if (s.height && window.innerHeight) {
- if (s.top + s.height - n < window.innerHeight / 2) return i
+ if (s.top + s.height - i < window.innerHeight / 2) return n
}
}
}
@@ -600,16 +620,16 @@ class ExitThisPage extends GOVUKFrontendComponent {
element: t,
identifier: "Root element (`$module`)"
});
- const i = t.querySelector(".govuk-exit-this-page__button");
- if (!(i instanceof HTMLAnchorElement)) throw new ElementError({
+ const n = t.querySelector(".govuk-exit-this-page__button");
+ if (!(n instanceof HTMLAnchorElement)) throw new ElementError({
componentName: "Exit this page",
- element: i,
+ element: n,
expectedType: "HTMLAnchorElement",
identifier: "Button (`.govuk-exit-this-page__button`)"
});
- this.config = mergeConfigs(ExitThisPage.defaults, e, normaliseDataset(t.dataset)), this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n")), this.$module = t, this.$button = i;
- const n = document.querySelector(".govuk-js-exit-this-page-skiplink");
- n instanceof HTMLAnchorElement && (this.$skiplinkButton = n), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
+ this.config = mergeConfigs(ExitThisPage.defaults, e, normaliseDataset(t.dataset)), this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n")), this.$module = t, this.$button = n;
+ const i = document.querySelector(".govuk-js-exit-this-page-skiplink");
+ i instanceof HTMLAnchorElement && (this.$skiplinkButton = i), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
}
initUpdateSpan() {
this.$updateSpan = document.createElement("span"), this.$updateSpan.setAttribute("role", "status"), this.$updateSpan.className = "govuk-visually-hidden", this.$module.appendChild(this.$updateSpan)
@@ -674,24 +694,32 @@ class Header extends GOVUKFrontendComponent {
this.$module = t;
const e = t.querySelector(".govuk-js-header-toggle");
if (!e) return this;
- const i = e.getAttribute("aria-controls");
- if (!i) throw new ElementError({
+ const n = e.getAttribute("aria-controls");
+ if (!n) throw new ElementError({
componentName: "Header",
identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
});
- const n = document.getElementById(i);
- if (!n) throw new ElementError({
+ const i = document.getElementById(n);
+ if (!i) throw new ElementError({
componentName: "Header",
- element: n,
- identifier: `Navigation (\`<ul id="${i}">\`)`
+ element: i,
+ identifier: `Navigation (\`<ul id="${n}">\`)`
});
- this.$menu = n, this.$menuButton = e, this.mql = window.matchMedia("(min-width: 48.0625em)"), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.syncState())) : this.mql.addListener((() => this.syncState())), this.syncState(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+ this.$menu = i, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
}
- syncState() {
+ setupResponsiveChecks() {
+ const t = getBreakpoint("desktop");
+ if (!t.value) throw new ElementError({
+ componentName: "Header",
+ identifier: `CSS custom property (\`${t.property}\`) on pseudo-class \`:root\``
+ });
+ this.mql = window.matchMedia(`(min-width: ${t.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
+ }
+ checkMode() {
this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), this.$menuButton.setAttribute("hidden", "")) : (this.$menuButton.removeAttribute("hidden"), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
}
handleMenuButtonClick() {
- this.menuIsOpen = !this.menuIsOpen, this.syncState()
+ this.menuIsOpen = !this.menuIsOpen, this.checkMode()
}
}
Header.moduleName = "govuk-header";
@@ -702,12 +730,7 @@ class NotificationBanner extends GOVUKFrontendComponent {
element: t,
identifier: "Root element (`$module`)"
});
- this.$module = t, this.config = mergeConfigs(NotificationBanner.defaults, e, normaliseDataset(t.dataset)), this.setFocus()
- }
- setFocus() {
- this.config.disableAutoFocus || "alert" === this.$module.getAttribute("role") && (this.$module.getAttribute("tabindex") || (this.$module.setAttribute("tabindex", "-1"), this.$module.addEventListener("blur", (() => {
- this.$module.removeAttribute("tabindex")
- }))), this.$module.focus())
+ this.$module = t, this.config = mergeConfigs(NotificationBanner.defaults, e, normaliseDataset(t.dataset)), "alert" !== this.$module.getAttribute("role") || this.config.disableAutoFocus || setFocus(this.$module)
}
}
NotificationBanner.moduleName = "govuk-notification-banner", NotificationBanner.defaults = Object.freeze({
@@ -742,20 +765,20 @@ class Radios extends GOVUKFrontendComponent {
syncConditionalRevealWithInputState(t) {
const e = t.getAttribute("aria-controls");
if (!e) return;
- const i = document.getElementById(e);
- if (null != i && i.classList.contains("govuk-radios__conditional")) {
+ const n = document.getElementById(e);
+ if (null != n && n.classList.contains("govuk-radios__conditional")) {
const e = t.checked;
- t.setAttribute("aria-expanded", e.toString()), i.classList.toggle("govuk-radios__conditional--hidden", !e)
+ t.setAttribute("aria-expanded", e.toString()), n.classList.toggle("govuk-radios__conditional--hidden", !e)
}
}
handleClick(t) {
const e = t.target;
if (!(e instanceof HTMLInputElement) || "radio" !== e.type) return;
- const i = document.querySelectorAll('input[type="radio"][aria-controls]'),
- n = e.form,
+ const n = document.querySelectorAll('input[type="radio"][aria-controls]'),
+ i = e.form,
s = e.name;
- i.forEach((t => {
- const e = t.form === n;
+ n.forEach((t => {
+ const e = t.form === i;
t.name === s && e && this.syncConditionalRevealWithInputState(t)
}))
}
@@ -764,37 +787,38 @@ Radios.moduleName = "govuk-radios";
class SkipLink extends GOVUKFrontendComponent {
constructor(t) {
var e;
- if (super(), this.$module = void 0, this.$linkedElement = void 0, this.linkedElementListener = !1, !(t instanceof HTMLAnchorElement)) throw new ElementError({
+ if (super(), this.$module = void 0, !(t instanceof HTMLAnchorElement)) throw new ElementError({
componentName: "Skip link",
element: t,
expectedType: "HTMLAnchorElement",
identifier: "Root element (`$module`)"
});
this.$module = t;
- const i = this.$module.hash,
- n = null != (e = this.$module.getAttribute("href")) ? e : "";
+ const n = this.$module.hash,
+ i = null != (e = this.$module.getAttribute("href")) ? e : "";
let s;
try {
s = new window.URL(this.$module.href)
} catch (a) {
- throw new ElementError(`Skip link: Target link (\`href="${n}"\`) is invalid`)
+ throw new ElementError(`Skip link: Target link (\`href="${i}"\`) is invalid`)
}
if (s.origin !== window.location.origin || s.pathname !== window.location.pathname) return;
- const o = getFragmentFromUrl(i);
- if (!o) throw new ElementError(`Skip link: Target link (\`href="${n}"\`) has no hash fragment`);
+ const o = getFragmentFromUrl(n);
+ if (!o) throw new ElementError(`Skip link: Target link (\`href="${i}"\`) has no hash fragment`);
const r = document.getElementById(o);
if (!r) throw new ElementError({
componentName: "Skip link",
element: r,
identifier: `Target content (\`id="${o}"\`)`
});
- this.$linkedElement = r, this.$module.addEventListener("click", (() => this.focusLinkedElement()))
- }
- focusLinkedElement() {
- this.$linkedElement && (this.$linkedElement.getAttribute("tabindex") || (this.$linkedElement.setAttribute("tabindex", "-1"), this.$linkedElement.classList.add("govuk-skip-link-focused-element"), this.linkedElementListener || (this.$linkedElement.addEventListener("blur", (() => this.removeFocusProperties())), this.linkedElementListener = !0)), this.$linkedElement.focus())
- }
- removeFocusProperties() {
- this.$linkedElement && (this.$linkedElement.removeAttribute("tabindex"), this.$linkedElement.classList.remove("govuk-skip-link-focused-element"))
+ this.$module.addEventListener("click", (() => setFocus(r, {
+ onBeforeFocus() {
+ r.classList.add("govuk-skip-link-focused-element")
+ },
+ onBlur() {
+ r.classList.remove("govuk-skip-link-focused-element")
+ }
+ })))
}
}
SkipLink.moduleName = "govuk-skip-link";
@@ -816,20 +840,25 @@ class Tabs extends GOVUKFrontendComponent {
identifier: 'Links (`<a class="govuk-tabs__tab">`)'
});
this.$module = t, this.$tabs = e, this.boundTabClick = this.onTabClick.bind(this), this.boundTabKeydown = this.onTabKeydown.bind(this), this.boundOnHashChange = this.onHashChange.bind(this);
- const i = this.$module.querySelector(".govuk-tabs__list"),
- n = this.$module.querySelectorAll("li.govuk-tabs__list-item");
- if (!i) throw new ElementError({
+ const n = this.$module.querySelector(".govuk-tabs__list"),
+ i = this.$module.querySelectorAll("li.govuk-tabs__list-item");
+ if (!n) throw new ElementError({
componentName: "Tabs",
identifier: 'List (`<ul class="govuk-tabs__list">`)'
});
- if (!n.length) throw new ElementError({
+ if (!i.length) throw new ElementError({
componentName: "Tabs",
identifier: 'List items (`<li class="govuk-tabs__list-item">`)'
});
- this.$tabList = i, this.$tabListItems = n, this.setupResponsiveChecks()
+ this.$tabList = n, this.$tabListItems = i, this.setupResponsiveChecks()
}
setupResponsiveChecks() {
- this.mql = window.matchMedia("(min-width: 40.0625em)"), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
+ const t = getBreakpoint("tablet");
+ if (!t.value) throw new ElementError({
+ componentName: "Tabs",
+ identifier: `CSS custom property (\`${t.property}\`) on pseudo-class \`:root\``
+ });
+ this.mql = window.matchMedia(`(min-width: ${t.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
}
checkMode() {
var t;
@@ -857,8 +886,8 @@ class Tabs extends GOVUKFrontendComponent {
e = this.getTab(t);
if (!e) return;
if (this.changingHash) return void(this.changingHash = !1);
- const i = this.getCurrentTab();
- i && (this.hideTab(i), this.showTab(e), e.focus())
+ const n = this.getCurrentTab();
+ n && (this.hideTab(n), this.showTab(e), e.focus())
}
hideTab(t) {
this.unhighlightTab(t), this.hidePanel(t)
@@ -873,8 +902,8 @@ class Tabs extends GOVUKFrontendComponent {
const e = getFragmentFromUrl(t.href);
if (!e) return;
t.setAttribute("id", `tab_${e}`), t.setAttribute("role", "tab"), t.setAttribute("aria-controls", e), t.setAttribute("aria-selected", "false"), t.setAttribute("tabindex", "-1");
- const i = this.getPanel(t);
- i && (i.setAttribute("role", "tabpanel"), i.setAttribute("aria-labelledby", t.id), i.classList.add(this.jsHiddenClass))
+ const n = this.getPanel(t);
+ n && (n.setAttribute("role", "tabpanel"), n.setAttribute("aria-labelledby", t.id), n.classList.add(this.jsHiddenClass))
}
unsetAttributes(t) {
t.removeAttribute("id"), t.removeAttribute("role"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-selected"), t.removeAttribute("tabindex");
@@ -883,14 +912,14 @@ class Tabs extends GOVUKFrontendComponent {
}
onTabClick(t) {
const e = this.getCurrentTab(),
- i = t.currentTarget;
- e && i instanceof HTMLAnchorElement && (t.preventDefault(), this.hideTab(e), this.showTab(i), this.createHistoryEntry(i))
+ n = t.currentTarget;
+ e && n instanceof HTMLAnchorElement && (t.preventDefault(), this.hideTab(e), this.showTab(n), this.createHistoryEntry(n))
}
createHistoryEntry(t) {
const e = this.getPanel(t);
if (!e) return;
- const i = e.id;
- e.id = "", this.changingHash = !0, window.location.hash = i, e.id = i
+ const n = e.id;
+ e.id = "", this.changingHash = !0, window.location.hash = n, e.id = n
}
onTabKeydown(t) {
switch (t.keyCode) {
@@ -908,16 +937,16 @@ class Tabs extends GOVUKFrontendComponent {
if (null == t || !t.parentElement) return;
const e = t.parentElement.nextElementSibling;
if (!e) return;
- const i = e.querySelector("a.govuk-tabs__tab");
- i && (this.hideTab(t), this.showTab(i), i.focus(), this.createHistoryEntry(i))
+ const n = e.querySelector("a.govuk-tabs__tab");
+ n && (this.hideTab(t), this.showTab(n), n.focus(), this.createHistoryEntry(n))
}
activatePreviousTab() {
const t = this.getCurrentTab();
if (null == t || !t.parentElement) return;
const e = t.parentElement.previousElementSibling;
if (!e) return;
- const i = e.querySelector("a.govuk-tabs__tab");
- i && (this.hideTab(t), this.showTab(i), i.focus(), this.createHistoryEntry(i))
+ const n = e.querySelector("a.govuk-tabs__tab");
+ n && (this.hideTab(t), this.showTab(n), n.focus(), this.createHistoryEntry(n))
}
getPanel(t) {
const e = getFragmentFromUrl(t.href);
@@ -945,7 +974,7 @@ class Tabs extends GOVUKFrontendComponent {
function initAll(t) {
var e;
if (t = void 0 !== t ? t : {}, !isSupported()) return void console.log(new SupportError);
- const i = [
+ const n = [
[Accordion, t.accordion],
[Button, t.button],
[CharacterCount, t.characterCount],
@@ -958,13 +987,13 @@ function initAll(t) {
[SkipLink],
[Tabs]
],
- n = null != (e = t.scope) ? e : document;
- i.forEach((([t, e]) => {
- n.querySelectorAll(`[data-module="${t.moduleName}"]`).forEach((i => {
+ i = null != (e = t.scope) ? e : document;
+ n.forEach((([t, e]) => {
+ i.querySelectorAll(`[data-module="${t.moduleName}"]`).forEach((n => {
try {
- "defaults" in t ? new t(i, e) : new t(i)
- } catch (n) {
- console.log(n)
+ "defaults" in t ? new t(n, e) : new t(n)
+ } catch (i) {
+ console.log(i)
}
}))
}))
@@ -984,4 +1013,4 @@ export {
Tabs,
initAll,
version
-}; //# sourceMappingURL=govuk-frontend-5.0.0.min.js.map
\ No newline at end of file
+}; //# sourceMappingURL=govuk-frontend-5.1.0.min.js.map
\ No newline at end of file
Action run for 3ee36fd |
Stylesheets changes to GitHub releasediff --git a/dist/govuk-frontend-5.0.0.min.css b/dist/govuk-frontend-5.1.0.min.css
index 023b63ed5..1719cc124 100644
--- a/dist/govuk-frontend-5.0.0.min.css
+++ b/dist/govuk-frontend-5.1.0.min.css
@@ -1,7 +1,10 @@
@charset "UTF-8";
:root {
- --govuk-frontend-version: "5.0.0"
+ --govuk-frontend-version: "5.1.0";
+ --govuk-frontend-breakpoint-mobile: 20rem;
+ --govuk-frontend-breakpoint-tablet: 40.0625rem;
+ --govuk-frontend-breakpoint-desktop: 48.0625rem
}
.govuk-link {
@@ -2315,28 +2318,11 @@
}
.govuk-character-count__message {
- font-family: GDS Transport, arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-feature-settings: "tnum" 1;
- font-weight: 400;
+ font-variant-numeric: tabular-nums;
margin-top: 0;
margin-bottom: 0
}
-@media print {
- .govuk-character-count__message {
- font-family: sans-serif
- }
-}
-
-@supports (font-variant-numeric:tabular-nums) {
- .govuk-character-count__message {
- font-feature-settings: normal;
- font-variant-numeric: tabular-nums
- }
-}
-
.govuk-character-count__message:after {
content: ""
}
@@ -2478,12 +2464,10 @@
}
.govuk-checkboxes__item {
- display: block;
+ display: flex;
+ flex-wrap: wrap;
position: relative;
- min-height: 40px;
- margin-bottom: 10px;
- padding-left: 40px;
- clear: left
+ margin-bottom: 10px
}
.govuk-checkboxes__item:last-child,
@@ -2492,10 +2476,6 @@
}
.govuk-checkboxes__input {
- position: absolute;
- z-index: 1;
- top: -2px;
- left: -2px;
width: 44px;
height: 44px;
margin: 0;
@@ -2504,16 +2484,17 @@
}
.govuk-checkboxes__label {
- display: inline-block;
+ align-self: center;
+ max-width: calc(100% - 74px);
margin-bottom: 0;
- padding: 8px 15px 5px;
+ padding: 7px 15px;
cursor: pointer;
touch-action: manipulation
}
.govuk-checkboxes__label:before {
- top: 0;
- left: 0;
+ top: 2px;
+ left: 2px;
width: 40px;
height: 40px;
border: 2px solid
@@ -2528,8 +2509,8 @@
}
.govuk-checkboxes__label:after {
- top: 11px;
- left: 9px;
+ top: 13px;
+ left: 10px;
width: 23px;
height: 12px;
transform: rotate(-45deg);
@@ -2541,8 +2522,14 @@
.govuk-checkboxes__hint {
display: block;
+ width: 100%;
+ margin-top: -5px;
padding-right: 15px;
- padding-left: 15px
+ padding-left: 59px
+}
+
+.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.govuk-checkboxes__hint {
+ margin-bottom: 0
}
.govuk-checkboxes__input:focus+.govuk-checkboxes__label:before {
@@ -2624,47 +2611,28 @@ screen and (forced-colors:active) {
display: none
}
+.govuk-checkboxes--small .govuk-checkboxes__item,
.govuk-checkboxes__conditional>:last-child {
margin-bottom: 0
}
-.govuk-checkboxes--small .govuk-checkboxes__item {
- min-height: 0;
- margin-bottom: 0;
- padding-left: 34px;
- float: left
-}
-
-.govuk-checkboxes--small .govuk-checkboxes__item:after {
- content: "";
- display: block;
- clear: both
-}
-
.govuk-checkboxes--small .govuk-checkboxes__input {
- left: -10px
+ margin-left: -10px
}
.govuk-checkboxes--small .govuk-checkboxes__label {
- margin-top: -2px;
- padding: 13px 15px 13px 1px;
- float: left
-}
-
-@media (min-width:40.0625em) {
- .govuk-checkboxes--small .govuk-checkboxes__label {
- padding: 11px 15px 10px 1px
- }
+ padding-left: 1px
}
.govuk-checkboxes--small .govuk-checkboxes__label:before {
- top: 8px;
+ top: 10px;
+ left: 0;
width: 24px;
height: 24px
}
.govuk-checkboxes--small .govuk-checkboxes__label:after {
- top: 15px;
+ top: 17px;
left: 6px;
width: 12px;
height: 6.5px;
@@ -2672,14 +2640,12 @@ screen and (forced-colors:active) {
}
.govuk-checkboxes--small .govuk-checkboxes__hint {
- padding: 0;
- clear: both
+ padding-left: 34px
}
.govuk-checkboxes--small .govuk-checkboxes__conditional {
margin-left: 10px;
- padding-left: 20px;
- clear: both
+ padding-left: 20px
}
.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled)+.govuk-checkboxes__label:before {
@@ -2802,27 +2768,10 @@ screen and (forced-colors:active) {
}
.govuk-input--extra-letter-spacing {
- font-family: GDS Transport, arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-feature-settings: "tnum" 1;
- font-weight: 400;
+ font-variant-numeric: tabular-nums;
letter-spacing: .05em
}
-@media print {
- .govuk-input--extra-letter-spacing {
- font-family: sans-serif
- }
-}
-
-@supports (font-variant-numeric:tabular-nums) {
- .govuk-input--extra-letter-spacing {
- font-feature-settings: normal;
- font-variant-numeric: tabular-nums
- }
-}
-
.govuk-input--width-30 {
max-width: 29.5em
}
@@ -2882,7 +2831,9 @@ screen and (forced-colors:active) {
font-size: 1rem;
line-height: 1.25;
box-sizing: border-box;
- display: inline-block;
+ display: flex;
+ align-items: center;
+ justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 5px;
@@ -2920,14 +2871,6 @@ screen and (forced-colors:active) {
}
}
-@media (max-width:40.0525em) {
-
- .govuk-input__prefix,
- .govuk-input__suffix {
- line-height: 1.6
- }
-}
-
@media (max-width:19.99em) {
.govuk-input__prefix,
@@ -3879,7 +3822,7 @@ only screen and (min-resolution:2dppx) {
.govuk-header__logo {
margin-bottom: 10px;
- padding-right: 50px
+ padding-right: 80px
}
@media (min-width:48.0625em) {
@@ -3911,13 +3854,16 @@ only screen and (min-resolution:2dppx) {
font-size: .875rem;
line-height: 1.1428571429;
position: absolute;
- top: 20px;
+ top: 13px;
right: 0;
+ max-width: 80px;
+ min-height: 24px;
margin: 0;
padding: 0;
border: 0;
color: #fff;
background: none;
+ word-break: break-all;
cursor: pointer
}
@@ -4857,12 +4803,10 @@ only screen and (min-resolution:2dppx) {
}
.govuk-radios__item {
- display: block;
+ display: flex;
+ flex-wrap: wrap;
position: relative;
- min-height: 40px;
- margin-bottom: 10px;
- padding-left: 40px;
- clear: left
+ margin-bottom: 10px
}
.govuk-radios__item:last-child,
@@ -4871,10 +4815,6 @@ only screen and (min-resolution:2dppx) {
}
.govuk-radios__input {
- position: absolute;
- z-index: 1;
- top: -2px;
- left: -2px;
width: 44px;
height: 44px;
margin: 0;
@@ -4883,9 +4823,10 @@ only screen and (min-resolution:2dppx) {
}
.govuk-radios__label {
- display: inline-block;
+ align-self: center;
+ max-width: calc(100% - 74px);
margin-bottom: 0;
- padding: 8px 15px 5px;
+ padding: 7px 15px;
cursor: pointer;
touch-action: manipulation
}
@@ -4894,8 +4835,8 @@ only screen and (min-resolution:2dppx) {
content: "";
box-sizing: border-box;
position: absolute;
- top: 0;
- left: 0;
+ top: 2px;
+ left: 2px;
width: 40px;
height: 40px;
border: 2px solid;
@@ -4906,8 +4847,8 @@ only screen and (min-resolution:2dppx) {
.govuk-radios__label:after {
content: "";
position: absolute;
- top: 10px;
- left: 10px;
+ top: 12px;
+ left: 12px;
width: 0;
height: 0;
border: 10px solid;
@@ -4918,8 +4859,14 @@ only screen and (min-resolution:2dppx) {
.govuk-radios__hint {
display: block;
+ width: 100%;
+ margin-top: -5px;
padding-right: 15px;
- padding-left: 15px
+ padding-left: 59px
+}
+
+.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.govuk-radios__hint {
+ margin-bottom: 0
}
.govuk-radios__input:focus+.govuk-radios__label:before {
@@ -4951,16 +4898,14 @@ screen and (forced-colors:active) {
}
@media (min-width:40.0625em) {
- .govuk-radios--inline:after {
- content: "";
- display: block;
- clear: both
+ .govuk-radios--inline {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start
}
.govuk-radios--inline .govuk-radios__item {
- margin-right: 20px;
- float: left;
- clear: none
+ margin-right: 20px
}
}
@@ -5015,61 +4960,39 @@ screen and (forced-colors:active) {
display: none
}
+.govuk-radios--small .govuk-radios__item,
.govuk-radios__conditional>:last-child {
margin-bottom: 0
}
-.govuk-radios--small .govuk-radios__item {
- min-height: 0;
- margin-bottom: 0;
- padding-left: 34px;
- float: left
-}
-
-.govuk-radios--small .govuk-radios__item:after {
- content: "";
- display: block;
- clear: both
-}
-
.govuk-radios--small .govuk-radios__input {
- left: -10px
+ margin-left: -10px
}
.govuk-radios--small .govuk-radios__label {
- margin-top: -2px;
- padding: 13px 15px 13px 1px;
- float: left
-}
-
-@media (min-width:40.0625em) {
- .govuk-radios--small .govuk-radios__label {
- padding: 11px 15px 10px 1px
- }
+ padding-left: 1px
}
.govuk-radios--small .govuk-radios__label:before {
- top: 8px;
+ top: 10px;
+ left: 0;
width: 24px;
height: 24px
}
.govuk-radios--small .govuk-radios__label:after {
- top: 15px;
+ top: 17px;
left: 7px;
border-width: 5px
}
.govuk-radios--small .govuk-radios__hint {
- padding: 0;
- clear: both;
- pointer-events: none
+ padding-left: 34px
}
.govuk-radios--small .govuk-radios__conditional {
margin-left: 10px;
- padding-left: 20px;
- clear: both
+ padding-left: 20px
}
.govuk-radios--small .govuk-radios__divider {
@@ -5687,24 +5610,7 @@ screen and (-ms-high-contrast:active) {
}
.govuk-table__cell--numeric {
- font-family: GDS Transport, arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-feature-settings: "tnum" 1;
- font-weight: 400
-}
-
-@media print {
- .govuk-table__cell--numeric {
- font-family: sans-serif
- }
-}
-
-@supports (font-variant-numeric:tabular-nums) {
- .govuk-table__cell--numeric {
- font-feature-settings: normal;
- font-variant-numeric: tabular-nums
- }
+ font-variant-numeric: tabular-nums
}
.govuk-table__cell--numeric,
@@ -7694,4 +7600,4 @@ screen and (-ms-high-contrast:active) {
}
}
-/*# sourceMappingURL=govuk-frontend-5.0.0.min.css.map */
\ No newline at end of file
+/*# sourceMappingURL=govuk-frontend-5.1.0.min.css.map */
\ No newline at end of file
Action run for 3ee36fd |
Other changes to GitHub releasediff --git a/dist/VERSION.txt b/dist/VERSION.txt
index 0062ac971..831446cbd 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-5.0.0
+5.1.0
diff --git a/dist/assets/images/favicon.ico b/dist/assets/images/favicon.ico
index 28004dd3f..20129a0bb 100644
Binary files a/dist/assets/images/favicon.ico and b/dist/assets/images/favicon.ico differ
diff --git a/dist/assets/images/favicon.svg b/dist/assets/images/favicon.svg
index a420392d2..67d7ef919 100644
--- a/dist/assets/images/favicon.svg
+++ b/dist/assets/images/favicon.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
- <path fill="#000000" d="M0 0h32v32H0z"/>
- <path fill="#ffffff" d="M7.28 11.44c.77.32 1.64-.05 1.95-.8.31-.76-.05-1.64-.81-1.95-.75-.31-1.63.06-1.94.82-.31.76.05 1.63.8 1.94M3.9 13.42c.77.32 1.64-.05 1.95-.8.31-.76-.05-1.64-.81-1.95-.75-.31-1.63.06-1.94.82-.31.76.05 1.63.8 1.94M2.91 17.18c.77.32 1.64-.05 1.95-.8.31-.76-.05-1.64-.81-1.95-.75-.31-1.63.06-1.94.82-.31.76.05 1.63.8 1.94M11.05 12.63c.77.32 1.64-.05 1.95-.8.31-.76-.05-1.64-.81-1.95-.75-.31-1.63.06-1.94.82-.31.76.05 1.63.8 1.94M24.72 11.44a1.49 1.49 0 0 1-1.95-.8c-.31-.76.05-1.64.81-1.95.75-.31 1.63.06 1.94.82.31.76-.05 1.63-.8 1.94M28.1 13.42a1.49 1.49 0 0 1-1.95-.8c-.31-.76.05-1.64.81-1.95.75-.31 1.63.06 1.94.82.31.76-.05 1.63-.8 1.94M29.09 17.18a1.49 1.49 0 0 1-1.95-.8c-.31-.76.05-1.64.81-1.95.75-.31 1.63.06 1.94.82.31.76-.05 1.63-.8 1.94M20.95 12.63a1.49 1.49 0 0 1-1.95-.8c-.31-.76.05-1.64.81-1.95.75-.31 1.63.06 1.94.82.31.76-.05 1.63-.8 1.94M16.79 8.78l1.89.99V6.99l-1.88.6a.656.656 0 0 0-.18-.19s.76-2.39.76-2.39h-2.72l.76 2.39c-.07.06-.13.12-.18.19S13.36 7 13.36 7v2.78l1.89-.99c.06.08.12.14.2.2l-1.08 3.27v.01c-.05.16-.08.34-.08.52 0 .88.65 1.61 1.5 1.74h.04c.07 0 .15.02.22.02s.15 0 .22-.02h.04c.85-.13 1.5-.86 1.5-1.74 0-.18-.03-.35-.08-.52v-.01l-1.08-3.27c.07-.06.14-.12.2-.19M16 24.77c3.58 0 6.97.24 9.99.67.86-3.61 1.9-5.67 2.98-7.14l-2.03-.72c.2 1.03.23 1.51 0 2.17-.33-.33-.65-.93-.9-1.85l-.98 3.27c.6-.41 1.06-.68 1.59-.69-.94 2.02-2.1 2.53-2.86 2.39-.92-.17-1.35-.99-1.21-1.69.21-.99 1.23-1.25 1.71-.1.91-1.85-.63-2.43-1.62-1.88 1.52-1.52 1.7-2.87.47-4.51-1.71 1.31-1.73 2.61-.96 4.43-1-1.15-2.56-.53-2 1.32.72-1.12 1.68-.41 1.53.65-.13.92-1.35 1.67-2.87 1.54-2.18-.2-2.31-1.7-2.36-2.95.54-.1 1.5.4 2.32 1.55l.3-3.47c-.89.93-1.71 1.11-2.61 1.14.3-.94 1.68-2.47 1.68-2.47h-4.33s1.38 1.54 1.68 2.47c-.9-.03-1.72-.21-2.61-1.14l.3 3.47c.82-1.15 1.79-1.65 2.32-1.55-.05 1.24-.18 2.75-2.36 2.95-1.52.13-2.74-.61-2.87-1.54-.15-1.06.81-1.76 1.53-.65.56-1.85-1-2.47-2-1.32.77-1.83.75-3.12-.96-4.43-1.23 1.63-1.06 2.99.47 4.51-.99-.55-2.53.03-1.62 1.88.47-1.15 1.49-.89 1.71.1.14.7-.28 1.52-1.21 1.69-.76.14-1.93-.38-2.86-2.39.53.01.99.28 1.59.69l-.98-3.27c-.25.92-.56 1.52-.9 1.85-.23-.66-.19-1.14 0-2.17l-2.03.72c1.08 1.47 2.12 3.54 2.98 7.14 3.02-.43 6.41-.67 9.99-.67"/>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0b0c0c" d="M0 0h32v32H0z"/><path fill="#fff" d="m16.88 7.87 2.11 1.1V5.86l-2.11.67c-.06-.08-.13-.15-.2-.21s.85-2.68.85-2.68h-3.04l.85 2.67c-.08.07-.15.14-.2.21s-2.11-.66-2.11-.66v3.11l2.11-1.11c.06.09.14.16.22.22l-1.21 3.66v.01c0 .01 0 0 0 0-.06.18-.09.38-.09.58 0 .99.73 1.81 1.68 1.95h.04c.08.01.16.02.25.02.08 0 .17 0 .25-.02h.04c.95-.14 1.68-.96 1.68-1.95 0-.2-.03-.39-.09-.58s0 0 0-.01L16.7 8.08c.08-.06.16-.13.22-.22M9.16 12.3a1.75 1.75 0 1 0 1.52-3.15c-.86-.41-1.91-.04-2.33.83s-.05 1.91.81 2.32M4.82 15.87c.9.37 1.92-.05 2.29-.94s-.05-1.92-.95-2.29c-.88-.36-1.91.07-2.28.96s.06 1.91.94 2.27M22.86 12.3a1.75 1.75 0 1 1-1.52-3.15c.86-.41 1.91-.04 2.33.83s.05 1.91-.81 2.32M27.18 15.84c-.9.37-1.92-.05-2.29-.94s.05-1.92.95-2.29c.88-.36 1.91.07 2.28.96s-.06 1.91-.94 2.27M16 25.68c3.59 0 6.99.24 10.02.68.86-3.61 1.91-5.68 2.99-7.16l-2.03-.72c.2 1.03.23 1.51 0 2.18-.34-.33-.65-.93-.9-1.85l-.99 3.28c.6-.41 1.06-.68 1.59-.69-.94 2.02-2.11 2.54-2.87 2.4-.93-.17-1.35-1-1.21-1.7.21-.99 1.23-1.25 1.71-.1.91-1.86-.63-2.44-1.63-1.89 1.53-1.52 1.7-2.88.47-4.52-1.72 1.31-1.74 2.61-.97 4.44-1-1.15-2.56-.53-2 1.32.72-1.12 1.68-.42 1.53.65-.13.93-1.35 1.68-2.87 1.54-2.18-.2-2.31-1.71-2.37-2.95.54-.1 1.5.4 2.33 1.56l.3-3.48c-.9.93-1.71 1.11-2.62 1.14.3-.94 1.69-2.48 1.69-2.48h-4.34s1.38 1.54 1.69 2.48c-.91-.03-1.72-.21-2.62-1.14l.3 3.48c.82-1.16 1.79-1.66 2.33-1.56-.05 1.25-.18 2.75-2.37 2.95-1.52.13-2.75-.62-2.87-1.54-.15-1.06.81-1.77 1.53-.65.56-1.85-1-2.47-2-1.32.77-1.83.75-3.13-.97-4.44-1.23 1.64-1.06 2.99.47 4.52-.99-.55-2.54.03-1.63 1.89.48-1.16 1.5-.9 1.71.1.14.7-.28 1.53-1.21 1.7-.76.14-1.93-.38-2.87-2.4.53.01.99.28 1.59.69l-.99-3.28c-.25.92-.57 1.52-.9 1.85-.23-.66-.19-1.14 0-2.18l-2.03.72c1.08 1.47 2.13 3.54 2.99 7.16 3.03-.43 6.42-.68 10.01-.68"/></svg>
diff --git a/dist/assets/images/govuk-icon-180.png b/dist/assets/images/govuk-icon-180.png
index c9f597874..7c33beba8 100644
Binary files a/dist/assets/images/govuk-icon-180.png and b/dist/assets/images/govuk-icon-180.png differ
diff --git a/dist/assets/images/govuk-icon-192.png b/dist/assets/images/govuk-icon-192.png
index cf4acb736..35e51d7a7 100644
Binary files a/dist/assets/images/govuk-icon-192.png and b/dist/assets/images/govuk-icon-192.png differ
diff --git a/dist/assets/images/govuk-icon-512.png b/dist/assets/images/govuk-icon-512.png
index e201301e4..f5eb6f461 100644
Binary files a/dist/assets/images/govuk-icon-512.png and b/dist/assets/images/govuk-icon-512.png differ
diff --git a/dist/assets/images/govuk-icon-mask.svg b/dist/assets/images/govuk-icon-mask.svg
index f9acce6b7..e10ff6cc3 100644
--- a/dist/assets/images/govuk-icon-mask.svg
+++ b/dist/assets/images/govuk-icon-mask.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97">
- <path fill="#000000" d="M25 30.2C28.5 31.7 32.7 30 34.1 26.5 35.6 22.9 33.9 18.7 30.2 17.3 26.6 15.9 22.6 17.6 21.1 21.2 19.7 24.7 21.4 28.7 25 30.2L25 30.2ZM9 39.5C12.6 41 16.8 39.3 18.2 35.8 19.7 32.2 18 28 14.3 26.7 10.7 25.2 6.7 26.9 5.2 30.5 3.8 34 5.5 38 9 39.5L9 39.5ZM4.4 57.2C7.9 58.7 12.1 57 13.5 53.4 15 49.8 13.3 45.7 9.6 44.3 6.1 42.8 2 44.6 0.5 48.1 -0.9 51.6 0.8 55.7 4.4 57.2L4.4 57.2ZM42.7 35.8C46.2 37.3 50.4 35.6 51.8 32 53.3 28.4 51.6 24.3 47.9 22.9 44.3 21.4 40.3 23.2 38.8 26.7 37.5 30.3 39.2 34.4 42.7 35.8L42.7 35.8ZM107.1 30.2C103.5 31.7 99.3 30 98 26.5 96.5 22.9 98.2 18.7 101.8 17.3 105.4 15.9 109.5 17.6 111 21.2 112.3 24.7 110.6 28.7 107.1 30.2L107.1 30.2ZM123 39.5C119.4 41 115.3 39.3 113.9 35.8 112.4 32.2 114.1 28 117.6 26.7 121.2 25.2 125.3 26.9 126.8 30.5 128.3 34 126.5 38 123 39.5L123 39.5ZM127.7 57.2C124.1 58.7 119.9 57 118.5 53.4 117 49.8 118.7 45.7 122.4 44.3 126 42.8 130.1 44.6 131.6 48.1 132.9 51.6 131.2 55.7 127.7 57.2L127.7 57.2ZM89.3 35.8C85.7 37.3 81.5 35.6 80.1 32 78.7 28.4 80.3 24.3 84 22.9 87.6 21.4 91.7 23.2 93.2 26.7 94.6 30.3 92.9 34.4 89.3 35.8L89.3 35.8ZM69.7 17.7L69.7 17.7 78.6 22.4 78.6 9.3 69.7 12.1 69.7 12.1C69.5 11.8 69.2 11.5 68.8 11.2L68.8 11.2 72.4 0 66 0 59.6 0 63.1 11.2 63.1 11.2C62.8 11.5 62.5 11.7 62.2 12.1L62.2 12.1 53.4 9.3 53.4 22.4 62.2 17.7 62.2 17.7C62.5 18 62.8 18.4 63.1 18.6L58.1 34C58.1 34 58.1 34 58.1 34.1L58.1 34.1 58.1 34.1C57.9 34.9 57.7 35.7 57.7 36.5 57.7 40.6 60.8 44 64.7 44.6L64.9 44.6C65.2 44.6 65.6 44.7 65.9 44.7 66.3 44.7 66.6 44.7 66.9 44.6L67.1 44.6C71.1 44 74.2 40.5 74.2 36.5 74.2 35.7 74.1 34.8 73.8 34.1L73.8 34.1 73.8 34.1C73.8 34.1 73.8 34.1 73.8 34L68.7 18.6C69.1 18.4 69.4 18 69.7 17.7L69.7 17.7ZM66 92.8C82.9 92.8 98.8 93.9 113.1 96 117.1 79.1 122 69.3 127.1 62.5L117.5 59.1C118.5 64 118.6 66.3 117.5 69.3 116 67.9 114.5 65 113.3 60.6L108.6 76C111.4 74 113.6 72.8 116.1 72.7 111.7 82.1 106.1 84.6 102.5 83.9 98.2 83.1 96.2 79.3 96.9 76 97.9 71.3 102.6 70.1 104.9 75.5 109.2 66.8 101.9 64.1 97.3 66.7 104.4 59.5 105.2 53.2 99.4 45.6 91.4 51.7 91.3 57.9 94.9 66.4 90.2 61 82.8 63.9 85.4 72.6 88.8 67.4 93.3 70.6 92.6 75.7 92 80 86.2 83.5 79.1 82.9 68.8 82 68.2 74.9 67.9 69.1 70.4 68.6 75 70.9 78.9 76.4L80.2 60C76.1 64.4 72.2 65.3 67.9 65.4 69.3 61 75.9 53.8 75.9 53.8L66.4 53.8 66.4 53.8 66.4 53.8 55.5 53.8C55.5 53.8 61.9 61 63.4 65.4 59.2 65.3 55.4 64.4 51.1 60L52.5 76.4C56.4 70.9 61 68.7 63.4 69.1 63.1 74.9 62.5 81.9 52.3 82.9 45.1 83.5 39.4 80 38.8 75.7 38.1 70.7 42.6 67.4 45.9 72.6 48.6 63.9 41.3 61 36.5 66.4 40.2 57.9 40.1 51.7 31.9 45.6 26.1 53.2 26.9 59.5 34.1 66.7 29.4 64.1 22.2 66.8 26.4 75.5 28.7 70 33.5 71.3 34.5 76 35.2 79.3 33.2 83.1 28.8 83.9 25.3 84.6 19.8 82.1 15.3 72.7 17.8 72.8 20 74 22.8 76L18.1 60.6C16.9 65 15.4 67.8 13.8 69.3 12.7 66.3 12.9 64 13.8 59.1L4.3 62.5C9.3 69.4 14.2 79.2 18.3 96 33.1 93.9 49.1 92.8 66 92.8L66 92.8Z"/>
-</svg>
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m0 0v512h512v-512zm415.76 238.55c11.12-4.56 24.05.88 28.67 12.11 4.63 11.17-.72 24.05-11.85 28.61-11.34 4.68-24.21-.67-28.83-11.88-4.65-11.18.67-24.18 12.01-28.84zm-39.05-58.11c11.12-4.56 24.05.89 28.68 12.12 4.62 11.17-.73 24.04-11.85 28.6-11.34 4.68-24.21-.67-28.83-11.88-4.65-11.18.67-24.18 12-28.84zm-58.98-35.19c11.12-4.57 24.05.88 28.67 12.11 4.62 11.17-.72 24.04-11.85 28.6-11.34 4.68-24.21-.67-28.84-11.88-4.64-11.18.67-24.18 12.01-28.83zm-101.34-55.92 27.83 8.81.09-.08c.77-1.03 1.68-1.94 2.7-2.73l.08-.08-11.2-35.25h20.12s20.12 0 20.12 0l-11.2 35.25.08.08c1.02.79 1.93 1.7 2.7 2.73l.08.08 27.84-8.81v41.08l-27.87-14.63-.06.06c-.83 1.08-1.8 2.04-2.88 2.86l16 48.28c.02.06.05.12.06.18l.02.05c.74 2.42 1.14 4.98 1.14 7.63 0 13.06-9.65 23.85-22.19 25.7-.18.03-.37.06-.55.08-1.07.14-2.16.23-3.26.23-1.11 0-2.19-.09-3.26-.23-.19-.02-.38-.06-.56-.08-12.55-1.85-22.19-12.63-22.19-25.7 0-2.65.4-5.21 1.15-7.62s.01-.06.01-.06c.02-.06.04-.12.06-.18l16.01-48.28c-1.09-.81-2.06-1.77-2.88-2.86l-.06-.06-27.87 14.63v-41.08zm48.11 174.62c-11.34 4.68-24.21-.67-28.84-11.88-4.64-11.18.67-24.18 12.01-28.83 11.12-4.57 24.05.88 28.67 12.11 4.62 11.17-.72 24.04-11.85 28.6zm-99.28-106.59c4.62-11.23 17.55-16.68 28.67-12.11 11.34 4.65 16.65 17.65 12.01 28.83-4.62 11.21-17.49 16.56-28.84 11.88-11.12-4.56-16.47-17.44-11.85-28.6zm-58.99 35.2c4.63-11.22 17.55-16.68 28.68-12.12 11.34 4.65 16.65 17.65 12 28.84-4.62 11.21-17.49 16.56-28.83 11.88-11.12-4.56-16.48-17.44-11.85-28.6zm-39.04 58.11c4.62-11.23 17.55-16.68 28.67-12.11 11.34 4.65 16.66 17.65 12.01 28.84-4.62 11.21-17.49 16.56-28.83 11.88-11.13-4.55-16.47-17.43-11.85-28.61zm335.98 169.34c-44.5-6.37-94.44-9.94-147.21-9.94s-102.66 3.57-147.14 9.93c-12.63-53.1-28-83.53-43.87-105.19l29.89-10.64c-2.97 15.18-3.45 22.24-.12 32 4.93-4.82 9.6-13.68 13.25-27.23l14.49 48.23c-8.82-6.07-15.61-9.99-23.39-10.17 13.79 29.7 31.01 37.34 42.17 35.28 13.62-2.5 19.89-14.65 17.78-24.95-3.13-14.6-18.12-18.41-25.12-1.42-13.39-27.31 9.32-35.81 23.93-27.73-22.44-22.39-25.01-42.29-6.89-66.38 25.24 19.3 25.54 38.41 14.18 65.3 14.74-16.87 37.68-7.81 29.4 19.45-10.64-16.46-24.71-6.1-22.5 9.53 1.87 13.62 19.85 24.62 42.25 22.68 32.1-2.91 34.01-25.06 34.81-43.39-7.89-1.46-22.1 5.86-34.22 22.87l-4.46-51.16c13.18 13.74 25.16 16.35 38.46 16.77-4.43-13.82-24.78-36.46-24.78-36.46h63.85s-20.35 22.64-24.78 36.46c13.3-.42 25.28-3.03 38.46-16.77l-4.46 51.16c-12.11-17.01-26.32-24.33-34.21-22.87.8 18.34 2.71 40.48 34.81 43.39 22.39 1.95 40.38-9.05 42.25-22.68 2.21-15.63-11.86-25.99-22.49-9.53-8.29-27.26 14.65-36.32 29.39-19.45-11.36-26.89-11.07-46 14.18-65.3 18.12 24.08 15.55 43.99-6.9 66.38 14.62-8.08 37.32.43 23.94 27.73-7-16.99-21.98-13.18-25.12 1.42-2.11 10.3 4.15 22.46 17.77 24.95 11.16 2.06 28.38-5.58 42.17-35.28-7.77.18-14.57 4.11-23.38 10.17l14.48-48.23c3.65 13.55 8.32 22.41 13.25 27.23 3.33-9.76 2.85-16.82-.12-32l29.89 10.64c-15.88 21.66-31.25 52.09-43.88 105.2z"/></svg>
\ No newline at end of file
diff --git a/dist/assets/images/govuk-opengraph-image.png b/dist/assets/images/govuk-opengraph-image.png
index 355284fbf..4d0e312ff 100644
Binary files a/dist/assets/images/govuk-opengraph-image.png and b/dist/assets/images/govuk-opengraph-image.png differ
Action run for 3ee36fd |
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 3ee36fd |
querkmachine
force-pushed
the
release-5.1.0
branch
from
7271e76
to
3ee36fd
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4734
owenatgov
approved these changes
Feb 5, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
GOV.UK Frontend v5.1.0 (Feature release)
To install this version with npm, run
npm install govuk-frontend@5.1.0. You can also find more information about how to stay up to date in our documentation.New features
Update to the new GOV.UK logo
The GOV.UK logo has been updated to reflect the changing of the monarch. King Charles III uses the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II.
If your service uses GOV.UK branding, you must update your service between 19 February and 1 March 2024 to use the new logo.
These changes were made in the following pull requests:
Include the new logo assets
Multiple new image assets are included in this release. You’ll need to copy these to your service's image assets folder if they’re not being used directly from the Frontend package. By default this folder is located at
/assets/images.If you’re using Nunjucks, the asset path may have been changed by the
assetPathglobal variable orassetsPathparameter on the header component.Copy the following files from
/dist/assets/imagesinto your assets folder. Any images with the same name as an existing image can be safely overwritten.Update the logo in the header of your page
If you’re using the
govukHeaderNunjucks macro in your service, add theuseTudorCrownparameter to the macro instantiation. This will become the default in a future version of GOV.UK Frontend.If you’re not using the Nunjucks macro, locate the SVG code for the existing logo and replace it with this updated SVG.
Add attributes to component form group wrappers
You can now add attributes to the form group wrapper for all components with form fields.
govukRadios({ formGroup: { attributes: { "data-attribute": "value" } } })This change was introduced in pull request #4565: Allow
attributesoption on form groups.Use tabular numbers with the
govuk-font-tabular-numbersmixinYou can now use tabular numbers in your authored Sass by including the new
govuk-font-tabular-numbersmixin.Previously, you’d use the
govuk-fontmixin with the$tabularparameter. However, thegovuk-fontmixin includes styles unrelated to tabular numbers, which are not needed in some contexts.These additional styles are not included if you use
govuk-font-tabular-numbers. Switching to the new mixin can reduce the size of your compiled CSS without affecting the appearance of pages.This change was introduced in pull request #4307: Refactor tabular number activation into their own mixin.
Recommended changes
Replace instances of
govuk-typography-responsivewithgovuk-font-sizeWe've renamed the Sass mixin
govuk-typography-responsivetogovuk-font-sizeand have deprecatedgovuk-typography-responsive. You can still usegovuk-typography-responsive, but we'll remove it in a future breaking release (GOV.UK Frontend v6.0.0).This is an experimental change to see if the name
govuk-font-sizebetter communicates the Sass mixin's intended use than the namegovuk-typography-responsive.We're interested in feedback from the community on this name change, so please let us know what you think through our usual channels.
This change was introduced in pull request #4291: Rename
govuk-typography-responsivetogovuk-font-size.Remove the
aria-labelledbyattribute from accordion sectionsIf you’re not using our Nunjucks macros, remove the
aria-labelledbyattribute from all accordion sections (divelements that have thegovuk-accordion__section-contentclass).This change was introduced in pull request #4628: Remove
aria-labelledbyfrom accordion sections.Deprecated features
Stop using the
elementparameter on buttonsWe’ve deprecated the
elementNunjucks parameter and will remove it in the next major release.In the future, if the
hrefparameter is set the component will automatically use the<a>element. If thehrefparameter is not set the component will automatically use the<button>element. It will not be possible to override this change.This change was introduced in pull request #4646: Deprecate
elementparameter on button component.Stop using
govuk-body-xs,govuk-!-font-size-14and '14' on the type scaleWe’ve deprecated point 14 (14px large screens, 12px small screens) on the GOV.UK Frontend responsive type scale, including font override classes that use point 14:
govuk-body-xsgovuk-!-font-size-14We’ll remove these classes and point 14 on the type scale in the next major release, GOV.UK Frontend release v6.0.0. With this change in the v6.0.0 release, you’ll no longer be able to call the Sass mixins
govuk-fontorgovuk-font-sizewith$sizeset to '14'.This change was introduced in #4649: Deprecate 14 on the type scale and #4713: Ensure
govuk-font-size()handles string keys.Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
matchMedia()