@hmlr/govuk-react-components-library
Version:
These are common component use for React applications based on GDS and govuk-frontend
882 lines (809 loc) • 85.8 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var govukFrontend = require('govuk-frontend');
var reactRouterDom = require('react-router-dom');
var React = require('react');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
function ConfigureOverallAccordion($scope, config) {
if (JSON.stringify(config) === JSON.stringify({})) {
config = govukFrontend.Accordion.defaults;
}
govukFrontend.createAll(govukFrontend.Accordion, config, $scope);
}
function ExtractAccordionConfigFromAttributes(remainingAttributes) {
const accordionTranslations = {};
if (remainingAttributes?.hideAllSectionsText) {
Object.assign(accordionTranslations, {
hideAllSections: remainingAttributes.hideAllSectionsText,
});
remainingAttributes["data-i18n.hide-all-sections"] =
remainingAttributes.hideAllSectionsText;
delete remainingAttributes.hideAllSectionsText;
}
if (remainingAttributes?.hideSectionText) {
Object.assign(accordionTranslations, {
hideSection: remainingAttributes.hideSectionText,
});
remainingAttributes["data-i18n.hide-section"] =
remainingAttributes.hideSectionText;
delete remainingAttributes.hideSectionText;
}
if (remainingAttributes?.hideSectionAriaLabelText) {
Object.assign(accordionTranslations, {
hideSectionAriaLabel: remainingAttributes.hideSectionAriaLabelText,
});
remainingAttributes["data-i18n.hide-section-aria-label"] =
remainingAttributes.hideSectionAriaLabelText;
delete remainingAttributes.hideSectionAriaLabelText;
}
if (remainingAttributes?.showAllSectionsText) {
Object.assign(accordionTranslations, {
showAllSections: remainingAttributes.showAllSectionsText,
});
remainingAttributes["data-i18n.show-all-sections"] =
remainingAttributes.showAllSectionsText;
delete remainingAttributes.showAllSectionsText;
}
if (remainingAttributes?.showSectionText) {
Object.assign(accordionTranslations, {
showSection: remainingAttributes.showSectionText,
});
remainingAttributes["data-i18n.show-section"] =
remainingAttributes.showSectionText;
delete remainingAttributes.showSectionText;
}
if (remainingAttributes?.showSectionAriaLabelText) {
Object.assign(accordionTranslations, {
showSectionAriaLabel: remainingAttributes.showSectionAriaLabelText,
});
remainingAttributes["data-i18n.show-section-aria-label"] =
remainingAttributes.showSectionAriaLabelText;
delete remainingAttributes.showSectionAriaLabelText;
}
const accordionConfig = { i18n: accordionTranslations };
if (remainingAttributes?.rememberExpanded) {
Object.assign(accordionConfig, {
rememberExpanded: remainingAttributes.rememberExpanded,
});
remainingAttributes["data-remember-expanded"] =
remainingAttributes.rememberExpanded;
delete remainingAttributes.rememberExpanded;
}
return accordionConfig;
}
const Accordion = ({ headingLevel: HeadingLevel = "h2", items, className, id, ...attributes }) => {
const remainingAttributes = { ...attributes };
ExtractAccordionConfigFromAttributes(remainingAttributes);
return (jsxRuntime.jsx("div", { ...remainingAttributes, id: id, className: `govuk-accordion ${className || ""}`, "data-module": "govuk-accordion", children: items.filter(Boolean).map((item, index) => (jsxRuntime.jsxs("div", { className: `govuk-accordion__section ${item.expanded ? "govuk-accordion__section--expanded" : ""}`, children: [jsxRuntime.jsxs("div", { className: "govuk-accordion__section-header", children: [jsxRuntime.jsx(HeadingLevel, { className: "govuk-accordion__section-heading", children: jsxRuntime.jsx("span", { className: "govuk-accordion__section-button", id: `${id}-heading-${index + 1}`, children: item.heading.children }) }), item.summary && (jsxRuntime.jsx("div", { className: "govuk-accordion__section-summary govuk-body", id: `${id}-summary-${index + 1}`, children: item.summary.children }))] }), jsxRuntime.jsx("div", { id: `${id}-content-${index + 1}`, className: "govuk-accordion__section-content", "aria-labelledby": `${id}-heading-${index + 1}`, children: item.content.children })] }, item.reactListKey || index))) }));
};
const LinkWithRef = ({ children, to, href, forwardedRef = null, ...attributes }) => {
if (to) {
return (jsxRuntime.jsx(reactRouterDom.Link, { ref: forwardedRef, to: to, ...attributes, children: children }));
}
return (jsxRuntime.jsx("a", { ref: forwardedRef, href: href || "#", ...attributes, children: children }));
};
const ActionLink = (props) => {
const { children, visuallyHiddenText, className, href, to, ...attributes } = props;
const contents = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, visuallyHiddenText && (jsxRuntime.jsx("span", { className: "govuk-visually-hidden", children: visuallyHiddenText }))] }));
return (jsxRuntime.jsx(LinkWithRef, { className: `govuk-link ${className || ""}`, to: to, href: href, ...attributes, children: contents }));
};
const BackLink = (props) => {
const { to, state, children = "Back", className, ...attributes } = props;
return (jsxRuntime.jsx(LinkWithRef, { className: `govuk-back-link back-link-style-override ${className || ""}`, to: to, state: state, ...attributes, children: children }));
};
const ErrorMessage = ({ className, children, visuallyHiddenText = "Error", ...attributes }) => {
let visuallyHiddenTextComponent = null;
if (visuallyHiddenText) {
visuallyHiddenTextComponent = (jsxRuntime.jsxs("span", { className: "govuk-visually-hidden", children: [visuallyHiddenText, ": "] }));
}
return (jsxRuntime.jsxs("p", { className: `govuk-error-message ${className || ""}`, ...attributes, children: [visuallyHiddenTextComponent, children] }));
};
const Fieldset = (props) => {
const { legend, className, children, ...attributes } = props;
let legendComponent;
if (legend && legend.children) {
legendComponent = (jsxRuntime.jsx("legend", { className: `govuk-fieldset__legend ${legend.className || ""}`, children: legend.isPageHeading ? (jsxRuntime.jsx("h1", { className: "govuk-fieldset__heading", children: legend.children })) : (legend.children) }));
}
return (jsxRuntime.jsxs("fieldset", { className: `govuk-fieldset ${className || ""}`, ...attributes, children: [legendComponent, children] }));
};
const Hint = (props) => {
const { className, children, ...attributes } = props;
return (jsxRuntime.jsx("div", { className: `govuk-hint ${className || ""}`, ...attributes, children: children }));
};
const Label = ({ className = "", htmlFor, children, isPageHeading, ...attributes }) => {
if (!children)
return null;
const label = (jsxRuntime.jsx("label", { className: `govuk-label ${className}`, htmlFor: htmlFor, ...attributes, children: children }));
return isPageHeading ? (jsxRuntime.jsx("h1", { className: "govuk-label-wrapper", children: label })) : (label);
};
function omit(object, key) {
if (!object)
return {}; // Return an empty object if `object` is undefined
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { [key]: deletedKey, ...otherKeys } = object;
return otherKeys;
}
// export default function omit(object, key) {
// // eslint-disable-next-line @typescript-eslint/no-unused-vars
// const { [key]: deletedKey, ...otherKeys } = object;
// return otherKeys;
// }
const Boolean$1 = ({ className, errorMessage, fieldset, formGroup, hint, idPrefix, items, controlType, name, onChange, onBlur, "aria-describedby": describedByProp, ...attributes }) => {
const idPrefixValue = idPrefix || name;
let describedBy = describedByProp || fieldset?.["aria-describedby"] || "";
const getHintComponent = () => {
if (hint) {
const hintId = `${idPrefixValue}-hint`;
describedBy += ` ${hintId}`;
return jsxRuntime.jsx(Hint, { ...hint, id: hintId });
}
return null;
};
const getErrorMessageComponent = () => {
if (errorMessage) {
const errorId = `${idPrefixValue}-error`;
describedBy += ` ${errorId}`;
return jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
}
return null;
};
const hasFieldset = !!fieldset;
const innerHtml = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getHintComponent(), getErrorMessageComponent(), jsxRuntime.jsx("div", { className: `govuk-${controlType} ${className || ""}`, ...attributes, "data-module": `govuk-${controlType}`, children: items &&
items.map((item, index) => {
if (!item) {
return null;
}
if (item.behaviour === "exclusive") {
delete item.behaviour;
}
const { id, children, hint: itemHint, conditional: itemConditional, behaviour, label, reactListKey, ...itemAttributes } = item;
const idSuffix = `-${index + 1}`;
const idValue = id || `${idPrefixValue}${index === 0 ? "" : idSuffix}`;
const nameValue = item.name ? item.name : name;
const conditionalId = itemConditional?.children
? `conditional-${idValue}`
: undefined;
const itemHintId = `${idValue}-item-hint`;
let itemDescribedBy = "";
if (controlType === "checkboxes" && !hasFieldset) {
itemDescribedBy = describedBy;
}
if (itemHint) {
itemDescribedBy += ` ${itemHintId}`;
}
if (item.divider) {
return (jsxRuntime.jsx("div", { className: `govuk-${controlType}__divider`, children: item.divider }, reactListKey || index));
}
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: `govuk-${controlType}__item`, children: [jsxRuntime.jsx("input", { className: `govuk-${controlType}__input`, id: idValue, name: nameValue, type: controlType === "radios" ? "radio" : "checkbox", "data-aria-controls": conditionalId, "aria-describedby": itemDescribedBy || undefined, onChange: onChange, onBlur: onBlur, "data-behaviour": behaviour, ...itemAttributes }), jsxRuntime.jsx(Label, { ...label,
className: `govuk-${controlType}__label ${label?.className || ""}`,
htmlFor: idValue,
isPageHeading: false, children: children }), itemHint ? (jsxRuntime.jsx(Hint, { ...itemHint,
className: `govuk-${controlType}__hint ${itemHint.className || ""}`, id: itemHintId })) : ("")] }), itemConditional?.children ? (jsxRuntime.jsx("div", { className: `govuk-${controlType}__conditional ${item.checked
? ""
: `govuk-${controlType}__conditional--hidden`}`, id: conditionalId, children: itemConditional.children })) : ("")] }, reactListKey || index));
}) })] }));
return (jsxRuntime.jsx("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: hasFieldset ? (jsxRuntime.jsx(Fieldset, { ...omit(fieldset, "role"), "aria-describedby": describedBy.trim() || undefined, children: innerHtml })) : (innerHtml) }));
};
const Breadcrumbs = (props) => {
const { items, className, collapseOnMobile, ...attributes } = props;
const breadcrumbs = items
? items.map((item, index) => {
const { href, to, reactListKey, children, ...itemAttributes } = item;
return href || to ? (jsxRuntime.jsx("li", { className: "govuk-breadcrumbs__list-item", children: jsxRuntime.jsx(LinkWithRef, { href: href, to: to, className: "govuk-breadcrumbs__link", ...itemAttributes, children: children }) }, reactListKey || index)) : (jsxRuntime.jsx("li", { className: "govuk-breadcrumbs__list-item", "aria-current": "page", children: children }, reactListKey || index));
})
: null;
return (jsxRuntime.jsx("div", { className: `govuk-breadcrumbs ${className || ""} ${collapseOnMobile ? "govuk-breadcrumbs--collapse-on-mobile" : ""}`, ...attributes, children: jsxRuntime.jsx("ol", { className: "govuk-breadcrumbs__list", children: breadcrumbs }) }));
};
const Button = (props) => {
const { element, href, to, isStartButton, disabled, className, preventDoubleClick, name, type, children, ...attributes } = props;
let el = "";
let buttonAttributes = {
name,
type,
...attributes,
"data-module": "govuk-button",
};
let buttonElement = null;
if (element) {
el = element;
}
else if (href || to) {
el = "a";
}
else {
el = "button";
}
let iconHtml;
if (isStartButton) {
iconHtml = (jsxRuntime.jsx("svg", { className: "govuk-button__start-icon", xmlns: "http://www.w3.org/2000/svg", width: "17.5", height: "19", viewBox: "0 0 33 40", "aria-hidden": "true", focusable: "false", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h13l20 20-20 20H0l20-20z" }) }));
}
const commonAttributes = {
className: `govuk-button ${className || ""}${disabled ? " govuk-button--disabled" : ""} ${isStartButton ? "govuk-button--start" : ""}`,
// ref: buttonRef,
};
if (preventDoubleClick) {
buttonAttributes["data-prevent-double-click"] = preventDoubleClick;
}
if (disabled) {
buttonAttributes = {
...buttonAttributes,
"aria-disabled": "true",
disabled: true,
};
}
if (el === "a") {
const linkAttributes = {
...commonAttributes,
role: "button",
draggable: "false",
...attributes,
"data-module": "govuk-button",
href,
to,
};
buttonElement = (jsxRuntime.jsxs(LinkWithRef, { ...linkAttributes, children: [children, iconHtml] }));
}
else if (el === "button") {
buttonElement = (jsxRuntime.jsxs("button", { ...buttonAttributes, ...commonAttributes, children: [children, iconHtml] }));
}
else if (el === "input") {
if (!type) {
buttonAttributes.type = "submit";
}
buttonElement = (jsxRuntime.jsx("input", { value: children, ...buttonAttributes, ...commonAttributes }));
}
return buttonElement;
};
Button.displayName = "Button";
function ConfigureOverallButton($scope, config) {
govukFrontend.createAll(govukFrontend.Button, config, $scope);
}
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var classnames = {exports: {}};
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
var hasRequiredClassnames;
function requireClassnames () {
if (hasRequiredClassnames) return classnames.exports;
hasRequiredClassnames = 1;
(function (module) {
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (arg) {
classes = appendClass(classes, parseValue(arg));
}
}
return classes;
}
function parseValue (arg) {
if (typeof arg === 'string' || typeof arg === 'number') {
return arg;
}
if (typeof arg !== 'object') {
return '';
}
if (Array.isArray(arg)) {
return classNames.apply(null, arg);
}
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
return arg.toString();
}
var classes = '';
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes = appendClass(classes, key);
}
}
return classes;
}
function appendClass (value, newClass) {
if (!newClass) {
return value;
}
if (value) {
return value + ' ' + newClass;
}
return value + newClass;
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
} (classnames));
return classnames.exports;
}
var classnamesExports = requireClassnames();
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
const DEFAULT_BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
const DEFAULT_MIN_BREAKPOINT = 'xs';
const ThemeContext = /*#__PURE__*/React__namespace.createContext({
prefixes: {},
breakpoints: DEFAULT_BREAKPOINTS,
minBreakpoint: DEFAULT_MIN_BREAKPOINT
});
const {
Consumer,
Provider
} = ThemeContext;
function useBootstrapPrefix(prefix, defaultPrefix) {
const {
prefixes
} = React.useContext(ThemeContext);
return prefix || prefixes[defaultPrefix] || defaultPrefix;
}
const CardBody = /*#__PURE__*/React__namespace.forwardRef(({
className,
bsPrefix,
as: Component = 'div',
...props
}, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-body');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(className, bsPrefix),
...props
});
});
CardBody.displayName = 'CardBody';
const CardFooter = /*#__PURE__*/React__namespace.forwardRef(({
className,
bsPrefix,
as: Component = 'div',
...props
}, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-footer');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(className, bsPrefix),
...props
});
});
CardFooter.displayName = 'CardFooter';
const context = /*#__PURE__*/React__namespace.createContext(null);
context.displayName = 'CardHeaderContext';
const CardHeader = /*#__PURE__*/React__namespace.forwardRef(({
bsPrefix,
className,
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'div',
...props
}, ref) => {
const prefix = useBootstrapPrefix(bsPrefix, 'card-header');
const contextValue = React.useMemo(() => ({
cardHeaderBsPrefix: prefix
}), [prefix]);
return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
value: contextValue,
children: /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
...props,
className: classNames(className, prefix)
})
});
});
CardHeader.displayName = 'CardHeader';
const CardImg = /*#__PURE__*/React__namespace.forwardRef(
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
({
bsPrefix,
className,
variant,
as: Component = 'img',
...props
}, ref) => {
const prefix = useBootstrapPrefix(bsPrefix, 'card-img');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(variant ? `${prefix}-${variant}` : prefix, className),
...props
});
});
CardImg.displayName = 'CardImg';
const CardImgOverlay = /*#__PURE__*/React__namespace.forwardRef(({
className,
bsPrefix,
as: Component = 'div',
...props
}, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-img-overlay');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(className, bsPrefix),
...props
});
});
CardImgOverlay.displayName = 'CardImgOverlay';
const CardLink = /*#__PURE__*/React__namespace.forwardRef(({
className,
bsPrefix,
as: Component = 'a',
...props
}, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-link');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(className, bsPrefix),
...props
});
});
CardLink.displayName = 'CardLink';
var divWithClassName = (className =>
/*#__PURE__*/
// eslint-disable-next-line react/display-name
React__namespace.forwardRef((p, ref) => /*#__PURE__*/jsxRuntime.jsx("div", {
...p,
ref: ref,
className: classNames(p.className, className)
})));
const DivStyledAsH6 = divWithClassName('h6');
const CardSubtitle = /*#__PURE__*/React__namespace.forwardRef(({
className,
bsPrefix,
as: Component = DivStyledAsH6,
...props
}, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-subtitle');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(className, bsPrefix),
...props
});
});
CardSubtitle.displayName = 'CardSubtitle';
const CardText = /*#__PURE__*/React__namespace.forwardRef(({
className,
bsPrefix,
as: Component = 'p',
...props
}, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-text');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(className, bsPrefix),
...props
});
});
CardText.displayName = 'CardText';
const DivStyledAsH5 = divWithClassName('h5');
const CardTitle = /*#__PURE__*/React__namespace.forwardRef(({
className,
bsPrefix,
as: Component = DivStyledAsH5,
...props
}, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-title');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
className: classNames(className, bsPrefix),
...props
});
});
CardTitle.displayName = 'CardTitle';
const Card = /*#__PURE__*/React__namespace.forwardRef(({
bsPrefix,
className,
bg,
text,
border,
body = false,
children,
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'div',
...props
}, ref) => {
const prefix = useBootstrapPrefix(bsPrefix, 'card');
return /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
...props,
className: classNames(className, prefix, bg && `bg-${bg}`, text && `text-${text}`, border && `border-${border}`),
children: body ? /*#__PURE__*/jsxRuntime.jsx(CardBody, {
children: children
}) : children
});
});
Card.displayName = 'Card';
var Card$1 = Object.assign(Card, {
Img: CardImg,
Title: CardTitle,
Subtitle: CardSubtitle,
Body: CardBody,
Link: CardLink,
Text: CardText,
Header: CardHeader,
Footer: CardFooter,
ImgOverlay: CardImgOverlay
});
const CardColumn = (props) => {
const { body, header, link } = props;
return (jsxRuntime.jsx("div", { className: "col", children: jsxRuntime.jsxs(Card$1, { className: "card-styles", children: [jsxRuntime.jsx(reactRouterDom.Link, { to: link, children: jsxRuntime.jsx(Card$1.Header, { className: "card-header govuk-!-font-size-27 govuk-!-font-weight-bold", children: header }) }), jsxRuntime.jsx(Card$1.Body, { className: "govuk-!-font-size-19", children: body })] }) }));
};
const CardLayout = (props) => {
const { cardColumns: children, numberOfGridColumns = 3 } = props;
const divideByColumn = [];
let accumulator = [];
children.map((child, index) => {
accumulator.push(React.createElement(CardColumn, { ...child, key: `card-column-${index}` }));
if (index % numberOfGridColumns === numberOfGridColumns - 1) {
divideByColumn.push(jsxRuntime.jsx("div", { className: `row row-cols-1 row-cols-md-${numberOfGridColumns} govuk-!-margin-bottom-8`, children: accumulator }, `card-layout-${index}`));
accumulator = [];
}
});
if (accumulator.length > 0) {
divideByColumn.push(jsxRuntime.jsx("div", { className: `row row-cols-1 row-cols-md-${numberOfGridColumns} govuk-!-margin-bottom-8`, children: accumulator }, `card-layout-final`));
}
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: divideByColumn });
};
const defaultProps$1 = {
"aria-describedby": "",
rows: 5,
id: "",
name: "",
};
const Textarea = React.forwardRef((props = defaultProps$1, ref) => {
const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, id, ...attributes } = props;
let describedByValue = describedBy || "";
let hintComponent = null;
let errorMessageComponent = null;
if (hint) {
const hintId = `${id}-hint`;
describedByValue += ` ${hintId}`;
hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
}
if (errorMessage) {
const errorId = id ? `${id}-error` : "";
describedByValue += ` ${errorId}`;
errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
}
return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, jsxRuntime.jsx("textarea", { ...attributes, id: id, ref: ref, className: `govuk-textarea${errorMessage ? " govuk-textarea--error" : ""} ${className || ""}`, "aria-describedby": describedByValue?.trim() || undefined })] }));
});
Textarea.displayName = "Textarea";
const CharacterCount = (props) => {
const { id, className, maxlength, threshold, maxwords, errorMessage, countMessage, ...attributes } = props;
const characterCountInfoId = `${id}-info`;
return (jsxRuntime.jsxs("div", { className: "govuk-character-count", "data-module": "govuk-character-count", "data-maxlength": maxlength, "data-threshold": threshold, "data-maxwords": maxwords, children: [jsxRuntime.jsx(Textarea, { id: id, ...attributes, errorMessage: errorMessage, className: `govuk-js-character-count ${className || ""}${errorMessage ? " govuk-textarea--error" : ""}`, "aria-describedby": characterCountInfoId }), jsxRuntime.jsxs(Hint, { id: characterCountInfoId, className: `govuk-hint govuk-character-count__message ${countMessage?.className || ""}`, "aria-live": "polite", children: ["You have ", maxlength || maxwords, " ", maxwords ? "words" : "characters", " ", "remaining"] })] }));
};
CharacterCount.displayName = "CharacterCount";
const Checkboxes = (props) => {
return jsxRuntime.jsx(Boolean$1, { ...props, controlType: "checkboxes" });
};
function ConfigureOverallCheckboxes($scope) {
govukFrontend.createAll(govukFrontend.Checkboxes, undefined, $scope);
}
const CookieActions = ({ actions }) => (jsxRuntime.jsx("div", { className: "govuk-button-group", children: actions.map((action, index) => {
const { className: actionClassName, children: actionChildren, ...actionProps } = action;
return action.href || action.to ? (action.type === "button" || action.type === "submit" ? (jsxRuntime.jsx(Button, { className: actionClassName, ...action }, index)) : (jsxRuntime.jsx(LinkWithRef, { ...actionProps, className: `govuk-link ${actionClassName || ""}`, children: actionChildren }, index))) : (jsxRuntime.jsx(Button, { ...action }, index));
}) }));
const CookieMessage = ({ headingChildren, children, className, actions, }) => (jsxRuntime.jsxs("div", { className: `govuk-cookie-banner__message govuk-width-container ${className || ""}`, children: [jsxRuntime.jsx("div", { className: "govuk-grid-row", children: jsxRuntime.jsxs("div", { className: "govuk-grid-column-two-thirds", children: [headingChildren && (jsxRuntime.jsx("h2", { className: "govuk-cookie-banner__heading govuk-heading-m", children: headingChildren })), jsxRuntime.jsx("div", { className: "govuk-cookie-banner__content", children: typeof children === "string" ? (jsxRuntime.jsx("p", { className: "govuk-body", children: children })) : (children) })] }) }), actions && jsxRuntime.jsx(CookieActions, { actions: actions })] }));
const CookieBanner = ({ className, messages, "aria-label": ariaLabel = "Cookie banner", ...attributes }) => (jsxRuntime.jsx("div", { className: `govuk-cookie-banner ${className || ""}`, "data-nosnippet": true, role: "region", "aria-label": ariaLabel, ...attributes, children: messages.map((message, index) => (jsxRuntime.jsx(CookieMessage, { headingChildren: message.headingChildren, className: message.className, actions: message.actions, ...message, children: message.children }, index))) }));
const DataNavigation = ({ dataId, setDataFocus, previousText = "Previous", previousCondition, nextText = "Next", nextCondition, dataDescription, }) => {
// Helper to render the navigation buttons
const renderNavButton = (id, onClick, disabled, content) => (jsxRuntime.jsx(Button, { id: id, onClick: onClick, "data-testid": id, disabled: disabled, children: content }));
return (jsxRuntime.jsxs("div", { className: "govuk-grid-row", children: [jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third govuk-!-text-align-left", children: renderNavButton("previous-data", () => setDataFocus(dataId - 1), previousCondition, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "govuk-button__start-icon back-button", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", transform: "rotate(180)", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) }), "\u00A0", previousText] })) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third govuk-!-text-align-centre", children: jsxRuntime.jsx(Label, { children: dataDescription }) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third govuk-!-text-align-right", children: renderNavButton("next-data", () => setDataFocus(dataId + 1), nextCondition, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [nextText, jsxRuntime.jsx("svg", { className: "govuk-button__start-icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) })] })) })] }));
};
const defaultProps = {
type: "text",
};
const Input = React.forwardRef((props = defaultProps, ref) => {
const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, name, id, prefix, suffix, ...attributes } = props;
let describedByValue = describedBy || "";
let hintComponent = null;
let errorMessageComponent = null;
if (hint) {
const hintId = `${id}-hint`;
describedByValue += ` ${hintId}`;
hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
}
if (errorMessage) {
const errorId = id ? `${id}-error` : "";
describedByValue += ` ${errorId}`;
errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
}
const input = (jsxRuntime.jsx("input", { ref: ref, id: id, className: `govuk-input ${className || ""} ${errorMessage ? " govuk-input--error" : ""}`, name: name || id, "aria-describedby": describedByValue || undefined, ...attributes }));
return (jsxRuntime.jsxs("div", { className: `govuk-form-group ${formGroup?.className || ""} ${errorMessage ? "govuk-form-group--error" : ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, prefix || suffix ? (jsxRuntime.jsxs("div", { className: "govuk-input__wrapper", children: [prefix ? (jsxRuntime.jsx("div", { "aria-hidden": "true", ...prefix,
className: `govuk-input__prefix ${prefix.className ? prefix.className : ""}` })) : null, input, suffix ? (jsxRuntime.jsx("div", { "aria-hidden": "true", ...suffix,
className: `govuk-input__suffix ${suffix.className ? suffix.className : ""}` })) : null] })) : (input)] }));
});
Input.displayName = "Input";
const DateInput = (props) => {
const { className, errorMessage, fieldset, formGroup, hint, id, items, namePrefix, onChange, ...attributes } = props;
let describedBy = fieldset?.["aria-describedby"]
? fieldset["aria-describedby"]
: "";
let hintComponent;
let errorMessageComponent;
let dateInputItems = [];
if (hint) {
const hintId = `${id}-hint`;
describedBy += ` ${hintId}`;
hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
}
if (errorMessage) {
const errorId = id ? `${id}-error` : "";
describedBy += ` ${errorId}`;
errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
}
if (items && items.length > 0) {
dateInputItems = items;
}
else {
dateInputItems = [
{
name: "day",
className: "govuk-input--width-2",
type: "text",
},
{
name: "month",
className: "govuk-input--width-2",
type: "text",
},
{
name: "year",
className: "govuk-input--width-4",
type: "text",
},
];
}
const itemComponents = dateInputItems
.filter((item) => item)
.map((item, index) => {
const { name: itemName, inputMode: itemInputMode, label: itemLabel, reactListKey: itemReactListKey, id: itemId, className: itemClassName, pattern: itemPattern, ...itemAttributes } = item;
return (jsxRuntime.jsx("div", { className: "govuk-date-input__item", children: jsxRuntime.jsx(Input, { onChange: onChange, ...itemAttributes, label: {
children: itemLabel ||
itemName.charAt(0).toUpperCase() + itemName.slice(1),
className: "govuk-date-input__label",
}, id: itemId || `${id}-${itemName}`, className: `govuk-date-input__input ${itemClassName || ""}`, name: namePrefix ? `${namePrefix}-${itemName}` : itemName, type: "text", inputMode: itemInputMode || "numeric", pattern: itemPattern || "[0-9]*" }) }, itemReactListKey || index));
});
const innerHtml = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hintComponent, errorMessageComponent, jsxRuntime.jsx("div", { className: `govuk-date-input ${className || ""}`, ...attributes, id: id, children: itemComponents })] }));
return (jsxRuntime.jsx("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: fieldset ? (jsxRuntime.jsx(Fieldset, { ...fieldset, "aria-describedby": describedBy || undefined, role: "group", children: innerHtml })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: innerHtml })) }));
};
const Details = ({ className, children, summaryChildren, ...attributes }) => {
return (jsxRuntime.jsxs("details", { className: `govuk-details ${className || ""}`, ...attributes, "data-module": "govuk-details", children: [jsxRuntime.jsx("summary", { className: "govuk-details__summary", children: jsxRuntime.jsx("span", { className: "govuk-details__summary-text", children: summaryChildren }) }), jsxRuntime.jsx("div", { className: "govuk-details__text", children: children })] }));
};
function titleCase(str) {
return str
.toLowerCase()
.split(" ")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ");
}
const DifferenceNavigation = ({ differenceId, setDifferenceFocus, totalDifferences, keyword = "variation", plural = "variations", }) => {
if (totalDifferences === 0) {
return (jsxRuntime.jsxs("p", { className: "govuk-body govuk-!-font-size-20 govuk-!-text-align-centre", children: ["No ", `${plural}`, " found"] }));
}
const isPreviousDisabled = differenceId <= 1;
const isNextDisabled = differenceId === totalDifferences;
const renderButton = (id, onClick, disabled, content) => (jsxRuntime.jsx(Button, { id: id, onClick: onClick, "data-testid": id, disabled: disabled, children: content }));
return (jsxRuntime.jsxs("div", { className: "govuk-grid-row", children: [jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third", children: jsxRuntime.jsx("div", { className: "govuk-!-text-align-left", children: renderButton(`previous-${keyword}`, () => setDifferenceFocus(differenceId - 1), isPreviousDisabled, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", jsxRuntime.jsx("svg", { className: "govuk-button__start-icon back-button", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", transform: "rotate(180)", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) }), "\u00A0Previous", " "] })) }) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third", children: jsxRuntime.jsxs(Label, { className: "govuk-!-text-align-centre", children: [titleCase(keyword), " ", differenceId, " of ", totalDifferences] }) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third", children: jsxRuntime.jsx("div", { className: "govuk-!-text-align-right", children: renderButton(`next-${keyword}`, () => setDifferenceFocus(differenceId + 1), isNextDisabled, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", "Next", jsxRuntime.jsx("svg", { className: "govuk-button__start-icon back-button", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) })] })) }) })] }));
};
const Main = ({ children, backLink = "", backLinkState = null, }) => (jsxRuntime.jsx("div", { className: "govuk-width-container", children: jsxRuntime.jsxs("main", { className: "govuk-main-wrapper", id: "main-content", "data-testid": "main-content", children: [backLink && (jsxRuntime.jsx("div", { className: "govuk-grid-row", children: jsxRuntime.jsx("div", { className: "govuk-grid-column-two-thirds", children: jsxRuntime.jsx(BackLink, { to: { pathname: backLink }, state: backLinkState }) }) })), children && jsxRuntime.jsx("div", { children: children })] }) }));
const ProblemWithService = ({ message = "", applicationName = "Document and plan retrieval system", applicationRoute = "/", reportingLink = "http://marval-live/MSMselfservice/AutoGen.aspx?page=1268", basePageName = "dashboard", }) => {
const { state } = reactRouterDom.useLocation();
const determineMessage = state?.message || message;
const determineApplicationName = state?.applicationName || applicationName;
const refreshPage = () => {
if (window.location.pathname === "/")
window.location.reload();
};
const hasMessage = () => Boolean(determineMessage?.trim());
return (jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx("h1", { className: "govuk-heading-xl", children: "Sorry, there is a problem with the service" }), hasMessage() && (jsxRuntime.jsx("div", { className: "govuk-error-summary", "aria-labelledby": "error-summary-title", role: "alert", tabIndex: -1, "data-module": "govuk-error-summary", children: jsxRuntime.jsx("div", { className: "govuk-error-summary__body", children: jsxRuntime.jsx("p", { children: determineMessage }) }) })), jsxRuntime.jsx("p", { className: "govuk-body", children: "Try again later." }), jsxRuntime.jsxs("p", { className: "govuk-body", children: ["You can go back to", " ", jsxRuntime.jsx(LinkWithRef, { className: "govuk-link", to: applicationRoute, onClick: refreshPage, children: determineApplicationName }), " ", basePageName, "."] }), jsxRuntime.jsxs("p", { className: "govuk-body", children: ["If the problem continues\u00A0", jsxRuntime.jsxs("a", { href: reportingLink, className: "govuk-link", target: "_blank", rel: "noreferrer", children: ["contact support", jsxRuntime.jsx("span", { className: "nav-panel__text opens-in-new-window" }), jsxRuntime.jsx("span", { className: "visually-hidden", children: "(Opens in a new window or tab)" })] }), "."] })] }));
};
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
message: props.message || "",
applicationName: props.applicationName || "",
};
}
static getDerivedStateFromError() {
// Update state to render fallback UI on error
return { hasError: true };
}
componentDidCatch(error, info) {
console.error("Error caught by ErrorBoundary:", error, info);
// Optionally log error details to an external service here
this.setState({ message: error.message });
}
render() {
const { hasError, message, applicationName } = this.state;
if (hasError) {
return (jsxRuntime.jsx(ProblemWithService, { message: message, applicationName: applicationName, basePageName: this.props.basePageName }));
}
return this.props.children;
}
}
const ErrorSummary = (props) => {
const { className, descriptionChildren, errorList, titleChildren = "There is a problem", disableAutoFocus, ...attributes } = props;
let description;
if (descriptionChildren) {
description = jsxRuntime.jsx("p", { children: descriptionChildren });
}
return (jsxRuntime.jsxs("div", { className: `govuk-error-summary ${className || ""}`, "aria-labelledby": "error-summary-title", role: "alert", "data-disable-auto-focus": disableAutoFocus ? "true" : null, ...attributes, "data-module": "govuk-error-summary", children: [jsxRuntime.jsx("h2", { className: "govuk-error-summary__title", id: "error-summary-title", children: titleChildren }), jsxRuntime.jsxs("div", { className: "govuk-error-summary__body", children: [description, jsxRuntime.jsx("ul", { className: "govuk-list govuk-error-summary__list", children: errorList
? errorList.map((error, index) => {
const { reactListKey, children, href, ...errorAttributes } = error;
return (jsxRuntime.jsx("li", { children: href ? (jsxRuntime.jsx("a", { ...errorAttributes, href: href, children: children })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: children })) }, reactListKey || index));
})
: null })] })] }));
};
ErrorSummary.displayName = "ErrorSummary";
function ConfigureOverallErrorSummary($scope, config) {
govukFrontend.createAll(govukFrontend.ErrorSummary, config, $scope);
}
const FileUpload = (props) => {
const { className, errorMessage, formGroup, hint, label, "aria-describedby": describedBy, id, ...attributes } = props;
let hintComponent;
let errorMessageComponent;
let describedByValue = describedBy || "";
if (hint) {
const hintId = `${props.id}-hint`;
describedByValue += ` ${hintId}`;
hintComponent = jsxRuntime.jsx(Hint, { ...props.hint, id: hintId });
}
if (errorMessage) {
const errorId = `${id}-error`;
describedByValue += ` ${errorId}`;
errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
}
return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, jsxRuntime.jsx("input", { ...attributes, id: id, className: `govuk-file-upload ${className || ""}${errorMessage ? " govuk-file-upload--error" : ""}`, type: "file", "aria-describedby": describedByValue || undefined })] }));
};
FileUpload.displayName = "FileUpload";
const Footer = (props) => {
const { className, containerClassName, meta, navigation, ...attributes } = props;
let navigationComponent;
let metaComponent;
if (navigation && navigation.length > 0) {
navigationComponent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "govuk-footer__navigation", children: navigation.map((nav, navIndex) => (jsxRuntime.jsxs("div", { className: `govuk-footer__section govuk-grid-column-${nav.width ? nav.width : "full"}`, children: [jsxRuntime.jsx("h2", { className: "govuk-footer__heading govuk-heading-m", children: nav.title }), nav.items && nav.items.length > 0 ? (jsxRuntime.jsx("ul", { className: `govuk-footer__list ${nav.columns ? `govuk-footer__list--columns-${nav.columns}` : ""}`, children: nav.items.map((item, index) => {
const { className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
return (jsxRuntime.jsx(React.Fragment, { children: (item.href || item.to) && itemChildren && (jsxRuntime.jsx("li", { className: "govuk-footer__list-item", children: jsxRuntime.jsx(LinkWithRef, { className: `govuk-footer__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren }) })) }, reactListKey || index));
}) })) : null] }, nav.reactListKey || navIndex))) }), jsxRuntime.jsx("hr", { className: "govuk-footer__section-break" })] }));
}
if (meta) {
metaComponent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { className: "govuk-visually-hidden", children: meta.visuallyHiddenTitle
? meta.visuallyHiddenTitle
: "Support links" }), meta.items && meta.items.length > 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("ul", { className: "govuk-footer__inline-list", children: meta.items.map((item, index) => {
const { className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
return (jsxRuntime.jsx("li", { className: "govuk-footer__inline-list-item", children: jsxRuntime.jsx(LinkWithRef, { className: `govuk-footer__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren }) }, reactListKey || index));
}) }) })) : null, meta.children ? (jsxRuntime.jsx("div", { className: "govuk-footer__meta-custom", children: meta.children })) : null] }));
}
return (jsxRuntime.jsx("footer", { className: `govuk-footer ${className || ""}`, role: "contentinfo", ...attributes, children: jsxRuntime.jsxs("div", { className: `govuk-width-container ${containerClassName || ""}`, children: [navigationComponent, jsxRuntime.jsxs("div", { className: "govuk-footer__meta", children: [jsxRuntime.jsxs("div", { className: "govuk-footer__meta-item govuk-footer__meta-item--grow", children: [metaComponent, jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", className: "govuk-footer__licence-logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 483.2 195.7", height: "17", width: "41", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" }) }), jsxRuntime.jsxs("span", { className: "govuk-footer__licence-description", children: ["All content is available under the", " ", jsxRuntime.jsx("a", { className: "govuk-footer__link", href: "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", rel: "license", children: "Open Government Licence v3.0" }), ", except where otherwise stated"] })] }), jsxRuntime.jsx("div", { className: "govuk-footer__meta-item", children: jsxRuntime.jsx("a", { className: "govuk-footer__link govuk-footer__copyright-logo", href: "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/", children: "\u00A9 Crown copyright" }) })] })] }) }));
};
const Header = (props) => {
const { className, containerClassName = "govuk-width-container", homepageUrlHref = "/", homepageUrlTo, navigation, navigationClassName, productName, serviceName, serviceUrlHref, serviceUrlTo, navigationLabel = "Menu", menuButtonLabel = "Show or hide menu", removeGovUKHeader = null, logo, ...attributes } = props;
let productNameComponent = null;
let navigationComponent = null;
if (productName) {
productNameComponent = (jsxRuntime.jsx("span", { className: "govuk-header__product-name", children: productName }));
}
if (serviceName || navigation) {
navigationComponent = (jsxRuntime.jsxs("div", { className: "govuk-header__content", children: [serviceName ? (jsxRuntime.jsx(LinkWithRef, { href: serviceUrlHref, to: serviceUrlTo, className: "govuk-header__link govuk-header__link--service-name", children: serviceName })) : null, navigation ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("nav", { className: `govuk-header__navigation ${navigationClassName || ""}`, "aria-label": navi