npm - @uktrade/react-component-library - Versions diffs - 0.18.2 → 0.20.1 - Mend

@uktrade/react-component-library 0.18.2 → 0.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

@@ -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/RadioInput/RadioInput.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { JSX, ReactNode } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+interface RadioItem {
+    value: string;
+    label: ReactNode;
+    hint?: ReactNode;
+}
+interface RadioGroupProps extends Omit<JSX.IntrinsicElements["input"], "id" | "type"> {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    items: RadioItem[];
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    className?: string;
+    inline?: boolean;
+}
+export declare const RadioGroup: ({ id, name, label, hint, error, items, labelAs, labelSize, className, inline, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RadioInput.d.ts.map

package/dist/components/Inputs/RadioInput/RadioInput.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/RadioInput/RadioInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,SAAS;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,eACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,0FAYxB,eAAe,4CAwGjB,CAAC"}

package/dist/components/Inputs/RadioInput/RadioInput.js ADDED Viewed

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const RadioGroup = ({ id, name, label, hint, error, items, labelAs, labelSize = "l", className, inline = false, ...props }) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const legendElement = (_jsx("legend", { className: clsx("govuk-fieldset__legend", `govuk-fieldset__legend--${labelSize}`), children: labelAs
+            ? createElement(labelAs, { className: "govuk-fieldset__heading" }, label)
+            : _jsx("span", { className: "govuk-fieldset__heading", children: label }) }));
+    return (_jsx("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: _jsxs("fieldset", { className: "govuk-fieldset", "aria-describedby": ariaDescribedBy, children: [legendElement, hint && (_jsx("div", { id: hintId, 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-radios", {
+                        "govuk-radios--inline": inline,
+                        "govuk-radios--error": hasError,
+                    }, className), "data-module": "govuk-radios", children: items.map((item, index) => {
+                        const itemId = `${id}-${index}`;
+                        const itemHintId = item.hint ? `${itemId}-hint` : undefined;
+                        const describedBy = [
+                            ariaDescribedBy, // group hint + group error
+                            itemHintId // per-item hint
+                        ].filter(Boolean).join(" ") || undefined;
+                        return (_jsxs("div", { className: "govuk-radios__item", children: [_jsx("input", { className: "govuk-radios__input", id: itemId, name: name, type: "radio", value: item.value, "aria-describedby": describedBy, ...props }), _jsx("label", { className: "govuk-label govuk-radios__label", htmlFor: itemId, children: item.label }), item.hint && (_jsx("div", { id: itemHintId, className: "govuk-hint govuk-radios__hint", children: item.hint }))] }, item.value));
+                    }) })] }) }));
+};

package/dist/components/Inputs/TextAreaInput/TextAreaInput.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { ReactNode, JSX } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+interface TextareaInputProps extends Omit<JSX.IntrinsicElements["textarea"], "id"> {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    rows?: number;
+    className?: string;
+}
+export declare const TextAreaInput: ({ id, label, hint, error, labelAs, labelSize, rows, className, ...props }: TextareaInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TextAreaInput.d.ts.map

package/dist/components/Inputs/TextAreaInput/TextAreaInput.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,kBACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,2EAU3B,kBAAkB,4CA6DpB,CAAC"}

package/dist/components/Inputs/TextAreaInput/TextAreaInput.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const TextAreaInput = ({ id, label, hint, error, labelAs, labelSize = "l", rows = 5, className, ...props }) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy = [
+        hintId,
+        errorId
+    ].filter(Boolean).join(" ") || undefined;
+    const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
+            [`govuk-label--${labelSize}`]: true,
+        }), children: label }));
+    return (_jsxs("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: [labelAs
+                ? createElement(labelAs, { className: "govuk-label-wrapper" }, labelElement)
+                : labelElement, hint && (_jsx("div", { id: hintId, 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("textarea", { id: id, rows: rows, className: clsx("govuk-textarea", { "govuk-textarea--error": hasError }, className), "aria-describedby": ariaDescribedBy, ...props })] }));
+};

package/dist/components/Inputs/index.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 export * from "./TextInput/TextInput";
 export * from "./CheckBoxesInput/CheckBoxGroupInput";
 export * from "./SelectInput/SelectInput";
+export * from "./TextAreaInput/TextAreaInput";
+export * from "./RadioInput/RadioInput";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Inputs/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sCAAsC,CAAC;AACrD,cAAc,2BAA2B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sCAAsC,CAAC;AACrD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC"}

package/dist/components/Inputs/index.js CHANGED Viewed

@@ -1,3 +1,5 @@
 export * from "./TextInput/TextInput";
 export * from "./CheckBoxesInput/CheckBoxGroupInput";
 export * from "./SelectInput/SelectInput";
+export * from "./TextAreaInput/TextAreaInput";
+export * from "./RadioInput/RadioInput";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.18.2",
+  "version": "0.20.1",
   "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 CHANGED Viewed

