@uktrade/react-component-library 0.18.1 → 0.19.0

package/dist/components/ApiBoundary/ApiBoundary.d.ts

@@ -1,10 +1,9 @@
 interface ApiBoundaryProps {
-    isLoading: boolean;
-    isError: boolean;
-    error?: unknown;
-    onRetry?: () => void;
+    isLoading?: boolean;
+    isError?: boolean;
+    error?: React.ReactNode | Error | null;
     children: React.ReactNode;
 }
-export declare const ApiBoundary: ({ isLoading, isError, error, onRetry, children, }: ApiBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare function ApiBoundary({ isLoading, isError, error, children }: ApiBoundaryProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ApiBoundary.d.ts.map

package/dist/components/ApiBoundary/ApiBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,WAAW,GAAI,mDAMzB,gBAAgB,4CAwBlB,CAAC"}
+{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAe,EACf,KAAK,EACL,QAAQ,EACT,EAAE,gBAAgB,2CAalB"}

package/dist/components/ApiBoundary/ApiBoundary.js

@@ -1,7 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// import { LoadingBox } from "govuk-react";
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner";
-import styles from "./ApiBoundary.module.css";
-import { Button } from "../Button";
-/* Boundary for API-related states: loading, success, and error */
-export const ApiBoundary = ({ isLoading, isError, error, onRetry, children, }) => (_jsxs("div", { className: styles.root, "aria-live": "polite", children: [isLoading && _jsx(LoadingSpinner, {}), !isLoading && !isError && children, isError && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.errorBackdrop }), _jsxs("section", { className: styles.error, children: [_jsx("h2", { className: "govuk-heading-m", children: "Error!" }), _jsx("pre", { className: styles.description, children: typeof error === "string" ? error : JSON.stringify(error, null, 2) }), onRetry && (_jsx(Button, { variant: "warning", onClick: onRetry, children: "Retry" }))] })] }))] }));
+export function ApiBoundary({ isLoading, isError = false, error, children }) {
+    if (isLoading) {
+        return _jsx(LoadingSpinner, {});
+    }
+    if (isError) {
+        if (error instanceof Error) {
+            return _jsx("p", { children: error.message });
+        }
+        return _jsx(_Fragment, { children: error });
+    }
+    return _jsx(_Fragment, { children: children });
+}
+;

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts

@@ -7,6 +7,7 @@ interface CheckboxOption {
     label: ReactNode;
     checked?: boolean;
     hint?: string;
+    ariaLabel?: string;
 }
 interface CheckboxGroupProps {
     legend: ReactNode;

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,GAAI,+FAW3B,kBAAkB,4CA6EpB,CAAC"}
+{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,GAAI,+FAW3B,kBAAkB,4CA8EpB,CAAC"}

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.js

@@ -19,5 +19,5 @@ export const CheckboxGroup = ({ legend, hint, error, options, name, values, lege
                         [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
                     }), children: legendHeading }), hint && _jsx("div", { className: "govuk-hint", children: hint }), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsx("div", { className: clsx("govuk-checkboxes", {
                         "govuk-checkboxes--small": checkboxSize === "small",
-                    }), "data-module": "govuk-checkboxes", children: options.map((opt) => (_jsxs("div", { className: "govuk-checkboxes__item", children: [_jsx("input", { className: "govuk-checkboxes__input", id: opt.id, name: name, type: "checkbox", value: opt.value, checked: values.includes(opt.value), onChange: handleChange }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label }), opt.hint && (_jsx("div", { className: "govuk-hint govuk-checkboxes__hint", children: opt.hint }))] }, opt.id))) })] }) }));
+                    }), "data-module": "govuk-checkboxes", children: options.map((opt) => (_jsxs("div", { className: "govuk-checkboxes__item", children: [_jsx("input", { className: "govuk-checkboxes__input", id: opt.id, name: name, type: "checkbox", value: opt.value, checked: values.includes(opt.value), onChange: handleChange, "aria-label": opt.ariaLabel }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label }), opt.hint && (_jsx("div", { className: "govuk-hint govuk-checkboxes__hint", children: opt.hint }))] }, opt.id))) })] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -54,17 +54,17 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.53.1",
-    "@typescript-eslint/parser": "^8.53.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.0",
+    "@typescript-eslint/parser": "^8.59.0",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^17.2.0",
+    "globals": "^17.5.0",
     "jsdom": "^27.4.0",
