From a9913dd8e9087b49133645f1565fd9965ba78382 Mon Sep 17 00:00:00 2001 From: Thomas Jeffery Date: Tue, 20 May 2025 17:19:03 -0600 Subject: [PATCH 1/4] feat(#2487): update roadmap website content --- src/routes/get-started/Roadmap.tsx | 288 ++++++++++++++++++----------- 1 file changed, 184 insertions(+), 104 deletions(-) diff --git a/src/routes/get-started/Roadmap.tsx b/src/routes/get-started/Roadmap.tsx index 8ca222d37..4524f230c 100644 --- a/src/routes/get-started/Roadmap.tsx +++ b/src/routes/get-started/Roadmap.tsx @@ -1,122 +1,202 @@ import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabCallout, GoabDivider, GoabText } from "@abgov/react-components"; export default function RoadmapPage() { return ( -

Roadmap

-

- A high level summary of the work the design system team plans to complete in 2024. For more - information on the latest releases, visit the{" "} + Roadmap + + + A high-level summary of the work the design system team plans to focus on in 2025. Some initiatives span + multiple phases, meaning they will be continuously worked on across the year. + + + For more information on the latest + releases, visit the + {" "} release notes - -

+
-

- Please note the roadmap is subject to changes as we learn more information. We will - communicate any updates on the direction of the design system so that product teams can - align, prepare, and strategize their work as applicable. -

-

- See our{" "} + + The roadmap is subject to change as we gather new information. We will communicate updates to ensure product + teams can align, prepare, and strategize their work accordingly. +

+ For more details on our priorities and day-to-day activities, see our{" "} - GitHub design system backlog + design system backlog {" "} - for more details on our priorities and day-to-day activities. -

+ + + +

Ongoing

+ + These initiatives will be continuously worked on, refined, and expanded over the course of the year. + + + Components in context + + Objective: Improve component documentation by providing real-world examples and guidance on how + components function alongside other components and in specific contexts. + + + Benefit: Helps teams understand when and how to use components together, reducing implementation time + and inconsistencies. This ensures more efficient development workflows and stronger alignment across digital + products. + + + Workspace component development + + + Objective: Design and develop new components required to support the workspace pattern. + + + Benefit: Ensures that workspace templates include the necessary foundational components for product + teams to build efficiently. Standardized workspace components reduce implementation effort, improve + maintainability, and accelerate workspace pattern adoption. + + + Expanding design system documentation + + + Objective: Enhance documentation with detailed usage guidelines, examples, and design guidelines for + components and patterns. + + + Benefit: Provides clearer direction for designers and developers, leading to more consistent, + accessible, and comprehensive design system implementation. Well-structured documentation reduces onboarding + time for new teams, improves design integrity, and minimizes implementation errors. + + + Addressing findings from accessibility audit + + + Objective: Resolve accessibility barriers identified in the Code for Canada audit by addressing issues + related to DDD Design System components. + + + Benefit: Improves accessibility and inclusivity across the design system, ensuring a better experience + for users relying on assistive technologies. This initiative will help eliminate at least eight known + accessibility barriers, improving WCAG 2.2 AA compliance. + + +

Now

-

Work that is currently in progress.

-

Citizen-facing form documentation and examples:

-
    -
  • - Objective: To simplify the design and development process by offering - predefined page layouts and comprehensive guidelines on the structure and workflow of - citizen-facing forms. -
    • -
  • - Benefit: Accelerates delivery, ensures consistency, and maintains - high quality across projects. -
    • - -
- -

Angular library wrappers:

-
    -
  • - Objective: To streamline the integration of our components with Angular, - enhancing natural development flows and real-time error checking. -
    • -
  • - Benefit: Increases efficiency and reduces development time, enabling - Angular developers to utilize design system components more effectively. -
    • - -
+ + Work that is currently in progress. + + + Citizen-facing form template + + Objective: Provide a pre-built template and working example for citizen-facing forms, incorporating + best practices for usability and accessibility. + + + Benefit: Reduces setup time, ensures compliance with usability and accessibility standards, and + improves consistency across services. This will enable teams to deploy citizen-facing forms faster while + adhering to government guidelines. + + + Front-end development skill assessment + + + Objective: Assess front-end skills among full-stack developers to identify gaps and training needs. + + + Benefit: Helps determine what training materials and documentation are needed to improve front-end + development outputs. The findings from this research have informed at least three targeted training + initiatives to support developer growth. + + + 'Foundations' content for the design system website + + + Objective: Introduce a 'Foundations' section to the design system website, providing essential guidance + on design principles, accessibility, and visual standards for government digital products. + + + Benefit: Helps teams build modern, consistent, and user-friendly digital experiences by offering clear + direction on fundamental design topics. This section will standardize key design principles across the + organization, reinforcing usability and accessibility best practices. + + +

Next

-

Work that we have a clear definition around, discovery is well underway, or we have moved - to the design phase.

-

Sample citizen-facing form:

-
    -
  • - Objective: To create an implementation of a citizen-facing form through - an end-to-end sample service that integrates all components as they would appear in actual - use. -
    • -
  • - Benefit: Provides a practical example to facilitate the adoption of the - citizen-facing form pattern. -
    • - -
- -

Design documentation enhancement:

-
    -
  • - Objective: To centralize design resources by migrating design and usage - guidelines from Figma to our design system website. -
    • -
  • - Benefit: Improves accessibility of documentation for teams and allows - for the refinement of content based on feedback from earlier iterations. -
    • - -
- -

Future

-

Work that is currently in the early phases of discovery and may see substantial changes - as the work becomes more defined.

-

Continued focus on patterns:

-

Patterns will help drive consistency and quality across digital services. They also - allow teams to get to working software more quickly, leaving more time for content design, - user and stakeholder engagement, and testing.

-

Complex form pattern:

-
    -
  • - Definition: For frequent or expert users, this pattern emphasizes speed - and flexibility, streamlining repeated form interactions. -
    • -
  • - Context: Ideal for scenarios where efficiency and speed are prioritized - over clarity and error prevention. -
    • - -
- -

Case management patterns:

-
    -
  • - Definition: To support professional users in managing, reviewing, and - processing cases within work contexts. -
    • -
  • - Context: Used in services where cases are created, reviewed, actioned, - and processed, supporting "case" workflows. -
    • - -
+ + Work that we have a clear definition around, discovery is underway, or we have moved to the design + phase. + + + Design system evolution + + Objective: Elevate the overall quality and visual appeal of government digital products. + + + Benefit: Delivers more consistent, high-quality services that match the digital standards citizens + expect, improving user trust and engagement. + + + Productivity-focused workspace templates + + + Objective: Launch the first set of ready-to-use workspace templates to streamline interface design for + complex workflows. Additional components and functionality will be introduced throughout the year to enhance + flexibility and meet evolving product team needs. + + + Benefit: Speeds up development by providing well-structured, reusable templates, reducing the need for + extensive customization. These templates will help product teams build scalable digital workspaces more + efficiently, ensuring alignment with government standards. + + + Front-end development training materials + + + Objective: Develop structured front-end development training materials for full-stack developers. + + + Benefit: Improves the quality, consistency, and efficiency of front-end development across teams. + Providing standardized training will reduce implementation errors, increase development velocity, and educate + on accessibility best practices. + + + + +

Later

+ + Work that is currently in the early phases of discovery and may see substantial changes as the work becomes + more defined. + + + Citizen-Facing Form & Workspace Integration Example + + Objective: Develop a reference implementation demonstrating how the “Citizen-facing form” template can + connect seamlessly with the “Workspace” template. + + + Benefit: Helps teams implement the “Citizen-facing form” and “Workspace” combination by providing a + ready-to-use example. Instead of building from scratch, teams can leverage this combination to stand up + government services quickly and efficiently. This will also help ensure design and development consistency + across projects. + + + Integrating common platform services + + + + Objective: Streamline the adoption of “Citizen-facing form” and “Workspace” patterns by integrating + frequently used platform services, such as “File service”, “PDF service”, and “Notification Service.” + + + Benefit: Simplifies development and accelerates time to market while improving maintainability, + scalability, and consistency across government services. This ensures teams can focus on building + context-specific features instead of rebuilding core functionalities. Additionally, aligning with government + platform services improves security and compliance with government standards. + +
From 10edddee8e0156f3a0a4a872acdd85b3d34e8d96 Mon Sep 17 00:00:00 2001 From: Thomas Jeffery Date: Tue, 20 May 2025 17:19:47 -0600 Subject: [PATCH 2/4] Updated Get started docs to use GoabText component --- src/routes/components/Icons.tsx | 2 +- src/routes/get-started/Contribute.tsx | 118 ++++++++++-------- src/routes/get-started/GetStartedLayout.tsx | 11 +- src/routes/get-started/GetStartedOverview.tsx | 9 +- src/routes/get-started/LtsPolicyPage.tsx | 13 +- src/routes/get-started/ReportBug.tsx | 16 ++- src/routes/get-started/RequestFeature.tsx | 44 ++++--- src/routes/get-started/Support.tsx | 9 +- .../get-started/UserExperienceGuidelines.tsx | 31 +++-- .../get-started/designers/UxDesigner.tsx | 91 ++++++++------ .../developers/BugVerification.tsx | 81 +++++++----- .../developers/DevelopersOverview.tsx | 62 ++++----- .../developers/DevelopersSetup.tsx | 66 +++++----- .../developers/DevelopersTechnologies.tsx | 70 ++++++----- .../developers/DevelopersVSCode.tsx | 28 ++--- .../developers/SupportedBrowsers.tsx | 24 ++-- .../developers/upgrade-guide/AngularGuide.tsx | 80 ++++++------ .../upgrade-guide/DevelopersUpgrade.tsx | 40 +++--- .../developers/upgrade-guide/ReactGuide.tsx | 29 ++--- .../qa-testing/QATestingOverview.tsx | 27 ++-- 20 files changed, 477 insertions(+), 374 deletions(-) diff --git a/src/routes/components/Icons.tsx b/src/routes/components/Icons.tsx index a921d4195..a952e07a6 100644 --- a/src/routes/components/Icons.tsx +++ b/src/routes/components/Icons.tsx @@ -304,7 +304,7 @@ export default function IconsPage() { The extended icon set includes the full - {" "} Ionicon library. {" "} diff --git a/src/routes/get-started/Contribute.tsx b/src/routes/get-started/Contribute.tsx index a322f6b49..6db946d4e 100644 --- a/src/routes/get-started/Contribute.tsx +++ b/src/routes/get-started/Contribute.tsx @@ -1,48 +1,55 @@ -import { GoabCallout, GoabContainer, GoabDetails, GoabDivider, GoabSpacer, GoabTable, } from "@abgov/react-components"; +import { + GoabCallout, + GoabContainer, + GoabDetails, + GoabDivider, + GoabSpacer, + GoabTable, + GoabText +} from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; export default function ContributePage() { return ( -

Contribute

-

- Add to the components or patterns in the design system

-

The design system is a shared resource for product teams to use and contribute to. We encourage everyone, regardless of their role, to help improve the design system.

- - - Start by using what's in the design system to design and build services easier - + + Contribute + + + Add to the components or patterns in the design system + + The design system is a shared resource for product teams to use and + contribute to. We encourage everyone, regardless of their role, to help improve the design system. + + Start by using what's in the design system + Contribute - -

- + + View the full governance process in Figma -

+ - - -

Did you know…

-

+ There are open contribution files in Figma for every component and pattern in the design system, including unpublished ideas and experiments. -

- +

Design contribution process

- +
-

+ If a component or pattern doesn’t exist in production or doesn’t meet the needs of your users, please contact the design system team. We’ll discuss the issue to understand it better and decide on the next steps together. -

- -

1. Come talk to us:

+ + 1. Come talk to us: -

Be prepared to:

+ Be prepared to:
  • Describe the component or pattern and its purpose @@ -53,11 +60,13 @@ export default function ContributePage() {
  • Share any options and iterations that were explored with and without the Design System
    • -
+

Contribution criteria

-

2. Your contribution will be evaluated against the following contribution criteria:

-

Proposing a component or pattern

-

For something to be added or changed in the design system, it needs to be:

+ 2. Your contribution will be evaluated against the following + contribution criteria: + Proposing a component or pattern + For something to be added or changed in the design system, it needs to + be: @@ -88,9 +97,9 @@ export default function ContributePage() { - -

Standards for a given solution

-

For a new component or pattern to be published, a given solution has to be:

+ Standards for a given solution + For a new component or pattern to be published, a given solution has to + be: @@ -121,17 +130,20 @@ export default function ContributePage() { - -

3. Once approved, it will be added to the Design System's backlog

+ 3. Once approved, it will be added to the Design System's + backlog
  • - When work starts, we will collaborate with you and your team to ensure the component meets your specific needs. + When work starts, we will collaborate with you and your team to ensure the component meets your specific + needs.
-

4. Contribute code to the component or pattern

+ 4. Contribute code to the component or pattern
  • - To help build or contribute code to the component or pattern in the design system, follow the code contribution process below. + To help build or contribute code to the component or pattern in the design system, follow the code contribution process below.
@@ -139,8 +151,10 @@ export default function ContributePage() {

Code contribution process

-

In order to support all of the development frameworks that service teams use, we build and support a library of web components. Contributing entire components can be challenging and time-consuming, so we recommend and encourage smaller-scale contributions instead.

-

Recommended ways to contribute:

+ In order to support all of the development frameworks that service teams + use, we build and support a library of web components. Contributing entire components can be challenging and + time-consuming, so we recommend and encourage smaller-scale contributions instead. + Recommended ways to contribute:
  • bug fixes
  • documentation updates
    • @@ -155,7 +169,7 @@ export default function ContributePage() { -

    Setup contribution environment

    + Setup contribution environment
    1. Go to ui-components repo and clone the repo @@ -189,26 +203,22 @@ export default function ContributePage() {

    React and Angular wrappers

    - -

    + React wrappers
    - Each folder represents a single component with its associated unit tests and wrapper code -

    - -

    - Angular wrappers
    + + + Angular wrappers
    Each folder represents a single component with its associated unit tests and wrapper code -

    +

    Web Components

    -

    + - Each folder represents a single component with: -

    +
    • Unit tests as *.spec.ts @@ -219,7 +229,7 @@ export default function ContributePage() {

    Testing procedures

    -

    All unit tests must be written in Svelte.

    + All unit tests must be written in Svelte.
    • If you're updating/modifying React and/or Angular wrappers, you will need to write unit tests in @@ -228,10 +238,10 @@ export default function ContributePage() {
    • It would also be recommended to add proper browser testing using jest for React wrappers and Svelte components.
    • Manually test in React and Angular
    -

    + Additionally, one of our developers will manually test the PR to ensure the components' quality and functionality. -

    +

    Submitting your code

    diff --git a/src/routes/get-started/GetStartedLayout.tsx b/src/routes/get-started/GetStartedLayout.tsx index 5265de802..2c88f8d3e 100644 --- a/src/routes/get-started/GetStartedLayout.tsx +++ b/src/routes/get-started/GetStartedLayout.tsx @@ -9,7 +9,10 @@ export default function GetStartedLayout() { Start with the design system - UX Designers + + Overview + User experience guidelines + Overview Setup @@ -20,11 +23,11 @@ export default function GetStartedLayout() { Version update guide QA testing - Long Term Support (LTS) Contribute - Support Roadmap - User experience guidelines + Long Term Support (LTS) + Get support + diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx index bf4641815..e3126d61f 100644 --- a/src/routes/get-started/GetStartedOverview.tsx +++ b/src/routes/get-started/GetStartedOverview.tsx @@ -10,7 +10,7 @@ import { ComponentContent } from "@components/component-content/ComponentContent export default function GetStartedOverviewPage() { return ( - + Starting with the design system @@ -40,10 +40,9 @@ export default function GetStartedOverviewPage() { - Start with the design system. You don't need to reinvent the wheel. The design system is - the floor, not the ceiling. Start with it to save time building the common parts of a - service, so that you can spend time on the unique challenges within your service - context. + Start with the design system to align with standards, reduce duplication, and move faster. It gives you a solid + foundation for the common parts of government services, so your team can focus on solving the specific + challenges of your product. Build on it — don’t build from scratch.

    Why start with the design system?

    diff --git a/src/routes/get-started/LtsPolicyPage.tsx b/src/routes/get-started/LtsPolicyPage.tsx index 321f6dad6..d17a77ad4 100644 --- a/src/routes/get-started/LtsPolicyPage.tsx +++ b/src/routes/get-started/LtsPolicyPage.tsx @@ -4,7 +4,7 @@ import { Link } from "react-router-dom"; export const LtsPolicyPage = () => { return ( <> - Long Term Support (LTS) + Long Term Support (LTS) The Long Term Support (LTS) version will continue to be supported until September 30, 2025. Learn more about what you can expect. @@ -14,17 +14,20 @@ export const LtsPolicyPage = () => { The previous version of the design system v3 (Angular) and v5 (React) is now in Long-Term Support (LTS). Here's what that means: +
    • Bug fixes only: We'll continue fixing critical bugs and regressions.
    • No new features or enhancements: All new development is happening in the latest major version.
    • Same reliable experience: Your project will continue to work as expected.
    +     -

    - Ready to update to the latest version, visit our update guide -

    + + Ready to update to the latest version? Visit our update guide + - + Projects still using LTS will continue to work, but new issues or bugs will not be prioritized. diff --git a/src/routes/get-started/ReportBug.tsx b/src/routes/get-started/ReportBug.tsx index 7c7e4de7f..be995c888 100644 --- a/src/routes/get-started/ReportBug.tsx +++ b/src/routes/get-started/ReportBug.tsx @@ -6,7 +6,7 @@ import { GoabFormItem, GoabInput, GoabRadioItem, - GoabRadioGroup, GoabTextarea + GoabRadioGroup, GoabTextarea, GoabText } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; import { useEffect, useState } from "react"; @@ -230,12 +230,16 @@ export default function ReportBugPage() { return ( Back -

    Report a bug

    -

    + + Report a bug + + Let us know if you find a problem or inconsistency in the design system. Providing complete details in your bug report helps our team understand, prioritize, and fix the issue faster. -

    - +     + +
    • Web Components - { versions["web"] }
    • Angular Components - 3.2.2
      • @@ -292,7 +296,7 @@ export default function ReportBugPage() { handleChange(event.name, event.value) } rows={ 6 } width="90%" /> - Submit bug + Submit bug report ); } else { diff --git a/src/routes/get-started/RequestFeature.tsx b/src/routes/get-started/RequestFeature.tsx index 9b3737ba1..12ea72335 100644 --- a/src/routes/get-started/RequestFeature.tsx +++ b/src/routes/get-started/RequestFeature.tsx @@ -1,35 +1,41 @@ -import { GoabSpacer } from "@abgov/react-components"; +import { GoabText } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; import { Link } from "react-router-dom"; - + export default function RequestFeaturePage() { return ( Back -

      Request a new feature

      -

      Anyone can propose a new component or pattern for the design system.

      - -

      1. Check the design system backlog on Github

      -

      - First, check the design system backlog to see if someone else has already identified a similar need or idea.

      - -

      2. Talk to us

      -

      + + + Request a new feature + + + Anyone can propose a new component or pattern for the design + system. + + + 1. Check the design system backlog on Github + + First, check the design + system backlog to see if someone else has already identified a similar need or idea. + 2. Talk to us + If a component or pattern doesn't exist in production or doesn't meet the needs of your users, contact the design system team. We'll discuss the issue to understand it better and decide on the next steps together. -

      - -

      Get in touch with the design system team:

      -

      - Book time with us in Design system Drop-in hours -

      -

      Be prepared to:

      + + Get in touch with the design system team: + + Book time with us in Design + system Drop-in hours + + Be prepared to:
      • Describe the component or pattern and its purpose
      • Explain your user and service goals
      • Share any options and iterations that were explored with and without the Design System
      - View our contribution process       ); diff --git a/src/routes/get-started/Support.tsx b/src/routes/get-started/Support.tsx index 2f1492b3b..127d7d197 100644 --- a/src/routes/get-started/Support.tsx +++ b/src/routes/get-started/Support.tsx @@ -29,10 +29,13 @@ export default function SupportPage() { return ( -

      Support

      -

      + + Get support + + Get help from our team with using the design system, including components, guidelines, best practices, and accessibility. -

      + +

      Raise an issue diff --git a/src/routes/get-started/UserExperienceGuidelines.tsx b/src/routes/get-started/UserExperienceGuidelines.tsx index 0efe71c85..484c0736f 100644 --- a/src/routes/get-started/UserExperienceGuidelines.tsx +++ b/src/routes/get-started/UserExperienceGuidelines.tsx @@ -1,11 +1,16 @@ +import { GoabText } from "@abgov/react-components"; + export default function UserExperienceGuidelinesPage() { return ( <> -

      User experience guidelines

      -

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

      + Designers + User experience guidelines + Digital products built for the Government of Alberta should comply with these + guidelines to ensure a quality + user experience for Albertans.
      - +
      • 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.
        • @@ -14,7 +19,7 @@ export default function UserExperienceGuidelinesPage() {
      • Modern: Digital experiences will meet present-day user expectations and preferences for aesthetics and interaction.
      -

      + For more details on the process of assessing compliance to each guideline, refer to our  User Experience Guidelines @@ -22,13 +27,14 @@ export default function UserExperienceGuidelinesPage() { User Experience Worksheet . -

      + -

      Usability testing

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

      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.
        • @@ -36,14 +42,15 @@ export default function UserExperienceGuidelinesPage() {
      • 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.

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

      +
      diff --git a/src/routes/get-started/designers/UxDesigner.tsx b/src/routes/get-started/designers/UxDesigner.tsx index 40171d507..09d11c774 100644 --- a/src/routes/get-started/designers/UxDesigner.tsx +++ b/src/routes/get-started/designers/UxDesigner.tsx @@ -1,25 +1,27 @@ import { Link } from "react-router-dom"; import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabCallout } from "@abgov/react-components"; +import { GoabCallout, GoabContainer, GoabDivider, GoabText } from "@abgov/react-components"; export default function UxDesignerPage() { return ( -

      Designers

      -

      - As a designer, you can consume the design system through Figma. Through Figma you can use - tokens, components, and page templates. -

      -

      Overview

      -

      + Designers + Overview + As a designer, you can consume the design system through Figma. Through Figma you + can use tokens, components, and page templates. + + + The design system provides designers with a library of{" "} design tokens,{" "} components, and{" "} - patterns + patterns{" "} in Figma that are also available to developers in code. Start by using the design system components for common parts of your service so that your developers can also use the coded components. -

      +
      1. Start with the design system and validate your design through user testing.
        2. @@ -29,49 +31,60 @@ export default function UxDesignerPage() {
      -

      The tools below will set you up to access the most up-to-date designs and standards:

      + -

      Figma

      -

      +

      Figma

      + The design system tokens, styles, components and page templates are all available to pull into your file in Figma. -

      - When selecting components, prioritize those with a “goa-” prefix in the name such as “goa-input.” These components are available in both design and development, which means that developers can avoid unnecessary custom development. -

      + + View the Figma design system library -

      +       + When + selecting components, prioritize those with a “goa-” prefix in the name such as “goa-input.” These components + are available in both design and development, which means that developers can avoid unnecessary custom + development. -

      Design tokens

      -

      + +

      Design tokens

      + The components and resources in the design system libraries in both Figma and code are built using design tokens. As a designer, you can communicate design decisions using design tokens, which developers can then use in code. -

      -

      + + Save time going back and forth with your developer on hex values and adjusting a few pixels at a time. Instead, reference semantic tokens that the developer can consume. -

      -

      - eg. “The colour is: - --goa-color-info-default, the spacing is: --goa-spacing-m". -

      +       + + + + For example, you can communicate to your developer:
      + The colour is: + --goa-color-info-default
      + The spacing is: --goa-spacing-m +       +       -

      Components

      -

      All of the components in the design system are available in Figma and in code.

      -

      +

      Components

      + All of the components in the design system are available in Figma and in + code. + These design system components have all been designed and coded to meet a{" "} {" "} WCAG 2.1 accessibility standard . -

      -

      + + Avoid detaching components when possible. Instead, use the component's variant options or show and hide layers within the component. If a component is not working as expected, reach out via{" "} @@ -79,14 +92,14 @@ export default function UxDesignerPage() { #design-system-support . -

      -

      + + Make sure to keep your components up-to-date. You may see a notification in the bottom right corner of Figma when an update is available. -

      +       -

      Figma file templates and helper components

      -

      +

      Figma file templates and helper components

      + A{" "} -

      + + In addition to these templates ,{" "} {" "} can help clearly communicate your intent when sharing your design with developers, other designers, and other members of your team. -

      +       ); } diff --git a/src/routes/get-started/developers/BugVerification.tsx b/src/routes/get-started/developers/BugVerification.tsx index 98fb353cf..cbb3ba26a 100644 --- a/src/routes/get-started/developers/BugVerification.tsx +++ b/src/routes/get-started/developers/BugVerification.tsx @@ -1,47 +1,70 @@ import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabCallout, GoabText } from "@abgov/react-components"; export default function BugVerificationPage() { return ( -

      Verify a bug

      -

      How to resolve issues with design system components

      -

      Follow these steps when you encounter issues with our design system components. This process helps isolate problems, streamlines investigation, and speeds up resolution.

      + Developers + Verify a bug + + How to resolve issues with design system components -

      This process is for Angular or React users only.

      - -

      1. Version check

      -

      Ensure you are using the latest version of:

      -
        -
      • Web components
        • -
      • Angular or React
        • -
      + + Follow these steps when you encounter issues with our design system components. This process helps isolate + problems, streamlines investigation, and speeds up resolution. + -

      If not, upgrade and retest. If yes, proceed to step 2.

      + + This process is for Angular or React users only. + -

      2. Test with product templates

      -

      Use Angular or React product templates from the design system to isolate and verify the bug:

      +

      1. Version check

      + + Ensure you are using the latest version of: + +
        +
      • Web components
        • +
      • Angular or React
        • +
      + + If not, upgrade and retest. If yes, proceed to step 2. + +

      2. Test with product templates

      + + Use Angular or React product templates from the design system to isolate and verify the bug: + +       + + +

      3. Recreate the issue

      + +
        +
      • Set up a minimal test environment
        • +
      • Use minimal code required for the example to function
        • +
      • Include only problematic components
        • +
      • Verify if the issue can be replicated
        • +
      +       -

      3. Recreate the issue

      -
        -
      • Set up a minimal test environment
        • -
      • Use minimal code required for the example to function
        • -
      • Include only problematic components
        • -
      • Verify if the issue can be replicated
        • -
      -

      4. Sharing and reporting

      -

      If the issue is replicable:

      +

      4. Sharing and reporting

      + + If the issue is replicable: + - -

      Following these steps will help to ensure efficient investigation and quicker resolution of design system component issues.

      - + + Following these steps will help to ensure efficient investigation and quicker resolution of design system + component issues. + ); } diff --git a/src/routes/get-started/developers/DevelopersOverview.tsx b/src/routes/get-started/developers/DevelopersOverview.tsx index 248a45c23..9ea7b2032 100644 --- a/src/routes/get-started/developers/DevelopersOverview.tsx +++ b/src/routes/get-started/developers/DevelopersOverview.tsx @@ -1,61 +1,59 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { Link } from "react-router-dom"; import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabBlock } from "@abgov/react-components"; +import { GoabBlock, GoabSpacer, GoabText } from "@abgov/react-components"; export default function DevelopersOverviewPage() { return ( -

      Developers

      -

      - As a developer, you can consume the design system using tokens, components, templates, and - the demo application. -

      + Developers + Overview + As a developer, you can consume the design system using tokens, components, + templates, and the demo application. -

      Overview

      -

      + The DDD Design System is built with Web Components. Web Components are technology agnostic. You can choose various front-end frameworks, like Angular, React, or Vue, to use with our web components. All components include sample HTML and only use JavaScript when necessary. -

      + -

      The design system consists of:

      + The design system consists of: Design tokens Components Product templates -

      + Designers also have access to the same resources in Figma. To begin with, they should utilize the components from the design system for common elements of the service. This will save you from having to create everything from scratch. -

      + -

      + These design system components have all been designed and coded to meet a{" "} WCAG 2.1 accessibility standard . -

      + -

      Design tokens

      -

      +

      Design tokens

      + You can access the design tokens as an NPM package here:{" "} npm: @abgov/design-tokens . Incorporate the SCSS or CSS file into your projects and replace hard-coded values with the token variables from the design system. -

      -

      + + Your designers can use and reference these design tokens in their tools to hand off their designs to you. -

      +       -

      Components

      -

      +

      Components

      + Components are reusable parts of the user interface that have been made to support a variety of applications. You can use individual components in many different patterns and contexts. Our components are available in{" "} @@ -71,18 +69,18 @@ export default function DevelopersOverviewPage() { Web Components . -

      +       Read more about design system technologies -

      Visual Studio Code support

      -

      + Visual Studio Code support + In order to use VS Code's{" "} HTML/CSS Custom Data {" "} support to enhance GoA Web Components HTML editing experience, include our html custom data setting found in.vscode/settings.json: -

      +
      -

      Product templates

      -

      + + +

      Product templates

      + To help get teams up and running sooner, this product template has been created for teams to quickly use the ui-components and provide a starting point for building DDD products. The product templates are available in{" "} @@ -110,10 +110,12 @@ export default function DevelopersOverviewPage() { React . -

      +       + +

      Demo application

      -

      Demo application

      -

      This is a demo application to see and interact with the design system components.

      + This is a demo application to see and interact with the design system + components. View demo application diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx index 0dd79df42..550dd864d 100644 --- a/src/routes/get-started/developers/DevelopersSetup.tsx +++ b/src/routes/get-started/developers/DevelopersSetup.tsx @@ -1,4 +1,4 @@ -import { GoabBlock, GoabContainer, GoabDivider } from "@abgov/react-components"; +import { GoabBlock, GoabDivider, GoabText } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import "./Developers.css"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -7,17 +7,17 @@ export default function DevelopersSetupPage() { return (
      -

      Developers

      -

      Setup

      - -

      Once you are setup, you can use the project template to quickly get started.

      - View project templates -       + Developers + Setup + Once you are setup, you can use the project template to quickly get + started.
      View project templates       -

      Angular UI components

      -

      This is the web component library and utilizes Angular's web component integration.

      -

      1. Add Dependencies

      +

      Angular UI components

      + This is the web component library and utilizes Angular's web component + integration. + + 1. Add Dependencies -

      2. Link ionicons in app/index.html Add the following in the head element

      + 2. Link ionicons in app/index.html Add the following in the head + element -

      3. Update src/app/app.module.ts as per the four steps below

      + 3. Update src/app/app.module.ts as per the four steps below -

      4. Add the styles link in the src/styles.css file

      + 4. Add the styles link in the src/styles.css file - + -

      React UI components

      -

      +

      React UI components

      + This library contains React components which wrap the Government of Alberta Web Components. -

      +       -

      1. Add Dependencies

      + 1. Add Dependencies -

      2. Link ionicons in app/index.html Add the following to the head element

      + 2. Link ionicons in app/index.html Add the following to the head + element -

      3. Import the web-component styles in the src/index.css file

      + 3. Import the web-component styles in the src/index.css file - + -

      Web components

      -

      This library contains react components from the Government of Alberta.

      +

      Web components

      + This library contains react components from the Government of + Alberta. -

      1. Add Dependencies

      + 1. Add Dependencies -

      2. Link ionicons in index.html Add the following in the head element

      + 2. Link ionicons in index.html Add the following in the head + element -

      3. Import the web-components into src/main.js:

      + 3. Import the web-components into src/main.js: -

      + 4. Add the styles link in the src/assets/main.css file or wherever your main css file is located: -

      + - + -

      Angular/React templates

      +

      Angular/React templates

      Angular template @@ -157,7 +161,7 @@ export default function DevelopersSetupPage() { -

      To use the templates, follow these steps:

      + To use the templates, follow these steps:
      1. Click the green Use this template button diff --git a/src/routes/get-started/developers/DevelopersTechnologies.tsx b/src/routes/get-started/developers/DevelopersTechnologies.tsx index 99b6d5641..8f73f579f 100644 --- a/src/routes/get-started/developers/DevelopersTechnologies.tsx +++ b/src/routes/get-started/developers/DevelopersTechnologies.tsx @@ -1,24 +1,27 @@ import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabText } from "@abgov/react-components"; export default function DevelopersTechnologiesPage() { return ( -

        Developers

        -

        Design system technologies

        + Developers + Technologies + An overview of the technologies that make up the design system. +
        -

        Web components

        -

        +

        Web components

        + Web Components {" "} is a suite of different technologies allowing you to create reusable custom elements with styling and functionality encapsulated away from the rest of your code. -

        +         -

        Benefits of using web components

        + Benefits of using web components
        • Reuse: A component is made once and can be reused across different pages, @@ -48,29 +51,29 @@ export default function DevelopersTechnologiesPage() {
        -

        Using web components in your project

        -

        + Using web components in your project + Web Components generated from Svelte can be used along side various other front-end frameworks or used with our Angular or React implementations. -

        + -

        Svelte

        -

        +

        Svelte

        + Svelte {" "} is a JavaScript framework that we are using to generate web components. -

        +         -

        Why use Svelte

        -

        + Why use Svelte + We use Svelte to build our web components. Svelte gathers the logic (JavaScript), the structure (HTML), and the style (CSS) in the same file. Then, Svelte is used to build single and reusable components for larger applications written with various front-end frameworks. -

        + -

        Angular

        -

        +

        Angular

        + Angular {" "} @@ -78,35 +81,38 @@ export default function DevelopersTechnologiesPage() { create single-page applications using TypeScript and HTML. It uses HTML to define the UI of the application. It is a declarative and intuitive language with directives like ng-app, ng-model, ng-repeat, and forms control. -

        -

        Angular is the most used web application framework in this organization.

        +         + Angular is the most used web application framework in this + organization. -

        How Web Components and Angular work together

        -

        + How Web Components and Angular work together + Our Angular implementation adds form binding, both Reactive and Template, to our web components. -

        -

        Angular applications will need to use our web components and Angular components.

        + + Angular applications will need to use our web components and Angular + components. -

        React

        -

        +

        React

        + React {" "} is an open-source JavaScript library commonly used to create user interfaces for single-page applications from isolated components. -

        -

        React is the 2nd most used web application framework in this organization.

        +         + React is the 2nd most used web application framework in this + organization. -

        How Web Components and React work together

        -

        + How Web Components and React work together + We use React to create wrappers around our web components. This helps manage events and properties of the web components rather than trying to use our web components by themselves. -

        -

        + + The React wrappers are used inside a React app, which then makes requests back to our web components to create the actual component. -

        +         ); } diff --git a/src/routes/get-started/developers/DevelopersVSCode.tsx b/src/routes/get-started/developers/DevelopersVSCode.tsx index e3d455d4e..e9bc7b727 100644 --- a/src/routes/get-started/developers/DevelopersVSCode.tsx +++ b/src/routes/get-started/developers/DevelopersVSCode.tsx @@ -1,20 +1,20 @@ import { Link } from "react-router-dom"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabText } from "@abgov/react-components"; export default function DevelopersVSCodePage() { return ( -

        Developers

        -

        VS Code

        -

        - You can use VS Code's autocomplete suggestions for design system components and design - tokens. -

        + Developers + VS Code + + You can use VS Code's autocomplete suggestions for design system components and design tokens. + -

        Design tokens autocomplete

        -

        + Design tokens autocomplete + Get code autocomplete suggestions for the goa design tokens. -

        +
        • Automatically works for CSS and Sass files
        • Preview design token values in autocomplete description
          • @@ -22,15 +22,15 @@ export default function DevelopersVSCodePage() {
        • Relevant code completions based on the current line of code
        -

        Components autocomplete

        -

        + Components autocomplete + In order to use VS Code's{" "} HTML/CSS Custom Data {" "} - support to enhance GoA Web Components HTML editing experience, include our html custom data - setting found in .vscode/settings.json: -

        + support to enhance GoA Web Components HTML editing experience, include our html custom data setting found + in .vscode/settings.json: +         ); } diff --git a/src/routes/get-started/developers/SupportedBrowsers.tsx b/src/routes/get-started/developers/SupportedBrowsers.tsx index 63d7ebf27..618f578f1 100644 --- a/src/routes/get-started/developers/SupportedBrowsers.tsx +++ b/src/routes/get-started/developers/SupportedBrowsers.tsx @@ -1,14 +1,14 @@ import { GoabCheckbox, GoabContainer, GoabTable } from "@abgov/react-components"; +import { GoabText } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; export default function SupportedBrowsersPage() { return ( -

        Developers

        -

        Supported browsers

        -

        - The design system components are tested on the following browsers and devices: -

        + Developers + Supported browsers + The design system components are tested on the following browsers and devices: + @@ -81,14 +81,16 @@ export default function SupportedBrowsersPage() {
        - -

        Representative mobile OS used in testing

        -

        + + + Representative mobile OS used in testing + + Android OS: 10+ -

        -

        + + iOS: 15+ -

        +
        diff --git a/src/routes/get-started/developers/upgrade-guide/AngularGuide.tsx b/src/routes/get-started/developers/upgrade-guide/AngularGuide.tsx index 4aca0ba4c..26028efb3 100644 --- a/src/routes/get-started/developers/upgrade-guide/AngularGuide.tsx +++ b/src/routes/get-started/developers/upgrade-guide/AngularGuide.tsx @@ -1,4 +1,4 @@ -import { GoabCallout, GoabTable } from "@abgov/react-components"; +import { GoabCallout, GoabTable, GoabText } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { InlineCode } from "@components/inline-code/InlineCode.tsx"; import { components } from "@routes/get-started/developers/upgrade-guide/components.ts"; @@ -11,13 +11,11 @@ export const AngularGuide = () => { return ( <>

        Migrating an Angular app

        - -

        + @abgov/angular-components supports only Angular v16 and above. -

        -

        1. Update dependencies

        + 1. Update dependencies { `} /> -

        2. Update angular component dependencies and import paths

        + 2. Update angular component dependencies and import paths { `} /> -

        + 3. Rename all components name from goa-name to{" "} goab-name in HTML templates -

        -

        + + In v4, all Angular component names have been updated from goa- to{" "} goab-, with the following exceptions: -

        +
        • TwoColumnLayout: remains goa-two-column-layout @@ -73,21 +71,21 @@ export const AngularGuide = () => { goa-three-column-layout
        -

        + As a result, imports and dependencies for pages using these components will not need to be changed. -

        -

        Special Case:

        -

        + + Special Case: + The goa-one-column-layout component has been renamed to{" "} goab-column-layout -

        -

        Next Steps:

        -

        + + Next Steps: + After updating your packages and imports, perform a find/replace in your code editor to change goa- to goab- for all component names. For example: -

        + { `} /> -

        4. Update component margin properties

        -

        + 4. Update component margin properties + The margin properties for components have been standardized. Previously, margin values in Angular components were defined as string. Now, these margin properties are categorized under Spacing, ensuring consistency: -

        + Property Name @@ -163,29 +161,29 @@ export const AngularGuide = () => { -

        5. Update component properties

        -

        + 5. Update component properties + In version 4, we have updated all Angular component properties from lowercase to camelCase. For example, a property previously named headingsize is now{" "} headingSize. -

        -

        + + Additionally, in version 3, our Angular component properties were defined using basic types like string or boolean. In version 4, we introduced custom types for these properties and function arguments to ensure that the type checker validates the data structure specific to our components. You can find these changes detailed in the tables below: -

        + - Component Name + Component v3 v4 {angularComponents.map((component, index) => ( - {component.name} + {component.name}
          {component.angular?.map((prop, propsIndex) => ( @@ -212,11 +210,11 @@ export const AngularGuide = () => { -

          6. Update component slot content using Angular's ng-template

          -

          + 6. Update component slot content using Angular's ng-template + The most common manual update that teams will need to make involves adjusting slot content that uses slot="name" to reference a property. For example, -

          + { />
          -

          + Components with slot replaced by Angular{" "} ng-template references: -

          + - Component Name + Component v3 v4 {componentsWithTemplateRef.map((component, index) => ( - {component.name} + {component.name}
            {component.angular?.map( @@ -289,15 +287,15 @@ export const AngularGuide = () => {
          -

          + 7. Remove goaValue and goaChecked from the Angular input components -

          -

          + + In v4, the goaValue and goaChecked{" "} directives can be removed from our input components when using Angular Forms. This applies to the following components: -

          +
          • Checkbox
          • Date picker
            • @@ -307,11 +305,11 @@ export const AngularGuide = () => {
          • Textarea
          -

          + To handle user input in your app, you can use Angular's reactive forms, template-driven forms, or simply add an event handler. Below are examples of how to use our Angular checkbox component in these three different approaches: -

          +
          1. Reactive
          -

          Version update guide

          -

          Step-by-step guide to updating your code from DDD Design System v3 to v4 (Angular) and v5 to v6 (React)

          -

          + + Developers + Version update guide + Step-by-step guide to updating your code from DDD Design System v3 to v4 + (Angular) and v5 to v6 (React) + + The update introduces the following key improvements: -

          + + +
          • Type-ahead support for Angular components: Get coding faster with smart suggestions directly in your IDE.
          • New features and properties added across existing components: More flexibility, and improved accessibility.
          • New components available: Build more complex interfaces with less custom code.
          • Improved error checking during builds: Catch issues earlier for a smoother development experience.
          -

          + + This guide will help you update your project to DDD Design System v4 (Angular) and v6 (React). -

          +           - + The component is stable and supported in the latest major release. However, we recommend using the public form pattern for a more modular, flexible, and accessible approach. -

          Major differences between current and new version

          -

          - One of the most significant changes in v4 (Angular) and v6 (React) is the renaming of component prefixes to align - better across frameworks. In React, the prefix changes from GoA{" "} - to Goab, while in Angular, it changes from{" "} - goa- to goab-. See the following - examples: -

          + + Major differences between current and new version + + + One of the most significant changes in v4 (Angular) and v6 (React) is the renaming of component prefixes to + align better across frameworks. In React, the prefix changes + from GoA to Goab, while in Angular, it changes + from goa- to goab-. See the following examples: +

          React

            diff --git a/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx b/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx index eb6887ad6..7d8e35bc5 100644 --- a/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx +++ b/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx @@ -1,3 +1,4 @@ +import { GoabText } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { GoabTable } from "@abgov/react-components"; import { InlineCode } from "@components/inline-code/InlineCode.tsx"; @@ -8,12 +9,12 @@ export const ReactGuide = () => { return ( <>

            Migrating a React app

            -

            + The React components for the DDD Design System are still located in the{" "} @abgov/react-components package. -

            + -

            1. Update dependencies

            + 1. Update dependencies { `} /> -

            + 2. Rename all components name from GoAName to{" "} GoabName -

            -

            + + After updating your packages, use your preferred code editor to perform a find/replace operation. Replace the prefix GoA-- with{" "} Goab-- for all component names. For example: -

            + { `} /> -

            3. Update components' props that have changed

            -

            + 3. Update components' props that have changed + In v6, some of our properties have changed, go through the following table and make changes as necessary in your codebase. -

            - + + - Component Name - v5(lts) + Component + v5(LTS) v6(latest) {componentNames.map((component, index) => ( - {component.name} + {component.name}
              {component.react?.map((prop, propsIndex) => ( diff --git a/src/routes/get-started/qa-testing/QATestingOverview.tsx b/src/routes/get-started/qa-testing/QATestingOverview.tsx index 2ff59876d..33d4d5b3f 100644 --- a/src/routes/get-started/qa-testing/QATestingOverview.tsx +++ b/src/routes/get-started/qa-testing/QATestingOverview.tsx @@ -1,16 +1,22 @@ import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabText } from "@abgov/react-components"; export default function QATestingOverviewPage() { return ( -

              QA Testing

              -

              - This document outlines the testing procedure for the DDD design system. The procedure + + + QA Testing + + + Outline of the testing procedure for the DDD design system. The procedure ensures that all components function correctly and integrate seamlessly within DDD products. -

              + +

              Testing Objectives

              +
              • Ensure that the coded components match the design specification.
              • Ensure compatibility with both React and Angular frameworks.
                • @@ -18,22 +24,23 @@ export default function QATestingOverviewPage() {
              • Validate the mobile version of the components.
              • Ensure the documentation on the design system website is accurate.
              +

              Test Cases

              -

              Component Testing

              + Component Testing
              • Verify that the rendered component is true to the design and styling guidelines.
              • Verify the component reflects the configured properties.
              • Verify the corresponding event is fired when interacting with the component.
              -

              Responsiveness Testing

              + Responsiveness Testing
              • Test components on different screen sizes (mobile, tablet, desktop).
              • Use browser developer tools to simulate different devices.
              -

              Accessibility Testing

              + Accessibility Testing
              • Run Lighthouse audits to check accessibility scores.
              • Ensure all components have appropriate ARIA labels and roles.
                • @@ -41,14 +48,15 @@ export default function QATestingOverviewPage() {
              • Test with NVDA for screen reader compatibility.
              -

              Cross-browser Testing

              + Cross-browser Testing
              • Test components on the latest versions of Chrome, Firefox, Safari, and Edge.
              • Test for mobile compatibility using Chrome's "device mode".
              • Ensure consistency in appearance and behaviour across browsers.
              -

              Bug Testing

              + Bug Testing +
              • Once the issue is fixed, reproduce it with the main branch, then verify the fix on the @@ -56,6 +64,7 @@ export default function QATestingOverviewPage() {
              • Thoroughly test the component in each aspect.
              +

              Reporting

                From 3ef9fa6e4b9138be844128705ba9f17f4117880d Mon Sep 17 00:00:00 2001 From: Thomas Jeffery Date: Tue, 20 May 2025 17:21:56 -0600 Subject: [PATCH 3/4] Updated Get started docs to use GoabText component --- src/routes/get-started/developers/DevelopersSetup.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx index 550dd864d..71616c4f6 100644 --- a/src/routes/get-started/developers/DevelopersSetup.tsx +++ b/src/routes/get-started/developers/DevelopersSetup.tsx @@ -9,8 +9,9 @@ export default function DevelopersSetupPage() { Developers Setup - Once you are setup, you can use the project template to quickly get - started.
                View project templates                 + Once you are setup, you can use the project template to quickly get + started. + View project templates

                Angular UI components

                From 951867395bf4bd3230a85e60f9c66cd537d7658b Mon Sep 17 00:00:00 2001 From: Thomas Jeffery Date: Thu, 22 May 2025 11:45:10 -0600 Subject: [PATCH 4/4] updated from review --- src/routes/components/Icons.tsx | 2 +- src/routes/get-started/developers/SupportedBrowsers.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/components/Icons.tsx b/src/routes/components/Icons.tsx index a952e07a6..1c83db032 100644 --- a/src/routes/components/Icons.tsx +++ b/src/routes/components/Icons.tsx @@ -306,7 +306,7 @@ export default function IconsPage() { The extended icon set includes the full {" "} - Ionicon library. + Ionicons library. {" "} When you need additional icons outside of the core icon set, use these icons to maintain a consistent visual language. diff --git a/src/routes/get-started/developers/SupportedBrowsers.tsx b/src/routes/get-started/developers/SupportedBrowsers.tsx index 618f578f1..a1d66debd 100644 --- a/src/routes/get-started/developers/SupportedBrowsers.tsx +++ b/src/routes/get-started/developers/SupportedBrowsers.tsx @@ -7,7 +7,7 @@ export default function SupportedBrowsersPage() { Developers Supported browsers - The design system components are tested on the following browsers and devices: + The design system components are tested on the following browsers and devices: