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

@uktrade/react-component-library 0.19.0 → 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 (14) hide show

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.19.0",
+  "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",

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

File without changes