diff --git a/public/images/governance-process.png b/public/images/governance-process.png new file mode 100644 index 000000000..d1a4b976e Binary files /dev/null and b/public/images/governance-process.png differ diff --git a/src/components/card-lite/CardLite.css b/src/components/card-lite/CardLite.css index a2b10e0f6..bcb906e8b 100644 --- a/src/components/card-lite/CardLite.css +++ b/src/components/card-lite/CardLite.css @@ -1,23 +1,25 @@ -.card-lite .title { - font: var(--goa-typography-heading-l); - margin-bottom: var(--goa-space-m); +.card-lite { + text-decoration: none; } -.card-lite .description { - font-size: var(--goa-font-size-4); - margin-bottom: var(--goa-space-xs); +.card-heading { + color: black; + display: inline-block; } -.card-content a { - font-size: var(--goa-font-size-5); +.card-description { + color: black; + display: block; } -.card-lite .link { - font-size: var(--goa-font-size-5); +a:hover .card-heading { + color: var(--goa-color-interactive-hover); + text-decoration: underline; } -@media screen and (min-width: 1231px) { - .card-lite { - max-width: 300px; - } +.card-lite:focus-visible { + outline: 3px solid var(--goa-color-interactive-focus); + outline-offset: 4px; + border-radius: 4px; } + diff --git a/src/components/card-lite/CardLite.tsx b/src/components/card-lite/CardLite.tsx index da30f5bb8..2a465ae13 100644 --- a/src/components/card-lite/CardLite.tsx +++ b/src/components/card-lite/CardLite.tsx @@ -1,6 +1,6 @@ -import { ReactNode } from "react"; -import { Link } from "react-router-dom"; import "./CardLite.css"; +import { ReactNode } from "react"; +import { GoabLink, GoabText } from "@abgov/react-components"; export interface Props { title: string; @@ -11,13 +11,17 @@ export interface Props { export function CardLite(props: Props) { return ( -
-
{props.title}
-
{props.description}
-
- {props.linkDisplay} + +
+ + {props.title} + + +
{props.description}
+ + {props.linkDisplay}
-
+ ); } diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx index 2adc272e3..bf4641815 100644 --- a/src/routes/get-started/GetStartedOverview.tsx +++ b/src/routes/get-started/GetStartedOverview.tsx @@ -1,65 +1,67 @@ -import { GoabButton, GoabButtonGroup, GoabContainer, GoabGrid } from "@abgov/react-components"; -import { useNavigate } from "react-router-dom"; +import { + GoabBlock, + GoabCallout, + GoabContainer, + GoabLink, + GoabText +} from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; export default function GetStartedOverviewPage() { - const navigate = useNavigate(); return ( - -

Starting with the design system

-

- Start with the design system to build on the research and experience of other service - teams and avoid repeating work that's already been done. -

+ + + Starting with the design system + + + Start with the design system to build on the research and experience of other service teams and avoid + repeating work that's already been done. + -
- -

Using the design system by role:

- - navigate("/get-started/designers")}> - Designers - - navigate("/get-started/developers")}> - Developers - - navigate("/get-started/qa-testing")}> - QA Testers - - - + + + Design system by role: + + + + Designer + + + + + Developer + + + + + QA Tester + + + - + 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. - -

The value of starting with the design system components

-

- The design system is your foundation for success and an incredible time-saver, allowing - you to focus on high-value work. By starting with the design system, you can: -

+

Why start with the design system?

+ + The design system can save you time and effort getting to a better service, allowing you to focus on other + high-value work. By starting with the design system, you can: + +
  • Streamline collaboration: Your developers can use the corresponding coded design system components.
  • - Ensure accessibility: Accessibility is built into the components from + Ensure better accessibility: Accessibility is built into the components from both design and code.
  • - Benefit from thorough testing: Components have been rigorously tested + Save time on testing: Components have been rigorously tested across various devices, browsers, and service contexts.
  • @@ -67,12 +69,15 @@ export default function GetStartedOverviewPage() { system for a cohesive experience.
- -

More time for other high value work

-

- Leveraging what exists in the design system saves you time, enabling you to spend more - time on other high-value tasks such as: -

+ + + More time for other high value work + + + Leveraging what exists in the design system saves you time, enabling you to spend more time on other + high-value tasks such as: + +
  • Usability testing
  • User research
    • @@ -81,7 +86,49 @@ export default function GetStartedOverviewPage() {
  • Design integrity of the product
  • Low fidelity design and testing
-
- + + +

How do I use the design system in my service?

+ + Start by using the design system components and patterns. You should expect that this will cover about 80% of your needs in a service. + When usability testing shows that a new solution or an improvement to an existing solution is needed, design a + better solution. Use a 3rd party library, code your own, and/or share solutions with other teams. + + +
    +
  1. + Use the design system as the default first solution in design and development +
    2. +
  2. + Identify any needs that don't exist in the design system through user testing +
    3. +
  3. + Talk to the design system team to see what’s available and what other + teams have done +
    4. +
  4. + Test a better solution with users +
    5. +
  5. + Share learnings from design and development back to the design system so everyone can learn and improve +
    6. +
  6. + The new solution or change to an existing solution: +
      +
    • Is added to the system
      • +
    • Stays a snowflake (unique to your service) for now and is tracked in the design system backlog
      • +
    +
    7. +
+ + + Avoid custom solutions without a genuine user need to prevent unnecessary work and save time.
View + the design system governance process + + + ); } diff --git a/src/routes/home.tsx b/src/routes/home.tsx index 82a0a6ab0..0a47c718e 100644 --- a/src/routes/home.tsx +++ b/src/routes/home.tsx @@ -1,16 +1,17 @@ import { + GoabAccordion, GoabButton, - GoabButtonGroup, + GoabButtonGroup, GoabCallout, GoabContainer, GoabDivider, GoabGrid, GoabHeroBanner, - GoabHeroBannerActions, + GoabHeroBannerActions, GoabLink, GoabPageBlock, - GoabSpacer, + GoabSpacer, GoabText } from "@abgov/react-components"; import "./home.css"; import CardLite from "../components/card-lite/CardLite"; -import { Link, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { SupportInfo } from '../components/support-info/SupportInfo'; import { MAX_CONTENT_WIDTH } from "../global-constants.ts"; @@ -18,15 +19,20 @@ const HomePage = () => { const navigate = useNavigate(); return ( <> +
- Resources for Government of Alberta product teams to build better services. Learn from the research and experience of other - product teams and avoid repeating work that’s already been done. + + Use the design system to build your service. Build on the research and experience of other service teams and + avoid repeating work that’s already been done. + + - { + { navigate("get-started"); }} trailingIcon="arrow-forward" @@ -41,57 +47,134 @@ const HomePage = () => { +
- + - -

How to use the design system in your service

-
-
    -
  1. Start by using the design system resources and validate your product through user testing.
    2. -
  2. - 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. -
    3. -
-

- Remember: Avoid custom solutions without a genuine user need. Leverage the existing resources from the design system first to prevent - unnecessary work and iterate on your service faster. -

- - Learn more about starting with the design system - - -
+ + +
+ Start by using the design system in your service + + Use the existing components and patterns in the design system to save time and build off of the current + standard. Typically, these cover around 80% of your service's needs. + + + Talk to the Design System team{" "} + before creating a custom solution. This + way you can see what’s available, what + other teams have already done, and avoid repeating work. + + + { + navigate("get-started"); + }}> + Learn more + +
+
+ + + If a component or pattern doesn’t exists in the design system or doesn’t meet the needs of your users, + follow the process below: + + + + Design system workflow diagram + + + + View process for new components and patterns (Figjam) + + + + + Avoid custom solutions without a genuine user need to prevent unnecessary work and save time. + +
+ + + Additional resources + + + + Common capabilities: Shared digital services + + + A directory of reusable backend services designed to help you and your team work more efficiently and + align to government infrastructure standards. + + + + Go to common capabilities + + + + + + User Experience best practices + + + These resources establish best practices to shape and guide the work of DDD user experience designers. + + + + Go to UX practice resources + + + + + + + + ); }; export default HomePage;