Skip to content

#2072 home page update #360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
twjeffery merged 2 commits into from
May 8, 2025
Merged

#2072 home page update #360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b0c0c2
#2072 home page update
twjeffery May 6, 2025
b7025ef
update from review
twjeffery May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/governance-process.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 16 additions & 14 deletions src/components/card-lite/CardLite.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

20 changes: 12 additions & 8 deletions src/components/card-lite/CardLite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -11,13 +11,17 @@ export interface Props {

export function CardLite(props: Props) {
return (
<div className="card-lite">
<div className="title">{props.title}</div>
<div className="description">{props.description}</div>
<div className="link">
<Link to={props.linkTo}>{props.linkDisplay}</Link>
<a href={props.linkTo} className="card-lite">
<div>
<GoabText size="heading-m" mt="none" mb="m">
<b className="card-heading">{props.title}</b>
</GoabText>
<GoabText size="body-m" mt="none" mb="xs">
<div className="card-description">{props.description}</div>
</GoabText>
<GoabLink>{props.linkDisplay}</GoabLink>
</div>
</div>
</a>
);
}

Expand Down
147 changes: 97 additions & 50 deletions src/routes/get-started/GetStartedOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,83 @@
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 (
<ComponentContent>
<h1>Starting with the design system</h1>
<h3 className="introduction">
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.
</h3>
<ComponentContent tocCssQuery="h2[id], h3[id]">
<GoabText size="heading-xl" mb="m" mt="2xl">
Starting with the design system
</GoabText>
<GoabText size="heading-m" mb="xl">
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.
</GoabText>

<div className="max-width-72ch">
<GoabGrid minChildWidth="32ch" mb="xl">
<h4 className="heading">Using the design system by role:</h4>
<GoabButtonGroup alignment="start">
<GoabButton
type="tertiary"
size="compact"
onClick={() => navigate("/get-started/designers")}>
Designers
</GoabButton>
<GoabButton
type="tertiary"
size="compact"
onClick={() => navigate("/get-started/developers")}>
Developers
</GoabButton>
<GoabButton
type="tertiary"
size="compact"
onClick={() => navigate("/get-started/qa-testing")}>
QA Testers
</GoabButton>
</GoabButtonGroup>
</GoabGrid>
<GoabBlock gap="m" direction="row" mb="xl">
<GoabText size="heading-s" color="secondary">
Design system by role:
</GoabText>
<GoabLink>
<a href="/get-started/designers">
Designer
</a>
</GoabLink>
<GoabLink>
<a href="/get-started/developers">
Developer
</a>
</GoabLink>
<GoabLink>
<a href="/get-started/qa-testing">
QA Tester
</a>
</GoabLink>
</GoabBlock>

<GoabContainer type="non-interactive" mb="l">
<GoabContainer type="non-interactive" padding="relaxed" maxWidth="740px">
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.
</GoabContainer>

<h3>The value of starting with the design system components</h3>
<p>
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:
</p>
<h3 id="Why">Why start with the design system?</h3>
<GoabText size="body-m" mb="m">
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:
</GoabText>
<GoabText size="body-m" mb="m">
<ul>
<li>
<strong>Streamline collaboration:</strong> Your developers can use the corresponding
coded design system components.
</li>
<li>
<strong>Ensure accessibility:</strong> Accessibility is built into the components from
<strong>Ensure better accessibility:</strong> Accessibility is built into the components from
both design and code.
</li>
<li>
<strong>Benefit from thorough testing:</strong> Components have been rigorously tested
<strong>Save time on testing:</strong> Components have been rigorously tested
across various devices, browsers, and service contexts.
</li>
<li>
<strong>Maintain consistency:</strong> Components are coordinated with the rest of the
system for a cohesive experience.
</li>
</ul>

<h3>More time for other high value work</h3>
<p>
Leveraging what exists in the design system saves you time, enabling you to spend more
time on other high-value tasks such as:
</p>
</GoabText>
<GoabText size="heading-s" mt="xl" mb="s">
More time for other high value work
</GoabText>
<GoabText size="body-m">
Leveraging what exists in the design system saves you time, enabling you to spend more time on other
high-value tasks such as:
</GoabText>
<GoabText size="body-m" mb={"2xl"}>
<ul>
<li>Usability testing</li>
<li>User research</li>
Expand All @@ -81,7 +86,49 @@ export default function GetStartedOverviewPage() {
<li>Design integrity of the product</li>
<li>Low fidelity design and testing</li>
</ul>
</div>
</ComponentContent>
</GoabText>

<h3 id="How"> How do I use the design system in my service?</h3>
<GoabText size="body-m" mb="m">
Start by using the design system <a href={"/components"}> components</a> and <a
href={"/patterns"}>patterns.</a> 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.
</GoabText>
<GoabText size="body-m" mb="xl">
<ol>
<li>
Use the design system as the default first solution in design and development
</li>
<li>
Identify any needs that don't exist in the design system through user testing
</li>
<li>
<a href={"/get-started/support"}>Talk to the design system team</a> to see what’s available and what other
teams have done
</li>
<li>
Test a better solution with users
</li>
<li>
Share learnings from design and development back to the design system so everyone can learn and improve
</li>
<li>
The new solution or change to an existing solution:
<ul>
<li>Is added to the system</li>
<li>Stays a snowflake (unique to your service) for now and is tracked in the <a
href={"https://github.com/orgs/GovAlta/projects/38/views/3"}>design system backlog</a></li>
</ul>
</li>
</ol>
</GoabText>
<GoabCallout type="information" heading={"Remember"} size={"medium"} maxWidth={"596px"}>
Avoid custom solutions without a genuine user need to prevent unnecessary work and save time.<br /> <a
href={"https://www.figma.com/board/bFFeTY8CI2qOqCq7yvVXK6/Design-System---Governance-Process-Map?node-id=510-1364&t=gt7XnMUq1UsmJ7Lf-4"}>View
the design system governance process</a>
</GoabCallout>

</ComponentContent>
);
}
Loading