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

package/package.json

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

package/src/contents-panel/ContentsPanel.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+type ContentsPanelProps = {
+    heading?: string;
+    headingId?: string;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ContentsPanel({
+    heading = "Pages in this section",
+    headingId = "contents-panel-heading",
+    class: className,
+    children,
+    ...rest
+}: ContentsPanelProps) {
+    const classes = ["contents-panel", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <nav className={classes} aria-labelledby={headingId} {...rest}>
+            <h2 className="govuk-visually-hidden" id={headingId}>
+                {heading}
+            </h2>
+            {children}
+        </nav>
+    );
+}

package/src/contents-panel/ContentsPanelItem.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+
+type ContentsPanelItemProps = {
+    href?: string;
+    current?: boolean;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ContentsPanelItem({
+    href,
+    current = false,
+    class: className,
+    children,
+    ...rest
+}: ContentsPanelItemProps) {
+    const itemClasses = [
+        "contents-panel__list-item",
+        current ? "contents-panel__list-item--current" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <li className={itemClasses} {...rest}>
+            <a
+                className="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline"
+                href={href}
+                aria-current={current ? "page" : undefined}
+            >
+                {children}
+            </a>
+        </li>
+    );
+}

package/src/contents-panel/ContentsPanelList.tsx

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

package/src/contents-panel/ContentsPanelListHeading.tsx

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

package/src/index.ts

@@ -23,6 +23,10 @@ export { default as CheckboxInput } from "./checkboxes/CheckboxInput";
 export { default as CheckboxItem } from "./checkboxes/CheckboxItem";
 export { default as CheckboxLabel } from "./checkboxes/CheckboxLabel";
 export { default as Checkboxes } from "./checkboxes/Checkboxes";
+export { default as ContentsPanelListHeading } from "./contents-panel/ContentsPanelListHeading";
+export { default as ContentsPanelList } from "./contents-panel/ContentsPanelList";
+export { default as ContentsPanelItem } from "./contents-panel/ContentsPanelItem";
+export { default as ContentsPanel } from "./contents-panel/ContentsPanel";
 export { default as CookieBannerActions } from "./cookie-banner/CookieBannerActions";
 export { default as CookieBannerContent } from "./cookie-banner/CookieBannerContent";
 export { default as CookieBannerHeading } from "./cookie-banner/CookieBannerHeading";

package/src/toggle/Toggle.tsx

@@ -6,9 +6,5 @@ type ToggleProps = {
 export default function Toggle({ class: className, ...rest }: ToggleProps) {
     const classes = ["iai-toggle__input", className ?? ""].filter(Boolean).join(" ");
 
-    return (
-        <div className="iai-toggle">
-            <input className={classes} type="checkbox" {...rest} />
-        </div>
-    );
+    return <input className={classes} type="checkbox" role="switch" {...rest} />;
 }

package/src/toggle/ToggleItem.tsx

@@ -10,7 +10,7 @@ export default function ToggleItem({ class: className, children, ...rest }: Togg
     const classes = ["iai-toggle__item", className ?? ""].filter(Boolean).join(" ");
 
     return (
-        <div className={classes} data-module="govuk-toggle" {...rest}>
+        <div className={classes} {...rest}>
             {children ?? ""}
         </div>
     );