From 2254fc9b75a7c79723ce0644ce2bf01b5aa73f06 Mon Sep 17 00:00:00 2001 From: Benji Franck Date: Fri, 21 Feb 2025 10:54:10 -0700 Subject: [PATCH 01/15] feat(#76): Document text component --- public/images/text.png | Bin 0 -> 107650 bytes src/App.tsx | 2 + src/routes/components/AllComponents.tsx | 6 ++ src/routes/components/Components.tsx | 1 + src/routes/components/Text.tsx | 124 ++++++++++++++++++++++++ 5 files changed, 133 insertions(+) create mode 100644 public/images/text.png create mode 100644 src/routes/components/Text.tsx diff --git a/public/images/text.png b/public/images/text.png new file mode 100644 index 0000000000000000000000000000000000000000..eb928309bc2853b049d39d77dcfb69d1b6de8182 GIT binary patch literal 107650 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 /> } /> } /> + } /> } /> } /> } /> diff --git a/src/routes/components/AllComponents.tsx b/src/routes/components/AllComponents.tsx index 51a19967b..2b378032f 100644 --- a/src/routes/components/AllComponents.tsx +++ b/src/routes/components/AllComponents.tsx @@ -314,6 +314,12 @@ export default function AllComponentsPage() { 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." + } ]; function getComponentsByGroup(group: string): ReactNode[] { diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx index 3af4caa30..8a41a83eb 100644 --- a/src/routes/components/Components.tsx +++ b/src/routes/components/Components.tsx @@ -67,6 +67,7 @@ export function Components() { Spacer Table Tabs + Text Text area Tooltip diff --git a/src/routes/components/Text.tsx b/src/routes/components/Text.tsx new file mode 100644 index 000000000..ec5d302ef --- /dev/null +++ b/src/routes/components/Text.tsx @@ -0,0 +1,124 @@ +import { useState } from "react"; +import { ComponentBinding, Sandbox } from "@components/sandbox"; +import { + ComponentProperties, + ComponentProperty, +} from "@components/component-properties/ComponentProperties.tsx"; +import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; +import { GoAText, GoATab, GoATabs, GoABadge } from "@abgov/react-components"; + +export default function TextPage() { + const [textProps, setTextProps] = useState({}); + + const [textBindings, setTextBindings] = useState([ + { + label: "Size", + type: "list", + name: "size", + options: ["", "heading-xl", "heading-l", "heading-m", "heading-s", "heading-xs", "body-l", "body-m", "body-s", "body-xs"], + value: "", + }, + { + label: "As", + type: "list", + name: "as", + options: ["", "h1", "h2", "h3", "h4", "h5", "span", "div", "p" ], + value: "", + }, + { + label: "Max width", + type: "string", + name: "maxWidth", + value: "" + }, + { + label: "Color", + type: "list", + name: "color", + options: ["", "primary", "secondary"], + value: "" + }, + { + label: "Top Margin", + type: "list", + name: "mt", + options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"], + value: "none", + }, + { + label: "Bottom Margin", + type: "list", + name: "mb", + options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"], + value: "none", + }, + ]); + + const componentProperties: ComponentProperty[] = [ + { + name: "as", + type: "h1 | h2 | h3 | h4 | h5 | span | div | p", + description: "Sets the tag and text size.", + defaultValue: "div" + }, + { + name: "size", + type: "heading-xl | heading-l | heading-m | heading-s | heading-xs | body-l | body-m | body-s | body-xs", + description: "Overrides the text size from the 'as' property." + }, + { + name: "maxWidth", + type: "string", + description: "Sets the max width.", + defaultValue: "65ch" + }, + { + name: "color", + type: "primary | secondary", + description: "Sets the text colour.", + defaultValue: "primary" + }, + { + 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.", + }, + ]; + + function onSandboxChange(bindings: ComponentBinding[], props: Record) { + setTextBindings(bindings); + setTextProps(props); + } + + return ( + <> + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + Design guidelines + + + } + > + + + ); +} From 6029abd94a5cced69dd560c57e8926f61b632bb2 Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Wed, 11 Sep 2024 15:27:19 -0600 Subject: [PATCH 02/15] feat(#1835): update code of ds website to latest react version --- package-lock.json | 960 ++++-------------- package.json | 5 +- src/App.tsx | 144 +-- src/components/code-snippet/CodeSnippet.tsx | 12 +- .../component-header/ComponentHeader.tsx | 4 +- .../ComponentProperties.tsx | 10 +- src/components/do-dont/DoDont.tsx | 4 +- src/components/icon-snippet/IconSnippet.tsx | 7 +- src/components/mock-modal/Modal.tsx | 5 +- .../sandbox/AngularReactiveSerializer.ts | 14 +- src/components/sandbox/AngularSerializer.ts | 14 +- src/components/sandbox/BaseSerializer.ts | 2 +- src/components/sandbox/ComponentBinding.ts | 2 +- src/components/sandbox/ReactSerializer.ts | 7 +- src/components/sandbox/Sandbox.tsx | 125 ++- src/components/sandbox/SandboxProperties.tsx | 83 +- src/components/support-info/SupportInfo.tsx | 6 +- src/components/token-snippet/TokenSnippet.tsx | 4 +- src/contexts/DeviceWidthContext.ts | 6 - src/contexts/DeviceWidthContext.tsx | 22 + src/contexts/VersionContext.tsx | 47 + src/examples/accordion/AccordionExamples.tsx | 40 +- src/examples/checkbox/CheckboxExamples.tsx | 14 +- src/examples/container/ContainerExamples.tsx | 206 ++-- src/examples/dropdown/DropdownExamples.tsx | 346 +++---- .../MicrositeHeaderExamples.tsx | 8 +- src/examples/modal/ModalExamples.tsx | 201 ++-- .../question-page/QuestionPageExamples.tsx | 188 ++-- src/examples/radio/RadioExamples.tsx | 32 +- .../result-page/ResultPageExamples.tsx | 14 +- .../review-page/ReviewPageExamples.tsx | 33 +- src/examples/start-page/StartPageExamples.tsx | 6 +- .../task-list-page/TaskListPageExamples.tsx | 40 +- src/examples/text-field/TextFieldExamples.tsx | 176 ++-- src/hooks/useSandboxFormItem.tsx | 4 +- src/routes/components/Accordion.tsx | 113 ++- src/routes/components/AllComponents.tsx | 33 +- src/routes/components/AppFooter.tsx | 56 +- src/routes/components/AppHeader.tsx | 55 +- src/routes/components/Badge.tsx | 26 +- src/routes/components/Block.tsx | 20 +- src/routes/components/Button.tsx | 140 +-- src/routes/components/ButtonGroup.tsx | 38 +- src/routes/components/Callout.tsx | 37 +- src/routes/components/Checkbox.tsx | 24 +- src/routes/components/Chip.tsx | 0 src/routes/components/Components.tsx | 27 +- src/routes/components/Container.tsx | 28 +- src/routes/components/DatePicker.tsx | 64 +- src/routes/components/Details.tsx | 98 +- src/routes/components/Divider.tsx | 18 +- src/routes/components/Dropdown.tsx | 51 +- src/routes/components/FileUploader.tsx | 31 +- src/routes/components/FormItemPage.tsx | 34 +- src/routes/components/FormStepper.tsx | 158 +-- src/routes/components/Grid.tsx | 20 +- src/routes/components/HeroBanner.tsx | 34 +- src/routes/components/IconButton.tsx | 113 +-- src/routes/components/Icons.tsx | 37 +- src/routes/components/List.tsx | 24 +- src/routes/components/MicrositeHeader.tsx | 39 +- src/routes/components/Modal.tsx | 52 +- src/routes/components/Notificationbanner.tsx | 28 +- src/routes/components/Pagination.tsx | 71 +- src/routes/components/Popover.tsx | 24 +- src/routes/components/ProgressIndicator.tsx | 28 +- src/routes/components/Radio.tsx | 47 +- src/routes/components/SideMenu.tsx | 44 +- src/routes/components/Skeleton.tsx | 55 +- src/routes/components/Spacer.tsx | 26 +- src/routes/components/Table.tsx | 77 +- src/routes/components/Tabs.tsx | 35 +- .../components/TemporaryNotification.tsx | 18 +- src/routes/components/TextArea.tsx | 70 +- src/routes/components/TextField.tsx | 37 +- src/routes/components/Tooltip.tsx | 43 +- src/routes/content/Capitalization.tsx | 34 +- src/routes/content/ContentLayout.tsx | 8 +- src/routes/content/DateFormat.tsx | 90 +- src/routes/content/ErrorMessages.tsx | 180 ++-- src/routes/content/HelperText.tsx | 130 +-- .../design-tokens/DesignTokenLayout.tsx | 29 +- .../border-radius/BorderRadius.tsx | 14 +- .../border-width/BorderWidth.tsx | 14 +- src/routes/design-tokens/color/Color.tsx | 14 +- .../design-tokens/icon-size/IconSize.tsx | 22 +- src/routes/design-tokens/opacity/Opacity.tsx | 14 +- .../design-tokens/overview/Overview.tsx | 6 +- src/routes/design-tokens/shadow/Shadow.tsx | 14 +- src/routes/design-tokens/spacing/Spacing.tsx | 14 +- .../design-tokens/typography/Typography.tsx | 14 +- src/routes/get-started/Contribute.tsx | 56 +- src/routes/get-started/GetStartedLayout.tsx | 22 +- src/routes/get-started/GetStartedOverview.tsx | 26 +- src/routes/get-started/ReportBug.tsx | 109 +- src/routes/get-started/RequestFeature.tsx | 11 +- src/routes/get-started/Support.tsx | 44 +- .../developers/DevelopersOverview.tsx | 5 +- .../developers/DevelopersSetup.tsx | 136 +-- .../developers/SupportedBrowsers.tsx | 38 +- src/routes/home.tsx | 48 +- src/routes/patterns/LayoutPage.tsx | 67 +- src/routes/patterns/PatternsLayout.tsx | 31 +- src/routes/patterns/QuestionPage.tsx | 16 +- src/routes/patterns/ResultPage.tsx | 16 +- src/routes/patterns/ReviewPage.tsx | 16 +- src/routes/patterns/SimpleFormPage.tsx | 6 +- src/routes/patterns/StartPage.tsx | 16 +- src/routes/patterns/TaskListPage.tsx | 22 +- src/routes/root.tsx | 95 +- src/utils/index.ts | 14 +- 111 files changed, 2943 insertions(+), 3212 deletions(-) delete mode 100644 src/contexts/DeviceWidthContext.ts create mode 100644 src/contexts/DeviceWidthContext.tsx create mode 100644 src/contexts/VersionContext.tsx create mode 100644 src/routes/components/Chip.tsx diff --git a/package-lock.json b/package-lock.json index 303914840..94579767f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "5.4.0", - "@abgov/web-components": "1.29.0", + "@abgov/react-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/react-components", + "@abgov/ui-components-common": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/common", + "@abgov/web-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/web-components", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "octokit": "^4.0.2", @@ -32,48 +33,54 @@ "vite": "^5.4.6" } }, - "node_modules/@aashutoshrathi/word-wrap": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", - "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } + "../ui-components/dist/libs/common": { + "name": "@abgov/ui-components-common", + "version": "0.0.0" }, - "node_modules/@abgov/react-components": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-5.4.0.tgz", - "integrity": "sha512-vN1Ktjkw5IWaeJYmf9i8gKJpjn6px7D9lEt6USg1qjQzf5IKxR28aIuowBS7M2kmJ4Vk7AP+Z1yjB2g5Pw4J3w==", + "../ui-components/dist/libs/react-components": { + "name": "@abgov/react-components", + "version": "0.0.1", + "license": "Apache-2.0", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } }, - "node_modules/@abgov/web-components": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.29.0.tgz", - "integrity": "sha512-4Y5mzHaNjq/unrs81EP7/mjiauj9mtowNillvPIpFFTUo+9DN2XL1TKPliG0B3Z8WRSS9ayrt3KXzV1WRQh2oQ==", + "../ui-components/dist/libs/ui-commons": { + "extraneous": true + }, + "../ui-components/dist/libs/web-components": { + "name": "@abgov/web-components", + "version": "0.0.0", + "license": "Apache-2.0", "peerDependencies": { "@sveltejs/vite-plugin-svelte": "3.x", "glob": "10.x", "svelte": "4.x" } }, - "node_modules/@ampproject/remapping": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", - "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", - "peer": true, - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.5", - "@jridgewell/trace-mapping": "^0.3.24" - }, + "node_modules/@aashutoshrathi/word-wrap": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", + "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", + "dev": true, "engines": { - "node": ">=6.0.0" + "node": ">=0.10.0" } }, + "node_modules/@abgov/react-components": { + "resolved": "../ui-components/dist/libs/react-components", + "link": true + }, + "node_modules/@abgov/ui-components-common": { + "resolved": "../ui-components/dist/libs/common", + "link": true + }, + "node_modules/@abgov/web-components": { + "resolved": "../ui-components/dist/libs/web-components", + "link": true + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -81,6 +88,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "aix" @@ -96,6 +104,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "android" @@ -111,6 +120,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "android" @@ -126,6 +136,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "android" @@ -141,6 +152,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -156,6 +168,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -171,6 +184,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -186,6 +200,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -201,6 +216,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "linux" @@ -216,6 +232,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -231,6 +248,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "linux" @@ -246,6 +264,7 @@ "cpu": [ "loong64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -261,6 +280,7 @@ "cpu": [ "mips64el" ], + "dev": true, "optional": true, "os": [ "linux" @@ -276,6 +296,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -291,6 +312,7 @@ "cpu": [ "riscv64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -306,6 +328,7 @@ "cpu": [ "s390x" ], + "dev": true, "optional": true, "os": [ "linux" @@ -321,6 +344,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -336,6 +360,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "netbsd" @@ -351,6 +376,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "openbsd" @@ -366,6 +392,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "sunos" @@ -381,6 +408,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -396,6 +424,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "win32" @@ -411,6 +440,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -523,98 +553,6 @@ "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", "dev": true }, - "node_modules/@isaacs/cliui": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", - "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", - "peer": true, - "dependencies": { - "string-width": "^5.1.2", - "string-width-cjs": "npm:string-width@^4.2.0", - "strip-ansi": "^7.0.1", - "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", - "wrap-ansi": "^8.1.0", - "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@isaacs/cliui/node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, - "node_modules/@isaacs/cliui/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "peer": true, - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, - "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", - "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", - "peer": true, - "dependencies": { - "@jridgewell/set-array": "^1.2.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.24" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", - "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "peer": true, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/set-array": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", - "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "peer": true, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "peer": true - }, - "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.25", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", - "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", - "peer": true, - "dependencies": { - "@jridgewell/resolve-uri": "^3.1.0", - "@jridgewell/sourcemap-codec": "^1.4.14" - } - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -965,16 +903,6 @@ "node": ">= 18" } }, - "node_modules/@pkgjs/parseargs": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", - "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", - "optional": true, - "peer": true, - "engines": { - "node": ">=14" - } - }, "node_modules/@remix-run/router": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", @@ -984,236 +912,239 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz", - "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz", + "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==", "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "android" ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz", - "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz", + "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==", "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "android" ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz", - "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz", + "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==", "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "darwin" ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz", - "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz", + "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==", "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "darwin" ] }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz", + "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz", + "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ] + }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz", - "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz", + "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==", "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz", - "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz", + "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==", "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz", - "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz", + "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==", "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz", - "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz", + "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==", "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz", - "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz", + "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==", "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz", - "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz", + "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==", "cpu": [ "riscv64" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz", - "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz", + "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==", "cpu": [ "s390x" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz", - "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz", + "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==", "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz", - "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz", + "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==", "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz", - "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz", + "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==", "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "win32" ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz", - "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz", + "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==", "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "win32" ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz", - "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz", + "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==", "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "win32" ] }, - "node_modules/@sveltejs/vite-plugin-svelte": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz", - "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==", - "peer": true, - "dependencies": { - "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0", - "debug": "^4.3.4", - "deepmerge": "^4.3.1", - "kleur": "^4.1.5", - "magic-string": "^0.30.10", - "svelte-hmr": "^0.16.0", - "vitefu": "^0.2.5" - }, - "engines": { - "node": "^18.0.0 || >=20" - }, - "peerDependencies": { - "svelte": "^4.0.0 || ^5.0.0-next.0", - "vite": "^5.0.0" - } - }, - "node_modules/@sveltejs/vite-plugin-svelte-inspector": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz", - "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==", - "peer": true, - "dependencies": { - "debug": "^4.3.4" - }, - "engines": { - "node": "^18.0.0 || >=20" - }, - "peerDependencies": { - "@sveltejs/vite-plugin-svelte": "^3.0.0", - "svelte": "^4.0.0 || ^5.0.0-next.0", - "vite": "^5.0.0" - } - }, "node_modules/@swc/core": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.8.tgz", @@ -1433,9 +1364,10 @@ "integrity": "sha512-dtByW6WiFk5W5Jfgz1VM+YPA21xMXTuSFoLYIDY0L44jDLLflVPtZkYuu3/YxpGcvjzKFBZLU+GyKjR0HOYtyw==" }, "node_modules/@types/estree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", + "dev": true }, "node_modules/@types/history": { "version": "4.7.11", @@ -1452,12 +1384,14 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", + "dev": true }, "node_modules/@types/react": { "version": "18.2.67", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz", "integrity": "sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==", + "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1497,7 +1431,8 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "dev": true }, "node_modules/@types/semver": { "version": "7.5.8", @@ -1715,6 +1650,7 @@ "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "dev": true, "bin": { "acorn": "bin/acorn" }, @@ -1751,6 +1687,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, "engines": { "node": ">=8" } @@ -1759,6 +1696,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -1775,15 +1713,6 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, - "node_modules/aria-query": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz", - "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==", - "peer": true, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/array-union": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", @@ -1793,19 +1722,11 @@ "node": ">=8" } }, - "node_modules/axobject-query": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", - "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==", - "peer": true, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "node_modules/before-after-hook": { "version": "3.0.2", @@ -1864,23 +1785,11 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/code-red": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", - "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", - "peer": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15", - "@types/estree": "^1.0.1", - "acorn": "^8.10.0", - "estree-walker": "^3.0.3", - "periscopic": "^3.1.0" - } - }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -1891,7 +1800,8 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "node_modules/concat-map": { "version": "0.0.1", @@ -1900,9 +1810,10 @@ "dev": true }, "node_modules/cross-spawn": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", - "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -1912,28 +1823,17 @@ "node": ">= 8" } }, - "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "peer": true, - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -1952,15 +1852,6 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, - "node_modules/deepmerge": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", - "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1985,22 +1876,11 @@ "node": ">=6.0.0" } }, - "node_modules/eastasianwidth": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "peer": true - }, - "node_modules/emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "peer": true - }, "node_modules/esbuild": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", + "dev": true, "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -2240,15 +2120,6 @@ "node": ">=4.0" } }, - "node_modules/estree-walker": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", - "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", - "peer": true, - "dependencies": { - "@types/estree": "^1.0.0" - } - }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -2373,22 +2244,6 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, - "node_modules/foreground-child": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", - "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", - "peer": true, - "dependencies": { - "cross-spawn": "^7.0.0", - "signal-exit": "^4.0.1" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2399,6 +2254,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -2408,26 +2264,6 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, - "node_modules/glob": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", - "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", - "peer": true, - "dependencies": { - "foreground-child": "^3.1.0", - "jackspeak": "^3.1.2", - "minimatch": "^9.0.4", - "minipass": "^7.1.2", - "package-json-from-dist": "^1.0.0", - "path-scurry": "^1.11.1" - }, - "bin": { - "glob": "dist/esm/bin.mjs" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -2440,30 +2276,6 @@ "node": ">=10.13.0" } }, - "node_modules/glob/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "peer": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/glob/node_modules/minimatch": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", - "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", - "peer": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/globals": { "version": "13.24.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", @@ -2581,15 +2393,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "peer": true, - "engines": { - "node": ">=8" - } - }, "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", @@ -2620,34 +2423,11 @@ "node": ">=8" } }, - "node_modules/is-reference": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", - "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==", - "peer": true, - "dependencies": { - "@types/estree": "*" - } - }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" - }, - "node_modules/jackspeak": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", - "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", - "peer": true, - "dependencies": { - "@isaacs/cliui": "^8.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - }, - "optionalDependencies": { - "@pkgjs/parseargs": "^0.11.0" - } + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true }, "node_modules/js-tokens": { "version": "4.0.0", @@ -2693,15 +2473,6 @@ "json-buffer": "3.0.1" } }, - "node_modules/kleur": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", - "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==", - "peer": true, - "engines": { - "node": ">=6" - } - }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -2715,12 +2486,6 @@ "node": ">= 0.8.0" } }, - "node_modules/locate-character": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", - "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", - "peer": true - }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -2755,26 +2520,8 @@ }, "node_modules/lru-cache": { "version": "10.4.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz", - "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==", - "engines": { - "node": "14 || >=16.14" - } - }, - "node_modules/magic-string": { - "version": "0.30.12", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz", - "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==", - "peer": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.5.0" - } - }, - "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "peer": true + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, "node_modules/merge2": { "version": "1.4.1", @@ -2810,24 +2557,17 @@ "node": "*" } }, - "node_modules/minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", - "peer": true, - "engines": { - "node": ">=16 || 14 >=14.17" - } - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "node_modules/nanoid": { - "version": "3.3.8", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", - "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, "funding": [ { "type": "github", @@ -2929,12 +2669,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/package-json-from-dist": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", - "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "peer": true - }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -2969,26 +2703,11 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, "engines": { "node": ">=8" } }, - "node_modules/path-scurry": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", - "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", - "peer": true, - "dependencies": { - "lru-cache": "^10.2.0", - "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" - }, - "engines": { - "node": ">=16 || 14 >=14.18" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -2998,21 +2717,11 @@ "node": ">=8" } }, - "node_modules/periscopic": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", - "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==", - "peer": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^3.0.0", - "is-reference": "^3.0.0" - } - }, "node_modules/picocolors": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true }, "node_modules/picomatch": { "version": "2.3.1", @@ -3030,6 +2739,7 @@ "version": "8.4.47", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "dev": true, "funding": [ { "type": "opencollective", @@ -3211,11 +2921,12 @@ } }, "node_modules/rollup": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz", - "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz", + "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==", + "dev": true, "dependencies": { - "@types/estree": "1.0.5" + "@types/estree": "1.0.6" }, "bin": { "rollup": "dist/bin/rollup" @@ -3225,22 +2936,24 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.22.4", - "@rollup/rollup-android-arm64": "4.22.4", - "@rollup/rollup-darwin-arm64": "4.22.4", - "@rollup/rollup-darwin-x64": "4.22.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.22.4", - "@rollup/rollup-linux-arm-musleabihf": "4.22.4", - "@rollup/rollup-linux-arm64-gnu": "4.22.4", - "@rollup/rollup-linux-arm64-musl": "4.22.4", - "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4", - "@rollup/rollup-linux-riscv64-gnu": "4.22.4", - "@rollup/rollup-linux-s390x-gnu": "4.22.4", - "@rollup/rollup-linux-x64-gnu": "4.22.4", - "@rollup/rollup-linux-x64-musl": "4.22.4", - "@rollup/rollup-win32-arm64-msvc": "4.22.4", - "@rollup/rollup-win32-ia32-msvc": "4.22.4", - "@rollup/rollup-win32-x64-msvc": "4.22.4", + "@rollup/rollup-android-arm-eabi": "4.24.4", + "@rollup/rollup-android-arm64": "4.24.4", + "@rollup/rollup-darwin-arm64": "4.24.4", + "@rollup/rollup-darwin-x64": "4.24.4", + "@rollup/rollup-freebsd-arm64": "4.24.4", + "@rollup/rollup-freebsd-x64": "4.24.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.24.4", + "@rollup/rollup-linux-arm-musleabihf": "4.24.4", + "@rollup/rollup-linux-arm64-gnu": "4.24.4", + "@rollup/rollup-linux-arm64-musl": "4.24.4", + "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4", + "@rollup/rollup-linux-riscv64-gnu": "4.24.4", + "@rollup/rollup-linux-s390x-gnu": "4.24.4", + "@rollup/rollup-linux-x64-gnu": "4.24.4", + "@rollup/rollup-linux-x64-musl": "4.24.4", + "@rollup/rollup-win32-arm64-msvc": "4.24.4", + "@rollup/rollup-win32-ia32-msvc": "4.24.4", + "@rollup/rollup-win32-x64-msvc": "4.24.4", "fsevents": "~2.3.2" } }, @@ -3306,6 +3019,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, "dependencies": { "shebang-regex": "^3.0.0" }, @@ -3317,22 +3031,11 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, "engines": { "node": ">=8" } }, - "node_modules/signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "peer": true, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -3346,92 +3049,16 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, "engines": { "node": ">=0.10.0" } }, - "node_modules/string-width": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", - "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", - "peer": true, - "dependencies": { - "eastasianwidth": "^0.2.0", - "emoji-regex": "^9.2.2", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/string-width-cjs": { - "name": "string-width", - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "peer": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width-cjs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "peer": true - }, - "node_modules/string-width/node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, - "node_modules/string-width/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "peer": true, - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-ansi-cjs": { - "name": "strip-ansi", - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "peer": true, + "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -3463,43 +3090,6 @@ "node": ">=8" } }, - "node_modules/svelte": { - "version": "4.2.19", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz", - "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==", - "peer": true, - "dependencies": { - "@ampproject/remapping": "^2.2.1", - "@jridgewell/sourcemap-codec": "^1.4.15", - "@jridgewell/trace-mapping": "^0.3.18", - "@types/estree": "^1.0.1", - "acorn": "^8.9.0", - "aria-query": "^5.3.0", - "axobject-query": "^4.0.0", - "code-red": "^1.0.3", - "css-tree": "^2.3.1", - "estree-walker": "^3.0.3", - "is-reference": "^3.0.1", - "locate-character": "^3.0.0", - "magic-string": "^0.30.4", - "periscopic": "^3.1.0" - }, - "engines": { - "node": ">=16" - } - }, - "node_modules/svelte-hmr": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz", - "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==", - "peer": true, - "engines": { - "node": "^12.20 || ^14.13.1 || >= 16" - }, - "peerDependencies": { - "svelte": "^3.19.0 || ^4.0.0" - } - }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -3596,9 +3186,10 @@ } }, "node_modules/vite": { - "version": "5.4.6", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz", - "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==", + "version": "5.4.10", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz", + "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==", + "dev": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", @@ -3653,24 +3244,11 @@ } } }, - "node_modules/vitefu": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz", - "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==", - "peer": true, - "peerDependencies": { - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" - }, - "peerDependenciesMeta": { - "vite": { - "optional": true - } - } - }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -3681,100 +3259,6 @@ "node": ">= 8" } }, - "node_modules/wrap-ansi": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", - "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", - "peer": true, - "dependencies": { - "ansi-styles": "^6.1.0", - "string-width": "^5.0.1", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/wrap-ansi-cjs": { - "name": "wrap-ansi", - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "peer": true, - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, - "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "peer": true - }, - "node_modules/wrap-ansi-cjs/node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "peer": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi/node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, - "node_modules/wrap-ansi/node_modules/ansi-styles": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", - "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/wrap-ansi/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "peer": true, - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index e8b78b596..6ba755ae1 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "5.4.0", - "@abgov/web-components": "1.29.0", + "@abgov/react-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/react-components", + "@abgov/web-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/web-components", + "@abgov/ui-components-common": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/common", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "octokit": "^4.0.2", diff --git a/src/App.tsx b/src/App.tsx index 404f84c1d..30b58c144 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,16 @@ -import React, { ReactNode } from "react"; +import React from "react"; import ReactDOM from "react-dom/client"; import { Route, RouterProvider, createBrowserRouter, - createRoutesFromElements, + createRoutesFromElements, useParams } from "react-router-dom"; import "@abgov/web-components"; import Root from "@routes/root"; -import { useMediaQuery } from "@hooks/useMediaQuery"; -import { DeviceWidthContext } from "@contexts/DeviceWidthContext"; +import { DeviceWidthProvider } from "@contexts/DeviceWidthContext"; import "./index.css"; // Support @@ -115,74 +114,97 @@ import TaskListPage from "@routes/patterns/TaskListPage"; import QuestionPage from "@routes/patterns/QuestionPage"; import ReviewPage from "@routes/patterns/ReviewPage"; import ResultPage from "@routes/patterns/ResultPage"; +import { VersionProvider } from "@contexts/VersionContext.tsx"; +const componentRoutes = { + accordion: , + badge: , + block: , + button: , + "button-group": , + callout: , + checkbox: , + container: , + "date-picker": , + details: , + divider: , + dropdown: , + "file-uploader": , + "filter-chip": , + "form-item": , + "form-stepper": , + grid: , + "hero-banner": , + icons: , + "icon-button": , + input: , + list: , + "microsite-header": , + modal: , + "notification-banner": , + pagination: , + popover: , + "progress-indicator": , + radio: , + "side-menu": , + "skeleton-loader": , + spacer: , + table: , + tabs: , + text: , + "text-area": , + tooltip: , + "text-field": , + header: , + footer: , +} +const supportedVersions = ['v3-angular', 'v4-react']; + +const getComponent = (componentName: keyof typeof componentRoutes) => { + return componentRoutes[componentName] || ; interface DeviceWidthProviderProps { children: ReactNode; } -const DeviceWidthProvider: React.FC = ({ children }) => { - const isDesktop = useMediaQuery("(min-width: 1232px)"); - const isMobile = useMediaQuery("(max-width: 623px)"); - - return ( - - {children} - - ); +const ComponentRoute: React.FC = () => { + const { component } = useParams<{ component: string }>(); + const Component = componentRoutes[component as keyof typeof componentRoutes] || ; + return Component; }; +const VersionedComponentRoute: React.FC = () => { + const { version, component } = useParams<{ version: string, component: string }>(); + if (!version || !component) { + return ; + } + if (!supportedVersions.includes(version)) { + return ; + } + return getComponent(component as keyof typeof componentRoutes); +} + const router = createBrowserRouter( createRoutesFromElements( - }> + }> } /> + + {/*// user copy and paste the URL: /v5/components/accordion but they choose angular ==> 404*/} } errorElement={}> + {/* Non-versioned paths components */} } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + } + /> + {/* Versioned paths components */} + } /> + + } @@ -237,7 +259,7 @@ const router = createBrowserRouter( } errorElement={}> } /> - } /> + } /> } /> } /> } /> @@ -251,8 +273,12 @@ const router = createBrowserRouter( ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - + + + + + + + ); diff --git a/src/components/code-snippet/CodeSnippet.tsx b/src/components/code-snippet/CodeSnippet.tsx index 8d8fcd895..625832ce9 100644 --- a/src/components/code-snippet/CodeSnippet.tsx +++ b/src/components/code-snippet/CodeSnippet.tsx @@ -1,7 +1,7 @@ import { FC, ReactElement, ReactNode, useEffect, useRef, useState } from "react"; import "./CodeSnippet.css"; -import { GoAButton, GoAIconButton, GoATooltip } from "@abgov/react-components"; +import { GoabButton, GoabIconButton, GoabTooltip } from "@abgov/react-components"; import { renderToString } from "react-dom/server"; import hljs from "highlight.js/lib/core"; @@ -115,21 +115,21 @@ export const CodeSnippet: FC = ({ lang, allowCopy, code, children }) => { {showMore && !isExpanded &&
} {showMore && (
- setIsExpanded(!isExpanded)}> Show {isExpanded ? "less" : "more"} - +
)} {allowCopy && (
- - - + + +
)} diff --git a/src/components/component-header/ComponentHeader.tsx b/src/components/component-header/ComponentHeader.tsx index 14e700bc8..0dd5c8f95 100644 --- a/src/components/component-header/ComponentHeader.tsx +++ b/src/components/component-header/ComponentHeader.tsx @@ -1,4 +1,4 @@ -import { GoABadge } from "@abgov/react-components"; +import { GoabBadge } from "@abgov/react-components"; import "./ComponentHeader.css"; import { Link } from "react-router-dom"; @@ -21,7 +21,7 @@ export enum Category { export const ComponentHeader: React.FC = (props: Props) => { return (
- +

{props.name}

diff --git a/src/components/component-properties/ComponentProperties.tsx b/src/components/component-properties/ComponentProperties.tsx index 14357d5af..35f4073cd 100644 --- a/src/components/component-properties/ComponentProperties.tsx +++ b/src/components/component-properties/ComponentProperties.tsx @@ -1,9 +1,8 @@ -import { GoAAccordion, GoABadge } from "@abgov/react-components"; +import { GoabAccordion, GoabBadge } from "@abgov/react-components"; import { useContext, useEffect, useState } from "react"; import { LanguageContext } from "@components/sandbox"; import css from "./ComponentProperties.module.css"; - export type ComponentProperty = { name: string; type?: string | string[]; @@ -46,13 +45,14 @@ export const ComponentProperties = (props: Props) => { > {props.heading || "Properties"} - +
{filteredProperties.map((props, index) => ( + ))}
- + ); }; @@ -67,7 +67,7 @@ function ComponentProperty({ props }: ComponentPropertyProps) {
{props.name} - {props.required && } + {props.required && } {props.type && ( diff --git a/src/components/do-dont/DoDont.tsx b/src/components/do-dont/DoDont.tsx index 82104499e..1cf19e3e6 100644 --- a/src/components/do-dont/DoDont.tsx +++ b/src/components/do-dont/DoDont.tsx @@ -1,4 +1,4 @@ -import { GoAIcon } from "@abgov/react-components"; +import { GoabIcon } from "@abgov/react-components"; import "./DoDont.css"; import { ReactNode } from "react"; @@ -15,7 +15,7 @@ export function DoDont({ type, children, description }: Props) {
{children}
{(type === "do" || type === "dont") && (
- {type === "do" ? : } + {type === "do" ? : }
{type === "do" ? "Do" : "Dont"}
)} diff --git a/src/components/icon-snippet/IconSnippet.tsx b/src/components/icon-snippet/IconSnippet.tsx index 56ba19015..bcb27bfe7 100644 --- a/src/components/icon-snippet/IconSnippet.tsx +++ b/src/components/icon-snippet/IconSnippet.tsx @@ -1,9 +1,10 @@ import { FC, useState } from "react"; -import { GoAIcon, GoAIconType } from "@abgov/react-components"; +import { GoabIcon } from "@abgov/react-components"; import "./IconSnippet.css"; +import { GoabIconType } from "@abgov/ui-components-common"; interface Props { - type: GoAIconType; + type: GoabIconType; } export const IconSnippet: FC = ({ type }) => { @@ -19,7 +20,7 @@ export const IconSnippet: FC = ({ type }) => { return ( <>
- + {type}
{calloutVariant && (
- +
)}
diff --git a/src/components/sandbox/AngularReactiveSerializer.ts b/src/components/sandbox/AngularReactiveSerializer.ts index 049a11b98..76efaba5a 100644 --- a/src/components/sandbox/AngularReactiveSerializer.ts +++ b/src/components/sandbox/AngularReactiveSerializer.ts @@ -17,8 +17,8 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali " " ); - constructor(properties: ComponentBinding[]) { - super(properties); + constructor(properties: ComponentBinding[], isOldVersion: boolean) { + super(properties, isOldVersion); } setIsRoot(isRoot: boolean) { @@ -93,9 +93,13 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali if (this.nativeEls.includes(name)) { return name; } - const prefix = "GoA"; - const tail = name.replace(prefix, ""); - return `${prefix.toLowerCase()}-${this.dasherize(tail)}`; + const currentPrefix = "Goab"; + const oldPrefix = "goa"; + const tail = name.replace(currentPrefix, ""); + if (this.isOldVersion) { + return `${oldPrefix}-${this.dasherize(tail)}`; + } + return `${currentPrefix.toLowerCase()}-${this.dasherize(tail)}`; } componentToString(name: string): string { diff --git a/src/components/sandbox/AngularSerializer.ts b/src/components/sandbox/AngularSerializer.ts index 3da605b13..db3f38dfa 100644 --- a/src/components/sandbox/AngularSerializer.ts +++ b/src/components/sandbox/AngularSerializer.ts @@ -8,8 +8,8 @@ export class AngularSerializer extends BaseSerializer implements Serializer { " " ); - constructor(properties: ComponentBinding[]) { - super(properties); + constructor(properties: ComponentBinding[], isOldVersion: boolean) { + super(properties, isOldVersion); } setIsRoot(isRoot: boolean) { @@ -76,9 +76,13 @@ export class AngularSerializer extends BaseSerializer implements Serializer { if (this.nativeEls.includes(name)) { return name; } - const prefix = "GoA"; - const tail = name.replace(prefix, ""); - return `${prefix.toLowerCase()}-${this.dasherize(tail)}`; + const currentPrefix = "Goab"; + const oldPrefix = "goa"; + const tail = name.replace(currentPrefix, ""); + if (this.isOldVersion) { + return `${oldPrefix}-${this.dasherize(tail)}`; + } + return `${currentPrefix.toLowerCase()}-${this.dasherize(tail)}`; } componentToString(name: string): string { diff --git a/src/components/sandbox/BaseSerializer.ts b/src/components/sandbox/BaseSerializer.ts index a847380cb..545835ad2 100644 --- a/src/components/sandbox/BaseSerializer.ts +++ b/src/components/sandbox/BaseSerializer.ts @@ -36,7 +36,7 @@ export class BaseSerializer { protected isRoot = false; protected state: SerializerState = { element: "", props: { name: "" } }; - constructor(protected properties: ComponentBinding[]) {} + constructor(protected properties: ComponentBinding[], protected isOldVersion: boolean = false) {} getProperty(name: string): ComponentBinding | undefined { return this.properties.find(p => p.name === name); diff --git a/src/components/sandbox/ComponentBinding.ts b/src/components/sandbox/ComponentBinding.ts index 7a941c336..620269d50 100644 --- a/src/components/sandbox/ComponentBinding.ts +++ b/src/components/sandbox/ComponentBinding.ts @@ -69,5 +69,5 @@ export interface RadioBinding extends BaseBinding { export interface DateBinding extends BaseBinding { type: "date", - value?: Date; + value?: Date|string; } diff --git a/src/components/sandbox/ReactSerializer.ts b/src/components/sandbox/ReactSerializer.ts index a9f279981..a55f9b9f2 100644 --- a/src/components/sandbox/ReactSerializer.ts +++ b/src/components/sandbox/ReactSerializer.ts @@ -4,8 +4,8 @@ import { BaseSerializer, Serializer } from "./BaseSerializer"; export class ReactSerializer extends BaseSerializer implements Serializer { public isRoot = false; - constructor(properties: ComponentBinding[]) { - super(properties); + constructor(properties: ComponentBinding[], isOldVersion: boolean) { + super(properties, isOldVersion); } setIsRoot(isRoot: boolean) { @@ -64,6 +64,9 @@ export class ReactSerializer extends BaseSerializer implements Serializer { } componentNameToString(name: string): string { + if (this.isOldVersion) { + return name.replace(/^Goab/, "GoA"); + } return name; } diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx index a481b759b..c873efde5 100644 --- a/src/components/sandbox/Sandbox.tsx +++ b/src/components/sandbox/Sandbox.tsx @@ -11,9 +11,10 @@ import ComponentSerializer from "./ComponentSerializer"; import "./Sandbox.css"; import React from "react"; +import { useVersion } from "@contexts/VersionContext.tsx"; type Flag = "reactive"; -type ComponentType = "goa" | "codesnippet"; +type ComponentType = "goa" | "goab" | "codesnippet"; type Serializer = (el: any, properties: ComponentBinding[]) => string; interface SandboxProps { @@ -25,34 +26,34 @@ interface SandboxProps { onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record) => void; flags?: Flag[]; skipRender?: boolean; // prevent rendering the snippet, to allow custom code to be shown - allow?: string[]; // Be default the Sandbox is selective to what it renders out. This adds - // additional elements to what is allowed to be rendered out + allow?: string[]; // Be default the Sandbox is selective to what it renders out. This adds + // additional elements to what is allowed to be rendered out children: ReactNode; } type SandboxViewProps = { fullWidth?: boolean; sandboxProps: SandboxProps; -} +}; export const Sandbox = (props: SandboxProps) => { - const lang = useContext(LanguageContext); + const version = useVersion(); const [formatLang, setFormatLang] = useState(""); const serializers: Record = { - "react": (els: ReactElement[], properties) => { - const serializer = new ComponentSerializer(new ReactSerializer(properties)); + react: (els: ReactElement[], properties) => { + const serializer = new ComponentSerializer(new ReactSerializer(properties, !!version?.length)); return serializer.componentsToString(els); }, - "angular": (els: ReactElement[], properties) => { - const serializer = new ComponentSerializer(new AngularSerializer(properties)); + angular: (els: ReactElement[], properties) => { + const serializer = new ComponentSerializer(new AngularSerializer(properties, !!version?.length)); return serializer.componentsToString(els); }, "angular-reactive": (els: ReactElement[], properties) => { - const serializer = new ComponentSerializer(new AngularReactiveSerializer(properties)); + const serializer = new ComponentSerializer(new AngularReactiveSerializer(properties, !!version?.length)); return serializer.componentsToString(els); }, }; @@ -92,11 +93,16 @@ export const Sandbox = (props: SandboxProps) => { } function SandboxView(props: SandboxViewProps): ReactElement { - return
-
- + return ( +
+
+ +
-
+ ); } return ( @@ -112,7 +118,7 @@ export const Sandbox = (props: SandboxProps) => { )} - {props.note && (
{props.note}
)} + {props.note &&
{props.note}
} ); }; @@ -122,7 +128,8 @@ type SandboxCodeProps = { lang: string; formatLang: string; serializers: Record; -} +}; + function SandboxCode(p: SandboxCodeProps) { // reactive angular if (p.lang === "angular" && p.props.flags?.includes("reactive")) { @@ -130,12 +137,26 @@ function SandboxCode(p: SandboxCodeProps) { <>

Event based

- {!p.props.skipRender && } + {!p.props.skipRender && ( + + )}

Reactive forms (FormControl)

- {!p.props.skipRender && } + {!p.props.skipRender && ( + + )} ); } @@ -145,7 +166,14 @@ function SandboxCode(p: SandboxCodeProps) { return ( <> - {!p.props.skipRender && } + {!p.props.skipRender && ( + + )} ); } @@ -155,7 +183,14 @@ function SandboxCode(p: SandboxCodeProps) { return ( <> - {!p.props.skipRender && } + {!p.props.skipRender && ( + + )} ); } @@ -163,29 +198,28 @@ function SandboxCode(p: SandboxCodeProps) { return <>No formatter found for {p.formatLang}; } - // Gets code snippets matching the tags passed in. This allows for Angular reactive components // to be displayed, while hiding the non-reactive ones type AdditionalCodeSnippetsProps = { tags: string[]; sandboxProps: SandboxProps; -} +}; + function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) { const matches = (list: string[]): boolean => { return props.tags.filter(tag => list.includes(tag)).length === list.length; }; - const els = ComponentList({type: "codesnippet", sandboxProps: props.sandboxProps}) - .filter(el => { + const els = ComponentList({ type: "codesnippet", sandboxProps: props.sandboxProps }).filter( + el => { if (el.props.lang === "css") return true; - const componentTags: string[] = - Array.isArray(el.props.tags) - ? el.props.tags - : [el.props.tags]; - if (props.tags.length !== componentTags.length) - return false; + const componentTags: string[] = Array.isArray(el.props.tags) + ? el.props.tags + : [el.props.tags]; + if (props.tags.length !== componentTags.length) return false; return matches(componentTags); - }); - return <>{els} + } + ); + return <>{els}; } // Filters components from within the Sandbox children @@ -193,20 +227,20 @@ function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) { type ComponentListProps = { sandboxProps: SandboxProps; type: ComponentType; -} +}; + function ComponentList(props: ComponentListProps): ReactElement[] { const children = React.Children.toArray(props.sandboxProps.children) as ReactElement[]; const isValidGOAComponent = (el: ReactElement) => typeof el.type === "function" && el.type.name.toLowerCase().startsWith(props.type); const isAllowedInSandbox = (el: ReactElement) => - typeof el.type === "string" && props.sandboxProps.allow?.includes(el.type) || - typeof el.type === "function" && props.sandboxProps.allow?.includes(el.type.name); + (typeof el.type === "string" && props.sandboxProps.allow?.includes(el.type)) || + (typeof el.type === "function" && props.sandboxProps.allow?.includes(el.type.name)); return children.filter( el => React.isValidElement(el) && (isValidGOAComponent(el) || isAllowedInSandbox(el)) ); } - // CodeSnippet output. To show code the root element *must* start with goa (case-insensitive). // This allows type ComponentOutputProps = { @@ -214,29 +248,22 @@ type ComponentOutputProps = { type: "angular" | "angular-reactive" | "react"; sandboxProps: SandboxProps; serializer: Serializer; -} +}; function ComponentOutput(props: ComponentOutputProps): ReactElement { let code = props.serializer( - ComponentList({type: "goa", sandboxProps: props.sandboxProps}) - ,props.sandboxProps.properties || [] - ) + ComponentList({ type: "goab", sandboxProps: props.sandboxProps }), + props.sandboxProps.properties || [] + ); // HACK: solve angular template error: If you meant to write the @ character, you should use the "@" HTML entity instead. if (props.type.includes("angular")) { code = code.replace(/@/g, "@"); } // HACK: remove `$1`s that appear only in the prod build - code = code.replace(/\$1/g, "") + code = code.replace(/\$1/g, ""); - return ( - - ) + return ; } - export default Sandbox; diff --git a/src/components/sandbox/SandboxProperties.tsx b/src/components/sandbox/SandboxProperties.tsx index 7cf7c06ec..af7a48435 100644 --- a/src/components/sandbox/SandboxProperties.tsx +++ b/src/components/sandbox/SandboxProperties.tsx @@ -1,15 +1,20 @@ import { - GoACheckbox, - GoADatePicker, - GoADropdown, - GoADropdownItem, - GoAFormItem, - GoAInput, - GoARadioGroup, - GoARadioItem, + GoabCheckbox, + GoabDatePicker, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, + GoabInput, + GoabRadioGroup, + GoabRadioItem, } from "@abgov/react-components"; import { ComponentBinding } from "./ComponentBinding"; -import { GoAFormItemRequirement } from "@abgov/react-components"; +import { + GoabCheckboxOnChangeDetail, GoabDatePickerOnChangeDetail, + GoabDropdownOnChangeDetail, + GoabFormItemRequirement, + GoabRadioGroupOnChangeDetail +} from "@abgov/ui-components-common"; interface Props { properties?: ComponentBinding[]; @@ -17,24 +22,24 @@ interface Props { } export function SandboxProperties({ properties = [], onChange }: Props) { - function onListChange(name: string, value: string | string[]) { - const prop = properties.find(p => ["list", "dropdown"].includes(p.type) && p.name === name); + function onListChange(event: GoabDropdownOnChangeDetail) { + const prop = properties.find(p => ["list", "dropdown"].includes(p.type) && p.name === event.name); if (!prop || !["list", "dropdown"].includes(prop.type)) return; - prop.value = !value ? "" : typeof value === "string" ? value : value[0]; + prop.value = !event.value ? "" : event.value; onChange([...properties]); } - function onRadioChange(name: string, value: string | string[]) { - const prop = properties.find(p => p.type === "radio" && p.name === name); + function onRadioChange(event: GoabRadioGroupOnChangeDetail) { + const prop = properties.find(p => p.type === "radio" && p.name === event.name); if (!prop || prop.type !== "radio") return; - prop.value = !value ? "" : typeof value === "string" ? value : value[0]; + prop.value = !event.value ? "" : event.value; onChange([...properties]); } - function onComboboxChange(name: string, value: string | string[]) { - const prop = properties.find(p => p.type === "combobox" && p.name === name); + function onComboboxChange(event: GoabDropdownOnChangeDetail) { + const prop = properties.find(p => p.type === "combobox" && p.name === event.name); if (!prop || prop.type !== "combobox") return; - prop.value = !value ? "" : typeof value === "string" ? value : value[0]; + prop.value = !event.value ? "" : event.value; onChange([...properties]); } @@ -52,17 +57,17 @@ export function SandboxProperties({ properties = [], onChange }: Props) { onChange([...properties]); } - function onCheckboxChange(name: string, checked: boolean, _value: string): void { - const prop = properties.find(p => p.type === "boolean" && p.name === name); + function onCheckboxChange(event: GoabCheckboxOnChangeDetail): void { + const prop = properties.find(p => p.type === "boolean" && p.name === event.name); if (!prop || prop.type !== "boolean") return; - prop.value = checked; + prop.value = event.checked; onChange([...properties]); } - function onDateChange(name: string, value: Date | undefined): void { - const prop = properties.find(p => p.type === "date" && p.name === name); + function onDateChange(event: GoabDatePickerOnChangeDetail): void { + const prop = properties.find(p => p.type === "date" && p.name === event.name); if (!prop || prop.type !== "date") return; - prop.value = value; + prop.value = event.value; onChange([...properties]); } @@ -75,19 +80,19 @@ export function SandboxProperties({ properties = [], onChange }: Props) { case "list": case "dropdown": return ( - + {p.options.map(option => ( - ))} - + ); case "combobox": return ( - {p.options.map(option => ( - ))} - + ); case "radio": return ( - + {p.options.map(option => { - return ; + return ; })} - + ); case "boolean": return ( - ); case "string": - return ; + return onTextChange(p.name, event.value)} />; case "number": return ( - + onNumberChange(p.name, event.value)} /> ); case "date": return ( - + ) } } @@ -138,9 +143,9 @@ export function SandboxProperties({ properties = [], onChange }: Props) { return (
{properties.filter(p => !p.hidden).map(p => ( - + {renderProps(p)} - + ))}
); diff --git a/src/components/support-info/SupportInfo.tsx b/src/components/support-info/SupportInfo.tsx index 6c6d7792d..11e66ab78 100644 --- a/src/components/support-info/SupportInfo.tsx +++ b/src/components/support-info/SupportInfo.tsx @@ -1,4 +1,4 @@ -import { GoACallout } from "@abgov/react-components"; +import { GoabCallout } from "@abgov/react-components"; import "./SupportInfo.css"; export const SupportInfo = (props: { hidden?: boolean }) => { @@ -7,7 +7,7 @@ export const SupportInfo = (props: { hidden?: boolean }) => { } return ( ); }; diff --git a/src/components/token-snippet/TokenSnippet.tsx b/src/components/token-snippet/TokenSnippet.tsx index fc2ed0e1c..9746e48db 100644 --- a/src/components/token-snippet/TokenSnippet.tsx +++ b/src/components/token-snippet/TokenSnippet.tsx @@ -1,7 +1,7 @@ import { FC, useContext, useState } from "react"; import "./TokenSnippet.css"; -import { GoAIcon } from "@abgov/react-components"; +import { GoabIcon } from "@abgov/react-components"; import { DesignTokensLanguageContext } from "@components/sandbox"; interface Props { @@ -29,7 +29,7 @@ export const TokenSnippet: FC = ({ code }) => { {code} - + diff --git a/src/contexts/DeviceWidthContext.ts b/src/contexts/DeviceWidthContext.ts deleted file mode 100644 index 81ca38c45..000000000 --- a/src/contexts/DeviceWidthContext.ts +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; - -export const DeviceWidthContext = React.createContext({ - isDesktop: true, - isMobile: false, -}); diff --git a/src/contexts/DeviceWidthContext.tsx b/src/contexts/DeviceWidthContext.tsx new file mode 100644 index 000000000..c4a2d494e --- /dev/null +++ b/src/contexts/DeviceWidthContext.tsx @@ -0,0 +1,22 @@ +import React, { ReactNode } from "react"; +import { useMediaQuery } from "@hooks/useMediaQuery.tsx"; + +interface DeviceWidthProviderProps { + children: ReactNode; +} + +export const DeviceWidthContext = React.createContext({ + isDesktop: true, + isMobile: false, +}); + +export const DeviceWidthProvider: React.FC = ({ children }) => { + const isDesktop = useMediaQuery("(min-width: 1232px)"); + const isMobile = useMediaQuery("(max-width: 623px)"); + + return ( + + {children} + +); +}; diff --git a/src/contexts/VersionContext.tsx b/src/contexts/VersionContext.tsx new file mode 100644 index 000000000..61ff1c488 --- /dev/null +++ b/src/contexts/VersionContext.tsx @@ -0,0 +1,47 @@ +import React, { createContext, useContext, useEffect, useState, ReactNode } from "react"; + +interface VersionContextProps { + version: string | null; +} + +const VersionContext = createContext({ version: null }); + +export const useVersion = () => useContext(VersionContext).version; + +interface VersionProviderProps { + children: ReactNode; +} + +export const VersionProvider: React.FC = ({ children }) => { + const [version, setVersion] = useState(null); + + useEffect(() => { + const updateVersion = () => { + const pathSegments = window.location.pathname.split("/"); + const versionSegment = pathSegments.find(segment => segment.startsWith("v")); + if (versionSegment) { + setVersion(versionSegment); + if (versionSegment.includes("angular")) { + localStorage.setItem("goa-docs-lang", "angular"); + } + if (versionSegment.includes("react")) { + localStorage.setItem("goa-docs-lang", "react"); + } + } else { + setVersion(null); + } + }; + + // Initial call to set the version + updateVersion(); + + // Add event listener for popstate + window.addEventListener("popstate", updateVersion); + + // Cleanup event listener on component unmount + return () => { + window.removeEventListener("popstate", updateVersion); + }; + }, []); + return {children}; +}; diff --git a/src/examples/accordion/AccordionExamples.tsx b/src/examples/accordion/AccordionExamples.tsx index 236deb702..3610316e1 100644 --- a/src/examples/accordion/AccordionExamples.tsx +++ b/src/examples/accordion/AccordionExamples.tsx @@ -1,4 +1,4 @@ -import { GoAAccordion, GoABadge, GoAButton } from "@abgov/react-components"; +import { GoabAccordion, GoabBadge, GoabButton } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import "./accordion-example.css"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; @@ -87,7 +87,7 @@ export default function AccordionExamples() { code={`

Review your application

- +
Date of referral
January 27, 2021
@@ -98,23 +98,23 @@ export default function AccordionExamples() {
Intake received from another site
Yes
- + - +
Name
Joan Smith
Contact preference
Text message
- + `} />

Review your application

- }> + headingContent={}>
Date of referral
January 27, 2021
@@ -125,16 +125,16 @@ export default function AccordionExamples() {
Intake received from another site
Yes
- + - +
Name
Joan Smith
Contact preference
Text message
- +

Hide and show many sections of information (FAQ)

@@ -224,28 +224,28 @@ export default function AccordionExamples() { `} /> - onClick()}> + onClick()}> { accordionStatus } - + - + To create an account you will need to contact your office admin. - + - + You will need to verify your identity through our two factor authentication in addition to the digital signature. - + - + Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses. - + - + Yes, our digital service is designed with accessibility in mind. More information on accessibility. - + ); diff --git a/src/examples/checkbox/CheckboxExamples.tsx b/src/examples/checkbox/CheckboxExamples.tsx index abb5203db..6b5966559 100644 --- a/src/examples/checkbox/CheckboxExamples.tsx +++ b/src/examples/checkbox/CheckboxExamples.tsx @@ -1,4 +1,4 @@ -import { GoACheckbox, GoAFormItem } from "@abgov/react-components"; +import { GoabCheckbox, GoabFormItem } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; @@ -41,17 +41,17 @@ export default function CheckboxExamples () { `} /> - - + Help text with a link.} /> - - - + + + ); -} \ No newline at end of file +} diff --git a/src/examples/container/ContainerExamples.tsx b/src/examples/container/ContainerExamples.tsx index 4a31e438e..006fe3840 100644 --- a/src/examples/container/ContainerExamples.tsx +++ b/src/examples/container/ContainerExamples.tsx @@ -1,10 +1,10 @@ import { - GoABadge, - GoABlock, - GoAButton, - GoAContainer, GoADropdown, GoADropdownItem, GoAFormItem, - GoAGrid, GoARadioGroup, GoARadioItem, - GoATable, GoATextArea + GoabBadge, + GoabBlock, + GoabButton, + GoabContainer, GoabDropdown, GoabDropdownItem, GoabFormItem, + GoabGrid, GoabRadioGroup, GoabRadioItem, + GoabTable, GoabTextarea } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; @@ -177,33 +177,33 @@ export default function ContainerExamples() { /> {/*Code Block*/} - + Housing Advisor

Tracy Hero

- - + + Email Phone - + - + tracyhero@email.com 283-203-4921 - - - + + + - {}}> + {}}> Add to calendar - + }>
- + Business plan submission @@ -222,9 +222,9 @@ export default function ContainerExamples() { January 3, 2025 - +
- +

Card view of case files

@@ -263,56 +263,56 @@ export default function ContainerExamples() { `} /> - +
- + Fiscal year: 2021/2022 Submitted: April 23, 2023 - +
- - - + + + Edit - - + +
- + - +
- + Fiscal year: 2020/2021 Submitted: April 9, 2022 - +
- - - + + + View - - + +
- + - +
- + Fiscal year: 2019/2020 Submitted: April 14, 2021 - +
- - - + + + View - - + +
- +

Card grid that links to different sections

@@ -334,55 +334,55 @@ export default function ContainerExamples() { `} /> - - + + Waitlist submission
Enter and maintain information about the households waiting for affordable housing with your organization.
- + - + Lodge assistance program
Keep track of the individuals who are placed in lodges and may qualify for the Lodge Assistance Program subsidy.
- + - + Education Support
Explore educational resources, enroll in courses, and track your academic progress effortlessly.
- + - + Social Assistance
Learn about available support programs, apply for financial aid, and access community resources.
- + - + Employment Opportunity
Search for job openings, access career development tools, and receive employment-related updates.
- + - + Housing Assistance
Find affordable housing options, apply for housing subsidies, and report maintenance issues seamlessly.
- - + +

Review and action

@@ -421,45 +421,45 @@ export default function ContainerExamples() { `} /> - - + +

Appearance details

- - + + Doe, John Scott - + - + Mar 14, 2021 - + - + Calgary - + - + Sep 20, 2021 - - + +
Docket number(s) $ charges
- +
1) 12345678

CC 334(1) - Theft under $5000

CC 268(1) - Aggravated assult

- + - +
2) 12345678

CC 334(1) - Theft under $5000

CC 268(1) - Aggravated assult

- + - +
3) 12345678

CC 334(1) - Theft under $5000 @@ -467,34 +467,34 @@ export default function ContainerExamples() {

CC 268(1) - Aggravated assult

- - - + + +

Adjournment request

Keep track of the individuals who are placed in lodges and may qualify for the Lodge Assistance Program subsidy.

- - {}}> - - - - - - - {}}> - - - - - - - - {}}/> - - - {}}>Confirm - - + + {}}> + + + + + + + {}}> + + + + + + + + {}}/> + + + {}}>Confirm + + ); diff --git a/src/examples/dropdown/DropdownExamples.tsx b/src/examples/dropdown/DropdownExamples.tsx index bc5d70463..d4e4eeee8 100644 --- a/src/examples/dropdown/DropdownExamples.tsx +++ b/src/examples/dropdown/DropdownExamples.tsx @@ -1,24 +1,24 @@ import { useContext, useState } from "react"; import { - DropdownItemMountType, - GoAButton, - GoAButtonGroup, - GoAContainer, - GoADivider, - GoADropdown, - GoADropdownItem, - GoAFormItem, - GoAInput, - GoARadioGroup, - GoARadioItem, + GoabContainer, GoabFormItem, GoabInput, GoabRadioGroup, + GoabButton, + GoabButtonGroup, + GoabDivider, + GoabDropdown, + GoabDropdownItem, + GoabRadioItem } from "@abgov/react-components"; import { LanguageContext } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabDropdownItemMountType, GoabDropdownOnChangeDetail, + GoabInputOnChangeDetail, GoabRadioGroupOnChangeDetail +} from "@abgov/ui-components-common"; type Task = { value: string; label: string; - mount: DropdownItemMountType; + mount: GoabDropdownItemMountType; }; export const DropdownExamples = () => { @@ -26,7 +26,7 @@ export const DropdownExamples = () => { const [tasks, setTasks] = useState([ { label: "Finish Report", value: "finish-report", mount: "append" }, { label: "Attend Meeting", value: "attend-meeting", mount: "append" }, - { label: "Reply Emails", value: "reply-emails", mount: "append" }, + { label: "Reply Emails", value: "reply-emails", mount: "append" } ]); const [newTask, setNewTask] = useState(""); const [mountType, setNewMountType] = useState("append"); @@ -34,8 +34,8 @@ export const DropdownExamples = () => { const [taskError, setTaskError] = useState(false); const [isReset, setIsReset] = useState(false); - function onMountTypeChange(value: string) { - setNewMountType(value); + function onMountTypeChange(value: string | undefined) { + setNewMountType(value as string); } function addTask() { @@ -48,7 +48,7 @@ export const DropdownExamples = () => { const task = { label: newTask, value: newTask.toLowerCase().replace(" ", "-"), - mount: mountType as DropdownItemMountType, + mount: mountType as GoabDropdownItemMountType }; setTasks([...tasks, task]); setIsReset(false); @@ -89,73 +89,75 @@ export const DropdownExamples = () => { -

Dynamically add an item to a dropdown list

- -
- - setNewTask(value)} - name="item" - placeholder="" - value={newTask}> - +

Dynamic options

+ +

Dynamically add an item to a dropdown list

+ +
+ + setNewTask(event.value)} + name="item" + placeholder="" + value={newTask}> + - - onMountTypeChange(value)} - value={mountType} - orientation="horizontal"> - - - - + + onMountTypeChange(event.value)} + value={mountType} + orientation="horizontal"> + + + + - - - Add new item - - - Reset list - - + + + Add new item + + + Reset list + + - + - -
- setSelectedTask(values as string)} - value={selectedTask} - name="selectedTask"> - {tasks.map(task => ( - - ))} - -
- -
- - {language === "angular" && ( - <> - +
+ setSelectedTask(event.value as string)} + value={selectedTask} + name="selectedTask"> + {tasks.map(task => ( + + ))} + +
+ +
+ + {language === "angular" && ( + <> + { return item.value; } }`} - /> - +
{
`} - /> - - )} - {language === "react" && ( - <> - + + )} + {language === "react" && ( + <> + { setTaskError(false); } `} - /> + /> -
{
`} - /> - - )} + /> + + )} - {/* ---------------------------------------- */} - {/* Parent child edge case */} - {/* ---------------------------------------- */} -

- Dynamically change items in a dropdown -

- -
- - - {parents.map(parent => ( - - ))} - - - - - {" "} - {children.map((child, _index) => ( - - ))} - - -
- + {/* ---------------------------------------- */} + {/* Parent child edge case */} + {/* ---------------------------------------- */} +

+ Dynamically change items in a dropdown +

+ +
+ + loadSchemas(event.name as string, event.value as string)}> + {parents.map(parent => ( + + ))} + + + + + {" "} + {children.map((child, _index) => ( + + ))} + + +
+ - {language === "react" && ( - <> - + { console.log("Children Changed"); }; `} - /> + /> - @@ -475,17 +478,17 @@ export const DropdownExamples = () => { `} - /> - - )} + /> + + )} - {language === "angular" && ( - <> - + { } } `} - /> - + {
`} - /> - - )} + /> + + )} + - ); -}; + ); +} diff --git a/src/examples/microsite-header/MicrositeHeaderExamples.tsx b/src/examples/microsite-header/MicrositeHeaderExamples.tsx index 32dc93600..9b273870e 100644 --- a/src/examples/microsite-header/MicrositeHeaderExamples.tsx +++ b/src/examples/microsite-header/MicrositeHeaderExamples.tsx @@ -1,4 +1,4 @@ -import { GoAMicrositeHeader } from "@abgov/react-components"; +import { GoabMicrositeHeader } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; @@ -13,7 +13,7 @@ export default function MicrositeHeaderExamples () {

Custom click event handler (for feedback)

- + `} /> - Slotted version text.v1.23} /> ) -} \ No newline at end of file +} diff --git a/src/examples/modal/ModalExamples.tsx b/src/examples/modal/ModalExamples.tsx index e2b2bf7e0..dfa363896 100644 --- a/src/examples/modal/ModalExamples.tsx +++ b/src/examples/modal/ModalExamples.tsx @@ -1,20 +1,20 @@ import { LanguageContext, Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { - GoAButton, - GoAButtonGroup, - GoAContainer, - GoADatePicker, - GoADropdown, - GoADropdownItem, - GoAFormItem, - GoAInput, - GoAModal, - GoATextArea, + GoabButton, + GoabButtonGroup, + GoabContainer, + GoabDatePicker, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, + GoabInput, + GoabModal, GoabTextarea } from "@abgov/react-components"; import { useContext, useState } from "react"; import { useNavigate } from "react-router-dom"; import "./modal-examples.css"; +import { GoabDropdownOnChangeDetail, GoabTextAreaOnChangeDetail } from "@abgov/ui-components-common"; export default function ModalExamples() { // hooks @@ -32,23 +32,20 @@ export default function ModalExamples() { const navigate = useNavigate(); const language = useContext(LanguageContext); // @ts-ignore - const onChangeEffectiveDate = (name: string, value: Date | undefined) => { - setEffectiveDate(value); + const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => { + setEffectiveDate(detail.value); }; - // @ts-ignore - const onChangeType = (name: string, value: string[] | string) => { - setType(value as string); + const onChangeType = (event: GoabDropdownOnChangeDetail) => { + setType(event.value); }; - // @ts-ignore - const onChangeName = (name: string, value: string) => { + const onChangeName = (value: string) => { setName(value); } - // @ts-ignore - const onChangeDescription = (name: string, value: string) => { - setDescription(value); + const onChangeDescription = (event: GoabTextAreaOnChangeDetail) => { + setDescription(event.value); } return ( @@ -58,24 +55,24 @@ export default function ModalExamples() {

Basic Modal

- setBasicModalOpen(true)}>Open Basic Modal - setBasicModalOpen(true)}>Open Basic Modal + setBasicModalOpen(false)} actions={ - - setBasicModalOpen(false)}> + + setBasicModalOpen(false)}> Secondary - - setBasicModalOpen(false)}> + + setBasicModalOpen(false)}> Primary - - + + }>

Content

- + Confirm a destructive action - setDestructiveModalOpen(true)}> Delete my application - - + - setDestructiveModalOpen(false)}> + + setDestructiveModalOpen(false)}> Cancel - - + setDestructiveModalOpen(false)}> Delete application - - + + }>

This action cannot be undone.

- + Warn a user of a deadline - setWarnCalloutModalOpen(true)}> + setWarnCalloutModalOpen(true)}> Save for later - - + setWarnCalloutModalOpen(false)} actions={ - - setWarnCalloutModalOpen(false)}> + + setWarnCalloutModalOpen(false)}> I understand - - + + }>

You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.

- + Confirm record change {/*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 - + + + setInputModalOpen(true)}>Save and continue + - - setInputModalOpen(false)}> + + setInputModalOpen(false)}> Undo address change - - setInputModalOpen(false)}> + + setInputModalOpen(false)}> Confirm - - + + }> - +
Before
123456 78 Ave NW, Edmonton, Alberta
@@ -355,15 +352,15 @@ export default function ModalExamples() {
After
881 12 Ave NW, Edmonton, Alberta
- - - + + - - - + value={effectiveDate}> + + + Add another item {/*Don't use a Sandbox because the Dropdown inside a modal will make the modal shifts everytime we tab from the dropdown*/} - - - setAddItemModalOpen(true)}> + + + setAddItemModalOpen(true)}> Add another item - - + + - - setAddItemModalOpen(false)}> + + setAddItemModalOpen(false)}> Cancel - - setAddItemModalOpen(false)}> + + setAddItemModalOpen(false)}> Save new item - - + + }>

Fill in the information to create a new item

- - - - - - - - - - - + + + + + + + onChangeName(event.value)} value={name} name="name"> + + + - - - + value={description}> + + + {language === "angular" && ( <> @@ -762,26 +759,26 @@ export default function ModalExamples() { > `} /> - setOnRouteChangeModalOpen(true)}>Open - setOnRouteChangeModalOpen(true)}>Open + setOnRouteChangeModalOpen(false)} actions={ - - setOnRouteChangeModalOpen(false)}> + + setOnRouteChangeModalOpen(false)}> Cancel - - + { setOnRouteChangeModalOpen(false); navigate("/components"); }}> Change route - - - }> + + + }> ); diff --git a/src/examples/question-page/QuestionPageExamples.tsx b/src/examples/question-page/QuestionPageExamples.tsx index 6b0ae5415..22ba0815f 100644 --- a/src/examples/question-page/QuestionPageExamples.tsx +++ b/src/examples/question-page/QuestionPageExamples.tsx @@ -1,13 +1,15 @@ import { Sandbox } from "@components/sandbox"; -import { - GoAButton, - GoADetails, GoADropdown, GoADropdownItem, - GoAFormItem, GoAInput, - GoARadioGroup, - GoARadioItem -} from "@abgov/react-components"; + import "./question-page-example.css"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabButton, + GoabDetails, GoabDropdown, GoabDropdownItem, + GoabFormItem, + GoabInput, + GoabRadioGroup, + GoabRadioItem +} from "@abgov/react-components"; export default function QuestionPageExamples() { @@ -51,21 +53,21 @@ export default function QuestionPageExamples() { Back - - {}}> - - + {}}> + + No - - - - + + + + Save and continue - +
@@ -126,15 +128,15 @@ export default function QuestionPageExamples() { categorized under 'school'.

Contact your provider if you’re concerned about your school status.

- - {}}> - - - - - + + {}}> + + + + + Save and continue - +
@@ -176,26 +178,26 @@ export default function QuestionPageExamples() { Back - - {}}> - - - - + + + + - +