@@ -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/RadioInput/RadioInput.tsx ADDED Viewed

@@ -0,0 +1,146 @@
+"use client";
+import clsx from "clsx";
+import type { JSX, ReactNode } from "react";
+import { createElement } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+interface RadioItem {
+    value: string;
+    label: ReactNode;
+    hint?: ReactNode;
+}
+interface RadioGroupProps
+    extends Omit<JSX.IntrinsicElements["input"], "id" | "type"> {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    items: RadioItem[];
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    className?: string;
+    inline?: boolean;
+}
+export const RadioGroup = ({
+    id,
+    name,
+    label,
+    hint,
+    error,
+    items,
+    labelAs,
+    labelSize = "l",
+    className,
+    inline = false,
+    ...props
+}: RadioGroupProps) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy =
+        [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const legendElement = (
+        <legend
+            className={clsx(
+                "govuk-fieldset__legend",
+                `govuk-fieldset__legend--${labelSize}`
+            )}
+        >
+            {labelAs
+                ? createElement(
+                    labelAs,
+                    { className: "govuk-fieldset__heading" },
+                    label
+                )
+                : <span className="govuk-fieldset__heading">{label}</span>}
+        </legend>
+    );
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            <fieldset
+                className="govuk-fieldset"
+                aria-describedby={ariaDescribedBy}
+            >
+                {legendElement}
+                {hint && (
+                    <div id={hintId} className="govuk-hint">
+                        {hint}
+                    </div>
+                )}
+                {hasError && (
+                    <p id={errorId} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </p>
+                )}
+                <div
+                    className={clsx(
+                        "govuk-radios",
+                        {
+                            "govuk-radios--inline": inline,
+                            "govuk-radios--error": hasError,
+                        },
+                        className
+                    )}
+                    data-module="govuk-radios"
+                >
+                    {items.map((item, index) => {
+                        const itemId = `${id}-${index}`;
+                        const itemHintId = item.hint ? `${itemId}-hint` : undefined;
+                        const describedBy = [
+                            ariaDescribedBy,   // group hint + group error
+                            itemHintId         // per-item hint
+                        ].filter(Boolean).join(" ") || undefined;
+                        return (
+                            <div className="govuk-radios__item" key={item.value}>
+                                <input
+                                    className="govuk-radios__input"
+                                    id={itemId}
+                                    name={name}
+                                    type="radio"
+                                    value={item.value}
+                                    aria-describedby={describedBy}
+                                    {...props}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={itemId}
+                                >
+                                    {item.label}
+                                </label>
+                                {item.hint && (
+                                    <div
+                                        id={itemHintId}
+                                        className="govuk-hint govuk-radios__hint"
+                                    >
+                                        {item.hint}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </fieldset>
+        </div>
+    );
+};

package/src/components/Inputs/TextAreaInput/TextAreaInput.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+"use client";
+import clsx from "clsx";
+import type { ReactNode, JSX } from "react";
+import { createElement } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+interface TextareaInputProps
+    extends Omit<JSX.IntrinsicElements["textarea"], "id"> {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    rows?: number;
+    className?: string;
+}
+export const TextAreaInput = ({
+    id,
+    label,
+    hint,
+    error,
+    labelAs,
+    labelSize = "l",
+    rows = 5,
+    className,
+    ...props
+}: TextareaInputProps) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy = [
+        hintId,
+        errorId
+    ].filter(Boolean).join(" ") || undefined;
+    const labelElement = (
+        <label
+            htmlFor={id}
+            className={clsx("govuk-label", {
+                [`govuk-label--${labelSize}`]: true,
+            })}
+        >
+            {label}
+        </label>
+    );
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            {labelAs
+                ? createElement(
+                    labelAs,
+                    { className: "govuk-label-wrapper" },
+                    labelElement
+                )
+                : labelElement}
+            {hint && (
+                <div id={hintId} className="govuk-hint">
+                    {hint}
+                </div>
+            )}
+            {hasError && (
+                <p id={errorId} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span> {error}
+                </p>
+            )}
+            <textarea
+                id={id}
+                rows={rows}
+                className={clsx(
+                    "govuk-textarea",
+                    { "govuk-textarea--error": hasError },
+                    className
+                )}
+                aria-describedby={ariaDescribedBy}
+                {...props}
+            />
+        </div>
+    );
+};

package/src/components/Inputs/index.ts CHANGED Viewed

@@ -1,3 +1,5 @@
 export * from "./TextInput/TextInput";
 export * from "./CheckBoxesInput/CheckBoxGroupInput";
-export * from "./SelectInput/SelectInput";
+export * from "./SelectInput/SelectInput";
+export * from "./TextAreaInput/TextAreaInput";
+export * from "./RadioInput/RadioInput";

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

@@ -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 DELETED Viewed

@@ -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/Inputs/RadioInput/.gitkeep DELETED Viewed

File without changes