From 7b7b5ecd55305c868d2a92a3cc27af8947090e93 Mon Sep 17 00:00:00 2001 From: Miguel Date: Fri, 15 Aug 2025 10:52:50 -0600 Subject: [PATCH 1/2] feat(#2132): drop down - added more contextual examples --- .../basic-question-page-with-a-dropdown.tsx | 202 ++++++++++++++++++ .../choose-one-option-from-a-list.tsx | 120 +++++++++++ src/examples/dropdown/DropdownExamples.tsx | 24 +++ ...-through-long-list-to-choose-an-option.tsx | 150 +++++++++++++ src/routes/components/Dropdown.tsx | 2 +- 5 files changed, 497 insertions(+), 1 deletion(-) create mode 100644 src/examples/basic-question-page-with-a-dropdown.tsx create mode 100644 src/examples/choose-one-option-from-a-list.tsx create mode 100644 src/examples/filter-through-long-list-to-choose-an-option.tsx diff --git a/src/examples/basic-question-page-with-a-dropdown.tsx b/src/examples/basic-question-page-with-a-dropdown.tsx new file mode 100644 index 000000000..5f8f87538 --- /dev/null +++ b/src/examples/basic-question-page-with-a-dropdown.tsx @@ -0,0 +1,202 @@ +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 +} from "@abgov/react-components"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { useContext } from "react"; + +export default function BasicPageWithDropdown() { + const { version } = useContext(LanguageVersionContext); + return ( +
+ + + {/*CSS Code Snippet*/} + ') center center no-repeat; + } + + a.back-link:visited::before, + a.back-link:hover::before { + background: url('data:image/svg+xml,') center center no-repeat; + } + + a.back-link { + margin-top: var(--goa-space-m); + } + `} + /> + + {/*Angular Code Snippet - need for leadingContent slot*/} + + {version === "old" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + {version === "new" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + {/*React Code Snippet - need for leadingContent slot*/} + {version === "old" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + {version === "new" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + +
+ ); +} diff --git a/src/examples/choose-one-option-from-a-list.tsx b/src/examples/choose-one-option-from-a-list.tsx new file mode 100644 index 000000000..04b21143b --- /dev/null +++ b/src/examples/choose-one-option-from-a-list.tsx @@ -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 ( + + + + {version === "old" && } + + {version === "old" && + + + + + + + `} + />} + + {version === "new" && + + + + + + + `} + />} + + {version === "old" && } + + {version === "old" && + + + + + + + `} + />} + + {version === "new" && } + + {version === "new" && + + + + + + + `} + />} + + + + + + + + + + ); +} + +export default ChooseOneOptionFromList; diff --git a/src/examples/dropdown/DropdownExamples.tsx b/src/examples/dropdown/DropdownExamples.tsx index b172aa191..e7a47d56b 100644 --- a/src/examples/dropdown/DropdownExamples.tsx +++ b/src/examples/dropdown/DropdownExamples.tsx @@ -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 ( <> + + + + + + + + @@ -18,6 +34,14 @@ export const DropdownExamples = () => { figmaExample=""> + + + + + + ); } diff --git a/src/examples/filter-through-long-list-to-choose-an-option.tsx b/src/examples/filter-through-long-list-to-choose-an-option.tsx new file mode 100644 index 000000000..b6800e4a3 --- /dev/null +++ b/src/examples/filter-through-long-list-to-choose-an-option.tsx @@ -0,0 +1,150 @@ +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 FilterItemsInADropdownList = () => { + const {version} = useContext(LanguageVersionContext); + + return ( + + + + {version === "old" && } + + {version === "old" && + + + + + + + + + + + + + `} + />} + + {version === "new" && + + + + + + + + + + + + + `} + />} + + {version === "old" && } + + {version === "old" && + + + + + + + + + + + + + `} + />} + + {version === "new" && } + + {version === "new" && + + + + + + + + + + + + + `} + />} + + + + + + + + + + + + + + + + ); +} + +export default FilterItemsInADropdownList; diff --git a/src/routes/components/Dropdown.tsx b/src/routes/components/Dropdown.tsx index 160473ab3..af111a26a 100644 --- a/src/routes/components/Dropdown.tsx +++ b/src/routes/components/Dropdown.tsx @@ -426,7 +426,7 @@ export default function DropdownPage() { heading={ <> Examples - + }> From 0d91fed35cc109e1249adf45468ca5d9c95b2fb4 Mon Sep 17 00:00:00 2001 From: Miguel Date: Wed, 27 Aug 2025 13:31:12 -0600 Subject: [PATCH 2/2] feat(#2132): drop down - replaced "back-link" tags with GoabLink --- .../basic-question-page-with-a-dropdown.tsx | 58 ++++++------------- 1 file changed, 17 insertions(+), 41 deletions(-) diff --git a/src/examples/basic-question-page-with-a-dropdown.tsx b/src/examples/basic-question-page-with-a-dropdown.tsx index 5f8f87538..b68f6894a 100644 --- a/src/examples/basic-question-page-with-a-dropdown.tsx +++ b/src/examples/basic-question-page-with-a-dropdown.tsx @@ -5,7 +5,8 @@ import { GoabButton, GoabFormItem, GoabDropdown, - GoabDropdownItem + GoabDropdownItem, + GoabLink } from "@abgov/react-components"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { useContext } from "react"; @@ -16,31 +17,6 @@ export default function BasicPageWithDropdown() {
- {/*CSS Code Snippet*/} - ') center center no-repeat; - } - - a.back-link:visited::before, - a.back-link:hover::before { - background: url('data:image/svg+xml,') center center no-repeat; - } - - a.back-link { - margin-top: var(--goa-space-m); - } - `} - /> - {/*Angular Code Snippet - need for leadingContent slot*/} {version === "old" && - Back - + + Back + {}} name="province-territory" ariaLabelledBy="provinceLabel"> @@ -80,9 +56,9 @@ export default function BasicPageWithDropdown() { tags="angular" allowCopy={true} code={` - - Back - + + Back + {}} name="province-territory" ariaLabelledBy="provinceLabel"> @@ -113,9 +89,9 @@ export default function BasicPageWithDropdown() { tags="react" allowCopy={true} code={` - - Back - + + Back + {}} name="province-territory" ariaLabelledBy="provinceLabel"> @@ -145,9 +121,9 @@ export default function BasicPageWithDropdown() { tags="react" allowCopy={true} code={` - - Back - + + Back + {}} name="province-territory" ariaLabelledBy="provinceLabel"> @@ -172,9 +148,9 @@ export default function BasicPageWithDropdown() { `} />} - - Back - + + Back + {}} name="province-territory" ariaLabelledBy="provinceLabel">