diff --git a/src/routes/components/Icons.tsx b/src/routes/components/Icons.tsx
index a921d4195..1c83db032 100644
--- a/src/routes/components/Icons.tsx
+++ b/src/routes/components/Icons.tsx
@@ -304,9 +304,9 @@ export default function IconsPage() {
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.
+ Contribute
-
- Add to the components or patterns in the design system
-
- Did you know…
-
+
For something to be added or changed in the design system, it needs to be:
+For a new component or pattern to be published, a given solution has to be:
+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.
-
+
- Angular wrappers
+
+
+
*.spec.ts
@@ -219,7 +229,7 @@ export default function ContributePage() {
All unit tests must be written in Svelte.
+
+
- Ready to update to the latest version, visit our update guide -
+- First, check the design system backlog to see if someone else has already identified a similar need or idea.
-
+
+
- Book time with us in Design system Drop-in hours -
-- 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{" "}
+
+ 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.
-
Work that is currently in progress.
-Work that we have a clear definition around, discovery is well underway, or we have moved - to the design phase.
-Work that is currently in the early phases of discovery and may see substantial changes - as the work becomes more defined.
-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.
-
+
Usability testing is our preferred method to understand user needs as they relate to each guideline.
-Suitable usability testing includes:
-Frequent usability testing should be conducted to maintain product usability, effectiveness and alignment to the user needs as they evolve over time.
+
+
+
The tools below will set you up to access the most up-to-date designs and standards:
++
+
+ +
+
- eg. “The colour is:
- --goa-color-info-default, the spacing is: --goa-spacing-m".
-
--goa-color-info-default --goa-spacing-m
+ All of the components in the design system are available in Figma and in code.
-+
+
+
+
+
Follow these steps when you encounter issues with our design system components. This process helps isolate problems, streamlines investigation, and speeds up resolution.
+This process is for Angular or React users only.
- -Ensure you are using the latest version of:
-If not, upgrade and retest. If yes, proceed to step 2.
+Use Angular or React product templates from the design system to isolate and verify the bug:
+If the issue is replicable:
+Following these steps will help to ensure efficient investigation and quicker resolution of design system component issues.
- +
+
The design system consists of:
+
+
+
+
+
+
+
+
This is a demo application to see and interact with the design system components.
+This is the web component library and utilizes Angular's web component integration.
-+
This library contains react components from the Government of Alberta.
+To use the templates, follow these steps:
+
+
+
+
+
+
Angular is the most used web application framework in this organization.
+
+
Angular applications will need to use our web components and Angular components.
+ ++
React is the 2nd most used web application framework in this organization.
+
+
+
+
- You can use VS Code's autocomplete suggestions for design system components and design - tokens. -
+
+
+ .vscode/settings.json:
-
.vscode/settings.json:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 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
+
+
+
+