diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx new file mode 100644 index 000000000..b886c0f92 --- /dev/null +++ b/src/examples/badge/BadgeExamples.tsx @@ -0,0 +1,281 @@ +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 ( + <> + {/* Examples*/} + + +

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 + + + + ))} + + + `} + /> + + + + Status + Name + File number + + + + + {badgeValues.map((badge) => ( + + + + + + 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() { + + + + + +

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 +

+ + + 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 + + `} + /> +

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 + + {}; - + const review = [0, 1, 2, 3]; + const complete = [0, 1]; return ( <> @@ -104,6 +105,612 @@ export default function TabsPage() { {/*GoATabs Table Properties*/} + + {/*Tabs Examples*/} + + +

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 + + + + {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 + + + ))} + + + + + + +

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 + + + + {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 + + + ))} + + + + + ); -} +} \ No newline at end of file diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index 117a9ca3f..81800cf94 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -1,5 +1,6 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { ComponentBinding, Sandbox } from "@components/sandbox"; +import { getCssVarValue } from "../../utils/styling"; import { useState } from "react"; import { ComponentProperties, @@ -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,16 @@ export default function TEMPLATE_Page() { setComponentProps(props as CastingType); } + const [isCopied, setIsCopied] = useState(false); + + function copyCode() { + const codeToCopy = "$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

+ + + { + this.isCopied = true; + setTimeout(() => this.isCopied = false, 1000); + }); + } + `} + /> + +
+ + $goa-color-interactive-default + + + + + + `} + /> + { + setIsCopied(true); + setTimeout(() => setIsCopied(false), 1000); + }); + } + `} + /> + +
+ + $goa-color-interactive-default + + + + + + `} + /> + +
+ + $goa-color-interactive-default + + + + + +

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  - - Heuristic Worksheet & UX Review Process. - + + User Experience Guidelines + and  + + User Experience Worksheet + .

-

Guidelines:

+

Usability testing

-
    -
  1. Usable: Using human-centered design to understand users’ context of use, goals, tasks, and environments.
    2. -
  2. Accessible: Digital products will be usable for the broadest range of intended users, regardless of physical or cognitive limitations, literacy level, or technical capability.
    3. -
  3. 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.
    4. -
  4. 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.
    5. -
  5. Iterative: Products are continuously tested, resourced, and improved upon with user input and usage data to ensure lasting effectiveness, efficiency, and usability.
    6. -
+

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