diff --git a/package-lock.json b/package-lock.json index 00f7ab208..e72f7a76b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "6.9.3-next.1", - "@abgov/ui-components-common": "1.9.1-next.1", - "@abgov/web-components": "1.39.3-next.1", + "@abgov/react-components": "6.10.0-dev.8", + "@abgov/ui-components-common": "1.10.0-dev.2", + "@abgov/web-components": "1.40.0-dev.17", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", @@ -68,9 +68,9 @@ } }, "node_modules/@abgov/react-components": { - "version": "6.9.3-next.1", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.9.3-next.1.tgz", - "integrity": "sha512-hbiS5eogLknYPdpojyy8BqocIojArORB45d9SLC7D4tQuxUD1mDF2qcE5Z/Bbtvgt8OmKipbsCK2N7Ba5uRLgg==", + "version": "6.10.0-dev.8", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.10.0-dev.8.tgz", + "integrity": "sha512-2acGDt2Hzw9QBYYgcdofL4k8b4WbFebj/DfPFTRP7nMpiTaAGaapw391c6qBHVm17WBpZAPAibOscoLvbnYSwA==", "license": "Apache-2.0", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", @@ -79,15 +79,15 @@ } }, "node_modules/@abgov/ui-components-common": { - "version": "1.9.1-next.1", - "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.9.1-next.1.tgz", - "integrity": "sha512-OGUR24MKznHc7alzqro1tQgc9VGdU2UEruCxXeufv5vEeh4PJHIqyk4o+BEEvgJ524Kyl+WyYq+pWDeDqyMV5Q==", + "version": "1.10.0-dev.2", + "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.10.0-dev.2.tgz", + "integrity": "sha512-hta2YqaQfUD5PYg0lumsndI94NtQea7D8wtPYg52Pjf/StZEhT0qWST3LaK9KFNp3libhJ0lDb9j1/t5L+z0ug==", "license": "Apache-2.0" }, "node_modules/@abgov/web-components": { - "version": "1.39.3-next.1", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.39.3-next.1.tgz", - "integrity": "sha512-+K2H871jm9/AOCwddqinQkiWepj7zxPooRLNCOtON4DTgDnk3Lz/B6BDcDfjRvD1DF4ui4KaZHC5N2qvftYogg==", + "version": "1.40.0-dev.17", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.40.0-dev.17.tgz", + "integrity": "sha512-wbxPI/yBmUw9BuTdYJTrsU41OXU3FFvEXMr8+KCQmX+KIEztUpQqWCcZ1FEyhfSXUmcAK+MIAfkj2B/CGrmO+w==", "license": "Apache-2.0" }, "node_modules/@esbuild/aix-ppc64": { diff --git a/package.json b/package.json index f8749177a..0370f34f3 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "6.9.3-next.1", - "@abgov/ui-components-common": "1.9.1-next.1", - "@abgov/web-components": "1.39.3-next.1", + "@abgov/react-components": "6.10.0-dev.8", + "@abgov/ui-components-common": "1.10.0-dev.2", + "@abgov/web-components": "1.40.0-dev.17", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", diff --git a/src/App.tsx b/src/App.tsx index fe6472c20..2e72541f7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,7 +35,6 @@ import TypographyPage from "@routes/design-tokens/typography/Typography"; import DevelopersOverviewPage from "@routes/get-started/developers/DevelopersOverview"; import DevelopersSetupPage from "@routes/get-started/developers/DevelopersSetup"; import DevelopersTechnologiesPage from "@routes/get-started/developers/DevelopersTechnologies"; -import DevelopersVSCodePage from "@routes/get-started/developers/DevelopersVSCode"; import BugVerificationPage from "@routes/get-started/developers/BugVerification"; import GetStartedLayout from "@routes/get-started/GetStartedLayout"; import GetStartedOverviewPage from "@routes/get-started/GetStartedOverview"; @@ -50,7 +49,7 @@ import RoadmapPage from "@routes/get-started/Roadmap"; import SupportedBrowsersPage from "@routes/get-started/developers/SupportedBrowsers"; import UxDesignerPage from "@routes/get-started/designers/UxDesigner"; import UserExperienceGuidelinesPage from "@routes/get-started/UserExperienceGuidelines"; -import { LtsPolicyPage } from "@routes/get-started/LtsPolicyPage.tsx"; +import { OutOfSupportPage } from "@routes/get-started/OutOfSupport"; // Examples Pages import { VersionFromUrlProvider } from "@contexts/VersionFromUrlContext.tsx"; @@ -108,7 +107,6 @@ const router = createBrowserRouter( } /> } /> } /> - } /> } /> } /> @@ -120,8 +118,8 @@ const router = createBrowserRouter( } /> } /> - - } /> + + } /> } /> diff --git a/src/components/version-language-switcher/VersionUpdateNotification.tsx b/src/components/version-language-switcher/VersionUpdateNotification.tsx index 4ac93c711..63047a1d6 100644 --- a/src/components/version-language-switcher/VersionUpdateNotification.tsx +++ b/src/components/version-language-switcher/VersionUpdateNotification.tsx @@ -27,7 +27,7 @@ export function VersionUpdateNotification({ version }: VersionUpdateNotification {version === "old" ? ( <> - Long-term support (LTS) for v3 (Angular) and v5 (React) has ended. Read the{" "} + Support for v3 (Angular) and v5 (React) has ended. Read the{" "} upgrade guide diff --git a/src/components/version-language-switcher/version-language-constants.ts b/src/components/version-language-switcher/version-language-constants.ts index 441e758a7..8473c021d 100644 --- a/src/components/version-language-switcher/version-language-constants.ts +++ b/src/components/version-language-switcher/version-language-constants.ts @@ -2,7 +2,7 @@ export type LanguageVersion = "old" | "new"; export type Language = "react" | "angular"; export const ANGULAR_VERSIONS = { OLD: { - label: "v3.2.2 (LTS)", + label: "v3.2.2", value: "old" }, NEW: { @@ -12,7 +12,7 @@ export const ANGULAR_VERSIONS = { } export const REACT_VERSIONS = { OLD: { - label: "v5.4.1 (LTS)", + label: "v5.4.1", value: "old" }, NEW: { diff --git a/src/examples/linear-progress/linear-progress-auto-example.tsx b/src/examples/linear-progress/linear-progress-auto-example.tsx new file mode 100644 index 000000000..39133c7f8 --- /dev/null +++ b/src/examples/linear-progress/linear-progress-auto-example.tsx @@ -0,0 +1,77 @@ +import { useEffect, useState } from "react"; +import { GoabLinearProgress } from "@abgov/react-components"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; + +export function LinearProgressAutoExample() { + const [autoProgress, setAutoProgress] = useState(0); + + useEffect(() => { + const intervalId = setInterval(() => { + let nextProgress = autoProgress + 0.25; + if (nextProgress > 100) { + nextProgress = 0; + } + setAutoProgress(nextProgress); + }, 100); + + return () => { + clearInterval(intervalId); + }; + }); + + return ( + <> + + { + const intervalId = setInterval(() => { + let nextProgress = autoProgress + 0.25; + if (nextProgress > 100) { + nextProgress = 0; + } + setAutoProgress(nextProgress); + }, 100); + + return () => { + clearInterval(intervalId); + }; + }); + + return ; + };`} + /> + { + this.autoProgress += 0.25; + if (this.autoProgress > 100) { + this.autoProgress = 0; + } + }, 100); + } + + ngOnDestroy() { + if (this.intervalId) { + clearInterval(this.intervalId); + } + } + + `} + />{" "} + + ); +} diff --git a/src/global-constants.ts b/src/global-constants.ts index 79fbc368e..b33cc83e9 100644 --- a/src/global-constants.ts +++ b/src/global-constants.ts @@ -3,4 +3,9 @@ export const DEFAULT_VERSION = "new"; export const DEFAULT_LANGUAGE = "react"; // Array of 'New' components -export const NEW_COMPONENTS = ["Drawer", "Temporary notification", "Checkbox list"]; +export const NEW_COMPONENTS = [ + "Drawer", + "Temporary notification", + "Checkbox list", + "Linear Progress indicator", +]; diff --git a/src/routes/components/ProgressIndicator.tsx b/src/routes/components/CircularProgressIndicator.tsx similarity index 82% rename from src/routes/components/ProgressIndicator.tsx rename to src/routes/components/CircularProgressIndicator.tsx index 4723be94f..b79fda893 100644 --- a/src/routes/components/ProgressIndicator.tsx +++ b/src/routes/components/CircularProgressIndicator.tsx @@ -11,7 +11,8 @@ import { GoabTab, GoabTabs, GoabCircularProgress, - GoabCircularProgressProps, GoabButton + GoabCircularProgressProps, + GoabButton, } from "@abgov/react-components"; import { resetScrollbars } from "../../utils/styling"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -19,17 +20,19 @@ import { TestIdProperty } from "@components/component-properties/common-properti 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"; +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 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; const relatedComponents = [ + { link: "/components/linear-progress-indicator", name: "Linear Progress indicator" }, { link: "/components/file-uploader", name: "File uploader" }, - { link: "/components/skeleton-loader", name: "Skeleton loading" } + { link: "/components/skeleton-loader", name: "Skeleton loading" }, ]; type ComponentPropsType = GoabCircularProgressProps; type CastingType = { @@ -37,7 +40,7 @@ type CastingType = { [key: string]: unknown; }; -export default function ProgressIndicatorPage() { +export default function CircularProgressIndicatorPage() { const [componentProps, setComponentProps] = useState({ variant: "inline", size: "large", @@ -137,7 +140,7 @@ export default function ProgressIndicatorPage() { const [visible, setVisible] = useState(true); function onSandboxChange(bindings: ComponentBinding[], props: Record) { - const updatedProps = { ...props} as CastingType; + const updatedProps = { ...props } as CastingType; setComponentBindings(bindings); setComponentProps(updatedProps); @@ -155,7 +158,7 @@ export default function ProgressIndicatorPage() { // reset body styles after closing the modal, sandbox renders multiple times that not trigger modal component no-scroll destroy effects resetScrollbars(); }, 3000); - } + }; return ( <> @@ -168,24 +171,32 @@ export default function ProgressIndicatorPage() { githubLink="Progress indicator" /> - -

Playground

- +

+ Playground +

+ { setVisible(false); }, 3000); - }` : ''} + }` + : "" + } `} /> { this.visible = false; }, 3000); - }` : ''} + }` + : "" + } `} /> - {componentProps.variant === "fullscreen" && Show Fullscreen} + {componentProps.variant === "fullscreen" && ( + Show Fullscreen + )} - + - } - > + }> diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx index aa192ab29..fc4c1aae4 100644 --- a/src/routes/components/Components.tsx +++ b/src/routes/components/Components.tsx @@ -41,7 +41,7 @@ export function Components() { }; return ( - + {componentName} ); @@ -78,9 +78,14 @@ export function Components() { Filter chip Modal Notification banner - Progress indicator + Circular Progress indicator + + {newComponentLabel("Linear Progress indicator")} + Skeleton loader - {newComponentLabel("Temporary notification")} + + {newComponentLabel("Temporary notification")} + Tooltip diff --git a/src/routes/components/FileUploader.tsx b/src/routes/components/FileUploader.tsx index c6e755801..22f5ce6c2 100644 --- a/src/routes/components/FileUploader.tsx +++ b/src/routes/components/FileUploader.tsx @@ -1,7 +1,7 @@ import { useContext, useState } from "react"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader"; -import { propsToString } from "@components/sandbox/BaseSerializer" +import { propsToString } from "@components/sandbox/BaseSerializer"; import { GoabBadge, GoabFileUploadCard, @@ -9,7 +9,7 @@ import { GoabFileUploadInputProps, GoabFormItem, GoabTab, - GoabTabs + GoabTabs, } from "@abgov/react-components"; import { ComponentProperties, @@ -18,7 +18,10 @@ import { 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 { + 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"; @@ -36,10 +39,10 @@ interface Upload { class MockUploader implements Uploader { private processId?: any; - public onprogress: (percent: number) => void = (_: number) => { }; - public onabort: () => void = () => { }; - public onfail: (err: string) => void = (_: string) => { }; - public oncomplete: () => void = () => { }; + public onprogress: (percent: number) => void = (_: number) => {}; + public onabort: () => void = () => {}; + public onfail: (err: string) => void = (_: string) => {}; + public oncomplete: () => void = () => {}; upload(_url: string | ArrayBuffer) { let progress = 0; @@ -65,9 +68,11 @@ const description = "Help users select and upload a file."; const category = Category.INPUTS_AND_ACTIONS; const relatedComponents = [ { link: "/components/container", name: "Container" }, - { link: "/components/progress-indicator", name: "Progress indicator" } + { link: "/components/circular-progress-indicator", name: "Circular Progress indicator" }, + { link: "/components/linear-progress-indicator", name: "Linear Progress indicator" }, ]; -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=804-5767"; +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; @@ -75,7 +80,7 @@ type CastingType = { }; export default function FileUploaderPage() { - const {version} = useContext(LanguageVersionContext); + const { version } = useContext(LanguageVersionContext); const [fileUploaderProps, setFileUploaderProps] = useState({ maxFileSize: "100MB", }); @@ -267,7 +272,6 @@ export default function FileUploaderPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { setFileUploaderBindings(bindings); setFileUploaderProps(props as CastingType); @@ -315,12 +319,16 @@ export default function FileUploaderPage() { githubLink="File uploader" /> - -

Playground

- - +

+ Playground +

+ {/* ******* */} {/* Angular */} {/* ******* */} @@ -343,11 +351,11 @@ export default function FileUploaderPage() { public onabort: () => void = () => {}; public onfail: (err: string) => void = (_: string) => {}; public oncomplete: () => void = () => {}; - + upload(_url: string | ArrayBuffer) { // implement your logic to upload files } - + abort() { // implement your logic to abort file upload } @@ -357,15 +365,16 @@ export default function FileUploaderPage() { {/************* Angular old code snippets *******************/} - {version === "old" && = {}; - + uploadFile(e: Event) { const reader = new FileReader(); const file = (e as CustomEvent).detail.file; @@ -373,9 +382,9 @@ export default function FileUploaderPage() { if (!e.target) return; const url = e.target.result; const uploader = new MockUploader(); - + this.uploads.push({file, uploader}); - + uploader.onabort = () => console.log("Aborting upload"); uploader.onfail = err => console.log("Upload failed: ", err); uploader.oncomplete = () => console.log("File upload complete"); @@ -388,22 +397,28 @@ export default function FileUploaderPage() { }; reader.readAsDataURL(file); } - + deleteFile(upload: Upload) { upload.uploader.abort(); this.uploads = this.uploads.filter(u => u.file.name !== upload.file.name); } } `} - />} - - {version === "old" && + )} + + {version === "old" && ( + - + @for (upload of uploads; track $index) { `} - />} - + /> + )} {/************* Angular new code snippets *******************/} - {version === "new" && = {}; - + uploadFile(e: GoabFileUploadInputOnSelectFileDetail) { const reader = new FileReader(); const file = e.file; @@ -438,9 +454,9 @@ export default function FileUploaderPage() { if (!e.target) return; const url = e.target.result; const uploader = new MockUploader(); - + this.uploads.push({file, uploader}); - + uploader.onabort = () => console.log("Aborting upload"); uploader.onfail = err => console.log("Upload failed: ", err); uploader.oncomplete = () => console.log("File upload complete"); @@ -453,20 +469,22 @@ export default function FileUploaderPage() { }; reader.readAsDataURL(file); } - + deleteFile(upload: Upload) { upload.uploader.abort(); this.uploads = this.uploads.filter(u => u.file.name !== upload.file.name); } } `} - />} - - {version === "new" && + )} + + {version === "new" && ( + @for (upload of uploads; track $index) { @@ -482,7 +500,8 @@ export default function FileUploaderPage() { } `} - />} + /> + )} {/* ***** */} {/* React */} @@ -521,11 +540,12 @@ export default function FileUploaderPage() { /> {/************* React old code snippets *******************/} - {version === "old" && ([]); const [progressList, setProgressList] = useState>({}); @@ -556,15 +576,21 @@ export default function FileUploaderPage() { } reader.readAsDataURL(file); `} - />} - - {version === "old" && + )} + + {version === "old" && ( + - + {uploads.map(upload => ( `} - />} + /> + )} {/************* React new code snippets *******************/} - {version === "new" && ([]); const [progressList, setProgressList] = useState>({}); @@ -618,15 +646,21 @@ export default function FileUploaderPage() { reader.readAsDataURL(file); } `} - />} - - {version === "new" && + )} + + {version === "new" && ( + - uploadFile(event.file)} ${propsToString(fileUploaderProps, "react", version)} /> + uploadFile(event.file)} ${propsToString( + fileUploaderProps, + "react", + version + )} /> {uploads.map(upload => ( `} - />} + /> + )} - uploadFile(e.file)} {...fileUploaderProps} /> + uploadFile(e.file)} + {...fileUploaderProps} + /> {uploads.map(upload => ( - - } - > + }> diff --git a/src/routes/components/LinearProgressIndicator.tsx b/src/routes/components/LinearProgressIndicator.tsx new file mode 100644 index 000000000..d4d84c43a --- /dev/null +++ b/src/routes/components/LinearProgressIndicator.tsx @@ -0,0 +1,171 @@ +import { useState } from "react"; +import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; +import { ComponentContent } from "@components/component-content/ComponentContent"; +import { ComponentBinding, Sandbox } from "@components/sandbox"; +import { + ComponentProperties, + ComponentProperty, +} from "@components/component-properties/ComponentProperties.tsx"; +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 { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import { LinearProgressAutoExample } from "@examples/linear-progress/linear-progress-auto-example"; +import { + GoabBadge, + GoabLinearProgress, + GoabLinearProgressProps, + GoabTab, + GoabTabs, +} from "@abgov/react-components"; + +type ComponentPropsType = GoabLinearProgressProps; +type CastingType = { + // add any required props here + [key: string]: unknown; +}; + +const FIGMA_LINK = + "https://figma.com/design/3pb2IK8s2QUqWieH79KdN7/❖-Component-library-%7C-DDD?node-id=41625-1999968&p=f"; +const componentName = "Linear Progress indicator"; +const category = Category.FEEDBACK_AND_ALERTS; +const description = "Provide visual feedback to users while loading."; +const relatedComponents = [ + { link: "/components/circular-progress-indicator", name: "Circular Progress indicator" }, + { link: "/components/file-uploader", name: "File uploader" }, + { link: "/components/skeleton-loader", name: "Skeleton loading" }, +]; + +export default function LinearProgressIndicatorPage() { + const [componentProps, setComponentProps] = useState({ + progress: 10, + percentVisibility: "visible", + }); + const [componentBindings, setComponentBindings] = useState([ + { + label: "Progress", + type: "number", + name: "progress", + width: "8ch", + value: 10, + }, + { + label: "Percent Visibility", + name: "percentVisibility", + type: "radio", + options: ["visible", "hidden"], + value: "visible", + }, + ]); + const componentProperties: ComponentProperty[] = [ + { + name: "progress", + type: "number", + description: + "Set the progress value to a number between 0 and 100. Leave this as undefined for an indeterminate progress bar, set this value will change the type from indeterminate to progress bar", + }, + { + name: "percentVisibility", + type: "string (inline | fullscreen)", + description: "Stretch across the full screen or use it inline", + }, + { + name: "ariaLabel", + type: "string", + description: "Provides an accessible label for the progress indicator", + }, + { + name: "ariaLabelledby", + type: "string", + description: "Identifies the element that labels the progress indicator", + }, + TestIdProperty, + ]; + + function onSandboxChange(bindings: ComponentBinding[], props: Record) { + const updatedProps = { ...props } as CastingType; + + setComponentBindings(bindings); + setComponentProps(updatedProps); + } + + return ( + <> + + + + +

+ Playground +

+ + + + + + + + Examples + + + }> + + + + + + + + `} + /> + `} + /> + + + + + + + + + + + + + + + + ); +} diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx index ac241e970..c52f07aa3 100644 --- a/src/routes/components/Modal.tsx +++ b/src/routes/components/Modal.tsx @@ -2,11 +2,10 @@ import { Category, ComponentHeader } from "@components/component-header/Componen import { GoabBadge, GoabButton, - GoabButtonGroup, GoabModal, GoabModalProps, GoabTab, - GoabTabs + GoabTabs, } from "@abgov/react-components"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { useContext, useEffect, useState } from "react"; @@ -25,7 +24,8 @@ import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty // == Page props == -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13874"; +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."; @@ -41,9 +41,9 @@ type CastingType = { }; export default function ModalPage() { - const {language} = useContext(LanguageVersionContext); + const { language } = useContext(LanguageVersionContext); const [componentProps, setComponentProps] = useState({ - heading: "Are you sure you want to exit your application?", + heading: "This is important information", }); useEffect(() => { @@ -72,7 +72,7 @@ export default function ModalPage() { type: "string", name: "heading", width: "40ch", - value: "Are you sure you want to exit your application?", + value: "This is important information", }, { label: "Max width", @@ -81,12 +81,6 @@ export default function ModalPage() { width: "16ch", value: "", }, - { - label: "Closable", - type: "boolean", - name: "closable", - value: false, - }, { label: "Open", type: "boolean", @@ -271,83 +265,50 @@ export default function ModalPage() { -

Playground

+

+ Playground +

- - {isClosableChecked(componentBindings) && } - - - {isClosableChecked(componentBindings) && } + /> setOpen(true)}>Show Modal - {!isClosableChecked(componentBindings) && ( - -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id - molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius - laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.

- - setOpen(false)}> - Cancel - - setOpen(false)}> - Exit - - - - )} - - {isClosableChecked(componentBindings) && ( - -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius - laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.

- - )} + laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam. +

