@hmlr/govuk-react-components-library 1.0.3 → 1.1.0

package/dist/index.esm.css

@@ -11864,8 +11864,8 @@ textarea.form-control-lg {
 }
 
 .card-link :hover {
-  border-color: #fd0;
   color: #003078;
+  border-color: #fd0;
 }
 
 .card-header {
@@ -11873,13 +11873,13 @@ textarea.form-control-lg {
   color: #005ea5;
 }
 .card-header:hover {
-  background-color: #005ea5;
   color: #f8f8f8;
+  background-color: #005ea5;
   transition-duration: 0.3s;
 }
 .card-header:active {
-  border-bottom: #000 groove;
   background-color: gold;
+  border-bottom: #000 groove;
   transition: ease-in-out;
 }
 
@@ -11950,24 +11950,24 @@ textarea.form-control-lg {
 .loading-wheel-2 {
   width: 1em;
   height: 1em;
-  border-radius: 50%;
   margin: 40px;
-  animation: loading-frames 1.1s infinite ease;
   font-size: 8px;
   text-indent: -9999em;
+  border-radius: 50%;
   transform: translateZ(0);
+  animation: loading-frames 1.1s infinite ease;
 }
 
 .loading-wheel {
   width: 1em;
   height: 1em;
-  border-radius: 50%;
   margin: 40px;
   margin-left: 25px;
-  animation: loading-frames 1.1s infinite ease;
   font-size: 8px;
   text-indent: -9999em;
+  border-radius: 50%;
   transform: translateZ(0);
+  animation: loading-frames 1.1s infinite ease;
 }
 
 .head-space {

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Accordion as Accordion$1, createAll, Button as Button$1, Checkboxes as Checkboxes$1, ErrorSummary as ErrorSummary$1, Header as Header$1, Radios as Radios$1, SkipLink as SkipLink$1, Tabs as Tabs$1 } from 'govuk-frontend';
+import { Accordion as Accordion$1, createAll, Button as Button$1, Checkboxes as Checkboxes$1, ErrorSummary as ErrorSummary$1, ExitThisPage as ExitThisPage$1, Header as Header$1, PasswordInput as PasswordInput$1, Radios as Radios$1, SkipLink as SkipLink$1, Tabs as Tabs$1 } from 'govuk-frontend';
 import { Link, useLocation } from 'react-router-dom';
 import * as React from 'react';
 import React__default, { useContext, useMemo, createElement, Component, useState, useRef, useEffect } from 'react';
@@ -72,10 +72,10 @@ function ExtractAccordionConfigFromAttributes(remainingAttributes) {
     return accordionConfig;
 }
 
-const Accordion = ({ headingLevel: HeadingLevel = "h2", items, className, id, ...attributes }) => {
+const Accordion = ({ headingLevel: HeadingLevel = "h2", items = [], className, id, ...attributes }) => {
     const remainingAttributes = { ...attributes };
     ExtractAccordionConfigFromAttributes(remainingAttributes);
-    return (jsx("div", { ...remainingAttributes, id: id, className: `govuk-accordion ${className || ""}`, "data-module": "govuk-accordion", children: items.filter(Boolean).map((item, index) => (jsxs("div", { className: `govuk-accordion__section ${item.expanded ? "govuk-accordion__section--expanded" : ""}`, children: [jsxs("div", { className: "govuk-accordion__section-header", children: [jsx(HeadingLevel, { className: "govuk-accordion__section-heading", children: jsx("span", { className: "govuk-accordion__section-button", id: `${id}-heading-${index + 1}`, children: item.heading.children }) }), item.summary && (jsx("div", { className: "govuk-accordion__section-summary govuk-body", id: `${id}-summary-${index + 1}`, children: item.summary.children }))] }), 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))) }));
+    return (jsx("div", { ...remainingAttributes, id: id, className: `govuk-accordion ${className || ""}`, "data-module": "govuk-accordion", children: items.filter(Boolean).map((item, index) => (jsxs("div", { className: `govuk-accordion__section ${item.expanded ? "govuk-accordion__section--expanded" : ""}`, children: [jsxs("div", { className: "govuk-accordion__section-header", children: [jsx(HeadingLevel, { className: "govuk-accordion__section-heading", children: jsx("span", { className: "govuk-accordion__section-button", id: `${id}-heading-${index + 1}`, children: item.heading?.children }) }), item.summary && (jsx("div", { className: "govuk-accordion__section-summary govuk-body", id: `${id}-summary-${index + 1}`, children: item.summary.children }))] }), 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 }) => {
@@ -540,7 +540,7 @@ const CardTitle = /*#__PURE__*/React.forwardRef(({
 });
 CardTitle.displayName = 'CardTitle';
 
-const Card = /*#__PURE__*/React.forwardRef(({
+const Card$1 = /*#__PURE__*/React.forwardRef(({
   bsPrefix,
   className,
   bg,
@@ -562,8 +562,8 @@ const Card = /*#__PURE__*/React.forwardRef(({
     }) : children
   });
 });
-Card.displayName = 'Card';
-var Card$1 = Object.assign(Card, {
+Card$1.displayName = 'Card';
+var Card = Object.assign(Card$1, {
   Img: CardImg,
   Title: CardTitle,
   Subtitle: CardSubtitle,
@@ -577,7 +577,7 @@ var Card$1 = Object.assign(Card, {
 
 const CardColumn = (props) => {
     const { body, header, link } = props;
-    return (jsx("div", { className: "col", children: jsxs(Card$1, { className: "card-styles", children: [jsx(Link, { to: link, children: jsx(Card$1.Header, { className: "card-header govuk-!-font-size-27 govuk-!-font-weight-bold", children: header }) }), jsx(Card$1.Body, { className: "govuk-!-font-size-19", children: body })] }) }));
+    return (jsx("div", { className: "col", children: jsxs(Card, { className: "card-styles", children: [jsx(Link, { to: link, children: jsx(Card.Header, { className: "card-header govuk-!-font-size-27 govuk-!-font-weight-bold", children: header }) }), jsx(Card.Body, { className: "govuk-!-font-size-19", children: body })] }) }));
 };
 
 const CardLayout = (props) => {
@@ -811,6 +811,24 @@ function ConfigureOverallErrorSummary($scope, config) {
     createAll(ErrorSummary$1, config, $scope);
 }
 
+const ExitThisPage = ({ children = "Exit this page", className, redirectUrl = "https://www.bbc.co.uk/weather", activatedText, timedOutText, pressTwoMoreTimesText, pressOneMoreTimeText, ...attributes }) => {
+    const i18nProps = {};
+    if (activatedText)
+        i18nProps["data-i18n.activated"] = activatedText;
+    if (timedOutText)
+        i18nProps["data-i18n.timed-out"] = timedOutText;
+    if (pressTwoMoreTimesText)
+        i18nProps["data-i18n.press-two-more-times"] = pressTwoMoreTimesText;
+    if (pressOneMoreTimeText)
+        i18nProps["data-i18n.press-one-more-time"] = pressOneMoreTimeText;
+    return (jsx("div", { ...attributes, ...i18nProps, className: `govuk-exit-this-page${className ? ` ${className}` : ""}`, "data-module": "govuk-exit-this-page", children: jsxs("a", { href: redirectUrl, role: "button", draggable: false, className: "govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button", "data-module": "govuk-button", rel: "nofollow noreferrer", children: [jsx("span", { className: "govuk-visually-hidden", children: "Emergency" }), " ", children] }) }));
+};
+ExitThisPage.displayName = "ExitThisPage";
+
+function ConfigureOverallExitThisPage($scope) {
+    createAll(ExitThisPage$1, {}, $scope);
+}
+
 const FileUpload = (props) => {
     const { className, errorMessage, formGroup, hint, label, "aria-describedby": describedBy, id, ...attributes } = props;
     let hintComponent;
@@ -935,6 +953,17 @@ const NotificationBanner = (props) => {
     return (jsxs("div", { className: `govuk-notification-banner ${typeClass} ${className || ""}`, role: roleAttribute, "aria-labelledby": titleId, "data-module": "govuk-notification-banner", ...(disableAutoFocus ? { "data-disable-auto-focus": "true" } : {}), ...attributes, children: [jsx("div", { className: "govuk-notification-banner__header", children: jsx(HeadingLevel, { className: "govuk-notification-banner__title", id: titleId, children: title }) }), jsx("div", { className: "govuk-notification-banner__content", children: typeof children === "string" ? (jsx("p", { className: "govuk-notification-banner__heading", children: children })) : (children) })] }));
 };
 
+const SvgIcon = ({ type, ...props }) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 15, height: 13, "aria-hidden": "true", ...props, children: jsx("path", { d: type === "next"
+            ? "M8.107-.008L6.693 1.406 10.986 5.7H-2v2h12.896L6.71 11.676l1.378 1.449 6.744-6.406L8.107-.008z"
+            : "M6.594-.008-.133 6.72l6.744 6.406 1.377-1.449-4.185-3.977h12.896v-2H3.715l4.293-4.293L6.594-.008z" }) }));
+
+const NavigationButton = ({ href, type, children, labelText, }) => {
+    const defaultText = type === "next" ? "Next" : "Previous";
+    const typeClass = type === "next" ? "next" : "prev";
+    const icon = (jsx(SvgIcon, { type: type, className: `govuk-pagination__icon govuk-pagination__icon--${typeClass}`, focusable: "false", "aria-hidden": "true" }));
+    return (jsxs("a", { className: "govuk-link govuk-pagination__link", href: href, rel: type, children: [type === "previous" && icon, jsxs("span", { className: "govuk-pagination__link-title", children: [children ?? defaultText, jsx("span", { className: "govuk-visually-hidden", children: " page" })] }), type === "next" && icon, labelText && (jsxs(Fragment, { children: [jsx("span", { className: "govuk-visually-hidden", children: ":" }), jsx("span", { className: "govuk-pagination__link-label", children: labelText })] }))] }));
+};
+
 const DOTS = "...";
 const UsePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage, }) => {
     const range = (start, end) => {
@@ -970,29 +999,13 @@ const UsePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage, })
     return paginationRange;
 };
 
-const SvgIcon = ({ type, ...props }) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 15, height: 13, "aria-hidden": "true", ...props, children: jsx("path", { d: type === "next"
-            ? "M8.107-.008L6.693 1.406 10.986 5.7H-2v2h12.896L6.71 11.676l1.378 1.449 6.744-6.406L8.107-.008z"
-            : "M6.594-.008-.133 6.72l6.744 6.406 1.377-1.449-4.185-3.977h12.896v-2H3.715l4.293-4.293L6.594-.008z" }) }));
-
-const NavigationButton = ({ isDisabled, onClick, children, name, type, }) => {
-    const typeClass = type === "next" ? type : "prev";
-    const Icon = (jsx(SvgIcon, { type: type, className: `govuk-pagination__icon govuk-pagination__icon--${typeClass}`, focusable: "false" }));
-    return isDisabled ? (jsxs("div", { rel: type, children: [type === "previous" && Icon, jsx("span", { className: "govuk-pagination__link-title", children: name }), type === "next" && Icon, children && (jsxs(Fragment, { children: [type === "previous" && jsx(Fragment, { children: "\u00A0" }), jsx("span", { className: "govuk-visually-hidden", children: ":" }), children, type === "next" && jsx(Fragment, { children: " \u00A0" })] }))] })) : (jsxs("a", { className: "govuk-link govuk-pagination__link", href: "#", rel: type, onClick: onClick, children: [type === "previous" && Icon, jsx("span", { className: "govuk-pagination__link-title", children: name }), type === "next" && Icon, children && (jsxs(Fragment, { children: [type === "previous" && jsx(Fragment, { children: "\u00A0\u00A0" }), jsx("span", { className: "govuk-visually-hidden", children: ":" }), children, type === "next" && jsx(Fragment, { children: "\u00A0\u00A0" })] }))] }));
-};
-
-const Pagination = ({ onPageChange, totalCount, siblingCount = 1, currentPage, pageSize, className, previousName = "Previous", nextName = "Next", previousChildren, nextChildren, }) => {
-    const paginationRange = UsePagination({
-        currentPage,
-        totalCount,
-        siblingCount,
-        pageSize,
-    });
-    if (!paginationRange || paginationRange.length < 2)
+const Pagination = ({ previous, next, items, className, }) => {
+    if (!previous && !next && (!items || items.length === 0))
         return null;
-    const onNext = () => onPageChange(currentPage + 1);
-    const onPrevious = () => onPageChange(currentPage - 1);
-    const lastPage = paginationRange[paginationRange.length - 1];
-    return (jsxs(Fragment, { children: [jsx("div", { className: "govuk-!-padding-bottom-2" }), jsx("div", { className: `govuk-grid-column-full ${className || ""}`, children: jsxs("nav", { className: "govuk-pagination", role: "navigation", "aria-label": "Pagination", children: [jsx("div", { className: "govuk-pagination__prev", children: jsx(NavigationButton, { isDisabled: currentPage === 1, onClick: onPrevious, name: previousName, type: "previous", children: previousChildren }) }), jsx("ul", { className: "govuk-pagination__list", children: paginationRange.map((pageNumber, index) => pageNumber === DOTS ? (jsx("li", { className: "govuk-pagination__item govuk-pagination__item--ellipses", children: DOTS }, index)) : (jsx("li", { className: `govuk-pagination__item ${pageNumber === currentPage ? "govuk-pagination__item--current" : ""}`, children: jsx("a", { className: "govuk-link govuk-pagination__link", href: "#", "aria-label": `Page ${pageNumber}`, "aria-current": pageNumber === currentPage ? "page" : undefined, onClick: () => onPageChange(pageNumber), children: pageNumber }) }, index))) }), jsx("div", { className: "govuk-pagination__next", children: jsx(NavigationButton, { isDisabled: currentPage === lastPage, onClick: onNext, name: nextName, type: "next", children: nextChildren }) })] }) }), jsx("div", { className: "govuk-!-padding-bottom-4" })] }));
+    // Block layout is used when there are no numbered page items — govuk renders
+    // the nav with an extra class and the link title with --decorated modifier.
+    const isBlockLayout = !items || items.length === 0;
+    return (jsxs("nav", { className: `govuk-pagination${isBlockLayout ? " govuk-pagination--block" : ""}${className ? ` ${className}` : ""}`, role: "navigation", "aria-label": "Pagination", children: [previous && (jsx("div", { className: "govuk-pagination__prev", children: jsx(NavigationButton, { type: "previous", ...previous }) })), items && items.length > 0 && (jsx("ul", { className: "govuk-pagination__list", children: items.map((item, index) => item.ellipsis ? (jsx("li", { className: "govuk-pagination__item govuk-pagination__item--ellipses", children: DOTS }, index)) : (jsx("li", { className: `govuk-pagination__item${item.current ? " govuk-pagination__item--current" : ""}`, children: jsx("a", { className: "govuk-link govuk-pagination__link", href: item.href ?? "#", "aria-label": `Page ${item.number}`, ...(item.current ? { "aria-current": "page" } : {}), children: item.number }) }, index))) })), next && (jsx("div", { className: "govuk-pagination__next", children: jsx(NavigationButton, { type: "next", ...next }) }))] }));
 };
 
 const Panel = (props) => {
@@ -1001,6 +1014,49 @@ const Panel = (props) => {
     return (jsxs("div", { className: `govuk-panel govuk-panel--confirmation ${className || ""}`, ...attributes, children: [jsx(HeadingLevel, { className: "govuk-panel__title", children: titleChildren }), innerHtml] }));
 };
 
+const PasswordInput = React__default.forwardRef((props, ref) => {
+    const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, name, id, autoComplete = "current-password", showPasswordText = "Show", hidePasswordText = "Hide", showPasswordAriaLabelText = "Show password", hidePasswordAriaLabelText = "Hide password", passwordShownAnnouncementText, passwordHiddenAnnouncementText, ...attributes } = props;
+    let describedByValue = describedBy || "";
+    let hintComponent = null;
+    let errorMessageComponent = null;
+    if (hint) {
+        const hintId = `${id}-hint`;
+        describedByValue += ` ${hintId}`;
+        hintComponent = jsx(Hint, { ...hint, id: hintId });
+    }
+    if (errorMessage) {
+        const errorId = id ? `${id}-error` : "";
+        describedByValue += ` ${errorId}`;
+        errorMessageComponent = jsx(ErrorMessage, { ...errorMessage, id: errorId });
+    }
+    // Build i18n data attributes for the govuk-frontend JS module
+    const i18nProps = {};
+    if (showPasswordText)
+        i18nProps["data-i18n.show-password"] = showPasswordText;
+    if (hidePasswordText)
+        i18nProps["data-i18n.hide-password"] = hidePasswordText;
+    if (showPasswordAriaLabelText)
+        i18nProps["data-i18n.show-password-aria-label"] =
+            showPasswordAriaLabelText;
+    if (hidePasswordAriaLabelText)
+        i18nProps["data-i18n.hide-password-aria-label"] =
+            hidePasswordAriaLabelText;
+    if (passwordShownAnnouncementText)
+        i18nProps["data-i18n.password-shown-announcement"] =
+            passwordShownAnnouncementText;
+    if (passwordHiddenAnnouncementText)
+        i18nProps["data-i18n.password-hidden-announcement"] =
+            passwordHiddenAnnouncementText;
+    // Label handles isPageHeading internally — no extra wrapper needed here
+    const labelEl = jsx(Label, { ...label, htmlFor: id });
+    return (jsxs("div", { className: `govuk-form-group${formGroup?.className ? ` ${formGroup.className}` : ""}${errorMessage ? " govuk-form-group--error" : ""} govuk-password-input`, "data-module": "govuk-password-input", ...i18nProps, children: [labelEl, hintComponent, errorMessageComponent, jsxs("div", { className: "govuk-input__wrapper govuk-password-input__wrapper", children: [jsx("input", { ref: ref, id: id, className: `govuk-input govuk-password-input__input govuk-js-password-input-input${className ? ` ${className}` : ""}${errorMessage ? " govuk-input--error" : ""}`, name: name || id, type: "password", spellCheck: false, autoComplete: autoComplete, autoCapitalize: "none", "aria-describedby": describedByValue.trim() || undefined, ...attributes }), jsx("button", { type: "button", className: "govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle", "data-module": "govuk-button", "aria-controls": id, "aria-label": showPasswordAriaLabelText, hidden: true, children: showPasswordText })] })] }));
+});
+PasswordInput.displayName = "PasswordInput";
+
+function ConfigureOverallPasswordInput($scope) {
+    createAll(PasswordInput$1, {}, $scope);
+}
+
 function Slugify(str) {
     str = str.replace(/^\s+|\s+$/g, ""); // trim leading/trailing white space
     str = str.toLowerCase(); // convert string to lowercase
@@ -1168,7 +1224,7 @@ const PDFViewer = (props) => {
             // 1) Let ResolvePDFSource handle base64/data/blob inputs synchronously.
             try {
                 const resolved = ResolvePDFSource(src);
-                if (resolved && resolved.source) {
+                if (resolved?.source) {
                     sourceToUse = resolved.source;
                     if (resolved.isBase64Source) {
                         // ResolvePDFSource created an object URL for us (data/blob/base64)
@@ -1195,11 +1251,7 @@ const PDFViewer = (props) => {
                         signal: controller.signal,
                         credentials: "omit",
                     });
-                    if (!resp.ok) {
-                        console.warn(`PDFViewer: fetch returned ${resp.status} ${resp.statusText} for ${src}`);
-                        // fallback: keep using original src
-                    }
-                    else {
+                    if (resp.ok) {
                         const blob = await resp.blob();
                         if (blob && blob.size > 0) {
                             const obj = URL.createObjectURL(blob);
@@ -1211,9 +1263,13 @@ const PDFViewer = (props) => {
                             console.warn("PDFViewer: fetched blob is empty - falling back to original src");
                         }
                     }
+                    else {
+                        console.warn(`PDFViewer: fetch returned ${resp.status} ${resp.statusText} for ${src}`);
+                        // fallback: keep using original src
+                    }
                 }
                 catch (err) {
-                    if (err?.name === "AbortError") {
+                    if (err instanceof Error && err.name === "AbortError") {
                         // aborted, nothing to do
                         if (!mounted)
                             return;
@@ -1526,5 +1582,5 @@ const WarningText = ({ children = "Warning message", className, ...attributes })
     return (jsxs("div", { className: `govuk-warning-text ${className || ""}`, ...attributes, children: [jsx("span", { className: "govuk-warning-text__icon", "aria-hidden": "true", children: "!" }), jsxs("strong", { className: "govuk-warning-text__text", children: [jsx("span", { className: "govuk-visually-hidden", children: "Warning" }), children] })] }));
 };
 
-export { Accordion, ActionLink, BackLink, Boolean$1 as Boolean, Breadcrumbs, Button, CardColumn, CardLayout, CharacterCount, Checkboxes as Checkbox, ConfigureOverallAccordion, ConfigureOverallButton, ConfigureOverallCheckboxes, ConfigureOverallErrorSummary, ConfigureOverallHeader, ConfigureOverallRadios, ConfigureOverallSkipLink, ConfigureOverallTabs, CookieBanner, DataNavigation, DateInput, Details, DifferenceNavigation, ErrorBoundary, ErrorMessage, ErrorSummary, ExtractAccordionConfigFromAttributes, Fieldset, FileUpload, Footer, Header, Hint, Input, InsetText, Label, Landing, LinkWithRef, Loading, Main, NotFoundPage, NotificationBanner, PDFViewer, PDFViewerBackend, Pagination, Panel, PhaseBanner, ProblemWithService, Radios, Select, ServiceNavigation, SkipLink, SummaryList, Table, Tabs, Tag, TaskList, Textarea, WarningInfo, WarningText };
+export { Accordion, ActionLink, BackLink, Boolean$1 as Boolean, Breadcrumbs, Button, CardColumn, CardLayout, CharacterCount, Checkboxes as Checkbox, ConfigureOverallAccordion, ConfigureOverallButton, ConfigureOverallCheckboxes, ConfigureOverallErrorSummary, ConfigureOverallExitThisPage, ConfigureOverallHeader, ConfigureOverallPasswordInput, ConfigureOverallRadios, ConfigureOverallSkipLink, ConfigureOverallTabs, CookieBanner, DOTS, DataNavigation, DateInput, Details, DifferenceNavigation, ErrorBoundary, ErrorMessage, ErrorSummary, ExitThisPage, ExtractAccordionConfigFromAttributes, Fieldset, FileUpload, Footer, Header, Hint, Input, InsetText, Label, Landing, LinkWithRef, Loading, Main, NotFoundPage, NotificationBanner, PDFViewer, PDFViewerBackend, Pagination, Panel, PasswordInput, PhaseBanner, ProblemWithService, Radios, Select, ServiceNavigation, SkipLink, SummaryList, Table, Tabs, Tag, TaskList, Textarea, UsePagination, WarningInfo, WarningText };
 //# sourceMappingURL=index.esm.js.map