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

package/dist/index.d.ts

@@ -162,6 +162,26 @@ interface CardColumnProps {
     link: string;
     header: string;
     body: string;
+    /**
+     * Text colour of the card header in its resting state.
+     *
+     * Defaults to the GOV.UK brand colour via the CSS custom property set by
+     * govuk-functional-colour("brand") in the SCSS — so if you've overridden
+     * $govuk-functional-colours at the Sass level, this default will follow.
+     *
+     * Pass an explicit value only when you need a per-instance override that
+     * sits outside the govuk-frontend theming system.
+     */
+    textColor?: string;
+    /**
+     * Background colour applied to the card header on hover.
+     *
+     * Defaults to the GOV.UK header background colour via the CSS custom
+     * property set by govuk-functional-colour("header-background") in the SCSS.
+     *
+     * Pass an explicit value only when you need a per-instance override.
+     */
+    hoverColor?: string;
 }
 
 declare const CardColumn: React$1.FC<CardColumnProps>;
@@ -221,11 +241,36 @@ declare const CookieBanner: React$1.FC<CookieBannerProps & HTMLAttributes<HTMLDi
 interface DataNavigationProps {
     dataId: number;
     setDataFocus: (id: number) => void;
-    previousText: string;
+    previousText?: string;
     previousCondition: boolean;
-    nextText: string;
+    nextText?: string;
     nextCondition: boolean;
     dataDescription?: string;
+    /**
+     * Background colour of the navigation buttons in their resting state.
+     * Defaults to govuk-functional-colour("brand") (#1d70b8).
+     */
+    buttonColour?: string;
+    /**
+     * Text colour of the navigation buttons in their resting state.
+     * Defaults to govuk-colour("white") (#ffffff).
+     */
+    buttonTextColour?: string;
+    /**
+     * Shadow colour of the navigation buttons.
+     * Defaults to govuk-colour("black") (#0b0c0c).
+     */
+    buttonShadowColour?: string;
+    /**
+     * Background colour of the navigation buttons on hover.
+     * Defaults to govuk-functional-colour("focus") (#ffdd00).
+     */
+    buttonHoverColour?: string;
+    /**
+     * Text colour of the navigation buttons on hover.
+     * Defaults to govuk-functional-colour("focus-text") (#0b0c0c).
+     */
+    buttonHoverTextColour?: string;
 }
 
 declare const DataNavigation: React$1.FC<DataNavigationProps>;
@@ -273,6 +318,31 @@ interface DifferenceNavigationProps {
     totalDifferences: number;
     keyword?: string;
     plural?: string;
+    /**
+     * Background colour of the navigation buttons in their resting state.
+     * Defaults to govuk-functional-colour("brand") (#1d70b8).
+     */
+    buttonColour?: string;
+    /**
+     * Text colour of the navigation buttons in their resting state.
+     * Defaults to govuk-colour("white") (#ffffff).
+     */
+    buttonTextColour?: string;
+    /**
+     * Shadow colour of the navigation buttons.
+     * Defaults to govuk-colour("black") (#0b0c0c).
+     */
+    buttonShadowColour?: string;
+    /**
+     * Background colour of the navigation buttons on hover.
+     * Defaults to govuk-functional-colour("focus") (#ffdd00).
+     */
+    buttonHoverColour?: string;
+    /**
+     * Text colour of the navigation buttons on hover.
+     * Defaults to govuk-functional-colour("focus-text") (#0b0c0c).
+     */
+    buttonHoverTextColour?: string;
 }
 
 declare const DifferenceNavigation: React$1.FC<DifferenceNavigationProps>;
@@ -315,6 +385,27 @@ declare const ErrorSummary: React$1.FC<ErrorSummaryProps>;
 
 declare function ConfigureOverallErrorSummary($scope?: Document | Element, config?: ErrorSummaryConfig): void;
 
+interface ExitThisPageProps extends HTMLAttributes<HTMLDivElement> {
+    /** Button label — defaults to "Exit this page". Maps from fixture `text`/`html` via processExampleData → children */
+    children?: ReactNode;
+    /** Additional CSS classes for the wrapper div. Maps from fixture `classes` → className */
+    className?: string;
+    /** URL the button links to. Defaults to "https://www.bbc.co.uk/weather" */
+    redirectUrl?: string;
+    /** i18n: text announced when the page exit is activated */
+    activatedText?: string;
+    /** i18n: text announced when the keyboard shortcut times out */
+    timedOutText?: string;
+    /** i18n: text announced when the shortcut still needs two more presses */
+    pressTwoMoreTimesText?: string;
+    /** i18n: text announced when the shortcut needs one more press */
+    pressOneMoreTimeText?: string;
+}
+
+declare const ExitThisPage: React$1.FC<ExitThisPageProps>;
+
+declare function ConfigureOverallExitThisPage($scope?: Document | Element): void;
+
 declare const Fieldset: React$1.FC<FieldsetProps>;
 
 interface FileUploadProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -357,11 +448,18 @@ interface Meta {
     items?: MetaItem[];
     children?: React.ReactNode;
 }
+interface ContentLicence {
+    className?: string;
+    children: React.ReactNode;
+    reactListKey?: string | number;
+    [key: string]: unknown;
+}
 interface FooterProps extends HTMLAttributes<HTMLElement> {
     className?: string;
     containerClassName?: string;
     meta?: Meta;
     navigation?: NavigationItem$2[];
+    contentLicence?: ContentLicence;
 }
 
 declare const Footer: React$1.FC<FooterProps>;
