@uktrade/react-component-library 0.14.0 → 0.15.0

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

@@ -16,7 +16,8 @@ interface CheckboxGroupProps {
     legendAs?: LegendAs;
     legendSize?: LegendSize;
     checkboxSize?: "small" | "default";
+    onChange?: (values: string[]) => void;
 }
-export declare const CheckboxGroup: ({ legend, hint, error, options, name, legendAs, legendSize, checkboxSize }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: ({ legend, hint, error, options, name, legendAs, legendSize, checkboxSize, onChange, }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CheckBoxGroupInput.d.ts.map

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;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;CACtC;AAED,eAAO,MAAM,aAAa,GAAI,4EAS3B,kBAAkB,4CA+DpB,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;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;CACzC;AAED,eAAO,MAAM,aAAa,GAAI,uFAU3B,kBAAkB,4CAwEpB,CAAC"}

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

@@ -2,15 +2,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { createElement } from "react";
-export const CheckboxGroup = ({ legend, hint, error, options, name, legendAs = "h4", legendSize = "m", checkboxSize = "default" }) => {
+export const CheckboxGroup = ({ legend, hint, error, options, name, legendAs = "h4", legendSize = "m", checkboxSize = "default", onChange, }) => {
     const hasError = Boolean(error);
     const errorId = hasError ? `${name}-error` : undefined;
     const legendHeading = createElement(legendAs, { className: "govuk-fieldset__heading" }, legend);
+    const handleChange = () => {
+        if (!onChange)
+            return;
+        const inputs = document.querySelectorAll(`input[name="${name}"]:checked`);
+        const values = Array.from(inputs).map((el) => el.value);
+        onChange(values);
+    };
     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",
                     }), 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, defaultChecked: opt.checked }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label })] }, 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, defaultChecked: opt.checked, onChange: handleChange }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label })] }, opt.id))) })] }) }));
 };

package/dist/components/SummaryList/SummaryList.d.ts

@@ -12,6 +12,8 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     actions?: SummaryListAction[];
     className?: string;
+    titleBackground?: string;
+    subSectionNode?: React.ReactNode;
 }
