npm - @uktrade/react-component-library - Versions diffs - 0.19.0 → 0.20.2 - Mend

@uktrade/react-component-library 0.19.0 → 0.20.2

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/Inputs/CheckBoxesInput/CheckBoxGroupInput.js CHANGED Viewed

@@ -16,7 +16,7 @@ export const CheckboxGroup = ({ legend, hint, error, options, name, values, lege
     return (_jsx("div", { className: clsx("govuk-form-group", {
             "govuk-form-group--error": hasError,
         }), children: _jsxs("fieldset", { className: "govuk-fieldset", "aria-describedby": errorId, children: [_jsx("legend", { className: clsx("govuk-fieldset__legend", {
-                        [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
+                        [`govuk-fieldset__legend--${legendSize}`]: true,
                     }), 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, "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/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/SelectInput/SelectInput.js CHANGED Viewed

@@ -8,7 +8,7 @@ export const SelectInput = ({ id, label, hint, error, options, placeholder, labe
     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}`]: labelSize !== "m",
+            [`govuk-label--${labelSize}`]: true,
         }), children: label }));
     return (_jsxs("div", { className: clsx("govuk-form-group", {
             "govuk-form-group--error": hasError,

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/TextInput/TextInput.js CHANGED Viewed

@@ -8,7 +8,7 @@ export const TextInput = ({ id, label, hint, error, width = "20", labelSize = "m
     const errorId = hasError ? `${id}-error` : undefined;
     const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
     const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
-            [`govuk-label--${labelSize}`]: labelSize !== "m",
+            [`govuk-label--${labelSize}`]: true,
         }), children: label }));
     const input = (_jsx("input", { id: id, className: clsx("govuk-input", `govuk-input--width-${width}`, className), "aria-invalid": hasError, "aria-describedby": describedBy, placeholder: placeholder, ...props }));
     return (_jsxs("div", { className: clsx("govuk-form-group", {

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.19.0",
+  "version": "0.20.2",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

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

@@ -69,7 +69,7 @@ export const CheckboxGroup = ({
             <fieldset className="govuk-fieldset" aria-describedby={errorId}>
                 <legend
                     className={clsx("govuk-fieldset__legend", {
-                        [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
+                        [`govuk-fieldset__legend--${legendSize}`]: true,
                     })}
                 >
                     {legendHeading}

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/SelectInput/SelectInput.tsx CHANGED Viewed

@@ -42,7 +42,7 @@ export const SelectInput = ({
         <label
             htmlFor={id}
             className={clsx("govuk-label", {
-                [`govuk-label--${labelSize}`]: labelSize !== "m",
+                [`govuk-label--${labelSize}`]: true,
             })}
         >
             {label}

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/TextInput/TextInput.tsx CHANGED Viewed

@@ -42,7 +42,7 @@ export const TextInput = ({
         <label
             htmlFor={id}
             className={clsx("govuk-label", {
-                [`govuk-label--${labelSize}`]: labelSize !== "m",
+                [`govuk-label--${labelSize}`]: true,
             })}
         >
             {label}

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

File without changes