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..b68f6894a --- /dev/null +++ b/src/examples/basic-question-page-with-a-dropdown.tsx @@ -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 ( +
+ + + {/*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 - + }>