-
Notifications
You must be signed in to change notification settings - Fork 338
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update name and description of macro options in docs and code #5702
Merged
romaricpascal
merged 8 commits into
spike-enhanced-file-upload
from
file-upload-macro-options-docs
Feb 10, 2025
Merged
Update name and description of macro options in docs and code #5702
romaricpascal
merged 8 commits into
spike-enhanced-file-upload
from
file-upload-macro-options-docs
Feb 10, 2025
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
10a7ec7
to
9712c55
Compare
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 64ce299 |
JavaScript changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 1f43c3b1b..69d19059f 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -13,20 +13,20 @@ function getBreakpoint(t) {
}
function setFocus(t, e = {}) {
- var i;
- const n = t.getAttribute("tabindex");
+ var n;
+ const i = t.getAttribute("tabindex");
function onBlur() {
- var i;
- null == (i = e.onBlur) || i.call(t), n || t.removeAttribute("tabindex")
+ var n;
+ null == (n = e.onBlur) || n.call(t), i || t.removeAttribute("tabindex")
}
- n || t.setAttribute("tabindex", "-1"), t.addEventListener("focus", (function() {
+ i || t.setAttribute("tabindex", "-1"), t.addEventListener("focus", (function() {
t.addEventListener("blur", onBlur, {
once: !0
})
}), {
once: !0
- }), null == (i = e.onBeforeFocus) || i.call(t), t.focus()
+ }), null == (n = e.onBeforeFocus) || n.call(t), t.focus()
}
function isSupported(t = document.body) {
@@ -63,12 +63,12 @@ class ElementError extends GOVUKFrontendError {
let e = "string" == typeof t ? t : "";
if ("object" == typeof t) {
const {
- component: i,
- identifier: n,
+ component: n,
+ identifier: i,
element: s,
expectedType: o
} = t;
- e = n, e += s ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found", e = formatErrorMessage(i, e)
+ e = i, e += s ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found", e = formatErrorMessage(n, e)
}
super(e), this.name = "ElementError"
}
@@ -93,8 +93,8 @@ class GOVUKFrontendComponent {
expectedType: e.elementType.name
});
this._$root = t, e.checkSupport(), this.checkInitialised();
- const i = e.moduleName;
- this.$root.setAttribute(`data-${i}-init`, "")
+ const n = e.moduleName;
+ this.$root.setAttribute(`data-${n}-init`, "")
}
checkInitialised() {
const t = this.constructor,
@@ -116,91 +116,91 @@ class ConfigurableComponent extends GOVUKFrontendComponent {
get config() {
return this._config
}
- constructor(e, i) {
+ constructor(e, n) {
super(e), this._config = void 0;
- const n = this.constructor;
- if (!isObject(n.defaults)) throw new ConfigError(formatErrorMessage(n, "Config passed as parameter into constructor but no defaults defined"));
+ const i = this.constructor;
+ if (!isObject(i.defaults)) throw new ConfigError(formatErrorMessage(i, "Config passed as parameter into constructor but no defaults defined"));
const s = function(Component, t) {
if (!isObject(Component.schema)) throw new ConfigError(formatErrorMessage(Component, "Config passed as parameter into constructor but no schema defined"));
const e = {},
- i = Object.entries(Component.schema.properties);
- for (const n of i) {
- const [i, s] = n, o = i.toString();
- o in t && (e[o] = normaliseString(t[o], s)), "object" === (null == s ? void 0 : s.type) && (e[o] = extractConfigByNamespace(Component.schema, t, i))
+ n = Object.entries(Component.schema.properties);
+ for (const i of n) {
+ const [n, s] = i, o = n.toString();
+ o in t && (e[o] = normaliseString(t[o], s)), "object" === (null == s ? void 0 : s.type) && (e[o] = extractConfigByNamespace(Component.schema, t, n))
}
return e
- }(n, this._$root.dataset);
- this._config = mergeConfigs(n.defaults, null != i ? i : {}, this[t](s), s)
+ }(i, this._$root.dataset);
+ this._config = mergeConfigs(i.defaults, null != n ? n : {}, this[t](s), s)
}
}
function normaliseString(t, e) {
- const i = t ? t.trim() : "";
- let n, s = null == e ? void 0 : e.type;
- switch (s || (["true", "false"].includes(i) && (s = "boolean"), i.length > 0 && isFinite(Number(i)) && (s = "number")), s) {
+ const n = t ? t.trim() : "";
+ let i, s = null == e ? void 0 : e.type;
+ switch (s || (["true", "false"].includes(n) && (s = "boolean"), n.length > 0 && isFinite(Number(n)) && (s = "number")), s) {
case "boolean":
- n = "true" === i;
+ i = "true" === n;
break;
case "number":
- n = Number(i);
+ i = Number(n);
break;
default:
- n = t
+ i = t
}
- return n
+ return i
}
function mergeConfigs(...t) {
const e = {};
- for (const i of t)
- for (const t of Object.keys(i)) {
- const n = e[t],
- s = i[t];
- isObject(n) && isObject(s) ? e[t] = mergeConfigs(n, s) : e[t] = s
+ for (const n of t)
+ for (const t of Object.keys(n)) {
+ const i = e[t],
+ s = n[t];
+ isObject(i) && isObject(s) ? e[t] = mergeConfigs(i, s) : e[t] = s
}
return e
}
-function extractConfigByNamespace(t, e, i) {
- const n = t.properties[i];
- if ("object" !== (null == n ? void 0 : n.type)) return;
+function extractConfigByNamespace(t, e, n) {
+ const i = t.properties[n];
+ if ("object" !== (null == i ? void 0 : i.type)) return;
const s = {
- [i]: {}
+ [n]: {}
};
for (const [o, r] of Object.entries(e)) {
let t = s;
const e = o.split(".");
- for (const [n, s] of e.entries()) isObject(t) && (n < e.length - 1 ? (isObject(t[s]) || (t[s] = {}), t = t[s]) : o !== i && (t[s] = normaliseString(r)))
+ for (const [i, s] of e.entries()) isObject(t) && (i < e.length - 1 ? (isObject(t[s]) || (t[s] = {}), t = t[s]) : o !== n && (t[s] = normaliseString(r)))
}
- return s[i]
+ return s[n]
}
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");
- let i = this.translations[t];
- if ("number" == typeof(null == e ? void 0 : e.count) && "object" == typeof i) {
- const n = i[this.getPluralSuffix(t, e.count)];
- n && (i = n)
+ let n = this.translations[t];
+ if ("number" == typeof(null == e ? void 0 : e.count) && "object" == typeof n) {
+ const i = n[this.getPluralSuffix(t, e.count)];
+ i && (n = i)
}
- if ("string" == typeof i) {
- if (i.match(/%{(.\S+)}/)) {
+ 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`)
}))
@@ -210,11 +210,11 @@ class I18n {
}
getPluralSuffix(t, e) {
if (e = Number(e), !isFinite(e)) return "other";
- const i = this.translations[t],
- n = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(e) : this.selectPluralFormUsingFallbackRules(e);
- if ("object" == typeof i) {
- if (n in i) return n;
- if ("other" in i) return console.warn(`i18n: Missing plural form ".${n}" for "${this.locale}" locale. Falling back to ".other".`), "other"
+ const n = this.translations[t],
+ i = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(e) : this.selectPluralFormUsingFallbackRules(e);
+ if ("object" == typeof n) {
+ if (i in n) return i;
+ if ("other" in n) return console.warn(`i18n: Missing plural form ".${i}" for "${this.locale}" locale. Falling back to ".other".`), "other"
}
throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`)
}
@@ -226,8 +226,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
}
}
}
@@ -249,8 +249,8 @@ 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",
@@ -259,12 +259,12 @@ I18n.pluralRulesMap = {
class Accordion extends ConfigurableComponent {
constructor(t, e = {}) {
super(t, e), 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.$showAllButton = null, this.$showAllIcon = null, this.$showAllText = null, this.i18n = new I18n(this.config.i18n);
- const i = this.$root.querySelectorAll(`.${this.sectionClass}`);
- if (!i.length) throw new ElementError({
+ const n = this.$root.querySelectorAll(`.${this.sectionClass}`);
+ if (!n.length) throw new ElementError({
component: Accordion,
identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
});
- this.$sections = i, this.initControls(), this.initSectionHeaders(), this.updateShowAllButton(this.areAllSectionsOpen())
+ this.$sections = n, this.initControls(), this.initSectionHeaders(), this.updateShowAllButton(this.areAllSectionsOpen())
}
initControls() {
this.$showAllButton = document.createElement("button"), this.$showAllButton.setAttribute("type", "button"), this.$showAllButton.setAttribute("class", this.showAllClass), this.$showAllButton.setAttribute("aria-expanded", "false"), this.$showAllIcon = document.createElement("span"), this.$showAllIcon.classList.add(this.upChevronIconClass), this.$showAllButton.appendChild(this.$showAllIcon);
@@ -273,33 +273,33 @@ class Accordion extends ConfigurableComponent {
}
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({
component: 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({
component: Accordion,
identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
});
- if (!i) throw new ElementError({
+ if (!n) throw new ElementError({
component: Accordion,
identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
});
const o = document.createElement("button");
o.setAttribute("type", "button"), o.setAttribute("aria-controls", `${this.$root.id}-content-${e+1}`);
- for (const d of Array.from(i.attributes)) "id" !== d.name && o.setAttribute(d.name, d.value);
+ for (const d of Array.from(n.attributes)) "id" !== d.name && o.setAttribute(d.name, d.value);
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), Array.from(i.childNodes).forEach((t => a.appendChild(t)));
+ a.classList.add(this.sectionHeadingTextFocusClass), r.appendChild(a), Array.from(n.childNodes).forEach((t => a.appendChild(t)));
const l = document.createElement("span");
l.classList.add(this.sectionShowHideToggleClass), l.setAttribute("data-nosnippet", "");
const c = document.createElement("span");
@@ -310,16 +310,16 @@ class Accordion extends ConfigurableComponent {
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.name, i.value);
+ for (const n of Array.from(s.attributes)) t.setAttribute(n.name, n.value);
Array.from(s.childNodes).forEach((t => e.appendChild(t))), s.remove(), 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);
@@ -332,24 +332,24 @@ class Accordion extends ConfigurableComponent {
})), 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({
component: 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 u = t ? this.i18n.t("hideSectionAriaLabel") : this.i18n.t("showSectionAriaLabel");
- a.push(u), 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)), this.updateShowAllButton(this.areAllSectionsOpen())
+ a.push(u), 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)), this.updateShowAllButton(this.areAllSectionsOpen())
}
isExpanded(t) {
return t.classList.contains(this.sectionExpandedClass)
@@ -366,18 +366,18 @@ class Accordion extends ConfigurableComponent {
}
storeState(t, e) {
if (!this.config.rememberExpanded) return;
- const i = this.getIdentifier(t);
- if (i) try {
- window.sessionStorage.setItem(i, e.toString())
- } catch (n) {}
+ const n = this.getIdentifier(t);
+ if (n) try {
+ window.sessionStorage.setItem(n, e.toString())
+ } catch (i) {}
}
setInitialState(t) {
if (!this.config.rememberExpanded) return;
const e = this.getIdentifier(t);
if (e) try {
- const i = window.sessionStorage.getItem(e);
- null !== i && this.setExpanded("true" === i, t)
- } catch (i) {}
+ const n = window.sessionStorage.getItem(e);
+ null !== n && this.setExpanded("true" === n, t)
+ } catch (n) {}
}
getButtonPunctuationEl() {
const t = document.createElement("span");
@@ -420,8 +420,8 @@ class Button extends ConfigurableComponent {
}
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
@@ -441,7 +441,7 @@ class CharacterCount extends ConfigurableComponent {
}), e
}
constructor(t, e = {}) {
- var i, n;
+ var n, i;
super(t, e), this.$textarea = void 0, this.$visibleCountMessage = void 0, this.$screenReaderCountMessage = void 0, this.lastInputTimestamp = null, this.lastInputValue = "", this.valueChecker = null, this.i18n = void 0, this.maxLength = void 0;
const s = this.$root.querySelector(".govuk-js-character-count");
if (!(s instanceof HTMLTextAreaElement || s instanceof HTMLInputElement)) throw new ElementError({
@@ -451,24 +451,24 @@ class CharacterCount extends ConfigurableComponent {
identifier: "Form field (`.govuk-js-character-count`)"
});
const o = 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 = [];
if (Array.isArray(s)) {
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 (o[0]) throw new ConfigError(formatErrorMessage(CharacterCount, o[0]));
this.i18n = new I18n(this.config.i18n, {
locale: closestAttributeValue(this.$root, "lang")
- }), this.maxLength = null != (i = null != (n = this.config.maxwords) ? n : this.config.maxlength) ? i : 1 / 0, this.$textarea = s;
+ }), this.maxLength = null != (n = null != (i = this.config.maxwords) ? i : this.config.maxlength) ? n : 1 / 0, this.$textarea = s;
const r = `${this.$textarea.id}-info`,
a = document.getElementById(r);
if (!a) throw new ElementError({
@@ -525,8 +525,8 @@ class CharacterCount extends ConfigurableComponent {
}
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)
})
}
@@ -609,10 +609,10 @@ class Checkboxes 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-checkboxes__conditional")) {
+ const n = document.getElementById(e);
+ if (null != 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) {
@@ -645,25 +645,25 @@ class ErrorSummary extends ConfigurableComponent {
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
}
}
}
@@ -682,16 +682,16 @@ ErrorSummary.moduleName = "govuk-error-summary", ErrorSummary.defaults = Object.
class ExitThisPage extends ConfigurableComponent {
constructor(t, e = {}) {
super(t, e), this.i18n = void 0, this.$button = void 0, this.$skiplinkButton = null, this.$updateSpan = null, this.$indicatorContainer = null, this.$overlay = null, this.keypressCounter = 0, this.lastKeyWasModified = !1, this.timeoutTime = 5e3, this.keypressTimeoutId = null, this.timeoutMessageId = null;
- const i = this.$root.querySelector(".govuk-exit-this-page__button");
- if (!(i instanceof HTMLAnchorElement)) throw new ElementError({
+ const n = this.$root.querySelector(".govuk-exit-this-page__button");
+ if (!(n instanceof HTMLAnchorElement)) throw new ElementError({
component: ExitThisPage,
- element: i,
+ element: n,
expectedType: "HTMLAnchorElement",
identifier: "Button (`.govuk-exit-this-page__button`)"
});
- this.i18n = new I18n(this.config.i18n), 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.i18n = new I18n(this.config.i18n), 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.$root.appendChild(this.$updateSpan)
@@ -755,29 +755,29 @@ ExitThisPage.moduleName = "govuk-exit-this-page", ExitThisPage.defaults = Object
class FileUpload extends ConfigurableComponent {
constructor(t, e = {}) {
super(t, e), this.$input = void 0, this.$button = void 0, this.$status = void 0, this.i18n = void 0, this.id = void 0;
- const i = this.$root.querySelector("input");
- if (null === i) throw new ElementError(formatErrorMessage(FileUpload, "File upload wrapper must have `input` element of type `file`"));
- if ("file" !== i.type) throw new ElementError(formatErrorMessage(FileUpload, "Form field must be an input of type `file`."));
- if (this.$input = i, !this.$input.id.length) throw new ElementError(formatErrorMessage(FileUpload, "Form field must specify an `id`."));
+ const n = this.$root.querySelector("input");
+ if (null === n) throw new ElementError(formatErrorMessage(FileUpload, "File upload wrapper must have `input` element of type `file`"));
+ if ("file" !== n.type) throw new ElementError(formatErrorMessage(FileUpload, "Form field must be an input of type `file`."));
+ if (this.$input = n, !this.$input.id.length) throw new ElementError(formatErrorMessage(FileUpload, "Form field must specify an `id`."));
this.id = this.$input.id, this.i18n = new I18n(this.config.i18n, {
locale: closestAttributeValue(this.$root, "lang")
});
- const n = this.findLabel();
- n.setAttribute("for", `${this.id}-input`), n.id || (n.id = `${this.id}-label`), this.$input.id = `${this.id}-input`;
+ const i = this.findLabel();
+ i.setAttribute("for", `${this.id}-input`), i.id || (i.id = `${this.id}-label`), this.$input.id = `${this.id}-input`;
const s = document.createElement("button");
s.classList.add("govuk-file-upload__button"), s.type = "button", s.id = this.id, s.classList.add("govuk-file-upload__button--empty");
const o = this.$input.getAttribute("aria-describedby");
o && s.setAttribute("aria-describedby", o);
const r = document.createElement("span");
- r.className = "govuk-body govuk-file-upload__status", r.innerText = this.i18n.t("filesSelectedDefault"), s.appendChild(r);
+ r.className = "govuk-body govuk-file-upload__status", r.innerText = this.i18n.t("noFileChosen"), s.appendChild(r);
const a = document.createElement("span");
a.className = "govuk-visually-hidden", a.innerText = ", ", a.id = `${this.id}-comma`, s.appendChild(a);
const l = document.createElement("span");
l.className = "govuk-file-upload__pseudo-button-container";
const c = document.createElement("span");
- c.className = "govuk-button govuk-button--secondary govuk-file-upload__pseudo-button", c.innerText = this.i18n.t("selectFilesButton"), l.appendChild(c), l.insertAdjacentText("beforeend", " ");
+ c.className = "govuk-button govuk-button--secondary govuk-file-upload__pseudo-button", c.innerText = this.i18n.t("chooseFilesButton"), l.appendChild(c), l.insertAdjacentText("beforeend", " ");
const u = document.createElement("span");
- u.className = "govuk-body govuk-file-upload__instruction", u.innerText = this.i18n.t("instruction"), l.appendChild(u), s.appendChild(l), s.setAttribute("aria-labelledby", `${n.id} ${a.id} ${s.id}`), s.addEventListener("click", this.onClick.bind(this)), this.$root.insertAdjacentElement("afterbegin", s), this.$input.setAttribute("tabindex", "-1"), this.$input.setAttribute("aria-hidden", "true"), this.$button = s, this.$status = r, this.$input.addEventListener("change", this.onChange.bind(this)), this.updateDisabledState(), this.observeDisabledState(), this.$announcements = document.createElement("span"), this.$announcements.classList.add("govuk-file-upload-announcements"), this.$announcements.classList.add("govuk-visually-hidden"), this.$announcements.setAttribute("aria-live", "assertive"), this.$root.insertAdjacentElement("afterend", this.$announcements), this.$input.addEventListener("drop", this.hideDropZone.bind(this)), document.addEventListener("dragenter", this.updateDropzoneVisibility.bind(this)), document.addEventListener("dragenter", (() => {
+ u.className = "govuk-body govuk-file-upload__instruction", u.innerText = this.i18n.t("dropInstruction"), l.appendChild(u), s.appendChild(l), s.setAttribute("aria-labelledby", `${i.id} ${a.id} ${s.id}`), s.addEventListener("click", this.onClick.bind(this)), this.$root.insertAdjacentElement("afterbegin", s), this.$input.setAttribute("tabindex", "-1"), this.$input.setAttribute("aria-hidden", "true"), this.$button = s, this.$status = r, this.$input.addEventListener("change", this.onChange.bind(this)), this.updateDisabledState(), this.observeDisabledState(), this.$announcements = document.createElement("span"), this.$announcements.classList.add("govuk-file-upload-announcements"), this.$announcements.classList.add("govuk-visually-hidden"), this.$announcements.setAttribute("aria-live", "assertive"), this.$root.insertAdjacentElement("afterend", this.$announcements), this.$input.addEventListener("drop", this.hideDropZone.bind(this)), document.addEventListener("dragenter", this.updateDropzoneVisibility.bind(this)), document.addEventListener("dragenter", (() => {
this.enteredAnotherElement = !0
})), document.addEventListener("dragleave", (() => {
this.enteredAnotherElement || this.hideDropZone(), this.enteredAnotherElement = !1
@@ -786,16 +786,16 @@ class FileUpload extends ConfigurableComponent {
updateDropzoneVisibility(t) {
t.target instanceof Node && (this.$root.contains(t.target) ? t.dataTransfer && function(t) {
const e = 0 === t.types.length,
- i = t.types.some((t => "Files" === t));
- return e || i
- }(t.dataTransfer) && (this.$button.classList.contains("govuk-file-upload__button--dragging") || (this.$button.classList.add("govuk-file-upload__button--dragging"), this.$input.classList.add("govuk-file-upload--dragging"), this.$announcements.innerText = this.i18n.t("dropZoneEntered"))) : this.$button.classList.contains("govuk-file-upload__button--dragging") && this.hideDropZone())
+ n = t.types.some((t => "Files" === t));
+ return e || n
+ }(t.dataTransfer) && (this.$button.classList.contains("govuk-file-upload__button--dragging") || (this.$button.classList.add("govuk-file-upload__button--dragging"), this.$input.classList.add("govuk-file-upload--dragging"), this.$announcements.innerText = this.i18n.t("enteredDropZone"))) : this.$button.classList.contains("govuk-file-upload__button--dragging") && this.hideDropZone())
}
hideDropZone() {
- this.$button.classList.remove("govuk-file-upload__button--dragging"), this.$input.classList.remove("govuk-file-upload--dragging"), this.$announcements.innerText = this.i18n.t("dropZoneLeft")
+ this.$button.classList.remove("govuk-file-upload__button--dragging"), this.$input.classList.remove("govuk-file-upload--dragging"), this.$announcements.innerText = this.i18n.t("leftDropZone")
}
onChange() {
const t = this.$input.files.length;
- 0 === t ? (this.$status.innerText = this.i18n.t("filesSelectedDefault"), this.$button.classList.add("govuk-file-upload__button--empty")) : (this.$status.innerText = 1 === t ? this.$input.files[0].name : this.i18n.t("filesSelected", {
+ 0 === t ? (this.$status.innerText = this.i18n.t("noFileChosen"), this.$button.classList.add("govuk-file-upload__button--empty")) : (this.$status.innerText = 1 === t ? this.$input.files[0].name : this.i18n.t("multipleFilesChosen", {
count: t
}), this.$button.classList.remove("govuk-file-upload__button--empty"))
}
@@ -823,15 +823,15 @@ class FileUpload extends ConfigurableComponent {
}
FileUpload.moduleName = "govuk-file-upload", FileUpload.defaults = Object.freeze({
i18n: {
- selectFilesButton: "Choose file",
- filesSelectedDefault: "No file chosen",
- filesSelected: {
+ chooseFilesButton: "Choose file",
+ dropInstruction: "or drop file",
+ noFileChosen: "No file chosen",
+ multipleFilesChosen: {
one: "%{count} file chosen",
other: "%{count} files chosen"
},
- dropZoneEntered: "Entered drop zone",
- dropZoneLeft: "Left drop zone",
- instruction: "or drop file"
+ enteredDropZone: "Entered drop zone",
+ leftDropZone: "Left drop zone"
}
}), FileUpload.schema = Object.freeze({
properties: {
@@ -845,18 +845,18 @@ class Header extends GOVUKFrontendComponent {
super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
const e = this.$root.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({
component: 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({
component: Header,
- element: n,
- identifier: `Navigation (\`<ul id="${i}">\`)`
+ element: i,
+ identifier: `Navigation (\`<ul id="${n}">\`)`
});
- this.$menu = n, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+ this.$menu = i, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
}
setupResponsiveChecks() {
const t = getBreakpoint("desktop");
@@ -891,23 +891,23 @@ NotificationBanner.moduleName = "govuk-notification-banner", NotificationBanner.
class PasswordInput extends ConfigurableComponent {
constructor(t, e = {}) {
super(t, e), this.i18n = void 0, this.$input = void 0, this.$showHideButton = void 0, this.$screenReaderStatusMessage = void 0;
- const i = this.$root.querySelector(".govuk-js-password-input-input");
- if (!(i instanceof HTMLInputElement)) throw new ElementError({
+ const n = this.$root.querySelector(".govuk-js-password-input-input");
+ if (!(n instanceof HTMLInputElement)) throw new ElementError({
component: PasswordInput,
- element: i,
+ element: n,
expectedType: "HTMLInputElement",
identifier: "Form field (`.govuk-js-password-input-input`)"
});
- if ("password" !== i.type) throw new ElementError("Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.");
- const n = this.$root.querySelector(".govuk-js-password-input-toggle");
- if (!(n instanceof HTMLButtonElement)) throw new ElementError({
+ if ("password" !== n.type) throw new ElementError("Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.");
+ const i = this.$root.querySelector(".govuk-js-password-input-toggle");
+ if (!(i instanceof HTMLButtonElement)) throw new ElementError({
component: PasswordInput,
- element: n,
+ element: i,
expectedType: "HTMLButtonElement",
identifier: "Button (`.govuk-js-password-input-toggle`)"
});
- if ("button" !== n.type) throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
- this.$input = i, this.$showHideButton = n, this.i18n = new I18n(this.config.i18n, {
+ if ("button" !== i.type) throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
+ this.$input = n, this.$showHideButton = i, this.i18n = new I18n(this.config.i18n, {
locale: closestAttributeValue(this.$root, "lang")
}), this.$showHideButton.removeAttribute("hidden");
const s = document.createElement("div");
@@ -928,9 +928,9 @@ class PasswordInput extends ConfigurableComponent {
if (t === this.$input.type) return;
this.$input.setAttribute("type", t);
const e = "password" === t,
- i = e ? "show" : "hide",
- n = e ? "passwordHidden" : "passwordShown";
- this.$showHideButton.innerText = this.i18n.t(`${i}Password`), this.$showHideButton.setAttribute("aria-label", this.i18n.t(`${i}PasswordAriaLabel`)), this.$screenReaderStatusMessage.innerText = this.i18n.t(`${n}Announcement`)
+ n = e ? "show" : "hide",
+ i = e ? "passwordHidden" : "passwordShown";
+ this.$showHideButton.innerText = this.i18n.t(`${n}Password`), this.$showHideButton.setAttribute("aria-label", this.i18n.t(`${n}PasswordAriaLabel`)), this.$screenReaderStatusMessage.innerText = this.i18n.t(`${i}Announcement`)
}
}
PasswordInput.moduleName = "govuk-password-input", PasswordInput.defaults = Object.freeze({
@@ -974,20 +974,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)
}))
}
@@ -998,18 +998,18 @@ class ServiceNavigation extends GOVUKFrontendComponent {
super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
const e = this.$root.querySelector(".govuk-js-service-navigation-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({
component: ServiceNavigation,
identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
});
- const n = document.getElementById(i);
- if (!n) throw new ElementError({
+ const i = document.getElementById(n);
+ if (!i) throw new ElementError({
component: ServiceNavigation,
- element: n,
- identifier: `Navigation (\`<ul id="${i}">\`)`
+ element: i,
+ identifier: `Navigation (\`<ul id="${n}">\`)`
});
- this.$menu = n, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+ this.$menu = i, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
}
setupResponsiveChecks() {
const t = getBreakpoint("tablet");
@@ -1031,17 +1031,17 @@ class SkipLink extends GOVUKFrontendComponent {
constructor(t) {
var e;
super(t);
- const i = this.$root.hash,
- n = null != (e = this.$root.getAttribute("href")) ? e : "";
+ const n = this.$root.hash,
+ i = null != (e = this.$root.getAttribute("href")) ? e : "";
let s;
try {
s = new window.URL(this.$root.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({
component: SkipLink,
@@ -1068,17 +1068,17 @@ class Tabs extends GOVUKFrontendComponent {
identifier: 'Links (`<a class="govuk-tabs__tab">`)'
});
this.$tabs = e, this.boundTabClick = this.onTabClick.bind(this), this.boundTabKeydown = this.onTabKeydown.bind(this), this.boundOnHashChange = this.onHashChange.bind(this);
- const i = this.$root.querySelector(".govuk-tabs__list"),
- n = this.$root.querySelectorAll("li.govuk-tabs__list-item");
- if (!i) throw new ElementError({
+ const n = this.$root.querySelector(".govuk-tabs__list"),
+ i = this.$root.querySelectorAll("li.govuk-tabs__list-item");
+ if (!n) throw new ElementError({
component: Tabs,
identifier: 'List (`<ul class="govuk-tabs__list">`)'
});
- if (!n.length) throw new ElementError({
+ if (!i.length) throw new ElementError({
component: 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() {
const t = getBreakpoint("tablet");
@@ -1114,8 +1114,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)
@@ -1130,8 +1130,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");
@@ -1140,14 +1140,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.key) {
@@ -1165,16 +1165,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);
@@ -1204,7 +1204,7 @@ function initAll(t) {
if (t = void 0 !== t ? t : {}, !isSupported()) return void(t.onError ? t.onError(new SupportError, {
config: t
}) : console.log(new SupportError));
- const i = [
+ const n = [
[Accordion, t.accordion],
[Button, t.button],
[CharacterCount, t.characterCount],
@@ -1220,32 +1220,32 @@ function initAll(t) {
[SkipLink],
[Tabs]
],
- n = {
+ i = {
scope: null != (e = t.scope) ? e : document,
onError: t.onError
};
- i.forEach((([Component, t]) => {
- createAll(Component, t, n)
+ n.forEach((([Component, t]) => {
+ createAll(Component, t, i)
}))
}
function createAll(Component, t, e) {
- let i, n = document;
+ let n, i = document;
var s;
- "object" == typeof e && (n = null != (s = e.scope) ? s : n, i = e.onError);
- "function" == typeof e && (i = e), e instanceof HTMLElement && (n = e);
- const o = n.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+ "object" == typeof e && (i = null != (s = e.scope) ? s : i, n = e.onError);
+ "function" == typeof e && (n = e), e instanceof HTMLElement && (i = e);
+ const o = i.querySelectorAll(`[data-module="${Component.moduleName}"]`);
return isSupported() ? Array.from(o).map((e => {
try {
return void 0 !== t ? new Component(e, t) : new Component(e)
- } catch (n) {
- return i ? i(n, {
+ } catch (i) {
+ return n ? n(i, {
element: e,
component: Component,
config: t
- }) : console.log(n), null
+ }) : console.log(i), null
}
- })).filter(Boolean) : (i ? i(new SupportError, {
+ })).filter(Boolean) : (n ? n(new SupportError, {
component: Component,
config: t
}) : console.log(new SupportError), [])
Action run for 64ce299 |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html
index 7ca3960e1..115e42096 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html
@@ -4,7 +4,7 @@
</label>
<div
class="govuk-file-upload-wrapper"
- data-module="govuk-file-upload" data-i18n.select-files-button="Dewiswch ffeil" data-i18n.files-selected-default="Dim ffeiliau wedi'u dewis" data-i18n.files-selected.other="%{count} ffeil wedi'u dewis" data-i18n.files-selected.one="%{count} ffeil wedi'i dewis" data-i18n.instruction="neu ollwng ffeil">
+ data-module="govuk-file-upload" data-i18n.choose-files-button="Dewiswch ffeil" data-i18n.no-file-chosen="Dim ffeil wedi'i dewis" data-i18n.multiple-files-chosen.other="%{count} ffeil wedi'u dewis" data-i18n.multiple-files-chosen.one="%{count} ffeil wedi'i dewis" data-i18n.drop-instruction="neu ollwng ffeil" data-i18n.entered-drop-zone="Wedi mynd i mewn i'r parth gollwng" data-i18n.left-drop-zone="Parth gollwng i'r chwith">
<input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" multiple>
</div>
</div>
Action run for 64ce299 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index ee52d64f9..9f5123b71 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -1712,7 +1712,7 @@
}
const $status = document.createElement('span');
$status.className = 'govuk-body govuk-file-upload__status';
- $status.innerText = this.i18n.t('filesSelectedDefault');
+ $status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
commaSpan.className = 'govuk-visually-hidden';
@@ -1723,12 +1723,12 @@
containerSpan.className = 'govuk-file-upload__pseudo-button-container';
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
- buttonSpan.innerText = this.i18n.t('selectFilesButton');
+ buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
- instructionSpan.innerText = this.i18n.t('instruction');
+ instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
$button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
@@ -1771,7 +1771,7 @@
if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
this.$button.classList.add('govuk-file-upload__button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneEntered');
+ this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
@@ -1784,18 +1784,18 @@
hideDropZone() {
this.$button.classList.remove('govuk-file-upload__button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneLeft');
+ this.$announcements.innerText = this.i18n.t('leftDropZone');
}
onChange() {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
- this.$status.innerText = this.i18n.t('filesSelectedDefault');
+ this.$status.innerText = this.i18n.t('noFileChosen');
this.$button.classList.add('govuk-file-upload__button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
} else {
- this.$status.innerText = this.i18n.t('filesSelected', {
+ this.$status.innerText = this.i18n.t('multipleFilesChosen', {
count: fileCount
});
}
@@ -1840,15 +1840,15 @@
FileUpload.moduleName = 'govuk-file-upload';
FileUpload.defaults = Object.freeze({
i18n: {
- selectFilesButton: 'Choose file',
- filesSelectedDefault: 'No file chosen',
- filesSelected: {
+ chooseFilesButton: 'Choose file',
+ dropInstruction: 'or drop file',
+ noFileChosen: 'No file chosen',
+ multipleFilesChosen: {
one: '%{count} file chosen',
other: '%{count} files chosen'
},
- dropZoneEntered: 'Entered drop zone',
- dropZoneLeft: 'Left drop zone',
- instruction: 'or drop file'
+ enteredDropZone: 'Entered drop zone',
+ leftDropZone: 'Left drop zone'
}
});
FileUpload.schema = Object.freeze({
@@ -1883,13 +1883,15 @@
* @typedef {object} FileUploadTranslations
*
* Messages used by the component
- * @property {string} [selectFiles] - Text of button that opens file browser
- * @property {TranslationPluralForms} [filesSelected] - Text indicating how
- * many files have been selected
- * @property {string} [dropZoneEntered] - Text announced to assistive technology
- * when users entered the drop zone while dragging
- * @property {string} [dropZoneLeft] - Text announced to assistive technology
- * when users left the drop zone while dragging
+ * @property {string} [chooseFile] - The text of the button that opens the file picker
+ * @property {string} [dropInstruction] - The text informing users they can drop files
+ * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files
+ * have been chosen by the user
+ * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user
+ * @property {string} [enteredDropZone] - The text announced by assistive technology
+ * when user drags files and enters the drop zone
+ * @property {string} [leftDropZone] - The text announced by assistive technology
+ * when user drags files and leaves the drop zone without dropping
*/
/**
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index aae85ec36..a20682cc7 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -1706,7 +1706,7 @@ class FileUpload extends ConfigurableComponent {
}
const $status = document.createElement('span');
$status.className = 'govuk-body govuk-file-upload__status';
- $status.innerText = this.i18n.t('filesSelectedDefault');
+ $status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
commaSpan.className = 'govuk-visually-hidden';
@@ -1717,12 +1717,12 @@ class FileUpload extends ConfigurableComponent {
containerSpan.className = 'govuk-file-upload__pseudo-button-container';
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
- buttonSpan.innerText = this.i18n.t('selectFilesButton');
+ buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
- instructionSpan.innerText = this.i18n.t('instruction');
+ instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
$button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
@@ -1765,7 +1765,7 @@ class FileUpload extends ConfigurableComponent {
if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
this.$button.classList.add('govuk-file-upload__button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneEntered');
+ this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
@@ -1778,18 +1778,18 @@ class FileUpload extends ConfigurableComponent {
hideDropZone() {
this.$button.classList.remove('govuk-file-upload__button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneLeft');
+ this.$announcements.innerText = this.i18n.t('leftDropZone');
}
onChange() {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
- this.$status.innerText = this.i18n.t('filesSelectedDefault');
+ this.$status.innerText = this.i18n.t('noFileChosen');
this.$button.classList.add('govuk-file-upload__button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
} else {
- this.$status.innerText = this.i18n.t('filesSelected', {
+ this.$status.innerText = this.i18n.t('multipleFilesChosen', {
count: fileCount
});
}
@@ -1834,15 +1834,15 @@ class FileUpload extends ConfigurableComponent {
FileUpload.moduleName = 'govuk-file-upload';
FileUpload.defaults = Object.freeze({
i18n: {
- selectFilesButton: 'Choose file',
- filesSelectedDefault: 'No file chosen',
- filesSelected: {
+ chooseFilesButton: 'Choose file',
+ dropInstruction: 'or drop file',
+ noFileChosen: 'No file chosen',
+ multipleFilesChosen: {
one: '%{count} file chosen',
other: '%{count} files chosen'
},
- dropZoneEntered: 'Entered drop zone',
- dropZoneLeft: 'Left drop zone',
- instruction: 'or drop file'
+ enteredDropZone: 'Entered drop zone',
+ leftDropZone: 'Left drop zone'
}
});
FileUpload.schema = Object.freeze({
@@ -1877,13 +1877,15 @@ function isContainingFiles(dataTransfer) {
* @typedef {object} FileUploadTranslations
*
* Messages used by the component
- * @property {string} [selectFiles] - Text of button that opens file browser
- * @property {TranslationPluralForms} [filesSelected] - Text indicating how
- * many files have been selected
- * @property {string} [dropZoneEntered] - Text announced to assistive technology
- * when users entered the drop zone while dragging
- * @property {string} [dropZoneLeft] - Text announced to assistive technology
- * when users left the drop zone while dragging
+ * @property {string} [chooseFile] - The text of the button that opens the file picker
+ * @property {string} [dropInstruction] - The text informing users they can drop files
+ * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files
+ * have been chosen by the user
+ * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user
+ * @property {string} [enteredDropZone] - The text announced by assistive technology
+ * when user drags files and enters the drop zone
+ * @property {string} [leftDropZone] - The text announced by assistive technology
+ * when user drags files and leaves the drop zone without dropping
*/
/**
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
index 8136d9ff1..f547d13aa 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
@@ -539,7 +539,7 @@
}
const $status = document.createElement('span');
$status.className = 'govuk-body govuk-file-upload__status';
- $status.innerText = this.i18n.t('filesSelectedDefault');
+ $status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
commaSpan.className = 'govuk-visually-hidden';
@@ -550,12 +550,12 @@
containerSpan.className = 'govuk-file-upload__pseudo-button-container';
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
- buttonSpan.innerText = this.i18n.t('selectFilesButton');
+ buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
- instructionSpan.innerText = this.i18n.t('instruction');
+ instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
$button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
@@ -598,7 +598,7 @@
if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
this.$button.classList.add('govuk-file-upload__button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneEntered');
+ this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
@@ -611,18 +611,18 @@
hideDropZone() {
this.$button.classList.remove('govuk-file-upload__button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneLeft');
+ this.$announcements.innerText = this.i18n.t('leftDropZone');
}
onChange() {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
- this.$status.innerText = this.i18n.t('filesSelectedDefault');
+ this.$status.innerText = this.i18n.t('noFileChosen');
this.$button.classList.add('govuk-file-upload__button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
} else {
- this.$status.innerText = this.i18n.t('filesSelected', {
+ this.$status.innerText = this.i18n.t('multipleFilesChosen', {
count: fileCount
});
}
@@ -667,15 +667,15 @@
FileUpload.moduleName = 'govuk-file-upload';
FileUpload.defaults = Object.freeze({
i18n: {
- selectFilesButton: 'Choose file',
- filesSelectedDefault: 'No file chosen',
- filesSelected: {
+ chooseFilesButton: 'Choose file',
+ dropInstruction: 'or drop file',
+ noFileChosen: 'No file chosen',
+ multipleFilesChosen: {
one: '%{count} file chosen',
other: '%{count} files chosen'
},
- dropZoneEntered: 'Entered drop zone',
- dropZoneLeft: 'Left drop zone',
- instruction: 'or drop file'
+ enteredDropZone: 'Entered drop zone',
+ leftDropZone: 'Left drop zone'
}
});
FileUpload.schema = Object.freeze({
@@ -710,13 +710,15 @@
* @typedef {object} FileUploadTranslations
*
* Messages used by the component
- * @property {string} [selectFiles] - Text of button that opens file browser
- * @property {TranslationPluralForms} [filesSelected] - Text indicating how
- * many files have been selected
- * @property {string} [dropZoneEntered] - Text announced to assistive technology
- * when users entered the drop zone while dragging
- * @property {string} [dropZoneLeft] - Text announced to assistive technology
- * when users left the drop zone while dragging
+ * @property {string} [chooseFile] - The text of the button that opens the file picker
+ * @property {string} [dropInstruction] - The text informing users they can drop files
+ * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files
+ * have been chosen by the user
+ * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user
+ * @property {string} [enteredDropZone] - The text announced by assistive technology
+ * when user drags files and enters the drop zone
+ * @property {string} [leftDropZone] - The text announced by assistive technology
+ * when user drags files and leaves the drop zone without dropping
*/
/**
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
index 4944c1b93..73eef83af 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
@@ -533,7 +533,7 @@ class FileUpload extends ConfigurableComponent {
}
const $status = document.createElement('span');
$status.className = 'govuk-body govuk-file-upload__status';
- $status.innerText = this.i18n.t('filesSelectedDefault');
+ $status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
commaSpan.className = 'govuk-visually-hidden';
@@ -544,12 +544,12 @@ class FileUpload extends ConfigurableComponent {
containerSpan.className = 'govuk-file-upload__pseudo-button-container';
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
- buttonSpan.innerText = this.i18n.t('selectFilesButton');
+ buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
- instructionSpan.innerText = this.i18n.t('instruction');
+ instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
$button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
@@ -592,7 +592,7 @@ class FileUpload extends ConfigurableComponent {
if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
this.$button.classList.add('govuk-file-upload__button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneEntered');
+ this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
@@ -605,18 +605,18 @@ class FileUpload extends ConfigurableComponent {
hideDropZone() {
this.$button.classList.remove('govuk-file-upload__button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneLeft');
+ this.$announcements.innerText = this.i18n.t('leftDropZone');
}
onChange() {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
- this.$status.innerText = this.i18n.t('filesSelectedDefault');
+ this.$status.innerText = this.i18n.t('noFileChosen');
this.$button.classList.add('govuk-file-upload__button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
} else {
- this.$status.innerText = this.i18n.t('filesSelected', {
+ this.$status.innerText = this.i18n.t('multipleFilesChosen', {
count: fileCount
});
}
@@ -661,15 +661,15 @@ class FileUpload extends ConfigurableComponent {
FileUpload.moduleName = 'govuk-file-upload';
FileUpload.defaults = Object.freeze({
i18n: {
- selectFilesButton: 'Choose file',
- filesSelectedDefault: 'No file chosen',
- filesSelected: {
+ chooseFilesButton: 'Choose file',
+ dropInstruction: 'or drop file',
+ noFileChosen: 'No file chosen',
+ multipleFilesChosen: {
one: '%{count} file chosen',
other: '%{count} files chosen'
},
- dropZoneEntered: 'Entered drop zone',
- dropZoneLeft: 'Left drop zone',
- instruction: 'or drop file'
+ enteredDropZone: 'Entered drop zone',
+ leftDropZone: 'Left drop zone'
}
});
FileUpload.schema = Object.freeze({
@@ -704,13 +704,15 @@ function isContainingFiles(dataTransfer) {
* @typedef {object} FileUploadTranslations
*
* Messages used by the component
- * @property {string} [selectFiles] - Text of button that opens file browser
- * @property {TranslationPluralForms} [filesSelected] - Text indicating how
- * many files have been selected
- * @property {string} [dropZoneEntered] - Text announced to assistive technology
- * when users entered the drop zone while dragging
- * @property {string} [dropZoneLeft] - Text announced to assistive technology
- * when users left the drop zone while dragging
+ * @property {string} [chooseFile] - The text of the button that opens the file picker
+ * @property {string} [dropInstruction] - The text informing users they can drop files
+ * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files
+ * have been chosen by the user
+ * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user
+ * @property {string} [enteredDropZone] - The text announced by assistive technology
+ * when user drags files and enters the drop zone
+ * @property {string} [leftDropZone] - The text announced by assistive technology
+ * when user drags files and leaves the drop zone without dropping
*/
/**
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
index 946017c77..fc281526c 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
@@ -54,7 +54,7 @@ class FileUpload extends ConfigurableComponent {
}
const $status = document.createElement('span');
$status.className = 'govuk-body govuk-file-upload__status';
- $status.innerText = this.i18n.t('filesSelectedDefault');
+ $status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
commaSpan.className = 'govuk-visually-hidden';
@@ -65,12 +65,12 @@ class FileUpload extends ConfigurableComponent {
containerSpan.className = 'govuk-file-upload__pseudo-button-container';
const buttonSpan = document.createElement('span');
buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
- buttonSpan.innerText = this.i18n.t('selectFilesButton');
+ buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
- instructionSpan.innerText = this.i18n.t('instruction');
+ instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
$button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
@@ -113,7 +113,7 @@ class FileUpload extends ConfigurableComponent {
if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
this.$button.classList.add('govuk-file-upload__button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneEntered');
+ this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
@@ -126,18 +126,18 @@ class FileUpload extends ConfigurableComponent {
hideDropZone() {
this.$button.classList.remove('govuk-file-upload__button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
- this.$announcements.innerText = this.i18n.t('dropZoneLeft');
+ this.$announcements.innerText = this.i18n.t('leftDropZone');
}
onChange() {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
- this.$status.innerText = this.i18n.t('filesSelectedDefault');
+ this.$status.innerText = this.i18n.t('noFileChosen');
this.$button.classList.add('govuk-file-upload__button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
} else {
- this.$status.innerText = this.i18n.t('filesSelected', {
+ this.$status.innerText = this.i18n.t('multipleFilesChosen', {
count: fileCount
});
}
@@ -182,15 +182,15 @@ class FileUpload extends ConfigurableComponent {
FileUpload.moduleName = 'govuk-file-upload';
FileUpload.defaults = Object.freeze({
i18n: {
- selectFilesButton: 'Choose file',
- filesSelectedDefault: 'No file chosen',
- filesSelected: {
+ chooseFilesButton: 'Choose file',
+ dropInstruction: 'or drop file',
+ noFileChosen: 'No file chosen',
+ multipleFilesChosen: {
one: '%{count} file chosen',
other: '%{count} files chosen'
},
- dropZoneEntered: 'Entered drop zone',
- dropZoneLeft: 'Left drop zone',
- instruction: 'or drop file'
+ enteredDropZone: 'Entered drop zone',
+ leftDropZone: 'Left drop zone'
}
});
FileUpload.schema = Object.freeze({
@@ -225,13 +225,15 @@ function isContainingFiles(dataTransfer) {
* @typedef {object} FileUploadTranslations
*
* Messages used by the component
- * @property {string} [selectFiles] - Text of button that opens file browser
- * @property {TranslationPluralForms} [filesSelected] - Text indicating how
- * many files have been selected
- * @property {string} [dropZoneEntered] - Text announced to assistive technology
- * when users entered the drop zone while dragging
- * @property {string} [dropZoneLeft] - Text announced to assistive technology
- * when users left the drop zone while dragging
+ * @property {string} [chooseFile] - The text of the button that opens the file picker
+ * @property {string} [dropInstruction] - The text informing users they can drop files
+ * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files
+ * have been chosen by the user
+ * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user
+ * @property {string} [enteredDropZone] - The text announced by assistive technology
+ * when user drags files and enters the drop zone
+ * @property {string} [leftDropZone] - The text announced by assistive technology
+ * when user drags files and leaves the drop zone without dropping
*/
/**
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
index 68836c627..8f9ee6edf 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
@@ -225,19 +225,21 @@
},
"multiple": true,
"javascript": true,
- "selectFilesButtonText": "Dewiswch ffeil",
- "instructionText": "neu ollwng ffeil",
- "filesSelectedDefaultText": "Dim ffeiliau wedi'u dewis",
- "filesSelectedText": {
+ "chooseFilesButtonText": "Dewiswch ffeil",
+ "dropInstructionText": "neu ollwng ffeil",
+ "noFileChosenText": "Dim ffeil wedi'i dewis",
+ "multipleFilesChosenText": {
"other": "%{count} ffeil wedi'u dewis",
"one": "%{count} ffeil wedi'i dewis"
- }
+ },
+ "enteredDropZoneText": "Wedi mynd i mewn i'r parth gollwng",
+ "leftDropZoneText": "Parth gollwng i'r chwith"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Llwythwch ffeil i fyny\n </label>\n <div\n class=\"govuk-file-upload-wrapper\"\n data-module=\"govuk-file-upload\" data-i18n.select-files-button=\"Dewiswch ffeil\" data-i18n.files-selected-default=\"Dim ffeiliau wedi'u dewis\" data-i18n.files-selected.other=\"%{count} ffeil wedi'u dewis\" data-i18n.files-selected.one=\"%{count} ffeil wedi'i dewis\" data-i18n.instruction=\"neu ollwng ffeil\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Llwythwch ffeil i fyny\n </label>\n <div\n class=\"govuk-file-upload-wrapper\"\n data-module=\"govuk-file-upload\" data-i18n.choose-files-button=\"Dewiswch ffeil\" data-i18n.no-file-chosen=\"Dim ffeil wedi'i dewis\" data-i18n.multiple-files-chosen.other=\"%{count} ffeil wedi'u dewis\" data-i18n.multiple-files-chosen.one=\"%{count} ffeil wedi'i dewis\" data-i18n.drop-instruction=\"neu ollwng ffeil\" data-i18n.entered-drop-zone=\"Wedi mynd i mewn i'r parth gollwng\" data-i18n.left-drop-zone=\"Parth gollwng i'r chwith\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n </div>\n</div>"
},
{
"name": "with value",
@@ -407,12 +409,14 @@
"text": "Llwythwch ffeil i fyny"
},
"multiple": true,
- "selectFilesButtonText": "Dewiswch ffeil",
- "filesSelectedDefaultText": "Dim ffeiliau wedi'u dewis",
- "filesSelectedText": {
+ "chooseFilesButtonText": "Dewiswch ffeil",
+ "noFileChosenText": "Dim ffeiliau wedi'u dewis",
+ "multipleFilesChosenText": {
"other": "%{count} ffeil wedi'u dewis",
"one": "%{count} ffeil wedi'i dewis"
- }
+ },
+ "enteredDropZoneText": "Wedi mynd i mewn i'r parth gollwng",
+ "leftDropZoneText": "Parth gollwng i'r chwith"
},
"hidden": true,
"description": "",
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
index 71d0b7e6e..b1e5f033b 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
@@ -120,31 +120,43 @@
"name": "javascript",
"type": "boolean",
"required": false,
- "description": "Whether to enable JavaScript enhancements for the component"
+ "description": "Can be used to enable JavaScript enhancements for the component."
},
{
- "name": "selectFilesButtonText",
+ "name": "chooseFilesButtonText",
"type": "string",
"required": false,
- "description": "The text of the button that opens the file picker. JavaScript enhanced version of the component only. Default is \"Choose file\"."
+ "description": "The text of the button that opens the file picker. Default is `\"Choose file\"`. If `javascript` is not provided, this option will be ignored."
},
{
- "name": "instructionText",
+ "name": "dropInstructionText",
"type": "string",
"required": false,
- "description": "The text of the instruction text that follows the button that opens the file picker. JavaScript enhanced version of the component only. Default is \"or drop file\"."
+ "description": "The text informing users they can drop files. Default is `\"or drop file\"`. If `javascript` is not provided, this option will be ignored."
},
{
- "name": "filesSelected",
+ "name": "multipleFilesChosenText",
"type": "object",
"required": false,
- "description": "The text to display when multiple files has been chosen by the user. JavaScript enhanced version of the component only. The component will replace the `%{count}` placeholder with the number of files selected. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend)."
+ "description": "The text displayed when multiple files have been chosen by the user. The component will replace the `%{count}` placeholder with the number of files selected. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules). If `javascript` is not provided, this option will be ignored."
},
{
- "name": "filesSelectedDefault",
+ "name": "noFileChosenText",
"type": "string",
"required": false,
- "description": "The text to display when no file has been chosen by the user. JavaScript enhanced version of the component only. Default is \"No file chosen\"."
+ "description": "The text displayed when no file has been chosen by the user. Default is `\"No file chosen\"`. If `javascript` is not provided, this option will be ignored."
+ },
+ {
+ "name": "enteredDropZoneText",
+ "type": "string",
+ "required": false,
+ "description": "The text announced by assistive technology when user drags files and enters the drop zone. Default is `\"Entered drop zone\"`. If `javascript` is not provided, this option will be ignored."
+ },
+ {
+ "name": "leftDropZoneText",
+ "type": "string",
+ "required": false,
+ "description": "The text announced by assistive technology when user drags files and leaves the drop zone without dropping. Default is `\"Left drop zone\"`. If `javascript` is not provided, this option will be ignored."
},
{
"name": "classes",
Action run for 64ce299 |
9712c55
to
15ba328
Compare
15ba328
to
ee3e5a1
Compare
418e51f
to
0c0ffbe
Compare
ee3e5a1
to
8e1c002
Compare
8e1c002
to
5cd2c86
Compare
1 task
- Consistently talk about 'choosing a file' to align with the button's default. - Ensure order is consistent between description, default and condition for translation options. - Ensure all translation options are suffixed by 'Text' Co-authored-by: @seaemsi
5cd2c86
to
77f96cf
Compare
patrickpatrickpatrick
approved these changes
Feb 10, 2025
Looks like it was dropped at some point, possibly during a rebase
Looks like it was dropped at some point, possibly during a rebase
77f96cf
to
64ce299
Compare
patrickpatrickpatrick
approved these changes
Feb 10, 2025
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.
Pairing with @seaemsi , we updated the name and description of the macro options in the documentation so that:
The changes were the reported on the code to ensure they matched the documentation.