diff --git a/README.md b/README.md index cc331c3606..752f92210e 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,6 @@ This repository contains the Government of Alberta Design System component libra | `@abgov/react-components` | You are building a React application. | [npm](https://www.npmjs.com/package/@abgov/react-components) | | `@abgov/angular-components` | You are building an Angular application. | [npm](https://www.npmjs.com/package/@abgov/angular-components) | | `@abgov/ui-components-common` | You need shared types, event detail interfaces, or common utilities used by the component packages. | [npm](https://www.npmjs.com/package/@abgov/ui-components-common) | -| `@abgov/design-tokens` | You need the design tokens used by the components. | [npm](https://www.npmjs.com/package/@abgov/design-tokens) | `@abgov/styles` is deprecated. Import `@abgov/web-components/index.css` instead. @@ -28,7 +27,7 @@ This repository contains the Government of Alberta Design System component libra Install the packages: ```bash -npm i @abgov/web-components @abgov/design-tokens +npm i @abgov/web-components ``` Register the custom elements in your app entry point, for example `src/main.js`: @@ -37,11 +36,10 @@ Register the custom elements in your app entry point, for example `src/main.js`: import "@abgov/web-components"; ``` -Import the component styles and tokens in your main stylesheet: +Import the component styles in your main stylesheet. This stylesheet includes the design tokens and dark theme overrides: ```css @import "@abgov/web-components/index.css"; -@import "@abgov/design-tokens/dist/tokens.css"; ``` Add Ionicons to your `index.html` ``: @@ -64,7 +62,7 @@ Supported React versions: `17`, `18`, `19`. Install the packages: ```bash -npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common @abgov/design-tokens +npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common ``` Register the underlying web components in your app entry point, for example `src/main.tsx`: @@ -73,11 +71,10 @@ Register the underlying web components in your app entry point, for example `src import "@abgov/web-components"; ``` -Import the styles in your main stylesheet: +Import the component styles in your main stylesheet. This stylesheet includes the design tokens and dark theme overrides: ```css @import "@abgov/web-components/index.css"; -@import "@abgov/design-tokens/dist/tokens.css"; ``` Add Ionicons to your `index.html` ``: @@ -104,7 +101,7 @@ Supported Angular versions in the current docs: `18`, `19`, `20`, `21`. Install the packages: ```bash -npm i @abgov/web-components @abgov/angular-components @abgov/ui-components-common @abgov/design-tokens +npm i @abgov/web-components @abgov/angular-components @abgov/ui-components-common ``` Add Ionicons to `src/index.html`: @@ -135,11 +132,10 @@ export class AppModule {} If your Angular app uses standalone bootstrapping instead of `AppModule`, use the same package installs, web component import, styles, and Ionicons setup, then adapt the module example to your bootstrap configuration. -Import the styles in `src/styles.css`: +Import the component styles in `src/styles.css`. This stylesheet includes the design tokens and dark theme overrides: ```css @import "@abgov/web-components/index.css"; -@import "@abgov/design-tokens/dist/tokens.css"; ``` ## Local development diff --git a/apps/prs/angular/project.json b/apps/prs/angular/project.json index 0616e2eac4..a2d65563a1 100644 --- a/apps/prs/angular/project.json +++ b/apps/prs/angular/project.json @@ -25,17 +25,9 @@ "tsConfig": "apps/prs/angular/tsconfig.app.json", "assets": [ "apps/prs/angular/src/favicon.ico", - "apps/prs/angular/src/assets", - { - "glob": "**/*", - "input": "node_modules/@abgov/design-tokens-v2/dist", - "output": "/v2-tokens" - } - ], - "styles": [ - "apps/prs/angular/src/styles.css", - "node_modules/@abgov/design-tokens-v2/dist/tokens.css" + "apps/prs/angular/src/assets" ], + "styles": ["apps/prs/angular/src/styles.css"], "scripts": [] }, "configurations": { diff --git a/apps/prs/angular/src/app/app.component.html b/apps/prs/angular/src/app/app.component.html index 258080a3b2..e2a115caed 100644 --- a/apps/prs/angular/src/app/app.component.html +++ b/apps/prs/angular/src/app/app.component.html @@ -8,16 +8,11 @@ userSecondaryText="edna.mode@gov.ab.ca" (onNavigate)="handleNavigate($event)" [primaryContent]="primaryTemplate" - [secondaryContent]="tokenToggleTemplate" + [secondaryContent]="secondaryTemplate" [accountContent]="accountTemplate" /> - - + i + 1); // Sample notifications for the work-side-menu notification panel (#4110 test). @@ -168,11 +158,6 @@ export class AppComponent { } handleNavigate(path: string): void { - if (path === TOKEN_TOGGLE_URL) { - this.tokenMode = this.tokenMode === "v1" ? "v2" : "v1"; - applyTokenVersion(this.tokenMode); - return; - } if (path === "#toggle-theme") { this.theme.toggle(); return; diff --git a/apps/prs/angular/src/app/token-version/token-version.ts b/apps/prs/angular/src/app/token-version/token-version.ts deleted file mode 100644 index 2a5e66a6db..0000000000 --- a/apps/prs/angular/src/app/token-version/token-version.ts +++ /dev/null @@ -1,50 +0,0 @@ -export type TokenVersion = "v1" | "v2"; - -const STORAGE_KEY = "goa-token-version"; -const LINK_ID = "goa-tokens-v2"; -const URL_PARAM = "tokens"; - -// Served at this path via the asset copy configured in project.json. -// Relative URL so it resolves against document.baseURI, which respects -// the deploy base on PR preview builds (an absolute /v2-tokens/... would -// 404 against the host root instead of the app's deploy path). -const V2_TOKENS_URL = "v2-tokens/tokens.css"; - -export function resolveTokenVersion(): TokenVersion { - const params = new URLSearchParams(window.location.search); - const fromUrl = params.get(URL_PARAM); - if (fromUrl === "v1" || fromUrl === "v2") return fromUrl; - - const fromSession = sessionStorage.getItem(STORAGE_KEY); - if (fromSession === "v1" || fromSession === "v2") return fromSession; - - return "v2"; -} - -export function applyTokenVersion(mode: TokenVersion): void { - // Link-ordering invariant: V2 stylesheet must be the LAST stylesheet in - // so cascade resolves V2 over V1 unambiguously. Remove any existing - // node first, then append so the fresh node lands last. - document.getElementById(LINK_ID)?.remove(); - - if (mode === "v2") { - const link = document.createElement("link"); - link.id = LINK_ID; - link.rel = "stylesheet"; - link.href = V2_TOKENS_URL; - document.head.appendChild(link); - } - - sessionStorage.setItem(STORAGE_KEY, mode); - - // Only sync URL param if already present; don't add clutter on first toggle. - const url = new URL(window.location.href); - if (url.searchParams.has(URL_PARAM)) { - url.searchParams.set(URL_PARAM, mode); - window.history.replaceState({}, "", url); - } -} - -// Eager side effect: resolve and apply at module load so V2 is in -// before Angular bootstraps. Import this module once from main.ts. -applyTokenVersion(resolveTokenVersion()); diff --git a/apps/prs/angular/src/main.ts b/apps/prs/angular/src/main.ts index 91e46900ae..c8de31031e 100644 --- a/apps/prs/angular/src/main.ts +++ b/apps/prs/angular/src/main.ts @@ -1,19 +1,6 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app/app.module"; -// This import has a side effect: token-version.ts calls applyTokenVersion at -// module load, which puts the V2 stylesheet link in before Angular -// bootstraps. Without this, the page would flash V1 on first paint. -import { - applyTokenVersion, - resolveTokenVersion, -} from "./app/token-version/token-version"; platformBrowserDynamic() .bootstrapModule(AppModule) - .then(() => { - // Re-apply after Angular's bundled styles.css is in , so the V2 - // link lands last in the cascade. Without this, the bundled V1 @import - // overrides V2 and the toggle appears to do nothing. - applyTokenVersion(resolveTokenVersion()); - }) .catch((err) => console.error(err)); diff --git a/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.html b/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.html index 9cd9f2eebf..0e8b938549 100644 --- a/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.html +++ b/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.html @@ -93,3 +93,25 @@

States

+ +

Select all

+ + + + + + + + + +

Value: {{ selectAllValues | json }}

diff --git a/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.ts b/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.ts index 8e421a43c9..cbfa5e8c7a 100644 --- a/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.ts +++ b/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.ts @@ -4,7 +4,10 @@ import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angul import { GoabCheckbox, GoabCheckboxList, GoabFormItem, GoabTextArea, } from "@abgov/angular-components"; -import type { GoabCheckboxListOnChangeDetail } from "@abgov/ui-components-common"; +import type { + GoabCheckboxListOnChangeDetail, + GoabCheckboxOnChangeDetail, +} from "@abgov/ui-components-common"; @Component({ standalone: true, @@ -21,8 +24,26 @@ export class DocsCheckboxListComponent { }); ngModelInterests: string[] = []; + readonly selectAllOptions = ["email", "text", "push"]; + selectAllValues: string[] = []; + + get allOptionsSelected(): boolean { + return this.selectAllValues.length === this.selectAllOptions.length; + } + + get someOptionsSelected(): boolean { + return this.selectAllValues.length > 0 && !this.allOptionsSelected; + } checkboxListOnChange(event: GoabCheckboxListOnChangeDetail): void { console.log(event); } + + selectAllOnChange(event: GoabCheckboxOnChangeDetail): void { + this.selectAllValues = event.checked ? [...this.selectAllOptions] : []; + } + + selectAllListOnChange(event: GoabCheckboxListOnChangeDetail): void { + this.selectAllValues = event.value; + } } diff --git a/apps/prs/angular/src/styles.css b/apps/prs/angular/src/styles.css index 8078d0e064..963ef40b19 100644 --- a/apps/prs/angular/src/styles.css +++ b/apps/prs/angular/src/styles.css @@ -1,7 +1,5 @@ /* You can add global styles to this file, and also import other style files */ @import "../../../../dist/libs/web-components/index.css"; -@import "@abgov/design-tokens-v2/dist/tokens.css"; -@import "@abgov/design-tokens-v2/dist/dark-theme.css"; :root { --goa-space-fill: 32ch; diff --git a/apps/prs/react/src/app/app.tsx b/apps/prs/react/src/app/app.tsx index 9467aac0d1..34ec735db5 100644 --- a/apps/prs/react/src/app/app.tsx +++ b/apps/prs/react/src/app/app.tsx @@ -22,15 +22,6 @@ import { featureRouteDefinitions, } from "./route-manifest"; import "@abgov/style"; -// Runtime V1/V2 token switching. Importing this module applies the currently -// selected token set (default V2) to before the app renders. The -// playground's work-side-menu exposes a secondary item that flips between -// V1 and V2 at runtime without editing source or restarting the dev server. -import { - applyTokenVersion, - resolveTokenVersion, - type TokenVersion, -} from "./tokenVersion"; const PUSH_DRAWER_ROUTE_PATH = "/features/3347-push"; const pushDrawerTestParagraphs = Array.from({ length: 30 }, (_, i) => i + 1); @@ -93,9 +84,6 @@ export interface AppOutletContext { openPushDrawer: () => void; } -// Sentinel URL handled by onNavigate below to toggle tokens instead of routing. -const TOKEN_TOGGLE_URL = "#tokens"; - // Demo: a slotted page-header that shrinks its heading once content scrolls // under the pinned header. It reads the layout's scroll state via the context // hook (no prop drilling), using the same middle / at-bottom states that drive @@ -139,7 +127,6 @@ export function App() { const isDark = mode === "dark"; const location = useLocation(); const baseUrl = import.meta.env.BASE_URL; - const [tokenMode, setTokenMode] = useState(() => resolveTokenVersion()); const isPushDrawerRoute = location.pathname === PUSH_DRAWER_ROUTE_PATH || @@ -165,12 +152,6 @@ export function App() { ); const handleSideMenuNavigate = (path: string) => { - if (path === TOKEN_TOGGLE_URL) { - const next: TokenVersion = tokenMode === "v1" ? "v2" : "v1"; - setTokenMode(next); - applyTokenVersion(next); - return; - } if (path === "#toggle-theme") { toggle(); return; @@ -214,11 +195,6 @@ export function App() { onNavigate={handleSideMenuNavigate} secondaryContent={ <> - so cascade resolves V2 over V1 unambiguously. Remove any existing - // node first, then append so the fresh node lands last. - document.getElementById(LINK_ID)?.remove(); - - if (mode === "v2") { - const link = document.createElement("link"); - link.id = LINK_ID; - link.rel = "stylesheet"; - link.href = v2TokensUrl; - document.head.appendChild(link); - } - - sessionStorage.setItem(STORAGE_KEY, mode); - - // Only sync URL param if it's already in the URL; don't add clutter on first toggle. - const url = new URL(window.location.href); - if (url.searchParams.has(URL_PARAM)) { - url.searchParams.set(URL_PARAM, mode); - window.history.replaceState({}, "", url); - } -} - -// Eager side effect: resolve and apply at module load so V2 is in -// before React's first paint. Importing this module once from app.tsx runs this. -applyTokenVersion(resolveTokenVersion()); diff --git a/apps/prs/react/src/routes/docs/checkbox-list/checkbox-list.tsx b/apps/prs/react/src/routes/docs/checkbox-list/checkbox-list.tsx index b90aca5a17..f1947321fe 100644 --- a/apps/prs/react/src/routes/docs/checkbox-list/checkbox-list.tsx +++ b/apps/prs/react/src/routes/docs/checkbox-list/checkbox-list.tsx @@ -4,8 +4,15 @@ import { GoabFormItem, GoabTextArea, } from "@abgov/react-components"; +import { useState } from "react"; + +const selectAllOptions = ["email", "text", "push"]; export function DocsCheckboxListRoute() { + const [selectAllValues, setSelectAllValues] = useState([]); + const allOptionsSelected = selectAllValues.length === selectAllOptions.length; + const someOptionsSelected = selectAllValues.length > 0 && !allOptionsSelected; + return (

Checkbox list

@@ -76,6 +83,31 @@ export function DocsCheckboxListRoute() { + +

Select all

+ + + setSelectAllValues(detail.checked ? [...selectAllOptions] : []) + } + mb="m" + /> + setSelectAllValues(detail.value)} + > + + + + + +

Value: {JSON.stringify(selectAllValues)}

); } diff --git a/apps/prs/react/src/routes/features/feat3636.tsx b/apps/prs/react/src/routes/features/feat3636.tsx index 21d46d62e1..3c41cf2504 100644 --- a/apps/prs/react/src/routes/features/feat3636.tsx +++ b/apps/prs/react/src/routes/features/feat3636.tsx @@ -1,19 +1,6 @@ import { GoabAccordion, GoabBadge, GoabButton, GoabText } from "@abgov/react-components"; -import v2TokensUrl from "@abgov/design-tokens-v2/dist/tokens.css?url"; -import { useEffect } from "react"; export function Feat3636Route() { - // Inject the v2 design tokens - useEffect(() => { - const link = document.createElement("link"); - link.rel = "stylesheet"; - link.href = v2TokensUrl; - document.head.appendChild(link); - return () => { - document.head.removeChild(link); - }; - }, []); - return (
import "@abgov/style"; - import "@abgov/design-tokens-v2/dist/tokens.css"; // Production tokens. Comment out to test with legacy V1 token values. import { Router, Route } from "svelte-routing"; import Issue2333 from "../routes/2333.svelte"; import Issue3279 from "../routes/3279.svelte"; diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index aa1846f165..8102332492 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -99,14 +99,6 @@ export default defineConfig({ find: "@abgov/style", replacement: path.resolve(workspaceRoot, "dist/libs/web-components/index.css"), }, - // Design tokens V2 for docs styling (via npm alias) - { - find: "@design-tokens", - replacement: path.resolve( - workspaceRoot, - "node_modules/@abgov/design-tokens-v2/dist", - ), - }, // @astrojs/react registers its SSR renderer via the bare specifier // "@astrojs/react/server.js", which Vite then externalizes for the // prerender build instead of bundling it. Externalizing leaves the diff --git a/docs/generated/component-apis/badge.json b/docs/generated/component-apis/badge.json index 5e321a9a84..f7a2c189bf 100644 --- a/docs/generated/component-apis/badge.json +++ b/docs/generated/component-apis/badge.json @@ -193,7 +193,7 @@ "type": "string", "required": false, "default": "", - "description": "Content displayed in the badge. Use the content slot for custom HTML in version 2." + "description": "Content displayed in the badge. Use the content slot for custom HTML." }, { "name": "emphasis", @@ -324,18 +324,6 @@ "required": true, "default": null, "description": "Defines the context and colour of the badge." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "typeLabel": "GoabBadgeVersion", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [], diff --git a/docs/generated/component-apis/button.json b/docs/generated/component-apis/button.json index acf2086066..b9f64ed5d1 100644 --- a/docs/generated/component-apis/button.json +++ b/docs/generated/component-apis/button.json @@ -390,18 +390,6 @@ "default": "normal", "description": "Sets the color variant for semantic meaning. Use \"destructive\" for delete or irreversible actions, \"inverse\" for light-colored text on dark backgrounds, and \"dark\" for dark text color on text buttons only. Note: \"dark\" has no effect on non-text button types." }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "typeLabel": "GoabButtonVersion", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." - }, { "name": "width", "type": "string", diff --git a/docs/generated/component-apis/calendar.json b/docs/generated/component-apis/calendar.json index f19a0558bf..c52562ef38 100644 --- a/docs/generated/component-apis/calendar.json +++ b/docs/generated/component-apis/calendar.json @@ -245,17 +245,6 @@ "required": false, "default": "", "description": "The currently selected date value in YYYY-MM-DD format." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/callout.json b/docs/generated/component-apis/callout.json index 9783888d0a..6dec0a91ec 100644 --- a/docs/generated/component-apis/callout.json +++ b/docs/generated/component-apis/callout.json @@ -296,18 +296,6 @@ "required": true, "default": null, "description": "Define the context and colour of the callout." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "typeLabel": "GoabCalloutVersionType", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [], diff --git a/docs/generated/component-apis/checkbox-list.json b/docs/generated/component-apis/checkbox-list.json index c37eec9a8f..d3c2ae6169 100644 --- a/docs/generated/component-apis/checkbox-list.json +++ b/docs/generated/component-apis/checkbox-list.json @@ -315,17 +315,6 @@ "required": false, "default": "[]", "description": "Array of currently selected checkbox values." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/checkbox.json b/docs/generated/component-apis/checkbox.json index d937c690ca..c960c8b91f 100644 --- a/docs/generated/component-apis/checkbox.json +++ b/docs/generated/component-apis/checkbox.json @@ -488,17 +488,6 @@ "required": false, "default": "", "description": "The value binding." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/date-picker.json b/docs/generated/component-apis/date-picker.json index f15d15c210..9ab2567e7b 100644 --- a/docs/generated/component-apis/date-picker.json +++ b/docs/generated/component-apis/date-picker.json @@ -358,17 +358,6 @@ "default": "", "description": "Sets the calendar date as an ISO date string (yyyy-mm-dd)." }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." - }, { "name": "width", "type": "string", diff --git a/docs/generated/component-apis/drawer.json b/docs/generated/component-apis/drawer.json index 7220a68442..ad28fa35b3 100644 --- a/docs/generated/component-apis/drawer.json +++ b/docs/generated/component-apis/drawer.json @@ -183,17 +183,6 @@ "required": false, "default": "drawer", "description": "Sets a data-testid attribute for automated testing." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/dropdown.json b/docs/generated/component-apis/dropdown.json index 8b64091faf..ffca41e0ad 100644 --- a/docs/generated/component-apis/dropdown.json +++ b/docs/generated/component-apis/dropdown.json @@ -531,17 +531,6 @@ "default": "", "description": "Stores the value of the item selected from the dropdown." }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." - }, { "name": "width", "type": "string", diff --git a/docs/generated/component-apis/filter-chip.json b/docs/generated/component-apis/filter-chip.json index 0834929b6c..23269a71e8 100644 --- a/docs/generated/component-apis/filter-chip.json +++ b/docs/generated/component-apis/filter-chip.json @@ -283,17 +283,6 @@ "required": false, "default": "", "description": "Sets a data-testid attribute for automated testing." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/form-item.json b/docs/generated/component-apis/form-item.json index ae44734fc8..b1188b438a 100644 --- a/docs/generated/component-apis/form-item.json +++ b/docs/generated/component-apis/form-item.json @@ -366,18 +366,6 @@ "required": false, "default": "", "description": "Specifies the input type for appropriate message spacing. Used with checkbox-list or radio-group." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "typeLabel": "GoabFormItemVersionType", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [], diff --git a/docs/generated/component-apis/input.json b/docs/generated/component-apis/input.json index 35d1c10170..ae1ff2fedd 100644 --- a/docs/generated/component-apis/input.json +++ b/docs/generated/component-apis/input.json @@ -848,17 +848,6 @@ "default": "goa", "description": "Sets the visual style variant. 'goa' for standard GoA styling, 'bare' for minimal styling." }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." - }, { "name": "width", "type": "string", diff --git a/docs/generated/component-apis/menu-button.json b/docs/generated/component-apis/menu-button.json index 19afcb6b89..e7ca81f90d 100644 --- a/docs/generated/component-apis/menu-button.json +++ b/docs/generated/component-apis/menu-button.json @@ -215,17 +215,6 @@ "required": false, "default": "normal", "description": "Sets the color variant for semantic meaning." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/modal.json b/docs/generated/component-apis/modal.json index 55b82f057e..e421699e17 100644 --- a/docs/generated/component-apis/modal.json +++ b/docs/generated/component-apis/modal.json @@ -195,18 +195,6 @@ "required": false, "default": "none", "description": "Sets the animation transition when opening/closing. 'fast' or 'slow' for animated, 'none' for instant." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "typeLabel": "GoabModalVersionType", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/notification.json b/docs/generated/component-apis/notification.json index 2a16d6fd14..e91112886c 100644 --- a/docs/generated/component-apis/notification.json +++ b/docs/generated/component-apis/notification.json @@ -177,17 +177,6 @@ "required": false, "default": "", "description": "Define the context and colour of the notification." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/pagination.json b/docs/generated/component-apis/pagination.json index ea374f7ce4..fcc293c569 100644 --- a/docs/generated/component-apis/pagination.json +++ b/docs/generated/component-apis/pagination.json @@ -235,17 +235,6 @@ "required": false, "default": "all", "description": "Controls which nav controls are visible." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/push-drawer.json b/docs/generated/component-apis/push-drawer.json index 8bf53c7314..4381a2c02b 100644 --- a/docs/generated/component-apis/push-drawer.json +++ b/docs/generated/component-apis/push-drawer.json @@ -145,13 +145,6 @@ "default": null, "description": "" }, - { - "name": "version", - "type": "string", - "required": false, - "default": null, - "description": "" - }, { "name": "width", "type": "string", diff --git a/docs/generated/component-apis/radio-group.json b/docs/generated/component-apis/radio-group.json index 5708da1b72..0f6968097c 100644 --- a/docs/generated/component-apis/radio-group.json +++ b/docs/generated/component-apis/radio-group.json @@ -201,7 +201,7 @@ "type": "GoabRadioGroupSize", "required": false, "default": "default", - "description": "Sets the size of all radio items. 'compact' reduces spacing for dense layouts (V2 only)." + "description": "Sets the size of all radio items. 'compact' reduces spacing for dense layouts." }, { "name": "testId", @@ -330,7 +330,7 @@ ], "required": false, "default": "default", - "description": "Sets the size of all radio items. 'compact' reduces spacing for dense layouts (V2 only)." + "description": "Sets the size of all radio items. 'compact' reduces spacing for dense layouts." }, { "name": "testid", @@ -345,18 +345,6 @@ "required": true, "default": null, "description": "The currently selected value in the radio group." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "typeLabel": "GoabRadioGroupVersionType", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/table-sort-header.json b/docs/generated/component-apis/table-sort-header.json index 3f7e75debe..b813ea4a46 100644 --- a/docs/generated/component-apis/table-sort-header.json +++ b/docs/generated/component-apis/table-sort-header.json @@ -88,17 +88,6 @@ "required": false, "default": "0", "description": "Sort order number for multi-column sort display (\"1\", \"2\", etc)." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [], diff --git a/docs/generated/component-apis/table.json b/docs/generated/component-apis/table.json index f8e6aa3915..9586ac3ea0 100644 --- a/docs/generated/component-apis/table.json +++ b/docs/generated/component-apis/table.json @@ -246,18 +246,6 @@ "default": "normal", "description": "A relaxed variant of the table with more vertical padding for the cells." }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "typeLabel": "GoabTableVersionType", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." - }, { "name": "width", "type": "string", diff --git a/docs/generated/component-apis/tabs.json b/docs/generated/component-apis/tabs.json index 2d48620626..19fc937460 100644 --- a/docs/generated/component-apis/tabs.json +++ b/docs/generated/component-apis/tabs.json @@ -150,17 +150,6 @@ "required": false, "default": "default", "description": "Visual style variant. \"segmented\" shows pill-style tabs with animation." - }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." } ], "events": [ diff --git a/docs/generated/component-apis/text-area.json b/docs/generated/component-apis/text-area.json index 1ae31a81ca..41d80bf2da 100644 --- a/docs/generated/component-apis/text-area.json +++ b/docs/generated/component-apis/text-area.json @@ -500,17 +500,6 @@ "default": "", "description": "Bound to value" }, - { - "name": "version", - "type": "\"1\" | \"2\"", - "values": [ - "1", - "2" - ], - "required": false, - "default": "1", - "description": "Design system version for styling." - }, { "name": "width", "type": "string", diff --git a/docs/package-lock.json b/docs/package-lock.json index da48fe4981..c5492a2b03 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -8,7 +8,7 @@ "name": "docs", "version": "0.0.1", "dependencies": { - "@abgov/design-tokens-v2": "npm:@abgov/design-tokens@^2.9.0", + "@abgov/design-tokens": "^2.12.8", "@abgov/react-components": "*", "@abgov/ui-components-common": "*", "@abgov/web-components": "*", @@ -18,11 +18,10 @@ "tsx": "^4.22.4" } }, - "node_modules/@abgov/design-tokens-v2": { - "name": "@abgov/design-tokens", - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/@abgov/design-tokens/-/design-tokens-2.9.0.tgz", - "integrity": "sha512-Z3+wHUhLHCKJDXUBR0KpGBod5k5Jk+ehRNUC9J2OJZ0jcK3jF2/Ggeqhhze7+haiS0FdC1cikqT9vCnKZItU8Q==" + "node_modules/@abgov/design-tokens": { + "version": "2.12.8", + "resolved": "https://registry.npmjs.org/@abgov/design-tokens/-/design-tokens-2.12.8.tgz", + "integrity": "sha512-63jbdc6t9/XFwwPWKAiizjOsiAr58lELD1autKJaGCgrzsLGfKciXgl9pbMP0nwsxpkpX26rrh2CYQ4OE8tQXw==" }, "node_modules/@abgov/react-components": { "version": "6.9.3", diff --git a/docs/package.json b/docs/package.json index b4e815b28f..d626f8a2e2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,7 +15,7 @@ "verify-bundle": "npx tsx src/scripts/content-generators/verify-bundle.ts" }, "dependencies": { - "@abgov/design-tokens-v2": "npm:@abgov/design-tokens@^2.9.0", + "@abgov/design-tokens": "^2.12.8", "@abgov/react-components": "*", "@abgov/ui-components-common": "*", "@abgov/web-components": "*", diff --git a/docs/src/components/CardLite.astro b/docs/src/components/CardLite.astro index 59bb46a21e..506b309313 100644 --- a/docs/src/components/CardLite.astro +++ b/docs/src/components/CardLite.astro @@ -28,7 +28,7 @@ const isDisabled = !linkTo; {description} - +
) : ( diff --git a/docs/src/components/ComponentsGrid.tsx b/docs/src/components/ComponentsGrid.tsx index fba586356a..07c13af8ca 100644 --- a/docs/src/components/ComponentsGrid.tsx +++ b/docs/src/components/ComponentsGrid.tsx @@ -186,9 +186,6 @@ export function ComponentsGrid({ components }: ComponentsGridProps) { const table = tableRef.current; if (!table) return; - // Explicitly set version attribute for V2 styling - table.setAttribute("version", "2"); - const handleMultiSort = (e: Event) => { const detail = ( e as CustomEvent<{ sorts: { column: string; direction: "asc" | "desc" }[] }> @@ -566,7 +563,6 @@ export function ComponentsGrid({ components }: ComponentsGridProps) { {/* Category badge only - status shown in table view */}
diff --git a/docs/src/components/ExamplesGrid.tsx b/docs/src/components/ExamplesGrid.tsx index 61da18b83e..1e3ffd9188 100644 --- a/docs/src/components/ExamplesGrid.tsx +++ b/docs/src/components/ExamplesGrid.tsx @@ -208,14 +208,10 @@ export function ExamplesGrid({ examples }: ExamplesGridProps) { }); // Listen for table sort events (from goa-table web component) - // Also explicitly set version="2" attribute since React may not set it correctly on custom elements useEffect(() => { const table = tableRef.current; if (!table) return; - // Explicitly set version attribute for V2 styling (React doesn't always set attributes on custom elements) - table.setAttribute("version", "2"); - const handleMultiSort = (e: Event) => { const detail = ( e as CustomEvent<{ sorts: { column: string; direction: "asc" | "desc" }[] }> @@ -574,7 +570,6 @@ export function ExamplesGrid({ examples }: ExamplesGridProps) { {/* Metadata badges */}
{example.data.productType && ( ( {example.data.productType && ( (
{moreUrl && ( - + More info )} {demoUrl && ( - + View demo )} {previewUrl && ( - + Live preview )} diff --git a/docs/src/components/PropsTable.astro b/docs/src/components/PropsTable.astro index 825e590549..f8d87ef496 100644 --- a/docs/src/components/PropsTable.astro +++ b/docs/src/components/PropsTable.astro @@ -189,7 +189,6 @@ const initialVisibleFramework =

{prefix}Props

{badge && ( {prop.name} {prop.required && ( {prefix}Events {badge && ( {badge && ( {slot.name} {slot.required && ( {param.name} {param.required && ( - + )}
diff --git a/docs/src/components/TokensGrid.tsx b/docs/src/components/TokensGrid.tsx index 7bd2c59108..b8fd867c36 100644 --- a/docs/src/components/TokensGrid.tsx +++ b/docs/src/components/TokensGrid.tsx @@ -757,7 +757,6 @@ export function TokensGrid({ tokens, filterGroups }: TokensGridProps) { />