diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 000000000..3b67e0c47 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,37 @@ +# Project Overview +This project contains the public documentation for the Government of Alberta's Design System. + +## Libraries and Frameworks +- The site is built with React components from the Government of Alberta's UI Components library. + +## Folder Structure +- `src/routes/home.tsx`: The home page. +- `src/routes/get-started`: The pages for starting with the design system. +- `src/routes/examples/ExamplesOverview.tsx`: The page listing all examples. +- `src/examples`: Examples of patterns, pages, tasks, component configurations, flows, and more. +- `src/routes/components/AllComponents.tsx`: The page listing all components. +- `src/routes/components`: The pages for each UI component. +- `src/routes/design-tokens`: The pages for design tokens. +- `src/routes/foundations`: The pages for design foundations. + +## Component versions +- Documentation for the most recent version of components are shown with `version === "new"`. +- Documentation for old Long-Term Support (LTS) components are shown with `version === "old"`. + +## Commits & Pull Requests +- Use Conventional Commits format for commit messages. +- Use the present tense. +- Use the imperative mood. +- Limit the first line to 72 characters or less. +- Start the commit message with a reference to the GitHub Issue number, such as `feat(#1234):` +- If the commit relates to an issue, include "Closes #ISSUE_NUMBER" in the commit message. +- If the commit relates to a breaking change, include "BREAKING CHANGE:" in the commit message. + +## Pull Requests +- Only add a single commit to a Pull Request. +- Start the Pull Request title with a reference to the GitHub Issue number, such as `feat(#1234):` + +## CSS and Design Tokens +- Use CSS custom properties that are defined by our design tokens. +- Name custom properties for global styles in this format: `--goa-[category]-[name]`, such as `--goa-color-primary`. +- Name custom properties for component-specific styles in this format: `--goa-[component]-[category]-[name]`. diff --git a/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx b/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx index 73d3af5a0..d3b2061c9 100644 --- a/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx +++ b/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx @@ -13,7 +13,7 @@ export function AccessibilityEmpty(props: Props) { component page in Figma. {" "} - + More accessibility guidance for design and development is coming soon. 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 ( + + {/*React code*/} + + {version === "old" && (''); + const [account, setAccount] = useState(''); + const [bank, setBank] = useState(''); + function onChangeName(event: GoabInputOnChangeDetail) { + setName(event.value); + } + function onChangeAccount(event: GoabInputOnChangeDetail) { + setAccount(event.value); + } + function onChangeBank(event: GoabInputOnChangeDetail) { + setBank(event.value); + } + `} + />} + + {version === "old" && + + + + + + + + + + + + + `} + />} + + {version === "new" && (''); + const [account, setAccount] = useState(''); + const [bank, setBank] = useState(''); + function onChangeName(event: GoabInputOnChangeDetail) { + setName(event.value); + } + function onChangeAccount(event: GoabInputOnChangeDetail) { + setAccount(event.value); + } + function onChangeBank(event: GoabInputOnChangeDetail) { + setBank(event.value); + } + `} + />} + {version === "new" && + + + + + + + + + + + + + `} + />} + + {/*Angular code*/} + + {version === "old" && } + + {version === "new" && } + + + + + + + + + + + + + + + + + ) +} + +export default AskAUserForBankDetails; diff --git a/src/examples/ask-a-user-for-direct-deposit-information.tsx b/src/examples/ask-a-user-for-direct-deposit-information.tsx index 0faf09f91..f10e0701f 100644 --- a/src/examples/ask-a-user-for-direct-deposit-information.tsx +++ b/src/examples/ask-a-user-for-direct-deposit-information.tsx @@ -139,7 +139,7 @@ export const AskAUserForDirectDepositInformation = () => { - +