We ask this question to determine if you are eligible for child care benefits.

- - + + Save and continue - +
@@ -246,18 +248,18 @@ export default function QuestionPageExamples() { Back

Personal information

- - + {}}> - - - - - + + + + + Save and continue - +
@@ -307,18 +309,18 @@ export default function QuestionPageExamples() { Back

Question 3 of 9

- - + {}}> - - - - - + + + + + Save and continue - +
@@ -373,53 +375,53 @@ export default function QuestionPageExamples() {

Your address

This is the home address of the person applying

- - + {}} name="address-line-1" ariaLabel="Address line 1" width="100%" /> - - - + + {}} name="address-line-2" ariaLabel="Address line 2" width="100%" /> - - - + + {}} name="town-city" ariaLabel="Town or city name" width={"460px"} /> - - - {}} name="province-territory" ariaLabelledBy="provinceLabel"> - - - - - - - - - - - - - - - - - {}} name="postal-code" width={"105px"} /> - - + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + {}} name="postal-code" width={"105px"} /> + + Save and continue - +
@@ -543,27 +545,27 @@ export default function QuestionPageExamples() {

Step 1 of 5

Personal information

- - {}} name="name" ariaLabel="what is your name?" width="50ch" /> - - - + {}} name="name" ariaLabel="what is your name?" width="50ch" /> + + + {}} name="phone-number" ariaLabel="what is your phone number?" leadingContent="+1" /> - - - + + {}} name="postal-code" width="14ch" - ariaLabel="what is your home postal code"> - - + ariaLabel="what is your home postal code"> + + Save and continue - +
); diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx index 8cab85aea..1a75dd078 100644 --- a/src/examples/radio/RadioExamples.tsx +++ b/src/examples/radio/RadioExamples.tsx @@ -1,6 +1,6 @@ -import { GoARadioGroup, GoARadioItem, GoAFormItem } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components"; const noop = () => { }; @@ -46,17 +46,17 @@ export default function RadioExamples () { `} /> - - - + + Help text with a link.} /> - - - - + + + +