-    "openapi-typescript": "^7.10.1",
+    "openapi-typescript": "^7.13.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.59.0",
     "vitest": "^4.0.18"
   },
   "engines": {

package/src/components/ApiBoundary/ApiBoundary.tsx

@@ -1,45 +1,30 @@
-// import { LoadingBox } from "govuk-react";
+"use client"
+
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner";
-import styles from "./ApiBoundary.module.css";
-import { Button } from "../Button";
 
 interface ApiBoundaryProps {
-  isLoading: boolean;
-  isError: boolean;
-  error?: unknown;
-  onRetry?: () => void;
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: React.ReactNode | Error | null;
   children: React.ReactNode;
 }
 
-/* Boundary for API-related states: loading, success, and error */
-export const ApiBoundary = ({
+export function ApiBoundary({
   isLoading,
-  isError,
+  isError = false,
   error,
-  onRetry,
-  children,
-}: ApiBoundaryProps) => (
-  <div className={styles.root} aria-live="polite">
-    {isLoading && <LoadingSpinner />}
+  children
+}: ApiBoundaryProps) {
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
 
-    {!isLoading && !isError && children}
+  if (isError) {
+    if (error instanceof Error) {
+      return <p>{error.message}</p>;
+    }
+    return <>{error}</>;
+  }
 
-    {isError && (
-      <>
-        <div className={styles.errorBackdrop} />
-        <section className={styles.error}>
-          <h2 className="govuk-heading-m">Error!</h2>
-          <pre className={styles.description}>
-            {typeof error === "string" ? error : JSON.stringify(error, null, 2)}
-          </pre>
-          
-          {onRetry && (
-            <Button variant="warning" onClick={onRetry}>
-              Retry
-            </Button>
-          )}
-        </section>
-      </>
-    )}
-  </div>
-);
+  return <>{children}</>;
+};

package/src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx

@@ -13,6 +13,7 @@ interface CheckboxOption {
     label: ReactNode;
     checked?: boolean;
     hint?: string;
+    ariaLabel?: string
 }
 
 interface CheckboxGroupProps {
@@ -98,6 +99,7 @@ export const CheckboxGroup = ({
                                 value={opt.value}
                                 checked={values.includes(opt.value)}
                                 onChange={handleChange}
+                                aria-label={opt.ariaLabel}
                             />
                             <label
                                 className="govuk-label govuk-checkboxes__label"

package/dist/components/ApiBoundary/ApiBoundary.module.css

@@ -1,30 +0,0 @@
-.hods-loading-spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 1rem;
-}
-
-.hods-loading-spinner__spinner {
-  width: 80px;
-  height: 80px;
-  border: 12px solid #dee0e2;
-  border-top-color: #1d70b8; /* GOV.UK blue */
-  border-radius: 50%;
-  animation: hods-loading-spinner-rotate 1.5s linear infinite;
-}
-
-.hods-loading-spinner__content {
-  margin-top: 1rem;
-  text-align: center;
-}
-
-@keyframes hods-loading-spinner-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/ApiBoundary/ApiBoundary.module.css

@@ -1,30 +0,0 @@
-.hods-loading-spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 1rem;
-}
-
-.hods-loading-spinner__spinner {
-  width: 80px;
-  height: 80px;
-  border: 12px solid #dee0e2;
-  border-top-color: #1d70b8; /* GOV.UK blue */
-  border-radius: 50%;
-  animation: hods-loading-spinner-rotate 1.5s linear infinite;
-}
-
-.hods-loading-spinner__content {
-  margin-top: 1rem;
-  text-align: center;
-}
-
-@keyframes hods-loading-spinner-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}