feat: [ASL-4632] Word count component

package.json

@@ -32,6 +32,7 @@
     "classnames": "^2.2.6",
     "date-fns": "^3.6.0",
     "diff": "^4.0.1",
+    "govuk-frontend": "^5.7.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "mustache": "^3.0.1",

src/character-count/index.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useCallback } from 'react';
+import { TextArea } from '@ukhomeoffice/react-components';
+import classNames from 'classnames';
+
+export default function CharacterCount(props) {
+
+    const { value, maxWordCount, error } = props;
+    const getWordCount = text => text?.split(/\s+/).filter(Boolean).length;
+
+    const [{ content, wordCount }, setContent] = useState({
+        content: value,
+        wordCount: getWordCount(value) ?? 0,
+    });
+
+    const handleChange = useCallback(text => {
+
+        const wordCount = getWordCount(text);
+
+        if (wordCount > maxWordCount) {
+            setContent({
+                content: text,
+                wordCount
+            });
+        } else {
+            setContent({
+                content: text,
+                wordCount
+            });
+        }
+    },[maxWordCount, content]);
+
+    const wordCountHintMessage = wordCount => {
+        if (!wordCount) {
+            return (
+                <div id="with-hint-info" className="govuk-hint govuk-character-count__message">
+                    You have {maxWordCount} words remaining
+                </div>
+            );
+        }
+
+        if (wordCount > maxWordCount) {
+            const count = wordCount - maxWordCount;
+            return (
+                <div className="govuk-hint govuk-character-count__message">
+                    You have {count === 1 ? count + ' word' : count + ' words' } too many
+                </div>
+            );
+        } else {
+            const count = maxWordCount - wordCount;
+            return (
+                <div className="govuk-hint govuk-character-count__message">
+                    You have {count === 1 ? count + ' word' : count + ' words' } remaining
+                </div>
+            );
+        }
+    };
+
+    const formErrorClass = classNames({
+        'govuk-form-group': true,
+        'govuk-character-count': true,
+        'govuk-form-group--error': error
+    });
+
+    return (
+        <div className={formErrorClass}>
+            <TextArea
+                {...props}
+                value={content}
+                onChange={e => handleChange(e.target.value)}
+            />
+            {wordCountHintMessage(wordCount)}
+        </div>
+    );
+}

src/character-count/index.scss

@@ -0,0 +1,28 @@
+// Added from govuk-frotnend
+
+.govuk-character-count {
+  @include govuk-responsive-margin(6, "bottom");
+
+  .govuk-form-group,
+  .govuk-textarea {
+    margin-bottom: govuk-spacing(1);
+  }
+}
+
+.govuk-character-count__message {
+  margin-top: 0;
+  margin-bottom: 0;
+
+  &::after {
+    // Zero-width space that will reserve vertical space when no hint is
+    // provided as:
+    // - setting a min-height is not possible without a magic number because
+    //   the line-height is set by the `govuk-font` call above
+    // - using `:empty` is not possible as the hint macro outputs line breaks
+    content: "\200B";
+  }
+}
+
+.govuk-character-count__message--disabled {
+  visibility: hidden;
+}

src/fieldset/index.jsx

@@ -26,7 +26,8 @@ import {
     MultiInput,
     DurationField,
     SelectMany,
-    Inset
+    Inset,
+    CharacterCount
 } from '../';
 
 function getLabel(opt, name, type = 'label') {
@@ -70,6 +71,7 @@ const fields = {
     declaration: props => <ApplicationConfirm { ...props } />,
     inputDate: props => <DateInput { ...props } onChange={value => props.onChange({ target: { value } })} />,
     textarea: props => <TextArea { ...omit(props, ['meta']) } autoExpand={true} />,
+    textAreaWithWordCount: props => <CharacterCount { ...omit(props, ['meta'])} maxWordCount = {250} />,
     radioGroup: props => {
         if (!props.options) {
             throw new Error(`radioGroup '${props.name}' has undefined options`);

src/index.jsx

@@ -7,6 +7,7 @@ export { default as ApplicationConfirm } from './application-confirm';
 export { default as ApplyChanges } from './apply-changes';
 export { default as BackToTop } from './back-to-top';
 export { default as Breadcrumbs } from './breadcrumbs';
+export { default as CharacterCount } from './character-count';
 export { default as Completable } from './completable';
 export { default as Controls } from './controls';
 export { default as ControlBar } from './control-bar';

styles/index.scss

@@ -44,6 +44,7 @@ $highlight-colour: govuk-colour('grey-4');
 @import '../src/sticky-nav-anchor/index';
 @import '../src/tabs/index';
 @import '../src/licence-status-banner/index';
+@import '../src/character-count/index';
 
 .hidden {
   display: none;