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

package/package.json

@@ -1,18 +1,26 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "React components for i.AI GOV.UK (auto-generated from HTML specs).",
   "type": "module",
   "exports": {
-    ".": "./src/index.ts",
-    "./*": "./src/*"
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./*": {
+      "types": "./src/*",
+      "default": "./src/*"
+    }
   },
+  "types": "./src/index.ts",
   "files": [
     "src"
   ],
   "peerDependencies": {
+    "govuk-frontend": ">=6",
     "react": ">=18",
-    "govuk-frontend": ">=6"
+    "react-dom": ">=18"
   },
   "repository": {
     "type": "git",
@@ -23,5 +31,8 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "license": "MIT"
-}
+  "license": "MIT",
+  "devDependencies": {
+    "govuk-frontend": "^6.5.0"
+  }
+}

package/src/accordion/Accordion.tsx

@@ -1,14 +1,14 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 import { useEffect, useRef } from "react";
 
 type AccordionProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
 export default function Accordion({ class: className, children, ...rest }: AccordionProps) {
-    const ref = useRef<HTMLElement>(null);
+    const ref = useRef<HTMLDivElement>(null);
     const classes = ["govuk-accordion", className ?? ""].filter(Boolean).join(" ");
     useEffect(() => {
         const el = ref.current;

package/src/accordion/AccordionSection.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type AccordionSectionProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/accordion/AccordionSectionContent.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type AccordionSectionContentProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/accordion/AccordionSectionHeader.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type AccordionSectionHeaderProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/accordion/AccordionSectionHeading.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type AccordionSectionHeadingProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/accordion/AccordionSectionSummary.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type AccordionSectionSummaryProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/back-link/BackLink.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type BackLinkProps = {
     inverse?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/breadcrumbs/BreadcrumbItem.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type BreadcrumbItemProps = {
     href?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/breadcrumbs/Breadcrumbs.tsx

@@ -1,10 +1,10 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type BreadcrumbsProps = {
     inverse?: boolean;
     collapseOnMobile?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/button/Button.tsx

@@ -1,26 +1,47 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ButtonProps = {
     secondary?: boolean;
+    tertiary?: boolean;
     warning?: boolean;
     inverse?: boolean;
+    small?: boolean;
+    startButton?: boolean;
     href?: string;
+    type?: "button" | "reset" | "submit";
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function Button({ secondary, warning, inverse, 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" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
-            {children ?? ""}
-        </a>
+            <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" : "", className ?? ""].filter(Boolean).join(" ")} data-module="govuk-button" {...rest}>
-            {children ?? ""}
-        </button>
+            <button type={type ?? "submit"} className={classes} data-module="govuk-button" {...rest}>
+                {children ?? ""}
+                {startButton ? <StartIcon /> : null}
+            </button>
         )
     );
 }

package/src/button-group/ButtonGroup.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ButtonGroupProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/card/Card.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CardProps = {
     secondary?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/card/CardContent.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CardContentProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/card/CardGroup.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CardGroupProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/card/CardHeading.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CardHeadingProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/card/CardIcon.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CardIconProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/card/CardLink.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CardLinkProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/character-count/CharacterCount.tsx

@@ -1,5 +1,3 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
-
 type CharacterCountProps = {
     class?: string;
     [key: string]: unknown;

package/src/character-count/CharacterCountMessage.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CharacterCountMessageProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

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/checkboxes/CheckboxDivider.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CheckboxDividerProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/checkboxes/CheckboxInput.tsx

@@ -1,5 +1,3 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
-
 type CheckboxInputProps = {
     class?: string;
     [key: string]: unknown;

package/src/checkboxes/CheckboxItem.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CheckboxItemProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/checkboxes/CheckboxLabel.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CheckboxLabelProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/checkboxes/Checkboxes.tsx

@@ -1,10 +1,10 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CheckboxesProps = {
     small?: boolean;
     subtle?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/cookie-banner/CookieBanner.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CookieBannerProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/cookie-banner/CookieBannerActions.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CookieBannerActionsProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/cookie-banner/CookieBannerContent.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CookieBannerContentProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/cookie-banner/CookieBannerHeading.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CookieBannerHeadingProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/cookie-banner/CookieBannerMessage.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type CookieBannerMessageProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/date-input/DateInput.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type DateInputProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/date-input/DateInputField.tsx

@@ -1,5 +1,3 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
-
 type DateInputFieldProps = {
     width?: "2" | "3" | "4";
     class?: string;
@@ -16,6 +14,6 @@ export default function DateInputField({ width = "2", class: className, ...rest
         .join(" ");
 
     return (
-        <input className={classes} type="text" inputmode="numeric" {...rest} />
+        <input className={classes} type="text" inputMode="numeric" {...rest} />
     );
 }

package/src/date-input/DateInputItem.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type DateInputItemProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/details/Details.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type DetailsProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/details/DetailsSummary.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type DetailsSummaryProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/details/DetailsText.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type DetailsTextProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/error-message/ErrorMessage.tsx

@@ -1,19 +1,20 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ErrorMessageProps = {
+    visuallyHiddenText?: string;
     class?: string;
-    children?: React.ReactNode;
+    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/ErrorSummary.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ErrorSummaryProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/error-summary/ErrorSummaryBody.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ErrorSummaryBodyProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/error-summary/ErrorSummaryItem.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ErrorSummaryItemProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/error-summary/ErrorSummaryList.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ErrorSummaryListProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/error-summary/ErrorSummaryTitle.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ErrorSummaryTitleProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/fieldset/Fieldset.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type FieldsetProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };