Update data attributes to use string values

Author: colinrotherham

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

@@ -41,9 +41,9 @@ export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProp
           ...formGroupProps,
           'className': classNames('nhsuk-character-count', formGroupProps?.className),
           'data-module': 'nhsuk-character-count',
-          'data-maxlength': maxLength,
-          'data-maxwords': maxWords,
-          'data-threshold': threshold,
+          'data-maxlength': maxLength?.toString(),
+          'data-maxwords': maxWords?.toString(),
+          'data-threshold': threshold?.toString(),
           'ref': moduleRef,
         }}
         {...rest}

src/components/form-elements/checkboxes/components/CheckboxesItem.tsx

@@ -13,7 +13,7 @@ import {
 import { CheckboxesContext, type ICheckboxesContext } from '../CheckboxesContext.js';
 import { HintText } from '#components/form-elements/hint-text/index.js';
 import { Label } from '#components/form-elements/label/index.js';
-import { type FormElementProps, type HTMLAttributesWithData } from '#util/types/index.js';
+import { type ComponentPropsWithDataAttributes, type FormElementProps } from '#util/types/index.js';
 
 export interface CheckboxesItemProps
   extends ComponentPropsWithoutRef<'input'>,
@@ -54,10 +54,10 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
 
     useEffect(() => () => unleaseReference(checkboxReference));
 
-    const inputProps: HTMLAttributesWithData<HTMLInputElement> = rest;
+    const inputProps: ComponentPropsWithDataAttributes<'input'> = rest;
 
     if (exclusive) {
-      inputProps['data-checkbox-exclusive'] = true;
+      inputProps['data-checkbox-exclusive'] = 'true';
     }
 
     return (

src/util/types/FormTypes.ts

@@ -1,10 +1,9 @@
-import { type ComponentPropsWithRef } from 'react';
-
 import { type ErrorMessageProps } from '#components/form-elements/error-message/index.js';
 import { type FieldsetProps } from '#components/form-elements/fieldset/index.js';
 import { type HintTextProps } from '#components/form-elements/hint-text/index.js';
 import { type LabelProps } from '#components/form-elements/label/index.js';
 import { type LegendProps } from '#components/form-elements/legend/index.js';
+import { type ComponentPropsWithDataAttributes } from '#util/types/NHSUKTypes.js';
 
 export interface FormElementProps {
   'fieldsetProps'?: FieldsetProps;
@@ -16,12 +15,7 @@ export interface FormElementProps {
   'errorProps'?: ErrorMessageProps;
   'hint'?: string;
   'hintProps'?: HintTextProps;
-  'formGroupProps'?: ComponentPropsWithRef<'div'> & {
-    'data-module'?: string;
-    'data-maxlength'?: number;
-    'data-maxwords'?: number;
-    'data-threshold'?: number;
-  };
+  'formGroupProps'?: ComponentPropsWithDataAttributes<'div'>;
   'id'?: string;
   'name'?: string;
   'aria-describedby'?: string;

src/util/types/NHSUKTypes.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentProps, type ElementType } from 'react';
 
 export type NHSUKSize = 's' | 'm' | 'l' | 'xl';
 
@@ -16,6 +16,6 @@ export type ColWidth =
   | 'one-third'
   | 'one-quarter';
 
-export type HTMLAttributesWithData<T> = HTMLAttributes<T> & {
-  [key: `data-${string}`]: unknown;
+export type ComponentPropsWithDataAttributes<T extends ElementType> = ComponentProps<T> & {
+  [key: `data-${string}`]: string | undefined;
 };