From 2785e4fb572dbbecf0b077c1c3bf8ae7fe9f54ef Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Wed, 4 Dec 2024 14:40:31 -0700 Subject: [PATCH 01/13] chore(#2146): tabs - add in contextual example --- src/routes/components/Tabs.tsx | 599 ++++++++++++++++++++++++++++++++- 1 file changed, 597 insertions(+), 2 deletions(-) diff --git a/src/routes/components/Tabs.tsx b/src/routes/components/Tabs.tsx index 84783acf7..7bad1185a 100644 --- a/src/routes/components/Tabs.tsx +++ b/src/routes/components/Tabs.tsx @@ -1,4 +1,4 @@ -import { GoABadge, GoATab, GoATabs } from "@abgov/react-components"; +import { GoABadge, GoATab, GoATabs, GoATable, GoAButton } from "@abgov/react-components"; import { ComponentProperties, ComponentProperty, @@ -104,6 +104,601 @@ export default function TabsPage() { {/*GoATabs Table Properties*/} + + {/*Tabs Examples*/} + + +

Show different views of data in a table

+ + + + + + + + Status + + + Text + + + Number + + + Action + + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + Review pending}> + + + + + Status + + + Text + + + Number + + + Action + + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + Complete}> + + + + + Status + + + Text + + + Number + + + Action + + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + +

Set a specific tab to be active

+ + + + + + + + Status + + + Text + + + Number + + + Action + + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + Review pending}> + + + + + Status + + + Text + + + Number + + + Action + + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + Complete}> + + + + + Status + + + Text + + + Number + + + Action + + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + + Lorem ipsum + + + 1234567890 + + + + Action + + + + + + + + ); -} +} \ No newline at end of file From 29bde92912df33aac95b3ebad93eccdc7459ecd8 Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Tue, 17 Dec 2024 11:52:58 -0700 Subject: [PATCH 02/13] chore(#2125): tooltip - add in contextual example --- src/routes/components/Tooltip.tsx | 172 +++++++++++++++++++++++++++++- 1 file changed, 170 insertions(+), 2 deletions(-) diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index 117a9ca3f..14d0adecd 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -1,6 +1,7 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { ComponentBinding, Sandbox } from "@components/sandbox"; -import { useState } from "react"; +import { ComponentBinding, Sandbox, DesignTokensLanguageContext } from "@components/sandbox"; +import { getCssVarValue } from "../../utils/styling"; +import { useState, useContext } from "react"; import { ComponentProperties, ComponentProperty, @@ -9,11 +10,16 @@ import { import { GoAIcon, GoABadge, + GoABlock, + GoAButtonGroup, + GoAContainer, + GoAIconButton, GoATab, GoATabs, GoATooltip, GoATooltipProps, } from "@abgov/react-components"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; // == Page props == @@ -90,6 +96,17 @@ export default function TEMPLATE_Page() { setComponentProps(props as CastingType); } + const [isCopied, setIsCopied] = useState(false); + const lang = useContext(DesignTokensLanguageContext); + + function copyCode() { + let codeToCopy = lang === "css" ? `--$goa-color-interactive-default` : `$$goa-color-interactive-default`; + navigator.clipboard.writeText(codeToCopy).then(() => { + setIsCopied(true); + setTimeout(() => setIsCopied(false), 1000); + }); + } + return ( <> + + + +

Use a tooltip to show a full date when shortened

+ + +
+ Joan Smith + + 4 hours ago + +
+

Hover on the time it was added to see the full date and time.

+ + `} + /> + Joan Smith 4 hours ago }> +

Hover on the time it was added to see the full date and time.

+ + `} + /> + + Joan Smith + + 4 hours ago + + }> +

Hover on the time it was added to see the full date and time.

+
+
+ +

Show a label on an icon only button

+ + + + + + + + + + + + + + +

Click to copy something to your clipboard

