@i-dot-ai-npm/component-library-react 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "React components for i.AI GOV.UK (auto-generated from HTML specs).",
   "type": "module",
   "exports": {

package/src/breadcrumbs/BreadcrumbItem.tsx

@@ -10,6 +10,14 @@ type BreadcrumbItemProps = {
 export default function BreadcrumbItem({ href, class: className, children, ...rest }: BreadcrumbItemProps) {
     const classes = ["govuk-breadcrumbs__list-item", className ?? ""].filter(Boolean).join(" ");
 
+    if (href === undefined) {
+        return (
+            <li className={classes} aria-current="page" {...rest}>
+                {children ?? ""}
+            </li>
+        );
+    }
+
     return (
         <li className={classes} {...rest}>
             <a className="govuk-breadcrumbs__link" href={href}>

package/src/button/Button.tsx

@@ -6,22 +6,41 @@ type ButtonProps = {
     warning?: boolean;
     inverse?: boolean;
     small?: boolean;
+    startButton?: boolean;
     href?: string;
+    type?: "button" | "reset" | "submit";
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function Button({ secondary, tertiary, warning, inverse, small, href, class: className, children, ...rest }: ButtonProps) {
+const StartIcon = () => (
+    <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"
+    >
+        <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+    </svg>
+);
+
+export default function Button({ secondary, tertiary, warning, inverse, small, startButton, href, type, class: className, children, ...rest }: ButtonProps) {
+    const classes = ["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", startButton ? "govuk-button--start" : "", className ?? ""].filter(Boolean).join(" ");
 
     return (
         href ? (
-            <a href={href} role="button" className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+            <a href={href} role="button" draggable="false" className={classes} data-module="govuk-button" {...rest}>
                 {children ?? ""}
+                {startButton ? <StartIcon /> : null}
             </a>
         ) : (
-            <button className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", className ?? ""].filter(Boolean).join(" ")} data-module="govuk-button" {...rest}>
+            <button type={type ?? "submit"} className={classes} data-module="govuk-button" {...rest}>
                 {children ?? ""}
+                {startButton ? <StartIcon /> : null}
             </button>
         )
     );

package/src/character-count/CharacterCount.tsx

@@ -1,12 +1,15 @@
+import { ReactNode } from 'react';
+
 type CharacterCountProps = {
     class?: string;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function CharacterCount({ class: className, ...rest }: CharacterCountProps) {
+export default function CharacterCount({ class: className, children, ...rest }: CharacterCountProps) {
     const classes = ["govuk-textarea govuk-js-character-count", className ?? ""].filter(Boolean).join(" ");
 
     return (
-        <textarea className={classes} {...rest}></textarea>
+        <textarea className={classes} {...rest}>{children ?? ""}</textarea>
     );
 }

package/src/checkboxes/CheckboxConditional.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+type CheckboxConditionalProps = {
+    hidden?: boolean;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function CheckboxConditional({ hidden = true, class: className, children, ...rest }: CheckboxConditionalProps) {
+    const classes = [
+        "govuk-checkboxes__conditional",
+        hidden ? "govuk-checkboxes__conditional--hidden" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/date-input/DateInputField.tsx

@@ -4,10 +4,10 @@ type DateInputFieldProps = {
     [key: string]: unknown;
 };
 
-export default function DateInputField({ width = "2", class: className, ...rest }: DateInputFieldProps) {
+export default function DateInputField({ width, class: className, ...rest }: DateInputFieldProps) {
     const classes = [
         "govuk-input govuk-date-input__input",
-        ({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width] ?? ""),
+        ({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width ?? ""] ?? ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/error-message/ErrorMessage.tsx

@@ -1,19 +1,20 @@
 import { ReactNode } from 'react';
 
 type ErrorMessageProps = {
+    visuallyHiddenText?: string;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function ErrorMessage({ class: className, children, ...rest }: ErrorMessageProps) {
+export default function ErrorMessage({ visuallyHiddenText = "Error", class: className, children, ...rest }: ErrorMessageProps) {
     const classes = ["govuk-error-message", className ?? ""].filter(Boolean).join(" ");
 
     return (
         <p className={classes} {...rest}>
-            <span className="govuk-visually-hidden">
-                Error:
-            </span>
+            {visuallyHiddenText ? (
+                <span className="govuk-visually-hidden">{visuallyHiddenText}:</span>
+            ) : null}{" "}
             {children ?? ""}
         </p>
     );

package/src/error-summary/ErrorSummaryItem.tsx

@@ -1,17 +1,20 @@
 import { ReactNode } from 'react';
 
 type ErrorSummaryItemProps = {
+    href?: string;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function ErrorSummaryItem({ class: className, children, ...rest }: ErrorSummaryItemProps) {
-    const classes = ["", className ?? ""].filter(Boolean).join(" ");
+export default function ErrorSummaryItem({ href, class: className, children, ...rest }: ErrorSummaryItemProps) {
+    if (href === undefined) {
+        return <li>{children ?? ""}</li>;
+    }
 
     return (
         <li>
-            <a className={classes} {...rest}>
+            <a href={href} className={className} {...rest}>
                 {children ?? ""}
             </a>
         </li>

package/src/exit-this-page/ExitThisPage.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+
+type ExitThisPageProps = {
+    redirectUrl?: string;
+    id?: string;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ExitThisPage({
+    redirectUrl = 'https://www.bbc.co.uk/weather',
+    id,
+    class: className,
+    children,
+    ...rest
+}: ExitThisPageProps) {
+    const classes = ['govuk-exit-this-page', className ?? ''].filter(Boolean).join(' ');
+
+    return (
+        <div id={id} className={classes} data-module="govuk-exit-this-page" {...rest}>
+            <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 ? (
+                    children
+                ) : (
+                    <>
+                        <span className="govuk-visually-hidden">Emergency</span> Exit this page
+                    </>
+                )}
+            </a>
+        </div>
+    );
+}

package/src/feedback/Feedback.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+type FeedbackProps = {
+    title?: string;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Feedback({ title, class: className, children, ...rest }: FeedbackProps) {
+    const classes = ["govuk-feedback govuk-width-container", className ?? ""]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-two-thirds">
+                    <h2 className="govuk-feedback__title">{title}</h2>
+                    {children != null && children !== "" ? (
+                        <div className="govuk-feedback__body">{children}</div>
+                    ) : null}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/fieldset/FieldsetLegend.tsx

@@ -2,12 +2,13 @@ import { ReactNode } from 'react';
 
 type FieldsetLegendProps = {
     size?: "small" | "medium" | "large" | "xl";
+    isPageHeading?: boolean;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function FieldsetLegend({ size, class: className, children, ...rest }: FieldsetLegendProps) {
+export default function FieldsetLegend({ size, isPageHeading, class: className, children, ...rest }: FieldsetLegendProps) {
     const classes = [
         "govuk-fieldset__legend",
         ({ "small": "govuk-fieldset__legend--s", "medium": "govuk-fieldset__legend--m", "large": "govuk-fieldset__legend--l", "xl": "govuk-fieldset__legend--xl" }[size] ?? ""),
@@ -18,7 +19,9 @@ export default function FieldsetLegend({ size, class: className, children, ...re
 
     return (
         <legend className={classes} {...rest}>
-            {children ?? ""}
+            {isPageHeading
+                ? <h1 className="govuk-fieldset__heading">{children ?? ""}</h1>
+                : children ?? ""}
         </legend>
     );
 }

package/src/footer/Footer.tsx

@@ -0,0 +1,203 @@
+import { ReactNode } from 'react';
+
+function FooterCrown() {
+    return (
+        <svg
+            focusable="false"
+            role="presentation"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 64 60"
+            height="30"
+            width="32"
+            fill="currentcolor"
+            className="govuk-footer__crown"
+        >
+            <g>
+                <circle cx="20" cy="17.6" r="3.7" />
+                <circle cx="10.2" cy="23.5" r="3.7" />
+                <circle cx="3.7" cy="33.2" r="3.7" />
+                <circle cx="31.7" cy="30.6" r="3.7" />
+                <circle cx="43.3" cy="17.6" r="3.7" />
+                <circle cx="53.2" cy="23.5" r="3.7" />
+                <circle cx="59.7" cy="33.2" r="3.7" />
+                <circle cx="31.7" cy="30.6" r="3.7" />
+                <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
+            </g>
+        </svg>
+    );
+}
+
+function FooterLicenceLogo() {
+    return (
+        <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"
+        >
+            <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"
+            />
+        </svg>
+    );
+}
+
+type FooterNavItem = { href?: string; text?: string; attributes?: Record<string, string> };
+type FooterNav = { title?: string; columns?: number; width?: string; items?: FooterNavItem[] };
+type FooterMetaItem = { href?: string; text?: string; attributes?: Record<string, string> };
+type FooterMeta = {
+    visuallyHiddenTitle?: string;
+    items?: FooterMetaItem[];
+    text?: string;
+    /** Re-authored meta content (raw govuk `meta.html`). */
+    content?: ReactNode;
+};
+type FooterLicence = {
+    text?: string;
+    /** Re-authored licence content (raw govuk `contentLicence.html`). */
+    content?: ReactNode;
+} | null;
+type FooterCopyright = {
+    text?: string;
+    /** Re-authored copyright content (raw govuk `copyright.html`). */
+    content?: ReactNode;
+};
+
+type FooterProps = {
+    navigation?: FooterNav[];
+    meta?: FooterMeta;
+    contentLicence?: FooterLicence;
+    copyright?: FooterCopyright;
+    containerClasses?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+
+export default function Footer({
+    navigation,
+    meta,
+    contentLicence,
+    copyright,
+    containerClasses,
+    class: className,
+    ...rest
+}: FooterProps) {
+    const classes = ['govuk-footer', className ?? ''].filter(Boolean).join(' ');
+    const containerClass = ['govuk-width-container', containerClasses ?? '']
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div className={classes} {...rest}>
+            <div className={containerClass}>
+                <FooterCrown />
+                {navigation && navigation.length > 0 && (
+                    <>
+                        <div className="govuk-footer__navigation">
+                            {navigation.map((nav, i) => (
+                                <div
+                                    key={i}
+                                    className={`govuk-footer__section govuk-grid-column-${nav.width ?? 'full'}`}
+                                >
+                                    <h2 className="govuk-footer__heading govuk-heading-m">{nav.title}</h2>
+                                    {nav.items && nav.items.length > 0 && (
+                                        <ul
+                                            className={[
+                                                'govuk-footer__list',
+                                                nav.columns ? `govuk-footer__list--columns-${nav.columns}` : '',
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' ')}
+                                        >
+                                            {nav.items
+                                                .filter((item) => item.href && item.text)
+                                                .map((item, j) => (
+                                                    <li key={j} className="govuk-footer__list-item">
+                                                        <a
+                                                            className="govuk-footer__link"
+                                                            href={item.href}
+                                                            {...(item.attributes ?? {})}
+                                                        >
+                                                            {item.text}
+                                                        </a>
+                                                    </li>
+                                                ))}
+                                        </ul>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                        <hr className="govuk-footer__section-break" />
+                    </>
+                )}
+                <div className="govuk-footer__meta">
+                    <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
+                        {meta && (
+                            <>
+                                <h2 className="govuk-visually-hidden">
+                                    {meta.visuallyHiddenTitle ?? 'Support links'}
+                                </h2>
+                                {meta.items && meta.items.length > 0 && (
+                                    <ul className="govuk-footer__inline-list">
+                                        {meta.items.map((item, i) => (
+                                            <li key={i} className="govuk-footer__inline-list-item">
+                                                <a
+                                                    className="govuk-footer__link"
+                                                    href={item.href}
+                                                    {...(item.attributes ?? {})}
+                                                >
+                                                    {item.text}
+                                                </a>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                )}
+                                {(meta.content || meta.text) && (
+                                    <div className="govuk-footer__meta-custom">
+                                        {meta.content ?? meta.text}
+                                    </div>
+                                )}
+                            </>
+                        )}
+                        {contentLicence !== null && (
+                            <>
+                                <FooterLicenceLogo />
+                                <span className="govuk-footer__licence-description">
+                                    {contentLicence && (contentLicence.content || contentLicence.text) ? (
+                                        contentLicence.content ?? contentLicence.text
+                                    ) : (
+                                        <>
+                                            All content is available under the{' '}
+                                            <a
+                                                className="govuk-footer__link"
+                                                href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+                                                rel="license"
+                                            >
+                                                Open Government Licence v3.0
+                                            </a>
+                                            , except where otherwise stated
+                                        </>
+                                    )}
+                                </span>
+                            </>
+                        )}
+                    </div>
+                    <div className="govuk-footer__meta-item">
+                        <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/"
+                        >
+                            {copyright && (copyright.content || copyright.text)
+                                ? (copyright.content ?? copyright.text)
+                                : '© Crown copyright'}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/govuk-header/GovukHeader.tsx

@@ -0,0 +1,61 @@
+const CROWN_LOGO = `<svg
+            focusable="false"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 324 60"
+            height="30"
+            width="162"
+            fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
+          ><title>GOV.UK</title>    <g>
+                <circle cx="20" cy="17.6" r="3.7"/>
+                <circle cx="10.2" cy="23.5" r="3.7"/>
+                <circle cx="3.7" cy="33.2" r="3.7"/>
+                <circle cx="31.7" cy="30.6" r="3.7"/>
+                <circle cx="43.3" cy="17.6" r="3.7"/>
+                <circle cx="53.2" cy="23.5" r="3.7"/>
+                <circle cx="59.7" cy="33.2" r="3.7"/>
+                <circle cx="31.7" cy="30.6" r="3.7"/>
+                <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
+              </g>
+              <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"/>
+              <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"/>
+          </svg>`;
+
+type GovukHeaderProps = {
+    homepageUrl?: string;
+    productName?: string;
+    containerClasses?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+
+export default function GovukHeader({
+    homepageUrl = '//gov.uk',
+    productName,
+    containerClasses = 'govuk-width-container',
+    class: className,
+    ...rest
+}: GovukHeaderProps) {
+    const classes = ['govuk-header', className ?? ''].filter(Boolean).join(' ');
+    const containerClass = ['govuk-header__container', containerClasses]
+        .filter(Boolean)
+        .join(' ');
+
+    const linkHtml = productName
+        ? `${CROWN_LOGO}<span class="govuk-header__product-name">${productName}</span>`
+        : CROWN_LOGO;
+
+    return (
+        <div className={classes} {...rest}>
+            <div className={containerClass}>
+                <div className="govuk-header__logo">
+                    <a
+                        href={homepageUrl}
+                        className="govuk-header__homepage-link"
+                        dangerouslySetInnerHTML={{ __html: linkHtml }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/header/Header.tsx

@@ -3,16 +3,18 @@ import { ReactNode } from 'react';
 type HeaderProps = {
     href?: string;
     class?: string;
+    containerClasses?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function Header({ href, class: className, children, ...rest }: HeaderProps) {
+export default function Header({ href, class: className, containerClasses, children, ...rest }: HeaderProps) {
     const classes = ["govuk-generic-header", className ?? ""].filter(Boolean).join(" ");
+    const container = ["govuk-generic-header__container", containerClasses || "govuk-width-container"].join(" ");
 
     return (
         <div className={classes} {...rest}>
-            <div className="govuk-generic-header__container govuk-width-container">
+            <div className={container}>
                 <div className="govuk-generic-header__logo">
                     <a className="govuk-generic-header__homepage-link" href={href}>
                         {children ?? ""}

package/src/index.ts

@@ -17,6 +17,7 @@ export { default as CardLink } from "./card/CardLink";
 export { default as Card } from "./card/Card";
 export { default as CharacterCountMessage } from "./character-count/CharacterCountMessage";
 export { default as CharacterCount } from "./character-count/CharacterCount";
+export { default as CheckboxConditional } from "./checkboxes/CheckboxConditional";
 export { default as CheckboxDivider } from "./checkboxes/CheckboxDivider";
 export { default as CheckboxInput } from "./checkboxes/CheckboxInput";
 export { default as CheckboxItem } from "./checkboxes/CheckboxItem";
@@ -39,15 +40,22 @@ export { default as ErrorSummaryItem } from "./error-summary/ErrorSummaryItem";
 export { default as ErrorSummaryList } from "./error-summary/ErrorSummaryList";
 export { default as ErrorSummaryTitle } from "./error-summary/ErrorSummaryTitle";
 export { default as ErrorSummary } from "./error-summary/ErrorSummary";
+export { default as ExitThisPage } from "./exit-this-page/ExitThisPage";
 export { default as FieldsetLegend } from "./fieldset/FieldsetLegend";
 export { default as Fieldset } from "./fieldset/Fieldset";
+export { default as Feedback } from "./feedback/Feedback";
 export { default as FileUpload } from "./file-upload/FileUpload";
+export { default as Footer } from "./footer/Footer";
 export { default as FormGroup } from "./form-group/FormGroup";
+export { default as GovukHeader } from "./govuk-header/GovukHeader";
 export { default as Header } from "./header/Header";
 export { default as Hint } from "./hint/Hint";
 export { default as Input } from "./input/Input";
 export { default as InputLabel } from "./input-label/InputLabel";
 export { default as InsetText } from "./inset-text/InsetText";
+export { default as Label } from "./label/Label";
+export { default as LanguageNavigationItem } from "./language-navigation/LanguageNavigationItem";
+export { default as LanguageNavigation } from "./language-navigation/LanguageNavigation";
 export { default as Link } from "./link/Link";
 export { default as ListItem } from "./list/ListItem";
 export { default as List } from "./list/List";
@@ -61,11 +69,18 @@ export { default as PaginationList } from "./pagination/PaginationList";
 export { default as PaginationNext } from "./pagination/PaginationNext";
 export { default as PaginationPrev } from "./pagination/PaginationPrev";
 export { default as Pagination } from "./pagination/Pagination";
+export { default as PanelTitle } from "./panel/PanelTitle";
+export { default as PanelBody } from "./panel/PanelBody";
+export { default as PanelActions } from "./panel/PanelActions";
+export { default as Panel } from "./panel/Panel";
 export { default as PasswordInput } from "./password-input/PasswordInput";
 export { default as PhaseBanner } from "./phase-banner/PhaseBanner";
+export { default as PhaseBannerText } from "./phase-banner/PhaseBannerText";
+export { default as RadioConditional } from "./radios/RadioConditional";
 export { default as RadioDivider } from "./radios/RadioDivider";
 export { default as RadioInput } from "./radios/RadioInput";
 export { default as RadioItem } from "./radios/RadioItem";
+export { default as RadioLabel } from "./radios/RadioLabel";
 export { default as Radios } from "./radios/Radios";
 export { default as SelectOption } from "./select/SelectOption";
 export { default as Select } from "./select/Select";
@@ -83,6 +98,12 @@ export { default as SummaryListKey } from "./summary-list/SummaryListKey";
 export { default as SummaryListRow } from "./summary-list/SummaryListRow";
 export { default as SummaryListValue } from "./summary-list/SummaryListValue";
 export { default as SummaryList } from "./summary-list/SummaryList";
+export { default as SummaryCard } from "./summary-card/SummaryCard";
+export { default as SummaryCardTitleWrapper } from "./summary-card/SummaryCardTitleWrapper";
+export { default as SummaryCardTitle } from "./summary-card/SummaryCardTitle";
+export { default as SummaryCardActions } from "./summary-card/SummaryCardActions";
+export { default as SummaryCardAction } from "./summary-card/SummaryCardAction";
+export { default as SummaryCardContent } from "./summary-card/SummaryCardContent";
 export { default as TableBody } from "./table/TableBody";
 export { default as TableCaption } from "./table/TableCaption";
 export { default as TableCell } from "./table/TableCell";