@i-dot-ai-npm/component-library-react 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "React components for i.AI GOV.UK.",
   "type": "module",
   "scripts": {
@@ -21,13 +21,14 @@
     "src"
   ],
   "peerDependencies": {
+    "@i-dot-ai-npm/component-library-frontend": ">=0.0.9",
     "govuk-frontend": ">=6",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/i-dot-ai/component-library.git",
+    "url": "git+https://github.com/i-dot-ai/design-kit.git",
     "directory": "packages/react"
   },
   "publishConfig": {
@@ -36,6 +37,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@i-dot-ai-npm/component-library-frontend": "workspace:*",
     "@types/react": "^19.3.0",
     "govuk-frontend": "^6.5.0",
     "react": "^19.3.0",

package/src/footer/Footer.tsx

@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 type FooterLink = { href?: string; text?: string; attributes?: Record<string, string> };
 
-type FooterProps = ComponentPropsWithoutRef<'div'> & {
+type FooterProps = ComponentPropsWithoutRef<'footer'> & {
     /** Support links shown in the inline list (e.g. Accessibility statement, Cookies, Privacy). */
     links?: FooterLink[];
     /** Visually-hidden heading above the support links. */
@@ -26,7 +26,7 @@ export default function Footer({
         .join(' ');
 
     return (
-        <div className={classes} {...rest}>
+        <footer className={classes} {...rest}>
             <div className={containerClass}>
                 <div className="govuk-footer__meta">
                     <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
@@ -58,6 +58,6 @@ export default function Footer({
                     <div className="govuk-footer__meta-item">{children}</div>
                 </div>
             </div>
-        </div>
+        </footer>
     );
 }

package/src/index.ts

@@ -64,6 +64,10 @@ export { default as LanguageNavigation } from "./language-navigation/LanguageNav
 export { default as Link } from "./link/Link";
 export { default as ListItem } from "./list/ListItem";
 export { default as List } from "./list/List";
+export { default as ModalTitle } from "./modal/ModalTitle";
+export { default as ModalBody } from "./modal/ModalBody";
+export { default as ModalFooter } from "./modal/ModalFooter";
+export { default as Modal } from "./modal/Modal";
 export { default as NotificationBannerContent } from "./notification-banner/NotificationBannerContent";
 export { default as NotificationBannerHeader } from "./notification-banner/NotificationBannerHeader";
 export { default as NotificationBannerHeading } from "./notification-banner/NotificationBannerHeading";

package/src/modal/Modal.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { initModal, openModal, closeModal } from "@i-dot-ai-npm/component-library-frontend";
+
+type ModalProps = Omit<ComponentPropsWithoutRef<"dialog">, "onClose"> & {
+    class?: string;
+    /** Controls whether the modal is open. */
+    open?: boolean;
+    /**
+     * Called when the modal requests to close (Esc, backdrop click, or a
+     * `[data-iai-modal-close]` button). Update your `open` state here.
+     */
+    onClose?: () => void;
+    children?: ReactNode;
+};
+
+export default function Modal({
+    class: className,
+    open = false,
+    onClose,
+    children,
+    ...rest
+}: ModalProps) {
+    const ref = useRef<HTMLDialogElement>(null);
+
+    const classes = ["iai-modal", className ?? ""].filter(Boolean).join(" ");
+
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog) return;
+        initModal(dialog);
+        if (open) openModal(dialog);
+        else closeModal(dialog);
+    }, [open]);
+
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog || !onClose) return;
+        const handler = () => onClose();
+        dialog.addEventListener("close", handler);
+        return () => dialog.removeEventListener("close", handler);
+    }, [onClose]);
+
+    return (
+        <dialog ref={ref} className={classes} tabIndex={-1} data-module="iai-modal" {...rest}>
+            <div className="iai-modal__container">{children}</div>
+        </dialog>
+    );
+}

package/src/modal/ModalBody.tsx

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+type ModalBodyProps = ComponentPropsWithoutRef<"div"> & {
+    class?: string;
+    children?: ReactNode;
+};
+
+export default function ModalBody({ class: className, children, ...rest }: ModalBodyProps) {
+    const classes = ["iai-modal__body", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children}
+        </div>
+    );
+}

package/src/modal/ModalFooter.tsx

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+type ModalFooterProps = ComponentPropsWithoutRef<"div"> & {
+    class?: string;
+    children?: ReactNode;
+};
+
+export default function ModalFooter({ class: className, children, ...rest }: ModalFooterProps) {
+    const classes = ["iai-modal__footer", "govuk-button-group", className ?? ""]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children}
+        </div>
+    );
+}

package/src/modal/ModalTitle.tsx

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+type ModalTitleProps = ComponentPropsWithoutRef<"h2"> & {
+    class?: string;
+    children?: ReactNode;
+};
+
+export default function ModalTitle({ class: className, children, ...rest }: ModalTitleProps) {
+    const classes = ["govuk-heading-m", "iai-modal__title", className ?? ""]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <h2 className={classes} {...rest}>
+            {children}
+        </h2>
+    );
+}