Radio item with max width

@@ -98,18 +98,18 @@ export default function RadioExamples () { `} /> - - - + + - - - - + + + + ); -} \ No newline at end of file +} diff --git a/src/examples/result-page/ResultPageExamples.tsx b/src/examples/result-page/ResultPageExamples.tsx index ec1f8e575..03788dce3 100644 --- a/src/examples/result-page/ResultPageExamples.tsx +++ b/src/examples/result-page/ResultPageExamples.tsx @@ -1,10 +1,8 @@ import { Sandbox } from "@components/sandbox"; -import { - GoABlock, - GoACallout, -} from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import "./result-page-example.css"; +import { GoabBlock, GoabCallout } from "@abgov/react-components"; + export function ResultPageExamples() { @@ -85,15 +83,15 @@ export function ResultPageExamples() { `} /> - +

You have completed the application

- +

You will receive a copy of the confirmation to the email name@email.com

Your reference number is: 1234ABC

- +

What happens next

@@ -112,7 +110,7 @@ export function ResultPageExamples() {

Phone: 780 123 4567

- +
); diff --git a/src/examples/review-page/ReviewPageExamples.tsx b/src/examples/review-page/ReviewPageExamples.tsx index 4dd0032f3..644461f1f 100644 --- a/src/examples/review-page/ReviewPageExamples.tsx +++ b/src/examples/review-page/ReviewPageExamples.tsx @@ -1,11 +1,8 @@ import { Sandbox } from "@components/sandbox"; -import { - GoAButton, - GoAButtonGroup, - GoATable -} from "@abgov/react-components"; + import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import "./review-page-example.css"; +import { GoabButton, GoabButtonGroup, GoabTable } from "@abgov/react-components"; export function ReviewPageExamples() { @@ -38,7 +35,7 @@ export function ReviewPageExamples() { />

Review your answers

Your situation

- + @@ -46,7 +43,7 @@ export function ReviewPageExamples() { Other - Change + Change @@ -55,7 +52,7 @@ export function ReviewPageExamples() { Manager - Change + Change @@ -67,7 +64,7 @@ export function ReviewPageExamples() { No - Change + Change @@ -76,7 +73,7 @@ export function ReviewPageExamples() { No - Change + Change @@ -85,7 +82,7 @@ export function ReviewPageExamples() { Married - Change + Change @@ -94,7 +91,7 @@ export function ReviewPageExamples() { No - Change + Change @@ -103,15 +100,15 @@ export function ReviewPageExamples() { Yes - Change + Change - - - Confirm and continue - Back to application overview - + + + Confirm and continue + Back to application overview +
); diff --git a/src/examples/start-page/StartPageExamples.tsx b/src/examples/start-page/StartPageExamples.tsx index ef46c9a06..258d449e7 100644 --- a/src/examples/start-page/StartPageExamples.tsx +++ b/src/examples/start-page/StartPageExamples.tsx @@ -1,6 +1,6 @@ import { Sandbox } from "@components/sandbox"; import { - GoAButton, + GoabButton, } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import "./start-page-example.css"; @@ -129,9 +129,9 @@ export function StartPageExamples() {
  • government issued ID for the person applying
- {}}> + {}}> Get started - +

Other information about the service

diff --git a/src/examples/task-list-page/TaskListPageExamples.tsx b/src/examples/task-list-page/TaskListPageExamples.tsx index 0a5e2c77b..b0cc6b96a 100644 --- a/src/examples/task-list-page/TaskListPageExamples.tsx +++ b/src/examples/task-list-page/TaskListPageExamples.tsx @@ -1,5 +1,5 @@ import { Sandbox } from "@components/sandbox"; -import { GoABadge, GoACallout, GoATable } from "@abgov/react-components"; +import { GoabBadge, GoabCallout, GoabTable } from "@abgov/react-components"; import "./task-list-page-example.css"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; @@ -32,42 +32,42 @@ export function TaskListPageExamples() { />

Apply for a service

- You have completed 1 of 3 sections. - +

1. Before you start

- + Reads terms of use - + - +

2. Prepare application

- + Your contact details - + ariaLabel="not started"> @@ -75,10 +75,10 @@ export function TaskListPageExamples() { Your family - + ariaLabel="not started"> @@ -86,41 +86,41 @@ export function TaskListPageExamples() { Verify your identity - + ariaLabel="not started"> - +

3. Schedule service

You need to complete the previous section before you can start this task.

- + Receive email confirmation - + ariaLabel="cannot start yet"> Pay service fee - + ariaLabel="cannot start yet"> - +
); diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx index 8ad9e5b6b..25d19e620 100644 --- a/src/examples/text-field/TextFieldExamples.tsx +++ b/src/examples/text-field/TextFieldExamples.tsx @@ -1,11 +1,11 @@ import { Sandbox } from "@components/sandbox"; import { - GoABlock, - GoAButton, - GoADropdown, - GoADropdownItem, - GoAFormItem, - GoAInput, + GoabBlock, + GoabButton, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, + GoabInput, } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; @@ -20,89 +20,89 @@ export default function TextFieldExamples() {

Ask a user for an address

- - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - + + + +

Ask a user for their birthday

- - - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + Search - - + +

Ask a user for dollar amounts or costs

@@ -230,49 +230,49 @@ export default function TextFieldExamples() { `} /> - - - - - - - - - + + + + + + + + +

Ask a user for their indian registration number

- - - - + + + - - - + + - - - + + - - - + + + ); diff --git a/src/hooks/useSandboxFormItem.tsx b/src/hooks/useSandboxFormItem.tsx index 126710f8f..10fe7320d 100644 --- a/src/hooks/useSandboxFormItem.tsx +++ b/src/hooks/useSandboxFormItem.tsx @@ -1,8 +1,8 @@ import { useState } from "react"; import { ComponentBinding } from "@components/sandbox"; -import { GoAFormItemProps } from "@abgov/react-components"; +import { GoabFormItemprops } from "@abgov/react-components"; -export const useSandboxFormItem = (initialProps: GoAFormItemProps) => { +export const useSandboxFormItem = (initialProps: GoabFormItemprops) => { const [formItemBindings, setFormItemBindings] = useState( [ { diff --git a/src/routes/components/Accordion.tsx b/src/routes/components/Accordion.tsx index 12bf9036d..d3462c731 100644 --- a/src/routes/components/Accordion.tsx +++ b/src/routes/components/Accordion.tsx @@ -1,9 +1,9 @@ import { - GoAAccordion, - GoAAccordionProps, - GoABadge, - GoATab, - GoATabs + GoabAccordion, + GoabAccordionProps, + GoabBadge, + GoabTab, + GoabTabs, } from "@abgov/react-components"; import { ComponentProperties, @@ -13,8 +13,9 @@ import { ComponentBinding, Sandbox } from "@components/sandbox"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { useState } from "react"; import AccordionExamples from "@examples/accordion/AccordionExamples.tsx"; -import { GoAHeadingSize } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabAccordionHeadingSize } from "@abgov/ui-components-common"; +import { useVersion } from "@contexts/VersionContext.tsx"; // == Page props == const componentName = "Accordion"; @@ -25,15 +26,16 @@ const relatedComponents = [ { link: "/components/tabs", name: "Tabs" }, ]; -type ComponentPropsType = GoAAccordionProps; +type ComponentPropsType = GoabAccordionProps; type CastingType = { heading: string; - headingSize: GoAHeadingSize; + headingSize: GoabAccordionHeadingSize; children: React.ReactNode; [key: string]: unknown; }; -export default function AccordionPage() { +export default function AccordionPage() { + const version = useVersion(); const [accordionProps, setAccordionProps] = useState({ heading: "Heading", headingSize: "medium", @@ -64,8 +66,8 @@ export default function AccordionPage() { { label: "Open", type: "boolean", - name: "open", - value: false + name: "open", + value: false, }, { label: "Max Width", @@ -76,7 +78,7 @@ export default function AccordionPage() { }, ]); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "heading", type: "string", @@ -170,6 +172,54 @@ export default function AccordionPage() { } ]; + const componentProperties: ComponentProperty[] = [ + { + name: "heading", + type: "string", + required: true, + description: "Sets the heading text.", + }, + { + name: "secondaryText", + type: "string", + description: "Sets secondary text.", + }, + { + name: "open", + type: "boolean", + defaultValue: "false", + description: "Sets the state of the accordion container open or closed.", + }, + { + name: "headingSize", + type: "GoabAccordionHeadingSize (small | medium)", + defaultValue: "small", + description: "Sets the heading size of the accordion container heading.", + }, + { + name: "headingContent", + type: "ReactNode", + lang: "react", + description: "Add components to the accordion container heading such as badges.", + }, + { + name: "headingContent", + type: "TemplateRef", + lang: "angular", + description: "Add components to the accordion container heading such as badges.", + }, + { + name: "maxWidth", + type: "string", + description: "Sets the maximum width of the accordion.", + }, + { + name: "testId", + type: "string", + description: "Sets the data-testid attribute. Used with ByTestId queries in tests.", + }, + ]; + function onSandboxChange(bindings: ComponentBinding[], props: Record) { setAccordionBindings(bindings); setAccordionProps(props as CastingType); @@ -177,31 +227,38 @@ export default function AccordionPage() { return (
- + - - -

Component

+ + +

+ Component +

- + 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 - + - + - + - - Design guidelines - - } - > - - + + Design guidelines + + + }> +
); diff --git a/src/routes/components/AllComponents.tsx b/src/routes/components/AllComponents.tsx index 2b378032f..2ba71dcae 100644 --- a/src/routes/components/AllComponents.tsx +++ b/src/routes/components/AllComponents.tsx @@ -1,8 +1,9 @@ -import { GoAGrid, GoAInput, GoAFormItem } from "@abgov/react-components"; +import { GoabGrid, GoabInput, GoabFormItem } 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[] = [ @@ -374,57 +375,57 @@ export default function AllComponentsPage() {
- - + filterComponents(value)} + onChange={(event: GoabInputOnChangeDetail) => filterComponents(event.value)} /> - + - {mode === "search" && {getComponentsByFilter()}} + {mode === "search" && {getComponentsByFilter()}} {mode === "list" && (

Content layout

- + {getComponentsByGroup("content")} - +

Feedback and alerts

- + {getComponentsByGroup("feedback")} - +

Inputs and actions

- + {getComponentsByGroup("inputs")} - +

Structure and navigation

- + {getComponentsByGroup("structure")} - +

Utilities

- + {getComponentsByGroup("utilities")} - + diff --git a/src/routes/components/AppFooter.tsx b/src/routes/components/AppFooter.tsx index 4c16baa6d..b7238fa5f 100644 --- a/src/routes/components/AppFooter.tsx +++ b/src/routes/components/AppFooter.tsx @@ -1,12 +1,12 @@ import { - GoAAppFooter, - GoAAppFooterMetaSection, - GoAFooterNavSectionProps, - GoAAppFooterNavSection, - GoAAppFooterProps, - GoABadge, - GoATab, - GoATabs, + GoabAppFooter, + GoabAppFooterMetaSection, + GoabFooterNavSectionProps, + GoabAppFooterNavSection, + GoabAppFooterProps, + GoabBadge, + GoabTab, + GoabTabs, } from "@abgov/react-components"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { @@ -28,8 +28,8 @@ const relatedComponents = [ { link: "/components/header", name: "Header" }, { link: "/patterns", name: "Layout" }, ]; -type ComponentPropsType = GoAAppFooterProps; -type FooterNavPropsType = GoAFooterNavSectionProps; +type ComponentPropsType = GoabAppFooterProps; +type FooterNavPropsType = GoabFooterNavSectionProps; type CastingType = { // add any required props here [key: string]: unknown; @@ -131,14 +131,14 @@ export default function AppFooterPage() { relatedComponents={relatedComponents} /> - - + +

Component

Basic Footer

- + {/*Component properties table*/} @@ -210,14 +210,14 @@ export default function AppFooterPage() { `} /> - - + + Privacy Disclaimer Accessibility Using Alberta.ca - - + +

Alert and messaging

- + @@ -198,18 +199,18 @@ export default function IconsPage() { - +

Basic

- + - +

Direction

- + @@ -222,10 +223,10 @@ export default function IconsPage() { - +

Interactions

- + @@ -244,17 +245,17 @@ export default function IconsPage() { - +

Accounts

- + - - - + + + ); diff --git a/src/routes/components/List.tsx b/src/routes/components/List.tsx index 47ce78fae..685824295 100644 --- a/src/routes/components/List.tsx +++ b/src/routes/components/List.tsx @@ -1,5 +1,5 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoABadge, GoAContainer, GoATab, GoATabs } from "@abgov/react-components"; +import { GoabBadge, GoabContainer, GoabTab, GoabTabs } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useContext } from "react"; import { LanguageContext } from "@components/sandbox"; @@ -16,10 +16,10 @@ export default function ListPage() { description="Organize information into brief and clear groups." /> - - + + {/*We don't use sandbox because it isn't starting with "GoA" components*/} - +
  1. An ordered item @@ -51,7 +51,7 @@ export default function ListPage() {
- + {language === "react" && (

Unordered list

- +
  • Milk
  • @@ -152,7 +152,7 @@ export default function ListPage() {
- + {language === "react" && ( )} - + - Design guidelines - + }>

Coming Soon

- - + + ); diff --git a/src/routes/components/MicrositeHeader.tsx b/src/routes/components/MicrositeHeader.tsx index c876ba7c7..a240edf8c 100644 --- a/src/routes/components/MicrositeHeader.tsx +++ b/src/routes/components/MicrositeHeader.tsx @@ -1,10 +1,9 @@ import { - GoABadge, - GoAHeaderProps, - GoAMicrositeHeader, - GoAServiceLevel, - GoATab, - GoATabs, + GoabBadge, + GoabHeaderProps, + GoabMicrositeHeader, + GoabTab, + GoabTabs, } from "@abgov/react-components"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { @@ -15,21 +14,22 @@ import { ComponentBinding, Sandbox } from "@components/sandbox"; 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"; const componentName = "Microsite header"; const description = "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" }]; -type ComponentPropsType = GoAHeaderProps; type CastingType = { // add any required props here - type: GoAServiceLevel; + type: GoabServiceLevel; [key: string]: unknown; }; export default function MicrositeHeaderPage() { const [micrositeHeaderProps, setMicrositeHeaderProps] = useState({ - type: "alpha" as GoAServiceLevel, + type: "alpha" as GoabServiceLevel, }); const [micrositeHeaderBindings, setMicrositeHeaderBindings] = useState([ { @@ -182,30 +182,29 @@ export default function MicrositeHeaderPage() { /> - - -

- Component -

+ + + +

Component

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

Coming Soon

- - + + ); diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx index f580b62ec..926e6b0dc 100644 --- a/src/routes/components/Modal.tsx +++ b/src/routes/components/Modal.tsx @@ -1,12 +1,12 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { - GoABadge, - GoAButton, - GoAButtonGroup, - GoAModal, - GoAModalProps, - GoATab, - GoATabs, + GoabBadge, + GoabButton, + GoabButtonGroup, + GoabModal, + GoabModalProps, + GoabTab, + GoabTabs, } from "@abgov/react-components"; import { ComponentBinding, LanguageContext, Sandbox } from "@components/sandbox"; import { useContext, useEffect, useState } from "react"; @@ -29,7 +29,7 @@ const relatedComponents = [ { link: "/components/button-group", name: "Button group" }, { link: "/components/callout", name: "Callout" }, ]; -type ComponentPropsType = Omit & { closable?: boolean }; +type ComponentPropsType = Omit & { closable?: boolean }; type CastingType = { // add any required props here [key: string]: unknown; @@ -224,8 +224,8 @@ export default function ModalPage() { /> - - + +

Component

@@ -256,45 +256,45 @@ export default function ModalPage() { `} /> - setOpen(true)}>Show Modal + 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)}> + + setOpen(false)}> Cancel - - setOpen(false)}> + + setOpen(false)}> Exit - - - + + + )} {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. - + )} - + - Design guidelines - + - }> - + }> + ); diff --git a/src/routes/components/Notificationbanner.tsx b/src/routes/components/Notificationbanner.tsx index 35df1c9a9..9b122f00b 100644 --- a/src/routes/components/Notificationbanner.tsx +++ b/src/routes/components/Notificationbanner.tsx @@ -1,10 +1,9 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { - GoABadge, - GoANotification, - GoATab, - GoATabs, - NotificationType, + GoabBadge, + GoabNotification, + GoabTab, + GoabTabs, } from "@abgov/react-components"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { useState } from "react"; @@ -13,6 +12,7 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabNotificationType } from "@abgov/ui-components-common"; // == Page props == @@ -23,7 +23,7 @@ const relatedComponents = [ { link: "/components/callout", name: "Callout" }, ]; type ComponentPropsType = { - type: NotificationType; + type: GoabNotificationType; content?: string; [key: string]: unknown; }; @@ -113,24 +113,24 @@ export default function NotificationBannerPage() { - - + +

Component

- Notification banner message + Notification banner message - + - Design guidelines - + } - > - + > + ); diff --git a/src/routes/components/Pagination.tsx b/src/routes/components/Pagination.tsx index 228e561ab..6d3e15702 100644 --- a/src/routes/components/Pagination.tsx +++ b/src/routes/components/Pagination.tsx @@ -1,14 +1,14 @@ import { - GoABadge, - GoAPagination, - GoAPaginationProps, - GoATab, - GoATable, - GoATabs, - GoABlock, - GoASpacer, - GoADropdown, - GoADropdownItem, + GoabBadge, + GoabPagination, + GoabPaginationProps, + GoabTab, + GoabTable, + GoabTabs, + GoabBlock, + GoabSpacer, + GoabDropdown, + GoabDropdownItem, } from "@abgov/react-components"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { @@ -20,8 +20,9 @@ import { faker } from "@faker-js/faker"; import { useEffect, useState } from "react"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; -type ComponentPropsType = Omit; +type ComponentPropsType = Omit; type CastingType = { itemCount: number; [key: string]: unknown; @@ -251,8 +252,8 @@ export default function PaginationPage() { } // @ts-ignore - function handlePerPageChangeCustomExample(name: string, values: string | string[]): void { - const newPerPageCount = Array.isArray(values) ? parseInt(values[0]) : parseInt(values); + function handlePerPageChangeCustomExample(event: GoabDropdownOnChangeDetail): void { + const newPerPageCount = parseInt(event.value || '1'); // Update paginationProps setpaginationPropsCustomExample(prevProps => ({ @@ -280,8 +281,8 @@ export default function PaginationPage() { /> - - + +

Component

@@ -434,7 +435,7 @@ export default function PaginationPage() { `} /> - + First name @@ -451,9 +452,9 @@ export default function PaginationPage() { ))} - + - + changePage(event.page)} /> {/*Component properties table*/} @@ -709,7 +710,7 @@ export default function PaginationPage() { `} /> - + First name @@ -726,46 +727,46 @@ export default function PaginationPage() { ))} - + - - + + Show - {[10, 20, 30].map(value => ( - ))} - + per page - - + + - changePageCustomExample(event.page)} /> - + - + - Design guidelines - + }>

Coming Soon

- - + + ); diff --git a/src/routes/components/Popover.tsx b/src/routes/components/Popover.tsx index bd187a4e8..d2208b7fb 100644 --- a/src/routes/components/Popover.tsx +++ b/src/routes/components/Popover.tsx @@ -5,7 +5,7 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoABadge, GoAButton, GoAPopover, GoATab, GoATabs } from "@abgov/react-components"; +import { GoabBadge, GoabButton, GoabPopover, GoabTab, GoabTabs } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { propsToString } from "@components/sandbox/BaseSerializer.ts"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -139,8 +139,8 @@ export default function PopoverPage() { - - + + {/*Popover sandbox*/}

Component

@@ -186,32 +186,32 @@ export default function PopoverPage() { `} /> - + Click me - + } >

This is a popover

It can be used for a number of different contexts. - + {/*Popover table properties*/} - + - Design guidelines - + } - > - + > + ); diff --git a/src/routes/components/ProgressIndicator.tsx b/src/routes/components/ProgressIndicator.tsx index 45d3b779a..8cc1338fa 100644 --- a/src/routes/components/ProgressIndicator.tsx +++ b/src/routes/components/ProgressIndicator.tsx @@ -7,11 +7,11 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { - GoABadge, - GoATab, - GoATabs, - GoACircularProgress, - GoACircularProgressProps, + GoabBadge, + GoabTab, + GoabTabs, + GoabCircularProgress, + GoabCircularProgressProps, } from "@abgov/react-components"; import { resetScrollbars } from "../../utils/styling"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -25,7 +25,7 @@ const relatedComponents = [ { link: "/components/file-uploader", name: "File uploader" }, { link: "/components/skeleton-loader", name: "Skeleton loading" } ]; -type ComponentPropsType = GoACircularProgressProps; +type ComponentPropsType = GoabCircularProgressProps; type CastingType = { // add any required props here [key: string]: unknown; @@ -121,24 +121,24 @@ export default function ProgressIndicatorPage() { - - + +

Component

- + - + - Design guidelines - + } - > - + > + ); diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx index 289f52c0f..0dc7d3a05 100644 --- a/src/routes/components/Radio.tsx +++ b/src/routes/components/Radio.tsx @@ -6,17 +6,18 @@ import { import { ComponentBinding, Sandbox } from "@components/sandbox"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { - GoABadge, - GoAFormItem, - GoARadioGroup, GoARadioGroupProps, - GoARadioItem, - GoATab, - GoATabs + GoabBadge, + GoabFormItem, + GoabRadioGroup, GoabRadioGroupProps, + GoabRadioItem, + GoabTab, + GoabTabs } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; import RadioExamples from "@examples/radio/RadioExamples.tsx"; +import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; // == Page props == const componentName = "Radio"; @@ -27,19 +28,19 @@ const relatedComponents = [ { link: "/components/dropdown", name: "Dropdown" }, { link: "/components/form-item", name: "Form item" } ]; -type ComponentPropsType = GoARadioGroupProps; +type ComponentPropsType = GoabRadioGroupProps; type CastingType = { name: string; value: string; [key: string]: unknown; - onChange: (name: string, value: string) => void; + onChange: (_: GoabRadioGroupOnChangeDetail) => void; } export default function RadioPage() { const [radioProps, setRadioProps] = useState({ name: "item", value: "", - onChange: () => { }, + onChange: (_: GoabRadioGroupOnChangeDetail) => { }, }); const [radioBindings, setRadioBindings] = useState([ { @@ -209,8 +210,8 @@ export default function RadioPage() { - - + + {/*Radio sandbox*/}

Component

- - - - - - - + + + + + + + {/*Radio Group properties*/} @@ -271,17 +272,17 @@ export default function RadioPage() { {/*Radio Item properties*/} - + - Design guidelines - + } - > - + > + ); diff --git a/src/routes/components/SideMenu.tsx b/src/routes/components/SideMenu.tsx index f8cb3a86b..29b1242a2 100644 --- a/src/routes/components/SideMenu.tsx +++ b/src/routes/components/SideMenu.tsx @@ -1,10 +1,10 @@ import { - GoABadge, - GoASideMenu, - GoASideMenuGroup, - GoASideMenuHeading, - GoATab, - GoATabs, + GoabBadge, + GoabSideMenu, + GoabSideMenuGroup, + GoabSideMenuHeading, + GoabTab, + GoabTabs, } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; @@ -75,8 +75,8 @@ export default function SideMenuPage() { - - + +

Component

- - Nav section 1 + + Nav section 1 Home Profile - } + } icon="home"> Nav section 2 - + About Contact - Nav with sub nav - + Nav with sub nav + Foo Bar - - + +
@@ -165,18 +165,18 @@ export default function SideMenuPage() { heading="Side menu heading properties" properties={sideMenuHeadingProperties} /> - + - Design guidelines - + }>

Coming Soon

- - + + ); diff --git a/src/routes/components/Skeleton.tsx b/src/routes/components/Skeleton.tsx index 513633ad1..d87d65bf5 100644 --- a/src/routes/components/Skeleton.tsx +++ b/src/routes/components/Skeleton.tsx @@ -5,26 +5,32 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoABadge, GoASkeleton, GoATab, GoATabs, GoASkeletonProps, SkeletonType } from "@abgov/react-components"; +import { + GoabBadge, + GoabSkeleton, + GoabTab, + GoabTabs, + GoabSkeletonProps, +} from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabSkeletonType } from "@abgov/ui-components-common"; // == Page props == const componentName = "Skeleton loading"; -const description = "Provide visual feedback to users while loading a content heavy page or page element."; +const description = + "Provide visual feedback to users while loading a content heavy page or page element."; const category = Category.CONTENT_AND_LAYOUT; -const relatedComponents = [ - { link: "/components/progress-indicator", name: "Progress indicator" }, -]; -type ComponentPropsType = GoASkeletonProps; +const relatedComponents = [{ link: "/components/progress-indicator", name: "Progress indicator" }]; +type ComponentPropsType = GoabSkeletonProps; type CastingType = { - type: SkeletonType; + type: GoabSkeletonType; [key: string]: unknown; }; export default function SkeletonPage() { - const [skeletonProps, setSkeletonProps] = useState( - { type: "text" as SkeletonType } - ); + const [skeletonProps, setSkeletonProps] = useState({ + type: "text" as GoabSkeletonType, + }); const [skeletonBindings, setSkeletonBindings] = useState([ { label: "Type", @@ -123,31 +129,36 @@ export default function SkeletonPage() { return ( <> - + - - - + + {/*Skeleton Sandbox*/} -

Component

+

+ Component +

- + {/*Skeleton Properties*/} - + - Design guidelines - + - } - > - + }> + ); diff --git a/src/routes/components/Spacer.tsx b/src/routes/components/Spacer.tsx index 27cc7280c..6bd464e99 100644 --- a/src/routes/components/Spacer.tsx +++ b/src/routes/components/Spacer.tsx @@ -1,5 +1,5 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoABlock, GoASpacer, GoATab, GoATabs } from "@abgov/react-components"; +import { GoabBlock, GoabSpacer, GoabTab, GoabTabs } from "@abgov/react-components"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { CSSProperties, useState } from "react"; import { @@ -96,44 +96,44 @@ export default function SpacerPage() { - - + +

Component

- +
Item 1
- +
Item 1
- +
Item 1
- + - +
Item 1
- +
Item 1
- +
Item 1
- + - - + + ); diff --git a/src/routes/components/Table.tsx b/src/routes/components/Table.tsx index 89e98cdec..e5ccd0dc4 100644 --- a/src/routes/components/Table.tsx +++ b/src/routes/components/Table.tsx @@ -6,24 +6,25 @@ import { } from "@components/component-properties/ComponentProperties"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader"; import { - GoABadge, - GoAButton, - GoAContainer, - GoATab, - GoATable, - GoATableSortHeader, - GoATabs, + GoabBadge, + GoabButton, + GoabContainer, + GoabTab, + GoabTable, + GoabTableSortHeader, + GoabTabs, } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; -import { GoATableProps } from "@abgov/react-components"; +import { GoabTableProps } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabTableOnSortDetail } from "@abgov/ui-components-common"; interface User { firstName: string; lastName: string; age: number; } -type ComponentPropsType = GoATableProps; +type ComponentPropsType = GoabTableProps; type CastingType = { width: string; [key: string]: unknown; @@ -114,10 +115,10 @@ export default function TablePage() { setUsers(_users); }, []); - function sortData(sortBy: string, sortDir: number) { + function sortData(event: GoabTableOnSortDetail) { const _users = [...users]; _users.sort((a: any, b: any) => { - return (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir; + return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir; }); setUsers(_users); } @@ -138,10 +139,10 @@ export default function TablePage() { - - + + - + Status @@ -153,67 +154,67 @@ export default function TablePage() { - + Lorem ipsum 1234567890 - Action + Action - + Lorem ipsum 1234567890 - Action + Action - + Lorem ipsum 1234567890 - Action + Action - + Lorem ipsum 1234567890 - Action + Action - +

Sortable columns

- +
- + - First name + First name - Last name + Last name - + Age - + @@ -226,9 +227,9 @@ export default function TablePage() { ))} - +
- + {language === "react" && ( Number column - + Col 1 @@ -405,18 +406,18 @@ export default function TablePage() { 4567 - + - + - Design guidelines - + - }> - + }> + ); diff --git a/src/routes/components/Tabs.tsx b/src/routes/components/Tabs.tsx index cfe96d05c..989b3c8d2 100644 --- a/src/routes/components/Tabs.tsx +++ b/src/routes/components/Tabs.tsx @@ -1,4 +1,4 @@ -import { GoABadge, GoATab, GoATabs, GoATable, GoAButton } from "@abgov/react-components"; +import { GoabBadge, GoabTab, GoabTabs } from "@abgov/react-components"; import { ComponentProperties, ComponentProperty, @@ -57,8 +57,8 @@ export default function TabsPage() { - - + +

Component

@@ -86,25 +86,26 @@ export default function TabsPage() { } `} /> - - + + Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - + + Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - + + Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - + + {/*GoATabs Table Properties*/} + {/*Tabs Examples*/} @@ -410,7 +411,7 @@ export default function TabsPage() { - +

Set a specific tab to be active

- Design guidelines - + - }> - + }> + ); -} \ No newline at end of file +} diff --git a/src/routes/components/TemporaryNotification.tsx b/src/routes/components/TemporaryNotification.tsx index d6119b134..74c657133 100644 --- a/src/routes/components/TemporaryNotification.tsx +++ b/src/routes/components/TemporaryNotification.tsx @@ -6,7 +6,7 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; -import { GoABadge, GoATab, GoATabs, GoACalloutProps } from "@abgov/react-components"; +import { GoabBadge, GoabTab, GoabTabs, GoabCalloutProps } from "@abgov/react-components"; // == Page props == @@ -16,7 +16,7 @@ const relatedComponents = [ { link: "/components/callout", name: "Callout" }, { link: "/components/notification-banner", name: "Notification banner" } ]; -type ComponentPropsType = GoACalloutProps; +type ComponentPropsType = GoabCalloutProps; type CastingType = { // add any required props here [key: string]: unknown; @@ -59,24 +59,24 @@ export default function TEMPLATE_Page() { relatedComponents={relatedComponents} /> - - + + <> {/* */} - + - Design guidelines - + } - > - + > + ); } diff --git a/src/routes/components/TextArea.tsx b/src/routes/components/TextArea.tsx index 8a4903f6a..d586f363c 100644 --- a/src/routes/components/TextArea.tsx +++ b/src/routes/components/TextArea.tsx @@ -6,20 +6,20 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { - GoABadge, - GoAButton, - GoAButtonGroup, - GoAContainer, - GoADetails, - GoAFormItem, - GoATab, - GoATabs, - GoATextArea, - GoATextAreaProps, + GoabBadge, + GoabButton, + GoabButtonGroup, + GoabContainer, + GoabDetails, + GoabFormItem, + GoabTab, + GoabTabs, GoabTextarea, + GoabTextAreaProps } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabTextAreaOnChangeDetail } from "@abgov/ui-components-common"; // == Page props == @@ -30,11 +30,11 @@ const relatedComponents = [ { link: "/components/form-item", name: "Form item" }, { link: "/components/input", name: "Input" }, ]; -type ComponentPropsType = GoATextAreaProps; +type ComponentPropsType = GoabTextAreaProps; type CastingType = { name: string; value: string; - onChange: (name: string, value: string) => void; + onChange: (event: GoabTextAreaOnChangeDetail) => void; [key: string]: unknown; }; @@ -258,8 +258,8 @@ export default function TextAreaPage() { /> - - + +

Component

@@ -310,15 +310,15 @@ export default function TextAreaPage() { `} /> - - + - + @@ -330,10 +330,10 @@ export default function TextAreaPage() {

Ask a question and give more information

- - + + Back - +

Description

@@ -341,38 +341,38 @@ export default function TextAreaPage() { each.

- - - + + - +

Break down your outline into easily digestible sections. This can help to ensure that the document is well-organized and easy to navigate.

- + - - + + Continue - - - + + + - + - Design guidelines - + }>

Coming Soon

- - + + ); diff --git a/src/routes/components/TextField.tsx b/src/routes/components/TextField.tsx index 7a19691a7..49fe87e68 100644 --- a/src/routes/components/TextField.tsx +++ b/src/routes/components/TextField.tsx @@ -6,18 +6,19 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { - GoABadge, - GoAFormItem, - GoAInput, - GoAInputProps, - GoATab, - GoATabs + GoabBadge, + GoabFormItem, + GoabInput, + GoabInputProps, + GoabTab, + GoabTabs } from "@abgov/react-components"; import ICONS from "./icons.json"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; import TextFieldExamples from "@examples/text-field/TextFieldExamples"; +import { GoabInputOnChangeDetail } from "@abgov/ui-components-common"; // == Page props == const componentName = "Input"; @@ -27,12 +28,12 @@ const relatedComponents = [ { link: "/components/form-item", name: "Form item" }, { link: "/components/text-area", name: "Text area" } ]; -type ComponentPropsType = GoAInputProps; +type ComponentPropsType = GoabInputProps; type CastingType = { name: string; value: string; [key: string]: unknown; - onChange: (name: string, value: string) => void; + onChange: (event: GoabInputOnChangeDetail) => void; }; export default function TextFieldPage() { @@ -431,8 +432,8 @@ export default function TextFieldPage() { - - + + {/*Input sandbox*/}

Component

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

Coming Soon

- - + + ); diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index 81800cf94..9fd8bf4b2 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -8,16 +8,12 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { - GoAIcon, - GoABadge, - GoABlock, - GoAButtonGroup, - GoAContainer, - GoAIconButton, - GoATab, - GoATabs, - GoATooltip, - GoATooltipProps, + GoabIcon, + GoabBadge, + GoabTab, + GoabTabs, + GoabTooltip, + GoabTooltipProps, } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -32,7 +28,7 @@ const relatedComponents = [ { link: "/components/icon-button", name: "Icon button" }, { link: "/components/popover", name: "Popover" } ]; -type ComponentPropsType = GoATooltipProps; +type ComponentPropsType = GoabTooltipProps; type CastingType = { content: string; [key: string]: unknown; @@ -117,20 +113,20 @@ export default function TEMPLATE_Page() { - - + +

Component

- - - + + + - + - +

Use a tooltip to show a full date when shortened

Hover on the time it was added to see the full date and time.

 - +

Show a label on an icon only button

@@ -299,16 +295,17 @@ export default function TEMPLATE_Page() { + - Design guidelines - + } - > - + > + ); diff --git a/src/routes/content/Capitalization.tsx b/src/routes/content/Capitalization.tsx index 0df773265..5628e943c 100644 --- a/src/routes/content/Capitalization.tsx +++ b/src/routes/content/Capitalization.tsx @@ -1,4 +1,4 @@ -import { GoABlock, GoADivider, GoAFormItem, GoAGrid, GoASideMenu } from "@abgov/react-components"; +import { GoabBlock, GoabDivider, GoabFormItem, GoabGrid, GoabSideMenu } from "@abgov/react-components"; import { DoDont } from "@components/do-dont/DoDont"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -10,7 +10,7 @@ export default function CapitalizationPage() {

Capitalization

Use sentence case for all headings, labels, and content.

- +

Sentence case

@@ -24,7 +24,7 @@ export default function CapitalizationPage() {

- + @@ -50,10 +50,10 @@ export default function CapitalizationPage() { Before the alberta digital filing services, the only way to file court documents was in-person or through email. - +
- +

Title case

@@ -69,28 +69,28 @@ export default function CapitalizationPage() { it.

- +
- - + +
- + - + @@ -98,9 +98,9 @@ export default function CapitalizationPage() {

Submitting adjournment Pre-Court

- + - +

Capital case

@@ -117,15 +117,15 @@ export default function CapitalizationPage() { Display the following information in sentence case when possible for better readability.

- +
- + - +

References

diff --git a/src/routes/content/ContentLayout.tsx b/src/routes/content/ContentLayout.tsx index 101980582..b82e47c65 100644 --- a/src/routes/content/ContentLayout.tsx +++ b/src/routes/content/ContentLayout.tsx @@ -1,4 +1,4 @@ -import { GoASideMenu, GoASpacer } from "@abgov/react-components"; +import { GoabSideMenu, GoabSideMenuHeading } from "@abgov/react-components"; import { Link, Outlet } from "react-router-dom"; import "./content.css"; import { SupportInfo } from "@components/support-info/SupportInfo"; @@ -7,13 +7,13 @@ export default function ContentLayout() { return (

- - + + Content Capitalization Date format Error messages Helper text - +
diff --git a/src/routes/content/DateFormat.tsx b/src/routes/content/DateFormat.tsx index a59bb4bba..deb7bd510 100644 --- a/src/routes/content/DateFormat.tsx +++ b/src/routes/content/DateFormat.tsx @@ -1,4 +1,4 @@ -import { GoACallout, GoAContainer, GoADivider, GoAGrid } from "@abgov/react-components"; +import { GoabCallout, GoabContainer, GoabDivider, GoabGrid } from "@abgov/react-components"; import { DoDont } from "@components/do-dont/DoDont"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -13,19 +13,19 @@ export default function DateFormatPage() { and structure of the date data within the date format in different scenarios. - +
March 14, 2021
- + - +

Conversational and long-form

@@ -34,7 +34,7 @@ export default function DateFormatPage() { “readable” tone.

- +
Month date, Year (e.g., March 14, 2021)
- +

This presents the date in a conventional “speaking” way and aligns with the Canadian Style @@ -50,7 +50,7 @@ export default function DateFormatPage() {

- +
March 14, 2021
@@ -59,9 +59,9 @@ export default function DateFormatPage() {
March 14
March 14th
 - + - +
March 14th, 2021
 @@ -73,10 +73,10 @@ export default function DateFormatPage() { description="Don’t use two digit abbreviations for the year, as this adds confusion and ambiguity.">
March 12, 21
- +
- +

Short-hand

@@ -112,15 +112,15 @@ export default function DateFormatPage() {

- +
Mar 14, 2021
 - + - + @@ -142,10 +142,10 @@ export default function DateFormatPage() {
03/07/21
07/03/2021
 - +
- +

Day of the week

@@ -184,14 +184,14 @@ export default function DateFormatPage() {

- +
Monday, March 14, 2021
Mon, Mar 14, 2021
 - + - +
Monday, Mar 12, 2021
Mon, March 12, 2021
@@ -204,18 +204,18 @@ export default function DateFormatPage() {
Monday March 12, 2021
 - +
- +

Avoid using day of the week in tabular, form, summary, or other concise displays, as it would crowd the already limited space with unnecessary information.

- +
- +

Time

@@ -238,29 +238,29 @@ export default function DateFormatPage() {

(e.g., Friday, March 14, 2021 at 2:26 pm)

- +
Monday, March 14, 2021 at 3:30 pm
 - - + +
08:15 am
4:43 p.m.
 - - + +
7:55 am on Saturday, May 15, 2021
 - +
- +

Time zones

@@ -316,7 +316,7 @@ export default function DateFormatPage() {

- + @@ -335,9 +335,9 @@ export default function DateFormatPage() {
Dec
- + - + @@ -348,22 +348,22 @@ export default function DateFormatPage() { description="Use daylight time between the months of April and October."> - - + +
4:43pm (MST)
 - +
- + From April to October Alberta participates in daylight saving time. - +
- +

Accessibility and Screen readers

@@ -375,7 +375,7 @@ export default function DateFormatPage() {

- + Consider the following html
<time id="timestamp" datetime="2001-05-15T19:30">May 15, 2001 - 7:30pm</time> @@ -393,13 +393,13 @@ export default function DateFormatPage() { “Tuesday, May fifteenth, two-thousand one at seven thirty pm” - +
- + The date time variables entered into the module for producing “readable” and “conversational” need to be rendered in the ISO 8601 format. - +
); diff --git a/src/routes/content/ErrorMessages.tsx b/src/routes/content/ErrorMessages.tsx index 536a5d122..4d3ddd312 100644 --- a/src/routes/content/ErrorMessages.tsx +++ b/src/routes/content/ErrorMessages.tsx @@ -1,12 +1,12 @@ import { DoDont } from "@components/do-dont/DoDont"; import { - GoACheckbox, - GoADivider, - GoAFormItem, - GoAGrid, - GoAInput, - GoARadioGroup, - GoARadioItem, + GoabCheckbox, + GoabDivider, + GoabFormItem, + GoabGrid, + GoabInput, + GoabRadioGroup, + GoabRadioItem, } from "@abgov/react-components"; import { Link } from "react-router-dom"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -20,30 +20,30 @@ export default function ErrorMessagesPage() {

Error messages

Error messages appear when the user’s proposed action fails.

- + - - + - - + + - - - - - - - - - - + + + + + + + + - + - - - - + checked={false}> + + - +

Anatomy

@@ -81,19 +81,19 @@ export default function ErrorMessagesPage() {

- + - +

Border

- + @@ -102,12 +102,12 @@ export default function ErrorMessagesPage() { description="Display the input field border in any other colour when there is an error."> - +

Button/upload area

- +
@@ -128,10 +128,10 @@ export default function ErrorMessagesPage() { description="Add a red border to the upload area."> - +
- +

Language and tone

Be clear and concise

@@ -154,7 +154,7 @@ export default function ErrorMessagesPage() { understand their frustration.

- +

Common error message templates

@@ -162,20 +162,20 @@ export default function ErrorMessagesPage() { fits your context.

- +

Input is empty

This error appears when user leaves a required field blank.

- +
- - + + @@ -196,7 +196,7 @@ export default function ErrorMessagesPage() { description="Show general errors to the user without including the context.">
This field is required.
 - +

Incorrect information format

@@ -210,14 +210,14 @@ export default function ErrorMessagesPage() {

- +
- - + +
Enter a valid postal code, @@ -242,7 +242,7 @@ export default function ErrorMessagesPage() { description="Provide an error without a solution. Frame the error message with a solution, along with an example of a valid input.">
Your phone number is not valid.
- +

Error with a date input

@@ -255,14 +255,14 @@ export default function ErrorMessagesPage() {

- +
- - + +
The student must be 16 years old or older to be eligible for funding. @@ -286,39 +286,39 @@ export default function ErrorMessagesPage() { Study period must be longer than 3 and shorter than 52 weeks.
- +

Error within a value range

This error appears when user fails to input a valid/correct amount.

- +
- - + +
Books and Materials cost must be lower than $4,000.
You have exceeded the maximum amount.
 - +

Input outside accepted values

- +
- - + +
PID must be between 10 and 15 digits.
 @@ -327,7 +327,7 @@ export default function ErrorMessagesPage() { description="Provide inadequate solution. This example gives an unclear solution. User only knows that the PID must be at least 10 digit.">
PID must be at least 10 digits
- +

Upload errors

@@ -351,14 +351,14 @@ export default function ErrorMessagesPage() {

Wrong file type

- +
- - + +
The selected file must be a PDF, JPG, PNG, or TIFF.
 @@ -368,19 +368,19 @@ export default function ErrorMessagesPage() { or TIFF file type(s).
- +

File too large

- +
- - + +
The selected file must be less than 5MB.
 @@ -389,19 +389,19 @@ export default function ErrorMessagesPage() { description="Give the user an error without unclear instruction on how to be successful.">
File size over limit. Please try again.
- +

File upload failed

- +
- - + + @@ -414,19 +414,19 @@ export default function ErrorMessagesPage() { description="Use blunt language. This example is not taking responsibility for the failed upload, and is passively blaming the user.">
File upload failed. Please try again.
 - +

Duplicate file uploaded

- +
- - + + @@ -439,19 +439,19 @@ export default function ErrorMessagesPage() { description="State unclear problem. This example has a negative structure (“are not”) and does not guide the user to a solution.">
Duplicate files are not accepted. Please try again.
 - +

No file selected

- +
- - + +
Upload a work permit.
 @@ -460,7 +460,7 @@ export default function ErrorMessagesPage() { description="Provide an error without additional context as to what is required to be successful.">
Document required
- +

Invalid characters used

@@ -470,14 +470,14 @@ export default function ErrorMessagesPage() {

- +
- - + + @@ -491,19 +491,19 @@ export default function ErrorMessagesPage() { period, apostrophe, hyphen or space.
- +

When the accepted characters are known, include an example in the error message.

- +
- - + +
Alberta Bar ID must include numbers only, such as “12345.” @@ -514,26 +514,26 @@ export default function ErrorMessagesPage() { The Alberta Bar ID must consist of numerical digits only e.g. 12345
- +

Incorrect number of characters

- +
- - + +
The Mobius reference number must be 10 digits.
Ensure Mobius reference number is ten digits.
 - +
); diff --git a/src/routes/content/HelperText.tsx b/src/routes/content/HelperText.tsx index e0eabb21c..f52d0bd31 100644 --- a/src/routes/content/HelperText.tsx +++ b/src/routes/content/HelperText.tsx @@ -1,12 +1,12 @@ import { - GoABlock, - GoACheckbox, - GoAContainer, - GoADivider, - GoAFormItem, - GoAGrid, - GoAInput, - GoATable, + GoabBlock, + GoabCheckbox, + GoabContainer, + GoabDivider, + GoabFormItem, + GoabGrid, + GoabInput, + GoabTable, } from "@abgov/react-components"; import { DoDont } from "@components/do-dont/DoDont"; import { Link } from "react-router-dom"; @@ -30,25 +30,25 @@ export default function HelperTextPage() { Checkbox, Button

- +
- - {}} value=""> - + {}} value=""> +
- - + +

Considerations

Consider the following ways to convey more information:

- + Is your content... @@ -66,119 +66,119 @@ export default function HelperTextPage() { Helper text - + - + - + - + - + - + Accordion - + - + - + - + - + - + Callout - + - + - + - + - + - + Details - + - + - + - + - + - + Tooltip - + - + - + - + - + - + - +

View a pattern and guide on how to show more information.

- +

Anatomy

Helper text can be used with any input.

- +
- +
  1. Input label + optional / required
  2. Text Input
    3. @@ -191,7 +191,7 @@ export default function HelperTextPage() {
  3. Input control(s)
  4. Helper Text
- +

Language and Tone

Keep it concise

@@ -227,18 +227,18 @@ export default function HelperTextPage() { Web writing style guide – Numbers and measurements

- +

Usage

Helper text generally falls into 3 different categories. Examine the patterns and examples below to use helper text properly.

- + Disclosure Instructional Restrictive - - + +

Disclosure – Why are we asking this question

Disclosive helper text helps a user understand the data, task or system associated with the @@ -257,7 +257,7 @@ export default function HelperTextPage() {

- + @@ -286,7 +286,7 @@ export default function HelperTextPage() {
- +

Instructional – Directions for how to use the input

@@ -308,7 +308,7 @@ export default function HelperTextPage() {

- + @@ -333,7 +333,7 @@ export default function HelperTextPage() {
- +

Restrictive – Rules and requirements that the input needs to meet

@@ -353,7 +353,7 @@ export default function HelperTextPage() {

- +
@@ -378,16 +378,16 @@ export default function HelperTextPage() {
- +
- +

Formatting

Helper text should be a short succinct statement, sentence case, with no period or punctuation.

- + @@ -400,16 +400,16 @@ export default function HelperTextPage() {
- +
- +

Accessibility

For screen reader accessibility, consider using the aria-describedby attribute as helper text for the input control. This allows screen readers to provide additional context that would be present for a sighted user.

- +

References

diff --git a/src/routes/design-tokens/DesignTokenLayout.tsx b/src/routes/design-tokens/DesignTokenLayout.tsx index f2bf44610..3b8451653 100644 --- a/src/routes/design-tokens/DesignTokenLayout.tsx +++ b/src/routes/design-tokens/DesignTokenLayout.tsx @@ -1,14 +1,15 @@ import { - GoABlock, - GoADropdown, - GoADropdownItem, - GoASideMenu, + GoabBlock, + GoabDropdown, + GoabDropdownItem, + GoabSideMenu, } from "@abgov/react-components"; import { Link, Outlet } from "react-router-dom"; import { SupportInfo } from "@components/support-info/SupportInfo"; import { useEffect, useState } from "react"; import { DesignTokensLanguageContext } from "@components/sandbox"; import "./DesignToken.css"; +import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; export function DesignTokenLayout() { const [tokenLanguage, setLanguage] = useState(""); @@ -18,8 +19,8 @@ export function DesignTokenLayout() { setLanguage(lang || "scss"); }, []); - function designTokenLanguageChange(_name: string, value: string[] | string) { - const lang = Array.isArray(value) ? value[0] : value; + function designTokenLanguageChange(event: GoabDropdownOnChangeDetail) { + const lang = event.value || "react6"; setLanguage(lang); localStorage.setItem("goa-docs-design-tokens-lang", lang); } @@ -29,13 +30,13 @@ export function DesignTokenLayout() {

- - - - - - - + + + + + + + All Border Radius @@ -46,7 +47,7 @@ export function DesignTokenLayout() { Shadow Spacing Typography - +
diff --git a/src/routes/design-tokens/border-radius/BorderRadius.tsx b/src/routes/design-tokens/border-radius/BorderRadius.tsx index 1c2128ac8..bfb85a69e 100644 --- a/src/routes/design-tokens/border-radius/BorderRadius.tsx +++ b/src/routes/design-tokens/border-radius/BorderRadius.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./BorderRadius.css"; import { Token } from "../token"; @@ -27,7 +27,7 @@ export default function BorderRadiusPage() { const renderDesktop = () => { return ( - + @@ -57,17 +57,17 @@ export default function BorderRadiusPage() { ))} - + ); }; const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token, idx) => ( <> - +
px
{token.px}
Figma variable
{token.figmaUsage}
- + )) )} - + ); }; diff --git a/src/routes/design-tokens/border-width/BorderWidth.tsx b/src/routes/design-tokens/border-width/BorderWidth.tsx index 110c8faed..44c1f8ff0 100644 --- a/src/routes/design-tokens/border-width/BorderWidth.tsx +++ b/src/routes/design-tokens/border-width/BorderWidth.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./BorderWidth.css"; import { Token } from "../token"; @@ -33,7 +33,7 @@ export default function BorderWidthPage() { const renderDesktop = () => { return ( - + @@ -63,16 +63,16 @@ export default function BorderWidthPage() { ))} - + ); }; const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token, idx) => ( - +
px
{token.px}
Figma usage
{token.figmaUsage}
- + )) )} - + ); }; diff --git a/src/routes/design-tokens/color/Color.tsx b/src/routes/design-tokens/color/Color.tsx index ee408be52..1d66c4388 100644 --- a/src/routes/design-tokens/color/Color.tsx +++ b/src/routes/design-tokens/color/Color.tsx @@ -1,4 +1,4 @@ -import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Color.css"; import COLORS from "./colors.json"; @@ -25,7 +25,7 @@ export default function ColorPage() { const renderDesktop = () => { return ( - + Type @@ -61,7 +61,7 @@ export default function ColorPage() { ))} - + ); }; @@ -75,9 +75,9 @@ export default function ColorPage() { {color.name} - + {color.tokens.map((token, tokenIndex) => ( - +
Figma colour style
{token.figmaColorStyle}
Description
{token.description}
- + ))} - + ))} diff --git a/src/routes/design-tokens/icon-size/IconSize.tsx b/src/routes/design-tokens/icon-size/IconSize.tsx index 5e0c2b233..2bba84369 100644 --- a/src/routes/design-tokens/icon-size/IconSize.tsx +++ b/src/routes/design-tokens/icon-size/IconSize.tsx @@ -1,15 +1,15 @@ -import { GoAContainer, GoAGrid, GoAIcon, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabIcon, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./IconSize.css"; import { getTokenGroups } from "../getTokenGroups"; -import { IconSize } from "@abgov/react-components"; import { Token } from "../token"; import { useContext } from "react"; import { DeviceWidthContext } from "../../../contexts/DeviceWidthContext"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabIconSize } from "@abgov/ui-components-common"; interface IconSizeToken extends Token { - size: IconSize | string; + size: GoabIconSize | string; } export default function IconSizePage() { @@ -40,7 +40,7 @@ export default function IconSizePage() { const renderDesktop = () => { return ( - + @@ -55,7 +55,7 @@ export default function IconSizePage() {
- +
@@ -67,18 +67,18 @@ export default function IconSizePage() { ))} - + ); }; const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token: IconSizeToken, idx: number) => ( - +
- +
@@ -86,10 +86,10 @@ export default function IconSizePage() {
px
{token.px}
Figma usage
{token.figmaUsage}
- + )) )} - + ); }; diff --git a/src/routes/design-tokens/opacity/Opacity.tsx b/src/routes/design-tokens/opacity/Opacity.tsx index 253c8953d..39f3a7b32 100644 --- a/src/routes/design-tokens/opacity/Opacity.tsx +++ b/src/routes/design-tokens/opacity/Opacity.tsx @@ -1,4 +1,4 @@ -import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Opacity.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -30,7 +30,7 @@ export default function OpacityPage() { const renderDesktop = () => { return ( - + @@ -61,16 +61,16 @@ export default function OpacityPage() { ))} - + ); }; const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token: Token, idx: number) => ( - +
%
{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 16ba83a51..147ea48e7 100644 --- a/src/routes/design-tokens/overview/Overview.tsx +++ b/src/routes/design-tokens/overview/Overview.tsx @@ -1,4 +1,4 @@ -import { GoAContainer } from "@abgov/react-components"; +import { GoabContainer } from "@abgov/react-components"; import "./Overview.css"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; export default function DesignTokensOverviewPage() { @@ -27,14 +27,14 @@ export default function DesignTokensOverviewPage() { product teams.

- +

Design token example

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

Developers

diff --git a/src/routes/design-tokens/shadow/Shadow.tsx b/src/routes/design-tokens/shadow/Shadow.tsx index 95899ca81..cb00423ed 100644 --- a/src/routes/design-tokens/shadow/Shadow.tsx +++ b/src/routes/design-tokens/shadow/Shadow.tsx @@ -1,4 +1,4 @@ -import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Shadow.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -24,7 +24,7 @@ export default function ShadowPage() { const renderDesktop = () => { return ( - + @@ -47,26 +47,26 @@ export default function ShadowPage() { ))} - + ); }; const renderMobile = () => { return ( - + {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.tsx b/src/routes/design-tokens/spacing/Spacing.tsx index fb0f8c7c8..5ddbab548 100644 --- a/src/routes/design-tokens/spacing/Spacing.tsx +++ b/src/routes/design-tokens/spacing/Spacing.tsx @@ -1,4 +1,4 @@ -import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Spacing.css"; import SPACING_TOKENS from "./spacing.json"; @@ -21,7 +21,7 @@ export default function SpacingPage() { const renderDesktop = () => { return ( - + @@ -55,16 +55,16 @@ export default function SpacingPage() { ))} - + ); }; const renderMobile = () => { return ( - + {getTokenGroups(tokens).map(group => group.map((token: Token, idx: number) => ( - +
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 95e922424..f468f0cb3 100644 --- a/src/routes/design-tokens/typography/Typography.tsx +++ b/src/routes/design-tokens/typography/Typography.tsx @@ -1,4 +1,4 @@ -import { GoAContainer, GoAGrid, GoATable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import TYPO_TOKENS from "./typography.json"; import { getTokenGroups } from "../getTokenGroups"; @@ -22,7 +22,7 @@ export default function TypographyPage() { const renderDesktop = () => { return ( - + Figma type style @@ -49,16 +49,16 @@ export default function TypographyPage() { ))} - + ); }; const renderMobile = () => { return ( - + {getTokenGroups(tokens as Token[]).map(group => group.map((token: TypographyToken, idx: number) => ( - +
{token.figmaTypeStyle} @@ -71,10 +71,10 @@ export default function TypographyPage() {
Font size
{token.fontSize}
Line height
{token.lineHeight}
- + )) )} - + ); }; diff --git a/src/routes/get-started/Contribute.tsx b/src/routes/get-started/Contribute.tsx index a8983f6c1..b71e22472 100644 --- a/src/routes/get-started/Contribute.tsx +++ b/src/routes/get-started/Contribute.tsx @@ -1,4 +1,4 @@ -import { GoACallout, GoAContainer, GoADetails, GoADivider, GoASpacer, GoATable, } from "@abgov/react-components"; +import { GoabCallout, GoabContainer, GoabDetails, GoabDivider, GoabSpacer, GoabTable, } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; export default function ContributePage() { @@ -9,25 +9,25 @@ export default function ContributePage() { Add to the components or patterns in the design system

The design system is a shared resource for product teams to use and contribute to. We encourage everyone, regardless of their role, to help improve the design system.

- + Start by using what's in the design system to design and build services easier - + Contribute - +

View the full governance process in Figma

- - + + - +

Did you know…

There are open contribution files in Figma for every component and pattern in the design system, including unpublished ideas and experiments.

- +

Design contribution process

@@ -35,7 +35,7 @@ export default function ContributePage() {

If a component or pattern doesn’t exist in production or doesn’t meet the needs of your users, please contact the design system team. We’ll discuss the issue to understand it better and decide on the next steps together.

- +

1. Come talk to us:

  • @@ -58,7 +58,7 @@ export default function ContributePage() {

    2. Your contribution will be evaluated against the following contribution criteria:

    Proposing a component or pattern

    For something to be added or changed in the design system, it needs to be:

    - + @@ -87,11 +87,11 @@ export default function ContributePage() { - - + +

    Standards for a given solution

    For a new component or pattern to be published, a given solution has to be:

    - + @@ -120,8 +120,8 @@ export default function ContributePage() { - - + +

    3. Once approved, it will be added to the Design System's backlog

    • @@ -136,7 +136,7 @@ export default function ContributePage() {
- +

Code contribution process

In order to support all of the development frameworks that service teams use, we build and support a library of web components. Contributing entire components can be challenging and time-consuming, so we recommend and encourage smaller-scale contributions instead.

@@ -150,9 +150,9 @@ export default function ContributePage() {
  • Start by reaching out on the #design-system-support channel on slack to let us know you’re interested in contributing.
  • Find an issue in our backlog tagged with “ready-for-contribution”. Let us know which issue(s) you’re picking up. - + Since our repository is “public”, you'll need to use a different GitHub account than the Enterprise Managed User (EMU) account you use for your product team work. - +

    • Setup contribution environment

    @@ -181,25 +181,25 @@ export default function ContributePage() {
    Angular - + React - +

    React and Web wrappers

    - +

    React wrappers
    - + Each folder represents a single component with its associated unit tests and wrapper code

    - +

    Web wrappers
    - + Each folder represents a single component with:

      @@ -213,7 +213,7 @@ export default function ContributePage() { Documentation as doc.md 
    - +

    Testing procedures

    All unit tests must be written in Svelte.

      @@ -227,13 +227,13 @@ export default function ContributePage() { Additionally, our QA automation developer will perform a comprehensive series of tests to ensure the components' quality and functionality.

      - +

      Submitting your code

      1. Submit a commit using the following as your commit message: - +
        Bug Fix:
        fix(#storyNumber): short description of issue fixed (7 words max)
        @@ -242,7 +242,7 @@ export default function ContributePage() {
        Feature Request:
        feat(#storyNumber): short description of feature (7 words max)
        -         +
      2. Create a pull request to the alpha branch from your branch
      3. Mark the PR as a draft
        4. diff --git a/src/routes/get-started/GetStartedLayout.tsx b/src/routes/get-started/GetStartedLayout.tsx index f63a25d9c..174491029 100644 --- a/src/routes/get-started/GetStartedLayout.tsx +++ b/src/routes/get-started/GetStartedLayout.tsx @@ -1,4 +1,4 @@ -import { GoASideMenu, GoASideMenuGroup, GoASpacer } from "@abgov/react-components"; +import { GoabSideMenu, GoabSideMenuGroup, GoabSpacer } from "@abgov/react-components"; import { Link, Outlet } from "react-router-dom"; import { SupportInfo } from "@components/support-info/SupportInfo.tsx"; @@ -6,24 +6,24 @@ export default function GetStartedLayout() { return (
        - - + + Start with the design system UX Designers - + Overview Setup Verify a bug VS Code Technologies Supported Browsers - - QA testing - Contribute - Support - Roadmap - User experience guidelines - + + QA testing + Contribute + Support + Roadmap + User experience guidelines +
        diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx index e881b2c27..2adc272e3 100644 --- a/src/routes/get-started/GetStartedOverview.tsx +++ b/src/routes/get-started/GetStartedOverview.tsx @@ -1,4 +1,4 @@ -import { GoAButton, GoAButtonGroup, GoAContainer, GoAGrid } from "@abgov/react-components"; +import { GoabButton, GoabButtonGroup, GoabContainer, GoabGrid } from "@abgov/react-components"; import { useNavigate } from "react-router-dom"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; @@ -13,36 +13,36 @@ export default function GetStartedOverviewPage() {
        - +

        Using the design system by role:

        - - + navigate("/get-started/designers")}> Designers - - + navigate("/get-started/developers")}> Developers - - + navigate("/get-started/qa-testing")}> QA Testers - - -         + + + - + Start with the design system. You don't need to reinvent the wheel. The design system is the floor, not the ceiling. Start with it to save time building the common parts of a service, so that you can spend time on the unique challenges within your service context. - +

        The value of starting with the design system components

        diff --git a/src/routes/get-started/ReportBug.tsx b/src/routes/get-started/ReportBug.tsx index adee4c7f8..c0c85f6e9 100644 --- a/src/routes/get-started/ReportBug.tsx +++ b/src/routes/get-started/ReportBug.tsx @@ -1,18 +1,22 @@ import { - GoABlock, - GoAButton, - GoACallout, - GoADetails, - GoAFormItem, - GoAInput, - GoARadioItem, - GoARadioGroup, - GoATextArea + GoabBlock, + GoabButton, + GoabCallout, + GoabDetails, + GoabFormItem, + GoabInput, + GoabRadioItem, + GoabRadioGroup, GoabTextarea } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; import { useEffect, useState } from "react"; import { Octokit } from "octokit"; import { useNavigate } from "react-router-dom"; +import { + GoabInputOnChangeDetail, + GoabRadioGroupOnChangeDetail, + GoabTextAreaOnChangeDetail +} from "@abgov/ui-components-common"; export default function ReportBugPage() { interface Package { @@ -233,53 +237,53 @@ export default function ReportBugPage() { Let us know if you find a problem or inconsistency in the design system. Providing complete details in your bug report helps our team understand, prioritize, and fix the issue faster. - +

        • Web Components - { versions["web"] }
        • Angular Components - 3.2.2
        • React Components - 5.4.1
        - - - - - - - - - - - - - - - - - - - - - - - - - + + + handleChange(event.name, event.value) } trailingContent="@gov.ab.ca" width="30ch" error={ !!emailError } /> + + + + handleChange(event.name, event.value) } width="167px" error={ !!webVersionError } /> + + + handleChange(event.name, event.value) } width="167px" error={ !!otherVersionError } /> + + + + handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!expectedError } /> + + + handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!actualError } /> + + + handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!replicationError } /> + + + handleChange(event.name, event.value) } width="90%" error={ !!stackblitzError } /> + + The design system team uses StackBlitz to create and share live code examples. It allows us to easily see your code in an environment that is unaffected by the rest of your project. Create a free account and share your work directly with the team. - - - - - + + + handleChange(event.name, event.value) } width="90%" error={ !!jamError } /> + + The design system team uses jam.dev to share and report bugs. This gives us a lot of the information we need to understand what's happening and how to fix it. Create a free account and record and share the issue. - - - - - Submit bug + + + handleChange(event.name, event.value) } rows={ 6 } width="90%" /> + + Submit bug ); } else { @@ -287,23 +291,22 @@ export default function ReportBugPage() { Back

        Issue Submitted

        - + View your issue in the design system backlog. - +

        What happens next

        1. The design system team will review the issue in the next backlog grooming
        2. Subscribe to your issue in Github to get notified of any updates

        Create another issue

        - - - - + bugOrFeature(event.name, event.value)}> + + +
        - Raise an issue + Raise an issue         ); } } - \ No newline at end of file diff --git a/src/routes/get-started/RequestFeature.tsx b/src/routes/get-started/RequestFeature.tsx index af04bea19..9b3737ba1 100644 --- a/src/routes/get-started/RequestFeature.tsx +++ b/src/routes/get-started/RequestFeature.tsx @@ -1,4 +1,4 @@ -import { GoASpacer } from "@abgov/react-components"; +import { GoabSpacer } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; import { Link } from "react-router-dom"; @@ -8,17 +8,17 @@ export default function RequestFeaturePage() { Back

        Request a new feature

        Anyone can propose a new component or pattern for the design system.

        - +

        1. Check the design system backlog on Github

        First, check the design system backlog to see if someone else has already identified a similar need or idea.

        - +

        2. Talk to us

        If a component or pattern doesn't exist in production or doesn't meet the needs of your users, contact the design system team. We'll discuss the issue to understand it better and decide on the next steps together.

        - +

        Get in touch with the design system team:

        Book time with us in Design system Drop-in hours @@ -29,9 +29,8 @@ export default function RequestFeaturePage() {

      4. Explain your user and service goals
      5. Share any options and iterations that were explored with and without the Design System
    - + View our contribution process ); } - \ No newline at end of file diff --git a/src/routes/get-started/Support.tsx b/src/routes/get-started/Support.tsx index 9c089c5f6..f94c782b7 100644 --- a/src/routes/get-started/Support.tsx +++ b/src/routes/get-started/Support.tsx @@ -1,21 +1,21 @@ import { - GoAButton, - GoAFormItem, - GoARadioGroup, - GoARadioItem, - GoASpacer, - GoAText, + GoabButton, + GoabFormItem, + GoabRadioGroup, + GoabRadioItem, + GoabSpacer, GoabText } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; +import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; export default function SupportPage() { let navigate = useNavigate(); const [issueSelection, setIssueSelection] = useState("") - function bugOrFeature(_: string, value: string) { + function bugOrFeature(value: string) { setIssueSelection(value); } @@ -40,14 +40,14 @@ export default function SupportPage() {

    Let us know if you find a problem in the design system or if you need a new component or pattern.

    - - - - - - + + bugOrFeature(event.value)}> + + + +
    - Raise an issue + Raise an issue

    Talk to us

    Slack

    @@ -70,35 +70,35 @@ export default function SupportPage() {
    Book a time

    - +

    Design system team

    - Product Owner + Product Owner

    Mark Elamatha | mark.elamatha@gov.ab.ca

    - Scrum master and DevOps + Scrum master and DevOps

    Dustin Nielsen | dustin.nielsen@gov.ab.ca

    - Digital architect and Lead developer + Digital architect and Lead developer

    Chris Olsen | chris.olsen@gov.ab.ca

    - Developers + Developers

    Vanessa Tran | vanessa.m.tran@gov.ab.ca
    Syed Zeeshan | syed.zeeshan@gov.ab.ca

    - QA Automation Developer + QA Automation Developer

    Ken Li | ken.li@gov.ab.ca

    - Service designer + Service designer

    Ali Nicholls Asikinack | ali.nicholls-asikinack@gov.ab.ca

    - UX designers + UX designers

    Thomas Jeffery | thomas.jeffery@gov.ab.ca
    diff --git a/src/routes/get-started/developers/DevelopersOverview.tsx b/src/routes/get-started/developers/DevelopersOverview.tsx index 30b44e29a..248a45c23 100644 --- a/src/routes/get-started/developers/DevelopersOverview.tsx +++ b/src/routes/get-started/developers/DevelopersOverview.tsx @@ -1,6 +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 } from "@abgov/react-components"; export default function DevelopersOverviewPage() { return ( @@ -19,11 +20,11 @@ export default function DevelopersOverviewPage() {

    The design system consists of:

    - + Design tokens Components Product templates - +

    Designers also have access to the same resources in Figma. To begin with, they should diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx index 3949033d9..bbb51bf5e 100644 --- a/src/routes/get-started/developers/DevelopersSetup.tsx +++ b/src/routes/get-started/developers/DevelopersSetup.tsx @@ -1,4 +1,4 @@ -import { GoABlock, GoAContainer, GoADivider } from "@abgov/react-components"; +import { GoabBlock, GoabContainer, GoabDivider } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import "./Developers.css"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -6,45 +6,45 @@ import { ComponentContent } from "@components/component-content/ComponentContent export default function DevelopersSetupPage() { return (

    - -

    Developers

    -

    Setup

    - -

    Once you are setup, you can use the project template to quickly get started.

    - View project templates -     - -

    Angular UI components

    -

    This is the web component library and utilizes Angular's web component integration.

    - -

    1. Add Dependencies

    - +

    Developers

    +

    Setup

    + +

    Once you are setup, you can use the project template to quickly get started.

    + View project templates +     + +

    Angular UI components

    +

    This is the web component library and utilizes Angular's web component integration.

    + +

    1. Add Dependencies

    + - -

    2. Link ionicons in app/index.html Add the following in the head element

    - + +

    2. Link ionicons in app/index.html Add the following in the head element

    + `} - /> - -

    3. Update src/app/app.module.ts as per the four steps below

    - + +

    3. Update src/app/app.module.ts as per the four steps below

    + + /> -

    4. Add the styles link in the src/styles.css file

    - +

    4. Add the styles link in the src/styles.css file

    + - +

    React UI components

    @@ -113,33 +113,7 @@ export default function DevelopersSetupPage() { code={`@import "@abgov/web-components/index.css";`} /> -

    4. Import the web-component library at the top of your entry point file

    -

    Your entry point file might be called index.tsx or main.tsx:

    - { - return
    Hello, world!
    ; - }; - - const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); - - root.render( - - - - ); - `} - /> - - +

    Vue web components

    This library contains react components from the Government of Alberta.

    @@ -200,17 +174,17 @@ export default function DevelopersSetupPage() { code={`@import "@abgov/web-components/index.css";`} /> - - -

    Angular/React templates

    - - - Angular template - - - React template - - + + +

    Angular/React templates

    + + + Angular template + + + React template + +

    To use the templates, follow these steps:

      diff --git a/src/routes/get-started/developers/SupportedBrowsers.tsx b/src/routes/get-started/developers/SupportedBrowsers.tsx index 7a24c9a00..63d7ebf27 100644 --- a/src/routes/get-started/developers/SupportedBrowsers.tsx +++ b/src/routes/get-started/developers/SupportedBrowsers.tsx @@ -1,4 +1,4 @@ -import { GoACheckbox, GoAContainer, GoATable } from "@abgov/react-components"; +import { GoabCheckbox, GoabContainer, GoabTable } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; export default function SupportedBrowsersPage() { @@ -10,7 +10,7 @@ export default function SupportedBrowsersPage() { The design system components are tested on the following browsers and devices: - + Browser @@ -24,64 +24,64 @@ export default function SupportedBrowsersPage() { Google Chrome - + - + - + - + Microsoft Edge - + - + - + - + Mozilla Firefox - + - + - + - + Apple Safari N/A - + N/A - + - +
      - +

      Representative mobile OS used in testing

      Android OS: 10+ @@ -89,7 +89,7 @@ export default function SupportedBrowsersPage() {

      iOS: 15+

      -       +
      ); diff --git a/src/routes/home.tsx b/src/routes/home.tsx index 333ca33df..7918bd8e3 100644 --- a/src/routes/home.tsx +++ b/src/routes/home.tsx @@ -1,12 +1,12 @@ import { - GoAButton, - GoAButtonGroup, - GoADivider, - GoAGrid, - GoAHeroBanner, - GoAHeroBannerActions, - GoAPageBlock, - GoASpacer, + GoabButton, + GoabButtonGroup, + GoabDivider, + GoabGrid, + GoabHeroBanner, + GoabHeroBannerActions, + GoabPageBlock, + GoabSpacer, } from "@abgov/react-components"; import "./home.css"; import { MAX_CONTENT_WIDTH } from "@routes/root"; @@ -17,32 +17,32 @@ const HomePage = () => { const navigate = useNavigate(); return ( <> - Resources for Government of Alberta product teams to build better services. Learn from the research and experience of other product teams and avoid repeating work that’s already been done. - - - { + + + { navigate("get-started"); }} trailingIcon="arrow-forward" > Get started - - { + + { window.open("https://github.com/GovAlta/ui-components/releases", "_blank"); }} type="tertiary"> Learn about the latest release - - - - + + + + - - + + { linkTo="/content/capitalization" linkDisplay="Browse Content" /> - + - +

      How to use the design system in your service

        @@ -88,8 +88,8 @@ const HomePage = () => {
      - -       + + ); }; diff --git a/src/routes/patterns/LayoutPage.tsx b/src/routes/patterns/LayoutPage.tsx index bffcf995c..f375ab98d 100644 --- a/src/routes/patterns/LayoutPage.tsx +++ b/src/routes/patterns/LayoutPage.tsx @@ -1,18 +1,15 @@ -import { - GoAAppFooter, - GoAAppHeader, - GoABadge, - GoAGrid, - GoAMicrositeHeader, - GoAOneColumnLayout, - GoAPageBlock, - GoASkeleton, - GoATab, - GoATabs, -} from "@abgov/react-components"; import {Sandbox} from "@components/sandbox"; import Browser from "@components/browser/Browser"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { + GoabAppFooter, + GoabAppHeader, GoabBadge, GoabGrid, + GoabMicrositeHeader, + GoabOneColumnLayout, + GoabPageBlock, GoabSkeleton, + GoabTab, + GoabTabs +} from "@abgov/react-components"; export default function LayoutPage() { return ( @@ -21,48 +18,48 @@ export default function LayoutPage() {

      A structural template that supports consistency across applications by defining visual grids, spacing, and sections.

      - - + +

      Basic page layout

      - +
      - - + + Sign in - +
      - +

      - - + +

      - - + +

      - - - - -       + + + + +
      - +
      -       +       -       + - Design guidelines - + - }> -       + }> + ); } diff --git a/src/routes/patterns/PatternsLayout.tsx b/src/routes/patterns/PatternsLayout.tsx index 807cfbf36..83a24b6c3 100644 --- a/src/routes/patterns/PatternsLayout.tsx +++ b/src/routes/patterns/PatternsLayout.tsx @@ -1,8 +1,9 @@ -import { GoABlock, GoADropdown, GoADropdownItem, GoASideMenu, GoASideMenuHeading, GoASpacer } from "@abgov/react-components"; +import { GoabBlock, GoabDropdown, GoabDropdownItem, GoabSideMenu, GoabSideMenuHeading, GoabSpacer } from "@abgov/react-components"; import {Link, Outlet} from "react-router-dom"; import {SupportInfo} from "@components/support-info/SupportInfo.tsx"; import {useEffect, useState} from "react"; import { LanguageContext } from "@components/sandbox"; +import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; export default function PatternsLayout() { const [language, setLanguage] = useState(""); @@ -12,8 +13,8 @@ export default function PatternsLayout() { setLanguage(lang); }, []); - function onLanguageChange(_name: string, value: string[] | string) { - const lang = Array.isArray(value) ? value[0] : value; + function onLanguageChange(onChangeDetail: GoabDropdownOnChangeDetail) { + const lang = Array.isArray(onChangeDetail.value) ? onChangeDetail.value[0] : onChangeDetail.value; setLanguage(lang); localStorage.setItem("goa-docs-lang", lang); } @@ -22,25 +23,25 @@ export default function PatternsLayout() {
      - - + + All - Public form - - Pages - - - - - - + Simple form + + Pages + + + + + + Basic page layout Start page Task list page Question pages Review page Results page - +
      diff --git a/src/routes/patterns/QuestionPage.tsx b/src/routes/patterns/QuestionPage.tsx index c1fb3272b..c7df960b6 100644 --- a/src/routes/patterns/QuestionPage.tsx +++ b/src/routes/patterns/QuestionPage.tsx @@ -1,6 +1,6 @@ import { - GoATab, - GoATabs + GoabTab, + GoabTabs } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import QuestionPageExamples from "@examples/question-page/QuestionPageExamples"; @@ -17,12 +17,12 @@ export default function QuestionPage() { - - + + - + - +
      question page overview image Make it clear which tasks a user has completed and which they still need to complete.

      - - + + ); diff --git a/src/routes/patterns/ResultPage.tsx b/src/routes/patterns/ResultPage.tsx index f76aee987..c65e9efd9 100644 --- a/src/routes/patterns/ResultPage.tsx +++ b/src/routes/patterns/ResultPage.tsx @@ -1,6 +1,6 @@ import { - GoATab, - GoATabs + GoabTab, + GoabTabs } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import css from "./patterns.module.css"; @@ -16,12 +16,12 @@ export default function ResultPage() { - - + + - + - +

      Overview

      contact details for the service
    1. links to information or services that users are likely to need next
      2. - - + + ); diff --git a/src/routes/patterns/ReviewPage.tsx b/src/routes/patterns/ReviewPage.tsx index ad46e3ec2..70c6fe7a0 100644 --- a/src/routes/patterns/ReviewPage.tsx +++ b/src/routes/patterns/ReviewPage.tsx @@ -1,6 +1,6 @@ import { - GoATab, - GoATabs + GoabTab, + GoabTabs } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import css from "./patterns.module.css"; @@ -14,12 +14,12 @@ export default function ReviewPage() { - - + + - + - +

      Overview @@ -60,8 +60,8 @@ export default function ReviewPage() { src="/images/patterns/review-page-change-answers.png" />

      -       -       + +       ); diff --git a/src/routes/patterns/SimpleFormPage.tsx b/src/routes/patterns/SimpleFormPage.tsx index e7c7881a6..e26040698 100644 --- a/src/routes/patterns/SimpleFormPage.tsx +++ b/src/routes/patterns/SimpleFormPage.tsx @@ -1,5 +1,5 @@ import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoADetails } from "@abgov/react-components"; +import { GoabDetails } from "@abgov/react-components"; import css from "./patterns.module.css"; import { Link } from "react-router-dom"; @@ -11,7 +11,7 @@ export default function SimpleFormPage() { Design forms that help Albertan citizens understand the task, focus on the question and its answer, and complete the form. - +

      Primary users: citizens, public, external
      @@ -22,7 +22,7 @@ export default function SimpleFormPage() { There is an emphasis on an accessible experience with a low cognitive load for users who use the service infrequently.

      -       +

      Form structure

      diff --git a/src/routes/patterns/StartPage.tsx b/src/routes/patterns/StartPage.tsx index e04b3e51a..e98c46fad 100644 --- a/src/routes/patterns/StartPage.tsx +++ b/src/routes/patterns/StartPage.tsx @@ -1,6 +1,6 @@ import { - GoATab, - GoATabs, + GoabTab, + GoabTabs, } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { StartPageExamples } from "@examples/start-page/StartPageExamples"; @@ -17,12 +17,12 @@ export default function StartPage() { - - + + - + - +

      Overview @@ -116,8 +116,8 @@ export default function StartPage() {

      Below the call to action, include any additional information as applicable such as customer support, frequently asked questions, or related links.

      - - + + ); diff --git a/src/routes/patterns/TaskListPage.tsx b/src/routes/patterns/TaskListPage.tsx index f4a011dfd..e9363fb15 100644 --- a/src/routes/patterns/TaskListPage.tsx +++ b/src/routes/patterns/TaskListPage.tsx @@ -1,7 +1,7 @@ import { - GoACallout, - GoATab, - GoATabs + GoabCallout, + GoabTab, + GoabTabs } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { TaskListPageExamples } from "@examples/task-list-page/TaskListPageExamples"; @@ -19,12 +19,12 @@ export default function TaskListPage() { - - + + - + - +

      Overview @@ -61,9 +61,9 @@ export default function TaskListPage() {

      - + You have completed 0 of 3 sections. - +
      @@ -114,8 +114,8 @@ export default function TaskListPage() { Task: goa-table

    - - + +     ); diff --git a/src/routes/root.tsx b/src/routes/root.tsx index dbd31612d..0ff952594 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -1,10 +1,10 @@ import { - GoAAppFooter, - GoAAppFooterMetaSection, - GoAAppFooterNavSection, - GoAAppHeader, - GoAMicrositeHeader, - GoAOneColumnLayout, + GoabAppFooter, + GoabAppFooterMetaSection, + GoabAppFooterNavSection, + GoabAppHeader, GoabDropdown, GoabDropdownItem, + GoabMicrositeHeader, + GoabOneColumnLayout } from "@abgov/react-components"; import { useEffect, useState } from "react"; import { Link, Outlet } from "react-router-dom"; @@ -12,6 +12,8 @@ import { Link, Outlet } from "react-router-dom"; import "./root.css"; import { useLocation } from "react-router-dom"; +import { useVersion } from "@contexts/VersionContext.tsx"; + export const MAX_CONTENT_WIDTH = "1360px"; @@ -26,6 +28,8 @@ function ScrollToTop() { } export default function Root() { + const version = useVersion(); + const [language, setLanguage] = useState(""); const [visible, setVisibility] = useState(false); useEffect(() => { @@ -34,49 +38,102 @@ export default function Root() { }, 50); }); + useEffect(() => { + const lang = localStorage.getItem("goa-docs-lang") || "react"; + setLanguage(lang); + }, []); + + const switchVersion = (version: string) => { + console.log(version); + } + const switchLanguage = (lang: string) => { + setLanguage(lang || "react"); + localStorage.setItem("goa-docs-lang", lang || "react"); + } + + const getCurrentVersion = () => { + if (version && version.includes("angular")) { + return "v3"; + } + if (version && version.includes("react")) { + return "v4"; + } + if (language === "react") { + return "v5"; + } + if (language === "angular") { + return "v4"; + } + } + + const versionSwitcher = () => { + return ( + <> + {/*TODO: We can make it as a link and a pop over so it doesn't override the menu item below*/} + switchLanguage(e.value as string)}> + + + + {language === "react" && ( + switchVersion(e.value as string)}> + + + + )} + {language === "angular" && ( + switchVersion(e.value as string)}> + + + + )} + + ); + } + return (
    - +
    - - + Get started Patterns Components Styles Content Support - +
    - - + + Get started Patterns Components Styles Content - - + + Submit an issue #design-system-support - - + + Contribute to the design system Give feedback Release notes - - + +
    -     +
    ); } diff --git a/src/utils/index.ts b/src/utils/index.ts index 7e79f5a3e..5b3ec3d7c 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -4,4 +4,16 @@ export function toKebabCase(str: string) { .replace(/_/g, '-') // Replace underscores with - .replace(/([a-z])([A-Z])/g, '$1-$2') // Convert camelCase to kebab-case .toLowerCase(); // Convert to lowercase -} \ No newline at end of file +} + +export function getQueryParam(param: string): string | null { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get(param); +} + +export function setQueryParam(param: string, value: string): void { + const url = new URL(window.location.href); + url.searchParams.set(param, value); + window.history.replaceState({}, '', url.toString()); +} + From 79d8bd8df6bd7d6f5a081b0e80de9b956bedcc10 Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Wed, 6 Nov 2024 16:08:05 -0700 Subject: [PATCH 03/15] feat(#1835): language/version switching context for sandbox & handle url --- src/App.tsx | 162 ++---------------- .../ComponentProperties.tsx | 26 ++- src/components/components-router.tsx | 134 +++++++++++++++ .../sandbox/AngularReactiveSerializer.ts | 7 +- src/components/sandbox/AngularSerializer.ts | 23 ++- src/components/sandbox/BaseSerializer.ts | 2 +- src/components/sandbox/ReactSerializer.ts | 6 +- src/components/sandbox/Sandbox.tsx | 121 +++++-------- .../VersionLanguageSwitcher.tsx | 71 ++++++++ .../version-language-constants.ts | 31 ++++ src/contexts/LanguageVersionContext.tsx | 39 +++++ src/contexts/VersionContext.tsx | 47 ----- src/contexts/VersionFromUrlContext.tsx | 49 ++++++ src/examples/accordion/AccordionExamples.tsx | 124 +++++++++++++- src/global-constants.ts | 1 + src/hooks/useLocalStorage.ts | 28 +++ src/routes/components/Accordion.tsx | 10 +- src/routes/components/Components.tsx | 131 +++++++------- src/routes/home.tsx | 3 +- src/routes/root.tsx | 68 +------- 20 files changed, 644 insertions(+), 439 deletions(-) create mode 100644 src/components/components-router.tsx create mode 100644 src/components/version-language-switcher/VersionLanguageSwitcher.tsx create mode 100644 src/components/version-language-switcher/version-language-constants.ts create mode 100644 src/contexts/LanguageVersionContext.tsx delete mode 100644 src/contexts/VersionContext.tsx create mode 100644 src/contexts/VersionFromUrlContext.tsx create mode 100644 src/global-constants.ts create mode 100644 src/hooks/useLocalStorage.ts diff --git a/src/App.tsx b/src/App.tsx index 30b58c144..24ed2ab55 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import { Route, RouterProvider, createBrowserRouter, - createRoutesFromElements, useParams + createRoutesFromElements, } from "react-router-dom"; import "@abgov/web-components"; @@ -17,52 +17,6 @@ import "./index.css"; import HomePage from "@routes/home"; -// Components - -import ComponentsPage from "@routes/components/Components"; - -import AllComponentsPage from "@routes/components/AllComponents"; -import AccordionPage from "@routes/components/Accordion.tsx"; -import BadgePage from "@routes/components/Badge"; -import BlockPage from "@routes/components/Block"; -import ButtonGroupPage from "@routes/components/ButtonGroup"; -import ButtonPage from "@routes/components/Button"; -import CalloutPage from "@routes/components/Callout"; -import CheckboxPage from "@routes/components/Checkbox"; -import ComponentNotFoundPage from "@routes/not-found/NotFound"; -import ContainerPage from "@routes/components/Container"; -import DatePickerPage from "@routes/components/DatePicker"; -import DetailsPage from "@routes/components/Details"; -import DividerPage from "@routes/components/Divider"; -import DropdownPage from "@routes/components/Dropdown"; -import FileUploaderPage from "@routes/components/FileUploader"; -import FilterChipPage from "@routes/components/FilterChip"; -import FormItemPage from "@routes/components/FormItemPage.tsx"; -import FormStepperPage from "@routes/components/FormStepper"; -import GridPage from "@routes/components/Grid"; -import HeroBannerPage from "@routes/components/HeroBanner"; -import IconsPage from "@routes/components/Icons"; -import IconButtonPage from "@routes/components/IconButton"; -import ListPage from "@routes/components/List"; -import ModalPage from "@routes/components/Modal"; -import NotificationBannerPage from "@routes/components/Notificationbanner"; -import PaginationPage from "@routes/components/Pagination"; -import PopoverPage from "@routes/components/Popover"; -import ProgressIndicatorPage from "@routes/components/ProgressIndicator"; -import RadioPage from "@routes/components/Radio"; -import SkeletonPage from "@routes/components/Skeleton.tsx"; -import SpacerPage from "@routes/components/Spacer"; -import TablePage from "@routes/components/Table"; -import TabsPage from "@routes/components/Tabs.tsx"; -import TooltipPage from "@routes/components/Tooltip"; -import TextPage from "@routes/components/Text"; -import TextFieldPage from "@routes/components/TextField"; -import TextAreaPage from "@routes/components/TextArea"; -import MicrositeHeaderPage from "@routes/components/MicrositeHeader"; -import AppHeaderPage from "@routes/components/AppHeader"; -import AppFooterPage from "@routes/components/AppFooter"; -import SideMenuPage from "@routes/components/SideMenu"; - // Design Tokens import DesignTokensOverviewPage from "@routes/design-tokens/overview/Overview"; @@ -114,101 +68,17 @@ import TaskListPage from "@routes/patterns/TaskListPage"; import QuestionPage from "@routes/patterns/QuestionPage"; import ReviewPage from "@routes/patterns/ReviewPage"; import ResultPage from "@routes/patterns/ResultPage"; -import { VersionProvider } from "@contexts/VersionContext.tsx"; - -const componentRoutes = { - accordion: , - badge: , - block: , - button: , - "button-group": , - callout: , - checkbox: , - container: , - "date-picker": , - details: , - divider: , - dropdown: , - "file-uploader": , - "filter-chip": , - "form-item": , - "form-stepper": , - grid: , - "hero-banner": , - icons: , - "icon-button": , - input: , - list: , - "microsite-header": , - modal: , - "notification-banner": , - pagination: , - popover: , - "progress-indicator": , - radio: , - "side-menu": , - "skeleton-loader": , - spacer: , - table: , - tabs: , - text: , - "text-area": , - tooltip: , - "text-field": , - header: , - footer: , -} -const supportedVersions = ['v3-angular', 'v4-react']; - -const getComponent = (componentName: keyof typeof componentRoutes) => { - return componentRoutes[componentName] || ; -interface DeviceWidthProviderProps { - children: ReactNode; -} - -const ComponentRoute: React.FC = () => { - const { component } = useParams<{ component: string }>(); - const Component = componentRoutes[component as keyof typeof componentRoutes] || ; - return Component; -}; - -const VersionedComponentRoute: React.FC = () => { - const { version, component } = useParams<{ version: string, component: string }>(); - if (!version || !component) { - return ; - } - if (!supportedVersions.includes(version)) { - return ; - } - return getComponent(component as keyof typeof componentRoutes); -} +import { VersionFromUrlProvider } from "@contexts/VersionFromUrlContext.tsx"; +import { ComponentsRouter } from "@components/components-router.tsx"; +import ComponentNotFound from "@routes/not-found/NotFound.tsx"; +import { LanguageVersionProvider } from "@contexts/LanguageVersionContext.tsx"; const router = createBrowserRouter( createRoutesFromElements( - }> + }> } /> - - {/*// user copy and paste the URL: /v5/components/accordion but they choose angular ==> 404*/} - } - errorElement={}> - {/* Non-versioned paths components */} - } /> - } - /> - {/* Versioned paths components */} - } /> - - - - - } - errorElement={}> + }> + } errorElement={}> } /> } /> } /> @@ -257,9 +127,9 @@ const router = createBrowserRouter( } /> - } errorElement={}> + } errorElement={}> } /> - } /> + } /> } /> } /> } /> @@ -273,12 +143,12 @@ const router = createBrowserRouter( ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - + + + - - - + + + ); diff --git a/src/components/component-properties/ComponentProperties.tsx b/src/components/component-properties/ComponentProperties.tsx index 35f4073cd..6ee13fa34 100644 --- a/src/components/component-properties/ComponentProperties.tsx +++ b/src/components/component-properties/ComponentProperties.tsx @@ -1,8 +1,8 @@ import { GoabAccordion, GoabBadge } from "@abgov/react-components"; import { useContext, useEffect, useState } from "react"; -import { LanguageContext } from "@components/sandbox"; import css from "./ComponentProperties.module.css"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export type ComponentProperty = { name: string; type?: string | string[]; @@ -14,23 +14,41 @@ export type ComponentProperty = { interface Props { properties: ComponentProperty[]; + oldProperties?: ComponentProperty[]; heading?: string; } export const ComponentProperties = (props: Props) => { - const lang = useContext(LanguageContext); + const {language, version} = useContext(LanguageVersionContext); + const [filteredProperties, setFilteredProperties] = useState([]); const filterBy = (properties: ComponentProperty[]) => { const result = properties.filter((child: ComponentProperty) => { - return !child.lang || child.lang === lang; + return !child.lang || child.lang === language; }); + console.log("filter by ", properties, " and lang ", language); return result; }; useEffect(() => { + console.log("ComponentProperties ---- ", language, " and version ", version); + if (version === "old") { + setFilteredProperties([...filterBy(props.oldProperties || props.properties)]); // If no old properties are provided, use the current properties + return; + } setFilteredProperties([...filterBy(props.properties)]); - }, [lang]); + }, [language, version]); + + // useEffect(() => { + // console.log("useEffect under ComponentProperties ", localVersion, " and lang ", localLanguage); + // if (localVersion === "old") { + // setFilteredProperties([...filterBy(props.oldProperties || props.properties)]); // If no old properties are provided, use the current properties + // return; + // } + // setFilteredProperties([...filterBy(props.properties)]); + // }, [localLanguage, localVersion]); + function dasherize(str: string): string { return str.replace(" ", "-").toLowerCase(); diff --git a/src/components/components-router.tsx b/src/components/components-router.tsx new file mode 100644 index 000000000..ab721d602 --- /dev/null +++ b/src/components/components-router.tsx @@ -0,0 +1,134 @@ +import { Route, Routes, useParams } from "react-router-dom"; +import ComponentsPage from "@routes/components/Components.tsx"; +import ComponentNotFoundPage from "@routes/not-found/NotFound.tsx"; +import AllComponentsPage from "@routes/components/AllComponents.tsx"; +import React from "react"; +import AccordionPage from "@routes/components/Accordion.tsx"; +import BadgePage from "@routes/components/Badge.tsx"; +import BlockPage from "@routes/components/Block.tsx"; +import ButtonPage from "@routes/components/Button.tsx"; +import ButtonGroupPage from "@routes/components/ButtonGroup.tsx"; +import CalloutPage from "@routes/components/Callout.tsx"; +import CheckboxPage from "@routes/components/Checkbox.tsx"; +import ChipPage from "@routes/components/Chip.tsx"; +import ContainerPage from "@routes/components/Container.tsx"; +import DatePickerPage from "@routes/components/DatePicker.tsx"; +import DetailsPage from "@routes/components/Details.tsx"; +import DividerPage from "@routes/components/Divider.tsx"; +import DropdownPage from "@routes/components/Dropdown.tsx"; +import FileUploaderPage from "@routes/components/FileUploader.tsx"; +import FormItemPage from "@routes/components/FormItemPage.tsx"; +import FormStepperPage from "@routes/components/FormStepper.tsx"; +import GridPage from "@routes/components/Grid.tsx"; +import HeroBannerPage from "@routes/components/HeroBanner.tsx"; +import IconsPage from "@routes/components/Icons.tsx"; +import IconButtonPage from "@routes/components/IconButton.tsx"; +import TextFieldPage from "@routes/components/TextField.tsx"; +import ListPage from "@routes/components/List.tsx"; +import MicrositeHeaderPage from "@routes/components/MicrositeHeader.tsx"; +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 RadioPage from "@routes/components/Radio.tsx"; +import SideMenuPage from "@routes/components/SideMenu.tsx"; +import SkeletonPage from "@routes/components/Skeleton.tsx"; +import SpacerPage from "@routes/components/Spacer.tsx"; +import TablePage from "@routes/components/Table.tsx"; +import TabsPage from "@routes/components/Tabs.tsx"; +import TextAreaPage from "@routes/components/TextArea.tsx"; +import TooltipPage from "@routes/components/Tooltip.tsx"; +import AppHeaderPage from "@routes/components/AppHeader.tsx"; +import AppFooterPage from "@routes/components/AppFooter.tsx"; +import { + OLD_ANGULAR_URL_SEGMENT, + OLD_REACT_URL_SEGMENT +} from "@components/version-language-switcher/version-language-constants.ts"; + +const componentPaths = { + accordion: , + badge: , + block: , + button: , + "button-group": , + callout: , + checkbox: , + chip: , + container: , + "date-picker": , + details: , + divider: , + dropdown: , + "file-uploader": , + "form-item": , + "form-stepper": , + grid: , + "hero-banner": , + icons: , + "icon-button": , + input: , + list: , + "microsite-header": , + modal: , + "notification-banner": , + pagination: , + popover: , + "progress-indicator": , + radio: , + "side-menu": , + "skeleton-loader": , + spacer: , + table: , + tabs: , + "text-area": , + tooltip: , + "text-field": , + header: , + footer: , +} + +const ComponentRoute: React.FC = () => { + const { component } = useParams<{ component: string }>(); + console.log("ComponentRoute ", component); + const Component = componentPaths[component as keyof typeof componentPaths] || ; + return Component; +}; + +const VersionedComponentRoute: React.FC = () => { + const { version, component } = useParams<{ version: string, component: string }>(); + console.log("VersionComponentRouter func", version, component); + if (!version || !component) { + return ; + } + const supportedVersions = [`${OLD_ANGULAR_URL_SEGMENT}`, OLD_REACT_URL_SEGMENT]; + if (!supportedVersions.includes(version)) { + return ; + } + + const getComponent = (componentName: keyof typeof componentPaths) => { + return componentPaths[componentName] || ; + } + + return getComponent(component as keyof typeof componentPaths); +} + +export const ComponentsRouter = () => { + return ( + + } + errorElement={}> + {/* Non-versioned paths components */} + } /> + } + /> + {/* Versioned paths components */} + } /> + + + ); +} diff --git a/src/components/sandbox/AngularReactiveSerializer.ts b/src/components/sandbox/AngularReactiveSerializer.ts index 76efaba5a..661f28b0e 100644 --- a/src/components/sandbox/AngularReactiveSerializer.ts +++ b/src/components/sandbox/AngularReactiveSerializer.ts @@ -1,5 +1,6 @@ import { ComponentBinding } from "./ComponentBinding"; import { BaseSerializer, Serializer, SerializerState } from "./BaseSerializer"; +import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts"; const ReactiveComponents = [ "goa-input", @@ -17,8 +18,8 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali " " ); - constructor(properties: ComponentBinding[], isOldVersion: boolean) { - super(properties, isOldVersion); + constructor(properties: ComponentBinding[], version: LanguageVersion) { + super(properties, version); } setIsRoot(isRoot: boolean) { @@ -96,7 +97,7 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali const currentPrefix = "Goab"; const oldPrefix = "goa"; const tail = name.replace(currentPrefix, ""); - if (this.isOldVersion) { + if (this.version === "old") { return `${oldPrefix}-${this.dasherize(tail)}`; } return `${currentPrefix.toLowerCase()}-${this.dasherize(tail)}`; diff --git a/src/components/sandbox/AngularSerializer.ts b/src/components/sandbox/AngularSerializer.ts index db3f38dfa..7ea173760 100644 --- a/src/components/sandbox/AngularSerializer.ts +++ b/src/components/sandbox/AngularSerializer.ts @@ -1,5 +1,6 @@ import { ComponentBinding } from "./ComponentBinding"; import { BaseSerializer, Serializer, SerializerState } from "./BaseSerializer"; +import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts"; export class AngularSerializer extends BaseSerializer implements Serializer { public isRoot = false; @@ -8,8 +9,8 @@ export class AngularSerializer extends BaseSerializer implements Serializer { " " ); - constructor(properties: ComponentBinding[], isOldVersion: boolean) { - super(properties, isOldVersion); + constructor(properties: ComponentBinding[], version: LanguageVersion) { + super(properties, version); } setIsRoot(isRoot: boolean) { @@ -39,7 +40,8 @@ export class AngularSerializer extends BaseSerializer implements Serializer { if (name === "value" && item === "") return `value=""`; if (item === "") return ""; if (name === "className") name = "class"; - return `${name.toLowerCase()}="${item}"`; + + return `${this.version === "old" ? name.toLowerCase() : name}="${item}"`; } dateToProp(name: string, item: Date): string { @@ -50,7 +52,7 @@ export class AngularSerializer extends BaseSerializer implements Serializer { if (this.isDynamic(name)) { return this.#dynamicProp(name); } - return `${name.toLowerCase()}="${item}"`; + return `${this.version === "old" ? name.toLowerCase() : name}="${item}"`; } booleanToProp(name: string, item: boolean): string { @@ -58,7 +60,7 @@ export class AngularSerializer extends BaseSerializer implements Serializer { return this.#dynamicProp(name); } if (!item) return ""; - return `${name.toLowerCase()}="${item}"`; + return `${this.version === "old" ? name.toLowerCase() : name}="${item}"`; } funcToProp(name: string, _item: Object): string { @@ -69,20 +71,15 @@ export class AngularSerializer extends BaseSerializer implements Serializer { if (this.isDynamic(name)) { return this.#dynamicProp(name); } - return delimit ? `${name.toLowerCase()}=[${items}]` : `${name.toLowerCase()}=${items}`; + return delimit ? `${this.version === "old" ? name.toLowerCase() : name}=[${items}]` : `${this.version === "old" ? name.toLowerCase(): name}=${items}`; } componentNameToString(name: string): string { if (this.nativeEls.includes(name)) { return name; } - const currentPrefix = "Goab"; - const oldPrefix = "goa"; - const tail = name.replace(currentPrefix, ""); - if (this.isOldVersion) { - return `${oldPrefix}-${this.dasherize(tail)}`; - } - return `${currentPrefix.toLowerCase()}-${this.dasherize(tail)}`; + const tail = name.replace("Goab", ""); + return `${this.version === "old" ? "goa" : "goab"}-${this.dasherize(tail)}`; } componentToString(name: string): string { diff --git a/src/components/sandbox/BaseSerializer.ts b/src/components/sandbox/BaseSerializer.ts index 545835ad2..c9d52ee0a 100644 --- a/src/components/sandbox/BaseSerializer.ts +++ b/src/components/sandbox/BaseSerializer.ts @@ -36,7 +36,7 @@ export class BaseSerializer { protected isRoot = false; protected state: SerializerState = { element: "", props: { name: "" } }; - constructor(protected properties: ComponentBinding[], protected isOldVersion: boolean = false) {} + constructor(protected properties: ComponentBinding[], protected version: "old" | "new") {} getProperty(name: string): ComponentBinding | undefined { return this.properties.find(p => p.name === name); diff --git a/src/components/sandbox/ReactSerializer.ts b/src/components/sandbox/ReactSerializer.ts index a55f9b9f2..81503cbc5 100644 --- a/src/components/sandbox/ReactSerializer.ts +++ b/src/components/sandbox/ReactSerializer.ts @@ -4,8 +4,8 @@ import { BaseSerializer, Serializer } from "./BaseSerializer"; export class ReactSerializer extends BaseSerializer implements Serializer { public isRoot = false; - constructor(properties: ComponentBinding[], isOldVersion: boolean) { - super(properties, isOldVersion); + constructor(properties: ComponentBinding[], version: "old" | "new") { + super(properties, version); } setIsRoot(isRoot: boolean) { @@ -64,7 +64,7 @@ export class ReactSerializer extends BaseSerializer implements Serializer { } componentNameToString(name: string): string { - if (this.isOldVersion) { + if (this.version === "old") { return name.replace(/^Goab/, "GoA"); } return name; diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx index c873efde5..46fe394df 100644 --- a/src/components/sandbox/Sandbox.tsx +++ b/src/components/sandbox/Sandbox.tsx @@ -3,7 +3,6 @@ import { ReactElement, ReactNode, useContext, useEffect, useState } from "react" import SandboxProperties from "./SandboxProperties"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import { ComponentBinding } from "./ComponentBinding"; -import { LanguageContext } from "./LanguageContext"; import { ReactSerializer } from "./ReactSerializer"; import { AngularSerializer } from "./AngularSerializer"; import { AngularReactiveSerializer } from "./AngularReactiveSerializer"; @@ -11,10 +10,10 @@ import ComponentSerializer from "./ComponentSerializer"; import "./Sandbox.css"; import React from "react"; -import { useVersion } from "@contexts/VersionContext.tsx"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; type Flag = "reactive"; -type ComponentType = "goa" | "goab" | "codesnippet"; +type ComponentType = "goa" | "codesnippet"; type Serializer = (el: any, properties: ComponentBinding[]) => string; interface SandboxProps { @@ -37,23 +36,22 @@ type SandboxViewProps = { }; export const Sandbox = (props: SandboxProps) => { - const lang = useContext(LanguageContext); - const version = useVersion(); + const {language: lang, version} = useContext(LanguageVersionContext); const [formatLang, setFormatLang] = useState(""); const serializers: Record = { - react: (els: ReactElement[], properties) => { - const serializer = new ComponentSerializer(new ReactSerializer(properties, !!version?.length)); + "react": (els: ReactElement[], properties) => { + const serializer = new ComponentSerializer(new ReactSerializer(properties, version)); return serializer.componentsToString(els); }, - angular: (els: ReactElement[], properties) => { - const serializer = new ComponentSerializer(new AngularSerializer(properties, !!version?.length)); + "angular": (els: ReactElement[], properties) => { + const serializer = new ComponentSerializer(new AngularSerializer(properties, version)); return serializer.componentsToString(els); }, "angular-reactive": (els: ReactElement[], properties) => { - const serializer = new ComponentSerializer(new AngularReactiveSerializer(properties, !!version?.length)); + const serializer = new ComponentSerializer(new AngularReactiveSerializer(properties, version)); return serializer.componentsToString(els); }, }; @@ -93,16 +91,11 @@ export const Sandbox = (props: SandboxProps) => { } function SandboxView(props: SandboxViewProps): ReactElement { - return ( -
    -
    - -
    + return
    +
    +
    - ); +
    } return ( @@ -118,7 +111,7 @@ export const Sandbox = (props: SandboxProps) => { )} - {props.note &&
    {props.note}
    } + {props.note && (
    {props.note}
    )} ); }; @@ -128,8 +121,7 @@ type SandboxCodeProps = { lang: string; formatLang: string; serializers: Record; -}; - +} function SandboxCode(p: SandboxCodeProps) { // reactive angular if (p.lang === "angular" && p.props.flags?.includes("reactive")) { @@ -137,26 +129,12 @@ function SandboxCode(p: SandboxCodeProps) { <>

    Event based

    - {!p.props.skipRender && ( - - )} + {!p.props.skipRender && }

    Reactive forms (FormControl)

    - {!p.props.skipRender && ( - - )} + {!p.props.skipRender && } ); } @@ -166,14 +144,7 @@ function SandboxCode(p: SandboxCodeProps) { return ( <> - {!p.props.skipRender && ( - - )} + {!p.props.skipRender && } ); } @@ -183,14 +154,7 @@ function SandboxCode(p: SandboxCodeProps) { return ( <> - {!p.props.skipRender && ( - - )} + {!p.props.skipRender && } ); } @@ -198,28 +162,29 @@ function SandboxCode(p: SandboxCodeProps) { return <>No formatter found for {p.formatLang}; } + // Gets code snippets matching the tags passed in. This allows for Angular reactive components // to be displayed, while hiding the non-reactive ones type AdditionalCodeSnippetsProps = { tags: string[]; sandboxProps: SandboxProps; -}; - +} function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) { const matches = (list: string[]): boolean => { return props.tags.filter(tag => list.includes(tag)).length === list.length; }; - const els = ComponentList({ type: "codesnippet", sandboxProps: props.sandboxProps }).filter( - el => { + const els = ComponentList({type: "codesnippet", sandboxProps: props.sandboxProps}) + .filter(el => { if (el.props.lang === "css") return true; - const componentTags: string[] = Array.isArray(el.props.tags) - ? el.props.tags - : [el.props.tags]; - if (props.tags.length !== componentTags.length) return false; + const componentTags: string[] = + Array.isArray(el.props.tags) + ? el.props.tags + : [el.props.tags]; + if (props.tags.length !== componentTags.length) + return false; return matches(componentTags); - } - ); - return <>{els}; + }); + return <>{els} } // Filters components from within the Sandbox children @@ -227,15 +192,14 @@ function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) { type ComponentListProps = { sandboxProps: SandboxProps; type: ComponentType; -}; - +} function ComponentList(props: ComponentListProps): ReactElement[] { const children = React.Children.toArray(props.sandboxProps.children) as ReactElement[]; const isValidGOAComponent = (el: ReactElement) => typeof el.type === "function" && el.type.name.toLowerCase().startsWith(props.type); const isAllowedInSandbox = (el: ReactElement) => - (typeof el.type === "string" && props.sandboxProps.allow?.includes(el.type)) || - (typeof el.type === "function" && props.sandboxProps.allow?.includes(el.type.name)); + typeof el.type === "string" && props.sandboxProps.allow?.includes(el.type) || + typeof el.type === "function" && props.sandboxProps.allow?.includes(el.type.name); return children.filter( el => React.isValidElement(el) && (isValidGOAComponent(el) || isAllowedInSandbox(el)) ); @@ -248,22 +212,29 @@ type ComponentOutputProps = { type: "angular" | "angular-reactive" | "react"; sandboxProps: SandboxProps; serializer: Serializer; -}; +} function ComponentOutput(props: ComponentOutputProps): ReactElement { let code = props.serializer( - ComponentList({ type: "goab", sandboxProps: props.sandboxProps }), - props.sandboxProps.properties || [] - ); + ComponentList({type: "goa", sandboxProps: props.sandboxProps}) + ,props.sandboxProps.properties || [] + ) // HACK: solve angular template error: If you meant to write the @ character, you should use the "@" HTML entity instead. if (props.type.includes("angular")) { code = code.replace(/@/g, "@"); } // HACK: remove `$1`s that appear only in the prod build - code = code.replace(/\$1/g, ""); + code = code.replace(/\$1/g, "") - return ; + return ( + + ) } + export default Sandbox; diff --git a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx new file mode 100644 index 000000000..d98be6733 --- /dev/null +++ b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx @@ -0,0 +1,71 @@ +import { GoabDropdown, GoabDropdownItem } from "@abgov/react-components"; +import { + ANGULAR_VERSIONS, getVersionedUrlPath, + OLD_ANGULAR_URL_SEGMENT, + OLD_REACT_URL_SEGMENT, REACT_VERSIONS +} from "./version-language-constants.ts"; +import { useLocation, useNavigate } from "react-router-dom"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; + +export const VersionLanguageSwitcher = () => { + const {language, version, setLanguage, setVersion} = useContext(LanguageVersionContext); + const location = useLocation(); + const navigate = useNavigate(); + + const updateURL = (key: "language" | "version", newValue: "old" | "new" | "react" | "angular") => { + const isComponentRoute = + location.pathname.startsWith("/components/") && location.pathname.split("/").length > 2; + let newLanguageValue = language; // fallback value from localStorage + let newVersionValue = version; // fallback value from localStorage + + if (key === "language") newLanguageValue = newValue; + if (key === "version") newVersionValue = newValue; + + const combineSegment = getVersionedUrlPath(newVersionValue, newLanguageValue); + if (isComponentRoute) { + const pathSegments = location.pathname.split("/"); + const componentName = pathSegments[pathSegments.length -1]; + if (OLD_REACT_URL_SEGMENT === combineSegment || OLD_ANGULAR_URL_SEGMENT === combineSegment) { + const newPath = `/components/${combineSegment}/${componentName}${location.hash}`; + navigate(newPath, {replace: true}); + } else { + const newPath = `/components/${componentName}${location.hash}`; + navigate(newPath, {replace: true}); + } + } + } + + const updateLanguage = (newValue: "react" | "angular") => { + setLanguage(newValue); + updateURL("language", newValue); + } + + const updateVersion = (newValue: "old" | "new") => { + setVersion(newValue); + updateURL("version", newValue); + } + + return ( + <> + updateLanguage(e.value as "react" | "angular")}> + + + + + {language === "react" && ( + updateVersion(e.value as "old" | "new")}> + + + + )} + + {language === "angular" && ( + updateVersion(e.value as "old" | "new")}> + + + + )} + + ); +} diff --git a/src/components/version-language-switcher/version-language-constants.ts b/src/components/version-language-switcher/version-language-constants.ts new file mode 100644 index 000000000..f512efd7a --- /dev/null +++ b/src/components/version-language-switcher/version-language-constants.ts @@ -0,0 +1,31 @@ +export type LanguageVersion = "old" | "new"; +export const ANGULAR_VERSIONS = { + OLD: { + label: "v3", + value: "old" + }, + NEW: { + label: "v4", + value: "new" + } +} +export const REACT_VERSIONS = { + OLD: { + label: "v4", + value: "old" + }, + NEW: { + label: "v5", + value: "new" + } +} + +export const LOCAL_STORAGE_LANGUAGE_KEY = "goa-docs-lang"; +export const LOCAL_STORAGE_VERSION_KEY = "goa-docs-version"; + +export const OLD_REACT_URL_SEGMENT = `${REACT_VERSIONS.OLD.label}-react`; +export const OLD_ANGULAR_URL_SEGMENT = `${ANGULAR_VERSIONS.OLD.label}-angular`; + +export const getVersionedUrlPath = (version: string, language: string) => { + return version === "old" ? `${language === "react" ? REACT_VERSIONS.OLD.label : ANGULAR_VERSIONS.OLD.label}-${language}` : ""; +} diff --git a/src/contexts/LanguageVersionContext.tsx b/src/contexts/LanguageVersionContext.tsx new file mode 100644 index 000000000..53118f4af --- /dev/null +++ b/src/contexts/LanguageVersionContext.tsx @@ -0,0 +1,39 @@ +import React, { createContext, useEffect, useState } from "react"; +import { + LanguageVersion, + LOCAL_STORAGE_LANGUAGE_KEY, + LOCAL_STORAGE_VERSION_KEY +} from "@components/version-language-switcher/version-language-constants.ts"; + +interface LanguageVersionContextProps { + language: string; + version: LanguageVersion; + setLanguage: (lang: string) => void; + setVersion: (version: LanguageVersion) => void; +} + +export const LanguageVersionContext = createContext({ + language: "react", + version: "new", + setLanguage: () => {}, + setVersion: () => {}, +}); + +export const LanguageVersionProvider: React.FC<{children: React.ReactNode}> = ({children}) => { + const [language, setLanguage] = useState(() => localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) || "react"); + const [version, setVersion] = useState(() => localStorage.getItem(LOCAL_STORAGE_VERSION_KEY) as LanguageVersion || "new"); + + useEffect(() => { + localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, language); + }, [language]); + + useEffect(() => { + localStorage.setItem(LOCAL_STORAGE_VERSION_KEY, version); + }, [version]); + + return( + + {children} + + ) +} diff --git a/src/contexts/VersionContext.tsx b/src/contexts/VersionContext.tsx deleted file mode 100644 index 61ff1c488..000000000 --- a/src/contexts/VersionContext.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { createContext, useContext, useEffect, useState, ReactNode } from "react"; - -interface VersionContextProps { - version: string | null; -} - -const VersionContext = createContext({ version: null }); - -export const useVersion = () => useContext(VersionContext).version; - -interface VersionProviderProps { - children: ReactNode; -} - -export const VersionProvider: React.FC = ({ children }) => { - const [version, setVersion] = useState(null); - - useEffect(() => { - const updateVersion = () => { - const pathSegments = window.location.pathname.split("/"); - const versionSegment = pathSegments.find(segment => segment.startsWith("v")); - if (versionSegment) { - setVersion(versionSegment); - if (versionSegment.includes("angular")) { - localStorage.setItem("goa-docs-lang", "angular"); - } - if (versionSegment.includes("react")) { - localStorage.setItem("goa-docs-lang", "react"); - } - } else { - setVersion(null); - } - }; - - // Initial call to set the version - updateVersion(); - - // Add event listener for popstate - window.addEventListener("popstate", updateVersion); - - // Cleanup event listener on component unmount - return () => { - window.removeEventListener("popstate", updateVersion); - }; - }, []); - return {children}; -}; diff --git a/src/contexts/VersionFromUrlContext.tsx b/src/contexts/VersionFromUrlContext.tsx new file mode 100644 index 000000000..d4fbda964 --- /dev/null +++ b/src/contexts/VersionFromUrlContext.tsx @@ -0,0 +1,49 @@ +import React, { createContext, useContext, useEffect, useState, ReactNode } from "react"; +import { + LOCAL_STORAGE_LANGUAGE_KEY, + LOCAL_STORAGE_VERSION_KEY, +} from "@components/version-language-switcher/version-language-constants.ts"; + +interface VersionFromUrlContextProps { + version: string | null; +} + +const VersionFromUrlContext = createContext({ version: null }); + +export const useVersionFromUrlContext = () => useContext(VersionFromUrlContext).version; + +interface VersionProviderProps { + children: ReactNode; +} + +export const VersionFromUrlProvider: React.FC = ({ children }) => { + const [versionFromPath, setVersionFromPath] = useState(null); + + useEffect(() => { + const updateVersion = () => { + const pathSegments = window.location.pathname.split("/"); + const versionSegment = pathSegments.find(segment => segment.startsWith("v")); + if (versionSegment) { + setVersionFromPath(versionSegment); + localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, versionSegment.includes("angular") ? "angular" : "react"); + } else { + console.log("Reach versionFromUrl ", pathSegments); + setVersionFromPath(null); + // Fresh, new version + localStorage.setItem(LOCAL_STORAGE_VERSION_KEY, "new"); + } + }; + + // Initial call to set the version + updateVersion(); + + // Add event listener for popstate + window.addEventListener("popstate", updateVersion); + + // Cleanup event listener on component unmount + return () => { + window.removeEventListener("popstate", updateVersion); + }; + }, []); + return {children}; +}; diff --git a/src/examples/accordion/AccordionExamples.tsx b/src/examples/accordion/AccordionExamples.tsx index 3610316e1..45e640d61 100644 --- a/src/examples/accordion/AccordionExamples.tsx +++ b/src/examples/accordion/AccordionExamples.tsx @@ -2,11 +2,14 @@ import { GoabAccordion, GoabBadge, GoabButton } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import "./accordion-example.css"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; -import { useState } from "react"; +import { useContext, useState } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export default function AccordionExamples() { const [open, setOpen] = useState(false); // for accordion group const [accordionStatus, setAccordionStatus] = useState("Show all sections"); + const {version} = useContext(LanguageVersionContext); + const onClick = () => { setOpen(!open); const status = !open ? "Hide all sections" : "Show all sections"; @@ -41,8 +44,9 @@ export default function AccordionExamples() { } `} /> + {/*Angular*/} - `} - /> + />} + + {version === "new" && Review your application + + + + +
    +
    Date of referral
    +
    January 27, 2021
    +
    Work safety concerns
    +
    None
    +
    Type of referral
    +
    Word of mouth, internet search
    +
    Intake received from another site
    +
    Yes
    +
    +     + + +
    +
    Name
    +
    Joan Smith
    +
    Contact preference
    +
    Text message
    +
    +     + `} + />} + {/*React*/} - ; `} - /> - } + + {version === "new" && ; + `} + />} + + {version === "old" && Review your application + + +
    +
    Date of referral
    +
    January 27, 2021
    +
    Work safety concerns
    +
    None
    +
    Type of referral
    +
    Word of mouth, internet search
    +
    Intake received from another site
    +
    Yes
    +
    +     + + +
    +
    Name
    +
    Joan Smith
    +
    Contact preference
    +
    Text message
    +
    +     + `} + />} + + {version === "new" && `} - /> + />}

    Review your application

    - More information on accessibility. `} - /> + />} + + {version === "new" && + {{ accordionStatus }} + + + + To create an account you will need to contact your office admin. + + + + You will need to verify your identity through our two factor authentication in addition to the digital signature. + + + + Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses. + + + + Yes, our digital service is designed with accessibility in mind. More information on accessibility. + + `} + />} + {/*React*/} void) { + const [storedValue, setStoredValue] = useState(() => { + try { + const item = localStorage.getItem(key); + return item ? item : fallbackValue; + } catch (error) { + return fallbackValue; + } + }); + + const setValue = (value: string) => { + try { + setStoredValue(value); + localStorage.setItem(key, value); + // Customized logic + if (callback) { + callback(key, value); + } + } catch (error) { + } + }; + + return [storedValue, setValue] as const; +} + +export default useLocalStorage; diff --git a/src/routes/components/Accordion.tsx b/src/routes/components/Accordion.tsx index d3462c731..98415d583 100644 --- a/src/routes/components/Accordion.tsx +++ b/src/routes/components/Accordion.tsx @@ -15,7 +15,6 @@ import { useState } from "react"; import AccordionExamples from "@examples/accordion/AccordionExamples.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabAccordionHeadingSize } from "@abgov/ui-components-common"; -import { useVersion } from "@contexts/VersionContext.tsx"; // == Page props == const componentName = "Accordion"; @@ -35,7 +34,7 @@ type CastingType = { }; export default function AccordionPage() { - const version = useVersion(); + const [accordionProps, setAccordionProps] = useState({ heading: "Heading", headingSize: "medium", @@ -228,7 +227,7 @@ export default function AccordionPage() { return (
    - + diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx index 909d1746d..1a4b0eaef 100644 --- a/src/routes/components/Components.tsx +++ b/src/routes/components/Components.tsx @@ -1,85 +1,70 @@ -import { GoabBlock, GoabDropdown, GoabDropdownItem, GoabSideMenu } from "@abgov/react-components"; -import { useEffect, useState } from "react"; +import { GoabSideMenu } from "@abgov/react-components"; import { Link, Outlet } from "react-router-dom"; -import { LanguageContext } from "@components/sandbox"; import { SupportInfo } from "@components/support-info/SupportInfo.tsx"; -import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { getVersionedUrlPath } from "@components/version-language-switcher/version-language-constants.ts"; export function Components() { - const [language, setLanguage] = useState(""); + const { language, version } = useContext(LanguageVersionContext); - useEffect(() => { - const lang = localStorage.getItem("goa-docs-lang") || "react"; - setLanguage(lang); - }, []); + const prefixUrl = getVersionedUrlPath(version, language); - function onLanguageChange(event: GoabDropdownOnChangeDetail) { - const lang = event.value; - setLanguage(lang || "react"); - localStorage.setItem("goa-docs-lang", lang || "react"); - } + const getUrl = (path: string) => { + return prefixUrl.length > 0 ? `${prefixUrl}/${path}` : path; + }; return ( - -
    -
    - - - - - - - - - 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 - -
    - -
    - - -
    +
    +
    + + All + Accordion + Badge + Block + Button + Button group + Callout + Checkbox + Chip + Container + Date picker + Details + Divider + Dropdown + File uploader + 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 area + Tooltip +
    - + +
    + + +
    +
    ); } diff --git a/src/routes/home.tsx b/src/routes/home.tsx index 7918bd8e3..82a0a6ab0 100644 --- a/src/routes/home.tsx +++ b/src/routes/home.tsx @@ -9,10 +9,11 @@ import { GoabSpacer, } from "@abgov/react-components"; import "./home.css"; -import { MAX_CONTENT_WIDTH } from "@routes/root"; import CardLite from "../components/card-lite/CardLite"; import { Link, useNavigate } from "react-router-dom"; import { SupportInfo } from '../components/support-info/SupportInfo'; +import { MAX_CONTENT_WIDTH } from "../global-constants.ts"; + const HomePage = () => { const navigate = useNavigate(); return ( diff --git a/src/routes/root.tsx b/src/routes/root.tsx index 0ff952594..5126ac34e 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -2,7 +2,7 @@ import { GoabAppFooter, GoabAppFooterMetaSection, GoabAppFooterNavSection, - GoabAppHeader, GoabDropdown, GoabDropdownItem, + GoabAppHeader, GoabMicrositeHeader, GoabOneColumnLayout } from "@abgov/react-components"; @@ -12,10 +12,10 @@ import { Link, Outlet } from "react-router-dom"; import "./root.css"; import { useLocation } from "react-router-dom"; -import { useVersion } from "@contexts/VersionContext.tsx"; - - -export const MAX_CONTENT_WIDTH = "1360px"; +import { + MAX_CONTENT_WIDTH, +} from "../global-constants.ts"; +import { VersionLanguageSwitcher } from "@components/version-language-switcher/VersionLanguageSwitcher.tsx"; function ScrollToTop() { const { pathname } = useLocation(); @@ -28,68 +28,16 @@ function ScrollToTop() { } export default function Root() { - const version = useVersion(); - const [language, setLanguage] = useState(""); + const [visible, setVisibility] = useState(false); + useEffect(() => { setTimeout(() => { setVisibility(true); }, 50); }); - useEffect(() => { - const lang = localStorage.getItem("goa-docs-lang") || "react"; - setLanguage(lang); - }, []); - - const switchVersion = (version: string) => { - console.log(version); - } - const switchLanguage = (lang: string) => { - setLanguage(lang || "react"); - localStorage.setItem("goa-docs-lang", lang || "react"); - } - - const getCurrentVersion = () => { - if (version && version.includes("angular")) { - return "v3"; - } - if (version && version.includes("react")) { - return "v4"; - } - if (language === "react") { - return "v5"; - } - if (language === "angular") { - return "v4"; - } - } - - const versionSwitcher = () => { - return ( - <> - {/*TODO: We can make it as a link and a pop over so it doesn't override the menu item below*/} - switchLanguage(e.value as string)}> - - - - {language === "react" && ( - switchVersion(e.value as string)}> - - - - )} - {language === "angular" && ( - switchVersion(e.value as string)}> - - - - )} - - ); - } - return (
    @@ -99,7 +47,7 @@ export default function Root() { type={"live"} feedbackUrl="https://forms.microsoft.com/r/8Zp7zSJS6W" maxContentWidth={MAX_CONTENT_WIDTH} - version={versionSwitcher()} + version={} /> Get started From 6c2b7f17ccb2457aaebe7894d01449044fb7c3d6 Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Tue, 12 Nov 2024 11:09:31 -0700 Subject: [PATCH 04/15] feat(#1835): update code snippets vs different versions & languages --- package-lock.json | 770 +++++++++++++++--- package.json | 6 +- src/App.tsx | 37 +- src/components/code-snippet/CodeSnippet.tsx | 60 +- src/components/components-router.tsx | 134 --- src/components/mock-modal/Modal.tsx | 4 +- .../sandbox/AngularReactiveSerializer.ts | 70 +- src/components/sandbox/AngularSerializer.ts | 27 +- .../AngularTemplateDrivenSerializer.ts | 26 + src/components/sandbox/BaseSerializer.ts | 5 + src/components/sandbox/Sandbox.tsx | 21 +- .../VersionLanguageSwitcher.tsx | 8 +- .../version-language-constants.ts | 1 + src/contexts/LanguageVersionContext.tsx | 7 +- src/examples/button/ButtonExamples.tsx | 168 ++++ src/examples/checkbox/CheckboxExamples.tsx | 48 +- src/examples/container/ContainerExamples.tsx | 307 ++++++- src/examples/dropdown/DropdownExamples.tsx | 322 +++++++- .../MicrositeHeaderExamples.tsx | 185 ++++- src/examples/modal/ModalExamples.tsx | 675 ++++++++++++--- .../question-page/QuestionPageExamples.tsx | 78 +- src/examples/radio/RadioExamples.tsx | 147 ++-- .../result-page/ResultPageExamples.tsx | 67 +- src/examples/start-page/StartPageExamples.tsx | 86 +- src/examples/text-field/TextFieldExamples.tsx | 11 +- src/routes/components/AppFooter.tsx | 152 +++- src/routes/components/AppHeader.tsx | 169 +++- src/routes/components/Badge.tsx | 39 +- src/routes/components/Block.tsx | 31 +- src/routes/components/Button.tsx | 165 ++-- src/routes/components/ButtonGroup.tsx | 31 +- src/routes/components/Callout.tsx | 52 +- src/routes/components/Checkbox.tsx | 136 +++- src/routes/components/Container.tsx | 73 +- src/routes/components/DatePicker.tsx | 264 +++++- src/routes/components/Details.tsx | 34 +- src/routes/components/Divider.tsx | 17 +- src/routes/components/Dropdown.tsx | 196 ++++- src/routes/components/FileUploader.tsx | 143 +++- src/routes/components/FormItemPage.tsx | 257 ++++-- src/routes/components/FormStepper.tsx | 335 ++++++-- src/routes/components/Grid.tsx | 29 +- src/routes/components/HeroBanner.tsx | 96 ++- src/routes/components/IconButton.tsx | 58 +- src/routes/components/Icons.tsx | 63 +- src/routes/components/List.tsx | 62 +- src/routes/components/MicrositeHeader.tsx | 52 +- src/routes/components/Modal.tsx | 77 +- src/routes/components/Notificationbanner.tsx | 28 +- src/routes/components/Pagination.tsx | 459 ++++++++++- src/routes/components/Popover.tsx | 116 ++- src/routes/components/ProgressIndicator.tsx | 38 +- src/routes/components/Radio.tsx | 245 +++++- src/routes/components/SideMenu.tsx | 142 +++- src/routes/components/Skeleton.tsx | 42 +- src/routes/components/Spacer.tsx | 23 +- src/routes/components/Table.tsx | 202 ++++- src/routes/components/Tabs.tsx | 81 +- src/routes/components/TextArea.tsx | 183 ++++- src/routes/components/TextField.tsx | 255 +++++- src/routes/components/Tooltip.tsx | 35 +- src/routes/patterns/PatternsLayout.tsx | 70 +- src/versioned-router.tsx | 163 ++++ 63 files changed, 6709 insertions(+), 1174 deletions(-) delete mode 100644 src/components/components-router.tsx create mode 100644 src/components/sandbox/AngularTemplateDrivenSerializer.ts create mode 100644 src/examples/button/ButtonExamples.tsx create mode 100644 src/versioned-router.tsx diff --git a/package-lock.json b/package-lock.json index 94579767f..9561cb049 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/react-components", - "@abgov/ui-components-common": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/common", - "@abgov/web-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/web-components", + "@abgov/react-components": "6.0.0-alpha.1", + "@abgov/ui-components-common": "1.0.0-alpha.4", + "@abgov/web-components": "1.17.0-alpha.130", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "octokit": "^4.0.2", @@ -33,33 +33,9 @@ "vite": "^5.4.6" } }, - "../ui-components/dist/libs/common": { - "name": "@abgov/ui-components-common", - "version": "0.0.0" - }, - "../ui-components/dist/libs/react-components": { - "name": "@abgov/react-components", - "version": "0.0.1", - "license": "Apache-2.0", - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, "../ui-components/dist/libs/ui-commons": { "extraneous": true }, - "../ui-components/dist/libs/web-components": { - "name": "@abgov/web-components", - "version": "0.0.0", - "license": "Apache-2.0", - "peerDependencies": { - "@sveltejs/vite-plugin-svelte": "3.x", - "glob": "10.x", - "svelte": "4.x" - } - }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", @@ -70,16 +46,42 @@ } }, "node_modules/@abgov/react-components": { - "resolved": "../ui-components/dist/libs/react-components", - "link": true + "version": "6.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.0.0-alpha.1.tgz", + "integrity": "sha512-LmeejJP4NtKQ2XIoqGqp286S3knskeSAsG2OV6lsb5QikH+/tUSJmWN8W6+WFpYjPfvEM8kGDzNV8RAvQLDC5w==", + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } }, "node_modules/@abgov/ui-components-common": { - "resolved": "../ui-components/dist/libs/common", - "link": true + "version": "1.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.0.0-alpha.4.tgz", + "integrity": "sha512-oJiY3k67GHTwNBQHVGDLKlt7tIUb2VY6uzesDFgnlQKs0LovxH+2ClOwsRmwIOFwZtUePPCugXRneToESaDyhQ==" }, "node_modules/@abgov/web-components": { - "resolved": "../ui-components/dist/libs/web-components", - "link": true + "version": "1.17.0-alpha.130", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.17.0-alpha.130.tgz", + "integrity": "sha512-nOFreTjcFdIwiznfPHHH3ThWLMqv/CLQprDzJyp2PpXTPFkERXUV3NzMANPk0FOZGEVy/pxbA0u5bYPQncK9wA==", + "peerDependencies": { + "@sveltejs/vite-plugin-svelte": "3.x", + "glob": "10.x", + "svelte": "4.x" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", @@ -88,7 +90,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "aix" @@ -104,7 +105,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "android" @@ -120,7 +120,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "android" @@ -136,7 +135,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "android" @@ -152,7 +150,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -168,7 +165,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -184,7 +180,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -200,7 +195,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -216,7 +210,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -232,7 +225,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -248,7 +240,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "linux" @@ -264,7 +255,6 @@ "cpu": [ "loong64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -280,7 +270,6 @@ "cpu": [ "mips64el" ], - "dev": true, "optional": true, "os": [ "linux" @@ -296,7 +285,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -312,7 +300,6 @@ "cpu": [ "riscv64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -328,7 +315,6 @@ "cpu": [ "s390x" ], - "dev": true, "optional": true, "os": [ "linux" @@ -344,7 +330,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -360,7 +345,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "netbsd" @@ -376,7 +360,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "openbsd" @@ -392,7 +375,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "sunos" @@ -408,7 +390,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -424,7 +405,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "win32" @@ -440,7 +420,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -553,6 +532,98 @@ "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", "dev": true }, + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "peer": true, + "dependencies": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "peer": true, + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz", + "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==", + "peer": true, + "dependencies": { + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "peer": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "peer": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "peer": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "peer": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -903,6 +974,16 @@ "node": ">= 18" } }, + "node_modules/@pkgjs/parseargs": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", + "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "optional": true, + "peer": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@remix-run/router": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", @@ -918,7 +999,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "android" @@ -931,7 +1011,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "android" @@ -944,7 +1023,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -957,7 +1035,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -970,7 +1047,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -983,7 +1059,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -996,7 +1071,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1009,7 +1083,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1022,7 +1095,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1035,7 +1107,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1048,7 +1119,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1061,7 +1131,6 @@ "cpu": [ "riscv64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1074,7 +1143,6 @@ "cpu": [ "s390x" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1087,7 +1155,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1100,7 +1167,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1113,7 +1179,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -1126,7 +1191,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "win32" @@ -1139,12 +1203,50 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "win32" ] }, + "node_modules/@sveltejs/vite-plugin-svelte": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz", + "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==", + "peer": true, + "dependencies": { + "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0", + "debug": "^4.3.4", + "deepmerge": "^4.3.1", + "kleur": "^4.1.5", + "magic-string": "^0.30.10", + "svelte-hmr": "^0.16.0", + "vitefu": "^0.2.5" + }, + "engines": { + "node": "^18.0.0 || >=20" + }, + "peerDependencies": { + "svelte": "^4.0.0 || ^5.0.0-next.0", + "vite": "^5.0.0" + } + }, + "node_modules/@sveltejs/vite-plugin-svelte-inspector": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz", + "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==", + "peer": true, + "dependencies": { + "debug": "^4.3.4" + }, + "engines": { + "node": "^18.0.0 || >=20" + }, + "peerDependencies": { + "@sveltejs/vite-plugin-svelte": "^3.0.0", + "svelte": "^4.0.0 || ^5.0.0-next.0", + "vite": "^5.0.0" + } + }, "node_modules/@swc/core": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.8.tgz", @@ -1366,8 +1468,7 @@ "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", - "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", - "dev": true + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==" }, "node_modules/@types/history": { "version": "4.7.11", @@ -1384,14 +1485,12 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "dev": true + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { "version": "18.2.67", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz", "integrity": "sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1431,8 +1530,7 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/semver": { "version": "7.5.8", @@ -1650,7 +1748,6 @@ "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", - "dev": true, "bin": { "acorn": "bin/acorn" }, @@ -1687,7 +1784,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, "engines": { "node": ">=8" } @@ -1696,7 +1792,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -1713,6 +1808,15 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "node_modules/aria-query": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz", + "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==", + "peer": true, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/array-union": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", @@ -1722,11 +1826,19 @@ "node": ">=8" } }, + "node_modules/axobject-query": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", + "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==", + "peer": true, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/before-after-hook": { "version": "3.0.2", @@ -1785,11 +1897,23 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/code-red": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", + "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", + "peer": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15", + "@types/estree": "^1.0.1", + "acorn": "^8.10.0", + "estree-walker": "^3.0.3", + "periscopic": "^3.1.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -1800,8 +1924,7 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/concat-map": { "version": "0.0.1", @@ -1813,7 +1936,6 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -1823,17 +1945,28 @@ "node": ">= 8" } }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "peer": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -1852,6 +1985,15 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1876,11 +2018,22 @@ "node": ">=6.0.0" } }, + "node_modules/eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "peer": true + }, + "node_modules/emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "peer": true + }, "node_modules/esbuild": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", - "dev": true, "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -2120,6 +2273,15 @@ "node": ">=4.0" } }, + "node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "peer": true, + "dependencies": { + "@types/estree": "^1.0.0" + } + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -2244,6 +2406,22 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/foreground-child": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", + "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "peer": true, + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2254,7 +2432,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -2264,6 +2441,26 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "peer": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -2276,6 +2473,30 @@ "node": ">=10.13.0" } }, + "node_modules/glob/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "peer": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/glob/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "peer": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/globals": { "version": "13.24.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", @@ -2393,6 +2614,15 @@ "node": ">=0.10.0" } }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "peer": true, + "engines": { + "node": ">=8" + } + }, "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", @@ -2423,11 +2653,34 @@ "node": ">=8" } }, + "node_modules/is-reference": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz", + "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==", + "peer": true, + "dependencies": { + "@types/estree": "^1.0.6" + } + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "dev": true + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" + }, + "node_modules/jackspeak": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "peer": true, + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + }, + "optionalDependencies": { + "@pkgjs/parseargs": "^0.11.0" + } }, "node_modules/js-tokens": { "version": "4.0.0", @@ -2473,6 +2726,15 @@ "json-buffer": "3.0.1" } }, + "node_modules/kleur": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", + "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -2486,6 +2748,12 @@ "node": ">= 0.8.0" } }, + "node_modules/locate-character": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", + "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", + "peer": true + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -2523,6 +2791,21 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, + "node_modules/magic-string": { + "version": "0.30.17", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", + "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==", + "peer": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "peer": true + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -2557,17 +2840,24 @@ "node": "*" } }, + "node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "peer": true, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -2669,6 +2959,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "peer": true + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -2703,11 +2999,26 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, "engines": { "node": ">=8" } }, + "node_modules/path-scurry": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "peer": true, + "dependencies": { + "lru-cache": "^10.2.0", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" + }, + "engines": { + "node": ">=16 || 14 >=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -2717,11 +3028,21 @@ "node": ">=8" } }, + "node_modules/periscopic": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", + "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==", + "peer": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^3.0.0", + "is-reference": "^3.0.0" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", - "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -2739,7 +3060,6 @@ "version": "8.4.47", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", - "dev": true, "funding": [ { "type": "opencollective", @@ -2924,7 +3244,6 @@ "version": "4.24.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz", "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==", - "dev": true, "dependencies": { "@types/estree": "1.0.6" }, @@ -3019,7 +3338,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, "dependencies": { "shebang-regex": "^3.0.0" }, @@ -3031,11 +3349,22 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, "engines": { "node": ">=8" } }, + "node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "peer": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -3049,16 +3378,92 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, "engines": { "node": ">=0.10.0" } }, + "node_modules/string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "peer": true, + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "peer": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "peer": true + }, + "node_modules/string-width/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/string-width/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "peer": true, + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -3090,6 +3495,43 @@ "node": ">=8" } }, + "node_modules/svelte": { + "version": "4.2.19", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz", + "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==", + "peer": true, + "dependencies": { + "@ampproject/remapping": "^2.2.1", + "@jridgewell/sourcemap-codec": "^1.4.15", + "@jridgewell/trace-mapping": "^0.3.18", + "@types/estree": "^1.0.1", + "acorn": "^8.9.0", + "aria-query": "^5.3.0", + "axobject-query": "^4.0.0", + "code-red": "^1.0.3", + "css-tree": "^2.3.1", + "estree-walker": "^3.0.3", + "is-reference": "^3.0.1", + "locate-character": "^3.0.0", + "magic-string": "^0.30.4", + "periscopic": "^3.1.0" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/svelte-hmr": { + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz", + "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==", + "peer": true, + "engines": { + "node": "^12.20 || ^14.13.1 || >= 16" + }, + "peerDependencies": { + "svelte": "^3.19.0 || ^4.0.0" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -3189,7 +3631,6 @@ "version": "5.4.10", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz", "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==", - "dev": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", @@ -3244,11 +3685,24 @@ } } }, + "node_modules/vitefu": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz", + "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==", + "peer": true, + "peerDependencies": { + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -3259,6 +3713,100 @@ "node": ">= 8" } }, + "node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "peer": true, + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "peer": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "peer": true + }, + "node_modules/wrap-ansi-cjs/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "peer": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/wrap-ansi/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/wrap-ansi/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/wrap-ansi/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "peer": true, + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index 6ba755ae1..61f9f3607 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/react-components", - "@abgov/web-components": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/web-components", - "@abgov/ui-components-common": "/Users/thytran142/WebstormProjects/ui-components/dist/libs/common", + "@abgov/react-components": "6.0.0-alpha.1", + "@abgov/web-components": "1.17.0-alpha.130", + "@abgov/ui-components-common": "1.0.0-alpha.4", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "octokit": "^4.0.2", diff --git a/src/App.tsx b/src/App.tsx index 24ed2ab55..dfe5bdf69 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import { createBrowserRouter, createRoutesFromElements, } from "react-router-dom"; - +import "@abgov/ui-components-common"; import "@abgov/web-components"; import Root from "@routes/root"; @@ -57,19 +57,8 @@ import ErrorMessagesPage from "@routes/content/ErrorMessages"; import HelperTextPage from "@routes/content/HelperText"; import UserExperienceGuidelinesPage from "@routes/get-started/UserExperienceGuidelines"; -// Patterns Pages - -import PatternsLayout from "@routes/patterns/PatternsLayout"; -import LayoutPage from "@routes/patterns/LayoutPage"; -import PatternsOverviewPage from "@routes/patterns/PatternsOverview"; -import SimpleFormPage from "@routes/patterns/SimpleFormPage"; -import StartPage from "@routes/patterns/StartPage"; -import TaskListPage from "@routes/patterns/TaskListPage"; -import QuestionPage from "@routes/patterns/QuestionPage"; -import ReviewPage from "@routes/patterns/ReviewPage"; -import ResultPage from "@routes/patterns/ResultPage"; import { VersionFromUrlProvider } from "@contexts/VersionFromUrlContext.tsx"; -import { ComponentsRouter } from "@components/components-router.tsx"; +import { ComponentsRouter, PatternsRouter } from "./versioned-router"; import ComponentNotFound from "@routes/not-found/NotFound.tsx"; import { LanguageVersionProvider } from "@contexts/LanguageVersionContext.tsx"; @@ -127,16 +116,18 @@ const router = createBrowserRouter( } /> - } errorElement={}> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + }> + + {/*} errorElement={}>*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/**/} ) ); diff --git a/src/components/code-snippet/CodeSnippet.tsx b/src/components/code-snippet/CodeSnippet.tsx index 625832ce9..a3fa35e8f 100644 --- a/src/components/code-snippet/CodeSnippet.tsx +++ b/src/components/code-snippet/CodeSnippet.tsx @@ -1,4 +1,4 @@ -import { FC, ReactElement, ReactNode, useEffect, useRef, useState } from "react"; +import { FC, ReactElement, ReactNode, useContext, useEffect, useRef, useState } from "react"; import "./CodeSnippet.css"; import { GoabButton, GoabIconButton, GoabTooltip } from "@abgov/react-components"; @@ -10,6 +10,7 @@ import html from "highlight.js/lib/languages/xml"; import css from "highlight.js/lib/languages/css"; import "highlight.js/styles/github.css"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; type Language = "typescript" | "javascript" | "tsx" | "jsx" | "html" | "css" | string; @@ -23,7 +24,8 @@ interface Props { tags?: string[] | string; } -export const CodeSnippet: FC = ({ lang, allowCopy, code, children }) => { +export const CodeSnippet: FC = ({ lang, allowCopy, code, children, tags }) => { + const {language} = useContext(LanguageVersionContext); const [output, setOutput] = useState(""); const [isCopied, setIsCopied] = useState(false); const [isExpanded, setIsExpanded] = useState(false); @@ -105,33 +107,37 @@ export const CodeSnippet: FC = ({ lang, allowCopy, code, children }) => { } return ( -
    + tags?.includes(language) && ( + 
             {output}
    - {showMore && !isExpanded &&
    } - {showMore && ( -
    - setIsExpanded(!isExpanded)}> - Show {isExpanded ? "less" : "more"} - -
    - )} - - {allowCopy && ( -
    - - - -
    - )} -
    + {showMore && !isExpanded &&
    } + {showMore && ( +
    + setIsExpanded(!isExpanded)} + > + Show {isExpanded ? "less" : "more"} + +
    + )} + + {allowCopy && ( +
    + + + +
    + )} +
    + ) ); }; diff --git a/src/components/components-router.tsx b/src/components/components-router.tsx deleted file mode 100644 index ab721d602..000000000 --- a/src/components/components-router.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { Route, Routes, useParams } from "react-router-dom"; -import ComponentsPage from "@routes/components/Components.tsx"; -import ComponentNotFoundPage from "@routes/not-found/NotFound.tsx"; -import AllComponentsPage from "@routes/components/AllComponents.tsx"; -import React from "react"; -import AccordionPage from "@routes/components/Accordion.tsx"; -import BadgePage from "@routes/components/Badge.tsx"; -import BlockPage from "@routes/components/Block.tsx"; -import ButtonPage from "@routes/components/Button.tsx"; -import ButtonGroupPage from "@routes/components/ButtonGroup.tsx"; -import CalloutPage from "@routes/components/Callout.tsx"; -import CheckboxPage from "@routes/components/Checkbox.tsx"; -import ChipPage from "@routes/components/Chip.tsx"; -import ContainerPage from "@routes/components/Container.tsx"; -import DatePickerPage from "@routes/components/DatePicker.tsx"; -import DetailsPage from "@routes/components/Details.tsx"; -import DividerPage from "@routes/components/Divider.tsx"; -import DropdownPage from "@routes/components/Dropdown.tsx"; -import FileUploaderPage from "@routes/components/FileUploader.tsx"; -import FormItemPage from "@routes/components/FormItemPage.tsx"; -import FormStepperPage from "@routes/components/FormStepper.tsx"; -import GridPage from "@routes/components/Grid.tsx"; -import HeroBannerPage from "@routes/components/HeroBanner.tsx"; -import IconsPage from "@routes/components/Icons.tsx"; -import IconButtonPage from "@routes/components/IconButton.tsx"; -import TextFieldPage from "@routes/components/TextField.tsx"; -import ListPage from "@routes/components/List.tsx"; -import MicrositeHeaderPage from "@routes/components/MicrositeHeader.tsx"; -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 RadioPage from "@routes/components/Radio.tsx"; -import SideMenuPage from "@routes/components/SideMenu.tsx"; -import SkeletonPage from "@routes/components/Skeleton.tsx"; -import SpacerPage from "@routes/components/Spacer.tsx"; -import TablePage from "@routes/components/Table.tsx"; -import TabsPage from "@routes/components/Tabs.tsx"; -import TextAreaPage from "@routes/components/TextArea.tsx"; -import TooltipPage from "@routes/components/Tooltip.tsx"; -import AppHeaderPage from "@routes/components/AppHeader.tsx"; -import AppFooterPage from "@routes/components/AppFooter.tsx"; -import { - OLD_ANGULAR_URL_SEGMENT, - OLD_REACT_URL_SEGMENT -} from "@components/version-language-switcher/version-language-constants.ts"; - -const componentPaths = { - accordion: , - badge: , - block: , - button: , - "button-group": , - callout: , - checkbox: , - chip: , - container: , - "date-picker": , - details: , - divider: , - dropdown: , - "file-uploader": , - "form-item": , - "form-stepper": , - grid: , - "hero-banner": , - icons: , - "icon-button": , - input: , - list: , - "microsite-header": , - modal: , - "notification-banner": , - pagination: , - popover: , - "progress-indicator": , - radio: , - "side-menu": , - "skeleton-loader": , - spacer: , - table: , - tabs: , - "text-area": , - tooltip: , - "text-field": , - header: , - footer: , -} - -const ComponentRoute: React.FC = () => { - const { component } = useParams<{ component: string }>(); - console.log("ComponentRoute ", component); - const Component = componentPaths[component as keyof typeof componentPaths] || ; - return Component; -}; - -const VersionedComponentRoute: React.FC = () => { - const { version, component } = useParams<{ version: string, component: string }>(); - console.log("VersionComponentRouter func", version, component); - if (!version || !component) { - return ; - } - const supportedVersions = [`${OLD_ANGULAR_URL_SEGMENT}`, OLD_REACT_URL_SEGMENT]; - if (!supportedVersions.includes(version)) { - return ; - } - - const getComponent = (componentName: keyof typeof componentPaths) => { - return componentPaths[componentName] || ; - } - - return getComponent(component as keyof typeof componentPaths); -} - -export const ComponentsRouter = () => { - return ( - - } - errorElement={}> - {/* Non-versioned paths components */} - } /> - } - /> - {/* Versioned paths components */} - } /> - - - ); -} diff --git a/src/components/mock-modal/Modal.tsx b/src/components/mock-modal/Modal.tsx index b99114408..ae65f9ce5 100644 --- a/src/components/mock-modal/Modal.tsx +++ b/src/components/mock-modal/Modal.tsx @@ -11,7 +11,7 @@ interface Props { children: ReactNode; } -export function GoAModal({ heading, calloutVariant, children }: Props) { +export function GoabModal({ heading, calloutVariant, children }: Props) { return (
    {calloutVariant && ( @@ -27,4 +27,4 @@ export function GoAModal({ heading, calloutVariant, children }: Props) { ); } -export default GoAModal; +export default GoabModal; diff --git a/src/components/sandbox/AngularReactiveSerializer.ts b/src/components/sandbox/AngularReactiveSerializer.ts index 661f28b0e..36e320879 100644 --- a/src/components/sandbox/AngularReactiveSerializer.ts +++ b/src/components/sandbox/AngularReactiveSerializer.ts @@ -3,18 +3,18 @@ import { BaseSerializer, Serializer, SerializerState } from "./BaseSerializer"; import { LanguageVersion } from "@components/version-language-switcher/version-language-constants.ts"; const ReactiveComponents = [ - "goa-input", - "goa-textarea", - "goa-dropdown", - "goa-checkbox", - "goa-radio-group", - "goa-date-picker", + "goab-input", + "goab-textarea", + "goab-dropdown", + "goab-checkbox", + "goab-radio-group", + "goab-date-picker", ]; export class AngularReactiveSerializer extends BaseSerializer implements Serializer { public isRoot = false; private nativeEls = - "div span p br header footer blockquote input textarea a button h2 h2 h3 h4 img label ul li ol hr section dt dl dd".split( + "div form span p br header footer blockquote input textarea a button h2 h2 h3 h4 h5 h6 img label ul li ol hr section dt dl dd".split( " " ); @@ -39,6 +39,10 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali return ""; } + if (this.version === "new" && name === "onClick") { + return `(${name})="${name}()"`; + } + let _name = name.replace(/^on/, ""); _name = _name.substring(0, 1).toLowerCase() + _name.substring(1); @@ -46,7 +50,7 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali } stringToProp(name: string, item: string): string { - if (ReactiveComponents.includes(this.state.element) && name === "value") { + if (ReactiveComponents.includes(this.state.element) && name === "value" && this.version === "old") { return `goaValue`; } if (this.isDynamic(name)) { @@ -54,7 +58,8 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali } if (item === "") return ""; if (name === "className") name = "class"; - return `${name.toLowerCase()}="${item}"`; + + return `${this.version === "old" ? name.toLowerCase() : name}="${item}"`; } dateToProp(name: string, item: Date): string { @@ -65,18 +70,18 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali if (this.isDynamic(name)) { return this.#dynamicProp(name); } - return `${name.toLowerCase()}="${item}"`; + return `${this.version === "old" ? name.toLowerCase() : `[${name}]`}="${item}"`; } booleanToProp(propName: string, propValue: boolean): string { - if (ReactiveComponents.includes(this.state.element) && propName === "checked") { + if (this.version === "old" && ReactiveComponents.includes(this.state.element) && propName === "checked") { return `goaChecked`; } if (this.isDynamic(propName)) { return this.#dynamicProp(propName); } if (!propValue) return ""; - return `${propName.toLowerCase()}="${propValue}"`; + return this.version === "old" ? `${propName.toLowerCase()}="${propValue}"` : `[${propName.toLowerCase()}]="${propValue}"`; } funcToProp(name: string, _item: Object): string { @@ -108,30 +113,41 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali return `<${name} />`; } - addReactiveProperties(props: string, propName: string): string { - const additionalProps = `[formControl]="${propName}FormCtrl" [value]="${propName}FormCtrl.value"`; - props = props ? `${props} ${additionalProps}` : additionalProps; - return props; - } - modifyProps(props: string, propName: string, elementType: string): string { if (ReactiveComponents.includes(elementType)) { - const additionalProps = `[formControl]="${propName}FormCtrl" [value]="${propName}FormCtrl.value"`; + const additionalProps = + this.version === "old" + ? `[formControl]="${propName}FormCtrl" [value]="${propName}FormCtrl.value"` + : `formControlName="${propName}"`; props = props ? `${props} ${additionalProps}` : additionalProps; } return props; } postProcess(children: string): string { - if (children.startsWith(" string; @@ -54,6 +55,11 @@ export const Sandbox = (props: SandboxProps) => { const serializer = new ComponentSerializer(new AngularReactiveSerializer(properties, version)); return serializer.componentsToString(els); }, + + "angular-template-driven": (els: ReactElement[], properties) => { + const serializer = new ComponentSerializer(new AngularTemplateDrivenSerializer(properties, version)); + return serializer.componentsToString(els); + } }; const formatMap: Record = { @@ -135,6 +141,16 @@ function SandboxCode(p: SandboxCodeProps) { {!p.props.skipRender && } + + {/*If flags have reactive, it means that the possibility we have template-driven as well*/} + + {p.props.flags?.includes("template-driven") && ( + <> +

    Template driven (ngModel)

    + + {!p.props.skipRender && } + + )} ); } @@ -209,7 +225,7 @@ function ComponentList(props: ComponentListProps): ReactElement[] { // This allows type ComponentOutputProps = { formatLang: string; - type: "angular" | "angular-reactive" | "react"; + type: "angular" | "angular-reactive" | "angular-template-driven" | "react"; sandboxProps: SandboxProps; serializer: Serializer; } @@ -230,6 +246,7 @@ function ComponentOutput(props: ComponentOutputProps): ReactElement { return ( diff --git a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx index d98be6733..6f3bbb592 100644 --- a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx +++ b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx @@ -1,6 +1,6 @@ import { GoabDropdown, GoabDropdownItem } from "@abgov/react-components"; import { - ANGULAR_VERSIONS, getVersionedUrlPath, + ANGULAR_VERSIONS, getVersionedUrlPath, Language, LanguageVersion, OLD_ANGULAR_URL_SEGMENT, OLD_REACT_URL_SEGMENT, REACT_VERSIONS } from "./version-language-constants.ts"; @@ -13,14 +13,14 @@ export const VersionLanguageSwitcher = () => { const location = useLocation(); const navigate = useNavigate(); - const updateURL = (key: "language" | "version", newValue: "old" | "new" | "react" | "angular") => { + const updateURL = (key: "language" | "version", newValue: LanguageVersion | Language) => { const isComponentRoute = location.pathname.startsWith("/components/") && location.pathname.split("/").length > 2; let newLanguageValue = language; // fallback value from localStorage let newVersionValue = version; // fallback value from localStorage - if (key === "language") newLanguageValue = newValue; - if (key === "version") newVersionValue = newValue; + if (key === "language") newLanguageValue = newValue as Language; + if (key === "version") newVersionValue = newValue as LanguageVersion; const combineSegment = getVersionedUrlPath(newVersionValue, newLanguageValue); if (isComponentRoute) { diff --git a/src/components/version-language-switcher/version-language-constants.ts b/src/components/version-language-switcher/version-language-constants.ts index f512efd7a..8b8f27b5b 100644 --- a/src/components/version-language-switcher/version-language-constants.ts +++ b/src/components/version-language-switcher/version-language-constants.ts @@ -1,4 +1,5 @@ export type LanguageVersion = "old" | "new"; +export type Language = "react" | "angular"; export const ANGULAR_VERSIONS = { OLD: { label: "v3", diff --git a/src/contexts/LanguageVersionContext.tsx b/src/contexts/LanguageVersionContext.tsx index 53118f4af..18ecf70f7 100644 --- a/src/contexts/LanguageVersionContext.tsx +++ b/src/contexts/LanguageVersionContext.tsx @@ -1,14 +1,15 @@ import React, { createContext, useEffect, useState } from "react"; import { + Language, LanguageVersion, LOCAL_STORAGE_LANGUAGE_KEY, LOCAL_STORAGE_VERSION_KEY } from "@components/version-language-switcher/version-language-constants.ts"; interface LanguageVersionContextProps { - language: string; + language: Language; version: LanguageVersion; - setLanguage: (lang: string) => void; + setLanguage: (lang: Language) => void; setVersion: (version: LanguageVersion) => void; } @@ -20,7 +21,7 @@ export const LanguageVersionContext = createContext }); export const LanguageVersionProvider: React.FC<{children: React.ReactNode}> = ({children}) => { - const [language, setLanguage] = useState(() => localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) || "react"); + const [language, setLanguage] = useState(() => (localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) || "react") as Language); const [version, setVersion] = useState(() => localStorage.getItem(LOCAL_STORAGE_VERSION_KEY) as LanguageVersion || "new"); useEffect(() => { diff --git a/src/examples/button/ButtonExamples.tsx b/src/examples/button/ButtonExamples.tsx new file mode 100644 index 000000000..822ef878f --- /dev/null +++ b/src/examples/button/ButtonExamples.tsx @@ -0,0 +1,168 @@ +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabBlock, GoabButton, GoabButtonGroup, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, + GoabInput +} from "@abgov/react-components"; +import GoabModal from "@components/mock-modal/Modal.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; + +export const ButtonExamples = () => { + const {version} = useContext(LanguageVersionContext); + const noop = () => {}; + return <> + + {/*Button Example 1*/} +

    Ask a user for an address

    + + + {/*Reactive FormControl Angular Code Snippet*/} + + + {/*Template driven Angular Code Snippet*/} + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +     + + + + Submit and continue + + + Cancel + + +     + + {/*Button example 2*/} +

    Confirm a destructive action

    + + +

    You cannot undo this action.

    + + + + Cancel + + + Delete record + + +     +     + + {/*Button example */} +

    Disabled button with a required field

    + + {/*Reactive FormControl Angular Code Snippet*/} + + + {/*Template driven Angular Code Snippet*/} + + + + + + + + + Confirm + + + Cancel + + + + ; +}; diff --git a/src/examples/checkbox/CheckboxExamples.tsx b/src/examples/checkbox/CheckboxExamples.tsx index 6b5966559..4dc3f6bb3 100644 --- a/src/examples/checkbox/CheckboxExamples.tsx +++ b/src/examples/checkbox/CheckboxExamples.tsx @@ -1,15 +1,19 @@ import { GoabCheckbox, GoabFormItem } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export default function CheckboxExamples () { + const {version} = useContext(LanguageVersionContext); return ( <>

    Use tags in the description

    {/*Angular*/} - `} - /> + />} + + {version === "new" && + + + Help text with a link. + + + + + + `} + />} {/*React*/} - `} - /> + />} + + {version === "new" && + Help text with a link.} + /> + + + + `} + />} + {/*Container examples*/} - +

    User information

    {/*CSS Code Snippet*/} @@ -55,11 +61,12 @@ export default function ContainerExamples() { /> {/*Angular Code Snippet*/} - Housing Advisor

    Tracy Hero

    @@ -107,28 +114,103 @@ export default function ContainerExamples() {
    - + `} - /> + /> + )} + + {version === "new" && ( + + Housing Advisor +

    Tracy Hero

    + + + Email + Phone + + + + tracyhero@email.com + 283-203-4921 + + + + + +
    Upcoming important due dates
    +
    + + Add to calendar + +
    + +
    + + + + Business plan submission + June 30, 2024 + + + Annual review + October 3, 2024 + + + Application submission + December 20, 2024 + + + Application review + January 3, 2025 + + + +
    +     + `} + /> + )} {/*React*/} - {}}> Add to calendar ); `} - /> - - + )} + + {version === "new" && ( + {}}> + Add to calendar + ); + `} + /> + )} + + {version === "old" && ( + Housing Advisor

    Tracy Hero

    @@ -174,8 +256,62 @@ export default function ContainerExamples() {
    `} - /> + /> + )} + + {version === "new" && ( + + Housing Advisor +

    Tracy Hero

    + + + Email + Phone + + + + tracyhero@email.com + 283-203-4921 + + + + +
    + + + + Business plan submission + June 30, 2024 + + + Annual review + October 3, 2024 + + + Application submission + December 20, 2024 + + + Application review + January 3, 2025 + + + +
    +     + `} + /> + )} {/*Code Block*/} Housing Advisor @@ -336,7 +472,9 @@ export default function ContainerExamples() { - Waitlist submission + + Waitlist submission +
    Enter and maintain information about the households waiting for affordable housing with your organization. @@ -344,7 +482,9 @@ export default function ContainerExamples() { - Lodge assistance program + + Lodge assistance program +
    Keep track of the individuals who are placed in lodges and may qualify for the Lodge Assistance Program subsidy. @@ -360,7 +500,9 @@ export default function ContainerExamples() { - Social Assistance + + Social Assistance +
    Learn about available support programs, apply for financial aid, and access community resources. @@ -368,7 +510,9 @@ export default function ContainerExamples() { - Employment Opportunity + + Employment Opportunity +
    Search for job openings, access career development tools, and receive employment-related updates. @@ -376,7 +520,9 @@ export default function ContainerExamples() { - Housing Assistance + + Housing Assistance +
    Find affordable housing options, apply for housing subsidies, and report maintenance issues seamlessly. @@ -386,8 +532,7 @@ export default function ContainerExamples() {

    Review and action

    - - + + {version === "new" && } + + {version === "new" && } + + {version === "new" && } +

    Appearance details

    @@ -449,14 +665,22 @@ export default function ContainerExamples() {
    Docket number(s) $ charges
    1) 12345678
    -

    CC 334(1) - Theft under $5000

    -

    CC 268(1) - Aggravated assult

    +

    + CC 334(1) - Theft under $5000 +

    +

    + CC 268(1) - Aggravated assult +

    2) 12345678
    -

    CC 334(1) - Theft under $5000

    -

    CC 268(1) - Aggravated assult

    +

    + CC 334(1) - Theft under $5000 +

    +

    + CC 268(1) - Aggravated assult +

    @@ -469,9 +693,13 @@ export default function ContainerExamples() {

    - + +

    Adjournment request

    -

    Keep track of the individuals who are placed in lodges and may qualify for the Lodge Assistance Program subsidy.

    +

    + Keep track of the individuals who are placed in lodges and may qualify for the Lodge + Assistance Program subsidy. +

    {}}> @@ -484,15 +712,20 @@ export default function ContainerExamples() { {}}> - + - {}}/> + {}} /> - {}}>Confirm + {}}> + Confirm + +
    diff --git a/src/examples/dropdown/DropdownExamples.tsx b/src/examples/dropdown/DropdownExamples.tsx index d4e4eeee8..44febf843 100644 --- a/src/examples/dropdown/DropdownExamples.tsx +++ b/src/examples/dropdown/DropdownExamples.tsx @@ -8,12 +8,12 @@ import { GoabDropdownItem, GoabRadioItem } from "@abgov/react-components"; -import { LanguageContext } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { GoabDropdownItemMountType, GoabDropdownOnChangeDetail, GoabInputOnChangeDetail, GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; type Task = { value: string; @@ -22,7 +22,7 @@ type Task = { }; export const DropdownExamples = () => { - const language = useContext(LanguageContext); + const {version, language} = useContext(LanguageVersionContext); const [tasks, setTasks] = useState([ { label: "Finish Report", value: "finish-report", mount: "append" }, { label: "Attend Meeting", value: "attend-meeting", mount: "append" }, @@ -151,9 +151,10 @@ export const DropdownExamples = () => {
    + {language === "angular" && ( <> - { return item.value; } }`} - /> - } + + {version === "new" && { + this.renderTrigger = true; + }, 0); + } + trackByFn(index: number, item: Task): string { + return item.value; + } + }`} + />} + + {version === "old" && {
    `} - /> + />} + + {version === "new" && +
    + + + + + + + + + + + + + Add new item + + + Reset list + + + + + + + + + + + +
    + `} + />} )} {language === "react" && ( <> - { setTaskError(false); } `} - /> + />} + {version === "new" && ([ + { label: "Finish Report", value: "finish-report", mount: "append" }, + { label: "Attend Meeting", value: "attend-meeting", mount: "append" }, + { label: "Reply Emails", value: "reply-emails", mount: "append" } + ]); + const [newTask, setNewTask] = useState(""); + const [mountType, setNewMountType] = useState("append"); + const [selectedTask, setSelectedTask] = useState(""); + const [taskError, setTaskError] = useState(false); + + function onMountTypeChange(value: string | undefined) { + setNewMountType(value as string); + } + function addTask() { + if (newTask === "") { + setTaskError(true); + return; + } + setTaskError(false); + const task = { + label: newTask, + value: newTask.toLowerCase().replace(" ", "-"), + mount: mountType as GoabDropdownItemMountType + }; + setTasks([...tasks, task]); + } + + function reset() { + setTasks([]); + setNewMountType("append"); + setNewTask(""); + setSelectedTask(""); + setTaskError(false); + } + `} + />} - {
    `} - /> + />} + {version === "new" && +
    + + setNewTask(event.value)} + name="item" + placeholder="" + value={newTask}> + + + onMountTypeChange(event.value)} + value={mountType} + orientation="horizontal"> + + + + + + + Add new item + + + Reset list + + + + + setSelectedTask(event.value as string)} + value={selectedTask} + name="selectedTask"> + {tasks.map(task => ( + + ))} + + +
    +     + `} + />} )} @@ -451,7 +681,7 @@ export const DropdownExamples = () => { `} /> - { {parents.map((parent) => ( ))} - + @@ -478,10 +708,42 @@ export const DropdownExamples = () => { `} - /> + />} + {version === "new" && + loadSchemas(event.name as string, event.value as string)}> + {parents.map(parent => ( + + ))} + + + + + {" "} + {children.map((child, _index) => ( + + ))} + + + `} + />} )} + {language === "angular" && ( <> { } `} /> - {
    `} - /> + />} + + {version === "new" && + + + + + + + + + + + + +
    + `} + />} )}     diff --git a/src/examples/microsite-header/MicrositeHeaderExamples.tsx b/src/examples/microsite-header/MicrositeHeaderExamples.tsx index 9b273870e..bb66838be 100644 --- a/src/examples/microsite-header/MicrositeHeaderExamples.tsx +++ b/src/examples/microsite-header/MicrositeHeaderExamples.tsx @@ -1,25 +1,30 @@ import { GoabMicrositeHeader } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -const onClick = () => { - console.log("Feedback clicked"); - alert("Thank you for your feedback!"); -}; - -export default function MicrositeHeaderExamples () { +export default function MicrositeHeaderExamples() { + const { version } = useContext(LanguageVersionContext); + const onClick = () => { + console.log("Feedback clicked"); + alert("Thank you for your feedback!"); + }; return ( <> - +

    Custom click event handler (for feedback)

    - - - - + + {/*Angular code*/} + {version === "old" && ( + + /> + )} + {version === "new" && ( + + )} - `} - /> + /> + )} + {version === "new" && ( + + `} + /> + )} - - + /> + )} + {version === "new" && ( + + onClick()} + /> + + ); + } + `} + /> + )} +

    Slotted version

    {/*Angular*/} -
    Slotted version text. @@ -86,24 +154,55 @@ export default function MicrositeHeaderExamples () {
    `} - /> + />} + {version === "new" && + + Slotted version text. + v1.23 + + + `} + />} {/*React*/} - Slotted version text.v1.23} > `} - /> + />} + {version === "new" && Slotted version text.v1.23} + >     + `} + />} Slotted version text.v1.23} + version={ + <> + + Slotted version text. + + v1.23 + + } /> - ) + ); } diff --git a/src/examples/modal/ModalExamples.tsx b/src/examples/modal/ModalExamples.tsx index dfa363896..bd5bffde8 100644 --- a/src/examples/modal/ModalExamples.tsx +++ b/src/examples/modal/ModalExamples.tsx @@ -1,4 +1,4 @@ -import { LanguageContext, Sandbox } from "@components/sandbox"; +import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { GoabButton, @@ -9,12 +9,17 @@ import { GoabDropdownItem, GoabFormItem, GoabInput, - GoabModal, GoabTextarea + GoabModal, + GoabTextarea, } from "@abgov/react-components"; import { useContext, useState } from "react"; import { useNavigate } from "react-router-dom"; import "./modal-examples.css"; -import { GoabDropdownOnChangeDetail, GoabTextAreaOnChangeDetail } from "@abgov/ui-components-common"; +import { + GoabDropdownOnChangeDetail, + GoabTextAreaOnChangeDetail, +} from "@abgov/ui-components-common"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export default function ModalExamples() { // hooks @@ -22,15 +27,15 @@ export default function ModalExamples() { const [destructiveModalOpen, setDestructiveModalOpen] = useState(); const [warnCalloutModalOpen, setWarnCalloutModalOpen] = useState(); const [inputModalOpen, setInputModalOpen] = useState(); - const [effectiveDate, setEffectiveDate] = useState(new Date()); + const [effectiveDate, setEffectiveDate] = useState(new Date()); const [onRouteChangeModalOpen, setOnRouteChangeModalOpen] = useState(); const [addItemModalOpen, setAddItemModalOpen] = useState(); const [type, setType] = useState(); const [name, setName] = useState(); const [description, setDescription] = useState(); + const { version } = useContext(LanguageVersionContext); const navigate = useNavigate(); - const language = useContext(LanguageContext); // @ts-ignore const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => { setEffectiveDate(detail.value); @@ -42,11 +47,11 @@ export default function ModalExamples() { const onChangeName = (value: string) => { setName(value); - } + }; const onChangeDescription = (event: GoabTextAreaOnChangeDetail) => { setDescription(event.value); - } + }; return ( <> @@ -73,6 +78,7 @@ export default function ModalExamples() { }>

    Content

    + {/*Angular*/} - Open Basic Modal

    Content

    @@ -102,7 +110,30 @@ export default function ModalExamples() {
    `} - /> + /> + )} + + {version === "new" && ( + Open Basic Modal + +

    Content

    + + + Secondary + Primary + + +     + `} + /> + )} + + {/*React code*/} - setOpen(true)}>Open Basic Modal setOpen(false)} actions={ @@ -136,7 +169,37 @@ export default function ModalExamples() {

    Content

     `} - /> + /> + )} + + {version === "new" && ( + setOpen(true)}>Open Basic Modal + setOpen(false)} + actions={ + + setOpen(false)}> + Secondary + + setOpen(false)}> + Primary + + + } + > +

    Content

    +     + `} + /> + )}

    Confirm a destructive action

    @@ -166,6 +229,8 @@ export default function ModalExamples() { }>

    This action cannot be undone.

    + + {/*Angular code*/} - Delete my application

    This action cannot be undone.

    @@ -196,7 +262,29 @@ export default function ModalExamples() {
    `} - /> + /> + )} + {version === "new" && ( + Delete my application + +

    This action cannot be undone.

    + + + Cancel + Delete application + + +     + `} + /> + )} + + {/*React code*/} - setOpen(true)}>Delete my application This action cannot be undone.

     `} - /> + /> + )} + + {version === "new" && ( + setOpen(true)}>Delete my application + setOpen(false)} + actions={ + + setOpen(false)}> + Cancel + + setOpen(false)}> + Delete application + + + } + > +

    This action cannot be undone.

    +     + `} + /> + )}

    Warn a user of a deadline

    @@ -258,6 +377,8 @@ export default function ModalExamples() { adjournment request as soon as possible.

    + + {/*Angular code*/} - Save for later @@ -289,7 +411,31 @@ export default function ModalExamples() {
    `} - /> + /> + )} + {version === "new" && ( + Save for later + +

    You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.

    + + + + I understand + + + +     + `} + /> + )} + + {/*React code*/} - setOpen(true)}>Save for later You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.

     `} - /> + /> + )} + + {version === "new" && ( + setOpen(true)}>Save for later + setOpen(false)} + actions={ + + setOpen(false)}>I understand + + } + > +

    You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.

    +     + `} + /> + )}

    Confirm record change

    @@ -375,13 +549,12 @@ export default function ModalExamples() { `} /> - {language === "angular" && ( - <> - + />} - } + + {version === "old" && Save and continue @@ -431,17 +624,49 @@ export default function ModalExamples() {
    `} - /> - - )} + />} - {language === "react" && ( - <> - Save and continue + + +
    +
    Before
    +
    123456 78 Ave NW, Edmonton, Alberta
    +
    +
    +
    After
    +
    881 12 Ave NW, Edmonton, Alberta
    +
    +     + + + + + + + Undo address change + + + Confirm + + + +     + `} + />} + + {/*React code*/} + {version === "old" && (new Date()); @@ -449,13 +674,26 @@ export default function ModalExamples() { setEffectiveDate(value); } `} - /> + />} + {version === "new" && (new Date()); + + const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => { + setEffectiveDate(detail.value); + } + `} + />} - setOpen(true)}>Save and continue `} - /> - - )} + />} + {version === "new" && setOpen(true)}>Save and continue + setOpen(false)} + actions={ + + setOpen(false)}> + Undo address change + + setOpen(false)}> + Confirm + + + } + > + +
    +
    Before
    +
    123456 78 Ave NW, Edmonton, Alberta
    +
    +
    +
    After
    +
    881 12 Ave NW, Edmonton, Alberta
    +
    +     + + + +     + `} + />}

    Add another item

    {/*Don't use a Sandbox because the Dropdown inside a modal will make the modal shifts everytime we tab from the dropdown*/} @@ -526,7 +803,10 @@ export default function ModalExamples() { - onChangeName(event.value)} value={name} name="name"> + onChangeName(event.value)} + value={name} + name="name"> - {language === "angular" && ( - <> - - } + + {version === "new" && } + + {version === "old" && Add another item @@ -600,17 +909,45 @@ export default function ModalExamples() {
    `} - /> - - )} + />} - {language === "react" && ( - <> - Add another item + +

    Fill in the information to create a new item

    + + + + + + + + + + + + + + + Cancel + Save new item + + +     + `} + />} + + {/*React code*/} + {version === "old" && (); const [name, setName] = useState(); @@ -629,12 +966,37 @@ export default function ModalExamples() { }; `} - /> - } + {version === "new" && (); + const [name, setName] = useState(); + const [description, setDescription] = useState(); + + function onChangeName(value: string) { + setName(value); + } + + function onChangeDescription(event: GoabTextAreaOnChangeDetail) { + setDescription(event.value); + } + + function onChangeType(event: GoabDropdownOnChangeDetail) { + setType(event.value); + }; + + `} + />} + + {version === "old" && setOpen(true)}> Add another item @@ -667,12 +1029,51 @@ export default function ModalExamples() { `} - /> - - )} + />} + + {version === "new" && setOpen(true)}> + Add another item + + + setOpen(false)}> + Cancel + + setOpen(false)}> + Save new item + + + }> +

    Fill in the information to create a new item

    + + + + + + + + onChangeName(event.value)} value={name} name="name"> + + + + +     + `} + />}

    Route changes

    + + {/*Angular code*/} - `} - /> + />} + + {version === "new" && Open + + + + Cancel + Change route + + + + `} + />} - `} - /> + />} + + {version === "new" && setOpen(true)}>Open + setOpen(false)} + actions={ + + setOpen(false)}> + Cancel + + { + setOpen(false); + // setTimeout will allow any modal transitions to be run + // setTimeout(() => navigate("/some-path"), 300) } + navigate("/components") + }}>Change route + + } + > + `} + />} + setOnRouteChangeModalOpen(true)}>Open
    @@ -473,7 +475,8 @@ export default function QuestionPageExamples() { /> {/*Angular Code Snippet - need for leadingContent slot*/} - `} - /> + />} + + {version === "new" && + Back + +

    + Step 1 of 5 +

    +

    + Personal information +

    + + + + + +
    +1
    +     +     + + + + + Save and continue + + `} + />} {/*React Code Snippet - need for leadingContent slot*/} - `} - /> + />} + + {version === "new" && + Back + +

    Step 1 of 5

    +

    Personal information

    + + {}} name="name" ariaLabel="what is your name?" width="50ch" /> + + + {}} + name="phone-number" + ariaLabel="what is your phone number?" + leadingContent="+1" + /> + + + {}} + name="postal-code" + width="14ch" + ariaLabel="what is your home postal code"> + + + Save and continue + + `} + />} Back diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx index 1a75dd078..2d8b6e96d 100644 --- a/src/examples/radio/RadioExamples.tsx +++ b/src/examples/radio/RadioExamples.tsx @@ -1,21 +1,28 @@ import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; const noop = () => { }; export default function RadioExamples () { + const {version} = useContext(LanguageVersionContext); + return ( - <> - + <> +

    Use tags in the description

    - {/*Angular*/} - @@ -26,13 +33,37 @@ export default function RadioExamples () { `} - /> - {/*React*/} - + )} + + {version === "new" && ( + + + + + Help text with a     link. + + + + + + + `} + /> + )} + + {/* ============== React ================== */} + {version === "old" && ( + `} - /> + /> + )} + + {version === "new" && ( + + + Help text with a link.} + /> + + + + + `} + /> + )} + Help text with a link.} - /> + value="1" + label="Option one" + description={ + + Help text with a link. + + } + /> +

    Radio item with max width

    - - {/*Angular*/} - - - - - - - - `} - /> - {/*React*/} - - - - - - - - `} - /> + + value="1" + label="Option one which has a very long label with lots of text" + maxWidth="300px" + /> diff --git a/src/examples/result-page/ResultPageExamples.tsx b/src/examples/result-page/ResultPageExamples.tsx index 03788dce3..572249381 100644 --- a/src/examples/result-page/ResultPageExamples.tsx +++ b/src/examples/result-page/ResultPageExamples.tsx @@ -2,10 +2,11 @@ import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import "./result-page-example.css"; import { GoabBlock, GoabCallout } from "@abgov/react-components"; - +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export function ResultPageExamples() { - + const {version} = useContext(LanguageVersionContext); return (
    @@ -30,7 +31,8 @@ export function ResultPageExamples() { `} /> - Phone: 780 123 4567

    `} - /> + />} + + {version === "new" && +
    +

    + You have completed the application +

    + +

    You will receive a copy of the confirmation to the email name@email.com

    +

    Your reference number is: 1234ABC

    +     +

    What happens next

    +
    +

    We’ve sent your application to service name. They will contact you to confirm your registration.

    +

    You can now close this window.

    +

    What did you think of this service? Give feedback

    +

    If you have questions about your application

    +

    Contact the [ministry area].

    +

    Email: information@gov.ab.ca

    +

    Phone: 780 123 4567

    + + `} + />} - Phone: 780 123 4567

    `} - /> + />} + + {version === "new" && +
    +

    You have completed the application

    + +

    You will receive a copy of the confirmation to the email name@email.com

    +

    Your reference number is: 1234ABC

    +     +

    What happens next

    +
    +

    We’ve sent your application to service name. They will contact you to confirm your registration.

    +

    You can now close this window.

    +

    What did you think of this service? Give feedback

    +

    If you have questions about your application

    +

    Contact the [ministry area].

    +

    Email: information@gov.ab.ca

    +

    Phone: 780 123 4567

    + + `} + />}
    diff --git a/src/examples/start-page/StartPageExamples.tsx b/src/examples/start-page/StartPageExamples.tsx index 258d449e7..4457a6c4b 100644 --- a/src/examples/start-page/StartPageExamples.tsx +++ b/src/examples/start-page/StartPageExamples.tsx @@ -4,8 +4,10 @@ import { } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import "./start-page-example.css"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export function StartPageExamples() { - + const {version} = useContext(LanguageVersionContext); return (
    @@ -35,7 +37,9 @@ export function StartPageExamples() { `} /> - Support

    For assistance, email us at  help@gov.ab.ca

    `} - /> + />} + {version === "new" && + Name of service + +

    + A short overview of the service. This is a couple sentences that helps the user understand what the service is. +

    +

    + Use this service to apply for [service]. You can use this service to: +

    +
      +
    • see of you or a family member is eligible for [service]
      • +
    • create and submit an application for [service]
      • +
    • continue an application for [service] that you already started
      • +
    +

    Before you begin

    +

    The application form should take about 20 minutes to complete.

    +

    In order to complete the application you will need:

    +
      +
    • government issued ID for the person applying
      • +
    + + Get started + +

    Other information about the service

    +

    This section contains supplementary details about the service, including descriptions of less common scenarios, exceptions, and additional resources available. It provides context and additional insights that may be relevant to your specific circumstances or interests, helping you understand the full scope and utility of the service offered.

    +

    Support

    +

    For assistance, email us at  help@gov.ab.ca

    + `} + />} - Support

    For assistance, email us at  help@gov.ab.ca

    `} - /> + />} + {version === "new" && + Name of service + +

    + A short overview of the service. This is a couple sentences that helps the user understand what the service is. +

    +

    Use this service to apply for [service]. You can use this service to:

    +
      +
    • see of you or a family member is eligible for [service]
      • +
    • create and submit an application for [service]
      • +
    • continue an application for [service] that you already started
      • +
    +

    Before you begin

    +

    The application form should take about 20 minutes to complete.

    +

    In order to complete the application you will need:

    +
      +
    • government issued ID for the person applying
      • +
    + + Get started + +

    + Other information about the service +

    +

    + This section contains supplementary details about the service, including descriptions of less common scenarios, exceptions, and additional resources available. It provides context and additional insights that may be relevant to your specific circumstances or interests, helping you understand the full scope and utility of the service offered. +

    +

    Support

    +

    For assistance, email us at  help@gov.ab.ca

    + `} + />}

    Name of service

    diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx index 25d19e620..1f9af51e5 100644 --- a/src/examples/text-field/TextFieldExamples.tsx +++ b/src/examples/text-field/TextFieldExamples.tsx @@ -8,8 +8,11 @@ import { GoabInput, } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export default function TextFieldExamples() { + const {version} = useContext(LanguageVersionContext) const noop = () => {}; return ( <> @@ -19,7 +22,7 @@ export default function TextFieldExamples() {

    Ask a user for an address

    - + @@ -53,7 +56,7 @@ export default function TextFieldExamples() {

    Ask a user for their birthday

    - + - + @@ -244,7 +247,7 @@ export default function TextFieldExamples() {

    Ask a user for their indian registration number

    - + diff --git a/src/routes/components/AppFooter.tsx b/src/routes/components/AppFooter.tsx index b7238fa5f..7a96db813 100644 --- a/src/routes/components/AppFooter.tsx +++ b/src/routes/components/AppFooter.tsx @@ -17,7 +17,7 @@ import { ComponentBinding, Sandbox } from "@components/sandbox"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { useState, useContext } from "react"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; -import { LanguageContext } from "@components/sandbox"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; // == Page props == @@ -36,7 +36,7 @@ type CastingType = { }; export default function AppFooterPage() { - const language = useContext(LanguageContext); + const {version, language} = useContext(LanguageVersionContext); const [appFooterProps, setAppFooterProps] = useState({ maxContentWidth: "100%", @@ -107,6 +107,7 @@ export default function AppFooterPage() { { name: "slot", lang: "angular", + required: true, type: "nav", description: "Links to nav information to display in the footer", }, @@ -162,7 +163,7 @@ export default function AppFooterPage() { - `} - /> + />} - + + + Privacy + + + Disclaimer + + + Accessibility + + + Using Alberta.ca + + + + `} + />} + + {version === "old" && `} - /> + />} + {version === "new" && + + + Privacy + + + Disclaimer + + + Accessibility + + + Using Alberta.ca + + + + `} + />} @@ -228,7 +276,7 @@ export default function AppFooterPage() { properties={appFooterNavBindings} onChange={onSandbox2Change} fullWidth> - `} - /> + />} + + {version === "new" && + + + Arts and culture + + + Education and training + + + Family and social supports + + + Housing and community + + + Life events + + + Business and economy + + + Emergencies and public safety + + + Government + + + Jobs and employment + + + Moving to Alberta + + + + + Privacy + + + Disclaimer + + + Accessibility + + + Using Alberta.ca + + + + `} + />} - `} - /> + />} + + {version === "new" && + + Arts and culture + Education and training + Family and social supports + Housing and community + Life events + Business and economy + Emergencies and public safety + Government + Jobs and employment + Moving to Alberta + + + Privacy + Disclaimer + Accessibility + Using Alberta.ca + + + `} + />} diff --git a/src/routes/components/AppHeader.tsx b/src/routes/components/AppHeader.tsx index f9dc28178..93988efd2 100644 --- a/src/routes/components/AppHeader.tsx +++ b/src/routes/components/AppHeader.tsx @@ -13,9 +13,10 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import { ComponentBinding, Sandbox } from "@components/sandbox"; -import { useState } from "react"; +import { useContext, useState } from "react"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; const componentName = "Header"; const description = @@ -32,6 +33,7 @@ type CastingType = { [key: string]: unknown; }; export default function AppHeaderPage() { + const {version} = useContext(LanguageVersionContext); const [appHeaderProps, setAppHeaderProps] = useState({ url: "www.alberta.ca", maxContentWidth: "100%", @@ -57,7 +59,7 @@ export default function AppHeaderPage() { }, ]); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "url", type: "string", @@ -125,6 +127,40 @@ export default function AppHeaderPage() { description: "Function invoked when the menu hamburger button (on mobile/tablet device) is clicked." } ]; + const componentProperties: ComponentProperty[] = [ + { + name: "url", + type: "string", + description: "Set the URL to link from the alberta.ca logo. A full url is required.", + }, + { + name: "heading", + type: "string", + description: "Set the service name to display in the app header.", + }, + { + name: "maxContentWidth", + type: "string", + description: "Maximum width of the content area.", + defaultValue: "100%", + }, + { + name: "fullMenuBreakpoint", + type: "number", + description: "Sets the breakpoint in px for the full menu to display.", + }, + { + name: "testId", + type: "string", + description: "Sets the data-testid attribute. Used with ByTestId queries in tests.", + }, + { + name: "onMenuClick", + type: "() => void", + description: "Function invoked when the menu hamburger button (on mobile/tablet device) is clicked." + } + ]; + function onSandboxChange(bindings: ComponentBinding[], props: Record) { setAppHeaderProps(props as CastingType); @@ -155,7 +191,7 @@ export default function AppHeaderPage() { {/*Component properties*/} - + {/*Examples*/}

    Header with navigation

    - Sign in `} - /> + />} + {version === "new" && + + Support + + Cases + Payments + Outstanding + + Sign in + + `} + />} - Sign in `} - /> + />} + {version === "new" && + Support + + Cases + Payments + Outstanding + + Sign in + + `} + />} + Support @@ -231,7 +303,8 @@ export default function AppHeaderPage() { - - - } + {version === "new" && } + + {version === "old" && Sign in `} - /> + />} + {version === "new" && + + + + + + Support + + Cases + Payments + Outstanding + + Sign in + + `} + />} + {/*React code*/} - Sign in `} - /> + />} + {version === "new" && setDeviceWidth(event.value)}> + + + + + + Support + + Cases + Payments + Outstanding + + Sign in + + `} + />} diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx index a23161c72..acdc7d340 100644 --- a/src/routes/components/Badge.tsx +++ b/src/routes/components/Badge.tsx @@ -70,7 +70,7 @@ export default function BadgePage() { }, ]); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "type", type: "success | important | information | emergency | dark | midtone | light", @@ -119,6 +119,41 @@ export default function BadgePage() { }, ]; + const componentProperties: ComponentProperty[] = [ + { + name: "type", + type: "GoabBadgeType(success | important | information | emergency | dark | midtone | light)", + description: "Define the context and colour of the badge", + required: true, + }, + { + name: "icon", + type: "boolean", + description: "Includes an icon in the badge.", + defaultValue: "false", + }, + { + name: "content", + type: "string", + description: "Text label of the badge.", + }, + { + name: "ariaLabel", + type: "string", + description: "Accessible label.", + }, + { + name: "testId", + type: "string", + description: "Sets the data-testid attribute. Used with ByTestId queries in tests.", + }, + { + name: "mt,mr,mb,ml", + type: "Spacing(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.", + }, + ] + function onSandboxChange(badgeBindings: ComponentBinding[], props: Record) { setBadgeBindings(badgeBindings); setBadgeProps(props as CastingType); @@ -135,7 +170,7 @@ export default function BadgePage() { - + diff --git a/src/routes/components/Block.tsx b/src/routes/components/Block.tsx index 46dd37a25..800628636 100644 --- a/src/routes/components/Block.tsx +++ b/src/routes/components/Block.tsx @@ -37,7 +37,7 @@ export default function BlockPage() { }, ]); const [sandboxFullWidth, setSandboxFullWidth] = useState(false); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "gap", type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl", @@ -63,6 +63,33 @@ export default function BlockPage() { }, ]; + const componentProperties: ComponentProperty[] = [ + { + name: "gap", + type: "Spacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)", + description: "Spacing between items", + defaultValue: "m", + }, + { + name: "direction", + type: "GoabBlockDirection (row | column)", + description: "Stacking direction of child components", + defaultValue: "row", + }, + { + name: "alignment", + type: "GoabBlockAlignment (center | start | end | normal) is", + description: "Primary axis alignment", + defaultValue: "normal", + }, + { + name: "mt,mr,mb,ml", + type: "Spacing (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.", + }, + ]; + + useEffect(() => { const direction = blockBindings.find(binding => binding.name === "direction"); setSandboxFullWidth(direction?.value === "column"); @@ -127,7 +154,7 @@ export default function BlockPage() {     {/*Block table properties*/} - + { }; + const componentProperties: ComponentProperty[] = [ + { + name: "type", + type: "GoabButtonType (primary | submit | secondary | tertiary | start)", + description: "Sets the type of button.", + defaultValue: "primary", + }, + { + name: "size", + type: "GoabButtonSize (normal | compact)", + defaultValue: "normal", + description: "Sets the size of button.", + }, + { + name: "variant", + type: "GoabButtonVariant (normal | destructive)", + defaultValue: "normal", + description: "Styles the button to show a destructive action.", + }, + { + name: "disabled", + type: "boolean", + defaultValue: "false", + description: "Disables the button.", + }, + { + name: "leadingIcon", + type: "GoabIconType", + description: "Shows an icon to the left of the text.", + }, + { + name: "trailingIcon", + type: "GoabIconType", + description: "Shows an icon to the right of the text.", + }, + { + name: "onClick", + type: "() => void", + description: "Callback function when button is clicked.", + }, + { + name: "testId", + type: "string", + description: "Sets the data-testid attribute. Used with ByTestId queries in tests.", + }, + { + name: "Spacing (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 noop = () => {}; function SandboxOnChange(bindings: ComponentBinding[], props: Record) { setButtonBindings(bindings); setButtonProps(props); } + return ( <> {/*Button Sandbox*/} -

    Component

    +

    + Component +

    + Primary Button {/*Button Table Properties*/} - - - {/*Button Examples*/} - - - - {/*Button Example 1*/} -

    Ask a user for an address

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - Submit and continue - - - Cancel - - - - - {/*Button example 2*/} -

    Confirm a destructive action

    - - -

    You cannot undo this action.

    - - - - Cancel - - - Delete record - - -     -     - - {/*Button example 3*/} -

    Disabled button with a required field

    - - - - - - - - Confirm - - - Cancel - - - +     { }; @@ -108,7 +133,7 @@ export default function ButtonGroupPage() {     - + ) { setComponentBindings(bindings); setComponentProps(props as CastingType); @@ -231,6 +279,8 @@ export default function CalloutPage() {     + + ({ name: "item", checked: false, @@ -50,8 +52,7 @@ export default function CheckboxPage() { const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic", }); - - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "name", type: "string", @@ -149,6 +150,80 @@ export default function CheckboxPage() { description: "Apply margin to the top, right, bottom, and/or left of the component.", }, ]; + const componentProperties: ComponentProperty[] = [ + { + name: "name", + type: "string", + description: "Unique name to identify the checkbox.", + }, + { + name: "checked", + type: "boolean", + description: "Marks the checkbox item as selected.", + }, + { + name: "disabled", + type: "boolean", + defaultValue: "false", + description: + "Disable this control. It will not receive focus or events.", + }, + { + name: "error", + type: "boolean", + defaultValue: "false", + description: "Shows an error on the checkbox item.", + }, + { + name: "text", + type: "string", + description: "Label shown beside the checkbox.", + }, + { + name: "value", + type: "string | number | boolean", + description: "The value binding.", + }, + { + name: "description", + type: "string | TemplateRef", + description: "Additional content shown below the label.", + lang: "angular", + }, + { + name: "description", + type: "string | ReactNode", + description: "Additional content shown below the label.", + lang: "react", + }, + { + name: "ariaLabel", + type: "string", + description: + "Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.", + }, + { + name: "maxWidth", + type: "string", + description: "Sets the maximum width of the checkbox.", + }, + { + name: "testId", + type: "string", + description: "Sets the data-testid attribute. Used with ByTestId queries in tests.", + }, + { + name: "onChange", + type: "(event: GoabCheckboxOnChangeDetail) => void", + description: "Callback function when checkbox value is changed.", + }, + { + name: "mt,mr,mb,ml", + type: "Spacing (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 noop = () => { }; function onChange(bindings: ComponentBinding[], props: Record) { @@ -175,24 +250,23 @@ export default function CheckboxPage() { properties={checkboxBindings} formItemProperties={formItemBindings} onChange={onChange} + allow={["form"]} onChangeFormItemBindings={onFormItemChange} - flags={["reactive"]}> + flags={version === "old" ? ["reactive"] : ["reactive", "template-driven"]}> - - - - + />} + + {version === "new" && } + + {version === "new" && } + +
    + + + +
    - + diff --git a/src/routes/components/Container.tsx b/src/routes/components/Container.tsx index d975a1e77..c5f67abdb 100644 --- a/src/routes/components/Container.tsx +++ b/src/routes/components/Container.tsx @@ -73,7 +73,7 @@ export default function ContainerPage() { }, ]); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "type", type: "interactive | info | error | success | important | non-interactive", @@ -140,6 +140,75 @@ export default function ContainerPage() { description: "Apply margin to the top, right, bottom, and/or left of the component.", }, ]; + const componentProperties: ComponentProperty[] = [ + { + name: "type", + type: "GoabContainerType (interactive | info | error | success | important | non-interactive)", + description: "Sets the container and accent bar styling.", + defaultValue: "interactive", + }, + { + name: "accent", + type: "GoabContainerAccent (thick | thin | filled)", + defaultValue: "filled", + description: "Sets the style of accent on the container.", + }, + { + name: "padding", + type: "GoabContainerPadding (relaxed | compact)", + defaultValue: "relaxed", + description: "Sets the amount of white space in the container.", + }, + { + name: "width", + type: "GoabContainerWidth (full | content)", + defaultValue: "full", + description: "Sets the width of the container." + }, + { + name: "maxWidth", + type: "string", + description: "Sets the maximum width of the container.", + }, + { + name: "title", + lang: "angular", + type: "TemplateRef", + description: + "Sets the content in the left of the accent bar. Can only be used with accent=thick.", + }, + { + name: "actions", + type: "TemplateRef", + lang: "angular", + description: + "Sets the content in the right of the accent bar. Can only be used with accent=thick.", + }, + { + name: "title", + lang: "react", + type: "ReactNode", + description: + "Sets the content in the left of the accent bar. Can only be used with accent=thick.", + }, + { + name: "actions", + type: "ReactNode", + lang: "react", + description: + "Sets the content in the right of the accent bar. Can only be used with accent=thick.", + }, + { + name: "testId", + type: "string", + description: "Sets the data-testid attribute. Used with ByTestId queries in tests.", + }, + { + name: "mt,mr,mb,ml", + type: "Spacing (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.", + }, + ]; function onSandboxChange(bindings: ComponentBinding[], props: Record) { setContainerBindings(bindings); @@ -168,7 +237,7 @@ export default function ContainerPage() {     {/*Container Table Properties*/} - + diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 183a0aabe..24da844b6 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -1,6 +1,6 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { ComponentBinding, Sandbox } from "@components/sandbox"; -import { useState } from "react"; +import { useContext, useState } from "react"; import { ComponentProperties, ComponentProperty, @@ -12,12 +12,13 @@ import { GoabTabs, GoabDatePickerProps, GoabDatePicker, - GoabFormItem, GoabButtonGroup, GoabButton + GoabFormItem, GoabButtonGroup, GoabButton, } from "@abgov/react-components"; import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; // == Page props == @@ -36,6 +37,7 @@ type CastingType = { }; export default function DatePickerPage() { + const {version} = useContext(LanguageVersionContext); const [componentProps, setComponentProps] = useState({ onChange: () => {}, }); @@ -68,7 +70,7 @@ export default function DatePickerPage() { label: "Item", }); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "name", type: "string", @@ -116,6 +118,59 @@ export default function DatePickerPage() { }, ]; + const componentProperties: ComponentProperty[] = [ + { + name: "name", + type: "string", + description: "Name of the date field.", + }, + { + name: "value", + type: "Date | string | null | undefined", + description: "Value of the calendar date.", + }, + { + name: "min", + type: "Date | string", + defaultValue: "5 year previous", + description: "Minimum date value allowed.", + }, + { + name: "max", + type: "Date | string", + defaultValue: "5 years forward", + description: "Maximum date value allowed.", + }, + { + name: "error", + type: "boolean", + defaultValue: "false", + description: "Sets the input to an error state.", + }, + { + name: "disabled", + type: "boolean", + defaultValue: "false", + description: "Disables the date picker.", + }, + { + name: "relative", + type: "boolean", + description: "Set to true if a parent element has a css position of relative.", + defaultValue: "false", + }, + { + name: "mt,mr,mb,ml", + type: "Spacing (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.", + }, + { + name: "onChange", + type: "(event: GoabDatePickerOnChangeDetail) => void", + description: "Function to call when the date changes.", + } + ]; + function onSandboxChange(bindings: ComponentBinding[], props: Record) { setComponentBindings(bindings); setComponentProps(props as CastingType); @@ -153,30 +208,48 @@ export default function DatePickerPage() { -

    Component

    +

    Component

    - + + {/*Angular*/} + {version === "old" && + />} - } + + {version === "old" && + />} - } + + {version === "new" && } + + {/*React*/} + {version === "old" && } + + {version === "new" && + />} + - -     +

    Reset example

    - - + {/*React*/} + {version === "old" && + />} - (); + + const setNewDate = (value: Date | undefined) => { + setDate(value); + }; + + function setValue() { + const d = new Date(); + d.setDate(d.getDate() - 7); + + setDate(d); + } + + function clearValue() { + setDate(undefined); + } + + return ( + <> + + setNewDate(e.value as Date)} + mb="xl"> + + + + + Set Value + + Clear Value + + + ); + } + `} + />} + + {/*Angular*/} + + {version === "old" && - } + + {version === "old" && Clear Value `} - /> + />} - - } + {version === "old" && Clear Value `} - /> + />} + + {/*New version*/} + {version === "new" && } + + {version === "new" && + + + + + Set Value + Clear Value + + `} + />} + + + diff --git a/src/routes/components/Details.tsx b/src/routes/components/Details.tsx index 7a1eb7b5d..83a08ceee 100644 --- a/src/routes/components/Details.tsx +++ b/src/routes/components/Details.tsx @@ -38,7 +38,7 @@ export default function DetailsPage() { }, ]); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "heading", type: "string", @@ -70,6 +70,36 @@ export default function DetailsPage() { }, ]; + const componentProperties: ComponentProperty[] = [ + { + name: "heading", + type: "string", + required: true, + description: "The title heading", + }, + { + name: "open", + type: "boolean", + description: "Controls if details is expanded or not", + defaultValue: "false", + }, + { + name: "maxWidth", + type: "string", + description: "Sets the maximum width of the details.", + }, + { + name: "testId", + type: "string", + description: "A unique identifier for the component.", + }, + { + name: "mt,mr,mb,ml", + type: "Spacing (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.", + }, + ]; + function onSandboxChange(bindings: ComponentBinding[], props: Record) { setDetailsProps(props as { heading: string;[key: string]: unknown }); setDetailsBindings(bindings); @@ -108,7 +138,7 @@ export default function DetailsPage() {     {/*Component properties table*/} - + {/* Examples*/} diff --git a/src/routes/components/Divider.tsx b/src/routes/components/Divider.tsx index bc590ef40..d754bd432 100644 --- a/src/routes/components/Divider.tsx +++ b/src/routes/components/Divider.tsx @@ -29,7 +29,7 @@ export default function DividerPage() { }, ]); - const componentProperties: ComponentProperty[] = [ + const oldComponentProperties: ComponentProperty[] = [ { name: "mt,mr,mb,ml", type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl", @@ -49,6 +49,19 @@ export default function DividerPage() { }, ]; + const componentProperties: ComponentProperty[] = [ + { + name: "mt,mr,mb,ml", + type: "Spacing (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.", + }, + { + name: "testId", + type: "string", + description: "Sets the data-testid attribute. Used with ByTestId queries in tests.", + } + ]; + function onSandboxChange(utilityBindings: ComponentBinding[], props: Record) { setDividerBindings(utilityBindings); setDividerProps(props); @@ -74,7 +87,7 @@ export default function DividerPage() {     - + ({ name: "item", value: "", @@ -78,7 +80,7 @@ export default function DropdownPage() { ]); const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic dropdown" }); - const dropdownProperties: ComponentProperty[] = [ + const oldDropdownProperties: ComponentProperty[] = [ { name: "name", type: "string", @@ -204,7 +206,97 @@ export default function DropdownPage() { description: "Apply margin to the top, right, bottom, and/or left of the component.", }, ]; - const dropdownItemProperties: ComponentProperty[] = [ + const dropdownProperties: ComponentProperty[] = [ + { + name: "name", + type: "string", + description: "Identifier for the Dropdown. Should be unique.", + }, + { + name: "value", + type: "string", + description: "Stores the value of the item selected from the dropdown.", + }, + { + name: "leadingIcon", + type: "GoAIconType", + description: "Show an icon to the left of the dropdown option.", + }, + { + name: "maxHeight", + type: "string", + description: "Maximum height of the dropdown menu items popover. Non-native only.", + defaultValue: "276px", + }, + { + name: "placeholder", + type: "string", + description: + "The text displayed for the dropdown before a selection is made. Non-native only.", + }, + { + name: "width", + type: "string", + description: "Overrides the autosized menu width. Non-native only.", + }, + { + name: "disabled", + type: "boolean", + description: "Disable this control.", + defaultValue: "false", + }, + { + name: "relative", + type: "boolean", + description: "Set to true if a parent element has a css positive of relative.", + defaultValue: "false", + }, + { + name: "error", + type: "boolean", + description: "Show an error state", + defaultValue: "false", + }, + { + name: "ariaLabel", + type: "string", + description: + "Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name.", + }, + { + name: "ariaLabelledBy", + type: "string", + description: + "The aria-labelledby attribute identifies the element(or elements) that labels the dropdown it is applied to. Normally it is the id of the label.", + }, + { + name: "native", + type: "boolean", + defaultValue: "false", + description: "When true will render the native