+ + a > span { + margin-top: 5px; + margin-left: 10px; + } + `} + /> + { + setIsCopied(true); + setTimeout(() => setIsCopied(false), 1000); + }); + } + `} + /> + +
+ + + `} + /> + +
+ + + Date: Tue, 17 Dec 2024 14:43:38 -0700 Subject: [PATCH 03/13] chore(#2121): badge - add in contextual examples --- src/examples/badge/BadgeExamples.tsx | 140 +++++++++++++++++++++++++++ src/routes/components/Badge.tsx | 5 +- 2 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 src/examples/badge/BadgeExamples.tsx diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx new file mode 100644 index 000000000..8c511f33e --- /dev/null +++ b/src/examples/badge/BadgeExamples.tsx @@ -0,0 +1,140 @@ +import { GoABadge, GoABlock, GoAContainer, GoAButton, GoATable } from "@abgov/react-components"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { Sandbox } from "@components/sandbox"; + +const noop = () => {}; +export default function CheckboxExamples () { + return ( + <> + {/* Examples*/} + + +

Show status in a table

+ + + + + Status + Name + File number + + + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + + Assign + + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + + Assign + + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + + Assign + + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + + Assign + + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + + Assign + + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + + Assign + + + + + + + +

Show multiple tags together

+ + + + + + + + +

Show a status on a card

+ + + +
Heading
+
+ +
+ Content + + `} + /> + + }> + Content + + `} + /> + + }> + Content + +
+ + ) +} \ No newline at end of file diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx index 62be456b9..c4ed25af6 100644 --- a/src/routes/components/Badge.tsx +++ b/src/routes/components/Badge.tsx @@ -1,12 +1,13 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { GoABadge, GoATab, GoATabs, GoABadgeType, GoABadgeProps } from "@abgov/react-components"; -import { ComponentBinding, Sandbox } from "@components/sandbox"; +import { Sandbox, ComponentBinding } from "@components/sandbox"; import { useState } from "react"; import { ComponentProperties, ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import BadgeExamples from "@examples/badge/BadgeExamples.tsx"; // == Page props == @@ -134,6 +135,8 @@ export default function BadgePage() { + +
Date: Tue, 17 Dec 2024 16:38:25 -0700 Subject: [PATCH 04/13] chore(#2118): callout - add in contextual examples --- src/routes/components/Callout.tsx | 84 ++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 2 deletions(-) diff --git a/src/routes/components/Callout.tsx b/src/routes/components/Callout.tsx index 216545bd3..c79070f02 100644 --- a/src/routes/components/Callout.tsx +++ b/src/routes/components/Callout.tsx @@ -1,11 +1,14 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { GoABadge, - GoATab, - GoATabs, + GoAButton, + GoAButtonGroup, GoACallout, GoACalloutProps, GoACalloutType, + GoASpacer, + GoATab, + GoATabs, } from "@abgov/react-components"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { useState } from "react"; @@ -15,6 +18,7 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; // == Page props == @@ -129,6 +133,8 @@ export default function CalloutPage() { }, ]; + const noop = () => {}; + function onSandboxChange(bindings: ComponentBinding[], props: Record) { setComponentBindings(bindings); setComponentProps(props as CastingType); @@ -155,6 +161,80 @@ export default function CalloutPage() { + + + +

Confirm that an application was submitted

+ + + 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 +

+ + + 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 + +
Date: Wed, 18 Dec 2024 11:13:46 -0700 Subject: [PATCH 05/13] chore(#2118): callout - edit contextual example --- src/routes/components/Callout.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/routes/components/Callout.tsx b/src/routes/components/Callout.tsx index c79070f02..4d777f0d1 100644 --- a/src/routes/components/Callout.tsx +++ b/src/routes/components/Callout.tsx @@ -176,7 +176,7 @@ export default function CalloutPage() { Your application was successful -

You will receive a copy of the confirmation to the email person@email.com

+

You will receive a copy of the confirmation to the email person@email.com

Confirmation number: 1234ABC

@@ -184,12 +184,12 @@ export default function CalloutPage() {

Other information about what was just completed, other tertiary information, and/or contact information. Phone: 780 123 4567 - Email: information@gov.ab.ca + Email: information@gov.ab.ca

- Go to application + Back to dashboard `} /> @@ -213,8 +213,8 @@ export default function CalloutPage() {

- Go to application - Back to dashboard + Go to application + Back to dashboard `} /> @@ -231,8 +231,8 @@ export default function CalloutPage() {

- Go to application - Back to dashboard + Go to application + Back to dashboard
From 62c95de1e8a2dbeba6f90b164ecf5ac032625af3 Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Wed, 18 Dec 2024 11:20:29 -0700 Subject: [PATCH 06/13] chore(#2118): callout - fix error --- src/routes/components/Callout.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/components/Callout.tsx b/src/routes/components/Callout.tsx index 4d777f0d1..2ab6a6930 100644 --- a/src/routes/components/Callout.tsx +++ b/src/routes/components/Callout.tsx @@ -133,8 +133,6 @@ export default function CalloutPage() { }, ]; - const noop = () => {}; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { setComponentBindings(bindings); setComponentProps(props as CastingType); From 5cb07228f256b38af27e91f1b3f58089d31d2d80 Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Wed, 18 Dec 2024 12:02:04 -0700 Subject: [PATCH 07/13] chore(#2125): tooltip - adjust contextual example --- src/routes/components/Tooltip.tsx | 94 +++++++++++++++++++------------ 1 file changed, 57 insertions(+), 37 deletions(-) diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index 14d0adecd..bce3da5cb 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -97,10 +97,9 @@ export default function TEMPLATE_Page() { } const [isCopied, setIsCopied] = useState(false); - const lang = useContext(DesignTokensLanguageContext); function copyCode() { - let codeToCopy = lang === "css" ? `--$goa-color-interactive-default` : `$$goa-color-interactive-default`; + const codeToCopy = "$goa-color-interactive-default"; navigator.clipboard.writeText(codeToCopy).then(() => { setIsCopied(true); setTimeout(() => setIsCopied(false), 1000); @@ -143,7 +142,7 @@ export default function TEMPLATE_Page() {
Joan Smith - 4 hours ago + 4 hours ago

Hover on the time it was added to see the full date and time.

@@ -158,7 +157,18 @@ export default function TEMPLATE_Page() { Joan Smith 4 hours ago }> + heading={ + + Joan Smith + + + 4 hours ago + + + + }>

Hover on the time it was added to see the full date and time.

`} @@ -204,23 +214,49 @@ export default function TEMPLATE_Page() { width: 24px; border-radius: var(--goa-border-radius-m); } + `} + /> + a > span { - margin-top: 5px; - margin-left: 10px; + copyCode() { + const codeToCopy = "$goa-color-interactive-default"; + navigator.clipboard.writeText(codeToCopy).then(() => { + this.isCopied = true; + setTimeout(() => this.isCopied = false, 1000); + }); } `} /> + +
+ + $goa-color-interactive-default + + + + + + `} + /> { setIsCopied(true); setTimeout(() => setIsCopied(false), 1000); @@ -235,20 +271,12 @@ export default function TEMPLATE_Page() { code={`
- + + $goa-color-interactive-default + + + + `} /> @@ -262,20 +290,12 @@ export default function TEMPLATE_Page() { borderRadius: getCssVarValue('--goa-border-radius-m') }} /> - + + $goa-color-interactive-default + + + + From 244b89dea459d6294230cc25726a6155bd1d51fd Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Wed, 18 Dec 2024 14:56:19 -0700 Subject: [PATCH 08/13] chore(#2125): tooltip - fix errors --- src/routes/components/Tooltip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index bce3da5cb..81800cf94 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -1,7 +1,7 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { ComponentBinding, Sandbox, DesignTokensLanguageContext } from "@components/sandbox"; +import { ComponentBinding, Sandbox } from "@components/sandbox"; import { getCssVarValue } from "../../utils/styling"; -import { useState, useContext } from "react"; +import { useState } from "react"; import { ComponentProperties, ComponentProperty, From 2be5b7362f7d9476fc08d93c78e5da7bc410b93b Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Wed, 18 Dec 2024 16:08:26 -0700 Subject: [PATCH 09/13] chore(#2121): badge - edit contextual examples --- src/examples/badge/BadgeExamples.tsx | 265 ++++++++++++++++++++------- 1 file changed, 203 insertions(+), 62 deletions(-) diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx index 8c511f33e..b886c0f92 100644 --- a/src/examples/badge/BadgeExamples.tsx +++ b/src/examples/badge/BadgeExamples.tsx @@ -1,8 +1,41 @@ -import { GoABadge, GoABlock, GoAContainer, GoAButton, GoATable } from "@abgov/react-components"; +import { GoABadge, GoABadgeType, GoABlock, GoAContainer, GoAButton, GoATable } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { Sandbox } from "@components/sandbox"; const noop = () => {}; +const badgeValues = [ + { + key: 1, + type: "important", + content: "Pending" + }, + { + key: 2, + type: "emergency", + content: "Failed" + }, + { + key: 3, + type: "success", + content: "Complete" + }, + { + key: 4, + type: "information", + content: "In progress" + }, + { + key: 5, + type: "midtone", + content: "Closed" + }, + { + key: 6, + type: "success", + content: "Complete" + } +] + export default function CheckboxExamples () { return ( <> @@ -10,7 +43,157 @@ export default function CheckboxExamples () {

Show status in a table

- + + + + + + + Status + Name + File number + + + + + + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + Assign + + + + + `} + /> + + + + + + + Status + Name + File number + + + + + {badgeValues.map((badge) => ( + + + + + + Lorem ipsum dolor sit amet consectetur + + + 1234567890 + + + + Assign + + + + ))} + + + `} + /> @@ -21,66 +204,24 @@ export default function CheckboxExamples () { - - - Lorem ipsum dolor sit amet consectetur. - 1234567890 - - - Assign - - - - - - Lorem ipsum dolor sit amet consectetur. - 1234567890 - - - Assign - - - - - - Lorem ipsum dolor sit amet consectetur. - 1234567890 - - - Assign - - - - - - Lorem ipsum dolor sit amet consectetur. - 1234567890 - - - Assign - - - - - - Lorem ipsum dolor sit amet consectetur. - 1234567890 - - - Assign - - - - - - Lorem ipsum dolor sit amet consectetur. - 1234567890 - - - Assign - - - + {badgeValues.map((badge) => ( + + + + + + Lorem ipsum dolor sit amet consectetur + + + 1234567890 + + + + Assign + + + + ))} From 625b141cc8e62214182422a28170c616a9af71ea Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Thu, 19 Dec 2024 12:05:18 -0700 Subject: [PATCH 10/13] chore(#2146): tabs - modify contextual examples --- src/routes/components/Tabs.tsx | 1064 ++++++++++++++++---------------- 1 file changed, 537 insertions(+), 527 deletions(-) diff --git a/src/routes/components/Tabs.tsx b/src/routes/components/Tabs.tsx index 7bad1185a..c470bc4da 100644 --- a/src/routes/components/Tabs.tsx +++ b/src/routes/components/Tabs.tsx @@ -50,7 +50,8 @@ export default function TabsPage() { }, ]; const noop = () => {}; - + const review = [0, 1, 2, 3]; + const complete = [0, 1]; return ( <> @@ -109,123 +110,249 @@ export default function TabsPage() {

Show different views of data in a table

- - + + + + +
All
+ + + + Status + Text + Number + Action + + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + + + + Lorem Ipsum + 1234567890 + + Action + + + + +
+ +
Review pending
+ + + + Status + Text + Number + Action + + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + +
+ +
Complete
+ + + + Status + Text + Number + Action + + + + + + + + Lorem Ipsum + 1234567890 + + Action + + + + +
+ + `} + /> + + + + + + + + + Status + Text + Number + Action + + + + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + + + + Review pending}> + + + + Status + Text + Number + Action + + + + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + + + + Complete}> + + + + Status + Text + Number + Action + + + + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + + + +
+ `} + /> + + - - Status - - - Text - - - Number - - - Action - + Status + Text + Number + Action - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} @@ -233,85 +360,25 @@ export default function TabsPage() { - - Status - - - Text - - - Number - - - Action - + Status + Text + Number + Action - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} @@ -319,85 +386,25 @@ export default function TabsPage() { - - Status - - - Text - - - Number - - - Action - + Status + Text + Number + Action - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} @@ -405,123 +412,246 @@ export default function TabsPage() {

Set a specific tab to be active

- - + + + +
All
+ + + + Status + Text + Number + Action + + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + + + + Lorem Ipsum + 1234567890 + + Action + + + + +
+ +
Review pending
+ + + + Status + Text + Number + Action + + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + +
+ +
Complete
+ + + + Status + Text + Number + Action + + + + + + + + Lorem Ipsum + 1234567890 + + Action + + + + +
+ + `} + /> + + + + + + + + + Status + Text + Number + Action + + + + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + + + + Review pending}> + + + + Status + Text + Number + Action + + + + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + + + + Complete}> + + + + Status + Text + Number + Action + + + + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + + + +
+ `} + /> + + - - - Status - - - Text - - - Number - - - Action - - + Status + Text + Number + Action - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} @@ -529,85 +659,25 @@ export default function TabsPage() { - - Status - - - Text - - - Number - - - Action - + Status + Text + Number + Action - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - + {review.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} @@ -615,85 +685,25 @@ export default function TabsPage() { - - Status - - - Text - - - Number - - - Action - + Status + Text + Number + Action - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - - - - - - - Lorem ipsum - - - 1234567890 - - - - Action - - - + {complete.map((i) => ( + + + + + Lorem Ipsum + 1234567890 + + Action + + + ))} From 85de7dd7892c4e45b47b0b114643d3717cff2a01 Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Mon, 13 Jan 2025 13:45:26 -0700 Subject: [PATCH 11/13] chore(#2146): tabs - modify contextual examples --- src/routes/components/Tabs.tsx | 38 ++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/routes/components/Tabs.tsx b/src/routes/components/Tabs.tsx index c470bc4da..cfe96d05c 100644 --- a/src/routes/components/Tabs.tsx +++ b/src/routes/components/Tabs.tsx @@ -125,7 +125,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -160,7 +160,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -185,7 +185,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -229,7 +229,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -267,7 +267,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -293,7 +293,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -324,7 +324,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -362,7 +362,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -388,7 +388,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -426,7 +426,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -461,7 +461,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -486,7 +486,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -530,7 +530,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -568,7 +568,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -594,7 +594,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -622,10 +622,12 @@ export default function TabsPage() { + Status Text - Number + Number Action + {review.map((i) => ( @@ -661,7 +663,7 @@ export default function TabsPage() { Status Text - Number + Number Action @@ -687,7 +689,7 @@ export default function TabsPage() { Status Text - Number + Number Action From 8cd8230ab581cabeb07cc69d4ac8329cc434c673 Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Wed, 15 Jan 2025 11:43:41 -0700 Subject: [PATCH 12/13] chore: update links in the User Experience Guidelines page --- .../get-started/UserExperienceGuidelines.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/routes/get-started/UserExperienceGuidelines.tsx b/src/routes/get-started/UserExperienceGuidelines.tsx index 69245b7a4..9eace6312 100644 --- a/src/routes/get-started/UserExperienceGuidelines.tsx +++ b/src/routes/get-started/UserExperienceGuidelines.tsx @@ -17,19 +17,22 @@ export default function UserExperienceGuidelinesPage() {
  • Repeated test cycles as products mature and user needs change over time.
  • Testing of complete services end-to-end, not just technology in isolation.
  • - +

    For more details on the process of usability testing, refer to our  - - usability field guide. - + + usability field guide + .

    For more details on the process of assessing compliance to each guideline, refer to our  - - Heuristic Worksheet & UX Review Process. - + + User Experience Guidelines + and  + + User Experience Worksheet + .

    Guidelines:

    From fdac991a2b38b66cd1c5822e8d41192ae8a6d41f Mon Sep 17 00:00:00 2001 From: miguel-soco_goa Date: Wed, 15 Jan 2025 13:27:12 -0700 Subject: [PATCH 13/13] chore: adjustment of content on UX Guidelines page --- .../get-started/UserExperienceGuidelines.tsx | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/routes/get-started/UserExperienceGuidelines.tsx b/src/routes/get-started/UserExperienceGuidelines.tsx index 9eace6312..0efe71c85 100644 --- a/src/routes/get-started/UserExperienceGuidelines.tsx +++ b/src/routes/get-started/UserExperienceGuidelines.tsx @@ -2,29 +2,18 @@ export default function UserExperienceGuidelinesPage() { return ( <>

    User experience guidelines

    -

    Digital products built for the Government of Alberta should look to comply with these guidelines to ensure a quality user experience for Albertans.

    +

    Digital products built for the Government of Alberta should comply with these guidelines to ensure a quality user experience for Albertans.

    - -

    - Usability testing is our preferred method to understand user needs as they relate to each guideline. Suitable usability testing includes: -

      -
    • Users of diverse demographic and behavioural backgrounds that will experience the problem or benefit the product is looking to improve upon.
    • -
    • Users with varying levels of physical and or cognitive limitations, literacy, and technical capability.
    • -
    • A diverse range of devices that reflect our users' preferred choice when interacting with government.
    • -
    • Repeated test cycles as products mature and user needs change over time.
    • -
    • Testing of complete services end-to-end, not just technology in isolation.
    • +
    • User-centered: Designed with a clear understanding of users, their goals, tasks, environments, and context of use, using user-centered design methods.
    • +
    • Usable: Interfaces will be easy to use, enabling users to find the information they need and complete tasks successfully.
    • +
    • Accessible: Digital products will be inclusive, ensuring usability for everyone, regardless of physical or cognitive ability.
    • +
    • Trustworthy: Experiences will feel familiar and recognizable as a Government of Alberta product, ensuring users' security and privacy.
    • +
    • Modern: Digital experiences will meet present-day user expectations and preferences for aesthetics and interaction.
    -

    - For more details on the process of usability testing, refer to our  - - usability field guide - . -

    -

    For more details on the process of assessing compliance to each guideline, refer to our  @@ -35,15 +24,26 @@ export default function UserExperienceGuidelinesPage() { .

    -

    Guidelines:

    +

    Usability testing

    -
      -
    1. Usable: Using human-centered design to understand users’ context of use, goals, tasks, and environments.
    2. -
    3. Accessible: Digital products will be usable for the broadest range of intended users, regardless of physical or cognitive limitations, literacy level, or technical capability.
    4. -
    5. Understandable: Digital products will be understood by the broadest range of intended users by presenting information in plain language, and reducing cognitive load when it comes to understanding the system and making decisions.
    6. -
    7. Compliant: Digital products will align as much as possible to organizational policies such as brand, information management, cyber security, and other Government of Alberta recommended practices.
    8. -
    9. Iterative: Products are continuously tested, resourced, and improved upon with user input and usage data to ensure lasting effectiveness, efficiency, and usability.
    10. -
    +

    Usability testing is our preferred method to understand user needs as they relate to each guideline.

    +

    Suitable usability testing includes:

    + +
      +
    • Diverse user group: Real users from different demographic, behavioural backgrounds, and geographical regions within Alberta that will experience the problem or benefit of the product.
    • +
    • Inclusive testing: Users with various physical and/or cognitive abilities, literacy levels, and tech savviness.
    • +
    • Device variety: A diverse range of devices that reflect users' preferred choice when interacting with government services.
    • +
    • Tasks: Activities that cover tasks and service process from end-to-end.
    • +
    + +

    Frequent usability testing should be conducted to maintain product usability, effectiveness and alignment to the user needs as they evolve over time.

    + +

    + For guidance on the process of usability testing, refer to our  + + usability field guide + . +