Update character count for NHS.UK frontend v10.0.0

Author: colinrotherham

src/__tests__/index.test.ts

@@ -15,7 +15,6 @@ describe('Index', () => {
       'Button',
       'Card',
       'CharacterCount',
-      'CharacterCountType',
       'Checkboxes',
       'ChevronRightCircleIcon',
       'Clearfix',

src/components/form-elements/character-count/CharacterCount.tsx

@@ -1,27 +1,20 @@
 'use client';
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { FC, HTMLProps, useEffect, useRef, useState } from 'react';
 import { CharacterCount } from 'nhsuk-frontend';
-import { HTMLAttributesWithData } from '@util/types/NHSUKTypes';
 
-export enum CharacterCountType {
-  Characters,
-  Words,
-}
-
-type CharacterCountProps = React.HTMLAttributes<HTMLDivElement> & {
-  children: React.ReactNode;
-  maxLength: number;
-  countType: CharacterCountType;
+type CharacterCountProps = HTMLProps<HTMLDivElement> & {
+  maxLength?: number;
+  maxWords?: number;
   textAreaId: string;
-  thresholdPercent?: number;
+  threshold?: number;
 };
 
 const CharacterCountComponent: FC<CharacterCountProps> = ({
   children,
   maxLength,
-  countType,
+  maxWords,
   textAreaId,
-  thresholdPercent,
+  threshold,
   ...rest
 }) => {
   const moduleRef = useRef<HTMLDivElement>(null);
@@ -35,21 +28,15 @@ const CharacterCountComponent: FC<CharacterCountProps> = ({
     setInstance(new CharacterCount(moduleRef.current));
   }, [moduleRef, instance]);
 
-  const characterCountProps: HTMLAttributesWithData<HTMLDivElement> =
-    countType === CharacterCountType.Characters
-      ? { ...rest, ['data-maxlength']: maxLength }
-      : { ...rest, ['data-maxwords']: maxLength };
-
-  if (thresholdPercent) {
-    characterCountProps['data-threshold'] = thresholdPercent;
-  }
-
   return (
     <div
       className="nhsuk-character-count"
       data-module="nhsuk-character-count"
+      data-maxlength={maxLength}
+      data-maxwords={maxWords}
+      data-threshold={threshold}
       ref={moduleRef}
-      {...characterCountProps}
+      {...rest}
     >
       <div className="nhsuk-form-group">{children}</div>
 

src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import CharacterCountComponent, { CharacterCountType } from '../CharacterCount';
+import CharacterCountComponent from '../CharacterCount';
 import Label from '@components/form-elements/label/Label';
 import HintText from '@components/form-elements/hint-text/HintText';
 import Textarea from '@components/form-elements/textarea/Textarea';
@@ -24,11 +24,7 @@ describe('Character Count', () => {
 
   it('Matches snapshot', () => {
     const { container } = render(
-      <CharacterCountComponent
-        maxLength={200}
-        countType={CharacterCountType.Characters}
-        textAreaId="more-detail"
-      >
+      <CharacterCountComponent maxLength={200} textAreaId="more-detail">
         {children}
       </CharacterCountComponent>,
     );
@@ -38,11 +34,7 @@ describe('Character Count', () => {
 
   it('Sets the data-maxlength attribute when counting characters', () => {
     const { container } = render(
-      <CharacterCountComponent
-        maxLength={200}
-        countType={CharacterCountType.Characters}
-        textAreaId="more-detail"
-      >
+      <CharacterCountComponent maxLength={200} textAreaId="more-detail">
         {children}
       </CharacterCountComponent>,
     );
@@ -60,11 +52,7 @@ describe('Character Count', () => {
 
   it('Sets the data-maxwords attribute when counting words', () => {
     const { container } = render(
-      <CharacterCountComponent
-        maxLength={200}
-        countType={CharacterCountType.Words}
-        textAreaId="more-detail"
-      >
+      <CharacterCountComponent maxWords={200} textAreaId="more-detail">
         {children}
       </CharacterCountComponent>,
     );
@@ -82,12 +70,7 @@ describe('Character Count', () => {
 
   it('Sets the data-threshold attribute when threshold is specified', () => {
     const { container } = render(
-      <CharacterCountComponent
-        maxLength={200}
-        countType={CharacterCountType.Characters}
-        thresholdPercent={50}
-        textAreaId="more-detail"
-      >
+      <CharacterCountComponent maxLength={200} threshold={50} textAreaId="more-detail">
         {children}
       </CharacterCountComponent>,
     );

src/components/form-elements/character-count/index.ts

@@ -1 +1 @@
-export { default, CharacterCountType } from './CharacterCount';
+export { default } from './CharacterCount';

src/index.ts

@@ -3,10 +3,7 @@ export { default as BackLink } from './components/navigation/back-link';
 export { default as Breadcrumb } from './components/navigation/breadcrumb';
 export { default as Button } from './components/form-elements/button';
 export { default as Card } from './components/navigation/card';
-export {
-  default as CharacterCount,
-  CharacterCountType,
-} from './components/form-elements/character-count';
+export { default as CharacterCount } from './components/form-elements/character-count';
 export { default as Checkboxes } from './components/form-elements/checkboxes';
 export { default as ContentsList } from './components/navigation/contents-list';
 export { default as DateInput } from './components/form-elements/date-input';

stories/Form Elements/CharacterCount.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CharacterCount, CharacterCountType, HintText, Label, Textarea } from '../../src';
+import { CharacterCount, HintText, Label, Textarea } from '../../src';
 import { Meta, StoryObj } from '@storybook/react';
 
 /**
@@ -20,11 +20,7 @@ type Story = StoryObj<typeof CharacterCount>;
 
 export const Standard: Story = {
   render: () => (
-    <CharacterCount
-      maxLength={200}
-      countType={CharacterCountType.Characters}
-      textAreaId="more-detail"
-    >
+    <CharacterCount maxLength={200} textAreaId="more-detail">
       <Label htmlFor="more-detail">Can you provide more detail?</Label>
       <HintText id="more-detail-hint">
         Do not include personal information like your name, date of birth or NHS number.
@@ -47,11 +43,7 @@ export const Standard: Story = {
  */
 export const WordCountLimit: Story = {
   render: () => (
-    <CharacterCount
-      maxLength={150}
-      countType={CharacterCountType.Words}
-      textAreaId="job-description-detail"
-    >
+    <CharacterCount maxWords={150} textAreaId="job-description-detail">
       <Label htmlFor="job-description-detail" size="l">
         Enter a job description
       </Label>
@@ -68,16 +60,11 @@ export const WordCountLimit: Story = {
 /**
  * If the limit is much higher than most users are likely to reach, you can choose to only display the message after a user has entered a certain amount.
  *
- * Use the `thresholdPercent` prop to only show the count message when users have reached that percentage of the limit.
+ * Use the `threshold` prop to only show the count message when users have reached that percentage of the limit.
  */
-export const MessageThresholdPercentage: Story = {
+export const MessageThreshold: Story = {
   render: () => (
-    <CharacterCount
-      maxLength={112}
-      countType={CharacterCountType.Characters}
-      textAreaId="threshold"
-      thresholdPercent={75}
-    >
+    <CharacterCount maxLength={112} textAreaId="threshold" threshold={75}>
       <Label htmlFor="threshold">Can you provide more detail?</Label>
       <Textarea
         id="threshold"