+
+ {/*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);
+ }
+ `}
+ />
+
+
+ Back
+
+
+ {
+ }}>
+
+
+ No
+
+
+
+
+ Save and continue
+
+
+
+
+ );
+}
diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx
index d8b515eab..1743ff880 100644
--- a/src/examples/badge/BadgeExamples.tsx
+++ b/src/examples/badge/BadgeExamples.tsx
@@ -3,8 +3,8 @@ import {
GoabBlock,
} from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
-import { BadgeShowStatusInTableExample } from "@examples/badge/BadgeShowStatusInTableExample.tsx";
-import { BadgeShowStatusOnCardExample } from "@examples/badge/BadgeShowStatusOnCardExample.tsx";
+import { ShowStatusInATable } from "@examples/show-status-in-a-table.tsx";
+import { ShowStatusOnACard } from "@examples/show-status-on-a-card.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export default function BadgeExamples() {
@@ -15,7 +15,7 @@ export default function BadgeExamples() {
exampleTitle="Show status in a table"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6304-22364&t=X0IQW5flDDaj8Vyg-4">
-
+
-
+
);
}
diff --git a/src/routes/patterns/LayoutPage.tsx b/src/examples/basic-page-layout.tsx
similarity index 66%
rename from src/routes/patterns/LayoutPage.tsx
rename to src/examples/basic-page-layout.tsx
index edfa4022b..e6010b88e 100644
--- a/src/routes/patterns/LayoutPage.tsx
+++ b/src/examples/basic-page-layout.tsx
@@ -1,26 +1,17 @@
import {Sandbox} from "@components/sandbox";
-import Browser from "@components/browser/Browser";
-import { ComponentContent } from "@components/component-content/ComponentContent";
+import Browser from "@components/browser/Browser.tsx";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
import {
GoabAppFooter,
- GoabAppHeader, GoabBadge, GoabGrid,
+ GoabAppHeader, GoabGrid,
GoabMicrositeHeader,
GoabOneColumnLayout,
- GoabPageBlock, GoabSkeleton,
- GoabTab,
- GoabTabs
+ GoabPageBlock, GoabSkeleton
} from "@abgov/react-components";
-export default function LayoutPage() {
+export const BasicPageLayout = () => {
return (
-
Layout
-
- A structural template that supports consistency across applications by defining visual grids, spacing, and sections.
-
-
-
-
Basic page layout
@@ -50,16 +41,8 @@ export default function LayoutPage() {
-
-
-
- Design guidelines
-
-
- }>
-
);
}
+
+export default BasicPageLayout;
diff --git a/src/examples/button/ButtonConfirmDestructiveActionExample.tsx b/src/examples/button/ButtonConfirmDestructiveActionExample.tsx
deleted file mode 100644
index 8446c5204..000000000
--- a/src/examples/button/ButtonConfirmDestructiveActionExample.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ModalConfirmDestructiveActionExample } from "@examples/modal/ModalConfirmDestructiveActionExample.tsx";
-
-export const ButtonConfirmDestructiveActionExample = () => {
- return (
-
- );
-};
diff --git a/src/examples/button/ButtonExamples.tsx b/src/examples/button/ButtonExamples.tsx
index 93b1c880c..484468bc7 100644
--- a/src/examples/button/ButtonExamples.tsx
+++ b/src/examples/button/ButtonExamples.tsx
@@ -1,6 +1,6 @@
-import { ButtonAskUserAddressExample } from "@examples/button/ButtonAskUserAddressExample.tsx";
-import { ButtonConfirmDestructiveActionExample } from "@examples/button/ButtonConfirmDestructiveActionExample.tsx";
-import { ButtonDisabledWithRequiredFieldExample } from "@examples/button/ButtonDisabledWithRequiredFieldExample.tsx";
+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 { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const ButtonExamples = () => {
@@ -11,20 +11,20 @@ export const ButtonExamples = () => {
exampleTitle="Ask a user for an address"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6304-43250&t=X0IQW5flDDaj8Vyg-4">
-
+
{/*Button example 2*/}
-
+
{/*Button example */}
-
+
;
};
diff --git a/src/examples/callout/CalloutExamples.tsx b/src/examples/callout/CalloutExamples.tsx
index 70fc9b1cc..e68e49eb3 100644
--- a/src/examples/callout/CalloutExamples.tsx
+++ b/src/examples/callout/CalloutExamples.tsx
@@ -1,146 +1,16 @@
-import { Sandbox } from "@components/sandbox";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import { GoabButton, GoabButtonGroup, GoabCallout, GoabSpacer } from "@abgov/react-components";
-import { useContext } from "react";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { ConfirmThatAnApplicationWasSubmitted } from "@examples/confirm-that-an-application-was-submitted.tsx";
export const CalloutExamples = () => {
- const {version} = useContext(LanguageVersionContext);
- return (
- <>
-
-
-
- {/*Angular code*/}
- {version === "old" && You have completed the application
-
- Your application was successful
-
You will receive a copy of the confirmation to the email person@email.com
-
Confirmation number: 1234ABC
-
-
-
Go back to the dashboard, or direct your user somewhere else useful.
-
- Other information about what was just completed, other tertiary information, and/or contact information.
- Phone: 780 123 4567
- Email: information@gov.ab.ca
-
-
-
- Go to application
- Back to dashboard
-
- `}
- />}
-
- {version === "new" && You have completed the application
-
-
-
You will receive a copy of the confirmation to the email person@email.com
-
Confirmation number: 1234ABC
-
-
-
Go back to the dashboard, or direct your user somewhere else useful.
-
Other information about what was just completed, other tertiary information, and/or contact information.
-
- Phone: 780 123 4567
-
- Email: information@gov.ab.ca
-
-
-
- Go to application
- Back to dashboard
-
- `}
- />}
-
- {/*React code*/}
- {version === "old" && You have completed the application
-
-
-
You will receive a copy of the confirmation to the email person@email.com
-
Confirmation number: 1234ABC
-
-
-
Go back to the dashboard, or direct your user somewhere else useful.
-
- Other information about what was just completed, other tertiary information, and/or contact information.
- Phone: 780 123 4567
- Email: information@gov.ab.ca
-
-
-
- Go to application
- Back to dashboard
-
- `}
- />}
-
- {version === "new" && You have completed the application
-
-
-
You will receive a copy of the confirmation to the email person@email.com
-
Confirmation number: 1234ABC
-
-
-
Go back to the dashboard, or direct your user somewhere else useful.
-
- Other information about what was just completed, other tertiary information, and/or contact information.
-
- Phone: 780 123 4567
-
- Email: information@gov.ab.ca
-
-
-
- Go to application
- Back to dashboard
-
- `}
- />}
-
-
You have completed the application
-
-
You will receive a copy of the confirmation to the email person@email.com
-
Confirmation number: 1234ABC
-
-
Go back to the dashboard, or direct your user somewhere else useful.
-
- Other information about what was just completed, other tertiary information, and/or contact information.
- Phone: 780 123 4567
- Email: information@gov.ab.ca
-
-
-
- Go to application
- Back to dashboard
-
-
-
- )
-}
+ return <>
+ {/*Callout Example 1*/}
+
+
+
+
+ {/*Callout example 2*/}
+ ;
+};
diff --git a/src/examples/container/ContainerCardGridExample.tsx b/src/examples/card-grid.tsx
similarity index 96%
rename from src/examples/container/ContainerCardGridExample.tsx
rename to src/examples/card-grid.tsx
index ec7b8cd78..f767f44f5 100644
--- a/src/examples/container/ContainerCardGridExample.tsx
+++ b/src/examples/card-grid.tsx
@@ -1,9 +1,9 @@
-import "./container-card-grid-example.css";
+import "./container/container-card-grid-example.css";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { GoabContainer, GoabGrid } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
-export const ContainerCardGridExample = () => {
+export const CardGrid = () => {
return (
{
)
}
+
+export default CardGrid;
diff --git a/src/examples/container/ContainerCaseFilesExample.tsx b/src/examples/card-view-of-case-files.tsx
similarity index 96%
rename from src/examples/container/ContainerCaseFilesExample.tsx
rename to src/examples/card-view-of-case-files.tsx
index 977da0199..55bb7f6d3 100644
--- a/src/examples/container/ContainerCaseFilesExample.tsx
+++ b/src/examples/card-view-of-case-files.tsx
@@ -1,9 +1,9 @@
-import "./container-case-files-example.css";
+import "./container/container-case-files-example.css";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { GoabBadge, GoabBlock, GoabButton, GoabContainer } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
-export const ContainerCaseFilesExample = () => {
+export const CardViewOfCaseFiles = () => {
return (
{
)
}
+
+export default CardViewOfCaseFiles;
diff --git a/src/examples/checkbox/CheckboxExamples.tsx b/src/examples/checkbox/CheckboxExamples.tsx
index 95d01c59e..925016662 100644
--- a/src/examples/checkbox/CheckboxExamples.tsx
+++ b/src/examples/checkbox/CheckboxExamples.tsx
@@ -1,5 +1,6 @@
-import CheckboxDescriptionExample from "@examples/checkbox/CheckboxDescriptionExample.tsx";
-import CheckboxNoneOrManyExample from "@examples/checkbox/CheckboxNoneOrManyExample.tsx";
+import IncludeDescriptionsForItemsInACheckboxList
+ from "@examples/include-descriptions-for-items-in-a-checkbox-list.tsx";
+import SelectOneOrMoreFromAListOfOptions from "@examples/select-one-or-more-from-a-list-of-options.tsx";
import { CheckboxRevealSlotExample } from "@examples/checkbox/CheckboxRevealSlotExample.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
@@ -10,19 +11,20 @@ export const CheckboxExamples = () => {
exampleTitle="Include descriptions for items in a checkbox list"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131778&t=X0IQW5flDDaj8Vyg-4">
-
+
{/*Checkbox example 2*/}
-
+
+ {/*Checkbox example 3 - NEW from alpha*/}
-
+
;
-}
+}
\ No newline at end of file
diff --git a/src/examples/notification/NotificationServiceOutageExample.tsx b/src/examples/communicate-a-future-service-outage.tsx
similarity index 96%
rename from src/examples/notification/NotificationServiceOutageExample.tsx
rename to src/examples/communicate-a-future-service-outage.tsx
index 495947814..4fab70607 100644
--- a/src/examples/notification/NotificationServiceOutageExample.tsx
+++ b/src/examples/communicate-a-future-service-outage.tsx
@@ -4,7 +4,7 @@ import { GoabNotification } from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const NotificationServiceOutageExample = () => {
+export const CommunicateAFutureServiceOutage = () => {
const {version} = useContext(LanguageVersionContext);
return (
<>
@@ -64,3 +64,5 @@ export const NotificationServiceOutageExample = () => {
)
}
+
+export default CommunicateAFutureServiceOutage;
diff --git a/src/examples/modal/ModalConfirmRecordChangeExample.tsx b/src/examples/confirm-a-change.tsx
similarity index 99%
rename from src/examples/modal/ModalConfirmRecordChangeExample.tsx
rename to src/examples/confirm-a-change.tsx
index edac7aeb1..1310df5cc 100644
--- a/src/examples/modal/ModalConfirmRecordChangeExample.tsx
+++ b/src/examples/confirm-a-change.tsx
@@ -11,7 +11,7 @@ import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common";
-export const ModalConfirmRecordChangeExample = () => {
+export const ConfirmAChange = () => {
const {version} = useContext(LanguageVersionContext);
const [inputModalOpen, setInputModalOpen] = useState();
const [effectiveDate, setEffectiveDate] = useState(new Date());
@@ -298,3 +298,5 @@ export const ModalConfirmRecordChangeExample = () => {
)
}
+
+export default ConfirmAChange;
diff --git a/src/examples/modal/ModalConfirmDestructiveActionExample.tsx b/src/examples/confirm-a-destructive-action.tsx
similarity index 98%
rename from src/examples/modal/ModalConfirmDestructiveActionExample.tsx
rename to src/examples/confirm-a-destructive-action.tsx
index c275e25e6..1d49f02ef 100644
--- a/src/examples/modal/ModalConfirmDestructiveActionExample.tsx
+++ b/src/examples/confirm-a-destructive-action.tsx
@@ -4,7 +4,7 @@ import { Sandbox } from "@components/sandbox";
import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const ModalConfirmDestructiveActionExample = () => {
+export const ConfirmADestructiveAction = () => {
const {version} = useContext(LanguageVersionContext);
const [destructiveModalOpen, setDestructiveModalOpen] = useState();
return (
@@ -159,3 +159,5 @@ export const ModalConfirmDestructiveActionExample = () => {
)
}
+
+export default ConfirmADestructiveAction;
diff --git a/src/examples/modal/ModalRouteChangeExample.tsx b/src/examples/confirm-before-navigating-away.tsx
similarity index 98%
rename from src/examples/modal/ModalRouteChangeExample.tsx
rename to src/examples/confirm-before-navigating-away.tsx
index 9296863be..726f1838c 100644
--- a/src/examples/modal/ModalRouteChangeExample.tsx
+++ b/src/examples/confirm-before-navigating-away.tsx
@@ -5,7 +5,7 @@ import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { useNavigate } from "react-router-dom";
-export const ModalRouteChangeExample = () => {
+export const ConfirmBeforeNavigatingAway = () => {
const {version} = useContext(LanguageVersionContext);
const [onRouteChangeModalOpen, setOnRouteChangeModalOpen] = useState();
const navigate = useNavigate();
@@ -170,3 +170,5 @@ export const ModalRouteChangeExample = () => {
)
}
+
+export default ConfirmBeforeNavigatingAway;
diff --git a/src/examples/confirm-that-an-application-was-submitted.tsx b/src/examples/confirm-that-an-application-was-submitted.tsx
new file mode 100644
index 000000000..3d1c0eb74
--- /dev/null
+++ b/src/examples/confirm-that-an-application-was-submitted.tsx
@@ -0,0 +1,145 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabButton, GoabButtonGroup, GoabCallout, GoabSpacer } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const ConfirmThatAnApplicationWasSubmitted = () => {
+ const { version } = useContext(LanguageVersionContext);
+ return (
+ <>
+
+
+ {/*Angular code*/}
+ {version === "old" && You have completed the application
+
+
+ Your application was successful
+
You will receive a copy of the confirmation to the email person@email.com
+
Confirmation number: 1234ABC
+
+
+
Go back to the dashboard, or direct your user somewhere else useful.
+
+ Other information about what was just completed, other tertiary information, and/or contact information.
+ Phone: 780 123 4567
+ Email: information@gov.ab.ca
+
+
+
+ Go to application
+ Back to dashboard
+
+ `}
+ />}
+
+ {version === "new" && You have completed the application
+
+
+
You will receive a copy of the confirmation to the email person@email.com
+
Confirmation number: 1234ABC
+
+
+
Go back to the dashboard, or direct your user somewhere else useful.
+
Other information about what was just completed, other tertiary information, and/or contact information.
+
+ Phone: 780 123 4567
+
+ Email: information@gov.ab.ca
+
+
+
+ Go to application
+ Back to dashboard
+
+ `}
+ />}
+
+ {/*React code*/}
+ {version === "old" && You have completed the application
+
+
+
You will receive a copy of the confirmation to the email person@email.com
+
Confirmation number: 1234ABC
+
+
+
Go back to the dashboard, or direct your user somewhere else useful.
+
+ Other information about what was just completed, other tertiary information, and/or contact information.
+ Phone: 780 123 4567
+ Email: information@gov.ab.ca
+
+
+
+ Go to application
+ Back to dashboard
+
+ `}
+ />}
+
+ {version === "new" && You have completed the application
+
+
+
You will receive a copy of the confirmation to the email person@email.com
+
Confirmation number: 1234ABC
+
+
+
Go back to the dashboard, or direct your user somewhere else useful.
+
+ Other information about what was just completed, other tertiary information, and/or contact information.
+
+ Phone: 780 123 4567
+
+ Email: information@gov.ab.ca
+
+
+
+ Go to application
+ Back to dashboard
+
+ `}
+ />}
+
+
You have completed the application
+
+
You will receive a copy of the confirmation to the email person@email.com
+
Confirmation number: 1234ABC
+
+
Go back to the dashboard, or direct your user somewhere else useful.
+
+ Other information about what was just completed, other tertiary information, and/or contact information.
+ Phone: 780 123 4567
+ Email: information@gov.ab.ca
+
+
+
+ Go to application
+ Back to dashboard
+
+
+
+ );
+
+};
+
+export default ConfirmThatAnApplicationWasSubmitted;
diff --git a/src/examples/container/ContainerExamples.tsx b/src/examples/container/ContainerExamples.tsx
index 5e3bb9618..627c1ed32 100644
--- a/src/examples/container/ContainerExamples.tsx
+++ b/src/examples/container/ContainerExamples.tsx
@@ -1,7 +1,7 @@
-import { ContainerUserInformationExample } from "@examples/container/ContainerUserInformationExample.tsx";
-import { ContainerCaseFilesExample } from "@examples/container/ContainerCaseFilesExample.tsx";
-import { ContainerCardGridExample } from "@examples/container/ContainerCardGridExample.tsx";
-import { ContainerReviewActionExample } from "@examples/container/ContainerReviewActionExample.tsx";
+import { DisplayUserInformation } from "@examples/display-user-information.tsx";
+import { CardViewOfCaseFiles } from "@examples/card-view-of-case-files.tsx";
+import { CardGrid } from "@examples/card-grid.tsx";
+import { ReviewAndAction } from "@examples/review-and-action.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export default function ContainerExamples() {
@@ -13,26 +13,26 @@ export default function ContainerExamples() {
exampleTitle="User information"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-154067&t=X0IQW5flDDaj8Vyg-4">
-
+
-
+
-
+
-
+
);
}
diff --git a/src/examples/tooltip/TooltipClickCopyToClipboardExample.tsx b/src/examples/copy-to-clipboard.tsx
similarity index 97%
rename from src/examples/tooltip/TooltipClickCopyToClipboardExample.tsx
rename to src/examples/copy-to-clipboard.tsx
index 6357f3cf9..56b49da82 100644
--- a/src/examples/tooltip/TooltipClickCopyToClipboardExample.tsx
+++ b/src/examples/copy-to-clipboard.tsx
@@ -1,11 +1,11 @@
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { GoabBlock, GoabIconButton, GoabTooltip } from "@abgov/react-components";
-import { getCssVarValue } from "src/utils/styling.ts";
+import { getCssVarValue } from "../utils/styling.ts";
import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const TooltipClickCopyToClipboardExample = () => {
+export const CopyToClipboard = () => {
const {version} = useContext(LanguageVersionContext);
const [isCopied, setIsCopied] = useState(false);
@@ -150,3 +150,5 @@ export const TooltipClickCopyToClipboardExample = () => {
)
}
+
+export default CopyToClipboard;
diff --git a/src/examples/date-picker/DatePickerExamples.tsx b/src/examples/date-picker/DatePickerExamples.tsx
index 90dee0aa4..12e61da93 100644
--- a/src/examples/date-picker/DatePickerExamples.tsx
+++ b/src/examples/date-picker/DatePickerExamples.tsx
@@ -1,4 +1,4 @@
-import { DatePickerResetExample } from "@examples/date-picker/DatePickerResetExample.tsx";
+import { ResetDatePickerField } from "@examples/reset-date-picker-field.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const DatePickerExamples = () => {
@@ -8,7 +8,7 @@ export const DatePickerExamples = () => {
exampleTitle="Reset example"
figmaExample="">
-
+
)
}
diff --git a/src/examples/details/DetailsExamples.tsx b/src/examples/details/DetailsExamples.tsx
index 2f10f98c6..ed1a125dd 100644
--- a/src/examples/details/DetailsExamples.tsx
+++ b/src/examples/details/DetailsExamples.tsx
@@ -1,13 +1,12 @@
import {
- DetailsMoreInformationBasicQuestionExample
-} from "@examples/details/DetailsMoreInformationBasicQuestionExample.tsx";
+ ShowAListToHelpAnswerAQuestion
+} from "@examples/show-a-list-to-help-answer-a-question.tsx";
import {
- DetailsAdditionalInformationHelpUserExample
-} from "@examples/details/DetailsAdditionalInformationHelpUserExample.tsx";
-import {
- DetailsShowDirectDepositInformationExample
-} from "@examples/details/DetailsShowDirectDepositInformationExample.tsx";
+ AskAUserForDirectDepositInformation
+} from "@examples/ask-a-user-for-direct-deposit-information.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import RevealMoreInformationToHelpAnswerAQuestion
+ from "@examples/reveal-more-information-to-help-answer-a-question.tsx";
export const DetailsExamples = () => {
return (
@@ -16,19 +15,19 @@ export const DetailsExamples = () => {
exampleTitle="Show more information to help answer a question"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-197360&t=X0IQW5flDDaj8Vyg-4">
-
+
-
+
-
+
)
}
diff --git a/src/examples/details/DetailsMoreInformationBasicQuestionExample.tsx b/src/examples/details/DetailsMoreInformationBasicQuestionExample.tsx
deleted file mode 100644
index e24e9ec90..000000000
--- a/src/examples/details/DetailsMoreInformationBasicQuestionExample.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Sandbox } from "@components/sandbox";
-import { GoabDetails, GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
-import { useContext } from "react";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-
-export const DetailsMoreInformationBasicQuestionExample = () => {
- const {version} = useContext(LanguageVersionContext);
- return (
-
-
- {/*Angular code*/}
- {version === "new" && }
-
- {/*React code*/}
- {version === "new" && {
- console.log("value is ", event.value);
- }
- `}
- />}
-
-
- { }}>
-
-
-
-
-
-
-
- This question helps us better understand your situation and ensure that you receive
- the right information and support.
-
-
-
- )
-}
diff --git a/src/examples/button/ButtonDisabledWithRequiredFieldExample.tsx b/src/examples/disabled-button-with-a-required-field.tsx
similarity index 96%
rename from src/examples/button/ButtonDisabledWithRequiredFieldExample.tsx
rename to src/examples/disabled-button-with-a-required-field.tsx
index f0b2f0411..1500df3f4 100644
--- a/src/examples/button/ButtonDisabledWithRequiredFieldExample.tsx
+++ b/src/examples/disabled-button-with-a-required-field.tsx
@@ -5,7 +5,7 @@ import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { GoabButtonGroup, GoabButton, GoabFormItem, GoabInput } from "@abgov/react-components";
-export const ButtonDisabledWithRequiredFieldExample = () => {
+export const DisabledButtonWithARequiredField = () => {
const { version } = useContext(LanguageVersionContext);
const noop = () => {}
return (
@@ -103,3 +103,5 @@ export const ButtonDisabledWithRequiredFieldExample = () => {
);
};
+
+export default DisabledButtonWithARequiredField;
diff --git a/src/examples/container/ContainerUserInformationExample.tsx b/src/examples/display-user-information.tsx
similarity index 98%
rename from src/examples/container/ContainerUserInformationExample.tsx
rename to src/examples/display-user-information.tsx
index 85d395d44..908aa4967 100644
--- a/src/examples/container/ContainerUserInformationExample.tsx
+++ b/src/examples/display-user-information.tsx
@@ -1,11 +1,11 @@
-import "./container-user-information-example.css";
+import "./container/container-user-information-example.css";
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { GoabBlock, GoabButton, GoabContainer, GoabTable } from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const ContainerUserInformationExample = () => {
+export const DisplayUserInformation = () => {
const {version} = useContext(LanguageVersionContext);
return (
@@ -365,3 +365,5 @@ export const ContainerUserInformationExample = () => {
)
}
+
+export default DisplayUserInformation;
diff --git a/src/examples/drawer/DrawerExamples.tsx b/src/examples/drawer/DrawerExamples.tsx
index 8328f143f..14e7babb4 100644
--- a/src/examples/drawer/DrawerExamples.tsx
+++ b/src/examples/drawer/DrawerExamples.tsx
@@ -1,19 +1,19 @@
-import { DrawerFiltersExample } from "@examples/drawer/DrawerFiltersExample.tsx";
-import { DrawerAddRecordExample } from "@examples/drawer/DrawerAddRecordExample.tsx";
+import { AddAndEditLotsOfFilters } from "@examples/add-and-edit-lots-of-filters.tsx";
+import { AddARecordUsingADrawer } from "@examples/add-a-record-using-a-drawer.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const DrawerExamples = () => {
return (
<>
+ exampleTitle="Add and edit lots of filters">
-
+
-
+
);
};
diff --git a/src/examples/dropdown/DropdownExamples.tsx b/src/examples/dropdown/DropdownExamples.tsx
index 3a1917343..b172aa191 100644
--- a/src/examples/dropdown/DropdownExamples.tsx
+++ b/src/examples/dropdown/DropdownExamples.tsx
@@ -1,5 +1,7 @@
-import { DropdownAddItemExample } from "@examples/dropdown/DropdownAddItemExample.tsx";
-import { DropdownChangeItemExample } from "@examples/dropdown/DropdownChangeItemExample.tsx";
+import { DynamicallyAddAnItemToADropdownList } from "@examples/dynamically-add-an-item-to-a-dropdown-list.tsx";
+import {
+ DynamicallyChangeItemsInADropdownList
+} from "@examples/dynamically-change-items-in-a-dropdown-list.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const DropdownExamples = () => {
@@ -9,13 +11,13 @@ export const DropdownExamples = () => {
exampleTitle="Dynamically add an item to a dropdown list"
figmaExample="">
-
+
-
+
);
}
diff --git a/src/examples/dropdown/DropdownAddItemExample.tsx b/src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx
similarity index 99%
rename from src/examples/dropdown/DropdownAddItemExample.tsx
rename to src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx
index 541ba23b3..a07ef32d7 100644
--- a/src/examples/dropdown/DropdownAddItemExample.tsx
+++ b/src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx
@@ -26,7 +26,7 @@ type Task = {
mount: GoabDropdownItemMountType;
};
-export const DropdownAddItemExample = () => {
+export const DynamicallyAddAnItemToADropdownList = () => {
const { version } = useContext(LanguageVersionContext);
const [taskError, setTaskError] = useState(false);
const [newTask, setNewTask] = useState("");
@@ -620,3 +620,5 @@ export const DropdownAddItemExample = () => {
);
};
+
+export default DynamicallyAddAnItemToADropdownList;
\ No newline at end of file
diff --git a/src/examples/dropdown/DropdownChangeItemExample.tsx b/src/examples/dynamically-change-items-in-a-dropdown-list.tsx
similarity index 98%
rename from src/examples/dropdown/DropdownChangeItemExample.tsx
rename to src/examples/dynamically-change-items-in-a-dropdown-list.tsx
index 3f361dd5f..54e083901 100644
--- a/src/examples/dropdown/DropdownChangeItemExample.tsx
+++ b/src/examples/dynamically-change-items-in-a-dropdown-list.tsx
@@ -4,7 +4,7 @@ import { useContext, useState } from "react";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const DropdownChangeItemExample = () => {
+export const DynamicallyChangeItemsInADropdownList = () => {
const {version} = useContext(LanguageVersionContext);
const [children, setChildren] = useState([]);
const parents = ["All", "Big", "Small"];
@@ -250,3 +250,5 @@ export const DropdownChangeItemExample = () => {
);
}
+
+export default DynamicallyChangeItemsInADropdownList;
diff --git a/src/examples/accordion/AccordionExpandOrCollapseExample.tsx b/src/examples/expand-or-collapse-part-of-a-form.tsx
similarity index 98%
rename from src/examples/accordion/AccordionExpandOrCollapseExample.tsx
rename to src/examples/expand-or-collapse-part-of-a-form.tsx
index d0cfc96c7..d910a96e9 100644
--- a/src/examples/accordion/AccordionExpandOrCollapseExample.tsx
+++ b/src/examples/expand-or-collapse-part-of-a-form.tsx
@@ -4,7 +4,7 @@ import { GoabAccordion, GoabBadge } from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const AccordionExpandOrCollapseExample = () => {
+const ExpandOrCollapsePartOfAForm = () => {
const {version} = useContext(LanguageVersionContext);
return (
@@ -204,3 +204,6 @@ export const AccordionExpandOrCollapseExample = () => {
)
}
+
+
+export default ExpandOrCollapsePartOfAForm;
diff --git a/src/examples/filter-chip/FilterChipExamples.tsx b/src/examples/filter-chip/FilterChipExamples.tsx
index a144e2046..a13e1a3fc 100644
--- a/src/examples/filter-chip/FilterChipExamples.tsx
+++ b/src/examples/filter-chip/FilterChipExamples.tsx
@@ -1,7 +1,7 @@
-import { TableWithGlobalFiltersExample } from "@examples/filter-chip/TableWithGlobalFiltersExample.tsx";
-import { FilterChipDeleteEventExample } from "@examples/filter-chip/FilterChipDeleteEventExample.tsx";
-import { FilterChipInteractiveExample } from "@examples/filter-chip/FilterChipInteractiveExample.tsx";
-import { FilterChipTypedChipExample } from "@examples/filter-chip/FilterChipTypedChipExample.tsx";
+import { FilterDataInATable } from "@examples/filter-data-in-a-table.tsx";
+import { RemoveAFilter } from "@examples/remove-a-filter.tsx";
+import { AddAFilterChip } from "@examples/add-a-filter-chip.tsx";
+import { TypeToCreateANewFilter } from "@examples/type-to-create-a-new-filter.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const FilterChipExamples = () => {
@@ -11,13 +11,13 @@ export const FilterChipExamples = () => {
exampleTitle="Remove a filter"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6309-59262&t=X0IQW5flDDaj8Vyg-4">
-
+
-
+ {
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6308-51849&t=X0IQW5flDDaj8Vyg-4">
-
+
-
+
)
}
diff --git a/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx b/src/examples/filter-data-in-a-table.tsx
similarity index 99%
rename from src/examples/filter-chip/TableWithGlobalFiltersExample.tsx
rename to src/examples/filter-data-in-a-table.tsx
index 918f38c31..e683be1c9 100644
--- a/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx
+++ b/src/examples/filter-data-in-a-table.tsx
@@ -18,7 +18,7 @@ import type {
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-export const TableWithGlobalFiltersExample = () => {
+export const FilterDataInATable = () => {
const { version } = useContext(LanguageVersionContext);
const [typedChips, setTypedChips] = useState([]);
@@ -912,3 +912,5 @@ export class TableComponent {
//
);
};
+
+export default FilterDataInATable;
\ No newline at end of file
diff --git a/src/examples/form-item/FormItemExamples.tsx b/src/examples/form-item/FormItemExamples.tsx
index a409a01d6..d4b9859a3 100644
--- a/src/examples/form-item/FormItemExamples.tsx
+++ b/src/examples/form-item/FormItemExamples.tsx
@@ -1,21 +1,21 @@
-import { FormItemSlottedHelperTextExample } from "@examples/form-item/FormItemSlottedHelperTextExample.tsx";
-import { FormItemSlottedErrorTextExample } from "@examples/form-item/FormItemSlottedErrorTextExample.tsx";
+import { SlottedHelperTextInAFormItem } from "@examples/slotted-helper-text-in-a-form-item.tsx";
+import { SlottedErrorTextInAFormItem } from "@examples/slotted-error-text-in-a-form-item.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const FormItemExamples = () => {
return (
<>
-
+
-
+
)
}
diff --git a/src/examples/form-stepper/FormStepperControlledNavigationExample.tsx b/src/examples/form-stepper-with-controlled-navigation.tsx
similarity index 98%
rename from src/examples/form-stepper/FormStepperControlledNavigationExample.tsx
rename to src/examples/form-stepper-with-controlled-navigation.tsx
index a700519e6..6c2fa8cde 100644
--- a/src/examples/form-stepper/FormStepperControlledNavigationExample.tsx
+++ b/src/examples/form-stepper-with-controlled-navigation.tsx
@@ -11,7 +11,7 @@ import { Sandbox } from "@components/sandbox";
import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const FormStepperControlledNavigationExample = () => {
+export const FormStepperWithControlledNavigation = () => {
const {version} = useContext(LanguageVersionContext);
const [controlledStep, setControlledStep] = useState(1);
@@ -219,3 +219,5 @@ To use the controlled type you must set a step value ≥ 1.`}>
)
}
+
+export default FormStepperWithControlledNavigation;
diff --git a/src/examples/form-stepper/FormStepperExamples.tsx b/src/examples/form-stepper/FormStepperExamples.tsx
index 1cc2e0420..0444a56c0 100644
--- a/src/examples/form-stepper/FormStepperExamples.tsx
+++ b/src/examples/form-stepper/FormStepperExamples.tsx
@@ -1,7 +1,7 @@
import {
- FormStepperControlledNavigationExample
-} from "@examples/form-stepper/FormStepperControlledNavigationExample.tsx";
-import { FormStepperStepStatusExample } from "@examples/form-stepper/FormStepperStepStatusExample.tsx";
+ FormStepperWithControlledNavigation
+} from "@examples/form-stepper-with-controlled-navigation.tsx";
+import { SetTheStatusOfStepOnAFormStepper } from "@examples/set-the-status-of-step-on-a-form-stepper.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const FormStepperExamples = () => {
@@ -11,13 +11,13 @@ export const FormStepperExamples = () => {
exampleTitle="Controlled Navigation"
figmaExample="">
-
+
-
+
)
}
diff --git a/src/examples/give-background-information-before-asking-a-question.tsx b/src/examples/give-background-information-before-asking-a-question.tsx
new file mode 100644
index 000000000..2cb68b8e5
--- /dev/null
+++ b/src/examples/give-background-information-before-asking-a-question.tsx
@@ -0,0 +1,79 @@
+import { Sandbox } from "@components/sandbox";
+import "./question-page/question-page-examples.css";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import {
+ GoabButton,
+ GoabFormItem,
+ GoabRadioGroup,
+ GoabRadioItem
+} from "@abgov/react-components";
+
+export default function GiveBackgroundInformationBeforeAskingAQuestion() {
+ return (
+
+ School can encompass foundational programs that help individuals gain basic skills for
+ further learning and living, such as literacy and numeracy courses. It also includes
+ skills and employment training programs, designed to equip you with specific skills for
+ the job market.
+
+
+ Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
+ continuing education courses for professional or personal development, are also
+ categorized under 'school'.
+
+
Contact your provider if you’re concerned about your school status.
+
+ {
+ }}>
+
+
+
+
+
+ Save and continue
+
+
+
+
+
- ))}
-
-
-
-
-
- Show
-
- {[10, 20, 30].map(value => (
-
- ))}
-
- per page
-
-
-
- changePage(event.page)}
- />
-
-
+
);
};
diff --git a/src/examples/public-form.tsx b/src/examples/public-form.tsx
new file mode 100644
index 000000000..e921c58ad
--- /dev/null
+++ b/src/examples/public-form.tsx
@@ -0,0 +1,236 @@
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
+import { GoabDetails, GoabGrid, GoabText } from "@abgov/react-components";
+import css from "@routes/examples/patterns.module.css";
+import { Link } from "react-router-dom";
+
+export function PublicForm() {
+ return (
+
+
+
+ Primary users: citizens, public, external
+
+ You are designing a public service for citizens. It should be designed to be as simple and
+ intuitive as possible, while ensuring citizens can make complete and informed decisions
+ for themselves using the service.
+
+ There is an emphasis on an accessible experience with a low cognitive load for users who
+ use the service infrequently.
+
+
+
Pages
+
+
+
+
+
+
+
+
+ 1. Start page
+
+
+ This is the starting point for a citizen to begin your form from within your service or
+ from Alberta.ca.
+
+
+
+
+
+ 2. Task list page (optional)
+
+
+ Outline the entire process for the user and help them through the process by breaking down
+ an experience into individual tasks.
+
+
+
+
+
+ 3. Question pages
+
+ Ask a user a question or a small set of related questions.
+
+
+
+
+ 4. Review page
+
+ Let users check answers before submitting information to a
+ service.
+
+
+
+
+ 5. Results page
+
+
+ Let users know that they’ve completed a form, application, or task and tell them what to
+ do next.
+
+
+
+
+
+
+
+ Form structure
+
+
+ Form structure
+
+
+
+ Use the public form structure focused on content, and asking the right questions to your user
+ to keep the interaction as simple as possible.
+
+
+
+
Start with one idea per page
+
+
+ Split the form across multiple pages with each page containing just one idea, for example:
+
+
+
+ one decision they have to make
+
+
+ one question they have to answer
+
+
+ one piece of information you're telling a user
+
+
+
+
+
+ Starting with one thing per page helps users to:
+
+
+ understand what you're asking them to do
+
+
+ focus on specific questions and its answer
+
+
+ find their way through an unfamiliar process
+
+
+ use the service on a mobile device
+
+
+ recover easily from form errors
+
+
+
+
+
+ It also helps the service:
+
+
+ handle branching questions and loops
+
+
+ design for mobile use
+
+
+ save a user’s answers automatically as they go
+
+
+ capture analytics about each question
+
+
+
+
+
Combine questions when helpful
+
+ Asking a question doesn’t necessarily mean you should use one form field. For example,
+ asking a user for their address is best captured all on the same page with multiple fields.
+
+
+
Accessibility
+
+
+ Structuring your form with one idea per page simplifies the experience, and makes your
+ form more accessible.
+
+
+
+
+ Reduced cognitive load: Presenting only one idea at a time reduces
+ cognitive load on the user. This is particularly beneficial for users with cognitive
+ impairments, who might find it difficult to process and respond to multiple questions at
+ once.
+
+
+
+
+ Improved navigation for a screen reader: This simplified approach
+ efficiently guides the user through the form based on each answer and makes it easier to
+ navigate with screen readers or other assistive technology.
+
+
+
+
+ Better error handling: With smaller sets of questions validated at a
+ time errors can be identified and addressed in context. This makes it less confusing and
+ less overwhelming for users, particularly those with cognitive impairments and those
+ using assistive technologies.
+
+
+
+
+ Progressive disclosure: One idea per page allows the user to focus on
+ the current task and move through more information slowly. This can be especially
+ beneficial to users who are easily distracted or overwhelmed by too much information.
+
+
+
+
+
+
Adding complexity
+
+ Start by making sure that the content and questions you are asking the user are as simple as possible.
+
+
+
+ As the complexity of your form grows, consider:
+
+
+ adding simple progress indicators to communicate
+ progress
+
+
+ breaking the form into sections on a task list page
+
+
+
+
+
Form stepper
+
+ Avoid using traditional horizontal form steppers for every form. Research has shown that
+ horizontal form steppers shown on every page can distract and confuse some users, take up
+ too much space, and make it hard to handle branching and conditional sections of a form.
+
+
+ As the complexity of your form grows, consider:
+
+
+ adding simple text progress indicators to communicate
+ progress
+
+
+ follow the one idea per page approach, and break the form into
+ sections as needed using a task list page
+
+
+
+
+ );
+}
+
+export default PublicForm;
diff --git a/src/routes/patterns/QuestionPage.tsx b/src/examples/question-page.tsx
similarity index 60%
rename from src/routes/patterns/QuestionPage.tsx
rename to src/examples/question-page.tsx
index 7c51ce64f..b1b35b37d 100644
--- a/src/routes/patterns/QuestionPage.tsx
+++ b/src/examples/question-page.tsx
@@ -1,24 +1,21 @@
import {
GoabTab,
- GoabTabs
+ GoabTabs,
+ GoabText
} from "@abgov/react-components";
-import { ComponentContent } from "@components/component-content/ComponentContent";
-import QuestionPageExamples from "@examples/question-page/QuestionPageExamples";
-import css from "./patterns.module.css";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
+import css from "@routes/examples/patterns.module.css";
+import QuestionPageExamples from "@examples/question-page/QuestionPageExamples.tsx";
-export default function QuestionPage() {
+
+export function QuestionPage() {
return (
<>
-
Question pages
-
- This is the starting point for a citizen to begin your form from within your service or from
- Alberta.ca.
-
+
Start by splitting the form across multiple pages with each page containing just one
idea, for example:
-
+
-
one piece of information you’re telling a user
-
one decision they have to make
-
one question they have to answer
+
+ one piece of information you’re telling a user
+
+
+ one decision they have to make
+
+
+ one question they have to answer
+
Helps users to:
-
understand what you’re asking them to do
-
focus on the specific question and its answer
-
find their way through an unfamiliar process
-
use the service on a mobile device
-
recover easily from errors
-
navigate with assistive technologies
+
+ understand what you’re asking them to do
+
+
+ focus on the specific question and its answer
+
+
+ find their way through an unfamiliar process
+
+
+ use the service on a mobile device
+
+
+ recover easily from errors
+
+
+ navigate with assistive technologies
+
Helps the service to:
-
handle branching questions and loops
-
save a user’s answers automatically as they go
-
capture analytics about each question
-
manage potential complexity on a page
+
+ handle branching questions and loops
+
+
+ save a user’s answers automatically as they go
+
+
+ capture analytics about each question
+
+
+ manage potential complexity on a page
+
What are the main benefits of starting with one idea per page?
-
+ Focus: Asking one question at a time helps users focus on the task at
hand. This is especially beneficial for complex forms or surveys, where multiple
fields can easily overwhelm or confuse the user. The user's attention is undivided,
leading to higher quality responses and fewer errors.
-
-
+
+ Efficiency: Due to the improved focus of the task at hand, completion
time for forms can be lowered when measured against traditional long form patterns.
-
-
+
+ Progression: This approach gives users a sense of progression and
accomplishment as they navigate through the form, which can motivate them to complete
the form. It allows for a linear progression model, which can be less intimidating and
less overwhelming than seeing a full page of empty fields at once.
-
-
+
+ Reduce Cognitive Load: By reducing the amount of information
presented at once, this design pattern can help minimize cognitive load. The cognitive
load theory suggests that our working memory capacity is limited, and if too much
information is presented at once, it can lead to confusion and mistakes.
-
-
+
+ Adaptive: allows for adaptive questioning. The answer to one
question can determine the next question asked. This isn't always possible when all
questions are presented at once. This can help make the form shorter and more relevant
for the user, increasing completion rates and user satisfaction.
-
-
+
+ Data Quality: With all the user's attention on one question, they are
more likely to provide accurate and thoughtful answers. This can help to improve the
quality of data gathered.
-
-
+
+ Mobile Friendly: As mobile usage continues to grow, one question at a
time approach makes it easier for users to fill out the form on smaller screens. Long
forms can be particularly daunting on mobile devices, so breaking it up into smaller,
manageable pieces can improve user experience.
-
-
+
+ Error Handling:
If a user makes an error on a form, it is easier and faster to provide feedback on
that specific question, leading to an overall smoother and less frustrating user
experience.
-
+
Using progress indicators
-
+
Start by testing your form without a progress indicator to see if it’s simple enough
that users do not need one.
-
-
+
+
Try improving the order, type or number of questions before adding a progress
indicator. If people still have difficulty, try adding a simple step or question
indicator.
-
-
+
+
Only include the total number of questions if you can do so reliably. As the user
moves through the form, make sure the indicator updates to tell them which question
they are on and the total number remaining.
-
+
Why should I avoid progress indicators on forms?
-
+ Induce anxiety: If the form is lengthy, showing a slow-moving
progress bar can induce anxiety and may deter the user from completing the form. Users
could feel overwhelmed by the perceived time investment and the number of questions
yet to come.
-
-
+
+ False perception: Progress bars often represent completion in a
linear fashion, but not all form questions take an equal amount of time or effort to
complete. A user might spend more time on an earlier question and then speed through
subsequent ones. This can lead to an inaccurate perception of progress, causing user
frustration.
-
-
+
+ Distraction: In an adaptive questioning scenario where the next
question depends on the answer to the current question, it's challenging to provide an
accurate progress indicator as the total number of questions can change dynamically.
-
-
+
+ Speed over accuracy: A progress indicator can lead users to rush
through the form to see the progress bar move faster, thus sacrificing the quality of
their responses.
-
-
+
+ Cannot use branching form logic: It's challenging to provide an
accurate progress indicator in a non-linear form where the next question depends on
the answer to the current question. The total number of questions will change
dynamically.
-
-
+
+ Additional development and testing time: that progress indicators and
form steppers introduce.
-
+
When to use a form stepper
-
A form stepper is a type of visual step/progress indicator in a form.
-
+ A form stepper is a type of visual step/progress indicator in a
+ form.
+
Start with a one thing per page approach, and consider using a form stepper when all
of the following is true:
-
+
- your form can be broken into logical groups or steps that is helpful to constantly
- communicate to the user
+ your form can be broken into logical groups or steps that is
+ helpful to constantly communicate to the user
-
your form is always linear, and a user cannot skip questions
- it is valuable to indicate to the user where they are in the process at all times
- ongoing
+ your form is always linear, and a user cannot skip
+ questions
- it is valuable to indicate to the user how many steps are remaining, and you can
- do so reliably
+ it is valuable to indicate to the user where they are in the
+ process at all times ongoing
- the form is not dynamic, where the number of questions remaining can change
- depending on the response
+ it is valuable to indicate to the user how many steps are
+ remaining, and you can do so reliably
+
+
+ the form is not dynamic, where the number of questions
+ remaining can change depending on the response
-
+
Make it clear which tasks a user has completed and which they still need to complete.
-
+
);
}
+
+export default QuestionPage;
diff --git a/src/examples/question-page/QuestionPageExamples.tsx b/src/examples/question-page/QuestionPageExamples.tsx
index 5d3a7e920..6a06bbbcb 100644
--- a/src/examples/question-page/QuestionPageExamples.tsx
+++ b/src/examples/question-page/QuestionPageExamples.tsx
@@ -1,639 +1,59 @@
-import { Sandbox } from "@components/sandbox";
-import "./question-page-example.css";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import {
- GoabButton,
- GoabDetails, GoabDropdown, GoabDropdownItem,
- GoabFormItem,
- GoabInput,
- GoabRadioGroup,
- GoabRadioItem
-} from "@abgov/react-components";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { useContext } from "react";
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import AskAUserOneQuestionAtATime from "@examples/ask-a-user-one-question-at-a-time.tsx";
+import GiveBackgroundInformationBeforeAskingAQuestion
+ from "../give-background-information-before-asking-a-question.tsx";
+import RevealMoreInformationToHelpAnswerAQuestion from "../reveal-more-information-to-help-answer-a-question.tsx";
+import ShowASectionTitleOnAQuestionPage from "../show-a-section-title-on-a-question-page.tsx";
+import ShowASimpleProgressIndicatorOnAQuestionPage from "../show-a-simple-progress-indicator-on-a-question-page.tsx";
+import GroupRelatedQuestionsTogetherOnAQuestionPage from "../group-related-questions-together-on-a-question-page.tsx";
+import ShowASimpleProgressIndicatorOnAQuestionPageWithMultipleQuestions
+ from "../show-a-simple-progress-indicator-on-a-question-page-with-multiple-questions.tsx";
export default function QuestionPageExamples() {
- const {version} = useContext(LanguageVersionContext);
return (
- School can encompass foundational programs that help individuals gain basic skills for
- further learning and living, such as literacy and numeracy courses. It also includes
- skills and employment training programs, designed to equip you with specific skills for
- the job market.
-
-
- Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
- continuing education courses for professional or personal development, are also
- categorized under 'school'.
-
-
Contact your provider if you’re concerned about your school status.
-
-
-
-
-
-
- Save and continue
-
- `}
- />}
-
- {version === "new" &&
- Back
-
-
- Step 1 of 5
-
-
- Personal information
-
-
-
-
-
-
-
+1
-
-
-
-
-
-
- Save and continue
-
- `}
- />}
-
- {/*React Code Snippet - need for leadingContent slot*/}
- {version === "old" &&
- Back
-
-
Step 1 of 5
-
Personal information
-
- {}} name="name" ariaLabel="what is your name?" width="50ch" />
-
-
- {}}
- name="phone-number"
- ariaLabel="what is your phone number?"
- leadingContent="+1"
- />
-
-
- {}}
- name="postal-code"
- width="14ch"
- ariaLabel="what is your home postal code">
-
-
- Save and continue
-
- `}
- />}
-
- {version === "new" &&
- Back
-
-
Step 1 of 5
-
Personal information
-
- {}} name="name" ariaLabel="what is your name?" width="50ch" />
-
-
- {}}
- name="phone-number"
- ariaLabel="what is your phone number?"
- leadingContent="+1"
- />
-
-
- {}}
- name="postal-code"
- width="14ch"
- ariaLabel="what is your home postal code">
-
-
- Save and continue
-
- `}
- />}
-
-
- Back
-
-
Step 1 of 5
-
Personal information
-
-
- {}} name="name" ariaLabel="what is your name?" width="50ch" />
-
-
- {}}
- name="phone-number"
- ariaLabel="what is your phone number?"
- leadingContent="+1"
- />
-
-
- {}}
- name="postal-code"
- width="14ch"
- ariaLabel="what is your home postal code">
-
-
- Save and continue
-
-
);
-}
+}
\ No newline at end of file
diff --git a/src/examples/question-page/question-page-example.css b/src/examples/question-page/question-page-examples.css
similarity index 100%
rename from src/examples/question-page/question-page-example.css
rename to src/examples/question-page/question-page-examples.css
diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx
index 0b8b3fa36..c766f7b22 100644
--- a/src/examples/radio/RadioExamples.tsx
+++ b/src/examples/radio/RadioExamples.tsx
@@ -1,29 +1,31 @@
-import { RadioSlottedDescriptionExample } from "@examples/radio/RadioSlottedDescriptionExample.tsx";
-import { RadioYesNoExample } from "@examples/radio/RadioYesNoExample.tsx";
-import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import {
+ IncludeALinkInTheHelperTextOfAnOption
+} from "@examples/include-a-link-in-the-helper-text-of-an-option.tsx";
+import { SetAMaxWidthOnALongRadioItem } from "@examples/set-a-max-width-on-a-long-radio-item.tsx";
import { RadioRevealSlotExample } from "@examples/radio/RadioRevealSlotExample.tsx";
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export default function RadioExamples () {
return (
<>
+ exampleTitle="Include a link in the helper text of an option"
+ figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-133375&t=X0IQW5flDDaj8Vyg-4">
-
+
+ exampleTitle="Max width on long radio items"
+ figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-133539&t=X0IQW5flDDaj8Vyg-4">
-
+
-
+
);
-}
+}
\ No newline at end of file
diff --git a/src/examples/filter-chip/FilterChipDeleteEventExample.tsx b/src/examples/remove-a-filter.tsx
similarity index 97%
rename from src/examples/filter-chip/FilterChipDeleteEventExample.tsx
rename to src/examples/remove-a-filter.tsx
index d1cf464d6..664bc5f5e 100644
--- a/src/examples/filter-chip/FilterChipDeleteEventExample.tsx
+++ b/src/examples/remove-a-filter.tsx
@@ -4,7 +4,7 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const FilterChipDeleteEventExample = () => {
+export const RemoveAFilter = () => {
const {version} = useContext(LanguageVersionContext);
const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);
const deleteChip = (chip: string) => {
@@ -111,3 +111,5 @@ export const FilterChipDeleteEventExample = () => {
)
}
+
+export default RemoveAFilter;
diff --git a/src/examples/modal/ModalBasicExample.tsx b/src/examples/require-user-action-before-continuing.tsx
similarity index 82%
rename from src/examples/modal/ModalBasicExample.tsx
rename to src/examples/require-user-action-before-continuing.tsx
index 0ae259c33..08cd949f8 100644
--- a/src/examples/modal/ModalBasicExample.tsx
+++ b/src/examples/require-user-action-before-continuing.tsx
@@ -4,28 +4,28 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const ModalBasicExample = () => {
+export const RequireUserActionBeforeContinuing = () => {
const {version} = useContext(LanguageVersionContext);
const [basicModalOpen, setBasicModalOpen] = useState();
return (
setBasicModalOpen(true)}>Open Basic Modal setBasicModalOpen(false)}
actions={
setBasicModalOpen(false)}>
- Secondary
+ Back
setBasicModalOpen(false)}>
- Primary
+ Continue
}>
-
Content
+
You cannot return to this page.
{/*Angular*/}
{
allowCopy={true}
code={`
Open Basic Modal
-
-
We ask this question to determine if you are eligible for child care benefits.
+
+
+ Save and continue
+
+
+
+
+ );
+}
diff --git a/src/examples/container/ContainerReviewActionExample.tsx b/src/examples/review-and-action.tsx
similarity index 98%
rename from src/examples/container/ContainerReviewActionExample.tsx
rename to src/examples/review-and-action.tsx
index 131e8100c..79d5b8f9d 100644
--- a/src/examples/container/ContainerReviewActionExample.tsx
+++ b/src/examples/review-and-action.tsx
@@ -1,4 +1,4 @@
-import "./container-review-action-example.css";
+import "./container/container-review-action-example.css";
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import {
@@ -11,7 +11,7 @@ import {
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const ContainerReviewActionExample = () => {
+export const ReviewAndAction = () => {
const {version} = useContext(LanguageVersionContext);
return (
@@ -182,3 +182,5 @@ export const ContainerReviewActionExample = () => {
)
}
+
+export default ReviewAndAction;
diff --git a/src/routes/patterns/ReviewPage.tsx b/src/examples/review-page.tsx
similarity index 77%
rename from src/routes/patterns/ReviewPage.tsx
rename to src/examples/review-page.tsx
index f21d2e6c5..65321a226 100644
--- a/src/routes/patterns/ReviewPage.tsx
+++ b/src/examples/review-page.tsx
@@ -1,16 +1,16 @@
import {
GoabTab,
- GoabTabs
+ GoabTabs,
+ GoabText
} from "@abgov/react-components";
-import { ComponentContent } from "@components/component-content/ComponentContent";
-import css from "./patterns.module.css";
-import { ReviewPageExamples } from "@examples/review-page/ReviewPageExamples";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
+import css from "@routes/examples/patterns.module.css";
+import { ReviewPageExamples } from "@examples/review-page/ReviewPageExamples.tsx";
-export default function ReviewPage() {
+
+export function ReviewPage() {
return (
<>
-
Review page
-
Let users check answers before submitting information to a service.
@@ -31,28 +31,29 @@ export default function ReviewPage() {
When to use a review page
-
Review and submit your answers at the end of a form or section.
-
+ Review and submit your answers at the end of a form or
+ section.
+
When designing a very large transaction with multiple sections, it may help to
include a check answers pages at the end of each section.
-
+
Let users go back and change their answers
-
+
Provide a "change" link next to each section so that users can add or change the
information they are submitting.
-
-
+
+
If you have questions that are optional, let users know that they've skipped it
without giving an answer by showing their response as "Not provided".
-
-
+
+
Include the full question name again in the change button as "visually hidden" so that
the screen reader reads out "change [question]" instead of just "change". This gives
context to a user using assistive technologies while keeping the link simple for most
users.
-
+
);
}
+
+export default ReviewPage;
diff --git a/src/examples/review-page/ReviewPageExamples.tsx b/src/examples/review-page/ReviewPageExamples.tsx
index dd5b5c827..e9a7d1df0 100644
--- a/src/examples/review-page/ReviewPageExamples.tsx
+++ b/src/examples/review-page/ReviewPageExamples.tsx
@@ -1,27 +1,16 @@
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import "./review-page-example.css";
import { GoabButton, GoabButtonGroup, GoabTable } from "@abgov/react-components";
export function ReviewPageExamples() {
return (
-
+ ))}
+
+
+
+
+
+ Show
+
+ {[10, 20, 30].map(value => (
+
+ ))}
+
+ per page
+
+
+
+ changePage(event.page)}
+ />
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx b/src/examples/show-quick-links.tsx
similarity index 98%
rename from src/examples/app-footer/AppFooterShowQuickLinkExample.tsx
rename to src/examples/show-quick-links.tsx
index f62cd2baa..06448d04e 100644
--- a/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx
+++ b/src/examples/show-quick-links.tsx
@@ -4,7 +4,7 @@ import { GoabAppFooter, GoabAppFooterMetaSection } from "@abgov/react-components
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const AppFooterShowQuickLinkExample = () => {
+export const ShowQuickLinks = () => {
const {version} = useContext(LanguageVersionContext);
return (
@@ -118,3 +118,5 @@ export const AppFooterShowQuickLinkExample = () => {
)
}
+
+export default ShowQuickLinks;
diff --git a/src/examples/badge/BadgeShowStatusInTableExample.tsx b/src/examples/show-status-in-a-table.tsx
similarity index 99%
rename from src/examples/badge/BadgeShowStatusInTableExample.tsx
rename to src/examples/show-status-in-a-table.tsx
index 1e633f38b..7b6f56499 100644
--- a/src/examples/badge/BadgeShowStatusInTableExample.tsx
+++ b/src/examples/show-status-in-a-table.tsx
@@ -5,7 +5,7 @@ import { GoabBadgeType } from "@abgov/ui-components-common";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { useContext } from "react";
-export const BadgeShowStatusInTableExample = () => {
+export const ShowStatusInATable = () => {
const noop = () => {};
const {version} = useContext(LanguageVersionContext);
const badgeValues = [
@@ -328,3 +328,5 @@ export const BadgeShowStatusInTableExample = () => {
)
}
+
+export default ShowStatusInATable;
diff --git a/src/examples/badge/BadgeShowStatusOnCardExample.tsx b/src/examples/show-status-on-a-card.tsx
similarity index 97%
rename from src/examples/badge/BadgeShowStatusOnCardExample.tsx
rename to src/examples/show-status-on-a-card.tsx
index 66ff7288a..4e032182f 100644
--- a/src/examples/badge/BadgeShowStatusOnCardExample.tsx
+++ b/src/examples/show-status-on-a-card.tsx
@@ -4,7 +4,7 @@ import { GoabBadge, GoabContainer } from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const BadgeShowStatusOnCardExample = () => {
+export const ShowStatusOnACard = () => {
const {version} = useContext(LanguageVersionContext);
return (
@@ -78,3 +78,5 @@ export const BadgeShowStatusOnCardExample = () => {
)
}
+
+export default ShowStatusOnACard;
diff --git a/src/examples/show-version-number.tsx b/src/examples/show-version-number.tsx
new file mode 100644
index 000000000..2c16a9e97
--- /dev/null
+++ b/src/examples/show-version-number.tsx
@@ -0,0 +1,22 @@
+import { GoabMicrositeHeader } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+
+export default function ShowVersionNumberExample() {
+
+ return (
+ <>
+
+ {/* ...React + Angular code snippets here (same as original)... */}
+
+ Slotted version text.
+ v1.23
+
+ }
+ />
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/examples/form-item/FormItemSlottedErrorTextExample.tsx b/src/examples/slotted-error-text-in-a-form-item.tsx
similarity index 95%
rename from src/examples/form-item/FormItemSlottedErrorTextExample.tsx
rename to src/examples/slotted-error-text-in-a-form-item.tsx
index 7450f1805..b8f7ecc4c 100644
--- a/src/examples/form-item/FormItemSlottedErrorTextExample.tsx
+++ b/src/examples/slotted-error-text-in-a-form-item.tsx
@@ -4,7 +4,7 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const FormItemSlottedErrorTextExample = () => {
+export const SlottedErrorTextInAFormItem = () => {
const { version } = useContext(LanguageVersionContext);
const errorReactNode: React.ReactNode = (
<>
@@ -16,7 +16,7 @@ export const FormItemSlottedErrorTextExample = () => {
return (
-
+
{/* *********** React code ************/}
@@ -118,3 +118,5 @@ export const FormItemSlottedErrorTextExample = () => {
);
};
+
+export default SlottedErrorTextInAFormItem;
\ No newline at end of file
diff --git a/src/examples/form-item/FormItemSlottedHelperTextExample.tsx b/src/examples/slotted-helper-text-in-a-form-item.tsx
similarity index 96%
rename from src/examples/form-item/FormItemSlottedHelperTextExample.tsx
rename to src/examples/slotted-helper-text-in-a-form-item.tsx
index 1ecfb1a65..e00e4e7fa 100644
--- a/src/examples/form-item/FormItemSlottedHelperTextExample.tsx
+++ b/src/examples/slotted-helper-text-in-a-form-item.tsx
@@ -4,7 +4,7 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-export const FormItemSlottedHelperTextExample = () => {
+export const SlottedHelperTextInAFormItem = () => {
const {version} = useContext(LanguageVersionContext);
const noop = () => {}
const reactNode = <>This is slotted help text.;
@@ -94,3 +94,5 @@ export const FormItemSlottedHelperTextExample = () => {
)
}
+
+export default SlottedHelperTextInAFormItem;
diff --git a/src/examples/start-page.tsx b/src/examples/start-page.tsx
new file mode 100644
index 000000000..9852a7814
--- /dev/null
+++ b/src/examples/start-page.tsx
@@ -0,0 +1,172 @@
+import {
+ GoabGrid, GoabTab, GoabTabs, GoabText
+} from "@abgov/react-components";
+
+import css from "@routes/examples/patterns.module.css";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
+import { StartPageExamples } from "@examples/start-page/StartPageExamples.tsx";
+
+export function StartPage() {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ When to use a start page
+
+
+ When to use a start page
+
+
+ A start page is the front door to a government service for a citizen. It is the way
+ into the service, how they access the service. Each government service has a start
+ page on Alberta.ca. Contact the relevant person at Alberta.ca to make changes to the
+ start page for your service.
+
+
+ This is the starting point for a citizen to begin your form from within your service
+ or from Alberta.ca.
+
+
+ Provide the user with any information that is important before starting the form such
+ as how long it should take, list documents or information they may need to complete
+ the form, if there are any costs involved, or alternative ways to access the service.
+
+
+
+
+
+
+
A service's start page should
+
+
+
+ give the user just enough information to help them understand what the service does
+ and whether it will meet their need
+
+
+
+
+ a service's name should reflects the problem it solves for users
+
+
+
+ include a "start button" linking into the service, with text that's consistent with
+ the action you're asking users to take — for example, "Start now", "Sign in" or
+ "Register or update your details"
+
+
+
+
+ a service's name should reflects the problem it solves for users
+
+
+
+
+ include any other information that most users are likely to need before they start
+ using the service online — for example, how much it costs to use the service and
+ roughly how long it will take
+
+
+
+
+ include additional information about the service such as other ways to access the
+ service (eg. by telephone or by completing a paper form). This should be included
+ after the main call to action to start the digital service.
+
+
+
+
+
+
+
+ Page content
+
+
+ Page content
+
+
+ Consider what is the primary information that the user needs to know before entering
+ into the service. Provide that information to the user clearly, and then provide a
+ link to start using the service. Provide additional secondary information below the
+ call to action.
+
+
Overview
+
+ What the user needs to know before they enter into the service. A high level description of what the
+ service
+ is and what you can use it to do
+
+
+
Before you begin
+
+
+
+ how long it will take
+
+
+
+
+ what you will need to complete the service
+
+
+
+
+
+ e.g. specific documents
+
+
+
+
+
+ other important information
+
+
+
+
+
Call to action
+
+ Below the primary information, include an obvious call to action to get started with the service.
+
+
+
Other information
+
+ Below the call to action, include any additional information as applicable such as customer support,
+ frequently asked questions, or related links.
+
+
- A short overview of the service. This is a couple sentences that helps the user understand
- what the service is.
-
-
Use this service to apply for [service]. You can use this service to:
-
-
see of you or a family member is eligible for [service]
-
create and submit an application for [service]
-
continue an application for [service] that you already started
-
+
Name of service
+
+ A short overview of the service. This is a couple sentences that helps the user understand
+ what the service is.
+
+
Use this service to apply for [service]. You can use this service to:
+
+
see of you or a family member is eligible for [service]
+
create and submit an application for [service]
+
continue an application for [service] that you already started
+
-
Before you begin
-
The application form should take about 20 minutes to complete.
-
- In order to complete the application you will need:
-
-
-
government issued ID for the person applying
-
- {}}>
- Get started
-
+
Before you begin
+
The application form should take about 20 minutes to complete.
+
+ In order to complete the application you will need:
+
+
+
government issued ID for the person applying
+
+ {
+ }}>
+ Get started
+
-
Other information about the service
-
- This section contains supplementary details about the service, including descriptions of
- less common scenarios, exceptions, and additional resources available. It provides context
- and additional insights that may be relevant to your specific circumstances or interests,
- helping you understand the full scope and utility of the service offered.
-
+
Other information about the service
+
+ This section contains supplementary details about the service, including descriptions of
+ less common scenarios, exceptions, and additional resources available. It provides context
+ and additional insights that may be relevant to your specific circumstances or interests,
+ helping you understand the full scope and utility of the service offered.
+
+
);
-}
+}
\ No newline at end of file
diff --git a/src/examples/start-page/start-page-example.css b/src/examples/start-page/start-page-example.css
deleted file mode 100644
index 5eef5e757..000000000
--- a/src/examples/start-page/start-page-example.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.start-page-example h1.page-title {
- margin-bottom: var(--goa-space-l);
-}
-.start-page-example h2 {
- margin-top: var(--goa-space-xl);
- margin-bottom: 0;
-}
-.start-page-example h2 + p {
- margin-top: var(--goa-space-l);
-}
diff --git a/src/examples/tabs/TabsExamples.tsx b/src/examples/tabs/TabsExamples.tsx
index b5cd77c45..06f06ee8f 100644
--- a/src/examples/tabs/TabsExamples.tsx
+++ b/src/examples/tabs/TabsExamples.tsx
@@ -1,5 +1,5 @@
-import { TabsDifferentViewsTableExample } from "@examples/tabs/TabsDifferentViewsTableExample.tsx";
-import { TabsSetSpecificTabActiveExample } from "@examples/tabs/TabsSetSpecificTabActiveExample.tsx";
+import { ShowDifferentViewsOfDataInATable } from "@examples/show-different-views-of-data-in-a-table.tsx";
+import { SetASpecificTabToBeActive } from "@examples/set-a-specific-tab-to-be-active.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const TabsExamples = () => {
@@ -9,13 +9,13 @@ export const TabsExamples = () => {
exampleTitle="Show different views of data in a table"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-135722&t=X0IQW5flDDaj8Vyg-4">
-
+
-
+
)
diff --git a/src/examples/task-list-page.tsx b/src/examples/task-list-page.tsx
new file mode 100644
index 000000000..799bec3ee
--- /dev/null
+++ b/src/examples/task-list-page.tsx
@@ -0,0 +1,152 @@
+import {
+ GoabCallout,
+ GoabTab,
+ GoabTabs,
+ GoabText
+} from "@abgov/react-components";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
+import css from "@routes/examples/patterns.module.css";
+import { Link } from "react-router-dom";
+import { TaskListPageExamples } from "@examples/task-list-page/TaskListPageExamples.tsx";
+
+export function TaskListPage() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ Overview
+
+
+
+
+
When to use a task list page
+
+ Use a task list page to provide a structure for multiple steps in a service. Show a task list page when a
+ citizen begins a service, and when they return to the service.
+
+
+ When using a task list, group related actions into tasks and show the status of the tasks.
+
+
+
How to define a task
+
+ The size and complexity of a task is determined by the service and content. A task can be defined as
+ small as a single action, such as: “sign a document”, or “upload a file”, or can be as big as an entire
+ section of a form with multiple question pages and a review page.
+
+
+ Use tasks to break down the steps in a service in an understandable way.
+
+
+
Show status of tasks
+
+ Make it clear which tasks a user has completed and which they still need to complete.
+
+
+
+
+
+
+
Suggested statuses
+
+ Completed (success), In progress (dark grey), Not started (information), Cannot start yet (light grey)
+
+
+ Include a summary above the task list to say how many tasks have been completed. This also makes it
+ clearer to the user that there are still tasks left to complete.
+
+
+
+
+ You have completed 0 of 3 sections.
+
+
+
+
How is a task list different than a stepper?
+
+
Stepper:
+
+
+ a visual navigation within a form
+
+
+ shown at the top of every page in a form
+
+
+ scope: sections of a form
+
+
+
+
+
Task list:
+
+
+ can be used to outline more than just sections of a
+ form
+
+
+ not shown on every page
+
+
+
+
+
Completing tasks in order
+
+ When possible, allow users to complete tasks in any order. This will help them plan
+ their time and complete sections as and when they can.
+
+
+
+
+ Examples
+
+
+ Common patterns, pages, tasks, component configurations, flows, and more to use as a starting point when
+ creating government digital services.
+
+
+ setFilter(value || "")}
+ />
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/routes/examples/FallbackExample.tsx b/src/routes/examples/FallbackExample.tsx
new file mode 100644
index 000000000..fb13f09b7
--- /dev/null
+++ b/src/routes/examples/FallbackExample.tsx
@@ -0,0 +1,11 @@
+import { GoabText } from "@abgov/react-components";
+
+export default function FallbackExample() {
+ return (
+
+
+ Example not loading.
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/routes/examples/examplesFilterUtils.ts b/src/routes/examples/examplesFilterUtils.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/routes/patterns/patterns.module.css b/src/routes/examples/patterns.module.css
similarity index 100%
rename from src/routes/patterns/patterns.module.css
rename to src/routes/examples/patterns.module.css
diff --git a/src/routes/foundations/Accessibility.tsx b/src/routes/foundations/Accessibility.tsx
index 742783f18..c033c8e47 100644
--- a/src/routes/foundations/Accessibility.tsx
+++ b/src/routes/foundations/Accessibility.tsx
@@ -1,12 +1,18 @@
-import { GoabDivider } from "@abgov/react-components";
+import { GoabDivider, GoabText } from "@abgov/react-components";
import { Link } from "react-router-dom";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
export default function AccessibilityPage() {
return (
-
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.
+
+ 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.
+
+
Every component in our design system meets meets WCAG 2.2 Level AA standards. While the system has accessibility features, teams should take extra steps to ensure consistent and accessible experiences across all products and platforms.
diff --git a/src/routes/foundations/BrandGuidelines.tsx b/src/routes/foundations/BrandGuidelines.tsx
index 8072e675c..9b593436c 100644
--- a/src/routes/foundations/BrandGuidelines.tsx
+++ b/src/routes/foundations/BrandGuidelines.tsx
@@ -1,11 +1,17 @@
-import { GoabDivider } from "@abgov/react-components";
+import { GoabDivider, GoabText } from "@abgov/react-components";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
export default function BrandGuidelinesPage() {
return (
-
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.
+
+ 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/content/Capitalization.tsx b/src/routes/foundations/Capitalization.tsx
similarity index 85%
rename from src/routes/content/Capitalization.tsx
rename to src/routes/foundations/Capitalization.tsx
index 5628e943c..a159e7d1d 100644
--- a/src/routes/content/Capitalization.tsx
+++ b/src/routes/foundations/Capitalization.tsx
@@ -1,27 +1,32 @@
-import { GoabBlock, GoabDivider, GoabFormItem, GoabGrid, GoabSideMenu } from "@abgov/react-components";
-import { DoDont } from "@components/do-dont/DoDont";
-import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabBlock, GoabDivider, GoabFormItem, GoabGrid, GoabSideMenu, GoabText } from "@abgov/react-components";
+import { DoDont } from "@components/do-dont/DoDont.tsx";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
const minGridWidth = "36ch";
export default function CapitalizationPage() {
return (
-
Capitalization
-
Use sentence case for all headings, labels, and content.
+
+
+ Capitalization
+
+
+ Use sentence case for all headings, labels, and content.
+
Sentence case
-
+
Sentence case means everything is lowercase except for the first word in a label, phrase, or
sentence. Sentence case follows the natural patterns of written language, which makes text
easier to scan and comprehend.
-
-
+
+
Use sentence case in most titles and headings. Only capitalize the first word of a sentence
or title.
-
+
@@ -56,18 +61,18 @@ export default function CapitalizationPage() {
Title case
-
+
Title case may be used in certain situations including: proper nouns, brands, products, and
service names.
-
-
+
+
A proper noun is the name of a particular person, place, organization, or thing.
eg. “Margaret”, “Calgary”, “Government of Alberta”, or “Community Initiatives Program”
-
-
+
+
If a title, label, or heading includes a colon or ampersand, capitalize the first word after
it.
-
+
Capital case
-
+
When displaying information pulled from legacy systems there may be information that must
remain in capital case due to limitations with integration.
-
-
+
+
Use this style only where necessary by the legacy system, since capital case is less
readable, less accessible, and has the perception of emphasis.
-
-
+
+ Example:
Display the following information in sentence case when possible for better readability.
-
+
@@ -128,20 +133,20 @@ export default function CapitalizationPage() {
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.
-
+
+
+ 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.
+
Our palette is divided into these categories:
diff --git a/src/routes/content/DateFormat.tsx b/src/routes/foundations/DateFormat.tsx
similarity index 70%
rename from src/routes/content/DateFormat.tsx
rename to src/routes/foundations/DateFormat.tsx
index deb7bd510..03623321b 100644
--- a/src/routes/content/DateFormat.tsx
+++ b/src/routes/foundations/DateFormat.tsx
@@ -1,40 +1,42 @@
-import { GoabCallout, GoabContainer, GoabDivider, GoabGrid } from "@abgov/react-components";
-import { DoDont } from "@components/do-dont/DoDont";
-import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabCallout, GoabContainer, GoabDivider, GoabGrid, GoabText } from "@abgov/react-components";
+import { DoDont } from "@components/do-dont/DoDont.tsx";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
const minGridWidth = "36ch";
export default function DateFormatPage() {
return (
-
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.
-
+
+ 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.
+
-
+
+
March 14, 2021
+
Conversational and long-form
-
+
When the date is written out in long-form (i.e. narrative, instructions, commentary,
information), it is recommended that you use a more conversational and more natural
“readable” tone.
-
+
-
+
-
+
This presents the date in a conventional “speaking” way and aligns with the Canadian Style
Guide 5.14 Dates.
-
+
-
March 14, 2021
-
+
+ March 14, 2021
+
-
March 14
-
March 14th
+
+ March 14
+
+
+ March 14th
+
-
March 14th, 2021
+
+ March 14th, 2021
+
-
MARCH 14TH, 2021
+
+ MARCH 14TH, 2021
+
-
March 12, 21
+
+ March 12, 21
+
@@ -79,17 +92,18 @@ export default function DateFormatPage() {
Short-hand
-
+
When space is limited (e.g., example forms, tables, summary pages, mobile) it may be
necessary to have a more condensed date displayed.
-
-
The format remains the same, but a three-letter abbreviation for the month may be used.
-
+
+ The format remains the same, but a three-letter abbreviation for the month
+ may be used.
+ Examples:
Jul 14, 2022
Nov 6, 2024
-
-
+
+ Three-letter month abbreviations:
@@ -109,38 +123,50 @@ export default function DateFormatPage() {
Dec
-
+
-
+
+
+
-
Mar 14, 2021
+
+ Mar 14, 2021
+
-
-
-
-
Mar 12, 21
+
+ Mar 12, 21
+
-
Mar. 12, 2021
+
+ Mar. 12, 2021
+
-
MAR 12, 21
+
+ MAR 12, 21
+
-
Mar 07, 21
-
+
+ Mar 07, 21
+
-
03/07/21
-
07/03/2021
+
+ 03/07/21
+
+
+ 07/03/2021
+
@@ -148,17 +174,19 @@ export default function DateFormatPage() {
Day of the week
-
+
Days of the week can be included. It helps to bring clarity and comprehension of the date.
The format described above is extended, with the day of the week appearing first, followed
by a comma, then the date expression.
-
-
+
+
Either long-form or short-form may be used, but not mixed.
Day, Month date, Year (e.g., Friday, March 14, 2021)
- Examples:
+
+ Examples:
+
Tuesday, July 14, 2022
@@ -169,7 +197,9 @@ export default function DateFormatPage() {
Wed, November 6, 2024
- Three-letter day abbreviations
+
+ Three-letter day abbreviations
+
Mon
@@ -181,81 +211,97 @@ export default function DateFormatPage() {
Sun
-
+
-
Monday, March 14, 2021
-
Mon, Mar 14, 2021
+
+ Monday, March 14, 2021
+
+
+ Mon, Mar 14, 2021
+
-
Monday, Mar 12, 2021
-
Mon, March 12, 2021
+
+ Monday, Mar 12, 2021
+
+
+ Mon, March 12, 2021
+
-
Mon, Mar 12, 2021
+
+ Mon, Mar 12, 2021
+
-
Monday March 12, 2021
+
+ Monday March 12, 2021
+
-
-
-
+
Avoid using day of the week in tabular, form, summary, or other concise displays, as
it would crowd the already limited space with unnecessary information.
-
-
Time
-
+
When displaying time, the Government of Alberta prefers to use the 12-hour clock format.
-
-
+
+
Both also prefer “am” and “pm” be written with a space after the time, without the periods
as per the Canadian Style Guide.
-
-
+
+ Examples:
8:00 am
11:45 pm{" "}
-
-
+
+
When the time is written with a date, the date comes first and the time follows, after “at”.
-
-
+
+ Day, Month date, Year at XX:XX am/pm
-
-
(e.g., Friday, March 14, 2021 at 2:26 pm)
+
+ (e.g., Friday, March 14, 2021 at 2:26 pm)
-
Monday, March 14, 2021 at 3:30 pm
+
+ Monday, March 14, 2021 at 3:30 pm
+
-
08:15 am
+
+ 08:15 am
+
-
4:43 p.m.
+
+ 4:43 p.m.
+
-
7:55 am on Saturday, May 15, 2021
+
+ 7:55 am on Saturday, May 15, 2021
+
@@ -263,17 +309,17 @@ export default function DateFormatPage() {
Time zones
-
+
When needed, the time zone can be written after the time in long-form or short-form. The
long-form is always in parenthesis and the short-form is always a capitalized three-letter
abbreviation.
-
-
+
+ Examples:
8:00 am (Eastern standard time)
11:45 pm PDT
-
-
+
+ Canadian time zones
Pacific standard / daylight time
@@ -282,9 +328,9 @@ export default function DateFormatPage() {
Eastern standard / daylight time
Atlantic standard / daylight time
Newfoundland standard / daylight time
-
+
-
+ Three letter abbreviations
@@ -304,60 +350,39 @@ export default function DateFormatPage() {
NDT
-
-
+
+ Standard and Daylight time
-
-
+
+
In the regions of Canada where daylight saving time is used, it begins on the second Sunday
of March at 2 a.m. and ends on the first Sunday in November at 2 a.m. As a result, daylight
saving time lasts for 34 weeks (238 days) every year, or about 65 percent of the entire
year.
-
+
-
-
-
-
Jan
-
Feb
-
Mar
-
Apr
-
May
-
Jun
-
Jul
-
Aug
-
Sep
-
Oct
-
Nov
-
Dec
-
-
-
-
-
+
-
+
-
-
-
4:43pm (MST)
+
+ 4:43pm (MST)
+
-
+
From April to October Alberta participates in daylight saving time.
@@ -366,14 +391,14 @@ export default function DateFormatPage() {
+
Consider the following html
@@ -396,7 +421,7 @@ export default function DateFormatPage() {
-
+
The date time variables entered into the module for producing “readable” and
“conversational” need to be rendered in the ISO 8601 format.
diff --git a/src/routes/foundations/DesignAtGoA.tsx b/src/routes/foundations/DesignAtGoA.tsx
index 0a6be92b0..b6a74b8b3 100644
--- a/src/routes/foundations/DesignAtGoA.tsx
+++ b/src/routes/foundations/DesignAtGoA.tsx
@@ -1,11 +1,17 @@
-import { GoabDivider } from "@abgov/react-components";
+import { GoabDivider, GoabText } from "@abgov/react-components";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
export default function DesignAtGoAPage() {
return (
-
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.
+
+ 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.
+
User experience guidelines
diff --git a/src/routes/content/ErrorMessages.tsx b/src/routes/foundations/ErrorMessages.tsx
similarity index 87%
rename from src/routes/content/ErrorMessages.tsx
rename to src/routes/foundations/ErrorMessages.tsx
index 3a46c7525..2e9c7da85 100644
--- a/src/routes/content/ErrorMessages.tsx
+++ b/src/routes/foundations/ErrorMessages.tsx
@@ -1,4 +1,4 @@
-import { DoDont } from "@components/do-dont/DoDont";
+import { DoDont } from "@components/do-dont/DoDont.tsx";
import {
GoabCheckbox,
GoabDivider,
@@ -7,9 +7,10 @@ import {
GoabInput,
GoabRadioGroup,
GoabRadioItem,
+ GoabText
} from "@abgov/react-components";
import { Link } from "react-router-dom";
-import { ComponentContent } from "@components/component-content/ComponentContent";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
const minGridWidth = "36ch";
@@ -17,16 +18,19 @@ export default function ErrorMessagesPage() {
const noop = () => { };
return (
-
Error messages
-
Error messages appear when the user’s proposed action fails.
+
+ Error messages
+
+
+ Error messages appear when the user’s proposed action fails.
+
@@ -34,15 +38,15 @@ export default function ErrorMessagesPage() {
-
+ error="Choose how you would like to be contacted">
+
-
+
+
+ error="Confirm that the contact information is correct">
Anatomy
-
+
When a user inputs an unexpected value in the input field, an error message will appear
below the field followed by a 16 pixels error icon. Both the icon and the error text are in
red. The input field frame is displayed in red.
-
-
Helper text
-
+
+ Helper text
+
When helper text and error message are both shown, the error message always appears above
the helper text.
-
+
@@ -90,7 +95,7 @@ export default function ErrorMessagesPage() {
-
Border
+ Border
@@ -104,7 +109,7 @@ export default function ErrorMessagesPage() {
-
Button/upload area
+ Button/upload area
@@ -133,38 +138,38 @@ export default function ErrorMessagesPage() {
Language and tone
-
Be clear and concise
-
+ Be clear and concise
+
Communicate errors with a brief, clear, positive and solution-oriented approach. Be direct
and natural.
-
-
Be specific
-
+
+ Be specific
+
Be specific about required information and what users should do to recover from the error.
-
-
Provide a solution
-
+
+ Provide a solution
+
Always provide a solution to the user through clear instruction. When applicable, provide an
example.
-
-
Be empathetic
-
+
+ Be empathetic
+
Speak in a humanized tone to be empathetic to the user. Let the user know that you
understand their frustration.
-
+
Common error message templates
-
+
Follow the templates and examples below for common errors to create an error message that
fits your context.
-
+
Input is empty
-
This error appears when user leaves a required field blank.
+ This error appears when user leaves a required field blank.
@@ -174,7 +179,7 @@ export default function ErrorMessagesPage() {
@@ -463,10 +471,10 @@ export default function ErrorMessagesPage() {
Invalid characters used
-
+
This error appears when user inputs invalid characters. To keep messages clear and concise,
provide a guided solution.
-
+
@@ -493,7 +501,8 @@ export default function ErrorMessagesPage() {
-
When the accepted characters are known, include an example in the error message.
+ When the accepted characters are known, include an example in the error
+ message.
@@ -502,7 +511,7 @@ export default function ErrorMessagesPage() {
-
+
Alberta Bar ID must include numbers only, such as “12345.”
@@ -518,7 +527,7 @@ export default function ErrorMessagesPage() {
Incorrect number of characters
-
+
diff --git a/src/routes/foundations/FoundationsLayout.tsx b/src/routes/foundations/FoundationsLayout.tsx
index 2eb804a69..653862cad 100644
--- a/src/routes/foundations/FoundationsLayout.tsx
+++ b/src/routes/foundations/FoundationsLayout.tsx
@@ -1,4 +1,4 @@
-import { GoabSideMenu, GoabSideMenuHeading } from "@abgov/react-components";
+import { GoabSideMenu, GoabSideMenuGroup, GoabSpacer } from "@abgov/react-components";
import { Link, Outlet } from "react-router-dom";
import "./foundations.css";
import { SupportInfo } from "@components/support-info/SupportInfo.tsx";
@@ -8,17 +8,24 @@ export default function GetStartedLayout() {
- Foundations
+
Design at GoA
Accessibility
Brand guidelines
- Style Guide
+
Color
Iconography
Photography
Logo
Typography
Layout
+
+
+ Capitalization
+ Date format
+ Error messages
+ Helper text
+
diff --git a/src/routes/content/HelperText.tsx b/src/routes/foundations/HelperText.tsx
similarity index 70%
rename from src/routes/content/HelperText.tsx
rename to src/routes/foundations/HelperText.tsx
index f52d0bd31..62fd5c909 100644
--- a/src/routes/content/HelperText.tsx
+++ b/src/routes/foundations/HelperText.tsx
@@ -7,30 +7,36 @@ import {
GoabGrid,
GoabInput,
GoabTable,
+ GoabText
} from "@abgov/react-components";
-import { DoDont } from "@components/do-dont/DoDont";
+import { DoDont } from "@components/do-dont/DoDont.tsx";
import { Link } from "react-router-dom";
-import { ComponentContent } from "@components/component-content/ComponentContent";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
const minGridWidth = "36ch";
export default function HelperTextPage() {
return (
-
Helper text
-
- Helper text is additional context and guidance that is always visible below an input. The
+
+
+ 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.
-
- Helper text is available within:
-
+
+
+
+ Helper text is available within:
+
Text Input,{" "}
Radio, Dropdown,{" "}
Checkbox, Button
-
-
-
+
+
+
Considerations
-
Consider the following ways to convey more information:
+ Consider the following ways to convey more information:
@@ -170,36 +176,48 @@ export default function HelperTextPage() {
-
View a pattern and guide on how to show more information.
+ View a pattern and guide on how to show more information.
Anatomy
-
Helper text can be used with any input.
+ Helper text can be used with any input.
-
Input label + optional / required
-
Text Input
-
Helper Text
+
+ Input label + optional / required
+
+
+ Text Input
+
+
+ Helper Text
+
-
Examples of helper text within different inputs
+ Examples of helper text within different inputs
-
Input label + optional / required
-
Input control(s)
-
Helper Text
+
+ Input label + optional / required
+
+
+ Input control(s)
+
+
+ Helper Text
+
Language and Tone
-
Keep it concise
-
+ Keep it concise
+
Helper text should be short and to the point. Avoid long paragraphs or complicated
explanations.
-
-
Use plain language
-
+
+ Use plain language
+
Write in a language that is easy to understand for your target audience. Avoid technical
jargon or complex terms.
@@ -208,31 +226,34 @@ export default function HelperTextPage() {
target="_blank">
Web writing style guide - Plain language
-
-
Provide examples
-
+
+ Provide examples
+
Examples can help clarify the type of input you are looking for. For example: if you are
asking for a phone number, provide an example of the format you are expecting.
-
-
Be specific
-
Use specific language to describe what type of information you are looking for.
-
Use specific language to describe what type of information you are looking for.
-
+
+ Be specific
+ Use specific language to describe what type of information you are looking
+ for.
+ Use specific language to describe what type of information you are
+ looking for.
+
Write numbers using digits E.g. “342” except when the number starts the sentence or is the
number ‘one’.
-
+
+
Web writing style guide – Numbers and measurements
-
+
Usage
-
+
Helper text generally falls into 3 different categories. Examine the patterns and examples
below to use helper text properly.
-
+
Disclosive helper text helps a user understand the data, task or system associated with the
input. It can be used to provide context or to explain what is expected from the user and
can help users understand what information they need to provide and why it is needed.
-
-
- Examples of disclosive helper text:
+
+
+ Examples of disclosure helper text:
-
Your full name is used for verification
-
Emails will be sent in your language of choice
-
This will be viewable to clients
-
Providing optional info helps us assist you better
-
This address will receive your printed certificate
-
Your birthdate is used to verify your eligibility
+
+ Your full name is used for verification
+
+
+ Emails will be sent in your language of choice
+
+
+ This will be viewable to clients
+
+
+ Providing optional info helps us assist you better
+
+
+ This address will receive your printed certificate
+
+
+ Your birthdate is used to verify your eligibility
+
Instructional – Directions for how to use the input
-
+
Instructional helper text is used to provide instructions on how to interact with a
particular input field or control. It can be used to explain how to use a particular
feature, what actions are possible, or what the result of a certain action will be.
-
-
+
+ Examples of instructional helper text:
-
Search by staff name or certification number
-
Select an existing project or create a new project name
-
Use arrow keys to choose from options
-
Type in your search terms to see results
-
Select a file to upload for verification
-
Select a date from the calendar for scheduling
-
Drag and drop files to upload for review
-
Select an option from the dropdown menu to filter results
+
+ Search by staff name or certification number
+
+
+ Select an existing project or create a new project name
+
+
+ Use arrow keys to choose from options
+
+
+ Type in your search terms to see results
+
+
+ Select a file to upload for verification
+
+
+ Select a date from the calendar for scheduling
+
+
+ Drag and drop files to upload for review
+
+
+ Select an option from the dropdown menu to filter
+ results
+
Restrictive – Rules and requirements that the input needs to meet
-
+
Restrictive helper text indicates limitations or requirements that must be met when filling
out a form or using a control. It can be used to communicate restrictions on input format,
length, or content. Restrictive helper text can help users avoid errors and ensure that
their input meets the required criteria.
-
-
+
+ Examples of restrictive helper text:
-
Must be 8 or more characters with one uppercase letter and one number
-
Must be 5MB or smaller
-
Choose a date within the last six months
-
Password must contain 1 uppercase letter and 1 number
-
File size limit: 5MB
+
+ Must be 8 or more characters with one uppercase letter and one
+ number
+
+
+ Must be 5MB or smaller
+
+
+ Choose a date within the last six months
+
+
+ Password must contain 1 uppercase letter and 1 number
+
+
+ File size limit: 5MB
+
-
+
@@ -382,10 +443,10 @@ export default function HelperTextPage() {
Formatting
-
+
Helper text should be a short succinct statement, sentence case, with no period or
punctuation.
-
+
Accessibility
-
+
For screen reader accessibility, consider using the aria-describedby attribute as helper
text for the input control. This allows screen readers to provide additional context that
would be present for a sighted user.
-
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 where words cannot.
-
+
+ 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
+ where
+ words cannot.
+
diff --git a/src/routes/foundations/Layout.tsx b/src/routes/foundations/Layout.tsx
index b1000fbf3..86c9e8156 100644
--- a/src/routes/foundations/Layout.tsx
+++ b/src/routes/foundations/Layout.tsx
@@ -1,4 +1,4 @@
-import { GoabDivider, GoabTable, GoabContainer, GoabSpacer } from "@abgov/react-components";
+import { GoabDivider, GoabTable, GoabContainer, GoabSpacer, GoabText } from "@abgov/react-components";
import { Link } from "react-router-dom";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
@@ -6,9 +6,14 @@ export default function FoundationsLayoutPage() {
return (
-
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.
-
+
+ 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.
+
The spacing scale
The Design System uses a spacing scale with a 16px base value to be used within layout spacing and spacing within components. See spacing for more information.
diff --git a/src/routes/foundations/Logo.tsx b/src/routes/foundations/Logo.tsx
index 651cff1a4..1c187745f 100644
--- a/src/routes/foundations/Logo.tsx
+++ b/src/routes/foundations/Logo.tsx
@@ -1,12 +1,18 @@
-import { GoabDivider, GoabGrid, GoabContainer, GoabSpacer } from "@abgov/react-components"
+import { GoabDivider, GoabGrid, GoabContainer, GoabSpacer, GoabText } from "@abgov/react-components";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
export default function LogoPage() {
return (
-
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 usage.
-
+
+ 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
+ usage.
+
Anatomy
diff --git a/src/routes/foundations/Photography.tsx b/src/routes/foundations/Photography.tsx
index e0f389f8b..3871d9a62 100644
--- a/src/routes/foundations/Photography.tsx
+++ b/src/routes/foundations/Photography.tsx
@@ -1,12 +1,17 @@
-import { GoabDivider } from "@abgov/react-components";
+import { GoabDivider, GoabText } from "@abgov/react-components";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
export default function ImagesPage() {
return (
-
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.
-
+
+ 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 506943e9d..75ea5f563 100644
--- a/src/routes/foundations/Typography.tsx
+++ b/src/routes/foundations/Typography.tsx
@@ -1,4 +1,4 @@
-import { GoabDivider, GoabContainer, GoabSpacer } from "@abgov/react-components";
+import { GoabDivider, GoabContainer, GoabSpacer, GoabText } from "@abgov/react-components";
import { Link } from "react-router-dom";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
@@ -6,9 +6,16 @@ export default function FoundationsTypographyPage() {
return (
-
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 easy to navigate, enabling citizens to find information quickly.
-
+
+ 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
+ easy to
+ navigate, enabling citizens to find information quickly.
+
Our fonts
diff --git a/src/routes/content/content.css b/src/routes/foundations/content.css
similarity index 98%
rename from src/routes/content/content.css
rename to src/routes/foundations/content.css
index d9a3fa891..a8df17fe6 100644
--- a/src/routes/content/content.css
+++ b/src/routes/foundations/content.css
@@ -6,6 +6,7 @@ p {
font: var(--goa-typography-body-l);
text-align: center;
min-height: 28px;
+ display: flex;
}
.month-container {
diff --git a/src/routes/get-started/ComponentLifecycle.tsx b/src/routes/get-started/ComponentLifecycle.tsx
index 71c617fd4..318bc667f 100644
--- a/src/routes/get-started/ComponentLifecycle.tsx
+++ b/src/routes/get-started/ComponentLifecycle.tsx
@@ -7,9 +7,11 @@ 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.
- To request new components or enhancements, please follow the{' '}
+
+
+ To request new components or enhancements, please follow the{" "}
Design contribution process.
diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx
index e3126d61f..6481bb6fa 100644
--- a/src/routes/get-started/GetStartedOverview.tsx
+++ b/src/routes/get-started/GetStartedOverview.tsx
@@ -90,7 +90,7 @@ export default function GetStartedOverviewPage() {
How do I use the design system in my service?
Start by using the design system components and patterns. You should expect that this will cover about 80% of your needs in a service.
+ href={"/examples"}>patterns. You should expect that this will cover about 80% of your needs in a service.
When usability testing shows that a new solution or an improvement to an existing solution is needed, design a
better solution. Use a 3rd party library, code your own, and/or share solutions with other teams.
diff --git a/src/routes/get-started/developers/DevelopersTechnologies.tsx b/src/routes/get-started/developers/DevelopersTechnologies.tsx
index 8f73f579f..b667b2df7 100644
--- a/src/routes/get-started/developers/DevelopersTechnologies.tsx
+++ b/src/routes/get-started/developers/DevelopersTechnologies.tsx
@@ -9,7 +9,7 @@ export default function DevelopersTechnologiesPage() {
An overview of the technologies that make up the design system.
-
-
-
- All
- Public form
-
- Pages
- Basic page layout
- Start page
- Task list page
- Question pages
- Review page
- Results page
-
-
-
-
-
-
-
- );
-}
diff --git a/src/routes/patterns/PatternsOverview.tsx b/src/routes/patterns/PatternsOverview.tsx
deleted file mode 100644
index d55083960..000000000
--- a/src/routes/patterns/PatternsOverview.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentContent } from "@components/component-content/ComponentContent";
-import css from "./patterns.module.css";
-import { Link } from "react-router-dom";
-
-export default function PatternsOverviewPage() {
- return (
-
-
Patterns
-
- Common patterns and page templates to use as a starting point for a government service.
-
-
-
Patterns
-
-
- Public form
-
-
-
-
-
Pages
-
-
- Start page
-
-
- Task list page
-
-
- Question page
-
-
- Review page
-
-
- Results page
-
-
-
-
- );
-}
diff --git a/src/routes/patterns/PublicFormPage.tsx b/src/routes/patterns/PublicFormPage.tsx
deleted file mode 100644
index 29c49ef3b..000000000
--- a/src/routes/patterns/PublicFormPage.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { ComponentContent } from "@components/component-content/ComponentContent";
-import { GoabDetails } from "@abgov/react-components";
-import css from "./patterns.module.css";
-import { Link } from "react-router-dom";
-
-export default function PublicFormPage() {
- return (
-
-
Public form
-
- Design forms that help Albertan citizens understand the task, focus on the question and its
- answer, and complete the form.
-
-
-
- Primary users: citizens, public, external
-
- You are designing a public service for citizens. It should be designed to be as simple and
- intuitive as possible, while ensuring citizens can make complete and informed decisions
- for themselves using the service.
-
- There is an emphasis on an accessible experience with a low cognitive load for users who
- use the service infrequently.
-
-
-
-
Form structure
-
- Use the public form structure focused on content, and asking the right questions to your user
- to keep the interaction as simple as possible.
-
-
-
Start with one idea per page
-
-
- Split the form across multiple pages with each page containing just one idea, for example:
-
-
-
one decision they have to make
-
one question they have to answer
-
one piece of information you're telling a user
-
-
-
-
-
Starting with one thing per page helps users to:
-
-
understand what you're asking them to do
-
focus on specific questions and its answer
-
find their way through an unfamiliar process
-
use the service on a mobile device
-
recover easily from form errors
-
-
-
-
-
It also helps the service:
-
-
handle branching questions and loops
-
design for mobile use
-
save a user’s answers automatically as they go
-
capture analytics about each question
-
-
-
-
Combine questions when helpful
-
- Asking a question doesn’t necessarily mean you should use one form field. For example,
- asking a user for their address is best captured all on the same page with multiple fields.
-
-
-
Accessibility
-
-
- Structuring your form with one idea per page simplifies the experience, and makes your
- form more accessible.
-
-
-
- Reduced cognitive load: Presenting only one idea at a time reduces
- cognitive load on the user. This is particularly beneficial for users with cognitive
- impairments, who might find it difficult to process and respond to multiple questions at
- once.
-
-
- Improved navigation for a screen reader: This simplified approach
- efficiently guides the user through the form based on each answer and makes it easier to
- navigate with screen readers or other assistive technology.
-
-
- Better error handling: With smaller sets of questions validated at a
- time errors can be identified and addressed in context. This makes it less confusing and
- less overwhelming for users, particularly those with cognitive impairments and those
- using assistive technologies.
-
-
- Progressive disclosure: One idea per page allows the user to focus on
- the current task and move through more information slowly. This can be especially
- beneficial to users who are easily distracted or overwhelmed by too much information.
-
-
-
-
-
Adding complexity
-
- Start by making sure that the content and questions you are asking the user are as simple as possible.
-
-
-
-
As the complexity of your form grows, consider:
-
-
adding simple progress indicators to communicate progress
-
breaking the form into sections on a task list page
-
-
-
-
Form stepper
-
- Avoid using traditional horizontal form steppers for every form. Research has shown that
- horizontal form steppers shown on every page can distract and confuse some users, take up
- too much space, and make it hard to handle branching and conditional sections of a form.
-
-
-
As the complexity of your form grows, consider:
-
-
adding simple text progress indicators to communicate progress
-
follow the one idea per page approach, and break the form into sections as needed using a task list page
-
-
-
-
Pages
-
-
-
-
-
-
- 1. Start page
-
-
- This is the starting point for a citizen to begin your form from within your service or
- from Alberta.ca.
-
-
-
-
-
- 2. Task list page (optional)
-
-
- Outline the entire process for the user and help them through the process by breaking down
- an experience into individual tasks.
-
-
-
-
-
- 3. Question pages
-
-
Ask a user a question or a small set of related questions.
-
-
-
-
- 4. Review page
-
-
Let users check answers before submitting information to a service.
-
-
-
-
- 5. Results page
-
-
- Let users know that they’ve completed a form, application, or task and tell them what to
- do next.
-
-
-
- );
-}
diff --git a/src/routes/patterns/ResultPage.tsx b/src/routes/patterns/ResultPage.tsx
deleted file mode 100644
index 3daa3261c..000000000
--- a/src/routes/patterns/ResultPage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
- GoabTab,
- GoabTabs
-} from "@abgov/react-components";
-import { ComponentContent } from "@components/component-content/ComponentContent";
-import css from "./patterns.module.css";
-import { ResultPageExamples } from "@examples/result-page/ResultPageExamples";
-
-export default function ResultPage() {
- return (
- <>
-
Result page
-
- Let users know that they’ve completed a form, application, or task and tell them what to do next.
-
-
-
-
-
-
-
-
-
Overview
-
-
-
-
-
When to use a results page
-
Use a results page when a user has submitted a form, application, or task, and there is a result to show them.
-
-
What content to include
-
-
details of what happens next, and when
-
a reference number (if applicable)
-
a link to save a record of the confirmation, for examples as a PDF
-
link to give feedback
-
contact details for the service
-
links to information or services that users are likely to need next
- This is the starting point for a citizen to begin your form from within your service or from
- Alberta.ca.
-
-
-
-
-
-
-
-
-
-
- Overview
-
-
-
-
When to use a start page
-
- A start page is the front door to a government service for a citizen. It is the way
- into the service, how they access the service. Each government service has a start
- page on Alberta.ca. Contact the relevant person at Alberta.ca to make changes to the
- start page for your service.
-
-
- This is the starting point for a citizen to begin your form from within your service
- or from Alberta.ca.
-
-
- Provide the user with any information that is important before starting the form such
- as how long it should take, list documents or information they may need to complete
- the form, if there are any costs involved, or alternative ways to access the service.
-
-
-
A service's start page should
-
-
- give the user just enough information to help them understand what the service does
- and whether it will meet their need
-
-
a service's name should reflects the problem it solves for users
- include a "start button" linking into the service, with text that's consistent with
- the action you're asking users to take — for example, "Start now", "Sign in" or
- "Register or update your details"
-
-
- If relevant let users resume an application they've already started or update their
- details
-
-
- include any other information that most users are likely to need before they start
- using the service online — for example, how much it costs to use the service and
- roughly how long it will take
-
-
- include additional information about the service such as other ways to access the
- service (eg. by telephone or by completing a paper form). This should be included
- after the main call to action to start the digital service.
-
-
-
-
Page content
-
- Consider what is the primary information that the user needs to know before entering
- into the service. Provide that information to the user clearly, and then provide a
- link to start using the service. Provide additional secondary information below the
- call to action.
-
-
-
-
-
-
Overview
-
- What the user needs to know before they enter into the service. A high level description of what the service is and what you can use it to do
-
-
-
Before you begin
-
-
how long it will take
-
what you will need to complete the service
-
-
e.g. specific documents
-
-
other important information
-
-
-
Call to action
-
- Below the primary information, include an obvious call to action to get started with the service.
-
-
-
Other information
-
- Below the call to action, include any additional information as applicable such as customer support, frequently asked questions, or related links.
-
-
-
-
-
- );
-}
diff --git a/src/routes/patterns/TaskListPage.tsx b/src/routes/patterns/TaskListPage.tsx
deleted file mode 100644
index e6a0b9d79..000000000
--- a/src/routes/patterns/TaskListPage.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
- GoabCallout,
- GoabTab,
- GoabTabs
-} from "@abgov/react-components";
-import { ComponentContent } from "@components/component-content/ComponentContent";
-import { TaskListPageExamples } from "@examples/task-list-page/TaskListPageExamples";
-import css from "./patterns.module.css";
-import { Link } from "react-router-dom";
-
-export default function TaskListPage() {
- return (
- <>
-
Task list page
-
- This is the starting point for a citizen to begin your form from within your service or from
- Alberta.ca.
-
-
-
-
-
-
-
-
-
-
- Overview
-
-
-
-
-
When to use a task list page
-
Use a task list page to provide a structure for multiple steps in a service. Show a task list page when a citizen begins a service, and when they return to the service.
-
When using a task list, group related actions into tasks and show the status of the tasks.
-
-
How to define a task
-
The size and complexity of a task is determined by the service and content. A task can be defined as small as a single action, such as: “sign a document”, or “upload a file”, or can be as big as an entire section of a form with multiple question pages and a review page.
-
Use tasks to break down the steps in a service in an understandable way.
-
-
Show status of tasks
-
- Make it clear which tasks a user has completed and which they still need to complete.
-
-
-
-
-
-
-
Suggested statuses
-
- Completed (success), In progress (dark grey), Not started (information), Cannot start yet (light grey)
-
-
- Include a summary above the task list to say how many tasks have been completed. This also makes it clearer to the user that there are still tasks left to complete.
-
-
-
-
- You have completed 0 of 3 sections.
-
-
-
-
-
How is a task list different than a stepper?
-
-
Stepper:
-
-
a visual navigation within a form
-
shown at the top of every page in a form
-
scope: sections of a form
-
-
-
-
Task list:
-
-
can be used to outline more than just sections of a form
-
not shown on every page
-
-
-
-
Completing tasks in order
-
- When possible, allow users to complete tasks in any order. This will help them plan
- their time and complete sections as and when they can.
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
diff --git a/src/routes/foundations/FoundationsLayout.tsx b/src/routes/foundations/FoundationsLayout.tsx
index 2eb804a69..653862cad 100644
--- a/src/routes/foundations/FoundationsLayout.tsx
+++ b/src/routes/foundations/FoundationsLayout.tsx
@@ -1,4 +1,4 @@
-import { GoabSideMenu, GoabSideMenuHeading } from "@abgov/react-components";
+import { GoabSideMenu, GoabSideMenuGroup, GoabSpacer } from "@abgov/react-components";
import { Link, Outlet } from "react-router-dom";
import "./foundations.css";
import { SupportInfo } from "@components/support-info/SupportInfo.tsx";
@@ -8,17 +8,24 @@ export default function GetStartedLayout() {
+ 