+

+ See the Examples tab for customized closing buttons and behavior using the + "actions" property. +

+ - + - } - > + }> diff --git a/src/routes/get-started/GetStartedLayout.tsx b/src/routes/get-started/GetStartedLayout.tsx index 7fa01f3aa..2a18bae83 100644 --- a/src/routes/get-started/GetStartedLayout.tsx +++ b/src/routes/get-started/GetStartedLayout.tsx @@ -17,7 +17,6 @@ export default function GetStartedLayout() { Overview Setup Verify a bug - VS Code Technologies Supported Browsers Version update guide @@ -27,7 +26,7 @@ export default function GetStartedLayout() { Component lifecycle Contribute Roadmap - Long Term Support (LTS) + Out of support versions Get support diff --git a/src/routes/get-started/LtsPolicyPage.tsx b/src/routes/get-started/OutOfSupport.tsx similarity index 80% rename from src/routes/get-started/LtsPolicyPage.tsx rename to src/routes/get-started/OutOfSupport.tsx index 29f85c91c..a186d7a33 100644 --- a/src/routes/get-started/LtsPolicyPage.tsx +++ b/src/routes/get-started/OutOfSupport.tsx @@ -1,13 +1,13 @@ import { GoabCallout, GoabText } from "@abgov/react-components"; import { Link } from "react-router-dom"; -export const LtsPolicyPage = () => { +export const OutOfSupportPage = () => { return ( <> - Long Term Support (LTS) + Out-of-support versions - LTS for the design system has ended. Version v3 (Angular) and v5 (React) are no longer supported. + Versions v3 (Angular) and v5 (React) are no longer supported. @@ -35,7 +35,7 @@ export const LtsPolicyPage = () => { - Projects still using LTS will continue to work, but new issues or bugs in v3 (Angular) and v5 (React) will not be fixed. + Projects still using v3/v5 will continue to work, but new issues or bugs in v3 (Angular) and v5 (React) will not be fixed. ); diff --git a/src/routes/get-started/developers/DevelopersOverview.tsx b/src/routes/get-started/developers/DevelopersOverview.tsx index ed0102f31..8d88e7c56 100644 --- a/src/routes/get-started/developers/DevelopersOverview.tsx +++ b/src/routes/get-started/developers/DevelopersOverview.tsx @@ -1,7 +1,7 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { Link } from "react-router-dom"; import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabBlock, GoabSpacer, GoabText } from "@abgov/react-components"; +import { GoabBlock, GoabText } from "@abgov/react-components"; export default function DevelopersOverviewPage() { return ( @@ -13,15 +13,14 @@ export default function DevelopersOverviewPage() { The DDD Design System is built with Web Components. Web Components are technology agnostic. - You can choose various front-end frameworks, like Angular, React, or Vue, to use with our - web components. All components include sample HTML and only use JavaScript when necessary. + You can choose a front-end framework, like Angular, React, and many others, to use with our + web components. The design system consists of: Design tokens Components - Product templates @@ -72,16 +71,6 @@ export default function DevelopersOverviewPage() { Read more about design system technologies - Visual Studio Code support - - In order to use VS Code's{" "} - - HTML/CSS Custom Data - {" "} - support to enhance GoA Web Components HTML editing experience, include our html custom data - setting found in.vscode/settings.json: - -
- - - -

Product templates

- - To help get teams up and running sooner, this product template has been created for teams to - quickly use the ui-components and provide a starting point for building DDD products. The - product templates are available in{" "} - - Angular - {" "} - and{" "} - - React - - . - - -

Demo application

- - This is a demo application to see and interact with the design system - components. - - View demo application - ); } diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx index 52107e30d..ad9ad09e0 100644 --- a/src/routes/get-started/developers/DevelopersSetup.tsx +++ b/src/routes/get-started/developers/DevelopersSetup.tsx @@ -1,4 +1,4 @@ -import { GoabBlock, GoabDivider, GoabText } from "@abgov/react-components"; +import { GoabDivider, GoabText, GoabCallout } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import "./Developers.css"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -9,12 +9,12 @@ export default function DevelopersSetupPage() { Developers Setup - Once you are setup, you can use the project template to quickly get - started. - View project templates - + Use this guide to get setup

Angular UI components

+ + 17, 18, 19, 20 + This is the web component library and utilizes Angular's web component integration. @@ -76,6 +76,9 @@ export default function DevelopersSetupPage() {

React UI components

+ + 17, 18, 19 + This library contains React components which wrap the Government of Alberta Web Components. @@ -102,7 +105,14 @@ export default function DevelopersSetupPage() { `} /> - 3. Import the web-component styles in the src/index.css file + 3. Import the web-components in the src/main.tsx file + + + 4. Import the web-component styles in the src/index.css file - - - -

Angular/React templates

- - - Angular template - - - React template - - - - To use the templates, follow these steps: -
    -
  1. - Click the green Use this template button -
    2. -
  2. - Select Create a new repository -
    3. -
  3. Select an owner and give the repo a suitable name for your project
    4. -
  4. Select either Public or Private
    5. -
  5. - Click the button Create repository from template -
    6. -
  6. Clone the repo onto your machine
    7. -
  7. - Using a terminal of some kind, go into the directory you created and run the following - commands (in order): -
      -
    1. - npm i -
      2. -
    2. - npm run build -
      3. -
    3. - npm run start # Angular -
      - npm run dev # React -
      4. -
    -
    8. -
  8. Go to the listed port number of your localhost
    9. -
); diff --git a/src/routes/get-started/developers/DevelopersTechnologies.tsx b/src/routes/get-started/developers/DevelopersTechnologies.tsx index 33f854e2f..f30ebf18a 100644 --- a/src/routes/get-started/developers/DevelopersTechnologies.tsx +++ b/src/routes/get-started/developers/DevelopersTechnologies.tsx @@ -1,5 +1,5 @@ import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabText } from "@abgov/react-components"; +import { GoabText, GoabCallout } from "@abgov/react-components"; export default function DevelopersTechnologiesPage() { return ( @@ -73,6 +73,9 @@ export default function DevelopersTechnologiesPage() {

Angular

+ + 17, 18, 19, 20 + Angular @@ -87,13 +90,18 @@ export default function DevelopersTechnologiesPage() { How Web Components and Angular work together - Our Angular implementation adds form binding, both Reactive and Template, to our web + We use Angular to create wrappers around our web components. This helps manage events and properties + of the web components rather than trying to use our web components by themselves. Our Angular + implementation adds form binding, both Reactive and Template, to our web components. - Angular applications will need to use our web components and Angular - components. + The Angular wrappers are used inside an Angular app, + which then makes requests back to our web components to create the actual component.

React

+ + 17, 18, 19 + React diff --git a/src/routes/get-started/developers/DevelopersVSCode.tsx b/src/routes/get-started/developers/DevelopersVSCode.tsx deleted file mode 100644 index de4d9b84b..000000000 --- a/src/routes/get-started/developers/DevelopersVSCode.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Link } from "react-router-dom"; -import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabText } from "@abgov/react-components"; - -export default function DevelopersVSCodePage() { - return ( - - Developers - VS Code - - You can use VS Code's autocomplete suggestions for design system components and design tokens. - - - Design tokens autocomplete - - Get code autocomplete suggestions for the goa design tokens. - -
    -
  • Automatically works for CSS and Sass files
    • -
  • Preview design token values in autocomplete description
    • -
  • Color previews for all color tokens
    • -
  • Relevant code completions based on the current line of code
    • -
- - Components autocomplete - - In order to use VS Code's{" "} - - HTML/CSS Custom Data - {" "} - support to enhance GoA Web Components HTML editing experience, include our html custom data setting found - in .vscode/settings.json: - - - ); -} diff --git a/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx b/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx index 7d8e35bc5..ca763e962 100644 --- a/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx +++ b/src/routes/get-started/developers/upgrade-guide/ReactGuide.tsx @@ -52,7 +52,7 @@ export const ReactGuide = () => { Component - v5(LTS) + v5 v6(latest) diff --git a/src/versioned-router.tsx b/src/versioned-router.tsx index a7e742aae..38e86020e 100644 --- a/src/versioned-router.tsx +++ b/src/versioned-router.tsx @@ -31,7 +31,8 @@ import ModalPage from "@routes/components/Modal.tsx"; import NotificationBannerPage from "@routes/components/Notificationbanner.tsx"; import PaginationPage from "@routes/components/Pagination.tsx"; import PopoverPage from "@routes/components/Popover.tsx"; -import ProgressIndicatorPage from "@routes/components/ProgressIndicator.tsx"; +import CircularProgressIndicatorPage from "@routes/components/CircularProgressIndicator.tsx"; +import LinearProgressIndicatorPage from "@routes/components/LinearProgressIndicator.tsx"; import RadioPage from "@routes/components/Radio.tsx"; import SideMenuPage from "@routes/components/SideMenu.tsx"; import SkeletonPage from "@routes/components/Skeleton.tsx"; @@ -88,51 +89,52 @@ const VersionedComponentRoute: React.FC<{ export const ComponentsRouter = () => { const componentPaths: Record = { - "accordion": , - "badge": , - "block": , - "button": , + accordion: , + badge: , + block: , + button: , "button-group": , - "callout": , - "checkbox": , + callout: , + checkbox: , "checkbox-list": , - "container": , + container: , "date-picker": , - "details": , - "divider": , - "drawer": , - "dropdown": , + details: , + divider: , + drawer: , + dropdown: , "file-uploader": , "filter-chip": , "form-item": , "form-stepper": , - "grid": , + grid: , "hero-banner": , - "icons": , + icons: , "icon-button": , - "input": , - "list": , + input: , + list: , "menu-button": , "microsite-header": , - "modal": , + modal: , "notification-banner": , - "pagination": , - "popover": , - "progress-indicator": , - "radio": , + pagination: , + popover: , + "circular-progress-indicator": , + "linear-progress-indicator": , + radio: , "side-menu": , "skeleton-loader": , - "spacer": , - "table": , - "tabs": , + spacer: , + table: , + tabs: , "temporary-notification": , - "text": , + text: , "text-area": , - "tooltip": , + tooltip: , "text-field": , - "header": , - "footer": , - "link": , + header: , + footer: , + link: , }; return ( @@ -143,7 +145,10 @@ export const ComponentsRouter = () => { } /> {/* Versioned paths components */} - } /> + } + /> ); @@ -151,11 +156,11 @@ export const ComponentsRouter = () => { export const PatternsRouter = () => { const patternsPaths = { - "layout": , - "task-list-page": , - "question-page": , - "review-page": , - "result-page": , + layout: , + "task-list-page": , + "question-page": , + "review-page": , + "result-page": , }; return ( @@ -166,7 +171,10 @@ export const PatternsRouter = () => { } /> } /> {/* Versioned paths components */} - } /> + } + /> );