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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.3",
+  "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/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/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-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

@@ -40,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";
@@ -62,8 +69,13 @@ 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";
@@ -86,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";

package/src/label/Label.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+type LabelProps = {
+    size?: "small" | "medium" | "large" | "xl";
+    isPageHeading?: boolean;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Label({ size, isPageHeading = false, class: className, children, ...rest }: LabelProps) {
+    const classes = [
+        "govuk-label",
+        ({ "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const label = (
+        <label className={classes} {...rest}>
+            {children ?? ""}
+        </label>
+    );
+
+    if (isPageHeading) {
+        return <h1 className="govuk-label-wrapper">{label}</h1>;
+    }
+
+    return label;
+}

package/src/language-navigation/LanguageNavigation.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+type LanguageNavigationProps = {
+    ariaLabel?: string;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function LanguageNavigation({
+    ariaLabel = "Language",
+    class: className,
+    children,
+    ...rest
+}: LanguageNavigationProps) {
+    const classes = ["govuk-language-navigation", className ?? ""]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <nav className={classes} aria-label={ariaLabel} {...rest}>
+            <ul className="govuk-language-navigation__list">
+                {children}
+            </ul>
+        </nav>
+    );
+}

package/src/language-navigation/LanguageNavigationItem.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+
+type LanguageNavigationItemProps = {
+    href?: string;
+    current?: boolean;
+    lang?: string;
+    dir?: string;
+    /** hreflang for link items; defaults to `lang` when omitted. */
+    hreflang?: string;
+    /** Visually-hidden description appended to a link item. */
+    languageDescriptionText?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function LanguageNavigationItem({
+    href,
+    current = false,
+    lang,
+    dir,
+    hreflang,
+    languageDescriptionText,
+    children,
+    ...rest
+}: LanguageNavigationItemProps) {
+    return (
+        <li className="govuk-language-navigation__list-item">
+            {current ? (
+                <span
+                    className="govuk-language-navigation__text"
+                    aria-current="true"
+                    lang={lang}
+                    dir={dir}
+                    {...rest}
+                >
+                    {children}
+                </span>
+            ) : (
+                <a
+                    className="govuk-language-navigation__link"
+                    href={href}
+                    rel="alternate"
+                    lang={lang}
+                    hrefLang={hreflang ?? lang}
+                    dir={dir}
+                    {...rest}
+                >
+                    {children}
+                    {languageDescriptionText ? (
+                        <span className="govuk-visually-hidden"> {languageDescriptionText}</span>
+                    ) : null}
+                </a>
+            )}
+        </li>
+    );
+}

package/src/pagination/PaginationItem.tsx

@@ -2,25 +2,38 @@ import { ReactNode } from 'react';
 
 type PaginationItemProps = {
     current?: boolean;
-    ellipsis?: string;
+    ellipsis?: boolean;
+    /** aria-label for the page link (e.g. "Page 2"). */
+    ariaLabel?: string;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function PaginationItem({ current, ellipsis, class: className, children, ...rest }: PaginationItemProps) {
-
-    return (
-        ellipsis ? (
+export default function PaginationItem({ current, ellipsis, ariaLabel, class: className, children, ...rest }: PaginationItemProps) {
+    if (ellipsis) {
+        return (
             <li className="govuk-pagination__item govuk-pagination__item--ellipsis">
                 {children ?? "⋯"}
             </li>
-        ) : (
-            <li className={["govuk-pagination__item", current ? "govuk-pagination__item--current" : ""].filter(Boolean).join(" ")}>
-                <a className={["govuk-link govuk-pagination__link", className ?? ""].filter(Boolean).join(" ")} {...rest}>
-                    {children ?? ""}
-                </a>
-            </li>
-        )
+        );
+    }
+
+    const itemClasses = ["govuk-pagination__item", current ? "govuk-pagination__item--current" : ""]
+        .filter(Boolean)
+        .join(" ");
+    const linkClasses = ["govuk-link govuk-pagination__link", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <li className={itemClasses}>
+            <a
+                className={linkClasses}
+                aria-label={ariaLabel}
+                aria-current={current ? "page" : undefined}
+                {...rest}
+            >
+                {children ?? ""}
+            </a>
+        </li>
     );
 }

package/src/pagination/PaginationNext.tsx

@@ -1,26 +1,48 @@
 import { ReactNode } from 'react';
 
 type PaginationNextProps = {
+    /** Block-level layout (no numbered items, just prev/next). */
+    block?: boolean;
+    /** Descriptive label shown alongside the title (block layout only). */
+    labelText?: string;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function PaginationNext({ class: className, children, ...rest }: PaginationNextProps) {
+const arrow = (
+    <svg className="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+        <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+    </svg>
+);
+
+export default function PaginationNext({ block, labelText, class: className, children, ...rest }: PaginationNextProps) {
     const classes = ["govuk-link govuk-pagination__link", className ?? ""].filter(Boolean).join(" ");
+    const titleClasses = [
+        "govuk-pagination__link-title",
+        block && !labelText ? "govuk-pagination__link-title--decorated" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
 
     return (
         <div className="govuk-pagination__next">
             <a className={classes} rel="next" {...rest}>
-                <span className="govuk-pagination__link-title">
-                    {children ?? "Next"}
-                    <span className="govuk-visually-hidden">
-                        page
-                    </span>
+                {block && arrow}
+                <span className={titleClasses}>
+                    {children ?? (
+                        <>
+                            Next<span className="govuk-visually-hidden"> page</span>
+                        </>
+                    )}
                 </span>
-                <svg className="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
-                    <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
-                </svg>
+                {labelText && block && (
+                    <>
+                        <span className="govuk-visually-hidden">:</span>
+                        <span className="govuk-pagination__link-label">{labelText}</span>
+                    </>
+                )}
+                {!block && arrow}
             </a>
         </div>
     );

package/src/pagination/PaginationPrev.tsx

@@ -1,26 +1,47 @@
 import { ReactNode } from 'react';
 
 type PaginationPrevProps = {
+    /** Block-level layout (no numbered items, just prev/next). */
+    block?: boolean;
+    /** Descriptive label shown alongside the title (block layout only). */
+    labelText?: string;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function PaginationPrev({ class: className, children, ...rest }: PaginationPrevProps) {
+const arrow = (
+    <svg className="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+        <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+    </svg>
+);
+
+export default function PaginationPrev({ block, labelText, class: className, children, ...rest }: PaginationPrevProps) {
     const classes = ["govuk-link govuk-pagination__link", className ?? ""].filter(Boolean).join(" ");
+    const titleClasses = [
+        "govuk-pagination__link-title",
+        block && !labelText ? "govuk-pagination__link-title--decorated" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
 
     return (
         <div className="govuk-pagination__prev">
             <a className={classes} rel="prev" {...rest}>
-                <svg className="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
-                    <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
-                </svg>
-                <span className="govuk-pagination__link-title">
-                    {children ?? "Previous"}
-                    <span className="govuk-visually-hidden">
-                        page
-                    </span>
+                {arrow}
+                <span className={titleClasses}>
+                    {children ?? (
+                        <>
+                            Previous<span className="govuk-visually-hidden"> page</span>
+                        </>
+                    )}
                 </span>
+                {labelText && block && (
+                    <>
+                        <span className="govuk-visually-hidden">:</span>
+                        <span className="govuk-pagination__link-label">{labelText}</span>
+                    </>
+                )}
             </a>
         </div>
     );

package/src/panel/Panel.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+type PanelProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Panel({ class: className, children, ...rest }: PanelProps) {
+    const isInterruption = (className ?? "").includes("govuk-panel--interruption");
+    const classes = [
+        "govuk-panel",
+        isInterruption ? "" : "govuk-panel--confirmation",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children}
+        </div>
+    );
+}

package/src/panel/PanelActions.tsx

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

package/src/panel/PanelBody.tsx

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

package/src/panel/PanelTitle.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type PanelTitleProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PanelTitle({ class: className, children, ...rest }: PanelTitleProps) {
+    const classes = ["govuk-panel__title", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <h1 className={classes} {...rest}>
+            {children}
+        </h1>
+    );
+}

package/src/phase-banner/PhaseBanner.tsx

@@ -7,7 +7,7 @@ type PhaseBannerProps = {
 };
 
 export default function PhaseBanner({ class: className, children, ...rest }: PhaseBannerProps) {
-    const classes = ["govuk-phase-banner", className ?? ""].filter(Boolean).join(" ");
+    const classes = ["govuk-phase-banner govuk-width-container", className ?? ""].filter(Boolean).join(" ");
 
     return (
         <div className={classes} {...rest}>

package/src/phase-banner/PhaseBannerText.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type PhaseBannerTextProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PhaseBannerText({ class: className, children, ...rest }: PhaseBannerTextProps) {
+    const classes = ["govuk-phase-banner__text", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <span className={classes} {...rest}>
+            {children ?? ""}
+        </span>
+    );
+}

package/src/service-navigation/ServiceNavigation.tsx

@@ -3,12 +3,40 @@ import { ReactNode } from 'react';
 type ServiceNavigationProps = {
     sideNav?: boolean;
     inverse?: boolean;
+    serviceName?: string;
+    serviceUrl?: string;
+    navigationId?: string;
+    menuButtonText?: string;
+    ariaLabel?: string;
+    /** Whether to render the navigation `<nav>` (omitted when there are no items). */
+    hasNavigation?: boolean;
+    /** Show the mobile menu toggle. Defaults to true when there is >1 item. */
+    collapseNavigationOnMobile?: boolean;
+    /** Raw HTML for the `end` slot (e.g. language navigation). */
+    endSlot?: ReactNode;
+    /** Align the end slot inline (adds the inlining container class). */
+    endSlotInline?: boolean;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function ServiceNavigation({ sideNav, inverse, class: className, children, ...rest }: ServiceNavigationProps) {
+export default function ServiceNavigation({
+    sideNav,
+    inverse,
+    serviceName,
+    serviceUrl,
+    navigationId = "navigation",
+    menuButtonText = "Menu",
+    ariaLabel,
+    hasNavigation = true,
+    collapseNavigationOnMobile,
+    endSlot,
+    endSlotInline,
+    class: className,
+    children,
+    ...rest
+}: ServiceNavigationProps) {
     const classes = [
         "govuk-service-navigation",
         sideNav ? "govuk-service-navigation--side-nav" : "",
@@ -18,17 +46,65 @@ export default function ServiceNavigation({ sideNav, inverse, class: className,
         .filter(Boolean)
         .join(" ");
 
-    return (
-        <div className={classes} data-module="govuk-service-navigation" {...rest}>
-            <div className="govuk-width-container">
-                <div className="govuk-service-navigation__container">
-                    <nav className="govuk-service-navigation__wrapper" aria-label="Menu">
-                        <ul className="govuk-service-navigation__list" id="navigation">
+    const navLabel = ariaLabel ?? menuButtonText;
+    const showToggle = collapseNavigationOnMobile ?? false;
+    const useSection = serviceName !== undefined || endSlot !== undefined;
+
+    const containerClasses = [
+        "govuk-width-container",
+        endSlotInline ? "govuk-service-navigation__inlining-container" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const inner = (
+        <div className={containerClasses}>
+            <div className="govuk-service-navigation__container">
+                {serviceName !== undefined && (
+                    <span className="govuk-service-navigation__service-name">
+                        {serviceUrl !== undefined ? (
+                            <a href={serviceUrl} className="govuk-service-navigation__link">
+                                {serviceName}
+                            </a>
+                        ) : (
+                            <span className="govuk-service-navigation__text">{serviceName}</span>
+                        )}
+                    </span>
+                )}
+                {hasNavigation && (
+                    <nav aria-label={navLabel} className="govuk-service-navigation__wrapper">
+                        {showToggle && (
+                            <button
+                                type="button"
+                                className="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
+                                aria-controls={navigationId}
+                                hidden
+                                aria-hidden="true"
+                            >
+                                {menuButtonText}
+                            </button>
+                        )}
+                        <ul className="govuk-service-navigation__list" id={navigationId}>
                             {children ?? ""}
                         </ul>
                     </nav>
-                </div>
+                )}
             </div>
+            {endSlot}
+        </div>
+    );
+
+    if (useSection) {
+        return (
+            <section aria-label={ariaLabel ?? "Service information"} className={classes} data-module="govuk-service-navigation" {...rest}>
+                {inner}
+            </section>
+        );
+    }
+
+    return (
+        <div className={classes} data-module="govuk-service-navigation" {...rest}>
+            {inner}
         </div>
     );
 }

package/src/service-navigation/ServiceNavigationItem.tsx

@@ -2,19 +2,41 @@ import { ReactNode } from 'react';
 
 type ServiceNavigationItemProps = {
     href?: string;
+    /** Current page — adds active styling + aria-current="page". */
+    current?: boolean;
+    /** Active section — adds active styling + aria-current="true". */
+    active?: boolean;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function ServiceNavigationItem({ href, class: className, children, ...rest }: ServiceNavigationItemProps) {
-    const classes = ["govuk-service-navigation__item", className ?? ""].filter(Boolean).join(" ");
+export default function ServiceNavigationItem({ href, current, active, class: className, children, ...rest }: ServiceNavigationItemProps) {
+    const isActive = current || active;
+    const classes = [
+        "govuk-service-navigation__item",
+        isActive ? "govuk-service-navigation__item--active" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const ariaCurrent = current ? "page" : active ? "true" : undefined;
+    const inner = isActive
+        ? <strong className="govuk-service-navigation__active-fallback">{children ?? ""}</strong>
+        : children ?? "";
 
     return (
-        <li className={classes} {...rest}>
-            <a className="govuk-service-navigation__link" href={href}>
-                {children ?? ""}
-            </a>
+        <li className={classes}>
+            {href !== undefined ? (
+                <a className="govuk-service-navigation__link" href={href} aria-current={ariaCurrent} {...rest}>
+                    {inner}
+                </a>
+            ) : (
+                <span className="govuk-service-navigation__text" aria-current={ariaCurrent} {...rest}>
+                    {inner}
+                </span>
+            )}
         </li>
     );
 }

package/src/summary-card/SummaryCard.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type SummaryCardProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryCard({ class: className, children, ...rest }: SummaryCardProps) {
+    const classes = ["govuk-summary-card", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/summary-card/SummaryCardAction.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type SummaryCardActionProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryCardAction({ class: className, children, ...rest }: SummaryCardActionProps) {
+    const classes = ["govuk-summary-card__action", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <li className={classes} {...rest}>
+            {children ?? ""}
+        </li>
+    );
+}

package/src/summary-card/SummaryCardActions.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+type SummaryCardActionsProps = {
+    /** Render as a single-action wrapper (`<div>`) instead of a list (`<ul>`).
+     *  govuk uses a div for exactly one action and a ul for multiple. */
+    single?: boolean;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryCardActions({ single, class: className, children, ...rest }: SummaryCardActionsProps) {
+    const classes = ["govuk-summary-card__actions", className ?? ""].filter(Boolean).join(" ");
+
+    if (single) {
+        return (
+            <div className={classes} {...rest}>
+                {children ?? ""}
+            </div>
+        );
+    }
+
+    return (
+        <ul className={classes} {...rest}>
+            {children ?? ""}
+        </ul>
+    );
+}

package/src/summary-card/SummaryCardContent.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type SummaryCardContentProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryCardContent({ class: className, children, ...rest }: SummaryCardContentProps) {
+    const classes = ["govuk-summary-card__content", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/summary-card/SummaryCardTitle.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type SummaryCardTitleProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryCardTitle({ class: className, children, ...rest }: SummaryCardTitleProps) {
+    const classes = ["govuk-summary-card__title", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <h2 className={classes} {...rest}>
+            {children ?? ""}
+        </h2>
+    );
+}

package/src/summary-card/SummaryCardTitleWrapper.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type SummaryCardTitleWrapperProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryCardTitleWrapper({ class: className, children, ...rest }: SummaryCardTitleWrapperProps) {
+    const classes = ["govuk-summary-card__title-wrapper", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/table/TableHeader.tsx

@@ -4,12 +4,13 @@ import { ReactNode } from 'react';
 
 type TableHeaderProps = {
     numeric?: boolean;
+    scope?: "col" | "row" | "colgroup" | "rowgroup";
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function TableHeader({ numeric, class: className, children, ...rest }: TableHeaderProps) {
+export default function TableHeader({ numeric, scope = "col", class: className, children, ...rest }: TableHeaderProps) {
     const classes = [
         "govuk-table__header",
         numeric ? "govuk-table__header--numeric" : "",
@@ -19,7 +20,7 @@ export default function TableHeader({ numeric, class: className, children, ...re
         .join(" ");
 
     return (
-        <th className={classes} scope="col" {...rest}>
+        <th className={classes} scope={scope} {...rest}>
             {children ?? ""}
         </th>
     );