diff --git a/public/images/accordion.png b/public/images/accordion.png index 02a424e44..704071917 100644 Binary files a/public/images/accordion.png and b/public/images/accordion.png differ diff --git a/public/images/badge.png b/public/images/badge.png index 214d5de6e..dab4f2a9e 100644 Binary files a/public/images/badge.png and b/public/images/badge.png differ diff --git a/public/images/block.png b/public/images/block.png index 44f0da916..76c210030 100644 Binary files a/public/images/block.png and b/public/images/block.png differ diff --git a/public/images/button.png b/public/images/button.png index 62b8f7268..2e7cd603b 100644 Binary files a/public/images/button.png and b/public/images/button.png differ diff --git a/public/images/callout.png b/public/images/callout.png index 7c29f3f3d..90cf6c421 100644 Binary files a/public/images/callout.png and b/public/images/callout.png differ diff --git a/public/images/chip.png b/public/images/chip.png deleted file mode 100644 index e12ea16fa..000000000 Binary files a/public/images/chip.png and /dev/null differ diff --git a/public/images/date-picker.png b/public/images/date-picker.png index 7bfd25075..a63845cd0 100644 Binary files a/public/images/date-picker.png and b/public/images/date-picker.png differ diff --git a/public/images/details.png b/public/images/details.png index 1bdc5760f..72f7c6322 100644 Binary files a/public/images/details.png and b/public/images/details.png differ diff --git a/public/images/drawer.png b/public/images/drawer.png new file mode 100644 index 000000000..b39fa0b89 Binary files /dev/null and b/public/images/drawer.png differ diff --git a/public/images/dropdown.png b/public/images/dropdown.png index 547a01a8e..ebc60948d 100644 Binary files a/public/images/dropdown.png and b/public/images/dropdown.png differ diff --git a/public/images/filter-chip.png b/public/images/filter-chip.png new file mode 100644 index 000000000..870f7f7f4 Binary files /dev/null and b/public/images/filter-chip.png differ diff --git a/public/images/footer.png b/public/images/footer.png index bda48aac0..aad145e7a 100644 Binary files a/public/images/footer.png and b/public/images/footer.png differ diff --git a/public/images/footerb.png b/public/images/footerb.png deleted file mode 100644 index f6d29aa6e..000000000 Binary files a/public/images/footerb.png and /dev/null differ diff --git a/public/images/form-stepper.png b/public/images/form-stepper.png index ff7e5569a..c42c7a625 100644 Binary files a/public/images/form-stepper.png and b/public/images/form-stepper.png differ diff --git a/public/images/grid.png b/public/images/grid.png index 60aacd641..5aaab1423 100644 Binary files a/public/images/grid.png and b/public/images/grid.png differ diff --git a/public/images/header.png b/public/images/header.png index 7893337ed..f89c9a175 100644 Binary files a/public/images/header.png and b/public/images/header.png differ diff --git a/public/images/icon.png b/public/images/icon.png new file mode 100644 index 000000000..0b72c8eff Binary files /dev/null and b/public/images/icon.png differ diff --git a/public/images/icons.png b/public/images/icons.png index 17866e948..e46efa22f 100644 Binary files a/public/images/icons.png and b/public/images/icons.png differ diff --git a/public/images/link.png b/public/images/link.png new file mode 100644 index 000000000..dc7b96b3e Binary files /dev/null and b/public/images/link.png differ diff --git a/public/images/list.png b/public/images/list.png index 7fdcb767e..f45231cf4 100644 Binary files a/public/images/list.png and b/public/images/list.png differ diff --git a/public/images/microsite-header.png b/public/images/microsite-header.png index c0deb5fb0..23f855ca4 100644 Binary files a/public/images/microsite-header.png and b/public/images/microsite-header.png differ diff --git a/public/images/modal.png b/public/images/modal.png index 6128c3f4d..434d16239 100644 Binary files a/public/images/modal.png and b/public/images/modal.png differ diff --git a/public/images/not-yet-available.png b/public/images/not-yet-available.png new file mode 100644 index 000000000..0491bd80d Binary files /dev/null and b/public/images/not-yet-available.png differ diff --git a/public/images/notification-banner.png b/public/images/notification-banner.png index 74909d5cd..9856b5b48 100644 Binary files a/public/images/notification-banner.png and b/public/images/notification-banner.png differ diff --git a/public/images/radio.png b/public/images/radio.png index ff65c51ce..356a8c30d 100644 Binary files a/public/images/radio.png and b/public/images/radio.png differ diff --git a/public/images/side-menu.png b/public/images/side-menu.png index 34b1d1a75..2316d882a 100644 Binary files a/public/images/side-menu.png and b/public/images/side-menu.png differ diff --git a/public/images/skeleton-loader.png b/public/images/skeleton-loader.png new file mode 100644 index 000000000..5c23ee43b Binary files /dev/null and b/public/images/skeleton-loader.png differ diff --git a/public/images/skeleton-loading.png b/public/images/skeleton-loading.png deleted file mode 100644 index 87f8a8472..000000000 Binary files a/public/images/skeleton-loading.png and /dev/null differ diff --git a/public/images/spacer.png b/public/images/spacer.png index 02477f3ff..b9dc424e5 100644 Binary files a/public/images/spacer.png and b/public/images/spacer.png differ diff --git a/public/images/table.png b/public/images/table.png index f7411460d..d03be77f2 100644 Binary files a/public/images/table.png and b/public/images/table.png differ diff --git a/public/images/tabs.png b/public/images/tabs.png index a1a5ddb65..75804976c 100644 Binary files a/public/images/tabs.png and b/public/images/tabs.png differ diff --git a/public/images/text-area.png b/public/images/text-area.png index 32a869c80..dd7f5f7da 100644 Binary files a/public/images/text-area.png and b/public/images/text-area.png differ diff --git a/src/components/code-snippet/CodeSnippet.css b/src/components/code-snippet/CodeSnippet.css index fcae4cc87..8a70af51d 100644 --- a/src/components/code-snippet/CodeSnippet.css +++ b/src/components/code-snippet/CodeSnippet.css @@ -3,19 +3,22 @@ border-radius: 4px; margin-top: var(--goa-space-m); overflow: hidden; - max-height: 25rem; + max-height: 20rem; position: relative; + font: var(--goa-typography-number-s); } .goa-code-snippet pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; + padding-right: var(--goa-space-2xl); /** to not overlap with copy button **/ + background-color: var(--goa-color-greyscale-100); } .goa-code-snippet.overflow pre { padding-bottom: var(--goa-space-xl); /** to not overlap with show more/less button **/ - padding-right: var(--goa-space-2xl); /** to not overlap with copy button **/ + padding-right: var(--goa-space-3xl); /** to not overlap with copy button **/ background-color: var(--goa-color-greyscale-100); } diff --git a/src/components/code-snippet/CodeSnippet.tsx b/src/components/code-snippet/CodeSnippet.tsx index 395e46067..893b676ab 100644 --- a/src/components/code-snippet/CodeSnippet.tsx +++ b/src/components/code-snippet/CodeSnippet.tsx @@ -132,7 +132,7 @@ export const CodeSnippet: FC = ({ lang, allowCopy, code, children, tags } {allowCopy && (
- +
diff --git a/src/components/component-card/ComponentCard.css b/src/components/component-card/ComponentCard.css index 4d3e9fb3c..998329079 100644 --- a/src/components/component-card/ComponentCard.css +++ b/src/components/component-card/ComponentCard.css @@ -7,7 +7,7 @@ .card-image { width: 100%; height: 200px; - background-size: contain; + background-size: cover; background-repeat: no-repeat; background-position: center; border-bottom: 1px solid var(--goa-color-greyscale-200); @@ -20,6 +20,22 @@ .card-content a { font-size: var(--goa-font-size-7); - display: block; - margin-bottom: 1rem; + display: flex; } + +.card-content a.github-link { + font: var(--goa-typography-body-s); + margin-top: 1rem; + margin-bottom: 0; +} + +.card-content a:focus { + outline: none; + box-shadow: none; + background: none; +} + +.card:focus-within { + outline: 3px solid var(--goa-color-interactive-focus); + border-radius: 4px; +} \ No newline at end of file diff --git a/src/components/component-card/ComponentCard.tsx b/src/components/component-card/ComponentCard.tsx index a11faa5ec..527f1f69c 100644 --- a/src/components/component-card/ComponentCard.tsx +++ b/src/components/component-card/ComponentCard.tsx @@ -1,12 +1,27 @@ import { Link } from "react-router-dom"; import "./ComponentCard.css"; -import { toKebabCase } from '../../utils/index'; +import { toKebabCase } from "../../utils"; +import { GoabBadge, GoabText } from "@abgov/react-components"; +import { useState, useEffect } from "react"; + +export type ComponentStatus = "Published" | "Not Published" | "In Progress"; + +// Define allowed group options as a union type +type Group = + | "Content layout" + | "Feedback and alerts" + | "Inputs and actions" + | "Structure and navigation" + | "Utilities"; export interface Props { name: string; description: string; - groups: string[]; + groups: Group[]; // Use the Group type here tags?: string[]; + status: ComponentStatus; + githubLink?: string; + openIssues?: number; } function dasherize(value: string): string { @@ -14,18 +29,79 @@ function dasherize(value: string): string { } export function ComponentCard(props: Props) { + const [imageUrl, setImageUrl] = useState(`/images/${dasherize(props.name)}.png`); + + useEffect(() => { + const testImage = new Image(); + testImage.src = imageUrl; + testImage.onerror = () => setImageUrl("/images/not-yet-available.png"); + }, [imageUrl]); + + const getBadgeType = (status: ComponentStatus) => { + switch (status) { + case "Published": + return null; // No badge for "Published" + case "Not Published": + return "information"; + case "In Progress": + return "important"; + default: + return "information"; // Fallback for unknown status + } + }; + + const badgeType = getBadgeType(props.status); + return (
-
-
- - {`${props.name.substring(0, 1).toUpperCase()}${props.name.substring(1)}`} + {props.status === "Published" ? ( + +
- {props.description} + ) : ( +
+ )} +
+
+ {badgeType && } + + {props.status === "Published" ? ( + + + {`${props.name.substring(0, 1).toUpperCase()}${props.name.substring(1)}`} + + + ) : ( + + + {`${props.name.substring(0, 1).toUpperCase()}${props.name.substring(1)}`} + + + )} +
+ + {props.description} + + {props.status !== "Published" && props.githubLink && ( + + + View issues{typeof props.openIssues === 'number' && ` (${props.openIssues})`} + + + )}
); -} +} \ No newline at end of file diff --git a/src/components/component-content/ComponentContent.tsx b/src/components/component-content/ComponentContent.tsx index e44d95ecc..8b1e47070 100644 --- a/src/components/component-content/ComponentContent.tsx +++ b/src/components/component-content/ComponentContent.tsx @@ -1,5 +1,6 @@ import TOC from "@components/table-of-contents/TOC"; import "./component-content.css"; +import { GoabDivider } from "@abgov/react-components"; type Props = { children: React.ReactNode; @@ -11,8 +12,10 @@ export function ComponentContent({tocCssQuery, contentClassName, children}: Prop return <>
-
+
{children} +
{tocCssQuery && }
diff --git a/src/components/component-header/ComponentHeader.css b/src/components/component-header/ComponentHeader.css index 8c6032a55..fcfbd9b7a 100644 --- a/src/components/component-header/ComponentHeader.css +++ b/src/components/component-header/ComponentHeader.css @@ -1,11 +1,34 @@ .component-header { - margin-bottom: 3rem; - margin-top: 2rem; + margin-bottom: var(--goa-space-l); + margin-top: var(--goa-space-xl); } .component-header h1 { - margin-bottom: 1rem; - margin-top: 1.5rem; + margin-bottom: var(--goa-space-m); + margin-top: var(--goa-space-l); +} + +.component-header h3 { + margin-bottom: var(--goa-space-xs); +} + +.component-header span.small, +.component-header a.small { + font: var(--goa-typography-body-s); + margin-bottom: var(--goa-space-xs); +} + +.component-header span.x-small, +.component-header a.x-small { + font: var(--goa-typography-body-xs); +} + +.related-links { + color: var(--goa-color-text-secondary); +} + +.grey { + color: var(--goa-color-text-secondary); } @media screen and (max-width: 623px) { diff --git a/src/components/component-header/ComponentHeader.tsx b/src/components/component-header/ComponentHeader.tsx index 0dd5c8f95..76f3a955b 100644 --- a/src/components/component-header/ComponentHeader.tsx +++ b/src/components/component-header/ComponentHeader.tsx @@ -1,42 +1,122 @@ -import { GoabBadge } from "@abgov/react-components"; +import { GoabBadge, GoabBlock, GoabText } from "@abgov/react-components"; import "./ComponentHeader.css"; import { Link } from "react-router-dom"; +import { useEffect, useState } from "react"; +import { toSentenceCase, fetchIssueCount } from "../../utils"; +export enum Category { + CONTENT_AND_LAYOUT = "Content and layout", + FEEDBACK_AND_ALERTS = "Feedback and alerts", + STRUCTURE_AND_NAVIGATION = "Structure and navigation", + INPUTS_AND_ACTIONS = "Inputs and actions", + UTILITIES = "Utilities", +} interface Props { category?: Category; name: string; description?: string; relatedComponents?: { link: string; name: string }[]; + githubLink?: string; + figmaLink?: string; } -export enum Category { - CONTENT_AND_LAYOUT = "Content and layout", - FEEDBACK_AND_ALERTS = "Feedback and alerts", - STRUCTURE_AND_NAVIGATION = "Structure and navigation", - INPUTS_AND_ACTIONS = "Inputs and actions", - UTILITIES = "Utilities", -} +export const ComponentHeader: React.FC = (props) => { + const [issueCount, setIssueCount] = useState(null); + + useEffect(() => { + if (!props.githubLink) return; + + const getCount = async () => { + const label = toSentenceCase(props.githubLink!); + const count = await fetchIssueCount(label); + setIssueCount(count); + }; + + getCount(); + }, [props.githubLink]); -export const ComponentHeader: React.FC = (props: Props) => { return ( -
+ +
-

{props.name}

- -

+ + + + {props.name} + + {(props.githubLink || props.figmaLink) && ( + + {/* GitHub Issues link, if we have a "githubLink" */} + + {props.githubLink && ( + <> + + + GitHub issues{issueCount !== null ? ` (${issueCount})` : ""} + + + )} + + {/* Figma link, if we have a "figmaLink" */} + + {props.figmaLink && ( + <> +
+ + + + + + + +
+ + + Figma + + + )} + + + )} + + + + {props.description} + {props.relatedComponents?.length && ( - <> - Related components: - {props.relatedComponents.map((relatedComponent, index, array) => ( - - {relatedComponent.name} + + Related: + {props.relatedComponents.map((rc, index, array) => ( + + {rc.name} {index < array.length - 1 && ", "} ))} - + )} + +
); }; diff --git a/src/components/component-properties/ComponentProperties.tsx b/src/components/component-properties/ComponentProperties.tsx index 6d129939d..df79a0799 100644 --- a/src/components/component-properties/ComponentProperties.tsx +++ b/src/components/component-properties/ComponentProperties.tsx @@ -1,4 +1,4 @@ -import { GoabAccordion, GoabBadge } from "@abgov/react-components"; +import { GoabBadge, GoabContainer, GoabText } from "@abgov/react-components"; import { useContext, useEffect, useState } from "react"; import css from "./ComponentProperties.module.css"; @@ -44,21 +44,25 @@ export const ComponentProperties = (props: Props) => { return ( <> - - + + {props.heading || "Properties"} + +
{filteredProperties.map((props, index) => ( ))}
- + ); }; @@ -86,9 +90,11 @@ function ComponentProperty({ props }: ComponentPropertyProps) { {props.description} {props.defaultValue && ( +
{" "} Defaults to {props.defaultValue}. + )}
diff --git a/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx b/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx new file mode 100644 index 000000000..73d3af5a0 --- /dev/null +++ b/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx @@ -0,0 +1,22 @@ +import { GoabContainer, GoabText } from "@abgov/react-components"; + +export interface Props { + figmaLink: string; +} +export function AccessibilityEmpty(props: Props) { + return ( +
+ + + Accessibility documentation for this component can be found on its {" "} + + component page in Figma. + {" "} + + + More accessibility guidance for design and development is coming soon. + + +
+ ); +} \ No newline at end of file diff --git a/src/components/empty-states/design-empty/DesignEmpty.tsx b/src/components/empty-states/design-empty/DesignEmpty.tsx new file mode 100644 index 000000000..769db5f91 --- /dev/null +++ b/src/components/empty-states/design-empty/DesignEmpty.tsx @@ -0,0 +1,20 @@ +import { GoabContainer, GoabText } from "@abgov/react-components"; + +export interface Props { + figmaLink: string; +} +export function DesignEmpty(props: Props) { + return ( +
+ + + + Detailed design documentation for this component can be found on its {" "} + + component page in Figma. + {" "} + + +
+ ); +} \ No newline at end of file diff --git a/src/components/empty-states/examples-empty/ExamplesEmpty.tsx b/src/components/empty-states/examples-empty/ExamplesEmpty.tsx new file mode 100644 index 000000000..a7ec215eb --- /dev/null +++ b/src/components/empty-states/examples-empty/ExamplesEmpty.tsx @@ -0,0 +1,16 @@ +import { GoabContainer, GoabText } from "@abgov/react-components"; + +export function ExamplesEmpty( ) { + return ( +
+ + + We are currently collecting contextual service examples for this component to provide as a starting point in both Figma and code libraries. To contribute examples from your service {" "} + + talk to the design system team. + {" "} + + +
+ ); +} \ No newline at end of file diff --git a/src/components/icon-snippet/IconSnippet.css b/src/components/icon-snippet/IconSnippet.css index d0219a2ad..db6a97032 100644 --- a/src/components/icon-snippet/IconSnippet.css +++ b/src/components/icon-snippet/IconSnippet.css @@ -3,7 +3,7 @@ div.icon-snippet { border: 1px var(--goa-color-greyscale-200) solid; border-radius: 4px; padding: var(--goa-space-m); - color: var(--goa-color-text-secondary); + color: var(--goa-color-greyscale-black); cursor: pointer; /*Below to make icons and text on the same row*/ display: inline-flex; @@ -11,6 +11,7 @@ div.icon-snippet { gap: var(--goa-space-m); align-items: center; justify-content: start; + position: relative; } div.icon-snippet goa-icon { @@ -24,8 +25,15 @@ div.icon-snippet span { div.icon-snippet:hover, div.icon-snippet:focus { + border-color: var(--goa-color-interactive-hover); + color: var(--goa-color-interactive-hover); + background-color: var(--goa-color-greyscale-100); +} + +div.icon-snippet.active { border-color: var(--goa-color-greyscale-black); color: var(--goa-color-greyscale-black); + background-color: var(--goa-color-greyscale-200); } /*Will remove when we have temporary notification component*/ @@ -37,7 +45,10 @@ div.icon-snippet div.copy-feedback { padding: var(--goa-space-m) var(--goa-space-l) var(--goa-space-m) var(--goa-space-l); z-index: 10000; position: absolute; - margin-top: 100px; + top: 100%; + left: 0; + margin-top: var(--goa-space-xs); + font: var(--goa-typography-body-s); } div.icon-snippet div.copy-feedback span { diff --git a/src/components/icon-snippet/IconSnippet.tsx b/src/components/icon-snippet/IconSnippet.tsx index bcb27bfe7..83db402bd 100644 --- a/src/components/icon-snippet/IconSnippet.tsx +++ b/src/components/icon-snippet/IconSnippet.tsx @@ -13,13 +13,13 @@ export const IconSnippet: FC = ({ type }) => { function copyIcon() { navigator.clipboard.writeText(type).then(() => { setCopied(true); - setTimeout(() => setCopied(false), 1000); + setTimeout(() => setCopied(false), 2000); }); } return ( <> -
+
{type}
{ @@ -100,7 +103,9 @@ export const Sandbox = (props: SandboxProps) => { } function SandboxView(props: SandboxViewProps): ReactElement { - return
+ const { background } = props; + + return
@@ -109,15 +114,29 @@ export const Sandbox = (props: SandboxProps) => { return ( <> - - {props.formItemProperties && props.formItemProperties.length > 0 && ( - - )} + + + {/* Only render the GoAAccordion if props.properties is provided */} {props.properties && props.properties.length > 0 && ( - + + {props.formItemProperties && props.formItemProperties.length > 0 && ( + + )} + + + )} {props.note && (
{props.note}
)} diff --git a/src/components/sandbox/sandbox-header/sandboxHeader.css b/src/components/sandbox/sandbox-header/sandboxHeader.css new file mode 100644 index 000000000..43d534f75 --- /dev/null +++ b/src/components/sandbox/sandbox-header/sandboxHeader.css @@ -0,0 +1,91 @@ +.sandbox-header { + display: flex; + justify-content: space-between; /* Distributes items across available space */ + align-items: center; /* Ensures vertical alignment */ + width: 100%; + margin-top: var(--goa-space-xl); + margin-bottom: var(--goa-space-s); +} + +.icon-link { + display: inline-block; + position: relative; /* Make this the reference for absolute positioning */ + width: var(--goa-icon-size-l); /* Explicitly set width to prevent shifting */ + height: var(--goa-icon-size-l); +} + +/* Both icons should be positioned absolutely and stack on top of each other */ +.icon-default, +.icon-hover { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: opacity 0.2s ease-in-out; /* Smooth transition */ +} + +/* Default icon visible by default */ +.icon-default { + opacity: 1; +} + +/* Hover icon hidden by default */ +.icon-hover { + opacity: 0; +} + +/* When hovering, swap opacity */ +.icon-link:hover .icon-default { + opacity: 0; +} + +.icon-link:hover .icon-hover { + opacity: 1; +} + +.header-container { + display: flex; + align-items: end; + justify-content: space-between; /* Ensures full width is used */ + width: 100%; /* Expands to fill the full content area */ +} + +.heading-group { + display: flex; + align-items: end; + gap: 8px; /* Space between heading and copy icon */ + margin: 0; /* Ensures consistent spacing */ +} + +.heading-group h3 { + word-wrap: break-word; /* Wraps text when reaching the container edge */ + overflow-wrap: break-word; + flex-grow: 1; /* Allows heading to expand */ + min-width: 0; /* Prevents flexbox shrinking issues */ + white-space: normal; /* Allows multi-line wrapping */ + width: 100%; + margin-bottom: 10px; +} + +.figma-icon { + margin-left: auto; /* Pushes Figma icon to the right */ + flex-shrink: 0; /* Ensures it does not shrink */ +} + +.copy-icon-button { + background: none; + border: none; + outline: none; + box-shadow: none; + padding: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + +} + +.copy-icon-button:hover { + color: var(--goa-color-interactive-default); +} diff --git a/src/components/sandbox/sandbox-header/sandboxHeader.tsx b/src/components/sandbox/sandbox-header/sandboxHeader.tsx new file mode 100644 index 000000000..b075867b5 --- /dev/null +++ b/src/components/sandbox/sandbox-header/sandboxHeader.tsx @@ -0,0 +1,97 @@ +import { GoabTooltip } from "@abgov/react-components"; +import { useState, useRef } from "react"; +import "./sandboxHeader.css"; +import { toKebabCase } from "../../../utils"; + +export interface Props { + exampleTitle: string; + figmaExample?: string; +} + +export function SandboxHeader(props: Props) { + const [isCopied, setIsCopied] = useState(false); + const headingRef = useRef(null); + const [isHovering, setIsHovering] = useState(false); + const anchorId = toKebabCase(props.exampleTitle); + + function copyAnchorLink() { + const url = `${window.location.origin}${window.location.pathname}#${anchorId}`; + navigator.clipboard.writeText(url).then(() => { + setIsCopied(true); + setTimeout(() => setIsCopied(false), 2000); // Reset tooltip text after 2s + }); + } + + return ( +
+ {/* Heading with an ID for linking */} +
+ {/* Heading + Copy Button (Grouped Together) */} +
+

+ {props.exampleTitle} +

+ + {/* Copy link icon (consistent with CodeSnippet.tsx) */} + + + +
+ + {/* Figma link tooltip */} + {props.figmaExample && ( + + + {/* Default SVG (Shown by default) */} + + + + + + + + {/* Hover SVG */} + + + + + + + + + + )} +
+
+ ); +} \ No newline at end of file diff --git a/src/components/support-info/SupportInfo.css b/src/components/support-info/SupportInfo.css index 58d8bf79f..429c5ee1e 100644 --- a/src/components/support-info/SupportInfo.css +++ b/src/components/support-info/SupportInfo.css @@ -1,11 +1,4 @@ .support-info { - margin-right: var(--goa-space-3xl); max-width: 700px; margin-top: var(--goa-space-3xl); -} - -@media screen and (max-width: 623px) { - .support-info { - margin-right: var(--goa-space-m); - } -} +} \ No newline at end of file diff --git a/src/components/table-of-contents/toc.module.css b/src/components/table-of-contents/toc.module.css index 30e77214e..3ff037423 100644 --- a/src/components/table-of-contents/toc.module.css +++ b/src/components/table-of-contents/toc.module.css @@ -5,7 +5,7 @@ overscroll-behavior: contain; width: 12rem; height: fit-content; - @media screen and (max-width: 1152px) { + @media screen and (max-width: 1230px) { display: none; } } diff --git a/src/components/token-snippet/TokenSnippet.css b/src/components/token-snippet/TokenSnippet.css index 83404a128..bdf7693d1 100644 --- a/src/components/token-snippet/TokenSnippet.css +++ b/src/components/token-snippet/TokenSnippet.css @@ -1,17 +1,27 @@ .goa-token-snippet { display: flex; - align-items: center; + flex-wrap: nowrap; + align-items: start; + white-space: nowrap; + max-width: 260px; } .goa-token-snippet a { + font-family: var(--goa-font-family-sans), serif; display: flex; - font-family: var(--goa-font-family-sans); + align-items: center; + text-decoration: none; } .goa-token-snippet .copy-feedback { background-color: var(--goa-color-greyscale-100); color: var(--goa-color-interactive-default); - padding: 0; - margin: -50px 0 0 -40px; border-radius: 4px; + padding: 4px 8px; + z-index: 9999; + margin-left: 8px; } + +.mobile-token-view { + margin-top: 16px; +} \ No newline at end of file diff --git a/src/components/token-snippet/TokenSnippet.tsx b/src/components/token-snippet/TokenSnippet.tsx index fbcff33c0..1c5100602 100644 --- a/src/components/token-snippet/TokenSnippet.tsx +++ b/src/components/token-snippet/TokenSnippet.tsx @@ -6,9 +6,10 @@ import { DesignTokensLanguageContext } from "@contexts/DesignTokensLanguageConte interface Props { code: string; + className?: string; } -export const TokenSnippet: FC = ({ code }) => { +export const TokenSnippet: FC = ({ code, className }) => { const [isCopied, setIsCopied] = useState(false); const lang = useContext(DesignTokensLanguageContext); @@ -16,23 +17,19 @@ export const TokenSnippet: FC = ({ code }) => { let codeToCopy = lang === "css" ? `--${code}` : `$${code}`; navigator.clipboard.writeText(codeToCopy).then(() => { setIsCopied(true); - setTimeout(() => setIsCopied(false), 1000); + setTimeout(() => setIsCopied(false), 2000); }); } return ( -
- 
+
- -

Expand or collapse part of a form

+ + -

Hide and show many sections of information (FAQ)

+ + ); diff --git a/src/examples/app-footer/AppFooterExamples.tsx b/src/examples/app-footer/AppFooterExamples.tsx index 8f6e5eee3..ab5da1c1b 100644 --- a/src/examples/app-footer/AppFooterExamples.tsx +++ b/src/examples/app-footer/AppFooterExamples.tsx @@ -1,18 +1,20 @@ import { AppFooterShowQuickLinkExample } from "@examples/app-footer/AppFooterShowQuickLinkExample.tsx"; import { AppFooterShowNavigationItemsExample } from "@examples/app-footer/AppFooterShowNavigationItemsExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const AppFooterExamples = () => { return ( <> - - + + - + + ) diff --git a/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx b/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx index a6b131f00..f62cd2baa 100644 --- a/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx +++ b/src/examples/app-footer/AppFooterShowQuickLinkExample.tsx @@ -16,17 +16,17 @@ export const AppFooterShowQuickLinkExample = () => { code={` - - Privacy - - - Disclaimer + + Give feedback - + Accessibility - - Using Alberta.ca + + Privacy + + + Contact us @@ -40,17 +40,17 @@ export const AppFooterShowQuickLinkExample = () => { code={` - - Privacy - - - Disclaimer + + Give feedback - + Accessibility - - Using Alberta.ca + + Privacy + + + Contact us @@ -66,17 +66,17 @@ export const AppFooterShowQuickLinkExample = () => { code={` - - Privacy - - - Disclaimer + + Give feedback - + Accessibility - - Using Alberta.ca + + Privacy + + + Contact us @@ -90,17 +90,17 @@ export const AppFooterShowQuickLinkExample = () => { code={` - - Privacy - - - Disclaimer + + Give feedback - + Accessibility - - Using Alberta.ca + + Privacy + + + Contact us @@ -109,10 +109,10 @@ export const AppFooterShowQuickLinkExample = () => { - Privacy - Disclaimer - Accessibility - Using Alberta.ca + Give feedback + Accessibility + Privacy + Contact us diff --git a/src/examples/app-header/AppHeaderExamples.tsx b/src/examples/app-header/AppHeaderExamples.tsx index 8ecccb849..26f3bd5da 100644 --- a/src/examples/app-header/AppHeaderExamples.tsx +++ b/src/examples/app-header/AppHeaderExamples.tsx @@ -1,17 +1,20 @@ import { AppHeaderWithNavigationExample } from "@examples/app-header/AppHeaderWithNavigationExample.tsx"; import { AppHeaderWithMenuClickEventExample } from "@examples/app-header/AppHeaderWithMenuClickEventExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const AppHeaderExamples = () => { return ( <> - - -

Header with navigation

+ + -

Header with menu click event

+ + ); diff --git a/src/examples/app-header/AppHeaderWithMenuClickEventExample.tsx b/src/examples/app-header/AppHeaderWithMenuClickEventExample.tsx index cbafb55e5..3831f5de8 100644 --- a/src/examples/app-header/AppHeaderWithMenuClickEventExample.tsx +++ b/src/examples/app-header/AppHeaderWithMenuClickEventExample.tsx @@ -25,12 +25,12 @@ export const AppHeaderWithMenuClickEventExample = () => { heading="Design System" onMenuClick={handleMenuClick} fullMenuBreakpoint={+deviceWidth}> - Support - + Cases Payments Outstanding + Support Sign in @@ -88,12 +88,12 @@ export const AppHeaderWithMenuClickEventExample = () => { - Support - + Cases Payments Outstanding + Support Sign in `} @@ -121,12 +121,12 @@ export const AppHeaderWithMenuClickEventExample = () => { [fullMenuBreakpoint]="+deviceWidth" (onMenuClick)="handleMenuClick()" > - Support - + Cases Payments Outstanding + Support Sign in `} @@ -162,12 +162,12 @@ export const AppHeaderWithMenuClickEventExample = () => { heading="Design System" onMenuClick={handleMenuClick} fullMenuBreakpoint={+deviceWidth}> - Support - + Cases Payments Outstanding + Support Sign in `} @@ -189,12 +189,12 @@ export const AppHeaderWithMenuClickEventExample = () => { heading="Design System" onMenuClick={handleMenuClick} fullMenuBreakpoint={+deviceWidth}> - Support - + Cases Payments Outstanding + Support Sign in `} diff --git a/src/examples/app-header/AppHeaderWithNavigationExample.tsx b/src/examples/app-header/AppHeaderWithNavigationExample.tsx index 43c1380dd..00698cbc0 100644 --- a/src/examples/app-header/AppHeaderWithNavigationExample.tsx +++ b/src/examples/app-header/AppHeaderWithNavigationExample.tsx @@ -17,13 +17,13 @@ export const AppHeaderWithNavigationExample = () => { allowCopy={true} code={` - - Support - + + Cases Payments Outstanding + Support Sign in `} @@ -36,13 +36,13 @@ export const AppHeaderWithNavigationExample = () => { allowCopy={true} code={` - - Support - + + Cases Payments Outstanding + Support Sign in `} @@ -56,13 +56,13 @@ export const AppHeaderWithNavigationExample = () => { tags="react" allowCopy={true} code={` - - Support - + + Cases Payments Outstanding + Support Sign in `} @@ -74,26 +74,26 @@ export const AppHeaderWithNavigationExample = () => { tags="react" allowCopy={true} code={` - - Support - + + Cases Payments Outstanding + Support Sign in `} /> )} - - Support - + + Cases Payments Outstanding + Support Sign in diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx index a98d74e68..196242953 100644 --- a/src/examples/badge/BadgeExamples.tsx +++ b/src/examples/badge/BadgeExamples.tsx @@ -5,27 +5,34 @@ import { import { Sandbox } from "@components/sandbox"; import { BadgeShowStatusInTableExample } from "@examples/badge/BadgeShowStatusInTableExample.tsx"; import { BadgeShowStatusOnCardExample } from "@examples/badge/BadgeShowStatusOnCardExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export default function BadgeExamples() { return ( <> - -

Show status in a table

- + + + -

Show multiple tags together

+ + - + -

Show a status on a card

+ + ); diff --git a/src/examples/badge/BadgeShowStatusInTableExample.tsx b/src/examples/badge/BadgeShowStatusInTableExample.tsx index dedd06e77..1e633f38b 100644 --- a/src/examples/badge/BadgeShowStatusInTableExample.tsx +++ b/src/examples/badge/BadgeShowStatusInTableExample.tsx @@ -288,7 +288,7 @@ export const BadgeShowStatusInTableExample = () => { 1234567890 - + Assign @@ -317,7 +317,7 @@ export const BadgeShowStatusInTableExample = () => { Lorem ipsum dolor sit amet consectetur 1234567890 - + Assign diff --git a/src/examples/button/ButtonAskUserAddressExample.tsx b/src/examples/button/ButtonAskUserAddressExample.tsx index 89c557280..b8c4f432c 100644 --- a/src/examples/button/ButtonAskUserAddressExample.tsx +++ b/src/examples/button/ButtonAskUserAddressExample.tsx @@ -7,7 +7,7 @@ import { GoabDropdown, GoabDropdownItem, GoabFormItem, - GoabInput, + GoabInput, GoabText } from "@abgov/react-components"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { useContext } from "react"; @@ -91,25 +91,23 @@ export const ButtonAskUserAddressExample = () => { `} />} - - + What is your address? -
- + - - + + - + @@ -122,15 +120,14 @@ export const ButtonAskUserAddressExample = () => { - + - - Submit and continue + Save and continue Cancel diff --git a/src/examples/button/ButtonExamples.tsx b/src/examples/button/ButtonExamples.tsx index 1b04bbc12..d7c560f7b 100644 --- a/src/examples/button/ButtonExamples.tsx +++ b/src/examples/button/ButtonExamples.tsx @@ -1,21 +1,30 @@ import { ButtonAskUserAddressExample } from "@examples/button/ButtonAskUserAddressExample.tsx"; import { ButtonConfirmDestructiveActionExample } from "@examples/button/ButtonConfirmDestructiveActionExample.tsx"; import { ButtonDisabledWithRequiredFieldExample } from "@examples/button/ButtonDisabledWithRequiredFieldExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const ButtonExamples = () => { return <> - {/*Button Example 1*/} -

Ask a user for an address

+ + {/*Button example 2*/} -

Confirm a destructive action

+ + {/*Button example */} -

Disabled button with a required field

+ + ; }; diff --git a/src/examples/callout/CalloutExamples.tsx b/src/examples/callout/CalloutExamples.tsx index c4ae797bb..da8c8f5be 100644 --- a/src/examples/callout/CalloutExamples.tsx +++ b/src/examples/callout/CalloutExamples.tsx @@ -3,12 +3,16 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { GoabButton, GoabButtonGroup, GoabCallout, GoabSpacer } from "@abgov/react-components"; import { useContext } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const CalloutExamples = () => { const {version} = useContext(LanguageVersionContext); return ( <> -

Confirm that an application was submitted

+ + {/*Angular code*/} {version === "old" && - -

Use tags in the description

+ <> + + {/*Angular*/} @@ -18,12 +21,12 @@ export default function CheckboxExamples () { tags="angular" allowCopy={true} code={` - - + + Help text with a link. - - + + `} />} @@ -33,14 +36,14 @@ export default function CheckboxExamples () { tags="angular" allowCopy={true} code={` - - + + Help text with a link. - - + + `} />} @@ -51,15 +54,15 @@ export default function CheckboxExamples () { tags="react" allowCopy={true} code={` - + Help text with a link.
} /> - - + + `} />} @@ -69,28 +72,28 @@ export default function CheckboxExamples () { tags="react" allowCopy={true} code={` - + Help text with a link.} /> - - + + `} />} - + Help text with a link.} /> - - + + diff --git a/src/examples/container/ContainerExamples.tsx b/src/examples/container/ContainerExamples.tsx index 2024aa90b..898c301c8 100644 --- a/src/examples/container/ContainerExamples.tsx +++ b/src/examples/container/ContainerExamples.tsx @@ -2,24 +2,36 @@ import { ContainerUserInformationExample } from "@examples/container/ContainerUs import { ContainerCaseFilesExample } from "@examples/container/ContainerCaseFilesExample.tsx"; import { ContainerCardGridExample } from "@examples/container/ContainerCardGridExample.tsx"; import { ContainerReviewActionExample } from "@examples/container/ContainerReviewActionExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export default function ContainerExamples() { return ( <> {/*Container examples*/} - -

User information

+ + + -

Card view of case files

+ + -

Card grid that links to different sections

+ + -

Review and action

+ + + ); diff --git a/src/examples/date-picker/DatePickerExamples.tsx b/src/examples/date-picker/DatePickerExamples.tsx index d7bdc2e8c..90dee0aa4 100644 --- a/src/examples/date-picker/DatePickerExamples.tsx +++ b/src/examples/date-picker/DatePickerExamples.tsx @@ -1,13 +1,13 @@ import { DatePickerResetExample } from "@examples/date-picker/DatePickerResetExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const DatePickerExamples = () => { return ( <> - - -

Reset example

+ + ) diff --git a/src/examples/details/DetailsExamples.tsx b/src/examples/details/DetailsExamples.tsx index 7268c6fc7..d69324546 100644 --- a/src/examples/details/DetailsExamples.tsx +++ b/src/examples/details/DetailsExamples.tsx @@ -7,25 +7,27 @@ import { import { DetailsShowDirectDepositInformationExample } from "@examples/details/DetailsShowDirectDepositInformationExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const DetailsExamples = () => { return ( <> - - -

- Show more information for a basic question -

+ + -

- Additional information to help a user understand and answer a question -

+ + -

- Show more information to help a user fill out direct deposit information -

+ + ) diff --git a/src/examples/dropdown/DropdownAddItemExample.tsx b/src/examples/dropdown/DropdownAddItemExample.tsx index ef919f2e3..541ba23b3 100644 --- a/src/examples/dropdown/DropdownAddItemExample.tsx +++ b/src/examples/dropdown/DropdownAddItemExample.tsx @@ -71,7 +71,7 @@ export const DropdownAddItemExample = () => { return ( <> - +
{ }; return ( <> - +
{ return ( <> - -

Dynamically add an item to a dropdown list

+ + -

- Dynamically change items in a dropdown -

+ + + ); diff --git a/src/examples/filter-chip/FilterChipExamples.tsx b/src/examples/filter-chip/FilterChipExamples.tsx index d04771267..363e87c77 100644 --- a/src/examples/filter-chip/FilterChipExamples.tsx +++ b/src/examples/filter-chip/FilterChipExamples.tsx @@ -2,20 +2,29 @@ import { TableWithGlobalFiltersExample } from "@examples/filter-chip/TableWithGl import { FilterChipDeleteEventExample } from "@examples/filter-chip/FilterChipDeleteEventExample.tsx"; import { FilterChipInteractiveExample } from "@examples/filter-chip/FilterChipInteractiveExample.tsx"; import { FilterChipTypedChipExample } from "@examples/filter-chip/FilterChipTypedChipExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const FilterChipExamples = () => { return ( <> - -

Delete Event

+ + -

Interactive Example

+ + -

Create a chip through typing

+ + + +

Filter data in a table

diff --git a/src/examples/form-item/FormItemExamples.tsx b/src/examples/form-item/FormItemExamples.tsx index cab52ed8b..a409a01d6 100644 --- a/src/examples/form-item/FormItemExamples.tsx +++ b/src/examples/form-item/FormItemExamples.tsx @@ -1,17 +1,20 @@ import { FormItemSlottedHelperTextExample } from "@examples/form-item/FormItemSlottedHelperTextExample.tsx"; import { FormItemSlottedErrorTextExample } from "@examples/form-item/FormItemSlottedErrorTextExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const FormItemExamples = () => { return ( <> - - -

Slotted Helper Text

+ + -

Slotted Error Text

+ + ) diff --git a/src/examples/form-stepper/FormStepperExamples.tsx b/src/examples/form-stepper/FormStepperExamples.tsx index c69cef041..1cc2e0420 100644 --- a/src/examples/form-stepper/FormStepperExamples.tsx +++ b/src/examples/form-stepper/FormStepperExamples.tsx @@ -2,17 +2,21 @@ import { FormStepperControlledNavigationExample } from "@examples/form-stepper/FormStepperControlledNavigationExample.tsx"; import { FormStepperStepStatusExample } from "@examples/form-stepper/FormStepperStepStatusExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const FormStepperExamples = () => { return ( <> - -

Controlled Navigation

+ + -

Step status

+ + ) diff --git a/src/examples/microsite-header/MicrositeHeaderExamples.tsx b/src/examples/microsite-header/MicrositeHeaderExamples.tsx index 0ea2b2e70..65834edd8 100644 --- a/src/examples/microsite-header/MicrositeHeaderExamples.tsx +++ b/src/examples/microsite-header/MicrositeHeaderExamples.tsx @@ -3,6 +3,7 @@ import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useContext } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export default function MicrositeHeaderExamples() { const { version } = useContext(LanguageVersionContext); @@ -12,10 +13,10 @@ export default function MicrositeHeaderExamples() { }; return ( <> - -

Custom click event handler (for feedback)

+ + {/*Angular code*/} @@ -133,7 +134,11 @@ export default function MicrositeHeaderExamples() { /> )} -

Slotted version

+ + + {/*Angular*/} {version === "old" && { return ( <> {/*Don't use a Sandbox because the Dropdown inside a modal will make the modal shifts everytime we tab from the dropdown*/} - + setAddItemModalOpen(true)}> Add another item diff --git a/src/examples/modal/ModalConfirmDestructiveActionExample.tsx b/src/examples/modal/ModalConfirmDestructiveActionExample.tsx index bf0fce3a0..c275e25e6 100644 --- a/src/examples/modal/ModalConfirmDestructiveActionExample.tsx +++ b/src/examples/modal/ModalConfirmDestructiveActionExample.tsx @@ -13,10 +13,10 @@ export const ModalConfirmDestructiveActionExample = () => { type="tertiary" leadingIcon="trash" onClick={() => setDestructiveModalOpen(true)}> - Delete my application + Delete record { type="primary" variant="destructive" onClick={() => setDestructiveModalOpen(false)}> - Delete application + Delete record }> @@ -56,13 +56,13 @@ export const ModalConfirmDestructiveActionExample = () => { tags="angular" allowCopy={true} code={` - Delete my application - + Delete record +

This action cannot be undone.

Cancel - Delete application + Delete record
@@ -75,13 +75,13 @@ export const ModalConfirmDestructiveActionExample = () => { tags="angular" allowCopy={true} code={` - Delete my application - + Delete record +

This action cannot be undone.

Cancel - Delete application + Delete record @@ -105,9 +105,9 @@ export const ModalConfirmDestructiveActionExample = () => { tags="react" allowCopy={true} code={` - setOpen(true)}>Delete my application + setOpen(true)}>Delete record setOpen(false)} @@ -117,7 +117,7 @@ export const ModalConfirmDestructiveActionExample = () => { Cancel setOpen(false)}> - Delete application + Delete record } @@ -134,9 +134,9 @@ export const ModalConfirmDestructiveActionExample = () => { tags="react" allowCopy={true} code={` - setOpen(true)}>Delete my application + setOpen(true)}>Delete record setOpen(false)} @@ -146,7 +146,7 @@ export const ModalConfirmDestructiveActionExample = () => { Cancel setOpen(false)}> - Delete application + Delete record } diff --git a/src/examples/modal/ModalConfirmRecordChangeExample.tsx b/src/examples/modal/ModalConfirmRecordChangeExample.tsx index d8c039f51..edac7aeb1 100644 --- a/src/examples/modal/ModalConfirmRecordChangeExample.tsx +++ b/src/examples/modal/ModalConfirmRecordChangeExample.tsx @@ -22,7 +22,7 @@ export const ModalConfirmRecordChangeExample = () => { return ( <> {/*Don't use a Sandbox because Datepicker inside a modal will make the modal shifts everytime we click on datepicker*/} - + setInputModalOpen(true)}>Save and continue diff --git a/src/examples/modal/ModalExamples.tsx b/src/examples/modal/ModalExamples.tsx index 38822fc4b..0b896922b 100644 --- a/src/examples/modal/ModalExamples.tsx +++ b/src/examples/modal/ModalExamples.tsx @@ -5,29 +5,46 @@ import { ModalWarnUserDeadlineExample } from "@examples/modal/ModalWarnUserDeadl import { ModalConfirmRecordChangeExample } from "@examples/modal/ModalConfirmRecordChangeExample.tsx"; import { ModalAddAnotherItemExample } from "@examples/modal/ModalAddAnotherItemExample.tsx"; import { ModalRouteChangeExample } from "@examples/modal/ModalRouteChangeExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export default function ModalExamples() { return ( <> - -

Basic Modal

+ + + -

Confirm a destructive action

+ + -

Warn a user of a deadline

+ + -

Confirm record change

+ + -

Add another item

+ + -

Route changes

+ + ); diff --git a/src/examples/pagination/PaginationExamples.tsx b/src/examples/pagination/PaginationExamples.tsx index 8a98352bc..f87f3615c 100644 --- a/src/examples/pagination/PaginationExamples.tsx +++ b/src/examples/pagination/PaginationExamples.tsx @@ -12,6 +12,7 @@ import { useContext, useEffect, useState } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; import { faker } from "@faker-js/faker"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; interface User { id: string; @@ -58,11 +59,11 @@ export const PaginationExamples = () => { return ( <> - -

Show X per page

+ + {/*============= React code ==============*/} {version === "old" && ( diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx index c9fa0b997..291076480 100644 --- a/src/examples/radio/RadioExamples.tsx +++ b/src/examples/radio/RadioExamples.tsx @@ -1,16 +1,21 @@ import { RadioSlottedDescriptionExample } from "@examples/radio/RadioSlottedDescriptionExample.tsx"; import { RadioMaxWidthExample } from "@examples/radio/RadioMaxWidthExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export default function RadioExamples () { return ( <> - -

Use tags in the description

+ + -

Radio item with max width

+ + + ); diff --git a/src/examples/tabs/TabsDifferentViewsTableExample.tsx b/src/examples/tabs/TabsDifferentViewsTableExample.tsx index c12f15530..063442ced 100644 --- a/src/examples/tabs/TabsDifferentViewsTableExample.tsx +++ b/src/examples/tabs/TabsDifferentViewsTableExample.tsx @@ -10,7 +10,7 @@ export const TabsDifferentViewsTableExample = () => { return ( <> - +
diff --git a/src/examples/tabs/TabsExamples.tsx b/src/examples/tabs/TabsExamples.tsx index 2671a3864..a16b3cd07 100644 --- a/src/examples/tabs/TabsExamples.tsx +++ b/src/examples/tabs/TabsExamples.tsx @@ -1,17 +1,21 @@ import { TabsDifferentViewsTableExample } from "@examples/tabs/TabsDifferentViewsTableExample.tsx"; import { TabsSetSpecificTabActiveExample } from "@examples/tabs/TabsSetSpecificTabActiveExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const TabsExamples = () => { return ( <> - -

- Show different views of data in a table -

+ + + -

Set a specific tab to be active

+ + + diff --git a/src/examples/tabs/TabsSetSpecificTabActiveExample.tsx b/src/examples/tabs/TabsSetSpecificTabActiveExample.tsx index 4bfe8bbd2..27bc9d970 100644 --- a/src/examples/tabs/TabsSetSpecificTabActiveExample.tsx +++ b/src/examples/tabs/TabsSetSpecificTabActiveExample.tsx @@ -10,7 +10,7 @@ export const TabsSetSpecificTabActiveExample = () => { return ( <> - +
diff --git a/src/examples/text-field/TextFieldAskBirthdayExample.tsx b/src/examples/text-field/TextFieldAskBirthdayExample.tsx index 45b81c2d1..6e2be2c72 100644 --- a/src/examples/text-field/TextFieldAskBirthdayExample.tsx +++ b/src/examples/text-field/TextFieldAskBirthdayExample.tsx @@ -30,10 +30,7 @@ export const TextFieldAskBirthdayExample = () => { code={` For example, 27 November 2004}> - - setDay(event.value)} value={day} name="day" width="6ch"> - - + setMonth(event.value)} name="month" value={month}> @@ -49,8 +46,11 @@ export const TextFieldAskBirthdayExample = () => { + + setDay(event.value)} value={day} name="day" width="2ch"> + - setYear(event.value)} value={year} name="year" width="10ch"> + setYear(event.value)} value={year} name="year" width="4ch"> @@ -81,14 +81,6 @@ export const TextFieldAskBirthdayExample = () => { labelSize="large" helpText={"For example, 27 November 2004"}> - - - @@ -105,12 +97,20 @@ export const TextFieldAskBirthdayExample = () => { + + + diff --git a/src/examples/text-field/TextFieldAskUserAddressExample.tsx b/src/examples/text-field/TextFieldAskUserAddressExample.tsx deleted file mode 100644 index 1acc36cd9..000000000 --- a/src/examples/text-field/TextFieldAskUserAddressExample.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { Sandbox } from "@components/sandbox"; -import { GoabBlock, GoabDropdown, GoabDropdownItem, GoabFormItem, GoabInput } from "@abgov/react-components"; -import { useContext } from "react"; -import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; - -export const TextFieldAskUserAddressExample = () => { - const {version} = useContext(LanguageVersionContext); - const noop = () => {} - return ( - - {/*React code*/} - {version === "new" && (''); - const [suite, setSuite] = useState(''); - const [city, setCity] = useState(''); - const [province, setProvince] = useState('alberta'); - const [postalCode, setPostalCode] = useState(''); - `} - />} - - {version === "new" && - setStreet(event.value)} width="100%"> - - - setSuite(event.value)} width="100%"> - - - setCity(event.value)} width="100%"> - - - - setProvince(event.value)}> - - - - - - - - - - - - - - setPostalCode(event.value)}> - - - `} - />} - - {version === "old" && - - - - - - - - - - - - - - - - - - - - - - - - - - - - `} - />} - - {/*Angular code*/} - {version === "new" && } - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - ) -} diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx index 9963f7fb7..a18809032 100644 --- a/src/examples/text-field/TextFieldExamples.tsx +++ b/src/examples/text-field/TextFieldExamples.tsx @@ -1,34 +1,45 @@ -import { TextFieldAskUserAddressExample } from "@examples/text-field/TextFieldAskUserAddressExample.tsx"; import { TextFieldAskBirthdayExample } from "@examples/text-field/TextFieldAskBirthdayExample.tsx"; import { TextFieldSearchExample } from "@examples/text-field/TextFieldSearchExample.tsx"; import { TextFieldAskUserAmountExample } from "@examples/text-field/TextFieldAskUserAmountExample.tsx"; import { TextFieldAskUserIndianRegistrationExample } from "@examples/text-field/TextFieldAskUserIndianRegistrationExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import { ButtonAskUserAddressExample } from "@examples/button/ButtonAskUserAddressExample.tsx"; + export default function TextFieldExamples() { return ( <> {/*Examples*/} - - -

Ask a user for an address

- + + + -

Ask a user for their birthday

+ + - + + -

Ask a user for dollar amounts or costs

+ + -

- Ask a user for their indian registration number -

+ + ); diff --git a/src/examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx b/src/examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx index 1012fac7d..ccd4f6d11 100644 --- a/src/examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx +++ b/src/examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx @@ -37,22 +37,22 @@ export const TextAreaAskQuestionMoreInformationExample = () => { Back -

Description

+

Submit a question about your benefits

- List all components and include a description, including the number of hours for - each. + If you need clarification about your benefit eligibility, payment schedule, or application status, submit your + question here.

- + label="Provide details about your situation" + helpText="Include specific details to help us answer your question quickly."> +
- +

- Break down your outline into easily digestible sections. This can help to ensure - that the document is well-organized and easy to navigate. + Include your benefit program name, mention any recent correspondence you received and/or provide any + relevant case or reference numbers.

diff --git a/src/examples/textarea/TextAreaExamples.tsx b/src/examples/textarea/TextAreaExamples.tsx index 6453d9590..bb3585941 100644 --- a/src/examples/textarea/TextAreaExamples.tsx +++ b/src/examples/textarea/TextAreaExamples.tsx @@ -1,14 +1,15 @@ import { TextAreaAskQuestionMoreInformationExample } from "@examples/textarea/TextAreaAskQuestionMoreInformationExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const TextAreaExamples = () => { return ( <> - -

Ask a question and give more information

+ + ) diff --git a/src/examples/tooltip/TooltipExamples.tsx b/src/examples/tooltip/TooltipExamples.tsx index 87384f962..559ea0a59 100644 --- a/src/examples/tooltip/TooltipExamples.tsx +++ b/src/examples/tooltip/TooltipExamples.tsx @@ -2,21 +2,29 @@ import { TooltipShowFullDateExample } from "@examples/tooltip/TooltipShowFullDat import { TooltipShowLabelForIconOnlyButtonExample } from "@examples/tooltip/TooltipShowLabelForIconOnlyButtonExample.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const TooltipExamples = () => { return ( <> - -

Use a tooltip to show a full date when shortened

+ + + -

Show a label on an icon only button

+ + + {/* This example won't import from styling.ts for some reason...

Click to copy something to your clipboard

- + + */} + ) } diff --git a/src/index.css b/src/index.css index 76a153ace..3c09f8730 100644 --- a/src/index.css +++ b/src/index.css @@ -12,8 +12,8 @@ html { a[href^="http"]::after, a[href^="https://"]::after { content: ""; - width: var(--goa-icon-size-l); - height: var(--goa-icon-size-l); + width: var(--goa-icon-size-m); + height: var(--goa-icon-size-m); background-color: var(--goa-color-interactive-default); display: inline-block; margin-left: var(--goa-space-xs); @@ -26,12 +26,18 @@ a[href^="https://"]:hover:after { background-color: var(--goa-color-interactive-hover); } +/* Hide external link icon when the class .no-external-icon is present */ +a.no-external-icon::after { + content: none !important; + display: none !important; +} + /* Open in new tab */ a[target="_blank"]::after { content: ""; display: inline-block; - width: 1.5rem; - height: 1.5rem; + width: var(--goa-icon-size-m); + height: var(--goa-icon-size-m); vertical-align: middle; margin-left: var(--goa-space-2xs); background: url('data:image/svg+xml,Open') center bottom no-repeat; diff --git a/src/routes/components/Accordion.tsx b/src/routes/components/Accordion.tsx index 0d004b60b..a703c4232 100644 --- a/src/routes/components/Accordion.tsx +++ b/src/routes/components/Accordion.tsx @@ -20,6 +20,8 @@ import { LegacyTestIdProperties, MarginProperty, TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == const componentName = "Accordion"; @@ -29,6 +31,8 @@ const relatedComponents = [ { link: "/components/details", name: "Details" }, { link: "/components/tabs", name: "Tabs" }, ]; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=15931-553576"; + type ComponentPropsType = GoabAccordionProps; type CastingType = { @@ -41,18 +45,12 @@ type CastingType = { export default function AccordionPage() { const [accordionProps, setAccordionProps] = useState({ - heading: "Heading", + heading: "Accordion", headingSize: "medium", children: <>, }); const [accordionBindings, setAccordionBindings] = useState([ - { - label: "Heading", - type: "string", - name: "heading", - value: "Accordion heading", - }, { label: "Heading Size", type: "radio", @@ -60,6 +58,12 @@ export default function AccordionPage() { options: ["small", "medium"], value: "medium", }, + { + label: "Heading", + type: "string", + name: "heading", + value: "Accordion heading", + }, { label: "Secondary Text", type: "string", @@ -67,12 +71,6 @@ export default function AccordionPage() { requirement: "optional", value: "", }, - { - label: "Open", - type: "boolean", - name: "open", - value: false, - }, { label: "Max Width", type: "string", @@ -80,6 +78,12 @@ export default function AccordionPage() { requirement: "optional", value: "", }, + { + label: "Open", + type: "boolean", + name: "open", + value: false, + } ]); const oldComponentProperties: ComponentProperty[] = [ @@ -223,35 +227,42 @@ export default function AccordionPage() { category={category} description={description} relatedComponents={relatedComponents} + githubLink="Accordion" + figmaLink={FIGMA_LINK} /> - +

- Component + Playground

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi + This is the content in an accordion item. This content can be anything that you want including rich + text, components, and more. + + + Examples + + } + > + + + + + + - - Design guidelines - - - }>
diff --git a/src/routes/components/AllComponents.tsx b/src/routes/components/AllComponents.tsx index 2ba71dcae..6e11dd69e 100644 --- a/src/routes/components/AllComponents.tsx +++ b/src/routes/components/AllComponents.tsx @@ -1,436 +1,638 @@ -import { GoabGrid, GoabInput, GoabFormItem } from "@abgov/react-components"; +import { useEffect, useState } from "react"; +import { ComponentStatus } from "@components/component-card/ComponentCard"; +import { toSentenceCase, fetchAllIssueCounts } from "../../utils"; +import { + GoabTable, + GoabTableSortHeader, + GoabTabs, + GoabTab, + GoabGrid, + GoabText, + GoabFormItem, + GoabInput, + GoabBadge +} from "@abgov/react-components"; import { ComponentCard, Props as ComponentProps } from "@components/component-card/ComponentCard"; -import { ReactNode, useState } from "react"; -import "./AllComponents.css"; -import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabInputOnChangeDetail } from "@abgov/ui-components-common"; -export default function AllComponentsPage() { - const cards: ComponentProps[] = [ - { - name: "accordion", - groups: ["content"], - tags: ["blind", "collapse", "content layout", "expandable panel", "expand"], - description: "Let users show and hide sections of related content on a page.", - }, - { - name: "callout", - groups: ["content"], - tags: ["alert", "feedback and alerts", "show more information"], - description: "Communicate important information through a strong visual emphasis.", - }, - { - name: "container", - groups: ["content"], - tags: ["card", "content", "content layout", "group", "structure"], - description: "Group information, create hierarchy, and show related information.", - }, - { - name: "details", - groups: ["content"], - tags: [ - "accordion details", - "additional info", - "additional information", - "content layout", - "detail accordion", - "details expander", - "details toggle", - "disclosure", - "expand", - "expander", - "expanding detail", - "expandable details", - "expandable help text", - "more info", - "see more", - "show more", - "show more information", - ], - description: "Let users reveal more detailed information when they need it.", - }, - { - name: "hero banner", - groups: ["content"], - tags: ["promotion banner", "hero panel", "structure and navigation"], - description: "A visual band of text, including an image and a call to action.", - }, - { - name: "list", - groups: ["content"], - tags: ["content layout"], - description: "Organize information into brief and clear groups.", - }, - { - name: "popover", - groups: ["content"], - tags: ["content layout", "show more information"], - description: "A small overlay that opens on demand, used in other components.", - }, - { - name: "table", - groups: ["content"], - tags: ["data table", "content layout", "interactive table", "sortable table"], - description: - "A set of structured data that is easy for a user to scan, examine, and compare.", - }, - { - name: "badge", - groups: ["feedback"], - tags: ["feedback and alerts", "label", "lozenge", "status", "tag", "token"], - description: - "Small labels which hold small amounts of information, system feedback, or states.", - }, - { - name: "chip", - groups: ["feedback"], - tags: ["inputs and actions", "pill"], - description: "Allow the user to enter information, filter content, and make selections.", - }, - { - name: "modal", - groups: ["feedback"], - tags: [ - "feedback and alerts", - "popup modal", - "popup box", - "modal dialog", - "show more information", - ], - description: "An overlay that appears in front of all other content, and requires a user to take an action before continuing.", - }, - { - name: "notification banner", - groups: ["feedback"], - tags: ["alert banner", "banner", "feedback and alerts"], - description: "Display important page level information or notifications.", - }, - { - name: "progress indicator", - groups: ["feedback"], - tags: [ - "feedback and alerts", - "loading", - "loader", - "loading indicator", - "progress spinner", - "process timer", - "spinner", - ], - description: "Provide feedback of progress to users while loading.", - }, - { - name: "skeleton loading", - groups: ["feedback"], - tags: ["content layout", "loading"], - description: - "Provide visual feedback to users while loading a content heavy page or page element.", - }, - { - name: "tooltip", - groups: ["feedback"], - tags: ["feedback and alerts"], - description: "A small popover that displays more information about an item.", - }, - { - name: "button", - groups: ["inputs"], - tags: ["action", "inputs and actions", "submit"], - description: "Carry out an important action or navigate to another page.", - }, - { - name: "button group", - groups: ["inputs"], - tags: ["action", "inputs and actions", "submit"], - description: - "Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing.", - }, - { - name: "checkbox", - groups: ["inputs"], - tags: ["checkbox", "checklist", "input", "inputs and actions", "options"], - description: "Let the user select one or more options.", - }, - { - name: "date picker", - groups: ["inputs"], - description: - "Lets users select a date through a calendar without the need to manually type it in a field.", - }, - { - name: "dropdown", - groups: ["inputs"], - tags: ["inputs and actions", "select", "single select dropdown"], - description: "Present a list of options to the user to select from.", - }, - { - name: "file uploader", - groups: ["inputs"], - tags: ["drag and drop", "file upload", "inputs and actions", "uploader"], - description: "Help users select and upload a file.", - }, - { - name: "icon button", - groups: ["inputs"], - tags: ["action", "inputs and actions", "submit"], - description: "A compact button with an icon and no text.", - }, - { - name: "input", - groups: ["inputs"], - tags: ["inputs and actions", "text field", "text box"], - description: "A single-line field where users can input and edit text.", - }, - { - name: "radio", - groups: ["inputs"], - tags: ["inputs and actions", "option button", "radio button group", "radio buttons"], - description: "Allow users to select one option from a set.", - }, - { - name: "text area", - groups: ["inputs"], - tags: [ - "inputs and actions", - "long answer input field", - "multi line text input", - "multiple text box", - "text box", - "text input area", - ], - description: "A multi-line field where users can input and edit text.", - }, - { - name: "footer", - groups: ["structure"], - tags: ["page footer", "structure and navigation"], - description: "Provides information related your service at the bottom of every page.", - }, - { - name: "form stepper", - groups: ["structure"], - tags: [ - "form stepper", - "horizontal step navigation", - "process overview", - "progress indicator", - "steps", - "structure and navigation", - "wizard", - ], - description: "Provides a visual representation of a form through a series of steps.", - }, - { - name: "header", - groups: ["structure"], - tags: [ - "app header", - "global navigation", - "header", - "header and navigation", - "main navigation", - "navigation header", - "navigation menu", - "primary navigation", - "service header", - "structure and navigation", - "top navigation", - ], - description: "Provide structure to help users find their way around the service.", - }, - { - name: "microsite header", - groups: ["structure"], - tags: [ - "banner", - "development header", - "feedback bar", - "microheader", - "microsite banner", - "service header", - "service bar", - "service stage banner", - "service state banner", - "status bar", - "structure and navigation", - ], - description: "Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.", - }, - { - name: "pagination", - groups: ["structure"], - tags: ["pager", "pagination controls", "structure and navigation"], - description: "Help users navigation between multiple pages or screens as part of a set.", - }, - { - name: "side menu", - groups: ["structure"], - tags: ["secondary navigation", "side nav", "side bar", "structure and navigation"], - description: "A side navigation that helps the user navigate between pages.", - }, - { - name: "tabs", - groups: ["structure"], - tags: ["sections", "structure and navigation", "tabbed interface"], - description: - "Let users navigate between related sections of content, displaying one section at a time.", - }, - { - name: "block", - groups: ["utilities"], - tags: ["utility"], - description: "Used when grouping components into a block with consistent space between.", - }, - { - name: "divider", - groups: ["utilities"], - tags: ["dividing line", "page divider", "utilities"], - description: - "Indicate a separation of layout, or to distinguish large chunks of information on a page.", - }, - { - name: "form item", - groups: ["utilities"], - tags: ["form", "input", "inputs and actions"], - description: - "Wraps an input control with a text label, requirement label, helper text, and error text.", - }, - { - name: "grid", - groups: ["utilities"], - tags: ["utilities"], - description: - "Arrange a number of components into a responsive grid pattern.", - }, - { - name: "icons", - groups: ["utilities"], - tags: ["utilities"], - description: - "A simple and universal graphic symbol representing an action, object, or concept to help guide the user.", - }, - { - name: "spacer", - groups: ["utilities"], - tags: ["gap", "margin", "padding", "space", "utilities"], - description: "Negative area between the components and the interface.", - }, - { - name: "text", - groups: ["utilities"], - tags: ["heading", "font", "typography", "utilities"], - description: "Provides consistent sizing, spacing, and colour to written content." - } - ]; +const AllComponents = () => { + const [filter, setFilter] = useState(""); + const [issueCounts, setIssueCounts] = useState>({}); + const [cards, setCards] = useState(() => { + const initialCards: ComponentProps[] = [ + { + name: "accordion", + groups: ["Content layout"], + tags: ["blind", "collapse", "content layout", "expandable panel", "expand"], + description: "Let users show and hide sections of related content on a page.", + status: "Published", + }, + { + name: "callout", + groups: ["Content layout"], + tags: ["alert", "feedback and alerts", "show more information"], + description: "Communicate important information through a strong visual emphasis.", + status: "Published", + }, + { + name: "container", + groups: ["Content layout"], + tags: ["card", "content", "content layout", "group", "structure"], + description: "Group information, create hierarchy, and show related information.", + status: "Published", + }, + { + name: "details", + groups: ["Content layout"], + tags: [ + "accordion details", + "additional info", + "additional information", + "content layout", + "detail accordion", + "details expander", + "details toggle", + "disclosure", + "expand", + "expander", + "expanding detail", + "expandable details", + "expandable help text", + "more info", + "see more", + "show more", + "show more information", + ], + description: "Let users reveal more detailed information when they need it.", + status: "Published", + }, + { + name: "hero banner", + groups: ["Content layout"], + tags: ["promotion banner", "hero panel", "structure and navigation"], + description: "A visual band of text, including an image and a call to action.", + status: "Published", + }, + { + name: "list", + groups: ["Content layout"], + tags: ["content layout"], + description: "Organize information into brief and clear groups.", + status: "Published", + }, + { + name: "popover", + groups: ["Content layout"], + tags: ["content layout", "show more information"], + description: "A small overlay that opens on demand, used in other components.", + status: "Published", + }, + { + name: "table", + groups: ["Content layout"], + tags: ["data table", "content layout", "interactive table", "sortable table"], + description: + "A set of structured data that is easy for a user to scan, examine, and compare.", + status: "Published", + }, + { + name: "badge", + groups: ["Feedback and alerts"], + tags: ["feedback and alerts", "label", "lozenge", "status", "tag", "token"], + description: + "Small labels which hold small amounts of information, system feedback, or states.", + status: "Published", + }, + { + name: "filter chip", + groups: ["Feedback and alerts"], + tags: ["inputs and actions", "pill"], + description: "Allow the user to enter information, filter content, and make selections.", + status: "Published", + }, + { + name: "modal", + groups: ["Feedback and alerts"], + tags: [ + "feedback and alerts", + "popup modal", + "popup box", + "modal dialog", + "show more information", + ], + description: + "An overlay that appears in front of all other content, and requires a user to take an action before continuing.", + status: "Published", + }, + { + name: "notification banner", + groups: ["Feedback and alerts"], + tags: ["alert banner", "banner", "feedback and alerts"], + description: "Display important page level information or notifications.", + status: "Published", + }, + { + name: "progress indicator", + groups: ["Feedback and alerts"], + tags: [ + "feedback and alerts", + "loading", + "loader", + "loading indicator", + "progress spinner", + "process timer", + "spinner", + ], + description: "Provide feedback of progress to users while loading.", + status: "Published", + }, + { + name: "skeleton loader", + groups: ["Feedback and alerts"], + tags: ["content layout", "loading"], + description: + "Provide visual feedback to users while loading a content heavy page or page element.", + status: "Published", + }, + { + name: "tooltip", + groups: ["Feedback and alerts"], + tags: ["feedback and alerts"], + description: "A small popover that displays more information about an item.", + status: "Published", + }, + { + name: "button", + groups: ["Inputs and actions"], + tags: ["action", "inputs and actions", "submit"], + description: "Carry out an important action or navigate to another page.", + status: "Published", + }, + { + name: "button group", + groups: ["Inputs and actions"], + tags: ["action", "inputs and actions", "submit"], + description: + "Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing.", + status: "Published", + }, + { + name: "checkbox", + groups: ["Inputs and actions"], + tags: ["checkbox", "checklist", "input", "inputs and actions", "options"], + description: "Let the user select one or more options.", + status: "Published", + }, + { + name: "date picker", + groups: ["Inputs and actions"], + tags: ["calendar, date, date picker, inputs and actions, input"], + description: + "Lets users select a date through a calendar without the need to manually type it in a field.", + status: "Published", + }, + { + name: "dropdown", + groups: ["Inputs and actions"], + tags: ["inputs and actions", "select", "single select dropdown"], + description: "Present a list of options to the user to select from.", + status: "Published", + }, + { + name: "file uploader", + groups: ["Inputs and actions"], + tags: ["drag and drop", "file upload", "inputs and actions", "uploader"], + description: "Help users select and upload a file.", + status: "Published", + }, + { + name: "icon button", + groups: ["Inputs and actions"], + tags: ["action", "inputs and actions", "submit"], + description: "A compact button with an icon and no text.", + status: "Published", + }, + { + name: "input", + groups: ["Inputs and actions"], + tags: ["inputs and actions", "text field", "text box", "search", "text input"], + description: "A single-line field where users can input and edit text.", + status: "Published", + }, + { + name: "radio", + groups: ["Inputs and actions"], + tags: ["inputs and actions", "option button", "radio button group", "radio buttons"], + description: "Allow users to select one option from a set.", + status: "Published", + }, + { + name: "text area", + groups: ["Inputs and actions"], + tags: [ + "inputs and actions", + "long answer input field", + "multi line text input", + "multiple text box", + "text box", + "text input area", + ], + description: "A multi-line field where users can input and edit text.", + status: "Published", + }, + { + name: "footer", + groups: ["Structure and navigation"], + tags: ["page footer", "structure and navigation"], + description: "Provides information related your service at the bottom of every page.", + status: "Published", + }, + { + name: "form stepper", + groups: ["Structure and navigation"], + tags: [ + "form stepper", + "horizontal step navigation", + "process overview", + "progress indicator", + "steps", + "structure and navigation", + "wizard", + ], + description: "Provides a visual representation of a form through a series of steps.", + status: "Published", + }, + { + name: "header", + groups: ["Structure and navigation"], + tags: [ + "app header", + "global navigation", + "header", + "header and navigation", + "main navigation", + "navigation header", + "navigation menu", + "primary navigation", + "service header", + "structure and navigation", + "top navigation", + ], + description: "Provide structure to help users find their way around the service.", + status: "Published", + }, + { + name: "microsite header", + groups: ["Structure and navigation"], + tags: [ + "banner", + "development header", + "feedback bar", + "microheader", + "microsite banner", + "service header", + "service bar", + "service stage banner", + "service state banner", + "status bar", + "structure and navigation", + ], + description: + "Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.", + status: "Published", + }, + { + name: "pagination", + groups: ["Structure and navigation"], + tags: ["pager", "pagination controls", "structure and navigation"], + description: + "Help users navigation between multiple pages or screens as part of a set.", + status: "Published", + }, + { + name: "side menu", + groups: ["Structure and navigation"], + tags: ["secondary navigation", "side nav", "side bar", "structure and navigation"], + description: "A side navigation that helps the user navigate between pages.", + status: "Published", + }, + { + name: "tabs", + groups: ["Structure and navigation"], + tags: ["sections", "structure and navigation", "tabbed interface"], + description: + "Let users navigate between related sections of content, displaying one section at a time.", + status: "Published", + }, + { + name: "block", + groups: ["Utilities"], + tags: ["utility"], + description: + "Used when grouping components into a block with consistent space between.", + status: "Published", + }, + { + name: "divider", + groups: ["Utilities"], + tags: ["dividing line", "page divider", "utilities"], + description: + "Indicate a separation of layout, or to distinguish large chunks of information on a page.", + status: "Published", + }, + { + name: "form item", + groups: ["Utilities"], + tags: ["form", "input", "inputs and actions"], + description: + "Wraps an input control with a text label, requirement label, helper text, and error text.", + status: "Published", + }, + { + name: "grid", + groups: ["Utilities"], + tags: ["utilities"], + description: "Arrange a number of components into a responsive grid pattern.", + status: "Published", + }, + { + name: "icons", + groups: ["Utilities"], + tags: ["utilities"], + description: + "A simple and universal graphic symbol representing an action, object, or concept to help guide the user.", + status: "Published", + }, + { + name: "spacer", + groups: ["Utilities"], + tags: ["gap", "margin", "padding", "space", "utilities"], + description: "Negative area between the components and the interface.", + status: "Published", + }, + { + name: "toggle button", + groups: ["Inputs and actions"], + tags: ["button", "inputs and actions"], + description: "Currently tracking this need in services.", + status: "Not Published", + }, + { + name: "back button", + groups: ["Inputs and actions"], + tags: ["button", "inputs and actions"], + description: "Related to form pattern, currently tracking this need in services.", + status: "Not Published", + }, + { + name: "breadcrumb", + groups: ["Structure and navigation"], + tags: ["breadcrumb"], + description: "Currently tracking this need in services.", + status: "Not Published", + }, + { + name: "drawer", + groups: ["Structure and navigation"], + tags: ["Drawer", "Sheet", "Sidesheet", "Sidepanel"], + description: "There is currently an experimental drawer in development.", + status: "In Progress", + }, + { + name: "error summary", + groups: ["Feedback and alerts"], + tags: ["Error"], + description: "Related to form pattern, currently tracking this need in services.", + status: "Not Published", + }, + { + name: "floating action button", + groups: ["Inputs and actions"], + tags: ["FAB"], + description: "Currently tracking this need in services.", + status: "Not Published", + }, + { + name: "quick exit", + groups: ["Structure and navigation"], + tags: ["Quick exit"], + description: "Currently tracking this need in services.", + status: "Not Published", + }, + { + name: "skip to content", + groups: ["Structure and navigation"], + tags: ["Skip to content", "accessibility"], + description: "Currently tracking this need in services.", + status: "Not Published", + }, + { + name: "rich text editor", + groups: ["Inputs and actions"], + tags: ["Skip to content", "accessibility"], + description: "Currently tracking this need in services.", + status: "Not Published", + }, + { + name: "temporary notification", + groups: ["Feedback and alerts"], + tags: ["Snackbar", "Toast", "Temporary notification"], + description: "Planned for development", + status: "Not Published", + }, + { + name: "menu button", + groups: ["Inputs and actions"], + tags: ["Menu button", "split button"], + description: "Planned for development.", + status: "Not Published", + }, + { + name: "time picker", + groups: ["Inputs and actions"], + tags: ["Time picker", "date picker"], + description: "Currently tracking this need in services.", + status: "Not Published", + }, + { + name: "text", + groups: ["Content layout"], + tags: ["text", "body", "copy"], + description: "Provides consistent sizing, spacing, and colour to written content.", + status: "Published" + }, + ]; - function getComponentsByGroup(group: string): ReactNode[] { - return cards - .filter(card => card.groups.includes(group)) - .map((card: ComponentProps) => ( - - )); - } + return initialCards.sort((a, b) => { + const statusOrder: ComponentStatus[] = ["Published", "In Progress", "Not Published"]; + const statusComparison = statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status); + if (statusComparison !== 0) return statusComparison; + return a.name.localeCompare(b.name); + }); + }); + const [sortDirection, setSortDirection] = useState<{ [key: string]: number }>({ + status: -1, + name: 1, + }); - function getComponentsByFilter(): ReactNode[] { - return cards - .filter( - card => - card.name.includes(filter.toLowerCase()) || (card.tags && card.tags.some(tag => tag.includes(filter.toLowerCase()))) - ) - .map((card: ComponentProps) => ( - - )); - } + const filteredCards = cards.filter((card) => { + const filterLowerCase = (filter || "").toLowerCase(); + const nameMatches = card.name.toLowerCase().includes(filterLowerCase); + const tagsMatch = card.tags?.some((tag) => tag.toLowerCase().includes(filterLowerCase)); + return !filter || nameMatches || tagsMatch; + }); - const [mode, setMode] = useState<"list" | "search">("list"); - const [filter, setFilter] = useState(""); + const sortData = (detailOrSortBy: string | { sortBy: string }) => { + // If a string is passed, use it directly; otherwise extract the sortBy property + const sortBy = typeof detailOrSortBy === "string" ? detailOrSortBy : detailOrSortBy.sortBy; - function filterComponents(value: string) { - if (value === "") { - setMode("list"); - return; - } - setFilter(value); - setMode("search"); - } + const newDirection = sortDirection[sortBy] === 1 ? -1 : 1; + const sorted = [...cards].sort((a, b) => { + if (sortBy === "status") { + const statusOrder: ComponentStatus[] = ["Published", "In Progress", "Not Published"]; + const statusComparison = statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status); + if (statusComparison !== 0) return statusComparison * newDirection; + } + const key = sortBy as keyof ComponentProps; + const aField = a[key]; + const bField = b[key]; - return ( - <> - -
-

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

-
+ const aValue = + sortBy === "name" + ? a.name.toLowerCase() + : Array.isArray(aField) + ? (aField.length > 0 ? aField[0] : "") + : (aField ?? ""); + const bValue = + sortBy === "name" + ? b.name.toLowerCase() + : Array.isArray(bField) + ? (bField.length > 0 ? bField[0] : "") + : (bField ?? ""); - - filterComponents(event.value)} - /> - + if (aValue > bValue) return newDirection; + if (aValue < bValue) return -newDirection; + return 0; + }); - {mode === "search" && {getComponentsByFilter()}} + setCards(sorted); + setSortDirection({ [sortBy]: newDirection }); + }; - {mode === "list" && ( - -

Content layout

- - {getComponentsByGroup("content")} - - + // Helper to format the label query for REST URLs + const getLabelQuery = (name: string) => { + const formatted = toSentenceCase(name); + return formatted.includes(" ") ? `"${formatted}"` : formatted; + }; -

Feedback and alerts

- - {getComponentsByGroup("feedback")} - - + // Helper to format the label query for GraphQL (escaping inner quotes) + useEffect(() => { + const loadIssueCounts = async () => { + const issueCounts = await fetchAllIssueCounts(cards); + setIssueCounts(issueCounts); + }; -

Inputs and actions

- - {getComponentsByGroup("inputs")} - - + loadIssueCounts(); + }, [cards]); -

Structure and navigation

- - {getComponentsByGroup("structure")} - - + const renderTable = () => ( + + + + + + Status + + + + + Name + + + + + Category + + + Open issues + + + + {filteredCards.map((card) => ( + + + + + + {card.status === "Published" ? ( + + {toSentenceCase(card.name)} + + ) : ( + {toSentenceCase(card.name)} + )} + + {card.groups.join(", ")} + + + View + {issueCounts[card.name] !== undefined && ` (${issueCounts[card.name]})`} + + + + ))} + + + ); -

Utilities

+ return ( +
+ + 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. + + + + setFilter(value || "")} /> + + + + - {getComponentsByGroup("utilities")} + {filteredCards.map((card) => ( + + ))} - - - )} - + + {renderTable()} + +
); -} +}; + +export default AllComponents; \ No newline at end of file diff --git a/src/routes/components/AppFooter.tsx b/src/routes/components/AppFooter.tsx index b9d76ed6c..98d85a0b5 100644 --- a/src/routes/components/AppFooter.tsx +++ b/src/routes/components/AppFooter.tsx @@ -15,9 +15,12 @@ import { ComponentContent } from "@components/component-content/ComponentContent import { useState, useContext } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { AppFooterExamples } from "@examples/app-footer/AppFooterExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=582-5939"; const componentName = "Footer"; const description = "Provides information related your service at the bottom of every page."; const componentCategory = Category.STRUCTURE_AND_NAVIGATION; @@ -97,12 +100,14 @@ export default function AppFooterPage() { category={componentCategory} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Footer" /> - +

- Component + Playground

Basic Footer

@@ -110,32 +115,36 @@ export default function AppFooterPage() { {/*Component properties table*/} - + {language === "angular" && ( )} - {/* Examples*/} - - - Design guidelines - + Examples + }> -

Coming Soon

+ + + + + + + + diff --git a/src/routes/components/AppHeader.tsx b/src/routes/components/AppHeader.tsx index 1f274907a..e5bde3d65 100644 --- a/src/routes/components/AppHeader.tsx +++ b/src/routes/components/AppHeader.tsx @@ -15,7 +15,10 @@ import { useState } from "react"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { LegacyTestIdProperties, TestIdProperty } from "@components/component-properties/common-properties.ts"; import { AppHeaderExamples } from "@examples/app-header/AppHeaderExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=4576-224884"; const componentName = "Header"; const description = "Provide structure to help users find their way around the service."; @@ -156,13 +159,15 @@ export default function AppHeaderPage() { category={componentCategory} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Header" /> - +

- Component + Playground

@@ -171,17 +176,24 @@ export default function AppHeaderPage() { {/*Component properties*/} - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx index 39469c39a..3f084678d 100644 --- a/src/routes/components/Badge.tsx +++ b/src/routes/components/Badge.tsx @@ -9,9 +9,12 @@ import { import { ComponentContent } from "@components/component-content/ComponentContent"; import BadgeExamples from "@examples/badge/BadgeExamples.tsx"; import { GoabBadgeType } from "@abgov/ui-components-common"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=458-16984"; const componentName = "Badge"; const description = "Small labels which hold small amounts of information, system feedback, or states."; @@ -169,30 +172,40 @@ export default function BadgePage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Badge" + /> - -

- Component -

+ +

Playground

- - + + - Design guidelines - + Examples + - }> + } + > + + + + + + + + + + + diff --git a/src/routes/components/Block.tsx b/src/routes/components/Block.tsx index dc1f70f43..01a1ff6ee 100644 --- a/src/routes/components/Block.tsx +++ b/src/routes/components/Block.tsx @@ -5,7 +5,7 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoabBadge, GoabBlock, GoabTab, GoabTabs } from "@abgov/react-components"; +import { GoabBlock, GoabContainer, GoabTab, GoabTabs, GoabText } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; export default function BlockPage() { @@ -60,7 +60,7 @@ export default function BlockPage() { name: "mt,mr,mb,ml", type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl", description: "Apply margin to the top, right, bottom, and/or left of the component.", - }, + }, ]; const componentProperties: ComponentProperty[] = [ @@ -112,13 +112,13 @@ export default function BlockPage() { { link: "/patterns/layout", name: "Layout" }, { link: "/components/spacer", name: "Spacer" }, ]} + githubLink="Block" /> - - -

Component

+ +

Playground

+ }} + >
Item 2
Item 2
@@ -153,18 +154,22 @@ export default function BlockPage() {
- {/*Block table properties*/} - - Design guidelines - - - } - > + + + + To use Block in design, use Figma's built-in{" "} + + auto layout + .{" "} This will group multiple things with consistent spacing between them, similar to the Block + component in code. + + + + diff --git a/src/routes/components/Button.tsx b/src/routes/components/Button.tsx index 8ee72232c..8f1c7af09 100644 --- a/src/routes/components/Button.tsx +++ b/src/routes/components/Button.tsx @@ -21,6 +21,10 @@ import { MarginProperty, TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=420-6810"; export default function ButtonPage() { const [buttonProps, setButtonProps] = useState({}); @@ -199,15 +203,14 @@ export default function ButtonPage() { { link: "/components/button-group", name: "Button group" }, { link: "/components/icon-button", name: "Icon button" }, ]} + figmaLink={FIGMA_LINK} + githubLink="Button" /> - - {/*Button Sandbox*/} -

- Component -

+ +

Playground

- - Primary Button - - {/*Button Table Properties*/} - - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + + diff --git a/src/routes/components/ButtonGroup.tsx b/src/routes/components/ButtonGroup.tsx index dd9463118..91d2d87da 100644 --- a/src/routes/components/ButtonGroup.tsx +++ b/src/routes/components/ButtonGroup.tsx @@ -9,6 +9,11 @@ import { GoabBadge, GoabButton, GoabButtonGroup, GoabTab, GoabTabs } from "@abgo import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabButtonGroupAlignment } from "@abgov/ui-components-common"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302108"; export default function ButtonGroupPage() { const [buttonGroupProps, setButtonGroupProps] = useState({ @@ -102,24 +107,19 @@ export default function ButtonGroupPage() { - - {/*Button Group Sandbox*/} -

Component

+ +

Playground

- - - Button - - - Button - - - Button - + Button + Button + Button - + - Design guidelines - + Examples + } - > + > + + + + + + + + + + diff --git a/src/routes/components/Callout.tsx b/src/routes/components/Callout.tsx index fae50771a..ddf71db95 100644 --- a/src/routes/components/Callout.tsx +++ b/src/routes/components/Callout.tsx @@ -21,12 +21,15 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { CalloutExamples } from "@examples/callout/CalloutExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=434-14122"; const componentName = "Callout"; const description = "Communicate important information through a strong visual emphasis."; -const category = Category.FEEDBACK_AND_ALERTS; +const category = Category.CONTENT_AND_LAYOUT; const relatedComponents = [ { link: "/components/notification-banner", name: "Notification banner" }, ]; @@ -172,33 +175,40 @@ export default function CalloutPage() { category={category} description={description} relatedComponents={relatedComponents} + githubLink="Callout" + figmaLink={FIGMA_LINK} /> - +

- Component + Playground

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Callout important information for the user. + - - + + Examples + + } + > + + + + - - Design guidelines - - - }> + + + diff --git a/src/routes/components/Checkbox.tsx b/src/routes/components/Checkbox.tsx index 5c0deb2cf..61107619f 100644 --- a/src/routes/components/Checkbox.tsx +++ b/src/routes/components/Checkbox.tsx @@ -16,6 +16,8 @@ import { MarginProperty, TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == const componentName = "Checkbox"; @@ -26,6 +28,7 @@ const relatedComponents = [ { link: "/components/form-item", name: "Form item" }, { link: "/components/radio", name: "Radio" } ]; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=183-219"; type ComponentPropsType = GoabCheckboxProps; type CastingType = { name: string; @@ -223,12 +226,19 @@ export default function CheckboxPage() { return ( <> - + - -

Component

+ +

Playground

- - Design guidelines - + Examples + - }> + } + > + + + + + + + + + + diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx index a3dd223c5..e64985352 100644 --- a/src/routes/components/Components.tsx +++ b/src/routes/components/Components.tsx @@ -1,4 +1,4 @@ -import { GoabNotification, GoabSideMenu } from "@abgov/react-components"; +import { GoabNotification, GoabSideMenu, GoabSideMenuGroup, GoabSpacer } from "@abgov/react-components"; import { Link, Outlet } from "react-router-dom"; import { SupportInfo } from "@components/support-info/SupportInfo.tsx"; import { useContext } from "react"; @@ -15,6 +15,7 @@ export function Components() { return prefixUrl.length > 0 ? `${prefixUrl}/${path}` : path; }; + return ( <> {version === "old" && ( @@ -31,46 +32,58 @@ export function Components() {
+ All - Accordion - Badge - Block - Button - Button group - Callout - Checkbox - Container - Date picker - Details - Divider - Dropdown - File uploader - Filter chip - Footer - Form item - Form stepper - Grid - Header - Hero banner - Icons - Icon button - Input - List - Microsite header - Modal - Notification banner - Pagination - Popover - Progress indicator - Radio - Side menu - Skeleton loading - Spacer - Table - Tabs - Text - Text area - Tooltip + + Accordion + Callout + Container + Details + Hero banner + List + Popover + Table + Text + + + + Badge + Filter chip + Modal + Notification banner + Progress indicator + Skeleton loader + Tooltip + + + Button + Button group + Checkbox + Date picker + Dropdown + File uploader + Icon button + Input + Radio + Text area + + + Footer + Form stepper + Header + Microsite header + Pagination + Side menu + Tabs + + + Block + Divider + Form item + Grid + Icons + Spacer +
@@ -84,3 +97,5 @@ export function Components() { } export default Components; + + diff --git a/src/routes/components/Container.tsx b/src/routes/components/Container.tsx index c5f67abdb..c0d340618 100644 --- a/src/routes/components/Container.tsx +++ b/src/routes/components/Container.tsx @@ -13,11 +13,14 @@ import { } from "@abgov/react-components"; import ContainerExamples from "@examples/container/ContainerExamples.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=1789-12623"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == const componentName = "Container"; const description = "Group information, create hierarchy, and show related information."; -const category = Category.FEEDBACK_AND_ALERTS; +const category = Category.CONTENT_AND_LAYOUT; const relatedComponents = [ { link: "/components/accordion", name: "Accordion" }, { link: "/components/details", name: "Details" }, @@ -121,7 +124,7 @@ export default function ContainerPage() { type: "string", description: "Sets the maximum width of the container.", lang: "angular", - }, + }, { name: "testId", type: "string", @@ -222,34 +225,41 @@ export default function ContainerPage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Container" /> - -

Component

+ +

Playground

Detach to use

Add things inside me

 - - {/*Container Table Properties*/} - - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + + diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 999c82919..fc3d98f66 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -21,14 +21,17 @@ import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { LegacyMarginProperty, MarginProperty } from "@components/component-properties/common-properties.ts"; import { DatePickerExamples } from "@examples/date-picker/DatePickerExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=33054-33175"; const componentName = "Date picker"; const category = Category.INPUTS_AND_ACTIONS; const relatedComponents = [ - // { link: "/content/date-format", name: "Date format" }, - { link: "/components/form-item", name: "Form item" }, + { link: "/content/date-format", name: "Date format" }, + { link: "/components/form-item", name: "Form item" } ]; const description = "Lets users select a date through a calendar without the need to manually type it in a field."; @@ -179,13 +182,15 @@ export default function DatePickerPage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Date picker" /> - -

Component

+ +

Playground

- - - Design guidelines - + Examples + - }> + } + > + + + + + + + + + + diff --git a/src/routes/components/Details.tsx b/src/routes/components/Details.tsx index 0629e764c..8720637e3 100644 --- a/src/routes/components/Details.tsx +++ b/src/routes/components/Details.tsx @@ -18,6 +18,10 @@ import { TestIdProperty, } from "@components/component-properties/common-properties.ts"; import { DetailsExamples } from "@examples/details/DetailsExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=15931-553576"; export default function DetailsPage() { const [detailsProps, setDetailsProps] = useState({ @@ -100,6 +104,8 @@ export default function DetailsPage() { name="Details" category={Category.CONTENT_AND_LAYOUT} description="Let users reveal more detailed information when they need it." + figmaLink={FIGMA_LINK} + githubLink="Details" relatedComponents={[ { link: "/components/accordion", name: "Accordion" }, { link: "/components/form-item", name: "Form item" }, @@ -108,9 +114,9 @@ export default function DetailsPage() { - +

- Component + Playground

@@ -124,23 +130,29 @@ export default function DetailsPage() { facilisi. - - - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + + diff --git a/src/routes/components/Divider.tsx b/src/routes/components/Divider.tsx index d754bd432..b0260d56d 100644 --- a/src/routes/components/Divider.tsx +++ b/src/routes/components/Divider.tsx @@ -8,7 +8,12 @@ import { Category, ComponentHeader } from "@components/component-header/Componen import { GoabBadge, GoabDivider, GoabTab, GoabTabs } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import Sandbox from "@components/sandbox/Sandbox.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; import "./AllComponents.css"; +import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=46-115"; export default function DividerPage() { const [dividerProps, setDividerProps] = useState({}); @@ -76,28 +81,39 @@ export default function DividerPage() { relatedComponents={[ { link: "/components/container", name: "Container" }, ]} + figmaLink={FIGMA_LINK} + githubLink="Divider" /> - -

Component

+ +

Playground

- - Design guidelines - + Examples + } - > + > + + + + + + + + + + diff --git a/src/routes/components/Dropdown.tsx b/src/routes/components/Dropdown.tsx index 3f13f2083..0f2e0eff0 100644 --- a/src/routes/components/Dropdown.tsx +++ b/src/routes/components/Dropdown.tsx @@ -7,7 +7,6 @@ import { GoabTab, GoabTabs } from "@abgov/react-components"; -import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import ICONS from "./icons.json"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; @@ -21,6 +20,10 @@ import { DropdownExamples } from "@examples/dropdown/DropdownExamples"; import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { LegacyMarginProperty, MarginProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=105-42"; // == Page props == const componentName = "Dropdown"; @@ -364,112 +367,26 @@ export default function DropdownPage() { return ( <> - + - -

Component

+ +

Playground

- {version === "old" && } - {version === "new" && } - - {version === "old" && } - - {version === "new" && } - - {version === "old" && } - - {version === "new" && } - - {version === "new" && } - + {/* Keep all existing CodeSnippets and form content as-is */} @@ -486,18 +403,25 @@ export default function DropdownPage() { properties={dropdownItemProperties} oldProperties={oldDropdownItemProperties} /> - - Design guidelines - + Examples + } > -

Coming Soon

+ + + + + + + + + diff --git a/src/routes/components/FileUploader.tsx b/src/routes/components/FileUploader.tsx index 49cd8a5f6..73629b0e8 100644 --- a/src/routes/components/FileUploader.tsx +++ b/src/routes/components/FileUploader.tsx @@ -3,12 +3,13 @@ import { ComponentBinding, Sandbox } from "@components/sandbox"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader"; import { propsToString } from "@components/sandbox/BaseSerializer" import { + GoabBadge, GoabFileUploadCard, GoabFileUploadInput, GoabFileUploadInputProps, GoabFormItem, GoabTab, - GoabTabs, + GoabTabs } from "@abgov/react-components"; import { ComponentProperties, @@ -18,6 +19,9 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { MarginProperty, TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; interface Uploader { upload: (url: string | ArrayBuffer) => void; @@ -63,6 +67,7 @@ const relatedComponents = [ { link: "/components/container", name: "Container" }, { link: "/components/progress-indicator", name: "Progress indicator" } ]; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=804-5767"; type ComponentPropsType = Omit; type CastingType = { maxFileSize: string; @@ -301,12 +306,19 @@ export default function FileUploaderPage() { return ( <> - + - -

Component

+ +

Playground

{/* ******* */} @@ -658,6 +670,24 @@ export default function FileUploaderPage() { /> + + Examples + + + } + > + + + + + + + + + + diff --git a/src/routes/components/FilterChip.tsx b/src/routes/components/FilterChip.tsx index 8ae1920b4..9eb67d4a3 100644 --- a/src/routes/components/FilterChip.tsx +++ b/src/routes/components/FilterChip.tsx @@ -19,6 +19,8 @@ import { TestIdProperty, } from "@components/component-properties/common-properties.ts"; import { FilterChipExamples } from "@examples/filter-chip/FilterChipExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // Page props const componentName = "Filter Chip"; @@ -30,6 +32,7 @@ const relatedComponents = [ { link: "/components/input", name: "Input" }, { link: "/components/table", name: "Table" }, ]; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=911-5909"; type ComponentPropsType = GoabFilterChipProps; type CastingType = { @@ -117,13 +120,13 @@ export default function FilterChipPage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Filter Chip" /> - -

- Component -

+ +

Playground

@@ -132,16 +135,26 @@ export default function FilterChipPage() { oldProperties={oldComponentProperties} /> - - Design guidelines - + Examples + - }> + } + > + + + + + + + + + + diff --git a/src/routes/components/FormItemPage.tsx b/src/routes/components/FormItemPage.tsx index 67d654efb..c53a243a5 100644 --- a/src/routes/components/FormItemPage.tsx +++ b/src/routes/components/FormItemPage.tsx @@ -15,6 +15,10 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { FormItemExamples } from "@examples/form-item/FormItemExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27284-300347"; export default function FormItemPage() { const {version} = useContext(LanguageVersionContext); @@ -209,7 +213,7 @@ export default function FormItemPage() { <> - +

- Component + Playground

- - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + diff --git a/src/routes/components/FormStepper.tsx b/src/routes/components/FormStepper.tsx index 2dbfff0cb..0fd01b724 100644 --- a/src/routes/components/FormStepper.tsx +++ b/src/routes/components/FormStepper.tsx @@ -22,7 +22,10 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { FormStepperExamples } from "@examples/form-stepper/FormStepperExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=1014-6629"; const componentName = "Form Stepper"; const description = "Provides a visual representation of a form through a series of steps."; const componentCategory = Category.STRUCTURE_AND_NAVIGATION; @@ -109,12 +112,14 @@ export default function FormStepperPage() { category={componentCategory} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Form Stepper" /> - +

- Component + Playground

{/*Must use Container because Form Stepper cannot be rendered correctly inside sandbox*/} @@ -254,18 +259,25 @@ export default function FormStepperPage() { - - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + + diff --git a/src/routes/components/Grid.tsx b/src/routes/components/Grid.tsx index 198b13581..9624fd8c7 100644 --- a/src/routes/components/Grid.tsx +++ b/src/routes/components/Grid.tsx @@ -5,7 +5,7 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader"; -import { GoabBadge, GoabGrid, GoabTab, GoabTabs } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTab, GoabTabs, GoabText } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; export default function GridPage() { @@ -97,14 +97,17 @@ export default function GridPage() { { link: "/patterns/layout", name: "Layout" }, { link: "/components/spacer", name: "Spacer" }, ]} + githubLink="Grid" /> - + +

+ Playground +

{/*Grid sandbox*/} -

Component

- - Design guidelines - - - } - > + + + + To use grid in design, set Figma's built-in{" "} + + auto layout + {" "} + to wrap. This will create a responsive grid pattern that can respond to different screen + sizes, similar to the Grid component in code. + + + diff --git a/src/routes/components/HeroBanner.tsx b/src/routes/components/HeroBanner.tsx index 0dc828226..2fdb74b01 100644 --- a/src/routes/components/HeroBanner.tsx +++ b/src/routes/components/HeroBanner.tsx @@ -11,16 +11,25 @@ import { GoabHeroBannerActions, GoabTab, GoabTabs, + GoabBadge, } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-14412"; export default function HeroBannerPage() { const {version} = useContext(LanguageVersionContext); const [heroBannerProps, setHeroBannerProps] = useState({ heading: "Heading", }); + const relatedComponents = [ + { link: "/components/header", name: "Header" }, + ]; const [heroBannerBindings, setHeroBannerBindings] = useState([ { label: "Heading", @@ -201,32 +210,42 @@ export default function HeroBannerPage() { <> - - {/*Hero Banner Sandbox*/} -

- Component -

+ +

Playground

Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed. + + - - - {/* Examples*/} - + + Examples + + + } + > -

Hero Banner with actions

+ + {version === "old" && + + + + + + + + diff --git a/src/routes/components/IconButton.tsx b/src/routes/components/IconButton.tsx index 3bc562e09..5124a59e8 100644 --- a/src/routes/components/IconButton.tsx +++ b/src/routes/components/IconButton.tsx @@ -16,10 +16,10 @@ import { useState } from "react"; import ICONS from "./icons.json"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabIconType } from "@abgov/ui-components-common"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; -const componentName = "Icon button"; -const description = "A compact button with an icon and no text."; -const componentCategory = Category.INPUTS_AND_ACTIONS; type ComponentPropsType = GoabIconButtonProps; type CastingType = { // add any required props here @@ -31,6 +31,7 @@ export default function IconButtonPage() { icon: "refresh" as GoabIconType, ariaLabel: "Refresh icon", }); + const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302107"; const [iconButtonBindings, setIconButtonBindings] = useState([ { label: "Variant", @@ -206,16 +207,22 @@ export default function IconButtonPage() { return ( <> - -

Component

+ +

Playground

@@ -223,10 +230,21 @@ export default function IconButtonPage() { {/*Component properties table*/} - {/* Examples */} - + + + + Examples + + + } + > -

Show multiple actions in a compact table

+ + @@ -333,14 +351,12 @@ export default function IconButtonPage() { - - Design guidelines - - - }> -

Coming Soon

+ + + + + + diff --git a/src/routes/components/Icons.tsx b/src/routes/components/Icons.tsx index 303c3325d..60598594b 100644 --- a/src/routes/components/Icons.tsx +++ b/src/routes/components/Icons.tsx @@ -5,7 +5,7 @@ import { ComponentProperties, ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; -import { GoabGrid, GoabIcon, GoabTab, GoabTabs } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabIcon, GoabTab, GoabTabs, GoabText } from "@abgov/react-components"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { IconSnippet } from "@components/icon-snippet/IconSnippet.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -16,6 +16,8 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=24019-471310"; + export default function IconsPage() { const [iconsProps, setIconsProps] = useState({ type: ICONS[0] as GoabIconType, @@ -210,14 +212,16 @@ export default function IconsPage() { { link: "/components/icon-button", name: "Icon button" }, { link: "/components/tooltip", name: "Tooltip" }, ]} + figmaLink={FIGMA_LINK} + githubLink="Icons" /> - + {/*Icons Sandbox*/}

- Component + Playground

@@ -225,14 +229,12 @@ export default function IconsPage() { {/*Icons Properties*/} + - {/*Icons example*/} - +

Alert and messaging

- + @@ -244,7 +246,7 @@ export default function IconsPage() {

Basic

- + @@ -252,7 +254,7 @@ export default function IconsPage() {

Direction

- + @@ -268,7 +270,7 @@ export default function IconsPage() {

Interactions

- + @@ -290,13 +292,29 @@ export default function IconsPage() {

Accounts

- + + + + + + The extended icon set includes the full + {" "} + Ionicon 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/components/List.tsx b/src/routes/components/List.tsx index e8198f1d2..d97f5733c 100644 --- a/src/routes/components/List.tsx +++ b/src/routes/components/List.tsx @@ -2,6 +2,10 @@ import { Category, ComponentHeader } from "@components/component-header/Componen import { GoabBadge, GoabContainer, GoabTab, GoabTabs } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303450"; export default function ListPage() { return ( @@ -10,12 +14,26 @@ export default function ListPage() { name="List" category={Category.CONTENT_AND_LAYOUT} description="Organize information into brief and clear groups." - /> + githubLink="List" + figmaLink={FIGMA_LINK} + relatedComponents={[ + { link: "/components/details", name: "Details" }, + ]} /> - - {/*We don't use sandbox because it isn't starting with "GoA" components*/} - + + Examples + + + } + > + + +
  1. An ordered item @@ -125,14 +143,12 @@ export default function ListPage() {
`} /> - {/* Examples*/} - - -

Unordered list

- + + +
  • Milk
  • @@ -144,6 +160,7 @@ export default function ListPage() {
+ - - Design guidelines - - - }> -

Coming Soon

+ + + diff --git a/src/routes/components/MicrositeHeader.tsx b/src/routes/components/MicrositeHeader.tsx index 1095fb080..d0a4dd58a 100644 --- a/src/routes/components/MicrositeHeader.tsx +++ b/src/routes/components/MicrositeHeader.tsx @@ -15,10 +15,14 @@ import { useState } from "react"; import { ComponentContent } from "@components/component-content/ComponentContent"; import MicrositeHeaderExamples from "@examples/microsite-header/MicrositeHeaderExamples.tsx"; import { GoabServiceLevel } from "@abgov/ui-components-common"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=2-81"; const componentName = "Microsite header"; const description = - "Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service."; + "Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service."; const componentCategory = Category.STRUCTURE_AND_NAVIGATION; type ComponentPropsType = GoabHeaderProps; const relatedComponents = [{ link: "/components/header", name: "Header" }]; @@ -214,7 +218,6 @@ export default function MicrositeHeaderPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { setMicrositeHeaderProps(props as CastingType); setMicrositeHeaderBindings(bindings); @@ -227,30 +230,38 @@ export default function MicrositeHeaderPage() { category={componentCategory} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Microsite header" /> - -

Component

+ +

Playground

- - {/*Component properties table*/} - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + + diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx index 3a36b9f56..b681db03b 100644 --- a/src/routes/components/Modal.tsx +++ b/src/routes/components/Modal.tsx @@ -20,9 +20,12 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import ModalExamples from "@examples/modal/ModalExamples.tsx"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13874"; const componentName = "Modal"; const description = "An overlay that appears in front of all other content, and requires a user to take an action before continuing."; @@ -285,14 +288,14 @@ export default function ModalPage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Modal" /> - -

- Component -

+ +

Playground

)} - - - Design guidelines - + Examples + - }> + } + > + + + + + + + + + + diff --git a/src/routes/components/Notificationbanner.tsx b/src/routes/components/Notificationbanner.tsx index 984af7ab2..560fdefbc 100644 --- a/src/routes/components/Notificationbanner.tsx +++ b/src/routes/components/Notificationbanner.tsx @@ -13,9 +13,13 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabNotificationType } from "@abgov/ui-components-common"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import {ExamplesEmpty} from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-12949"; const componentName = "Notification Banner"; const description = "Display important page level information or notifications."; const category = Category.FEEDBACK_AND_ALERTS; @@ -133,13 +137,20 @@ export default function NotificationBannerPage() { return ( <> - + - -

Component

+ +

Playground

Notification banner message @@ -149,11 +160,21 @@ export default function NotificationBannerPage() { - Design guidelines - + Examples + } - > + > + + + + + + + + + + diff --git a/src/routes/components/Pagination.tsx b/src/routes/components/Pagination.tsx index 6dce347d7..684f4c4c5 100644 --- a/src/routes/components/Pagination.tsx +++ b/src/routes/components/Pagination.tsx @@ -23,6 +23,10 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { PaginationExamples } from "@examples/pagination/PaginationExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13964"; type ComponentPropsType = Omit; type CastingType = { @@ -212,13 +216,15 @@ export default function PaginationPage() { category={componentCategory} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Pagination" /> - +

- Component + Playground

- - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + diff --git a/src/routes/components/Popover.tsx b/src/routes/components/Popover.tsx index 84c57f1fa..137baade6 100644 --- a/src/routes/components/Popover.tsx +++ b/src/routes/components/Popover.tsx @@ -15,6 +15,11 @@ import { LegacyTestIdProperties, MarginProperty, TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302109"; export default function PopoverPage() { const {version} = useContext(LanguageVersionContext); @@ -173,14 +178,15 @@ export default function PopoverPage() { { link: "/components/header", name: "Header" }, { link: "/components/tooltip", name: "Tooltip" }, ]} + figmaLink={FIGMA_LINK} + githubLink="Popover" /> - - {/*Popover sandbox*/} -

Component

+ +

Playground

{/*Must be skipRender because Sandbox doesn't support slot target*/} {/*Angular*/} @@ -277,19 +283,27 @@ export default function PopoverPage() { It can be used for a number of different contexts. - - {/*Popover table properties*/} - Design guidelines - + Examples + } - > + > + + + + + + + + + + diff --git a/src/routes/components/ProgressIndicator.tsx b/src/routes/components/ProgressIndicator.tsx index adcda0636..107c3d138 100644 --- a/src/routes/components/ProgressIndicator.tsx +++ b/src/routes/components/ProgressIndicator.tsx @@ -17,9 +17,13 @@ import { resetScrollbars } from "../../utils/styling"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import {ExamplesEmpty} from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13604"; const componentName = "Progress indicator"; const description = "Provide visual feedback to users while loading."; const category = Category.FEEDBACK_AND_ALERTS; @@ -155,26 +159,33 @@ export default function ProgressIndicatorPage() { return ( <> - + - -

Component

+ +

Playground

{ - setVisible(false); - }, 3000); - }` : ''} + const [visible, setVisible] = useState(${visible}); + ${componentProps.variant === 'fullscreen' ? ` + function onClick() { + setVisible(true); + setTimeout(() => { + setVisible(false); + }, 3000); + }` : ''} `} /> { this.visible = false; @@ -202,11 +213,21 @@ export default function ProgressIndicatorPage() { - Design guidelines - + Examples + } - > + > + + + + + + + + + + diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx index 62708c8e2..fc39028b7 100644 --- a/src/routes/components/Radio.tsx +++ b/src/routes/components/Radio.tsx @@ -24,6 +24,8 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == const componentName = "Radio"; @@ -34,6 +36,7 @@ const relatedComponents = [ { link: "/components/dropdown", name: "Dropdown" }, { link: "/components/form-item", name: "Form item" } ]; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=102-26"; type ComponentPropsType = GoabRadioGroupProps; type CastingType = { name: string; @@ -290,14 +293,16 @@ export default function RadioPage() { description={description} category={category} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Radio" /> - + {/*Radio sandbox*/}

- Component + Playground

- - Design guidelines - + Examples + - }> + } + > + + + + + + + + + + diff --git a/src/routes/components/SideMenu.tsx b/src/routes/components/SideMenu.tsx index c814a8cb2..dbb5e5b03 100644 --- a/src/routes/components/SideMenu.tsx +++ b/src/routes/components/SideMenu.tsx @@ -16,6 +16,11 @@ import { Sandbox } from "@components/sandbox"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { useContext } from "react"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=24089-474089"; const componentName = "Side menu"; const description = @@ -122,13 +127,15 @@ export default function SideMenuPage() { category={componentCategory} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Side menu" /> - -

Component

+ +

Playground

{/*Angular code*/} @@ -284,11 +291,20 @@ export default function SideMenuPage() { - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + + diff --git a/src/routes/components/Skeleton.tsx b/src/routes/components/Skeleton.tsx index 1cc589535..d651cd379 100644 --- a/src/routes/components/Skeleton.tsx +++ b/src/routes/components/Skeleton.tsx @@ -6,11 +6,10 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { - GoabBadge, GoabSkeleton, GoabTab, GoabTabs, - GoabSkeletonProps, + GoabSkeletonProps, GoabBlock, GoabText } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabSkeletonType } from "@abgov/ui-components-common"; @@ -19,12 +18,15 @@ import { MarginProperty, TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == -const componentName = "Skeleton loading"; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303445"; +const componentName = "Skeleton loader"; const description = "Provide visual feedback to users while loading a content heavy page or page element."; -const category = Category.CONTENT_AND_LAYOUT; +const category = Category.FEEDBACK_AND_ALERTS; const relatedComponents = [{ link: "/components/progress-indicator", name: "Progress indicator" }]; type ComponentPropsType = GoabSkeletonProps; type CastingType = { @@ -119,7 +121,7 @@ export default function SkeletonPage() { description: "Set component maximum width. Currently only used in card skeleton type", defaultValue: "320px", lang: "react", - }, + }, ]; const componentProperties: ComponentProperty[] = [ { @@ -163,30 +165,124 @@ export default function SkeletonPage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Skeleton loader" /> - - {/*Skeleton Sandbox*/} -

- Component -

+ +

Playground

+ + + + + + + Card + +

Card

+ + + + + + + Image + +

Image

+ + + + + + + Text + +

Text

+ + + + + + + Small text + +

Small text

+ + + + + + + Title + +

Title

+ + + + - {/*Skeleton Properties*/} - + + Header + +

Header

+ + + + + + + Paragraph + +

Paragraph

+ + + + + + + Thumbnail + +

Thumbnail

+ + + + + + + Avatar + +

Avatar

+ + + + + + + Profile + +

Profile

+ + + + + - - Design guidelines - - - }> + + + + + + + diff --git a/src/routes/components/Spacer.tsx b/src/routes/components/Spacer.tsx index ddfe5b769..204c3934a 100644 --- a/src/routes/components/Spacer.tsx +++ b/src/routes/components/Spacer.tsx @@ -7,6 +7,10 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303446"; export default function SpacerPage() { const [hSpacerProps, setHSpacerProps] = useState({}); @@ -111,13 +115,15 @@ export default function SpacerPage() { { link: "/components/grid", name: "Grid" }, { link: "/patterns/layout", name: "Layout" }, ]} + figmaLink={FIGMA_LINK} + githubLink="Spacer" /> - -

Component

+ +

Playground

@@ -152,6 +158,14 @@ export default function SpacerPage() { + + + + + + + + diff --git a/src/routes/components/Table.tsx b/src/routes/components/Table.tsx index ba8c0b95e..33b81f55c 100644 --- a/src/routes/components/Table.tsx +++ b/src/routes/components/Table.tsx @@ -8,7 +8,6 @@ import { Category, ComponentHeader } from "@components/component-header/Componen import { GoabBadge, GoabButton, - GoabContainer, GoabTab, GoabTable, GoabTableSortHeader, @@ -21,6 +20,9 @@ import { GoabTableOnSortDetail } from "@abgov/ui-components-common"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { TableWithGlobalFiltersExample } from "@examples/filter-chip/TableWithGlobalFiltersExample.tsx"; import { omit } from "lodash"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; interface User { firstName: string; @@ -37,6 +39,7 @@ export default function TablePage() { const [tableProps, setTableProps] = useState({ width: "100%", }); + const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=3785-18038"; const [tableBindings, setTableBindings] = useState([ { label: "Width", @@ -168,11 +171,14 @@ export default function TablePage() { { link: "/components/pagination", name: "Pagination" }, { link: "/components/tabs", name: "Tabs" }, ]} + githubLink="Table" + figmaLink={FIGMA_LINK} /> - + +

Playground

- - + + + + Examples + + + } + > + -

Sortable columns

- -
+ + + @@ -271,9 +283,8 @@ export default function TablePage() { ))} -
- + {/*React code*/} {version === "old" && ( )} -

Number column

+ + @@ -613,13 +627,13 @@ export default function TablePage() { - - Design guidelines - - - }> + + + + + + + diff --git a/src/routes/components/Tabs.tsx b/src/routes/components/Tabs.tsx index 1a2e8b3be..5fabca192 100644 --- a/src/routes/components/Tabs.tsx +++ b/src/routes/components/Tabs.tsx @@ -15,12 +15,15 @@ import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { useContext } from "react"; import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { TabsExamples } from "@examples/tabs/TabsExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == const componentName = "Tabs"; const description = "Let users navigate between related sections of content, displaying one section at a time."; const category = Category.STRUCTURE_AND_NAVIGATION; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=25293-519360"; export default function TabsPage() { const { version } = useContext(LanguageVersionContext); const oldComponentProperties: ComponentProperty[] = [ @@ -91,13 +94,19 @@ export default function TabsPage() { return ( <> - + - +

- Component + Playground

{/*Cannot use Sandbox because if we change the language/version, the tabs inside the tabs will make the below bugs:*/} {/*1. Scroll down to an example*/} @@ -275,15 +284,23 @@ export default function TabsPage() { oldProperties={oldTabProperties} /> - - Design guidelines - + Examples + - }> + } + > + + + + + + + + diff --git a/src/routes/components/Text.tsx b/src/routes/components/Text.tsx index 2d5fe7545..afa98ba2b 100644 --- a/src/routes/components/Text.tsx +++ b/src/routes/components/Text.tsx @@ -6,6 +6,11 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { GoabText, GoabTab, GoabTabs, GoabBadge } from "@abgov/react-components"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; + +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303449"; export default function TextPage() { const [textProps, setTextProps] = useState({}); @@ -30,7 +35,7 @@ export default function TextPage() { type: "string", name: "maxWidth", value: "" - }, + }, { label: "Color", type: "list", @@ -96,28 +101,40 @@ export default function TextPage() { name="Text" category={Category.CONTENT_AND_LAYOUT} description="Provides consistent sizing, spacing, and colour to written content." + figmaLink={FIGMA_LINK} + githubLink="Text" /> - + +

Playground

- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. - - + - Design guidelines - + Examples + } - > + > + + + + + + + + + + ); diff --git a/src/routes/components/TextArea.tsx b/src/routes/components/TextArea.tsx index 041bed539..197c13e8f 100644 --- a/src/routes/components/TextArea.tsx +++ b/src/routes/components/TextArea.tsx @@ -23,9 +23,12 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { TextAreaExamples } from "@examples/textarea/TextAreaExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=133-186"; const componentName = "Text area"; const description = "A multi-line field where users can input and edit text."; const category = Category.INPUTS_AND_ACTIONS; @@ -342,13 +345,15 @@ export default function TextAreaPage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Text area" /> - +

- Component + Playground

- - {/*Examples*/} - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + + diff --git a/src/routes/components/TextField.tsx b/src/routes/components/TextField.tsx index bf9d97b10..21e364ea2 100644 --- a/src/routes/components/TextField.tsx +++ b/src/routes/components/TextField.tsx @@ -27,6 +27,10 @@ import { } from "@components/component-properties/common-properties.ts"; import { omit } from "lodash"; +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=33054-34641"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + // == Page props == const componentName = "Input"; const description = "A single-line field where users can input and edit text."; @@ -590,14 +594,16 @@ export default function TextFieldPage() { category={category} description={description} relatedComponents={relatedComponents} + figmaLink={FIGMA_LINK} + githubLink="Input" /> - + {/*Input sandbox*/} -

Component

+

Playground

{/*Examples*/} - - Design guidelines - + Examples + - }> -

Coming Soon

+ } + > + + + + + + + + ); } + diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index 16936e81d..77f7de7a1 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -21,9 +21,12 @@ import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { TooltipExamples } from "@examples/tooltip/TooltipExamples.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == +const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=21932-557049"; const componentName = "Tooltip"; const description = "A small popover that displays more information about an item."; const relatedComponents = [ @@ -114,8 +117,6 @@ export default function TooltipPage() { setComponentProps(props as CastingType); } - - return ( <> - -

Component

+ +

Playground

- - - - - - - - - Design guidelines - + Examples + } - > + > + + + + + + + + + + diff --git a/src/routes/content/ContentLayout.tsx b/src/routes/content/ContentLayout.tsx index b82e47c65..24a64c32e 100644 --- a/src/routes/content/ContentLayout.tsx +++ b/src/routes/content/ContentLayout.tsx @@ -1,4 +1,4 @@ -import { GoabSideMenu, GoabSideMenuHeading } from "@abgov/react-components"; +import { GoabSideMenu, GoabSpacer } from "@abgov/react-components"; import { Link, Outlet } from "react-router-dom"; import "./content.css"; import { SupportInfo } from "@components/support-info/SupportInfo"; @@ -8,7 +8,7 @@ export default function ContentLayout() {
- Content + Capitalization Date format Error messages diff --git a/src/routes/design-tokens/DesignTokenLayout.tsx b/src/routes/design-tokens/DesignTokenLayout.tsx index 52ecb72a5..a81f448ba 100644 --- a/src/routes/design-tokens/DesignTokenLayout.tsx +++ b/src/routes/design-tokens/DesignTokenLayout.tsx @@ -39,10 +39,10 @@ export function DesignTokenLayout() { All - Border Radius - Border Width + Border radius + Border width Color - Icon Size + Icon size Opacity Shadow Spacing diff --git a/src/routes/design-tokens/border-radius/BorderRadius.css b/src/routes/design-tokens/border-radius/BorderRadius.css index d74225ef2..2cfa86e6d 100644 --- a/src/routes/design-tokens/border-radius/BorderRadius.css +++ b/src/routes/design-tokens/border-radius/BorderRadius.css @@ -2,4 +2,5 @@ height: 24px; width: 64px; background-color: var(--goa-color-greyscale-400); + margin-top: 2px; } diff --git a/src/routes/design-tokens/border-radius/BorderRadius.tsx b/src/routes/design-tokens/border-radius/BorderRadius.tsx index bfb85a69e..ebff7fd56 100644 --- a/src/routes/design-tokens/border-radius/BorderRadius.tsx +++ b/src/routes/design-tokens/border-radius/BorderRadius.tsx @@ -4,7 +4,7 @@ import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./BorderRadius.css"; import { Token } from "../token"; import { getTokenGroups } from "../getTokenGroups"; -import { DeviceWidthContext } from "../../../contexts/DeviceWidthContext"; +import { DeviceWidthContext } from "@contexts/DeviceWidthContext.tsx"; import { getCssVarValue } from "../../../utils/styling"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -14,13 +14,43 @@ export default function BorderRadiusPage() { tokenName: "goa-border-radius-none", rem: "0rem", px: "0px", - figmaUsage: "Border Radius/None.", + figmaUsage: "Border-radius/None", + }, + { + tokenName: "goa-border-radius-s", + rem: "0.125rem", + px: "2px", + figmaUsage: "Border-radius/Small", }, { tokenName: "goa-border-radius-m", rem: "0.25rem", px: "4px", - figmaUsage: "Border Radius/Medium", + figmaUsage: "Border-radius/Medium", + }, + { + tokenName: "goa-border-radius-l", + rem: "0.375rem", + px: "6px", + figmaUsage: "Border-radius/Large", + }, + { + tokenName: "goa-border-radius-xl", + rem: "0.5rem", + px: "8px", + figmaUsage: "Border-radius/XLarge", + }, + { + tokenName: "goa-border-radius-2xl", + rem: "0.625rem", + px: "10px", + figmaUsage: "Border-radius/2XLarge", + }, + { + tokenName: "goa-border-radius-3xl", + rem: "0.75rem", + px: "12px", + figmaUsage: "Border-radius/3XLarge", }, ]; const { isDesktop } = useContext(DeviceWidthContext); @@ -31,10 +61,10 @@ export default function BorderRadiusPage() { - Token name + Design token rem px - Figma variable + Figma @@ -63,7 +93,7 @@ export default function BorderRadiusPage() { const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token, idx) => ( <> @@ -74,11 +104,11 @@ export default function BorderRadiusPage() { borderRadius: getCssVarValue(`--${token.tokenName}`), }} /> - +
-
rem
{token.rem}
-
px
{token.px}
-
Figma variable
{token.figmaUsage}
+
rem
{token.rem}
+
px
{token.px}
+
Figma variable
{token.figmaUsage}
diff --git a/src/routes/design-tokens/border-width/BorderWidth.css b/src/routes/design-tokens/border-width/BorderWidth.css index c099fa16c..adecfd585 100644 --- a/src/routes/design-tokens/border-width/BorderWidth.css +++ b/src/routes/design-tokens/border-width/BorderWidth.css @@ -1,4 +1,5 @@ .border-width-page div.token-block { width: 64px; background-color: #333333; + margin-top: 12px; } diff --git a/src/routes/design-tokens/border-width/BorderWidth.tsx b/src/routes/design-tokens/border-width/BorderWidth.tsx index 44c1f8ff0..3299e4f3b 100644 --- a/src/routes/design-tokens/border-width/BorderWidth.tsx +++ b/src/routes/design-tokens/border-width/BorderWidth.tsx @@ -10,23 +10,47 @@ import { ComponentContent } from "@components/component-content/ComponentContent export default function BorderWidthPage() { const tokens: Token[] = [ + { + tokenName: "goa-border-width-none", + rem: "0rem", + px: "0px", + figmaUsage: "Border-width/None", + }, + { + tokenName: "goa-border-width-2xs", + rem: "0.03125rem", + px: "0.5px", + figmaUsage: "Border-width/2XSmall", + }, + { + tokenName: "goa-border-width-xs", + rem: "0.04375rem", + px: "0.7px", + figmaUsage: "Border-width/XSmall", + }, { tokenName: "goa-border-width-s", rem: "0.0625rem", px: "1px", - figmaUsage: "Use a border width of 1px.", + figmaUsage: "Border-width/Small", }, { tokenName: "goa-border-width-m", rem: "0.125rem", px: "2px", - figmaUsage: "Use a border width of 2px.", + figmaUsage: "Border-width/Medium", }, { tokenName: "goa-border-width-l", rem: "0.1875rem", px: "3px", - figmaUsage: "Use a border width of 3px.", + figmaUsage: "Border-width/Large", + }, + { + tokenName: "goa-border-width-xl", + rem: "0.25rem", + px: "4px", + figmaUsage: "Border-width/XLarge", }, ]; const { isDesktop } = useContext(DeviceWidthContext); @@ -37,10 +61,10 @@ export default function BorderWidthPage() { - Token name + Design token rem px - Figma usage + Figma @@ -69,7 +93,7 @@ export default function BorderWidthPage() { const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token, idx) => ( @@ -79,11 +103,11 @@ export default function BorderWidthPage() { height: getCssVarValue(`--${token.tokenName}`), }} /> - +
-
rem
{token.rem}
-
px
{token.px}
-
Figma usage
{token.figmaUsage}
+
rem
{token.rem}
+
px
{token.px}
+
Figma usage
{token.figmaUsage}
 )) diff --git a/src/routes/design-tokens/color/Color.css b/src/routes/design-tokens/color/Color.css index ed109b4bf..314ab092b 100644 --- a/src/routes/design-tokens/color/Color.css +++ b/src/routes/design-tokens/color/Color.css @@ -1,12 +1,20 @@ .colors-page div.token-block { height: 22px; width: 24px; - border-radius: var(--goa-border-radius-m); + border-radius: var(--goa-border-radius-l); + margin-top: 4px; } .colors-page a { margin-right: 0.5rem; } +.dd-style { + margin-left: 0; + margin-bottom: 12px; +} +.dd-style:last-of-type { + margin-bottom: 0; +} .colors-page p.category { margin-bottom: 1rem; @@ -16,10 +24,6 @@ line-height: var(--goa-line-height-4); } -.colors-page td[rowspan] { - border-right: 1px solid #dcdcdc; -} - /*Tablet*/ @media screen and (max-width: 1231px) { .colors-page div.token-block { @@ -30,9 +34,7 @@ /*Mobile*/ @media screen and (max-width: 623px) { .colors-page p.category { - font-size: var(--goa-font-size-4); - font-weight: var(--goa-font-weight-bold); - line-height: var(--goa-line-height-3); margin-top: 0; + margin-left: 0; } } diff --git a/src/routes/design-tokens/color/Color.tsx b/src/routes/design-tokens/color/Color.tsx index 1d66c4388..eab8cd91f 100644 --- a/src/routes/design-tokens/color/Color.tsx +++ b/src/routes/design-tokens/color/Color.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Color.css"; import COLORS from "./colors.json"; @@ -25,57 +25,66 @@ export default function ColorPage() { const renderDesktop = () => { return ( - - - - Type - - Token - Hex value - Figma color style - Description - - - - {colors.map((color, index) => ( - - {color.tokens.map((token, tokenIndex) => ( - - {tokenIndex === 0 && {color.name}} - -
- - - - - {token.value} - {token.figmaColorStyle} - {token.description} + <> + {colors.map((color, index) => ( +
+ {color.name} + + + + + Design token + Hex code + Figma - ))} - - ))} - - + + + {color.tokens.map((token, tokenIndex) => ( + + +
+ + + + + {token.value} + {token.figmaColorStyle} + + {/* + + {token.description && ( + + {token.description} + + )} + + */} + + + ))} + + +
+ ))} + ); }; const renderTablet = () => { return (
- <> {colors.map((color, index) => (

{color.name}

- + {color.tokens.map((token, tokenIndex) => (
- +
-
Hex value
{token.value}
-
Figma colour style
{token.figmaColorStyle}
-
Description
{token.description}
+
Hex value
{token.value}
+
Figma colour style
{token.figmaColorStyle}
+
Description
{token.description}
))} ))} -
); }; diff --git a/src/routes/design-tokens/color/colors.json b/src/routes/design-tokens/color/colors.json index 8d75702d7..98ffe9876 100644 --- a/src/routes/design-tokens/color/colors.json +++ b/src/routes/design-tokens/color/colors.json @@ -14,6 +14,18 @@ "figmaColorStyle": "Interactive/Hover", "description": "Hover state for interactive elements." }, + { + "code": "goa-color-interactive-disabled", + "value": "#80B7E1", + "figmaColorStyle": "Interactive/Disabled", + "description": "Disabled state for interactive elements." + }, + { + "code": "goa-color-interactive-visited", + "value": "#756693", + "figmaColorStyle": "Interactive/Visited", + "description": "Visited state for links." + }, { "code": "goa-color-interactive-focus", "value": "#FEBA35", @@ -26,12 +38,6 @@ "figmaColorStyle": "Interactive/Error", "description": "Error state for interactive elements." }, - { - "code": "goa-color-interactive-disabled", - "value": "#80B7E1", - "figmaColorStyle": "Interactive/Disabled", - "description": "Disabled state for interactive elements." - }, { "code": "goa-color-interactive-error-hover", "value": "#BA0000", @@ -114,7 +120,7 @@ "description": "" }, { - "code": "goa-color-brand-light", + "code": "goa-color-info-dark", "value": "#003B70", "figmaColorStyle": "Status/Info/Dark", "description": "" @@ -214,18 +220,36 @@ "figmaColorStyle": "Greyscale/White", "description": "" }, + { + "code": "goa-color-greyscale-50", + "value": "#F8F8F8", + "figmaColorStyle": "Greyscale/50", + "description": "" + }, { "code": "goa-color-greyscale-100", "value": "#F1F1F1", "figmaColorStyle": "Greyscale/100", "description": "" }, + { + "code": "goa-color-greyscale-150", + "value": "#E7E7E7", + "figmaColorStyle": "Greyscale/150", + "description": "" + }, { "code": "goa-color-greyscale-200", "value": "#DCDCDC", "figmaColorStyle": "Greyscale/200", "description": "" }, + { + "code": "goa-color-greyscale-300", + "value": "#C2C2C2", + "figmaColorStyle": "Greyscale/300", + "description": "" + }, { "code": "goa-color-greyscale-400", "value": "#ADADAD", @@ -250,12 +274,127 @@ "figmaColorStyle": "Greyscale/700", "description": "" }, + { + "code": "goa-color-greyscale-800", + "value": "#5C5C5C", + "figmaColorStyle": "Greyscale/800", + "description": "" + }, + { + "code": "goa-color-greyscale-900", + "value": "#474747", + "figmaColorStyle": "Greyscale/900", + "description": "" + }, { "code": "goa-color-greyscale-black", "value": "#333333", "figmaColorStyle": "Greyscale/Black", "description": "" } + + ] + }, + { + "name": "Extended", + "tokens": [ + { + "code": "goa-color-extended-aqua", + "value": "#7FEBE6", + "figmaColorStyle": "Extended/Aqua", + "description": "" + }, + { + "code": "goa-color-extended-light-aqua", + "value": "#DCFBF8", + "figmaColorStyle": "Extended/Light/Aqua", + "description": "" + }, + { + "code": "goa-color-extended-blue", + "value": "#AAC9E7", + "figmaColorStyle": "Extended/Blue", + "description": "" + }, + { + "code": "goa-color-extended-light-blue", + "value": "#DDEFFF", + "figmaColorStyle": "Extended/Light/Blue", + "description": "" + }, + { + "code": "goa-color-extended-green", + "value": "#BBFCB4", + "figmaColorStyle": "Extended/Green", + "description": "" + }, + { + "code": "goa-color-extended-light-green", + "value": "#CCE2D9", + "figmaColorStyle": "Extended/Light/Green", + "description": "" + }, + { + "code": "goa-color-extended-orange", + "value": "#FFC76D", + "figmaColorStyle": "Extended/Orange", + "description": "" + }, + { + "code": "goa-color-extended-light-orange", + "value": "#FCD6C3", + "figmaColorStyle": "Extended/Light/Orange", + "description": "" + }, + { + "code": "goa-color-extended-pink", + "value": "#FF8FC5", + "figmaColorStyle": "Extended/Pink", + "description": "" + }, + { + "code": "goa-color-extended-light-pink", + "value": "#F9E1EB", + "figmaColorStyle": "Extended/Light/Pink", + "description": "" + }, + { + "code": "goa-color-extended-red", + "value": "#ED948D", + "figmaColorStyle": "Extended/Red", + "description": "" + }, + { + "code": "goa-color-extended-light-red", + "value": "#F4CDC6", + "figmaColorStyle": "Extended/Light/Red", + "description": "" + }, + { + "code": "goa-color-extended-violet", + "value": "#D4C2FF", + "figmaColorStyle": "Extended/Violet", + "description": "" + }, + { + "code": "goa-color-extended-light-violet", + "value": "#EFE2FB", + "figmaColorStyle": "Extended/Light/Violet", + "description": "" + }, + { + "code": "goa-color-extended-yellow", + "value": "#FCE796", + "figmaColorStyle": "Extended/Yellow", + "description": "" + }, + { + "code": "goa-color-extended-light-yellow", + "value": "#FFF7BF", + "figmaColorStyle": "Extended/Light/Yellow", + "description": "" + } ] } ] + diff --git a/src/routes/design-tokens/icon-size/IconSize.css b/src/routes/design-tokens/icon-size/IconSize.css index 86882536e..ba3443e6f 100644 --- a/src/routes/design-tokens/icon-size/IconSize.css +++ b/src/routes/design-tokens/icon-size/IconSize.css @@ -1,4 +1,7 @@ .icon-size div.icon { + display: flex; + align-items: center; + justify-content: center; border-radius: var(--goa-border-radius-none); background-color: var(--goa-color-emergency-background); } @@ -17,3 +20,33 @@ height: 32px; width: 32px; } + +.goa-icon-size-1 { + height: 16px; + width: 16px; +} + +.goa-icon-size-2 { + height: 18px; + width: 18px; +} + +.goa-icon-size-3 { + height: 20px; + width: 20px; +} + +.goa-icon-size-4 { + height: 24px; + width: 24px; +} + +.goa-icon-size-5 { + height: 32px; + width: 32px; +} + +.goa-icon-size-6 { + height: 40px; + width: 40px; +} \ No newline at end of file diff --git a/src/routes/design-tokens/icon-size/IconSize.tsx b/src/routes/design-tokens/icon-size/IconSize.tsx index 2bba84369..871af740a 100644 --- a/src/routes/design-tokens/icon-size/IconSize.tsx +++ b/src/routes/design-tokens/icon-size/IconSize.tsx @@ -14,27 +14,70 @@ interface IconSizeToken extends Token { export default function IconSizePage() { const tokens: IconSizeToken[] = [ + { + tokenName: "goa-icon-size-1", + rem: "1rem", + px: "16px", + figmaUsage: "Icon-size/1", + size: "1", + }, + { + tokenName: "goa-icon-size-2", + rem: "1.125rem", + px: "18px", + figmaUsage: "Icon-size/2", + size: "2", + }, + { + tokenName: "goa-icon-size-3", + rem: "1.25rem", + px: "20px", + figmaUsage: "Icon-size/3", + size: "3", + }, + { + tokenName: "goa-icon-size-4", + rem: "1.5rem", + px: "24px", + figmaUsage: "Icon-size/4", + size: "4", + }, + { + tokenName: "goa-icon-size-5", + rem: "2rem", + px: "32px", + figmaUsage: "Icon-size/5", + size: "5", + }, + { + tokenName: "goa-icon-size-6", + rem: "2.5rem", + px: "40px", + figmaUsage: "Icon-size/6", + size: "6", + }, { tokenName: "goa-icon-size-s", rem: "1rem", px: "16px", - figmaUsage: "Icon Size/Small", + figmaUsage: "Icon-size/Small", size: "small", }, { tokenName: "goa-icon-size-m", rem: "1.25rem", px: "20px", - figmaUsage: "Icon Size/Medium", + figmaUsage: "Icon-size/Medium", size: "medium", }, { tokenName: "goa-icon-size-l", rem: "1.5rem", px: "24px", - figmaUsage: "Icon Size/Large", + figmaUsage: "Icon-size/Large", size: "large", }, + ]; const { isDesktop } = useContext(DeviceWidthContext); @@ -44,10 +87,10 @@ export default function IconSizePage() { - Token name + Design token rem px - Figma usage + Figma @@ -55,7 +98,7 @@ export default function IconSizePage() {
- +
@@ -73,18 +116,18 @@ export default function IconSizePage() { const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token: IconSizeToken, idx: number) => (
- +
-
rem
{token.rem}
-
px
{token.px}
-
Figma usage
{token.figmaUsage}
+
rem
{token.rem}
+
px
{token.px}
+
Figma usage
{token.figmaUsage}
 )) diff --git a/src/routes/design-tokens/opacity/Opacity.css b/src/routes/design-tokens/opacity/Opacity.css index 383309508..9a00d4afe 100644 --- a/src/routes/design-tokens/opacity/Opacity.css +++ b/src/routes/design-tokens/opacity/Opacity.css @@ -13,3 +13,7 @@ margin-left: 1rem; margin-top: 0.25rem; } + +.opacity-thumbnail { + margin-top: 2px; +} \ No newline at end of file diff --git a/src/routes/design-tokens/opacity/Opacity.tsx b/src/routes/design-tokens/opacity/Opacity.tsx index 39f3a7b32..373ebb416 100644 --- a/src/routes/design-tokens/opacity/Opacity.tsx +++ b/src/routes/design-tokens/opacity/Opacity.tsx @@ -18,12 +18,12 @@ export default function OpacityPage() { { tokenName: "goa-opacity-background-modal", percentage: "50%", - figmaUsage: "Fill: opacity/background/modal", + figmaUsage: "Fill: Opacity/Background/Modal", }, { tokenName: "goa-opacity-background-loading", percentage: "90%", - figmaUsage: "Fill: opacity/background/loading", + figmaUsage: "Fill: Opacity/Background/Loading", }, ]; const { isDesktop } = useContext(DeviceWidthContext); @@ -34,16 +34,16 @@ export default function OpacityPage() { - Token name + Design token % - Figma style + Figma {tokens.map((token, index) => ( -
+
{ return ( - + {getTokenGroups(tokens).map(group => group.map((token: Token, idx: number) => ( @@ -80,10 +80,10 @@ export default function OpacityPage() { }} >
- +
-
%
{token.percentage}
-
Figma usage
{token.figmaUsage}
+
%
{token.percentage}
+
Figma usage
{token.figmaUsage}
)) diff --git a/src/routes/design-tokens/overview/Overview.tsx b/src/routes/design-tokens/overview/Overview.tsx index 147ea48e7..964933de2 100644 --- a/src/routes/design-tokens/overview/Overview.tsx +++ b/src/routes/design-tokens/overview/Overview.tsx @@ -1,10 +1,12 @@ -import { GoabContainer } from "@abgov/react-components"; +import { GoabContainer, GoabText } from "@abgov/react-components"; import "./Overview.css"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; export default function DesignTokensOverviewPage() { return ( -

Styles

+ + Design Tokens +

We use design tokens to communicate design decisions across design and development. These design decisions are a limited set of options for spacing, colour, typography, object @@ -27,13 +29,13 @@ export default function DesignTokensOverviewPage() { product teams.

- -

Design token example

-

+ + Example of a design token + The GoA’s colour for a hover interaction is #004F84. This property is defined as a design token called --goa-color-interactive-hover. This token is used in Figma as a style and used in code as CSS or SASS variables -

+

What this means for...

diff --git a/src/routes/design-tokens/shadow/Shadow.css b/src/routes/design-tokens/shadow/Shadow.css index a2fb354ed..3c84d1eb6 100644 --- a/src/routes/design-tokens/shadow/Shadow.css +++ b/src/routes/design-tokens/shadow/Shadow.css @@ -1,7 +1,41 @@ .shadow-page .token-block { - height: 24px; - width: 24px; + height: 64px; + width: 64px; border-radius: var(--goa-border-radius-none); - background-color: var(--goa-color-greyscale-black); + background-color: var(--goa-color-greyscale-50); + margin-top: 2px; +} + +/* Individual shadow tokens */ + +.goa-shadow-modal { box-shadow: 6px 6px 6px 0 rgba(0, 0, 0, 0.16); } + +.goa-shadow-100 { + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.16); +} + +.goa-shadow-150 { + box-shadow: 0 1px 0 0 #1a1a1a40; +} + +.goa-shadow-200 { + box-shadow: 0 3px 1px -1px #1a1a1a12; +} + +.goa-shadow-300 { + box-shadow: 0 4px 6px -2px #1a1a1a33; +} + +.goa-shadow-400 { + box-shadow: 0 8px 16px -4px #1a1a1a38; +} + +.goa-shadow-500 { + box-shadow: 0 12px 20px -8px #1a1a1a3D; +} + +.goa-shadow-600 { + box-shadow: 0 20px 20px -8px #1a1a1a47; +} \ No newline at end of file diff --git a/src/routes/design-tokens/shadow/Shadow.tsx b/src/routes/design-tokens/shadow/Shadow.tsx index cb00423ed..15c7dab36 100644 --- a/src/routes/design-tokens/shadow/Shadow.tsx +++ b/src/routes/design-tokens/shadow/Shadow.tsx @@ -17,8 +17,44 @@ export default function ShadowPage() { { tokenName: "goa-shadow-modal", value: "x=6, y=6, blur=6, spread=0, rgba(0,0,0,0.16)", - figmaUsage: "Effect: Drop Shadow/Modal", + figmaUsage: "Effect: Drop-shadow/Modal", }, + { + tokenName: "goa-shadow-100", + value: "x=0, y=1, blur=0, spread=0, #1A1A1A12", + figmaUsage: "Effect: Drop-shadow/100", + }, + { + tokenName: "goa-shadow-150", + value: "x=0, y=1, blur=0, spread=0, #1A1A1A40", + figmaUsage: "Effect: Drop-shadow/150", + }, + { + tokenName: "goa-shadow-200", + value: "x=0, y=3, blur=1, spread=-1, #1A1A1A12", + figmaUsage: "Effect: Drop-shadow/200", + }, + { + tokenName: "goa-shadow-300", + value: "x=0, y=4, blur=6, spread=-2, #1A1A1A33", + figmaUsage: "Effect: Drop-shadow/300", + }, + { + tokenName: "goa-shadow-400", + value: "x=0, y=8, blur=16, spread=-4, #1A1A1A38", + figmaUsage: "Effect: Drop-shadow/400", + }, + { + tokenName: "goa-shadow-500", + value: "x=0, y=12, blur=20, spread=-8, #1A1A1A3D", + figmaUsage: "Effect: Drop-shadow/500", + }, + { + tokenName: "goa-shadow-600", + value: "x=0, y=20, blur=20, spread=-8, #1A1A1A47", + figmaUsage: "Effect: Drop-shadow/600", + }, + ]; const { isDesktop } = useContext(DeviceWidthContext); @@ -28,16 +64,16 @@ export default function ShadowPage() { - Token name + Design token Value - Figma usage + Figma {tokens.map((token, index) => ( -
+
@@ -53,20 +89,22 @@ export default function ShadowPage() { const renderMobile = () => { return ( - - {getTokenGroups(tokens).map(group => - group.map((token: Token, idx: number) => ( - -
- -
-
Value
{token.value}
-
Figma usage
{token.figmaUsage}
-
- - )) - )} - +
+ + {getTokenGroups(tokens).map(group => + group.map((token: Token, idx: number) => ( + +
+ +
+
Value
{token.value}
+
Figma usage
{token.figmaUsage}
+
+ + )) + )} + +
); }; diff --git a/src/routes/design-tokens/spacing/Spacing.css b/src/routes/design-tokens/spacing/Spacing.css index adc7c28f9..909a08681 100644 --- a/src/routes/design-tokens/spacing/Spacing.css +++ b/src/routes/design-tokens/spacing/Spacing.css @@ -2,6 +2,7 @@ .spacing-page div.represent { display: flex; align-items: center; + margin-top: 4px; } .spacing-page div.grey-circle { diff --git a/src/routes/design-tokens/spacing/Spacing.tsx b/src/routes/design-tokens/spacing/Spacing.tsx index 5ddbab548..b942561d2 100644 --- a/src/routes/design-tokens/spacing/Spacing.tsx +++ b/src/routes/design-tokens/spacing/Spacing.tsx @@ -25,10 +25,10 @@ export default function SpacingPage() { - Token name + Design token rem px - Figma variable + Figma @@ -61,7 +61,7 @@ export default function SpacingPage() { const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token: Token, idx: number) => ( @@ -75,11 +75,11 @@ export default function SpacingPage() { >
- +
-
REM
{token.rem}
-
PX
{token.px}
-
Figma usage
{token.figmaUsage}
+
REM
{token.rem}
+
PX
{token.px}
+
Figma usage
{token.figmaUsage}
)) diff --git a/src/routes/design-tokens/typography/Typography.tsx b/src/routes/design-tokens/typography/Typography.tsx index f468f0cb3..1814e2ad7 100644 --- a/src/routes/design-tokens/typography/Typography.tsx +++ b/src/routes/design-tokens/typography/Typography.tsx @@ -25,7 +25,7 @@ export default function TypographyPage() { - Figma type style + Design token Type family Weight @@ -55,7 +55,7 @@ export default function TypographyPage() { const renderMobile = () => { return ( - + {getTokenGroups(tokens as Token[]).map(group => group.map((token: TypographyToken, idx: number) => ( @@ -64,12 +64,12 @@ export default function TypographyPage() { {token.figmaTypeStyle}
- +
-
Type family
{token.typeFamily}
-
Weight
{token.weight}
-
Font size
{token.fontSize}
-
Line height
{token.lineHeight}
+
Type family
{token.typeFamily}
+
Weight
{token.weight}
+
Font size
{token.fontSize}
+
Line height
{token.lineHeight}
 )) diff --git a/src/routes/design-tokens/typography/typography.json b/src/routes/design-tokens/typography/typography.json index 4688a5193..1c3e2fc14 100644 --- a/src/routes/design-tokens/typography/typography.json +++ b/src/routes/design-tokens/typography/typography.json @@ -40,7 +40,7 @@ "lineHeight": "24px | 1.5rem" }, { - "figmaTypeStyle": "Large text", + "figmaTypeStyle": "Large body", "tokenName": "goa-typography-body-l", "typeFamily": "Acumin Pro SemiCondensed", "weight": "Regular", @@ -48,7 +48,7 @@ "lineHeight": "32px | 2rem" }, { - "figmaTypeStyle": "Medium text", + "figmaTypeStyle": "Medium body", "tokenName": "goa-typography-body-m", "typeFamily": "Acumin Pro SemiCondensed", "weight": "Regular", @@ -56,7 +56,7 @@ "lineHeight": "28px | 1.75rem" }, { - "figmaTypeStyle": "Small text", + "figmaTypeStyle": "Small body", "tokenName": "goa-typography-body-s", "typeFamily": "Acumin Pro SemiCondensed", "weight": "Regular", @@ -64,13 +64,21 @@ "lineHeight": "24px | 1.5rem" }, { - "figmaTypeStyle": "XSmall text", + "figmaTypeStyle": "XSmall body", "tokenName": "goa-typography-body-xs", "typeFamily": "Acumin Pro SemiCondensed", "weight": "Regular", "fontSize": "14px | 0.875rem", "lineHeight": "20px | 1.25rem" }, + { + "figmaTypeStyle": "Large number", + "tokenName": "goa-typography-number-l", + "typeFamily": "Roboto Mono", + "weight": "Regular", + "fontSize": "24px | 1.5rem", + "lineHeight": "32px | 2rem" + }, { "figmaTypeStyle": "Medium number", "tokenName": "goa-typography-number-m", @@ -78,5 +86,13 @@ "weight": "Regular", "fontSize": "18px | 1.125rem", "lineHeight": "28px | 1.75rem" + }, + { + "figmaTypeStyle": "Small number", + "tokenName": "goa-typography-number-s", + "typeFamily": "Roboto Mono", + "weight": "Regular", + "fontSize": "16px | 1rem", + "lineHeight": "24px | 1.5rem" } ] diff --git a/src/routes/root.css b/src/routes/root.css index 69e910012..ab621d846 100644 --- a/src/routes/root.css +++ b/src/routes/root.css @@ -15,7 +15,7 @@ } .content { - max-width: 1360px; + max-width: 1440px; width: 100%; margin: 0 auto; display: flex; @@ -26,7 +26,8 @@ Side Menu ==================*/ .side-menu { - min-width: 192px; + min-width: 180px; + width: 180px; border-right: 1px solid var(--goa-color-greyscale-200); padding-bottom: var(--goa-space-l); } @@ -103,7 +104,7 @@ a.back:hover::before { } code { - font: var(--goa-typography-number-m); + font: var(--goa-typography-number-s); } /*Tablet*/ diff --git a/src/routes/root.tsx b/src/routes/root.tsx index 7dbd1914b..d7d0ff142 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -60,9 +60,9 @@ export default function Root() { Get started Patterns Components - Styles + Tokens Content - Support + Get support
@@ -73,12 +73,12 @@ export default function Root() {
- + Get started Patterns Components - Styles + Tokens Content @@ -86,9 +86,9 @@ export default function Root() { #design-system-support - Contribute to the design system - Give feedback - Release notes + Contribute to the design system + Roadmap + Release notes
diff --git a/src/utils/index.ts b/src/utils/index.ts index 60b00509a..afb57330a 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -5,3 +5,106 @@ export function toKebabCase(str: string) { .replace(/([a-z])([A-Z])/g, '$1-$2') // Convert camelCase to kebab-case .toLowerCase(); // Convert to lowercase } + +export const toSentenceCase = (str: string) => { + return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); +}; + +export async function fetchAllIssueCounts(cards: { name: string }[]): Promise> { + const token = + import.meta.env.VITE_GITHUB_TOKEN || + import.meta.env.VITE_GITHUB_TOKEN_ALTERNATE; + + if (!token) { + console.error("GitHub token not provided"); + return {}; + } + + const queryFields = cards.map((card) => { + const alias = card.name.replace(/\s+/g, "").toLowerCase(); + const label = card.name.charAt(0).toUpperCase() + card.name.slice(1).toLowerCase(); + const labelQuery = label.includes(" ") ? `\\"${label}\\"` : label; + return `${alias}: search(query: "is:issue is:open repo:GovAlta/ui-components label:${labelQuery}", type: ISSUE, first: 1) { issueCount }`; + }).join("\n"); + + const graphQLQuery = ` + query { + ${queryFields} + } + `; + + try { + const response = await fetch("https://api.github.com/graphql", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}` + }, + body: JSON.stringify({ query: graphQLQuery }) + }); + + const result = await response.json(); + if (result.errors) { + console.error("GraphQL errors:", result.errors); + return {}; + } + + const issueCounts: Record = {}; + cards.forEach((card) => { + const alias = card.name.replace(/\s+/g, "").toLowerCase(); + issueCounts[card.name] = + result.data[alias] && result.data[alias].issueCount + ? result.data[alias].issueCount + : 0; + }); + + return issueCounts; + } catch (error) { + console.error("Error fetching issue counts:", error); + return {}; + } +} + +export async function fetchIssueCount(label: string): Promise { + const token = + import.meta.env.VITE_GITHUB_TOKEN || + import.meta.env.VITE_GITHUB_TOKEN_ALTERNATE; + + if (!token) { + console.error("GitHub token not provided"); + return null; + } + + const labelQuery = label.includes(" ") ? `\\"${label}\\"` : label; + + const query = ` + query { + issues: search(query: "is:issue is:open repo:GovAlta/ui-components label:${labelQuery}", type: ISSUE, first: 1) { + issueCount + } + } + `; + + try { + const response = await fetch("https://api.github.com/graphql", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}` + }, + body: JSON.stringify({ query }) + }); + + const result = await response.json(); + + if (result.errors) { + console.error("GraphQL errors:", result.errors); + return null; + } + + return result.data.issues.issueCount; + } catch (error) { + console.error("Error fetching issue count:", error); + return null; + } +} \ No newline at end of file