-export declare const SummaryCard: ({ title, children, actions, className, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SummaryCard: ({ title, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SummaryList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,mDAAmD,gBAAgB,4CAgC9F,CAAC"}
+{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,oFAQzB,gBAAgB,4CAyClB,CAAC"}

package/dist/components/SummaryList/SummaryList.js

@@ -4,4 +4,4 @@ import clsx from "clsx";
 import { SummaryListAction } from "../SummaryItem/SummaryItem";
 import styles from "./SummaryList.module.css";
 export const SummaryList = ({ title, children, className, ...props }) => (_jsxs(_Fragment, { children: [title && _jsx("h2", { className: "govuk-heading-l", children: title }), _jsx("dl", { className: clsx("govuk-summary-list", className), ...props, children: children })] }));
-export const SummaryCard = ({ title, children, actions, className, ...props }) => (_jsx("div", { className: clsx(styles.root, className), children: _jsxs("div", { className: "govuk-summary-card govuk-body", ...props, children: [_jsxs("div", { className: "govuk-summary-card__title-wrapper", children: [_jsx("h2", { className: "govuk-summary-card__title", children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", styles.summaryCardTitleActions), children: actions.map((action) => (_jsx("li", { className: "govuk-summary-card__action", children: _jsx(SummaryListAction, { action: action }) }, action.text))) }))] }), _jsx("div", { className: clsx("govuk-summary-card__content", styles.govukSummaryCardContent), children: children })] }) }));
+export const SummaryCard = ({ title, children, actions, className, titleBackground, subSectionNode, ...props }) => (_jsx("div", { className: clsx(styles.root, className), children: _jsxs("div", { className: "govuk-summary-card govuk-body", ...props, children: [_jsxs("div", { className: "govuk-summary-card__title-wrapper", style: titleBackground ? { background: titleBackground } : undefined, children: [_jsx("h2", { className: "govuk-summary-card__title", children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", styles.summaryCardTitleActions), children: actions.map((action) => (_jsx("li", { className: "govuk-summary-card__action", children: _jsx(SummaryListAction, { action: action }) }, action.text))) }))] }), subSectionNode && (_jsx("div", { children: subSectionNode })), _jsx("div", { className: clsx("govuk-summary-card__content", styles.govukSummaryCardContent), children: children })] }) }));

package/dist/components/SummaryList/SummaryList.module.css

@@ -11,4 +11,4 @@
   .summaryCardTitleActions {
     font-weight: 400;
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -51,6 +51,7 @@
     "@eslint/js": "^9.39.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@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",

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

@@ -23,6 +23,7 @@ interface CheckboxGroupProps {
     legendAs?: LegendAs;
     legendSize?: LegendSize;
     checkboxSize?: "small" | "default";
+    onChange?: (values: string[]) => void;
 }
 
 export const CheckboxGroup = ({
@@ -33,7 +34,8 @@ export const CheckboxGroup = ({
     name,
     legendAs = "h4",
     legendSize = "m",
-    checkboxSize = "default"
+    checkboxSize = "default",
+    onChange,
 }: CheckboxGroupProps) => {
     const hasError = Boolean(error);
     const errorId = hasError ? `${name}-error` : undefined;
@@ -41,9 +43,19 @@ export const CheckboxGroup = ({
     const legendHeading = createElement(
         legendAs,
         { className: "govuk-fieldset__heading" },
-        legend
+        legend,
     );
 
+    const handleChange = () => {
+        if (!onChange) return;
+
+        const inputs = document.querySelectorAll<HTMLInputElement>(
+            `input[name="${name}"]:checked`,
+        );
+        const values = Array.from(inputs).map((el) => el.value);
+        onChange(values);
+    };
+
     return (
         <div
             className={clsx("govuk-form-group", {
@@ -53,8 +65,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}`]: legendSize !== "m",
                     })}
                 >
                     {legendHeading}
@@ -64,8 +75,7 @@ export const CheckboxGroup = ({
 
                 {hasError && (
                     <p id={errorId} className="govuk-error-message">
-                        <span className="govuk-visually-hidden">Error:</span>{" "}
-                        {error}
+                        <span className="govuk-visually-hidden">Error:</span> {error}
                     </p>
                 )}
 
@@ -84,6 +94,7 @@ export const CheckboxGroup = ({
                                 type="checkbox"
                                 value={opt.value}
                                 defaultChecked={opt.checked}
+                                onChange={handleChange}
                             />
                             <label
                                 className="govuk-label govuk-checkboxes__label"

package/src/components/SummaryList/SummaryList.module.css

@@ -11,4 +11,4 @@
   .summaryCardTitleActions {
     font-weight: 400;
   }
-}
+}

package/src/components/SummaryList/SummaryList.tsx

@@ -27,12 +27,25 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   actions?: SummaryListAction[];
   className?: string;
+  titleBackground?: string;
+  subSectionNode?: React.ReactNode;
 }
 
-export const SummaryCard = ({ title, children, actions, className, ...props }: SummaryCardProps) => (
+export const SummaryCard = ({
+  title,
+  children,
+  actions,
+  className,
+  titleBackground,
+  subSectionNode,
+  ...props
+}: SummaryCardProps) => (
   <div className={clsx(styles.root, className)}>
     <div className="govuk-summary-card govuk-body" {...props}>
-      <div className="govuk-summary-card__title-wrapper">
+      <div
+        className="govuk-summary-card__title-wrapper"
+        style={titleBackground ? { background: titleBackground } : undefined}
+      >
         <h2 className="govuk-summary-card__title">{title}</h2>
 
         {actions && (
@@ -51,6 +64,12 @@ export const SummaryCard = ({ title, children, actions, className, ...props }: S
         )}
       </div>
 
+      {subSectionNode && (
+        <div>
+          {subSectionNode}
+        </div>
+      )}
+
       <div
         className={clsx(
           "govuk-summary-card__content",