@uktrade/react-component-library 0.21.2 → 0.21.4

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

@@ -8,6 +8,7 @@ interface CheckboxOption {
     checked?: boolean;
     hint?: string;
     ariaLabel?: string;
+    tooltip?: 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;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"}
+{"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;AAIvC,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;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;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,4CAqFpB,CAAC"}

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { createElement } from "react";
+import { Tooltip } from "../../Tooltip/Tooltip";
 export const CheckboxGroup = ({ legend, hint, error, options, name, values, legendAs = "h4", legendSize = "m", checkboxSize = "default", onChange, }) => {
     const hasError = Boolean(error);
     const errorId = hasError ? `${name}-error` : undefined;
@@ -19,5 +20,5 @@ export const CheckboxGroup = ({ legend, hint, error, options, name, values, lege
                         [`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))) })] }) }));
+                    }), "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 }), _jsxs("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: [opt.label, opt.tooltip && (_jsx(Tooltip, { text: opt.tooltip, label: `Help for ${opt.label} field` }))] }), opt.hint && (_jsx("div", { className: "govuk-hint govuk-checkboxes__hint", children: opt.hint }))] }, opt.id))) })] }) }));
 };

package/dist/components/Inputs/SelectInput/SelectInput.d.ts

@@ -15,7 +15,8 @@ interface SelectInputProps extends SelectProps {
     labelAs?: LabelAs;
     labelSize?: LabelSize;
     className?: string;
+    tooltip?: string;
 }
-export declare const SelectInput: ({ id, label, hint, error, options, placeholder, labelAs, labelSize, className, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ id, label, hint, error, options, placeholder, labelAs, labelSize, className, tooltip, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SelectInput.d.ts.map

package/dist/components/Inputs/SelectInput/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/SelectInput/SelectInput.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;AACxC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAE/D,UAAU,gBAAiB,SAAQ,WAAW;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,2FAWzB,gBAAgB,4CAoElB,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACxC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAE/D,UAAU,gBAAiB,SAAQ,WAAW;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,oGAYzB,gBAAgB,4CA2ElB,CAAC"}

package/dist/components/Inputs/SelectInput/SelectInput.js

@@ -2,14 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { createElement } from "react";
-export const SelectInput = ({ id, label, hint, error, options, placeholder, labelAs, labelSize = "m", className, ...props }) => {
+import { Tooltip } from "../../Tooltip/Tooltip";
+export const SelectInput = ({ id, label, hint, error, options, placeholder, labelAs, labelSize = "m", className, tooltip, ...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", {
+    const labelElement = (_jsxs("label", { htmlFor: id, className: clsx("govuk-label", {
             [`govuk-label--${labelSize}`]: true,
-        }), children: label }));
+        }), children: [label, tooltip && (_jsx(Tooltip, { text: tooltip, label: `Help for ${label} field` }))] }));
     return (_jsxs("div", { className: clsx("govuk-form-group", {
             "govuk-form-group--error": hasError,
         }), children: [labelAs

package/dist/components/Inputs/TextInput/TextInput.d.ts

@@ -11,7 +11,8 @@ interface TextInputProps extends InputProps {
     labelAs?: LabelAs;
     placeholder?: string;
     suffix?: ReactNode;
+    tooltip?: string;
 }
-export declare const TextInput: ({ id, label, hint, error, width, labelSize, labelAs, className, placeholder, suffix, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ id, label, hint, error, width, labelSize, labelAs, className, placeholder, suffix, tooltip, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/components/Inputs/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.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,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;AAE7D,UAAU,cAAe,SAAQ,UAAU;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,iGAYvB,cAAc,4CAuEhB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;AAE7D,UAAU,cAAe,SAAQ,UAAU;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,0GAavB,cAAc,4CA8EhB,CAAC"}

package/dist/components/Inputs/TextInput/TextInput.js

@@ -2,14 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { createElement } from "react";
-export const TextInput = ({ id, label, hint, error, width = "20", labelSize = "m", labelAs, className, placeholder, suffix, ...props }) => {
+import { Tooltip } from "../../Tooltip/Tooltip";
+export const TextInput = ({ id, label, hint, error, width = "20", labelSize = "m", labelAs, className, placeholder, suffix, tooltip, ...props }) => {
     const hasError = Boolean(error);
     const hintId = hint ? `${id}-hint` : undefined;
     const errorId = hasError ? `${id}-error` : undefined;
     const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
-    const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
+    const labelElement = (_jsxs("label", { htmlFor: id, className: clsx("govuk-label", {
             [`govuk-label--${labelSize}`]: true,
-        }), children: label }));
+        }), children: [label, tooltip && (_jsx(Tooltip, { text: tooltip, label: `Help for ${label} field` }))] }));
     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", {
             "govuk-form-group--error": hasError,

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,aAE/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAYrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAEpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAU/B,CAAC"}
+{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,aAE/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAYrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAEpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAU/B,CAAC"}

package/dist/components/SummaryItem/SummaryItem.module.css

@@ -1,3 +1,4 @@
 .wordWrap {
-    word-wrap: break-word;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+interface TooltipProps {
+    text: string;
+    label?: string;
+    className?: string;
+}
+export declare const Tooltip: ({ text, label, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAOA,UAAU,YAAY;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,GAAI,6BAIrB,YAAY,4CAuDd,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import clsx from "clsx";
+import styles from "./Tooltip.module.css";
+import { TooltipInfoIcon } from "./TooltipInfoIcon";
+export const Tooltip = ({ text, label = "Show help information", className, }) => {
+    const [open, setOpen] = useState(false);
+    const tooltipId = useId();
+    const wrapperRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (wrapperRef.current &&
+                !wrapperRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    return (_jsxs("span", { ref: wrapperRef, className: styles.tooltip, children: [_jsxs("button", { type: "button", className: styles.button, "aria-expanded": open, "aria-controls": tooltipId, "aria-describedby": open ? tooltipId : undefined, onClick: () => setOpen(!open), onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        setOpen(false);
+                    }
+                }, children: [_jsx(TooltipInfoIcon, { "aria-hidden": "true", className: styles.icon }), _jsx("span", { className: "govuk-visually-hidden", children: label })] }), _jsx("div", { id: tooltipId, className: clsx(styles.content, "govuk-body-s", className), hidden: !open, children: text })] }));
+};

package/dist/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,37 @@
+.tooltip {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    margin-left: 0.5rem;
+}
+
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    color: #1d70b8;
+    cursor: pointer;
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+    flex-shrink: 0;
+}
+
+.content {
+    position: absolute;
+    top: 0;
+    left: 1.5rem;
+    z-index: 10;
+    width: 16rem;
+    padding: 0.5rem;
+    background: #F5F5F5;
+    border-color: #000000;
+    border: 1px solid;
+}

package/dist/components/Tooltip/TooltipInfoIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+export declare const TooltipInfoIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TooltipInfoIcon.d.ts.map

package/dist/components/Tooltip/TooltipInfoIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipInfoIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipInfoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,eAAO,MAAM,eAAe,GACxB,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAiBjC,CAAC"}

package/dist/components/Tooltip/TooltipInfoIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TooltipInfoIcon = (props) => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 0C12.4181 0 16 3.58187 16 8C16 12.4181 12.4181 16 8 16C3.58187 16 0 12.4181 0 8C0 3.58187 3.58187 0 8 0ZM8 6.22222C7.50903 6.22222 7.11111 6.62014 7.11111 7.11111V12.6222C7.11111 13.1132 7.50903 13.5111 8 13.5111C8.49097 13.5111 8.88889 13.1132 8.88889 12.6222V7.11111C8.88889 6.62014 8 6.22222 8 6.22222ZM8 2.48889C7.3125 2.48889 6.75556 3.04583 6.75556 3.73333C6.75556 4.42084 7.3125 4.97778 8 4.97778C8.6875 4.97778 9.24444 4.42084 9.24444 3.73333C9.24444 3.04583 8.6875 2.48889 8 2.48889Z", fill: "currentColor" }) }));

package/dist/index.d.ts

@@ -14,4 +14,5 @@ export * from "./components/ApiQuery";
 export * from "./components/Inputs";
 export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
+export * from "./components/Tooltip/Tooltip";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oDAAoD,CAAC;AACnE,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oDAAoD,CAAC;AACnE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC"}

package/dist/index.js

@@ -14,3 +14,4 @@ export * from "./components/ApiQuery";
 export * from "./components/Inputs";
 export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
+export * from "./components/Tooltip/Tooltip";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.21.2",
+  "version": "0.21.4",
   "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

@@ -3,6 +3,7 @@
 import clsx from "clsx";
 import type { ReactNode } from "react";
 import { createElement } from "react";
+import { Tooltip } from "../../Tooltip/Tooltip";
 
 type LegendAs = "h1" | "h2" | "h3" | "h4";
 type LegendSize = "s" | "m" | "l" | "xl";
@@ -14,6 +15,7 @@ interface CheckboxOption {
     checked?: boolean;
     hint?: string;
     ariaLabel?: string
+    tooltip?: string;
 }
 
 interface CheckboxGroupProps {
@@ -106,6 +108,13 @@ export const CheckboxGroup = ({
                                 htmlFor={opt.id}
                             >
                                 {opt.label}
+
+                                {opt.tooltip && (
+                                    <Tooltip
+                                        text={opt.tooltip}
+                                        label={`Help for ${opt.label} field`}
+                                    />
+                                )}
                             </label>
                             {opt.hint && (
                                 <div className="govuk-hint govuk-checkboxes__hint">

package/src/components/Inputs/SelectInput/SelectInput.tsx

@@ -3,6 +3,7 @@
 import clsx from "clsx";
 import type { JSX, ReactNode } from "react";
 import { createElement } from "react";
+import { Tooltip } from "../../Tooltip/Tooltip";
 
 type LabelAs = "h1" | "h2" | "h3" | "h4";
 type LabelSize = "s" | "m" | "l" | "xl";
@@ -18,6 +19,7 @@ interface SelectInputProps extends SelectProps {
     labelAs?: LabelAs;
     labelSize?: LabelSize;
     className?: string;
+    tooltip?: string;
 }
 
 export const SelectInput = ({
@@ -30,6 +32,7 @@ export const SelectInput = ({
     labelAs,
     labelSize = "m",
     className,
+    tooltip,
     ...props
 }: SelectInputProps) => {
     const hasError = Boolean(error);
@@ -46,6 +49,13 @@ export const SelectInput = ({
             })}
         >
             {label}
+
+            {tooltip && (
+                <Tooltip
+                    text={tooltip}
+                    label={`Help for ${label} field`}
+                />
+            )}
         </label>
     );
 

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -3,6 +3,7 @@
 import clsx from "clsx";
 import type { JSX, ReactNode } from "react";
 import { createElement } from "react";
+import { Tooltip } from "../../Tooltip/Tooltip";
 
 type LabelAs = "h1" | "h2" | "h3" | "h4";
 type InputProps = Omit<JSX.IntrinsicElements["input"], "id">;
@@ -17,6 +18,7 @@ interface TextInputProps extends InputProps {
     labelAs?: LabelAs;
     placeholder?: string;
     suffix?: ReactNode;
+    tooltip?: string;
 }
 
 export const TextInput = ({
@@ -30,6 +32,7 @@ export const TextInput = ({
     className,
     placeholder,
     suffix,
+    tooltip,
     ...props
 }: TextInputProps) => {
     const hasError = Boolean(error);
@@ -46,6 +49,13 @@ export const TextInput = ({
             })}
         >
             {label}
+
+            {tooltip && (
+                <Tooltip
+                    text={tooltip}
+                    label={`Help for ${label} field`}
+                />
+            )}
         </label>
     );
 

package/src/components/SummaryItem/SummaryItem.module.css

@@ -1,3 +1,4 @@
 .wordWrap {
-    word-wrap: break-word;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }

package/src/components/SummaryItem/SummaryItem.tsx

@@ -2,8 +2,7 @@
 
 import clsx from "clsx";
 import type React from "react";
-import styles from "./SummaryItem.module.css"
-
+import styles from "./SummaryItem.module.css";
 
 export interface SummaryItemConfig {
   name: string;

package/src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,37 @@
+.tooltip {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    margin-left: 0.5rem;
+}
+
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    color: #1d70b8;
+    cursor: pointer;
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+    flex-shrink: 0;
+}
+
+.content {
+    position: absolute;
+    top: 0;
+    left: 1.5rem;
+    z-index: 10;
+    width: 16rem;
+    padding: 0.5rem;
+    background: #F5F5F5;
+    border-color: #000000;
+    border: 1px solid;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import clsx from "clsx";
+import styles from "./Tooltip.module.css";
+import { TooltipInfoIcon } from "./TooltipInfoIcon";
+
+interface TooltipProps {
+    text: string;
+    label?: string;
+    className?: string;
+}
+
+export const Tooltip = ({
+    text,
+    label = "Show help information",
+    className,
+}: TooltipProps) => {
+    const [open, setOpen] = useState(false);
+    const tooltipId = useId();
+    const wrapperRef = useRef<HTMLSpanElement | null>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                wrapperRef.current &&
+                !wrapperRef.current.contains(event.target as Node)
+            ) {
+                setOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+
+    return (
+        <span ref={wrapperRef} className={styles.tooltip}>
+            <button
+                type="button"
+                className={styles.button}
+                aria-expanded={open}
+                aria-controls={tooltipId}
+                aria-describedby={open ? tooltipId : undefined}
+                onClick={() => setOpen(!open)}
+                onKeyDown={(e) => {
+                    if (e.key === "Escape") {
+                        setOpen(false);
+                    }
+                }}
+            >
+                <TooltipInfoIcon
+                    aria-hidden="true"
+                    className={styles.icon}
+                />
+
+                <span className="govuk-visually-hidden">
+                    {label}
+                </span>
+            </button>
+
+            <div
+                id={tooltipId}
+                className={clsx(styles.content, "govuk-body-s", className)}
+                hidden={!open}
+            >
+                {text}
+            </div>
+        </span>
+    );
+};

package/src/components/Tooltip/TooltipInfoIcon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+export const TooltipInfoIcon = (
+    props: SVGProps<SVGSVGElement>
+) => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 0C12.4181 0 16 3.58187 16 8C16 12.4181 12.4181 16 8 16C3.58187 16 0 12.4181 0 8C0 3.58187 3.58187 0 8 0ZM8 6.22222C7.50903 6.22222 7.11111 6.62014 7.11111 7.11111V12.6222C7.11111 13.1132 7.50903 13.5111 8 13.5111C8.49097 13.5111 8.88889 13.1132 8.88889 12.6222V7.11111C8.88889 6.62014 8 6.22222 8 6.22222ZM8 2.48889C7.3125 2.48889 6.75556 3.04583 6.75556 3.73333C6.75556 4.42084 7.3125 4.97778 8 4.97778C8.6875 4.97778 9.24444 4.42084 9.24444 3.73333C9.24444 3.04583 8.6875 2.48889 8 2.48889Z"
+            fill="currentColor"
+        />
+    </svg>
+);

package/src/index.ts

@@ -14,3 +14,4 @@ export * from "./components/ApiQuery";
 export * from "./components/Inputs";
 export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
+export * from "./components/Tooltip/Tooltip";