@uktrade/react-component-library 0.22.12 → 0.22.14

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

@@ -10,7 +10,8 @@ interface TextareaInputProps extends Omit<JSX.IntrinsicElements["textarea"], "id
     labelSize?: LabelSize;
     rows?: number;
     className?: string;
+    characterLimit?: number;
 }
-export declare const TextAreaInput: ({ id, label, hint, error, labelAs, labelSize, rows, className, ...props }: TextareaInputProps) => JSX.Element;
+export declare const TextAreaInput: ({ id, label, hint, error, labelAs, labelSize, rows, className, characterLimit, ...props }: TextareaInputProps) => JSX.Element;
 export {};
 //# sourceMappingURL=TextAreaInput.d.ts.map

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

@@ -1 +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,gBA6DpB,CAAC"}
+{"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;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,2FAW3B,kBAAkB,gBAgGpB,CAAC"}

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

@@ -1,8 +1,8 @@
 "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 }) => {
+import { createElement, useState } from "react";
+export const TextAreaInput = ({ id, label, hint, error, labelAs, labelSize = "l", rows = 5, className, characterLimit, ...props }) => {
     const hasError = Boolean(error);
     const hintId = hint ? `${id}-hint` : undefined;
     const errorId = hasError ? `${id}-error` : undefined;
@@ -10,12 +10,26 @@ export const TextAreaInput = ({ id, label, hint, error, labelAs, labelSize = "l"
         hintId,
         errorId
     ].filter(Boolean).join(" ") || undefined;
+    const hasLimit = characterLimit !== undefined;
+    const [count, setCount] = useState(0);
     const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
             [`govuk-label--${labelSize}`]: true,
         }), children: label }));
+    const remaining = hasLimit ? characterLimit - count : undefined;
+    const isOverLimit = remaining !== undefined && remaining < 0;
+    const characterMessage = remaining !== undefined
+        ? (remaining < 0
+            ? `You have ${Math.abs(remaining)} character${Math.abs(remaining) === 1 ? "" : "s"} too many`
+            : `COW You have ${remaining} character${remaining === 1 ? "" : "s"} remaining`)
+        : undefined;
     return (_jsxs("div", { className: clsx("govuk-form-group", {
             "govuk-form-group--error": hasError,
-        }), children: [labelAs
+            "govuk-character-count": hasLimit
+        }), ...(hasLimit ? { "data-module": "govuk-character-count", "data-maxlength": characterLimit } : {}), 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 })] }));
+                : 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,
+                    "govuk-js-character-count": hasLimit }, className), style: isOverLimit ? { borderColor: "#d4351c" } : {}, "aria-describedby": ariaDescribedBy, ...props, onChange: e => {
+                    setCount(e.target.value.length);
+                    props.onChange?.(e);
+                } }), hasLimit && (_jsx("div", { id: "with-hint-info", className: clsx("govuk-hint govuk-character-count__message", { "govuk-error-message": isOverLimit }), style: isOverLimit ? { color: "#d4351c", fontWeight: "bold" } : {}, children: characterMessage }))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.22.12",
+  "version": "0.22.14",
   "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/TextAreaInput/TextAreaInput.tsx

@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import type { ReactNode, JSX } from "react";
-import { createElement } from "react";
+import { createElement, useState } from "react";
 
 type LabelAs = "h1" | "h2" | "h3" | "h4";
 type LabelSize = "s" | "m" | "l" | "xl";
@@ -17,6 +17,7 @@ interface TextareaInputProps
     labelSize?: LabelSize;
     rows?: number;
     className?: string;
+    characterLimit?: number; 
 }
 
 export const TextAreaInput = ({
@@ -28,9 +29,11 @@ export const TextAreaInput = ({
     labelSize = "l",
     rows = 5,
     className,
+    characterLimit,
     ...props
 }: TextareaInputProps) => {
     const hasError = Boolean(error);
+    
 
     const hintId = hint ? `${id}-hint` : undefined;
     const errorId = hasError ? `${id}-error` : undefined;
@@ -40,6 +43,11 @@ export const TextAreaInput = ({
         errorId
     ].filter(Boolean).join(" ") || undefined;
 
+    const hasLimit = characterLimit !== undefined;
+
+
+    const [count, setCount] = useState(0);
+
     const labelElement = (
         <label
             htmlFor={id}
@@ -51,11 +59,21 @@ export const TextAreaInput = ({
         </label>
     );
 
+    const remaining = hasLimit ? characterLimit - count : undefined;
+    const isOverLimit = remaining !== undefined && remaining < 0;
+    const characterMessage = remaining !== undefined
+        ? (remaining < 0
+            ? `You have ${Math.abs(remaining)} character${Math.abs(remaining) === 1 ? "" : "s"} too many`
+            : `COW You have ${remaining} character${remaining === 1 ? "" : "s"} remaining`)
+        : undefined;
+
     return (
         <div
             className={clsx("govuk-form-group", {
                 "govuk-form-group--error": hasError,
+                "govuk-character-count": hasLimit
             })}
+            {...(hasLimit ? { "data-module": "govuk-character-count", "data-maxlength": characterLimit } : {})}
         >
             {labelAs
                 ? createElement(
@@ -82,12 +100,31 @@ export const TextAreaInput = ({
                 rows={rows}
                 className={clsx(
                     "govuk-textarea",
-                    { "govuk-textarea--error": hasError },
+                    { "govuk-textarea--error": hasError ,
+                    "govuk-js-character-count": hasLimit},
                     className
                 )}
+                style={isOverLimit ? { borderColor: "#d4351c" }: {}}
                 aria-describedby={ariaDescribedBy}
                 {...props}
+                onChange={e => {
+                    setCount(e.target.value.length);
+                    props.onChange?.(e);
+                }}
             />
+            {hasLimit && (
+                <div 
+                id="with-hint-info" 
+                className={clsx(
+                    "govuk-hint govuk-character-count__message", 
+                    { "govuk-error-message": isOverLimit}
+                )}
+                style={isOverLimit ? { color: "#d4351c", fontWeight: "bold" }: {}}>
+                    {characterMessage}
+                </div>
+            )}
+
+
         </div>
     );
 };