@@ -480,21 +578,39 @@ interface NotificationBannerProps {
 
 declare const NotificationBanner: React$1.FC<NotificationBannerProps>;
 
+interface PaginationItemProps {
+    /** Page number or label (e.g. 1, "one"). Omit when ellipsis is true. */
+    number?: number | string;
+    href?: string;
+    current?: boolean;
+    ellipsis?: boolean;
+}
+interface PaginationNavProps {
+    href: string;
+    /** Override the default "Previous" / "Next" link text.
+     *  Populated automatically from fixture `text` by ProcessExampleData (text → children). */
+    children?: React.ReactNode;
+    /** Secondary label rendered below the link title (block-layout mode). */
+    labelText?: string;
+}
 interface PaginationProps {
-    onPageChange: (page: number) => void;
-    totalCount: number;
-    siblingCount?: number;
-    currentPage: number;
-    pageSize: number;
+    previous?: PaginationNavProps;
+    next?: PaginationNavProps;
+    items?: PaginationItemProps[];
     className?: string;
-    previousName?: string;
-    previousChildren?: React.ReactNode;
-    nextName?: string;
-    nextChildren?: React.ReactNode;
 }
 
 declare const Pagination: React$1.FC<PaginationProps>;
 
+declare const DOTS = "...";
+interface UsePaginationProps {
+    totalCount: number;
+    pageSize: number;
+    siblingCount?: number;
+    currentPage: number;
+}
+declare const UsePagination: ({ totalCount, pageSize, siblingCount, currentPage, }: UsePaginationProps) => (number | string)[] | undefined;
+
 interface PanelProps extends HTMLAttributes<HTMLDivElement> {
     headingLevel?: ElementType;
     className?: string;
@@ -504,6 +620,60 @@ interface PanelProps extends HTMLAttributes<HTMLDivElement> {
 
 declare const Panel: React$1.FC<PanelProps>;
 
+interface PasswordInputLabelProps {
+    children?: React.ReactNode;
+    className?: string;
+    isPageHeading?: boolean;
+    [key: string]: unknown;
+}
+interface PasswordInputProps {
+    /** Additional CSS classes for the `<input>` element. Maps from fixture `classes` → className */
+    className?: string;
+    /** Pre-existing aria-describedby value to prepend */
+    "aria-describedby"?: string;
+    /** Error message sub-object — `{ children }` after processExampleData transforms `text` */
+    errorMessage?: {
+        children?: React.ReactNode;
+        [key: string]: unknown;
+    };
+    /** Wrapper div options */
+    formGroup?: {
+        className?: string;
+        [key: string]: unknown;
+    };
+    /** Hint sub-object — `{ children }` after processExampleData transforms `text` */
+    hint?: {
+        children?: React.ReactNode;
+        [key: string]: unknown;
+    };
+    /** Label sub-object — `{ children, className, isPageHeading }` */
+    label?: PasswordInputLabelProps;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute — also used to link label and aria-describedby */
+    id?: string;
+    /** autocomplete attribute — defaults to "current-password" */
+    autoComplete?: string;
+    /** i18n: label for the show-password button (default: "Show") */
+    showPasswordText?: string;
+    /** i18n: label for the hide-password button (default: "Hide") */
+    hidePasswordText?: string;
+    /** i18n: aria-label for the show-password button */
+    showPasswordAriaLabelText?: string;
+    /** i18n: aria-label for the hide-password button */
+    hidePasswordAriaLabelText?: string;
+    /** i18n: text announced when the password becomes visible */
+    passwordShownAnnouncementText?: string;
+    /** i18n: text announced when the password is hidden */
+    passwordHiddenAnnouncementText?: string;
+    /** Allow pass-through of any other HTML input attributes */
+    [key: string]: unknown;
+}
+
+declare const PasswordInput: React$1.FC<PasswordInputProps & React$1.InputHTMLAttributes<HTMLInputElement>>;
+
+declare function ConfigureOverallPasswordInput($scope?: Document | Element): void;
+
 interface PDFJsProps {
     iframeId: string;
     source: string;
@@ -740,4 +910,5 @@ interface WarningTextProps {
 
 declare const WarningText: React$1.FC<WarningTextProps & HTMLAttributes<HTMLDivElement>>;
 
-export { Accordion, ActionLink, BackLink, 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, 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 };
+export type { PaginationItemProps, PaginationNavProps, PaginationProps };

package/dist/index.esm.css

@@ -1,4 +1,11 @@
 @charset "UTF-8";
+
+
+
+
+
+
+
 /*!
  * Bootstrap  v5.3.8 (https://getbootstrap.com/)
  * Copyright 2011-2025 The Bootstrap Authors
@@ -11860,26 +11867,26 @@ textarea.form-control-lg {
   }
 }
 .card-link {
-  color: #1d70b8;
+  color: var(--card-text-color, var(--govuk-link-colour, #1a65a6));
 }
-
-.card-link :hover {
-  border-color: #fd0;
-  color: #003078;
+.card-link:hover {
+  color: var(--card-hover-color, var(--govuk-link-hover-colour, #0f385c));
+  border-color: var(--govuk-focus-colour, #ffdd00);
 }
 
 .card-header {
   padding-bottom: 65px;
-  color: #005ea5;
+  color: var(--card-text-color, var(--govuk-brand-colour, #1d70b8));
+  transition-duration: 0.3s;
 }
 .card-header:hover {
-  background-color: #005ea5;
-  color: #f8f8f8;
-  transition-duration: 0.3s;
+  color: #ffffff;
+  background-color: var(--card-hover-color, #0b0c0c);
 }
 .card-header:active {
-  border-bottom: #000 groove;
-  background-color: gold;
+  color: var(--govuk-focus-text-colour, #0b0c0c);
+  background-color: var(--govuk-focus-colour, #ffdd00);
+  border-bottom: var(--govuk-focus-text-colour, #0b0c0c) groove;
   transition: ease-in-out;
 }
 
@@ -11950,24 +11957,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 {