Skip to content

feat(#2137): input - added phone number and bank account examples #423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bdfranck merged 2 commits into from
Sep 10, 2025
Merged

feat(#2137): input - added phone number and bank account examples #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
247dab2
feat(#2137): input - added phone number and bank account examples
mxsoco Aug 19, 2025
f90727b
feat(#2137): input - removed redundant imports
mxsoco Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 197 additions & 0 deletions src/examples/ask-a-user-for-bank-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
113 changes: 113 additions & 0 deletions src/examples/enter-a-phone-number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import { 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;
14 changes: 14 additions & 0 deletions src/examples/text-field/TextFieldExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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">
Expand All @@ -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 />
</>
);
}
2 changes: 1 addition & 1 deletion src/routes/components/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -798,7 +798,7 @@ export default function TextFieldPage() {
heading={
<>
Examples
<GoabBadge type="information" content="6" />
<GoabBadge type="information" content="8" />
</>
}>
<TextFieldExamples />
Expand Down