{props.title}
- {props.description}
-
- {props.linkDisplay}
+
+
+
);
}
diff --git a/src/components/sandbox/Sandbox.css b/src/components/sandbox/Sandbox.css
index 017ba6f83..6b0dc6444 100644
--- a/src/components/sandbox/Sandbox.css
+++ b/src/components/sandbox/Sandbox.css
@@ -1,5 +1,8 @@
.sandbox-note {
color: #666;
+ margin-top: var(--goa-space-m);
+ margin-bottom: var(--goa-space-2xl);
+ font: var(--goa-typography-body-s);
}
.sandbox-render {
diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx
index 59e7902b6..afe38e897 100644
--- a/src/components/sandbox/Sandbox.tsx
+++ b/src/components/sandbox/Sandbox.tsx
@@ -1,4 +1,6 @@
import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import { GoabCallout } from "@abgov/react-components";
+import { GoabCalloutType } from "@abgov/ui-components-common";
import SandboxProperties from "./SandboxProperties";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
@@ -22,7 +24,7 @@ type Serializer = (el: any, properties: ComponentBinding[]) => string;
interface SandboxProps {
properties?: ComponentBinding[];
formItemProperties?: ComponentBinding[];
- note?: string;
+ note?: string | { type?: GoabCalloutType; heading?: string; content: string };
fullWidth?: boolean;
onChange?: (bindings: ComponentBinding[], props: Record
+
+ {props.title}
+
+
+
+ {props.linkDisplay}
- {props.description}
+ {props.note}
)}
+ {props.note &&
+ (typeof props.note === "string" ? (
+ {props.note}
+ ) : ( +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. -
+
-
-
- 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 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:
+
+
+
+ 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:
+
+
- Using the design system by role:
-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?
+- 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: -
+- 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?
+-
+
- + Use the design system as the default first solution in design and development + +
- + Identify any needs that don't exist in the design system through user testing + +
- + Talk to the design system team to see what’s available and what other + teams have done + +
- + Test a better solution with users + +
- + Share learnings from design and development back to the design system so everyone can learn and improve + +
-
+ 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 +
+
View + the design system governance process +
-
+
- 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 +
+ +Version update guide
Step-by-step guide to updating your code from DDD Design System v3 to v4 (Angular) and v5 to v6 (React)
- This guide will help you update your project to DDD Design System v4 (Angular) and v6 (React). The update - introduces key improvements, including enhanced alignment between Angular and React - properties, better error checking during builds, and type-ahead suggestions for Angular - components. These changes aim to improve the developer experience when working with the - design system. + 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). +
+ +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 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 ( <> +
How to use the design system in your service
-
-
+ -
-
- Start by using the design system resources and validate your product through user testing. -
- - 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. - -
- 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:
+
+
+
+ 
+
+
+
+ View process for new components and patterns (Figjam)
+
+
+
+
+ Avoid custom solutions without a genuine user need to prevent unnecessary work and save time.
+
+
+
+
+