From 16ae5822e7229d63322232dbc755235b8a9a91ba Mon Sep 17 00:00:00 2001
From: Michael Chappell <7581002+mchappell@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:20:43 +0100
Subject: [PATCH] fix!: resolve issue 'The label's for attribute doesn't match
 any element id'

---
 src/design-system/text-box/text-box.component.tsx |  6 ++++--
 src/design-system/text-box/text-box.stories.tsx   | 14 ++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/design-system/text-box/text-box.component.tsx b/src/design-system/text-box/text-box.component.tsx
index 716e80b..8f2f23d 100644
--- a/src/design-system/text-box/text-box.component.tsx
+++ b/src/design-system/text-box/text-box.component.tsx
@@ -14,7 +14,7 @@ import type { Sx } from '../../design-tokens';
 export interface TextBoxProps extends Form.FormControlProps {
   required?: boolean;
   disabled?: boolean;
-  id?: string;
+  id: string;
   label: string;
   name?: string;
   defaultValue?: string;
@@ -67,7 +67,9 @@ export const TextBox = ({
             data-testid={rest['data-testid']}
           />
         </Form.Control>
-        <Form.Label className={cn(cx.label)}>{label}</Form.Label>
+        <Form.Label htmlFor={id} className={cn(cx.label)}>
+          {label}
+        </Form.Label>
       </Form.Field>
     </Flex>
     {errorMessage && (
diff --git a/src/design-system/text-box/text-box.stories.tsx b/src/design-system/text-box/text-box.stories.tsx
index eb52363..1e6e367 100644
--- a/src/design-system/text-box/text-box.stories.tsx
+++ b/src/design-system/text-box/text-box.stories.tsx
@@ -24,19 +24,24 @@ export default {
 const MainComponents = (): JSX.Element => (
   <Variants.Row>
     <Variants.Cell>
-      <TextBox label="Label" value="" />
+      <TextBox label="Label" value="" id="empty" />
     </Variants.Cell>
     <Variants.Cell>
       <TextBox label="Label" value="" id="hover" />
     </Variants.Cell>
     <Variants.Cell>
-      <TextBox label="Label" value="Input Text" />
+      <TextBox label="Label" value="Input Text" id="with-value" />
     </Variants.Cell>
     <Variants.Cell>
-      <TextBox label="Label" value="Input Text" errorMessage="Error" />
+      <TextBox
+        label="Label"
+        value="Input Text"
+        errorMessage="Error"
+        id="with-error"
+      />
     </Variants.Cell>
     <Variants.Cell>
-      <TextBox label="Label" value="Input Text" disabled />
+      <TextBox label="Label" value="Input Text" disabled id="disabled" />
     </Variants.Cell>
     <Variants.Cell>
       <TextBox label="Label" value="" id="focus" />
@@ -53,6 +58,7 @@ export const Overview = (): JSX.Element => {
         <Section title="Copy for use">
           <Flex flexDirection="column" alignItems="center" w="$fill" my="$32">
             <TextBox
+              id="default"
               value={value}
               label="Text"
               onChange={(event): void => {