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

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>
+    );
+}