From 247dab21a2edd2274b5ede9193b49bd614fcd304 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Tue, 19 Aug 2025 15:55:33 -0600
Subject: [PATCH 1/2] feat(#2137): input - added phone number and bank account
 examples

---
 src/examples/ask-a-user-for-bank-details.tsx  | 197 ++++++++++++++++++
 src/examples/enter-a-phone-number.tsx         | 113 ++++++++++
 src/examples/text-field/TextFieldExamples.tsx |  14 ++
 src/routes/components/TextField.tsx           |   2 +-
 4 files changed, 325 insertions(+), 1 deletion(-)
 create mode 100644 src/examples/ask-a-user-for-bank-details.tsx
 create mode 100644 src/examples/enter-a-phone-number.tsx

diff --git a/src/examples/ask-a-user-for-bank-details.tsx b/src/examples/ask-a-user-for-bank-details.tsx
new file mode 100644
index 000000000..59719ffbc
--- /dev/null
+++ b/src/examples/ask-a-user-for-bank-details.tsx
@@ -0,0 +1,197 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabBlock, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const AskAUserForBankDetails = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+
+  return (
+    <Sandbox fullWidth flags={["reactive"]} skipRenderOnly={"react"}>
+      {/*React code*/}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+            const [name, setName] = useState<string>('');
+            const [account, setAccount] = useState<string>('');
+            const [bank, setBank] = useState<string>('');
+            function onChangeName(event: GoabInputOnChangeDetail) {
+                setName(event.value);
+            }
+            function onChangeAccount(event: GoabInputOnChangeDetail) {
+                setAccount(event.value);
+            }
+            function onChangeBank(event: GoabInputOnChangeDetail) {
+                setBank(event.value);
+            }
+        `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+            <GoAFormItem label="Bank account details" labelSize="large">
+                <GoABlock gap="m" direction="column">
+                    <GoAFormItem label="Name on account">
+                        <GoAInput
+                            onChange={onChangeName}
+                            value={name}
+                            name="name"
+                            width="100%"
+                        />
+                    </GoAFormItem>
+                    <GoAFormItem label="Account number">
+                        <GoAInput
+                            onChange={onChangeAccount}
+                            value={account}
+                            name="account"
+                            width="167px"
+                        />
+                    </GoAFormItem>
+                    <GoAFormItem label="Bank number" helpText="Must be between 6 and 8 digits long">
+                        <GoAInput
+                            onChange={onChangeBank}
+                            value={bank}
+                            name="bank"
+                            width="167px"
+                            maxLength={8}
+                        />
+                    </GoAFormItem>
+                </GoABlock>
+            </GoAFormItem>
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+            const [name, setName] = useState<string>('');
+            const [account, setAccount] = useState<string>('');
+            const [bank, setBank] = useState<string>('');
+            function onChangeName(event: GoabInputOnChangeDetail) {
+                setName(event.value);
+            }
+            function onChangeAccount(event: GoabInputOnChangeDetail) {
+                setAccount(event.value);
+            }
+            function onChangeBank(event: GoabInputOnChangeDetail) {
+                setBank(event.value);
+            }
+        `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+        <GoabFormItem label="Bank account details" labelSize="large">
+            <GoabBlock gap="m" direction="column">
+                <GoabFormItem label="Name on account">
+                    <GoabInput
+                        onChange={onChangeName}
+                        value={name}
+                        name="name"
+                        width="100%"
+                    />
+                </GoabFormItem>
+                <GoabFormItem label="Account number">
+                    <GoabInput
+                        onChange={onChangeAccount}
+                        value={account}
+                        name="account"
+                        width="167px"
+                    />
+                </GoabFormItem>
+                <GoabFormItem label="Bank number" helpText="Must be between 6 and 8 digits long">
+                    <GoabInput
+                        onChange={onChangeBank}
+                        value={bank}
+                        name="bank"
+                        width="167px"
+                        maxLength={8}
+                    />
+                </GoabFormItem>
+            </GoabBlock>
+        </GoabFormItem>
+        `}
+      />}
+
+      {/*Angular code*/}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+            export class ExampleComponent {
+                bankDetails = new FormGroup({
+                    name: new FormControl(""),
+                    account: new FormControl(""),
+                    bank: new FormControl(""),
+                });
+            }
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+            export class ExampleComponent {
+                form!: FormGroup;
+                constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                        name: [''],
+                        account: [''],
+                        bank: [''],
+                    });
+                }
+            }
+        `}
+      />}
+
+
+      <GoabFormItem label="Bank account details" labelSize="large">
+        <GoabBlock gap="m" direction="column">
+          <GoabFormItem label="Name on account">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="name"
+              width="100%"
+            />
+          </GoabFormItem>
+          <GoabFormItem label="Account number">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="account"
+              width="167px"
+            />
+          </GoabFormItem>
+          <GoabFormItem label="Bank number" helpText="Must be between 6 and 8 digits long">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="bank"
+              width="167px"
+              maxLength={8}
+            />
+          </GoabFormItem>
+        </GoabBlock>
+      </GoabFormItem>
+    </Sandbox>
+  )
+}
+
+export default AskAUserForBankDetails;
diff --git a/src/examples/enter-a-phone-number.tsx b/src/examples/enter-a-phone-number.tsx
new file mode 100644
index 000000000..9ddade987
--- /dev/null
+++ b/src/examples/enter-a-phone-number.tsx
@@ -0,0 +1,113 @@
+import { GoabBlock, GoabButton, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const EnterAPhoneNumber = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+  return (
+    <Sandbox flags={["reactive"]} allow={["form"]} skipRenderOnly={"react"}>
+
+      {/*Angular code*/}
+
+      {version === "old" && (
+        <CodeSnippet
+            lang="typescript"
+            tags={["angular", "reactive"]}
+            allowCopy={true}
+            code={`
+                export class ExampleComponent {
+                    phoneNumberGroup = new FormGroup({
+                        phoneNumberFormCtrl: new FormControl(""),
+                    });
+                }
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags={["angular", "reactive"]}
+          allowCopy={true}
+          code={`
+                  export class ExampleComponent {
+                    form!: FormGroup;
+                    constructor(private fb: FormBuilder) {
+                      this.form = this.fb.group({
+                        phoneNumber: [''],
+                      });
+                    }
+                  }
+        `}
+        />
+      )}
+
+      {/*React code*/}
+      
+      {version === "old" && (
+        <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+                const [phoneNumber, setPhoneNumber] = useState<string>("");
+                function onChangePhoneNumber(event: GoabInputOnChangeDetail) {
+                    setPhoneNumber(event.value);
+                }
+            `}
+        />
+      )}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoAFormItem label="Phone number">
+                <GoAInput type="tel" onChange={onChangePhoneNumber} value={phoneNumber} name="phoneNumber" leadingContent="+1"></GoAInput>
+            </GoAFormItem>
+        `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+                const [phoneNumber, setPhoneNumber] = useState<string>("");
+                function onChangePhoneNumber(event: GoabInputOnChangeDetail) {
+                    setPhoneNumber(event.value);
+                }
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabFormItem label="Phone number">
+                <GoabInput type="tel" onChange={onChangePhoneNumber} value={phoneNumber} name="phoneNumber" leadingContent="+1"></GoabInput>
+            </GoabFormItem>
+        `}
+        />
+      )}
+
+      <form>
+        <GoabFormItem label="Phone number">
+            <GoabInput type="tel" onChange={noop} value="" name="phoneNumber" leadingContent="+1"></GoabInput>
+        </GoabFormItem>
+      </form>
+    </Sandbox>
+  );
+}
+
+export default EnterAPhoneNumber;
diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx
index 94179cc0a..b57696d1f 100644
--- a/src/examples/text-field/TextFieldExamples.tsx
+++ b/src/examples/text-field/TextFieldExamples.tsx
@@ -7,6 +7,8 @@ import {
 import { TextFieldRightAlignExample } from "@examples/text-field/TextFieldRightAlignExample.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
 import { AskAUserForAnAddress } from "@examples/ask-a-user-for-an-address.tsx";
+import { AskAUserForBankDetails } from "@examples/ask-a-user-for-bank-details.tsx";
+import { EnterAPhoneNumber } from "@examples/enter-a-phone-number.tsx";
 
 export default function TextFieldExamples() {
   return (
@@ -30,6 +32,12 @@ export default function TextFieldExamples() {
       </SandboxHeader>
       <Search />
 
+      <SandboxHeader
+        exampleTitle="Enter a phone number"
+        figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=1896-179599&t=Hmj1KvPswdNPMQfD-1">
+      </SandboxHeader>
+      <EnterAPhoneNumber />
+
       <SandboxHeader
         exampleTitle="Ask a user for dollar amounts"
         figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=1896-179629&t=X0IQW5flDDaj8Vyg-4">
@@ -47,6 +55,12 @@ export default function TextFieldExamples() {
         figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=1896-179631&t=X0IQW5flDDaj8Vyg-4">
       </SandboxHeader>
       <AskAUserForAnIndianRegistrationNumber />
+      
+      <SandboxHeader
+        exampleTitle="Ask a user for bank details"
+        figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=1896-179589&t=Hmj1KvPswdNPMQfD-1">
+      </SandboxHeader>
+      <AskAUserForBankDetails />
     </>
   );
 }
\ No newline at end of file
diff --git a/src/routes/components/TextField.tsx b/src/routes/components/TextField.tsx
index bb6d03907..158419268 100644
--- a/src/routes/components/TextField.tsx
+++ b/src/routes/components/TextField.tsx
@@ -798,7 +798,7 @@ export default function TextFieldPage() {
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="6" />
+                <GoabBadge type="information" content="8" />
               </>
             }>
             <TextFieldExamples />

From f90727b51aecb1866290806e80a1466f83c1f858 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Tue, 19 Aug 2025 15:59:50 -0600
Subject: [PATCH 2/2] feat(#2137): input - removed redundant imports

---
 src/examples/enter-a-phone-number.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/examples/enter-a-phone-number.tsx b/src/examples/enter-a-phone-number.tsx
index 9ddade987..b5216d7fe 100644
--- a/src/examples/enter-a-phone-number.tsx
+++ b/src/examples/enter-a-phone-number.tsx
@@ -1,4 +1,4 @@
-import { GoabBlock, GoabButton, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { GoabFormItem, GoabInput } from "@abgov/react-components";
 import { Sandbox } from "@components/sandbox";
 import { useContext } from "react";
 import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";