Below is an example of where you can find the required bank information on a personal cheque. 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/button-group/ButtonGroupExamples.tsx b/src/examples/button-group/ButtonGroupExamples.tsx new file mode 100644 index 000000000..0c2e6d905 --- /dev/null +++ b/src/examples/button-group/ButtonGroupExamples.tsx @@ -0,0 +1,28 @@ +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import MultipleActionsinATable from "@examples/multiple-actions-in-a-table.tsx"; +import RemoveAFilter from "@examples/require-user-action-before-continuing.tsx"; +import CompactButtonGroup from "@examples/compact-button-group.tsx"; + +export const ButtonGroupExamples = () => { + + return <> + {/*Button Group Example 1*/} + + + + + {/*Button Group example 2*/} + + + + + {/*Button Group example 3*/} + + + + + ; +}; diff --git a/src/examples/button/ButtonExamples.tsx b/src/examples/button/ButtonExamples.tsx index 484468bc7..7b94722e0 100644 --- a/src/examples/button/ButtonExamples.tsx +++ b/src/examples/button/ButtonExamples.tsx @@ -1,6 +1,7 @@ import { AskAUserForAnAddress } from "@examples/ask-a-user-for-an-address.tsx"; import { ConfirmADestructiveAction } from "@examples/confirm-a-destructive-action.tsx"; import { DisabledButtonWithARequiredField } from "@examples/disabled-button-with-a-required-field.tsx"; +import { CompactButtonsInATable } from "@examples/compact-buttons-in-a-table.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const ButtonExamples = () => { @@ -20,11 +21,18 @@ export const ButtonExamples = () => { - {/*Button example */} + {/*Button example 3*/} + + {/*Button example 4*/} + + + ; }; 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/compact-button-group.tsx b/src/examples/compact-button-group.tsx new file mode 100644 index 000000000..166e2f971 --- /dev/null +++ b/src/examples/compact-button-group.tsx @@ -0,0 +1,172 @@ +import { useContext } from "react"; +import { Sandbox } from "@components/sandbox"; +import { GoabButtonGroup, GoabButton } from "@abgov/react-components"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; + +function onClick() { + console.log('clicked'); +} + +export const CompactButtonGroup = () => { + const { version } = useContext(LanguageVersionContext); + + return ( + + + {version === "old" && ( + + )} + + {version === "old" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + {version === "new" && ( + + )} + + {version === "new" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + {version === "old" && ( + + )} + + {version === "old" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + {version === "new" && ( + + )} + + {version === "new" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + + + Button + + + Button + + + Button + + + + ) +} + +export default CompactButtonGroup; diff --git a/src/examples/compact-buttons-in-a-table.tsx b/src/examples/compact-buttons-in-a-table.tsx new file mode 100644 index 000000000..606f73411 --- /dev/null +++ b/src/examples/compact-buttons-in-a-table.tsx @@ -0,0 +1,466 @@ +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabButton, + GoabButtonGroup, + GoabPagination, + GoabTable +} from "@abgov/react-components"; +import { useContext, useEffect, useState } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { faker } from "@faker-js/faker"; + +interface User { + id: string; + firstName: string; + lastName: string; +} +export const CompactButtonsInATable = () => { + const { version } = useContext(LanguageVersionContext); + const [users, setUsers] = useState([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage] = useState(10); + const noop = () => {}; + + useEffect(() => { + const _users = []; + for (let i = 1; i <= 100; i++) { + _users.push({ + id: faker.string.uuid(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName() + }); + } + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * perPage; + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + return ( + <> + + + {/*============= React code ==============*/} + {version === "old" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage] = useState(10); + + useEffect(() => { + const _users = []; + for (let i = 1; i <= 100; i++) { + _users.push({ + id: faker.datatype.uuid(), + firstName: faker.name.firstName(), + lastName: faker.name.lastName() + }); + } + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * 10; + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + `} + /> + )} + + {version === "new" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage] = useState(10); + + useEffect(() => { + const _users = []; + for (let i = 1; i <= 100; i++) { + _users.push({ + id: faker.string.uuid(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName() + }); + } + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * 10; + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + `} + /> + )} + + {version === "old" && ( + + + + First name + Last name + Number + + + + + {pageUsers.map(u => ( + + {u.firstName} + {u.lastName} + 12345667 + + + + View + + + + + ))} + + + + changePage(event.page)} + /> + `} + /> + )} + + {version === "new" && ( + + + + First name + Last name + Number + + + + + {pageUsers.map(u => ( + + {u.firstName} + {u.lastName} + 12345667 + + + + View + + + + + ))} + + + + changePage(event.page)} + /> + `} + /> + )} + + {/*================ Angular code ==================*/} + {version === "old" && ( + + )} + + {version === "new" && ( + + )} + + {version === "old" && ( + + + + First name + Last name + Number + + + + + + {{ user.firstName }} + {{ user.lastName }} + 12345667 + + + + View + + + + + + + + + `} + /> + )} + + {version === "new" && ( + + + + First name + Last name + Number + + + + + + {{ user.firstName }} + {{ user.lastName }} + 12345667 + + + + View + + + + + + + + + `} + /> + )} + + + + + First name + Last name + Number + + + + + {pageUsers.map(u => ( + + {u.firstName} + {u.lastName} + 12345667 + + + + View + + + + + ))} + + + + changePage(event.page)} + /> + + + ); +} + +export default CompactButtonsInATable; \ No newline at end of file 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/enter-a-phone-number.tsx b/src/examples/enter-a-phone-number.tsx new file mode 100644 index 000000000..b5216d7fe --- /dev/null +++ b/src/examples/enter-a-phone-number.tsx @@ -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 ( + + + {/*Angular code*/} + + {version === "old" && ( + + )} + + {version === "new" && ( + + )} + + {/*React code*/} + + {version === "old" && ( + (""); + function onChangePhoneNumber(event: GoabInputOnChangeDetail) { + setPhoneNumber(event.value); + } + `} + /> + )} + + {version === "old" && ( + + + + `} + /> + )} + + {version === "new" && ( + (""); + function onChangePhoneNumber(event: GoabInputOnChangeDetail) { + setPhoneNumber(event.value); + } + `} + /> + )} + + {version === "new" && ( + + + + `} + /> + )} + +
+ + + +
+ + ); +} + +export default EnterAPhoneNumber; 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/examples/multiple-actions-in-a-table.tsx b/src/examples/multiple-actions-in-a-table.tsx new file mode 100644 index 000000000..161deea0b --- /dev/null +++ b/src/examples/multiple-actions-in-a-table.tsx @@ -0,0 +1,1193 @@ +import { + GoabBadge, + GoabBlock, + GoabButton, + GoabButtonGroup, + GoabDropdown, + GoabDropdownItem, + GoabPagination, + GoabTable, + GoabSpacer, +} from "@abgov/react-components"; +import { Sandbox } from "@components/sandbox"; +import { GoabBadgeType } from "@abgov/ui-components-common"; +import { useContext, useEffect, useState } from "react"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; + +interface User { + badgeType: string; + status: string; + name: string; + text: string; + number: number; +} + +export default function MultipleActionsinATable() { + const { version } = useContext(LanguageVersionContext); + const [users, setUsers] = useState([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(5); + + useEffect(() => { + const _users: User[] = [ + { + badgeType: "success", + status: "Approved", + name:"1", + text: "Ralph Edwards", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"2", + text: "Devon Lane", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"3", + text: "Marvin McKinney", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"4", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"5", + text: "Ronald Richards", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"6", + text: "Diane Russell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"7", + text: "Raoul Emmerich", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"8", + text: "Delilah Farrell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"9", + text: "Brock Sipes", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"10", + text: "Aylin Hansen", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"11", + text: "Eldora Waters", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"12", + text: "Guillermo Kohler", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"13", + text: "Ryley Medhurst", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"14", + text: "Craig Russel", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"15", + text: "Scot Hayes", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"16", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"17", + text: "Amiya Langosh", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"18", + text: "Demetrius Cormier", + number: 1234567890, + }, + ]; + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * (perPage); + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) { + const perPageValue = parseInt(event.value || '1'); + setPage(1); + setPerPage(perPageValue); + const _users = users.slice(0, perPageValue); + setPageUsers(_users); + } + + return ( + <> + + + {version === "old" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(5); + + useEffect(() => { + const _users: User[] = [ + { + badgeType: "success", + status: "Approved", + name:"1", + text: "Ralph Edwards", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"2", + text: "Devon Lane", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"3", + text: "Marvin McKinney", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"4", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"5", + text: "Ronald Richards", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"6", + text: "Diane Russell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"7", + text: "Raoul Emmerich", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"8", + text: "Delilah Farrell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"9", + text: "Brock Sipes", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"10", + text: "Aylin Hansen", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"11", + text: "Eldora Waters", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"12", + text: "Guillermo Kohler", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"13", + text: "Ryley Medhurst", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"14", + text: "Craig Russel", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"15", + text: "Scot Hayes", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"16", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"17", + text: "Amiya Langosh", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"18", + text: "Demetrius Cormier", + number: 1234567890, + }, + ]; + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * (perPage); + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + function handlePerPageCountChangeEvent(name: string, value: string | string[]) { + const perPageValue = Array.isArray(value) ? parseInt(value[0]) : parseInt(value); + setPage(1); + setPerPage(perPageValue); + const _users = users.slice(0, perPageValue); + setPageUsers(_users); + } + `} + /> + )} + + {version === "old" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {user.text} + {user.number} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {users.length} + + + + changePage(event.page)} + variant="links-only" + /> + + `} + /> + )} + + {version === "new" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(5); + + useEffect(() => { + const _users: User[] = [ + { + badgeType: "success", + status: "Approved", + name:"1", + text: "Ralph Edwards", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"2", + text: "Devon Lane", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"3", + text: "Marvin McKinney", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"4", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"5", + text: "Ronald Richards", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"6", + text: "Diane Russell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"7", + text: "Raoul Emmerich", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"8", + text: "Delilah Farrell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"9", + text: "Brock Sipes", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"10", + text: "Aylin Hansen", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"11", + text: "Eldora Waters", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"12", + text: "Guillermo Kohler", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"13", + text: "Ryley Medhurst", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"14", + text: "Craig Russel", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"15", + text: "Scot Hayes", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"16", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"17", + text: "Amiya Langosh", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"18", + text: "Demetrius Cormier", + number: 1234567890, + }, + ]; + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * (perPage); + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) { + const perPageValue = parseInt(event.value || '1'); + setPage(1); + setPerPage(perPageValue); + const _users = users.slice(0, perPageValue); + setPageUsers(_users); + } + `} + /> + )} + + {version === "new" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {user.text} + {user.number} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {users.length} + + + + changePage(event.page)} + variant="links-only" + /> + + `} + /> + )} + + {version === "old" && ( + + )} + + {version === "old" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {{ user.text }} + {{ user.number }} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {{ this.users.length }} + + + + + + `} + /> + )} + + {version === "new" && ( + + )} + + {version === "new" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {{ user.text }} + {{ user.number }} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {{ this.users.length }} + + + + + + `} + /> + )} + + + + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {user.text} + {user.number} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {users.length} + + + + changePage(event.page)} + variant="links-only" + /> + + + + ); +} + \ No newline at end of file diff --git a/src/examples/set-a-specific-tab-to-be-active.tsx b/src/examples/set-a-specific-tab-to-be-active.tsx index c910cbcb9..3f005b8d3 100644 --- a/src/examples/set-a-specific-tab-to-be-active.tsx +++ b/src/examples/set-a-specific-tab-to-be-active.tsx @@ -113,7 +113,7 @@ export const SetASpecificTabToBeActive = () => { tags="angular" allowCopy={true} code={` - +
All
diff --git a/src/examples/show-a-list-to-help-answer-a-question.tsx b/src/examples/show-a-list-to-help-answer-a-question.tsx index d7bff981f..30678c393 100644 --- a/src/examples/show-a-list-to-help-answer-a-question.tsx +++ b/src/examples/show-a-list-to-help-answer-a-question.tsx @@ -51,7 +51,7 @@ export const ShowAListToHelpAnswerAQuestion = () => { - +
Examples of education expenses 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() { + + + + @@ -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"> + + + + ); } \ No newline at end of file diff --git a/src/routes/components/Button.tsx b/src/routes/components/Button.tsx index 2ab63d3d7..88b0ae7b6 100644 --- a/src/routes/components/Button.tsx +++ b/src/routes/components/Button.tsx @@ -33,7 +33,7 @@ export default function ButtonPage() { label: "Type", type: "list", name: "type", - options: ["primary", "submit", "secondary", "tertiary", "start"], + options: ["primary", "secondary", "tertiary", "start"], value: "", defaultValue: "primary", }, @@ -71,7 +71,7 @@ export default function ButtonPage() { const oldComponentProperties: ComponentProperty[] = [ { name: "type", - type: "primary | submit | secondary | tertiary | start", + type: "primary | secondary | tertiary | start", description: "Sets the type of button.", defaultValue: "primary", }, @@ -140,7 +140,7 @@ export default function ButtonPage() { const componentProperties: ComponentProperty[] = [ { name: "type", - type: "GoabButtonType (primary | submit | secondary | tertiary | start)", + type: "GoabButtonType (primary | secondary | tertiary | start)", description: "Sets the type of button.", defaultValue: "primary", }, @@ -248,7 +248,7 @@ export default function ButtonPage() { heading={ <> Examples - + } > diff --git a/src/routes/components/ButtonGroup.tsx b/src/routes/components/ButtonGroup.tsx index 056b0cc13..4ee4ffedd 100644 --- a/src/routes/components/ButtonGroup.tsx +++ b/src/routes/components/ButtonGroup.tsx @@ -11,7 +11,7 @@ import { GoabButtonGroupAlignment } from "@abgov/ui-components-common"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; -import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; +import { ButtonGroupExamples } from "@examples/button-group/ButtonGroupExamples.tsx"; const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302108"; @@ -156,11 +156,11 @@ export default function ButtonGroupPage() { heading={ <> Examples - + } > - + 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 - + }> 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 - + }> diff --git a/src/routes/design-tokens/border-radius/BorderRadius.tsx b/src/routes/design-tokens/border-radius/BorderRadius.tsx index ebff7fd56..22d85b867 100644 --- a/src/routes/design-tokens/border-radius/BorderRadius.tsx +++ b/src/routes/design-tokens/border-radius/BorderRadius.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./BorderRadius.css"; import { Token } from "../token"; @@ -120,7 +120,7 @@ export default function BorderRadiusPage() { return ( -

Border Radius

+ Border Radius {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/border-width/BorderWidth.tsx b/src/routes/design-tokens/border-width/BorderWidth.tsx index 3299e4f3b..7c7ec9bb5 100644 --- a/src/routes/design-tokens/border-width/BorderWidth.tsx +++ b/src/routes/design-tokens/border-width/BorderWidth.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./BorderWidth.css"; import { Token } from "../token"; @@ -118,7 +118,7 @@ export default function BorderWidthPage() { return ( -

Border Width

+ Border Width {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/color/Color.tsx b/src/routes/design-tokens/color/Color.tsx index eab8cd91f..a9d82362a 100644 --- a/src/routes/design-tokens/color/Color.tsx +++ b/src/routes/design-tokens/color/Color.tsx @@ -110,7 +110,7 @@ export default function ColorPage() { return ( -

Color

+ Color {isDesktop ? renderDesktop() : renderTablet()} ); diff --git a/src/routes/design-tokens/icon-size/IconSize.tsx b/src/routes/design-tokens/icon-size/IconSize.tsx index 871af740a..37982c6b6 100644 --- a/src/routes/design-tokens/icon-size/IconSize.tsx +++ b/src/routes/design-tokens/icon-size/IconSize.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabIcon, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabIcon, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./IconSize.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -138,7 +138,7 @@ export default function IconSizePage() { return ( -

Icon size

+ Icon size {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/opacity/Opacity.tsx b/src/routes/design-tokens/opacity/Opacity.tsx index 373ebb416..46b1dace0 100644 --- a/src/routes/design-tokens/opacity/Opacity.tsx +++ b/src/routes/design-tokens/opacity/Opacity.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Opacity.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -94,7 +94,7 @@ export default function OpacityPage() { return ( -

Opacity

+ Opacity {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/shadow/Shadow.tsx b/src/routes/design-tokens/shadow/Shadow.tsx index 15c7dab36..e4db48116 100644 --- a/src/routes/design-tokens/shadow/Shadow.tsx +++ b/src/routes/design-tokens/shadow/Shadow.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Shadow.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -110,7 +110,7 @@ export default function ShadowPage() { return ( -

Shadow

+ Shadow {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/spacing/Spacing.tsx b/src/routes/design-tokens/spacing/Spacing.tsx index b942561d2..d5a54c8cc 100644 --- a/src/routes/design-tokens/spacing/Spacing.tsx +++ b/src/routes/design-tokens/spacing/Spacing.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Spacing.css"; import SPACING_TOKENS from "./spacing.json"; @@ -90,7 +90,7 @@ export default function SpacingPage() { return ( -

Spacing

+ Spacing {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/typography/Typography.tsx b/src/routes/design-tokens/typography/Typography.tsx index 1814e2ad7..fd0df2628 100644 --- a/src/routes/design-tokens/typography/Typography.tsx +++ b/src/routes/design-tokens/typography/Typography.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import TYPO_TOKENS from "./typography.json"; import { getTokenGroups } from "../getTokenGroups"; @@ -81,7 +81,7 @@ export default function TypographyPage() { return (
-

Typography

+ Typography {isDesktop ? renderDesktop() : renderMobile()}
diff --git a/src/routes/foundations/Accessibility.tsx b/src/routes/foundations/Accessibility.tsx index c033c8e47..f208ff8ff 100644 --- a/src/routes/foundations/Accessibility.tsx +++ b/src/routes/foundations/Accessibility.tsx @@ -8,7 +8,7 @@ export default function AccessibilityPage() { Accessibility - + We aim to create digital products that everyone can use, no matter their abilities or situation. This guide outlines key principles, design tips, and tools to help create accessible and inclusive experiences. diff --git a/src/routes/foundations/BrandGuidelines.tsx b/src/routes/foundations/BrandGuidelines.tsx index 9b593436c..221c6a9b6 100644 --- a/src/routes/foundations/BrandGuidelines.tsx +++ b/src/routes/foundations/BrandGuidelines.tsx @@ -7,7 +7,7 @@ export default function BrandGuidelinesPage() { Brand guidelines - + Communications and Public Engagement (CPE) plays an important role in providing and maintaining brand identity guidelines across the Government of Alberta. These guidelines ensure all digital products are consistent and easily recognizable, building trust with users. diff --git a/src/routes/foundations/Capitalization.tsx b/src/routes/foundations/Capitalization.tsx index a159e7d1d..afb6ebbd4 100644 --- a/src/routes/foundations/Capitalization.tsx +++ b/src/routes/foundations/Capitalization.tsx @@ -8,10 +8,11 @@ export default function CapitalizationPage() { return ( - + Content guidelines + Capitalization - + Use sentence case for all headings, labels, and content. diff --git a/src/routes/foundations/Color.tsx b/src/routes/foundations/Color.tsx index 0cf00f8a0..6a917b957 100644 --- a/src/routes/foundations/Color.tsx +++ b/src/routes/foundations/Color.tsx @@ -5,10 +5,11 @@ export default function FoundationsColorPage() { return ( - + Style guide + Color - + Colors play a major role in how the Government of Alberta communicates. They serve as a tool to convey clarity, express emotions, and promote inclusivity. diff --git a/src/routes/foundations/DateFormat.tsx b/src/routes/foundations/DateFormat.tsx index 03623321b..9133f84d7 100644 --- a/src/routes/foundations/DateFormat.tsx +++ b/src/routes/foundations/DateFormat.tsx @@ -7,10 +7,11 @@ const minGridWidth = "36ch"; export default function DateFormatPage() { return ( - + Content guidelines + Date format - + Configuration which contains date information that includes the specification of the form and structure of the date data within the date format in different scenarios. diff --git a/src/routes/foundations/DesignAtGoA.tsx b/src/routes/foundations/DesignAtGoA.tsx index b6a74b8b3..9c6236562 100644 --- a/src/routes/foundations/DesignAtGoA.tsx +++ b/src/routes/foundations/DesignAtGoA.tsx @@ -7,7 +7,7 @@ export default function DesignAtGoAPage() { Design at the Government of Alberta - + Citizens expect digital products that are modern, easy to use, and consistent. To meet these needs, our digital products must follow our user experience guidelines and should be tested frequently to make continuous improvement and stay relevant. diff --git a/src/routes/foundations/ErrorMessages.tsx b/src/routes/foundations/ErrorMessages.tsx index 2e9c7da85..52b6cc38d 100644 --- a/src/routes/foundations/ErrorMessages.tsx +++ b/src/routes/foundations/ErrorMessages.tsx @@ -18,11 +18,12 @@ export default function ErrorMessagesPage() { const noop = () => { }; return ( - + Content guidelines + Error messages - - Error messages appear when the user’s proposed action fails. + + Error messages appear when the user's proposed action fails. diff --git a/src/routes/foundations/HelperText.tsx b/src/routes/foundations/HelperText.tsx index 62fd5c909..f3cbd0010 100644 --- a/src/routes/foundations/HelperText.tsx +++ b/src/routes/foundations/HelperText.tsx @@ -19,10 +19,11 @@ export default function HelperTextPage() { return ( - + Content guidelines + Helper text - + Additional context and guidance that is always visible below an input. The text instructs a user on what needs to be completed to move to the next question in the form or process. diff --git a/src/routes/foundations/Iconography.tsx b/src/routes/foundations/Iconography.tsx index 6241a75be..94a916e59 100644 --- a/src/routes/foundations/Iconography.tsx +++ b/src/routes/foundations/Iconography.tsx @@ -75,10 +75,11 @@ export default function IconographyPage() { return ( - + Style guide + Iconography - + Icons are simple and universal graphic symbols that communicate and enhance both the aesthetic and functional aspects of our products. While they can be used with descriptors, they can also be self-expressive and convey meaning diff --git a/src/routes/foundations/Layout.tsx b/src/routes/foundations/Layout.tsx index 86c9e8156..238b83da8 100644 --- a/src/routes/foundations/Layout.tsx +++ b/src/routes/foundations/Layout.tsx @@ -6,10 +6,11 @@ export default function FoundationsLayoutPage() { return ( - + Style guide + Layout - + We use the layout as a structural template to support consistency across our products. By defining visual grids, spacing, and sections, we create intuitive products for our users. diff --git a/src/routes/foundations/Logo.tsx b/src/routes/foundations/Logo.tsx index 1c187745f..75f46d4d5 100644 --- a/src/routes/foundations/Logo.tsx +++ b/src/routes/foundations/Logo.tsx @@ -4,10 +4,11 @@ import { ComponentContent } from "@components/component-content/ComponentContent export default function LogoPage() { return ( - + Style guide + Logo - + Our logo is an important part of our brand identity and serves as a symbol that distinguishes our digital products from others. To keep our brand consistent and recognizable, we encourage following the guidelines for proper diff --git a/src/routes/foundations/Photography.tsx b/src/routes/foundations/Photography.tsx index 3871d9a62..51a2bbf99 100644 --- a/src/routes/foundations/Photography.tsx +++ b/src/routes/foundations/Photography.tsx @@ -4,10 +4,11 @@ import { ComponentContent } from "@components/component-content/ComponentContent export default function ImagesPage() { return ( - + Style guide + Photography - + The Government of Alberta maintains a library of photos specifically taken for government use, ensuring they are relevant to our citizens. This collection meets our established criteria for quality and accessibility. diff --git a/src/routes/foundations/Typography.tsx b/src/routes/foundations/Typography.tsx index 75ea5f563..3c114c13f 100644 --- a/src/routes/foundations/Typography.tsx +++ b/src/routes/foundations/Typography.tsx @@ -6,10 +6,11 @@ export default function FoundationsTypographyPage() { return ( - + Style guide + Typography - + Our typography system is designed to create a consistent and accessible experience across all Government of Alberta digital products. When paired with an effective content strategy, it enhances accessibility and makes content diff --git a/src/routes/get-started/ComponentLifecycle.tsx b/src/routes/get-started/ComponentLifecycle.tsx index 318bc667f..cdd5f3e5d 100644 --- a/src/routes/get-started/ComponentLifecycle.tsx +++ b/src/routes/get-started/ComponentLifecycle.tsx @@ -7,7 +7,7 @@ export default function ComponentLifecyclePage() { Component lifecycle - + This lifecycle defines the stages every component in the Design System undergoes, from Alpha to Production to Legacy. Each stage describes the component's maturity, adoption level, and support status.

 diff --git a/src/routes/get-started/Contribute.tsx b/src/routes/get-started/Contribute.tsx index 6db946d4e..cc082cc3e 100644 --- a/src/routes/get-started/Contribute.tsx +++ b/src/routes/get-started/Contribute.tsx @@ -182,7 +182,7 @@ export default function ContributePage() {
  • Run the bash script: - +
  • The commands above will install all necessary packages and create a “playground” folder containing both React and Angular environments. Since nothing in this folder is committed to the repository, you can freely make any changes you want. These environments are designed for testing purposes.
  • diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx index 6481bb6fa..46c837928 100644 --- a/src/routes/get-started/GetStartedOverview.tsx +++ b/src/routes/get-started/GetStartedOverview.tsx @@ -13,13 +13,13 @@ export default function GetStartedOverviewPage() { Starting with the design system - + Start with the design system to build on the research and experience of other service teams and avoid repeating work that's already been done. - + Design system by role: diff --git a/src/routes/get-started/LtsPolicyPage.tsx b/src/routes/get-started/LtsPolicyPage.tsx index d17a77ad4..460922e72 100644 --- a/src/routes/get-started/LtsPolicyPage.tsx +++ b/src/routes/get-started/LtsPolicyPage.tsx @@ -6,7 +6,7 @@ export const LtsPolicyPage = () => { <> Long Term Support (LTS) - + The Long Term Support (LTS) version will continue to be supported until September 30, 2025. Learn more about what you can expect. diff --git a/src/routes/get-started/ReportBug.tsx b/src/routes/get-started/ReportBug.tsx index be995c888..b4eed0b99 100644 --- a/src/routes/get-started/ReportBug.tsx +++ b/src/routes/get-started/ReportBug.tsx @@ -233,7 +233,7 @@ export default function ReportBugPage() { Report a bug - + Let us know if you find a problem or inconsistency in the design system. Providing complete details in your bug report helps our team understand, prioritize, and fix the issue faster. diff --git a/src/routes/get-started/RequestFeature.tsx b/src/routes/get-started/RequestFeature.tsx index 12ea72335..b15a07f56 100644 --- a/src/routes/get-started/RequestFeature.tsx +++ b/src/routes/get-started/RequestFeature.tsx @@ -10,7 +10,7 @@ export default function RequestFeaturePage() { Request a new feature - + Anyone can propose a new component or pattern for the design system. diff --git a/src/routes/get-started/Roadmap.tsx b/src/routes/get-started/Roadmap.tsx index 4524f230c..1ff0426bb 100644 --- a/src/routes/get-started/Roadmap.tsx +++ b/src/routes/get-started/Roadmap.tsx @@ -6,7 +6,7 @@ export default function RoadmapPage() { Roadmap - + A high-level summary of the work the design system team plans to focus on in 2025. Some initiatives span multiple phases, meaning they will be continuously worked on across the year. diff --git a/src/routes/get-started/Support.tsx b/src/routes/get-started/Support.tsx index 127d7d197..8e804de24 100644 --- a/src/routes/get-started/Support.tsx +++ b/src/routes/get-started/Support.tsx @@ -32,7 +32,7 @@ export default function SupportPage() { Get support - + Get help from our team with using the design system, including components, guidelines, best practices, and accessibility. diff --git a/src/routes/get-started/UserExperienceGuidelines.tsx b/src/routes/get-started/UserExperienceGuidelines.tsx index 484c0736f..28f0ecf41 100644 --- a/src/routes/get-started/UserExperienceGuidelines.tsx +++ b/src/routes/get-started/UserExperienceGuidelines.tsx @@ -4,8 +4,8 @@ export default function UserExperienceGuidelinesPage() { return ( <> Designers - User experience guidelines - Digital products built for the Government of Alberta should comply with these + User experience guidelines + Digital products built for the Government of Alberta should comply with these guidelines to ensure a quality user experience for Albertans. diff --git a/src/routes/get-started/designers/UxDesigner.tsx b/src/routes/get-started/designers/UxDesigner.tsx index 09d11c774..2d7e77452 100644 --- a/src/routes/get-started/designers/UxDesigner.tsx +++ b/src/routes/get-started/designers/UxDesigner.tsx @@ -6,8 +6,8 @@ export default function UxDesignerPage() { return ( Designers - Overview - As a designer, you can consume the design system through Figma. Through Figma you + Overview + As a designer, you can consume the design system through Figma. Through Figma you can use tokens, components, and page templates. @@ -65,7 +65,7 @@ export default function UxDesignerPage() { - + For example, you can communicate to your developer:
    The colour is: --goa-color-info-default
    diff --git a/src/routes/get-started/developers/BugVerification.tsx b/src/routes/get-started/developers/BugVerification.tsx index cbb3ba26a..7e431c6d1 100644 --- a/src/routes/get-started/developers/BugVerification.tsx +++ b/src/routes/get-started/developers/BugVerification.tsx @@ -5,8 +5,8 @@ export default function BugVerificationPage() { return ( Developers - Verify a bug - + Verify a bug + How to resolve issues with design system components diff --git a/src/routes/get-started/developers/DevelopersOverview.tsx b/src/routes/get-started/developers/DevelopersOverview.tsx index 9ea7b2032..ed0102f31 100644 --- a/src/routes/get-started/developers/DevelopersOverview.tsx +++ b/src/routes/get-started/developers/DevelopersOverview.tsx @@ -7,8 +7,8 @@ export default function DevelopersOverviewPage() { return ( Developers - Overview - As a developer, you can consume the design system using tokens, components, + Overview + As a developer, you can consume the design system using tokens, components, templates, and the demo application. diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx index 71616c4f6..52107e30d 100644 --- a/src/routes/get-started/developers/DevelopersSetup.tsx +++ b/src/routes/get-started/developers/DevelopersSetup.tsx @@ -8,8 +8,8 @@ export default function DevelopersSetupPage() {
    Developers - Setup - Once you are setup, you can use the project template to quickly get + Setup + Once you are setup, you can use the project template to quickly get started. View project templates diff --git a/src/routes/get-started/developers/DevelopersTechnologies.tsx b/src/routes/get-started/developers/DevelopersTechnologies.tsx index b667b2df7..33f854e2f 100644 --- a/src/routes/get-started/developers/DevelopersTechnologies.tsx +++ b/src/routes/get-started/developers/DevelopersTechnologies.tsx @@ -5,8 +5,8 @@ export default function DevelopersTechnologiesPage() { return ( Developers - Technologies - An overview of the technologies that make up the design system. + Technologies + An overview of the technologies that make up the design system.
    diff --git a/src/routes/get-started/developers/DevelopersVSCode.tsx b/src/routes/get-started/developers/DevelopersVSCode.tsx index e9bc7b727..de4d9b84b 100644 --- a/src/routes/get-started/developers/DevelopersVSCode.tsx +++ b/src/routes/get-started/developers/DevelopersVSCode.tsx @@ -6,8 +6,8 @@ export default function DevelopersVSCodePage() { return ( Developers - VS Code - + VS Code + You can use VS Code's autocomplete suggestions for design system components and design tokens. diff --git a/src/routes/get-started/developers/SupportedBrowsers.tsx b/src/routes/get-started/developers/SupportedBrowsers.tsx index a1d66debd..ab25ea1a1 100644 --- a/src/routes/get-started/developers/SupportedBrowsers.tsx +++ b/src/routes/get-started/developers/SupportedBrowsers.tsx @@ -6,8 +6,8 @@ export default function SupportedBrowsersPage() { return ( Developers - Supported browsers - The design system components are tested on the following browsers and devices: + Supported browsers + The design system components are tested on the following browsers and devices: @@ -82,13 +82,13 @@ export default function SupportedBrowsersPage() {
    - + Representative mobile OS used in testing - + Android OS: 10+ - + iOS: 15+ diff --git a/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx b/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx index c4fc903c3..2c59375c3 100644 --- a/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx +++ b/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx @@ -13,8 +13,8 @@ export default function DevelopersUpgradePage() { Developers - Version update guide - Step-by-step guide to updating your code from DDD Design System v3 to v4 + Version update guide + Step-by-step guide to updating your code from DDD Design System v3 to v4 (Angular) and v5 to v6 (React) @@ -38,8 +38,8 @@ export default function DevelopersUpgradePage() { The component is stable and supported in the latest major release. However, we recommend using the public form pattern for a more modular, flexible, and accessible approach. - - + + Major differences between current and new version diff --git a/src/routes/get-started/qa-testing/QATestingOverview.tsx b/src/routes/get-started/qa-testing/QATestingOverview.tsx index 33d4d5b3f..d66474a73 100644 --- a/src/routes/get-started/qa-testing/QATestingOverview.tsx +++ b/src/routes/get-started/qa-testing/QATestingOverview.tsx @@ -8,7 +8,7 @@ export default function QATestingOverviewPage() { QA Testing - + Outline of the testing procedure for the DDD design system. The procedure ensures that all components function correctly and integrate seamlessly within DDD products. diff --git a/src/routes/home.tsx b/src/routes/home.tsx index 777be2c42..ad45ba89b 100644 --- a/src/routes/home.tsx +++ b/src/routes/home.tsx @@ -80,7 +80,7 @@ const HomePage = () => {
    - Start by using the design system in your service + Start by using the design system in your service Use the existing components and patterns in the design system to save time and build off of the current standard. Typically, these cover around 80% of your service's needs. @@ -103,8 +103,8 @@ const HomePage = () => { heading="What happens when I need a new or different component or pattern?" headingSize="medium" > - - If a component or pattern doesn’t exists in the design system or doesn’t meet the needs of your users, + + If a component or pattern doesn't exists in the design system or doesn't meet the needs of your users, follow the process below: @@ -135,10 +135,10 @@ const HomePage = () => { Additional resources - + Common capabilities: Shared digital services - + A directory of reusable backend services designed to help you and your team work more efficiently and align to government infrastructure standards. @@ -152,10 +152,10 @@ const HomePage = () => { - + User Experience best practices - + These resources establish best practices to shape and guide the work of DDD user experience designers.