Skip to content

feat(#2132): drop down - added more contextual examples #420

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 3 commits into from
Sep 9, 2025
Merged

feat(#2132): drop down - added more contextual examples #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b7b5ec
feat(#2132): drop down - added more contextual examples
mxsoco Aug 15, 2025
a348f6f
Merge branch 'alpha' into mxsoco/feat-2132
mxsoco Aug 27, 2025
0d91fed
feat(#2132): drop down - replaced "back-link" tags with GoabLink
mxsoco Aug 27, 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
178 changes: 178 additions & 0 deletions src/examples/basic-question-page-with-a-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
import { Sandbox } from "@components/sandbox";
import "./question-page/question-page-examples.css";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import {
GoabButton,
GoabFormItem,
GoabDropdown,
GoabDropdownItem,
GoabLink
} from "@abgov/react-components";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { useContext } from "react";

export default function BasicPageWithDropdown() {
const { version } = useContext(LanguageVersionContext);
return (
<div className="question-page-example">

<Sandbox fullWidth allow={["h2", "h3", "a"]} skipRender>
{/*Angular Code Snippet - need for leadingContent slot*/}

{version === "old" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goa-link action="back" leadingicon="chevron-back" mb="2xl">
<a href="#">Back</a>
</goa-link>

<goa-form-item label="Choose a location" mt="xl" labelSize="large">
<goa-dropdown onChange={() => {}} name="province-territory" ariaLabelledBy="provinceLabel">
<goa-dropdown-item value="AB" label="Alberta"></goa-dropdown-item>
<goa-dropdown-item value="BC" label="British Columbia"></goa-dropdown-item>
<goa-dropdown-item value="MB" label="Manitoba"></goa-dropdown-item>
<goa-dropdown-item value="NB" label="New Brunswick"></goa-dropdown-item>
<goa-dropdown-item value="NL" label="Newfoundland and Labrador"></goa-dropdown-item>
<goa-dropdown-item value="NS" label="Nova Scotia"></goa-dropdown-item>
<goa-dropdown-item value="ON" label="Ontario"></goa-dropdown-item>
<goa-dropdown-item value="PE" label="Prince Edward Island"></goa-dropdown-item>
<goa-dropdown-item value="QC" label="Quebec"></goa-dropdown-item>
<goa-dropdown-item value="SK" label="Saskatchewan"></goa-dropdown-item>
<goa-dropdown-item value="NT" label="Northwest Territories"></goa-dropdown-item>
<goa-dropdown-item value="NU" label="Nunavut"></goa-dropdown-item>
<goa-dropdown-item value="YT" label="Yukon"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
<goa-button type="submit" mt="2xl">
Continue
</goa-button>
`}
/>}

{version === "new" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goab-link action="back" leadingicon="chevron-back" mb="2xl">
<a href="#">Back</a>
</goab-link>

<goab-form-item label="Choose a location" mt="xl" labelSize="large">
<goab-dropdown onChange={() => {}} name="province-territory" ariaLabelledBy="provinceLabel">
<goab-dropdown-item value="AB" label="Alberta"></goab-dropdown-item>
<goab-dropdown-item value="BC" label="British Columbia"></goab-dropdown-item>
<goab-dropdown-item value="MB" label="Manitoba"></goab-dropdown-item>
<goab-dropdown-item value="NB" label="New Brunswick"></goab-dropdown-item>
<goab-dropdown-item value="NL" label="Newfoundland and Labrador"></goab-dropdown-item>
<goab-dropdown-item value="NS" label="Nova Scotia"></goab-dropdown-item>
<goab-dropdown-item value="ON" label="Ontario"></goab-dropdown-item>
<goab-dropdown-item value="PE" label="Prince Edward Island"></goab-dropdown-item>
<goab-dropdown-item value="QC" label="Quebec"></goab-dropdown-item>
<goab-dropdown-item value="SK" label="Saskatchewan"></goab-dropdown-item>
<goab-dropdown-item value="NT" label="Northwest Territories"></goab-dropdown-item>
<goab-dropdown-item value="NU" label="Nunavut"></goab-dropdown-item>
<goab-dropdown-item value="YT" label="Yukon"></goab-dropdown-item>
</goab-dropdown>
</goab-form-item>
<goab-button type="submit" mt="2xl">
Continue
</goab-button>
`}
/>}

{/*React Code Snippet - need for leadingContent slot*/}
{version === "old" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoALink action="back" leadingIcon="chevron-back" mb="2xl">
<a href="#">Back</a>
</GoALink>

<GoAFormItem label="Choose a location" mt="xl" labelSize="large">
<GoADropdown onChange={() => {}} name="province-territory" ariaLabelledBy="provinceLabel">
<GoADropdownItem value="AB" label="Alberta" />
<GoADropdownItem value="BC" label="British Columbia" />
<GoADropdownItem value="MB" label="Manitoba" />
<GoADropdownItem value="NB" label="New Brunswick" />
<GoADropdownItem value="NL" label="Newfoundland and Labrador" />
<GoADropdownItem value="NS" label="Nova Scotia" />
<GoADropdownItem value="ON" label="Ontario" />
<GoADropdownItem value="PE" label="Prince Edward Island" />
<GoADropdownItem value="QC" label="Quebec" />
<GoADropdownItem value="SK" label="Saskatchewan" />
<GoADropdownItem value="NT" label="Northwest Territories" />
<GoADropdownItem value="NU" label="Nunavut" />
<GoADropdownItem value="YT" label="Yukon" />
</GoADropdown>
</GoAFormItem>
<GoAButton type="submit" mt="2xl">
Continue
</GoAButton>
`}
/>}

{version === "new" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoabLink action="back" leadingIcon="chevron-back" mb="2xl">
<a href="#">Back</a>
</GoabLink>

<GoabFormItem label="Choose a location" mt="xl" labelSize="large">
<GoabDropdown onChange={() => {}} name="province-territory" ariaLabelledBy="provinceLabel">
<GoabDropdownItem value="AB" label="Alberta" />
<GoabDropdownItem value="BC" label="British Columbia" />
<GoabDropdownItem value="MB" label="Manitoba" />
<GoabDropdownItem value="NB" label="New Brunswick" />
<GoabDropdownItem value="NL" label="Newfoundland and Labrador" />
<GoabDropdownItem value="NS" label="Nova Scotia" />
<GoabDropdownItem value="ON" label="Ontario" />
<GoabDropdownItem value="PE" label="Prince Edward Island" />
<GoabDropdownItem value="QC" label="Quebec" />
<GoabDropdownItem value="SK" label="Saskatchewan" />
<GoabDropdownItem value="NT" label="Northwest Territories" />
<GoabDropdownItem value="NU" label="Nunavut" />
<GoabDropdownItem value="YT" label="Yukon" />
</GoabDropdown>
</GoabFormItem>
<GoabButton type="submit" mt="2xl">
Continue
</GoabButton>
`}
/>}

<GoabLink action="back" leadingIcon="chevron-back" mb="2xl">
<a href="#">Back</a>
</GoabLink>

<GoabFormItem label="Choose a location" mt="xl" labelSize="large">
<GoabDropdown onChange={() => {}} name="province-territory" ariaLabelledBy="provinceLabel">
<GoabDropdownItem value="AB" label="Alberta" />
<GoabDropdownItem value="BC" label="British Columbia" />
<GoabDropdownItem value="MB" label="Manitoba" />
<GoabDropdownItem value="NB" label="New Brunswick" />
<GoabDropdownItem value="NL" label="Newfoundland and Labrador" />
<GoabDropdownItem value="NS" label="Nova Scotia" />
<GoabDropdownItem value="ON" label="Ontario" />
<GoabDropdownItem value="PE" label="Prince Edward Island" />
<GoabDropdownItem value="QC" label="Quebec" />
<GoabDropdownItem value="SK" label="Saskatchewan" />
<GoabDropdownItem value="NT" label="Northwest Territories" />
<GoabDropdownItem value="NU" label="Nunavut" />
<GoabDropdownItem value="YT" label="Yukon" />
</GoabDropdown>
</GoabFormItem>
<GoabButton type="submit" mt="2xl">
Continue
</GoabButton>
</Sandbox>
</div>
);
}
120 changes: 120 additions & 0 deletions src/examples/choose-one-option-from-a-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import { GoabDropdown, GoabDropdownItem, GoabFormItem } from "@abgov/react-components";
import { useContext } from "react";
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";

export const ChooseOneOptionFromList = () => {
const {version} = useContext(LanguageVersionContext);
const noop = () => {}
return (

<Sandbox flags={["event"]} skipRender>

{version === "old" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
export class SomeOtherComponent {
dropdownOnChange(event: GoabDropdownOnChangeDetail) {
console.log(event);
}
}
`}
/>}

{version === "old" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goa-form-item label="Basic dropdown">
<goa-dropdown (_change)="onChange($event) name="item" value="" placeholder="--Select--">
<goa-dropdown-item value="add" label="Add"></goa-dropdown-item>
<goa-dropdown-item value="remove" label="Remove"></goa-dropdown-item>
<goa-dropdown-item value="modify" label="Modify"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
`}
/>}

{version === "new" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goab-form-item label="Basic dropdown">
<goab-dropdown (onChange)="dropdownOnChange($event)" name="item" value="" placeholder="--Select--">
<goab-dropdown-item value="add" label="Add"></goab-dropdown-item>
<goab-dropdown-item value="remove" label="Remove"></goab-dropdown-item>
<goab-dropdown-item value="modify" label="Modify"></goab-dropdown-item>
</goab-dropdown>
</goab-form-item>
`}
/>}

{version === "old" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
function onChange(name: string, value: Date) {
console.log(name, value);
}
`}
/>}

{version === "old" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoAFormItem label="Basic dropdown">
<GoADropdown onChange={onChange} name="item" value="" placeholder="--Select--">
<GoADropdownItem value="add" label="Add"></GoADropdownItem>
<GoADropdownItem value="remove" label="Remove"></GoADropdownItem>
<GoADropdownItem value="modify" label="Modify"></GoADropdownItem>
</GoADropdown>
</GoAFormItem>
`}
/>}

{version === "new" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
function dropdownOnChange(event: GoabDropdownOnChangeDetail)) {
console.log(event.value);
}
`}
/>}

{version === "new" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoabFormItem label="Basic dropdown">
<GoabDropdown onChange={dropdownOnChange} name="item" value="" placeholder="--Select--">
<GoabDropdownItem value="add" label="Add"></GoabDropdownItem>
<GoabDropdownItem value="remove" label="Remove"></GoabDropdownItem>
<GoabDropdownItem value="modify" label="Modify"></GoabDropdownItem>
</GoabDropdown>
</GoabFormItem>
`}
/>}

<GoabFormItem label="Basic dropdown">
<GoabDropdown onChange={noop} name="item" value="" placeholder="--Select--">
<GoabDropdownItem value="add" label="Add"></GoabDropdownItem>
<GoabDropdownItem value="remove" label="Remove"></GoabDropdownItem>
<GoabDropdownItem value="modify" label="Modify"></GoabDropdownItem>
</GoabDropdown>
</GoabFormItem>
</Sandbox>
);
}

export default ChooseOneOptionFromList;
24 changes: 24 additions & 0 deletions src/examples/dropdown/DropdownExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,27 @@ import { DynamicallyAddAnItemToADropdownList } from "@examples/dynamically-add-a
import {
DynamicallyChangeItemsInADropdownList
} from "@examples/dynamically-change-items-in-a-dropdown-list.tsx";
import { FilterItemsInADropdownList } from "@examples/filter-through-long-list-to-choose-an-option.tsx";
import { ChooseOneOptionFromList } from "@examples/choose-one-option-from-a-list.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
import BasicPageWithDropdown from "@examples/basic-question-page-with-a-dropdown.tsx";


export const DropdownExamples = () => {
return (
<>
<SandboxHeader
exampleTitle="Choose one option from a list"
figmaExample="">
</SandboxHeader>
<ChooseOneOptionFromList />

<SandboxHeader
exampleTitle="Filter through a long list to choose an option"
figmaExample="">
</SandboxHeader>
<FilterItemsInADropdownList />

<SandboxHeader
exampleTitle="Dynamically add an item to a dropdown list"
figmaExample="">
Expand All @@ -18,6 +34,14 @@ export const DropdownExamples = () => {
figmaExample="">
</SandboxHeader>
<DynamicallyChangeItemsInADropdownList />

<SandboxHeader
exampleTitle="Basic question page"
figmaExample="">
</SandboxHeader>
<BasicPageWithDropdown />


</>
);
}
Loading