Add text input code support (for codes and sequences)

Author: colinrotherham

src/components/form-elements/text-input/TextInput.tsx

@@ -12,6 +12,7 @@ export interface TextInputProps
     ComponentPropsWithoutRef<'input'>,
     Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'> {
   width?: InputWidth;
+  code?: boolean;
   prefix?: string;
   suffix?: string;
 }
@@ -30,12 +31,13 @@ const TextInputSuffix: FC<Pick<TextInputProps, 'suffix'>> = ({ suffix }) => (
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => (
   <FormGroup<TextInputProps> {...props} inputType="input">
-    {({ width, className, error, type = 'text', prefix, suffix, ...rest }) => {
+    {({ width, className, code, error, type = 'text', prefix, suffix, ...rest }) => {
       const Input = (
         <input
           className={classNames(
             'nhsuk-input',
             { [`nhsuk-input--width-${width}`]: width },
+            { 'nhsuk-input--code': code },
             { 'nhsuk-input--error': error },
             className,
           )}

stories/Form Elements/TextInput.stories.tsx

@@ -23,6 +23,7 @@ export const Standard: Story = {};
 export const WithHintText: Story = {
   args: {
     label: 'What is your NHS number?',
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
     hint: (
@@ -38,6 +39,7 @@ export const WithError: Story = {
   args: {
     label: 'What is your NHS number?',
     error: 'Enter NHS number',
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
   },
@@ -47,6 +49,7 @@ export const WithErrorAndHintText: Story = {
   args: {
     label: 'What is your NHS number?',
     error: 'Enter NHS number',
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
     hint: (
@@ -62,6 +65,7 @@ export const WithWidthModifier: Story = {
   args: {
     label: 'What is your NHS number?',
     width: 10,
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
     hint: (