diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js index 5cacfb96f9..8d71a74a6a 100644 --- a/build-tools/utils/pluralize.js +++ b/build-tools/utils/pluralize.js @@ -1,6 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 const pluralizationMap = { + ActionCard: 'ActionCards', Alert: 'Alerts', AnchorNavigation: 'AnchorNavigations', Annotation: 'Annotations', diff --git a/package-lock.json b/package-lock.json index 66823ea2d9..8a29a2d85a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "date-fns": "^2.25.0", "intl-messageformat": "^10.3.1", "mnth": "^2.0.0", - "react-keyed-flatten-children": "^2.2.1", + "react-is": "^18.2.0", "react-transition-group": "^4.4.2", "tslib": "^2.4.0", "weekstart": "^1.1.0" @@ -53,6 +53,7 @@ "@types/node": "^20.17.14", "@types/react": "^16.14.20", "@types/react-dom": "^16.9.14", + "@types/react-is": "^18.2.0", "@types/react-router": "^5.1.18", "@types/react-router-dom": "^5.3.2", "@types/react-test-renderer": "^16.9.12", @@ -2397,11 +2398,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/@jest/core/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/@jest/core/node_modules/strip-ansi": { "version": "6.0.1", "dev": true, @@ -4504,11 +4500,6 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, - "node_modules/@types/jest/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/@types/jsdom": { "version": "20.0.1", "dev": true, @@ -4591,6 +4582,16 @@ "@types/react": "^16" } }, + "node_modules/@types/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-zts4lhQn5ia0cF/y2+3V6Riu0MAfez9/LJYavdM8TvcVl+S91A/7VWxyBT8hbRuWspmuCaiGI0F41OJYGrKhRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react": "^18" + } + }, "node_modules/@types/react-router": { "version": "5.1.20", "dev": true, @@ -9938,14 +9939,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/expect-webdriverio/node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", - "dev": true, - "license": "MIT", - "peer": true - }, "node_modules/express": { "version": "4.22.1", "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz", @@ -12818,11 +12811,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-circus/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-cli": { "version": "29.7.0", "dev": true, @@ -13040,11 +13028,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-config/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-diff": { "version": "29.7.0", "dev": true, @@ -13098,11 +13081,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-diff/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-docblock": { "version": "29.7.0", "dev": true, @@ -13168,11 +13146,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-each/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-environment-jsdom": { "version": "29.7.0", "dev": true, @@ -13311,11 +13284,6 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, - "node_modules/jest-leak-detector/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-matcher-utils": { "version": "29.7.0", "dev": true, @@ -13369,11 +13337,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-matcher-utils/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-message-util": { "version": "29.7.0", "dev": true, @@ -13432,11 +13395,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-message-util/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-mock": { "version": "29.7.0", "dev": true, @@ -13740,11 +13698,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-snapshot/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-snapshot/node_modules/semver": { "version": "7.7.2", "dev": true, @@ -13864,11 +13817,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-validate/node_modules/react-is": { - "version": "18.3.1", - "dev": true, - "license": "MIT" - }, "node_modules/jest-watcher": { "version": "29.7.0", "dev": true, @@ -16998,6 +16946,13 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/pretty-format/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true, + "license": "MIT" + }, "node_modules/process": { "version": "0.11.10", "dev": true, @@ -17412,22 +17367,9 @@ } }, "node_modules/react-is": { - "version": "17.0.2", - "dev": true, - "license": "MIT" - }, - "node_modules/react-keyed-flatten-children": { - "version": "2.2.1", - "license": "MIT", - "dependencies": { - "react-is": "^18.2.0" - }, - "peerDependencies": { - "react": ">=15.0.0" - } - }, - "node_modules/react-keyed-flatten-children/node_modules/react-is": { "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "license": "MIT" }, "node_modules/react-router": { diff --git a/pages/action-card/simple.page.tsx b/pages/action-card/simple.page.tsx new file mode 100644 index 0000000000..b26212904b --- /dev/null +++ b/pages/action-card/simple.page.tsx @@ -0,0 +1,50 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import * as React from 'react'; + +import { ActionCard, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +export default function ActionCardSimplePage() { + const [clickedCard, setClickedCard] = React.useState(null); + + return ( + + +
Last clicked: {clickedCard ?? 'None'}
+ +
+ + EC2 access to S3} + description="A description of the template/icebreaker" + iconName="angle-right" + iconPosition="right" + iconVerticalAlignment="top" + onClick={() => setClickedCard('Basic')} + > + EC2 access to S3} + description="A description of the template/icebreaker" + iconName="arrow-right" + iconPosition="right" + iconVerticalAlignment="top" + onClick={() => setClickedCard('Basic')} + > + Account alias (111112222233333)} + description="Dev/john.doe@amazon.com" + iconName="angle-right" + iconPosition="right" + iconVerticalAlignment="top" + onClick={() => setClickedCard('Basic')} + > + Logged in 1 minute ago + + +
+ + + ); +} diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 572bdf161b..675cb0a342 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -21,6 +21,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-link-focus-ring-shadow-spread": "0px", "border-panel-header-width": "0px", "border-panel-top-width": "0px", + "border-radius-action-card": "0px", "border-radius-alert": "2px", "border-radius-badge": "16px", "border-radius-button": "2px", @@ -41,6 +42,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-radius-token": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "1px", "border-width-button": "1px", "border-width-dropdown": "1px", @@ -53,6 +57,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#d1f1ff", + "color-background-action-card-default": "#ffffff", + "color-background-action-card-hover": "#f1faff", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#d13212", @@ -155,6 +162,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-black": "#000000", "color-board-placeholder-active": "#d5dbdb", "color-board-placeholder-hover": "#99cbe4", + "color-border-action-card-active": "#002b66", + "color-border-action-card-default": "#aab7b8", + "color-border-action-card-hover": "#0073bb", "color-border-button-normal-active": "#545b64", "color-border-button-normal-default": "#545b64", "color-border-button-normal-disabled": "#d5dbdb", @@ -667,6 +677,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "size-table-selection-horizontal": "54px", "size-vertical-input": "28px", "size-vertical-panel-icon-offset": "13px", + "space-action-card-content-padding-top": "8px", + "space-action-card-description-padding-top": "2px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "16px", "space-alert-action-left": "20px", "space-alert-horizontal": "20px", "space-alert-message-right": "0px", @@ -786,6 +800,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-link-focus-ring-shadow-spread": "0px", "border-panel-header-width": "0px", "border-panel-top-width": "0px", + "border-radius-action-card": "0px", "border-radius-alert": "2px", "border-radius-badge": "16px", "border-radius-button": "2px", @@ -806,6 +821,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-radius-token": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "1px", "border-width-button": "1px", "border-width-dropdown": "1px", @@ -818,6 +836,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#414750", + "color-background-action-card-default": "#1a2029", + "color-background-action-card-hover": "#21252c", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#ff5d64", @@ -920,6 +941,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-black": "#000000", "color-board-placeholder-active": "#687078", "color-board-placeholder-hover": "#0073bb", + "color-border-action-card-active": "#44b9d6", + "color-border-action-card-default": "#687078", + "color-border-action-card-hover": "#00a1c9", "color-border-button-normal-active": "#879596", "color-border-button-normal-default": "#879596", "color-border-button-normal-disabled": "#414750", @@ -1432,6 +1456,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "size-table-selection-horizontal": "54px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", + "space-action-card-content-padding-top": "12px", + "space-action-card-description-padding-top": "4px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "16px", "space-alert-action-left": "20px", "space-alert-horizontal": "20px", "space-alert-message-right": "0px", @@ -1551,6 +1579,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-link-focus-ring-shadow-spread": "0px", "border-panel-header-width": "0px", "border-panel-top-width": "0px", + "border-radius-action-card": "0px", "border-radius-alert": "2px", "border-radius-badge": "16px", "border-radius-button": "2px", @@ -1571,6 +1600,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-radius-token": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "1px", "border-width-button": "1px", "border-width-dropdown": "1px", @@ -1583,6 +1615,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#d1f1ff", + "color-background-action-card-default": "#ffffff", + "color-background-action-card-hover": "#f1faff", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#d13212", @@ -1685,6 +1720,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-black": "#000000", "color-board-placeholder-active": "#d5dbdb", "color-board-placeholder-hover": "#99cbe4", + "color-border-action-card-active": "#002b66", + "color-border-action-card-default": "#aab7b8", + "color-border-action-card-hover": "#0073bb", "color-border-button-normal-active": "#545b64", "color-border-button-normal-default": "#545b64", "color-border-button-normal-disabled": "#d5dbdb", @@ -2197,6 +2235,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "size-table-selection-horizontal": "54px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", + "space-action-card-content-padding-top": "12px", + "space-action-card-description-padding-top": "4px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "16px", "space-alert-action-left": "20px", "space-alert-horizontal": "20px", "space-alert-message-right": "0px", @@ -2316,6 +2358,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-link-focus-ring-shadow-spread": "0px", "border-panel-header-width": "0px", "border-panel-top-width": "0px", + "border-radius-action-card": "0px", "border-radius-alert": "2px", "border-radius-badge": "16px", "border-radius-button": "2px", @@ -2336,6 +2379,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-radius-token": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "1px", "border-width-button": "1px", "border-width-dropdown": "1px", @@ -2348,6 +2394,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#d1f1ff", + "color-background-action-card-default": "#ffffff", + "color-background-action-card-hover": "#f1faff", "color-background-avatar-default": "#545b64", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#d13212", @@ -2450,6 +2499,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-black": "#000000", "color-board-placeholder-active": "#d5dbdb", "color-board-placeholder-hover": "#99cbe4", + "color-border-action-card-active": "#002b66", + "color-border-action-card-default": "#aab7b8", + "color-border-action-card-hover": "#0073bb", "color-border-button-normal-active": "#545b64", "color-border-button-normal-default": "#545b64", "color-border-button-normal-disabled": "#d5dbdb", @@ -2962,6 +3014,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "size-table-selection-horizontal": "54px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", + "space-action-card-content-padding-top": "12px", + "space-action-card-description-padding-top": "4px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "16px", "space-alert-action-left": "20px", "space-alert-horizontal": "20px", "space-alert-message-right": "0px", @@ -3081,6 +3137,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-link-focus-ring-shadow-spread": "2px", "border-panel-header-width": "1px", "border-panel-top-width": "1px", + "border-radius-action-card": "16px", "border-radius-alert": "12px", "border-radius-badge": "4px", "border-radius-button": "20px", @@ -3101,6 +3158,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-radius-token": "8px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "2px", "border-width-button": "2px", "border-width-dropdown": "2px", @@ -3113,6 +3173,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#d1f1ff", + "color-background-action-card-default": "#ffffff", + "color-background-action-card-hover": "#f0fbff", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#db0000", @@ -3215,6 +3278,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-black": "#000000", "color-board-placeholder-active": "#ebebf0", "color-board-placeholder-hover": "#d1f1ff", + "color-border-action-card-active": "#002b66", + "color-border-action-card-default": "#006ce0", + "color-border-action-card-hover": "#002b66", "color-border-button-normal-active": "#002b66", "color-border-button-normal-default": "#006ce0", "color-border-button-normal-disabled": "#b4b4bb", @@ -3727,6 +3793,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "size-table-selection-horizontal": "40px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", + "space-action-card-content-padding-top": "8px", + "space-action-card-description-padding-top": "4px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "16px", "space-alert-action-left": "12px", "space-alert-horizontal": "16px", "space-alert-message-right": "4px", @@ -3846,6 +3916,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-link-focus-ring-shadow-spread": "2px", "border-panel-header-width": "1px", "border-panel-top-width": "1px", + "border-radius-action-card": "16px", "border-radius-alert": "12px", "border-radius-badge": "4px", "border-radius-button": "20px", @@ -3866,6 +3937,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-token": "8px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "2px", "border-width-button": "2px", "border-width-dropdown": "2px", @@ -3878,6 +3952,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#d1f1ff", + "color-background-action-card-default": "#ffffff", + "color-background-action-card-hover": "#f0fbff", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#db0000", @@ -3980,6 +4057,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-black": "#000000", "color-board-placeholder-active": "#ebebf0", "color-board-placeholder-hover": "#d1f1ff", + "color-border-action-card-active": "#002b66", + "color-border-action-card-default": "#006ce0", + "color-border-action-card-hover": "#002b66", "color-border-button-normal-active": "#002b66", "color-border-button-normal-default": "#006ce0", "color-border-button-normal-disabled": "#b4b4bb", @@ -4492,6 +4572,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "size-table-selection-horizontal": "40px", "size-vertical-input": "28px", "size-vertical-panel-icon-offset": "13px", + "space-action-card-content-padding-top": "4px", + "space-action-card-description-padding-top": "2px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "12px", "space-alert-action-left": "12px", "space-alert-horizontal": "16px", "space-alert-message-right": "4px", @@ -4611,6 +4695,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-link-focus-ring-shadow-spread": "2px", "border-panel-header-width": "1px", "border-panel-top-width": "1px", + "border-radius-action-card": "16px", "border-radius-alert": "12px", "border-radius-badge": "4px", "border-radius-button": "20px", @@ -4631,6 +4716,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-token": "8px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "2px", "border-width-button": "2px", "border-width-dropdown": "2px", @@ -4643,6 +4731,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#333843", + "color-background-action-card-default": "#161d26", + "color-background-action-card-hover": "#1b232d", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#ff7a7a", @@ -4745,6 +4836,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-black": "#000000", "color-board-placeholder-active": "#656871", "color-board-placeholder-hover": "#006ce0", + "color-border-action-card-active": "#75cfff", + "color-border-action-card-default": "#656871", + "color-border-action-card-hover": "#42b4ff", "color-border-button-normal-active": "#75cfff", "color-border-button-normal-default": "#42b4ff", "color-border-button-normal-disabled": "#656871", @@ -5257,6 +5351,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "size-table-selection-horizontal": "40px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", + "space-action-card-content-padding-top": "8px", + "space-action-card-description-padding-top": "4px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "16px", "space-alert-action-left": "12px", "space-alert-horizontal": "16px", "space-alert-message-right": "4px", @@ -5376,6 +5474,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-link-focus-ring-shadow-spread": "2px", "border-panel-header-width": "1px", "border-panel-top-width": "1px", + "border-radius-action-card": "16px", "border-radius-alert": "12px", "border-radius-badge": "4px", "border-radius-button": "20px", @@ -5396,6 +5495,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-token": "8px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", + "border-width-action-card-active": "1px", + "border-width-action-card-default": "1px", + "border-width-action-card-hover": "1px", "border-width-alert": "2px", "border-width-button": "2px", "border-width-dropdown": "2px", @@ -5408,6 +5510,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", + "color-background-action-card-active": "#333843", + "color-background-action-card-default": "#161d26", + "color-background-action-card-hover": "#1b232d", "color-background-avatar-default": "#424650", "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)", "color-background-badge-icon": "#ff7a7a", @@ -5510,6 +5615,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-black": "#000000", "color-board-placeholder-active": "#656871", "color-board-placeholder-hover": "#006ce0", + "color-border-action-card-active": "#75cfff", + "color-border-action-card-default": "#656871", + "color-border-action-card-hover": "#42b4ff", "color-border-button-normal-active": "#75cfff", "color-border-button-normal-default": "#42b4ff", "color-border-button-normal-disabled": "#656871", @@ -6022,6 +6130,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "size-table-selection-horizontal": "40px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", + "space-action-card-content-padding-top": "8px", + "space-action-card-description-padding-top": "4px", + "space-action-card-padding-horizontal": "20px", + "space-action-card-padding-vertical": "16px", "space-alert-action-left": "12px", "space-alert-horizontal": "16px", "space-alert-message-right": "4px", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index a9d7d4e3c7..715861a0d0 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -5,6 +5,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "contexts": { "alert": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "0px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "2px", @@ -77,6 +81,18 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "1px", @@ -121,6 +137,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of tokens.", "$value": "1px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#414750", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#1a2029", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#21252c", + "light": "#f1faff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -583,6 +620,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#99cbe4", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#44b9d6", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#687078", + "light": "#aab7b8", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -2587,6 +2645,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -2738,6 +2810,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, "app-layout-tools-drawer-trigger": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "0px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "2px", @@ -2810,6 +2886,18 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "1px", @@ -2854,6 +2942,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of tokens.", "$value": "1px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#414750", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#1a2029", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#21252c", + "light": "#f1faff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -3316,6 +3425,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#99cbe4", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#44b9d6", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#687078", + "light": "#aab7b8", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -5320,6 +5450,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -5471,6 +5615,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, "compact-table": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "0px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "2px", @@ -5543,6 +5691,18 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "1px", @@ -5587,6 +5747,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of tokens.", "$value": "1px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#414750", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#1a2029", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#21252c", + "light": "#f1faff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -6049,6 +6230,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#99cbe4", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#44b9d6", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#687078", + "light": "#aab7b8", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -8053,6 +8255,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -8204,6 +8420,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, "flashbar": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "0px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "2px", @@ -8276,6 +8496,18 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "1px", @@ -8320,6 +8552,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of tokens.", "$value": "1px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#414750", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#1a2029", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#21252c", + "light": "#f1faff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -8782,6 +9035,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#99cbe4", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#44b9d6", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#687078", + "light": "#aab7b8", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -10786,6 +11060,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -10937,6 +11225,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, "flashbar-warning": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "0px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "2px", @@ -11009,6 +11301,18 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "1px", @@ -11053,6 +11357,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of tokens.", "$value": "1px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#414750", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#1a2029", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#21252c", + "light": "#f1faff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -11515,6 +11840,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#99cbe4", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#44b9d6", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#687078", + "light": "#aab7b8", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -13519,6 +13865,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -13670,6 +14030,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, "top-navigation": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "0px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "2px", @@ -13742,6 +14106,18 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "1px", @@ -13786,6 +14162,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of tokens.", "$value": "1px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#414750", + "light": "#414750", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#1a2029", + "light": "#1a2029", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#21252c", + "light": "#21252c", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -14248,6 +14645,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#0073bb", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#44b9d6", + "light": "#44b9d6", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#687078", + "light": "#687078", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#00a1c9", + "light": "#00a1c9", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -16252,6 +16670,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -16403,6 +16835,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "0px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "2px", @@ -16475,6 +16911,18 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "1px", @@ -16519,6 +16967,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of tokens.", "$value": "1px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#414750", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#1a2029", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#21252c", + "light": "#f1faff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -16981,6 +17450,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#99cbe4", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#44b9d6", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#687078", + "light": "#aab7b8", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -18985,6 +19475,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -19141,6 +19645,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "contexts": { "alert": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -19213,6 +19721,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -19257,6 +19777,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#f0fbff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -19719,6 +20260,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#d1f1ff", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#006ce0", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#002b66", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -21723,6 +22285,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -21874,6 +22450,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, "alert-header": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -21946,6 +22526,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -21990,6 +22582,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -22452,6 +23065,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#006ce0", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -24456,6 +25090,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -24607,6 +25255,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, "app-layout-toolbar": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -24679,6 +25331,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -24723,6 +25387,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#f0fbff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -25185,6 +25870,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#d1f1ff", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#006ce0", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#002b66", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -27189,6 +27895,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -27340,6 +28060,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, "compact-table": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -27412,6 +28136,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -27456,6 +28192,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#f0fbff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -27918,6 +28675,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#d1f1ff", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#006ce0", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#002b66", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -29922,6 +30700,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "12px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -30073,6 +30865,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, "flashbar": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -30145,6 +30941,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -30189,6 +30997,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#f0fbff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -30651,6 +31480,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#d1f1ff", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#006ce0", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#002b66", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -32655,6 +33505,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -32806,6 +33670,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, "flashbar-warning": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -32878,6 +33746,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -32922,6 +33802,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#f0fbff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -33384,6 +34285,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#d1f1ff", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#006ce0", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#002b66", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -35388,6 +36310,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -35539,6 +36475,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, "header": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -35611,6 +36551,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -35655,6 +36607,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -36117,6 +37090,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#006ce0", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -38121,6 +39115,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -38272,6 +39280,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, "top-navigation": { "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -38344,6 +39356,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -38388,6 +39412,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#333843", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#1b232d", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -38850,6 +39895,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#006ce0", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#75cfff", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#656871", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -40854,6 +41920,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -41005,6 +42085,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "tokens": { + "border-radius-action-card": { + "$description": "The border radius of action cards.", + "$value": "16px", + }, "border-radius-alert": { "$description": "The border radius of alerts.", "$value": "12px", @@ -41077,6 +42161,18 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", }, + "border-width-action-card-active": { + "$description": "The border width of action cards in active/pressed state.", + "$value": "1px", + }, + "border-width-action-card-default": { + "$description": "The border width of action cards in default state.", + "$value": "1px", + }, + "border-width-action-card-hover": { + "$description": "The border width of action cards in hover state.", + "$value": "1px", + }, "border-width-alert": { "$description": "The border width of alerts.", "$value": "2px", @@ -41121,6 +42217,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of tokens.", "$value": "2px", }, + "color-background-action-card-active": { + "$description": "The background color of action cards in active/pressed state.", + "$value": { + "dark": "#333843", + "light": "#d1f1ff", + }, + }, + "color-background-action-card-default": { + "$description": "The default background color of action cards.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, + "color-background-action-card-hover": { + "$description": "The background color of action cards in hover state.", + "$value": { + "dark": "#1b232d", + "light": "#f0fbff", + }, + }, "color-background-avatar-default": { "$description": "The default background color of avatars.", "$value": { @@ -41583,6 +42700,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#d1f1ff", }, }, + "color-border-action-card-active": { + "$description": "The border color of action cards in active/pressed state.", + "$value": { + "dark": "#75cfff", + "light": "#002b66", + }, + }, + "color-border-action-card-default": { + "$description": "The default border color of action cards.", + "$value": { + "dark": "#656871", + "light": "#006ce0", + }, + }, + "color-border-action-card-hover": { + "$description": "The border color of action cards in hover state.", + "$value": { + "dark": "#42b4ff", + "light": "#002b66", + }, + }, "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { @@ -43587,6 +44725,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "space-action-card-horizontal": { + "$description": "The horizontal padding inside action cards.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-action-card-vertical": { + "$description": "The vertical padding inside action cards.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 70ff43dec5..8f0cc7063c 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -1,5 +1,295 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Components definition for action-card matches the snapshot: action-card 1`] = ` +{ + "dashCaseName": "action-card", + "events": [ + { + "cancelable": true, + "description": "Called when the user clicks on the action card.", + "name": "onClick", + }, + ], + "functions": [ + { + "description": "Sets focus on the action card.", + "name": "focus", + "parameters": [], + "returnType": "void", + }, + ], + "name": "ActionCard", + "properties": [ + { + "description": "Adds an aria-describedby reference for the action card.", + "name": "ariaDescribedby", + "optional": true, + "type": "string", + }, + { + "description": "Adds an aria-label to the action card.", + "name": "ariaLabel", + "optional": true, + "type": "string", + }, + { + "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).", + "description": "Adds the specified classes to the root element of the component.", + "name": "className", + "optional": true, + "type": "string", + }, + { + "description": "Determines whether the action card is disabled.", + "name": "disabled", + "optional": true, + "type": "boolean", + }, + { + "description": "Specifies alternate text for a custom icon. We recommend that you provide this for accessibility. +This property is ignored if you use a predefined icon or if you set your custom icon using the \`iconSvg\` slot.", + "name": "iconAlt", + "optional": true, + "type": "string", + }, + { + "description": "Displays an icon next to the content. You can use the \`iconPosition\` and \`iconVerticalAlignment\` properties to position the icon.", + "inlineType": { + "name": "IconProps.Name", + "type": "union", + "values": [ + "search", + "map", + "filter", + "key", + "file", + "pause", + "play", + "microphone", + "remove", + "copy", + "menu", + "script", + "close", + "status-pending", + "refresh", + "external", + "history", + "group", + "calendar", + "ellipsis", + "zoom-in", + "zoom-out", + "security", + "download", + "edit", + "add-plus", + "anchor-link", + "angle-left-double", + "angle-left", + "angle-right-double", + "angle-right", + "angle-up", + "angle-down", + "arrow-left", + "arrow-right", + "arrow-up", + "arrow-down", + "at-symbol", + "audio-full", + "audio-half", + "audio-off", + "backward-10-seconds", + "bug", + "call", + "caret-down-filled", + "caret-down", + "caret-left-filled", + "caret-right-filled", + "caret-up-filled", + "caret-up", + "check", + "contact", + "closed-caption", + "closed-caption-unavailable", + "command-prompt", + "delete-marker", + "drag-indicator", + "edit-gen-ai", + "envelope", + "exit-full-screen", + "expand", + "face-happy", + "face-happy-filled", + "face-neutral", + "face-neutral-filled", + "face-sad", + "face-sad-filled", + "file-open", + "flag", + "folder-open", + "folder", + "forward-10-seconds", + "full-screen", + "gen-ai", + "globe", + "grid-view", + "group-active", + "heart", + "heart-filled", + "insert-row", + "keyboard", + "list-view", + "location-pin", + "lock-private", + "microphone-off", + "mini-player", + "multiscreen", + "notification", + "redo", + "resize-area", + "search-gen-ai", + "settings", + "send", + "share", + "shrink", + "slash", + "star-filled", + "star-half", + "star", + "status-in-progress", + "status-info", + "status-negative", + "status-not-started", + "status-positive", + "status-stopped", + "status-warning", + "stop-circle", + "subtract-minus", + "suggestions", + "suggestions-gen-ai", + "support", + "thumbs-down-filled", + "thumbs-down", + "thumbs-up-filled", + "thumbs-up", + "ticket", + "transcript", + "treeview-collapse", + "treeview-expand", + "undo", + "unlocked", + "upload-download", + "upload", + "user-profile-active", + "user-profile", + "video-off", + "video-on", + "video-unavailable", + "video-camera-off", + "video-camera-on", + "video-camera-unavailable", + "view-full", + "view-horizontal", + "view-vertical", + "zoom-to-fit", + ], + }, + "name": "iconName", + "optional": true, + "type": "string", + }, + { + "description": "Specifies the horizontal position of the icon.", + "inlineType": { + "name": "ActionCardProps.IconPosition", + "type": "union", + "values": [ + "left", + "right", + ], + }, + "name": "iconPosition", + "optional": true, + "type": "string", + }, + { + "description": "Specifies the URL of a custom icon. Use this property if the icon you want isn't available. + +If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence.", + "name": "iconUrl", + "optional": true, + "type": "string", + }, + { + "description": "Specifies the vertical alignment of the icon.", + "inlineType": { + "name": "ActionCardProps.IconVerticalAlignment", + "type": "union", + "values": [ + "center", + "top", + "bottom", + ], + }, + "name": "iconVerticalAlignment", + "optional": true, + "type": "string", + }, + { + "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases, +use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must +use the \`id\` attribute, consider setting it on a parent element instead.", + "description": "Adds the specified ID to the root element of the component.", + "name": "id", + "optional": true, + "type": "string", + }, + ], + "regions": [ + { + "description": "The main content of the action card.", + "isDefault": true, + "name": "children", + }, + { + "description": "The description content displayed below the header.", + "isDefault": false, + "name": "description", + }, + { + "description": "The header content displayed at the top of the action card.", + "isDefault": false, + "name": "header", + }, + { + "description": "Specifies the SVG of a custom icon. + +Use this property if you want your custom icon to inherit colors dictated by variant or hover states. +When this property is set, the component will be decorated with \`aria-hidden="true"\`. Ensure that the \`svg\` element: +- has attribute \`focusable="false"\`. +- has \`viewBox="0 0 16 16"\`. + +If you set the \`svg\` element as the root node of the slot, the component will automatically +- set \`stroke="currentColor"\`, \`fill="none"\`, and \`vertical-align="top"\`. +- set the stroke width based on the size of the icon. +- set the width and height of the SVG element based on the size of the icon. + +If you don't want these styles to be automatically set, wrap the \`svg\` element into a \`span\`. +You can still set the stroke to \`currentColor\` to inherit the color of the surrounding elements. + +If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence. + +*Note:* Remember to remove any additional elements (for example: \`defs\`) and related CSS classes from SVG files exported from design software. +In most cases, they aren't needed, as the \`svg\` element inherits styles from the icon component.", + "isDefault": false, + "name": "iconSvg", + }, + ], + "releaseStatus": "stable", +} +`; + exports[`Components definition for alert matches the snapshot: alert 1`] = ` { "dashCaseName": "alert", @@ -14279,9 +14569,9 @@ If you set both \`url\` and \`svg\`, \`svg\` will take precedence.", "error", "disabled", "success", - "warning", "inverted", "subtle", + "warning", ], }, "name": "variant", @@ -31094,6 +31384,76 @@ Use this if you need to wait for a response from the server before the user can exports[`Test-utils dom definitions match the snapshot 1`] = ` { "classes": [ + { + "methods": [ + { + "description": "Returns the content element of the action card.", + "name": "findContent", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Returns the description element of the action card.", + "name": "findDescription", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Returns the header element of the action card.", + "name": "findHeader", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Returns the icon element of the action card.", + "name": "findIcon", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Returns whether the action card is disabled.", + "name": "isDisabled", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "boolean", + }, + }, + ], + "name": "ActionCardWrapper", + }, { "methods": [ { @@ -42795,6 +43155,47 @@ Supported options: exports[`Test-utils selectors definitions match the snapshot 1`] = ` { "classes": [ + { + "methods": [ + { + "description": "Returns the content element of the action card.", + "name": "findContent", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Returns the description element of the action card.", + "name": "findDescription", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Returns the header element of the action card.", + "name": "findHeader", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Returns the icon element of the action card.", + "name": "findIcon", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + ], + "name": "ActionCardWrapper", + }, { "methods": [ { diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index df80540e4b..50bf7469e5 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -2,6 +2,13 @@ exports[`test-utils selectors 1`] = ` { + "action-card": [ + "awsui_content_16248", + "awsui_description_16248", + "awsui_header_16248", + "awsui_icon_16248", + "awsui_root_16248", + ], "alert": [ "awsui_action-button_mx3cw", "awsui_action-slot_mx3cw", diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap index 35b13b6618..b71da04c87 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -9,6 +9,7 @@ import { appendSelector } from '@cloudscape-design/test-utils-core/utils'; export { ElementWrapper }; +import ActionCardWrapper from './action-card'; import AlertWrapper from './alert'; import AnchorNavigationWrapper from './anchor-navigation'; import AnnotationWrapper from './annotation'; @@ -99,6 +100,7 @@ import TutorialPanelWrapper from './tutorial-panel'; import WizardWrapper from './wizard'; +export { ActionCardWrapper }; export { AlertWrapper }; export { AnchorNavigationWrapper }; export { AnnotationWrapper }; @@ -191,6 +193,25 @@ export { WizardWrapper }; declare module '@cloudscape-design/test-utils-core/dist/dom' { interface ElementWrapper { +/** + * Returns the wrapper of the first ActionCard that matches the specified CSS selector. + * If no CSS selector is specified, returns the wrapper of the first ActionCard. + * If no matching ActionCard is found, returns \`null\`. + * + * @param {string} [selector] CSS Selector + * @returns {ActionCardWrapper | null} + */ +findActionCard(selector?: string): ActionCardWrapper | null; + +/** + * Returns an array of ActionCard wrapper that matches the specified CSS selector. + * If no CSS selector is specified, returns all of the ActionCards inside the current wrapper. + * If no matching ActionCard is found, returns an empty array. + * + * @param {string} [selector] CSS Selector + * @returns {Array} + */ +findAllActionCards(selector?: string): Array; /** * Returns the wrapper of the first Alert that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Alert. @@ -1867,6 +1888,19 @@ findAllWizards(selector?: string): Array; } +ElementWrapper.prototype.findActionCard = function(selector) { + let rootSelector = \`.\${ActionCardWrapper.rootSelector}\`; + if("legacyRootSelector" in ActionCardWrapper && ActionCardWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${ActionCardWrapper.rootSelector}, .\${ActionCardWrapper.legacyRootSelector})\`; + } + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ActionCardWrapper); +}; + +ElementWrapper.prototype.findAllActionCards = function(selector) { + return this.findAllComponents(ActionCardWrapper, selector); +}; ElementWrapper.prototype.findAlert = function(selector) { let rootSelector = \`.\${AlertWrapper.rootSelector}\`; if("legacyRootSelector" in AlertWrapper && AlertWrapper.legacyRootSelector){ @@ -3031,6 +3065,7 @@ import { appendSelector } from '@cloudscape-design/test-utils-core/utils'; export { ElementWrapper }; +import ActionCardWrapper from './action-card'; import AlertWrapper from './alert'; import AnchorNavigationWrapper from './anchor-navigation'; import AnnotationWrapper from './annotation'; @@ -3121,6 +3156,7 @@ import TutorialPanelWrapper from './tutorial-panel'; import WizardWrapper from './wizard'; +export { ActionCardWrapper }; export { AlertWrapper }; export { AnchorNavigationWrapper }; export { AnnotationWrapper }; @@ -3213,6 +3249,23 @@ export { WizardWrapper }; declare module '@cloudscape-design/test-utils-core/dist/selectors' { interface ElementWrapper { +/** + * Returns a wrapper that matches the ActionCards with the specified CSS selector. + * If no CSS selector is specified, returns a wrapper that matches ActionCards. + * + * @param {string} [selector] CSS Selector + * @returns {ActionCardWrapper} + */ +findActionCard(selector?: string): ActionCardWrapper; + +/** + * Returns a multi-element wrapper that matches ActionCards with the specified CSS selector. + * If no CSS selector is specified, returns a multi-element wrapper that matches ActionCards. + * + * @param {string} [selector] CSS Selector + * @returns {MultiElementWrapper} + */ +findAllActionCards(selector?: string): MultiElementWrapper; /** * Returns a wrapper that matches the Alerts with the specified CSS selector. * If no CSS selector is specified, returns a wrapper that matches Alerts. @@ -4713,6 +4766,19 @@ findAllWizards(selector?: string): MultiElementWrapper; } +ElementWrapper.prototype.findActionCard = function(selector) { + let rootSelector = \`.\${ActionCardWrapper.rootSelector}\`; + if("legacyRootSelector" in ActionCardWrapper && ActionCardWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${ActionCardWrapper.rootSelector}, .\${ActionCardWrapper.legacyRootSelector})\`; + } + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ActionCardWrapper); +}; + +ElementWrapper.prototype.findAllActionCards = function(selector) { + return this.findAllComponents(ActionCardWrapper, selector); +}; ElementWrapper.prototype.findAlert = function(selector) { let rootSelector = \`.\${AlertWrapper.rootSelector}\`; if("legacyRootSelector" in AlertWrapper && AlertWrapper.legacyRootSelector){ diff --git a/src/action-card/__tests__/action-card.test.tsx b/src/action-card/__tests__/action-card.test.tsx new file mode 100644 index 0000000000..34cb20b589 --- /dev/null +++ b/src/action-card/__tests__/action-card.test.tsx @@ -0,0 +1,230 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; +import { render } from '@testing-library/react'; + +import ActionCard, { ActionCardProps } from '../../../lib/components/action-card'; +import createWrapper from '../../../lib/components/test-utils/dom'; + +import styles from '../../../lib/components/action-card/styles.css.js'; + +function renderActionCard(props: ActionCardProps = {}) { + const renderResult = render(); + return createWrapper(renderResult.container).findActionCard()!; +} + +describe('ActionCard Component', () => { + describe('header property', () => { + test('renders header when provided', () => { + const wrapper = renderActionCard({ header: 'Test Header' }); + expect(wrapper.findHeader()!.getElement()).toHaveTextContent('Test Header'); + }); + + test('does not render header element when not provided', () => { + const wrapper = renderActionCard(); + expect(wrapper.findHeader()).toBeNull(); + }); + }); + + describe('description property', () => { + test('renders description when provided', () => { + const wrapper = renderActionCard({ description: 'Test Description' }); + expect(wrapper.findDescription()!.getElement()).toHaveTextContent('Test Description'); + }); + + test('does not render description element when not provided', () => { + const wrapper = renderActionCard(); + expect(wrapper.findDescription()).toBeNull(); + }); + }); + + describe('children property', () => { + test('renders children content when provided', () => { + const wrapper = renderActionCard({ children: 'Test Content' }); + expect(wrapper.findContent()!.getElement()).toHaveTextContent('Test Content'); + }); + + test('does not render content element when children not provided', () => { + const wrapper = renderActionCard(); + expect(wrapper.findContent()).toBeNull(); + }); + }); + + describe('disabled property', () => { + test('renders action card with normal styling by default', () => { + const wrapper = renderActionCard(); + expect(wrapper.isDisabled()).toEqual(false); + expect(wrapper.getElement()).not.toHaveAttribute('disabled'); + expect(wrapper.getElement()).not.toHaveClass(styles.disabled); + }); + + test('renders action card with disabled styling when true', () => { + const wrapper = renderActionCard({ disabled: true }); + expect(wrapper.isDisabled()).toEqual(true); + expect(wrapper.getElement()).toHaveClass(styles.disabled); + expect(wrapper.getElement()).toHaveAttribute('disabled'); + expect(wrapper.getElement()).toHaveAttribute('aria-disabled', 'true'); + }); + + test('does not call onClick when disabled', () => { + const onClickSpy = jest.fn(); + const wrapper = renderActionCard({ onClick: onClickSpy, disabled: true }); + wrapper.click(); + expect(onClickSpy).not.toHaveBeenCalled(); + }); + }); + + describe('onClick property', () => { + test('calls onClick when the action card is clicked', () => { + const onClickSpy = jest.fn(); + const wrapper = renderActionCard({ onClick: onClickSpy }); + wrapper.click(); + expect(onClickSpy).toHaveBeenCalled(); + }); + + test('does not call onClick when disabled', () => { + const onClickSpy = jest.fn(); + const wrapper = renderActionCard({ onClick: onClickSpy, disabled: true }); + wrapper.click(); + expect(onClickSpy).not.toHaveBeenCalled(); + }); + }); + + describe('ariaLabel property', () => { + test('adds aria-label attribute when provided', () => { + const wrapper = renderActionCard({ ariaLabel: 'Test Aria Label' }); + expect(wrapper.getElement()).toHaveAttribute('aria-label', 'Test Aria Label'); + }); + + test('does not add aria-label when not provided', () => { + const wrapper = renderActionCard(); + expect(wrapper.getElement()).not.toHaveAttribute('aria-label'); + }); + }); + + describe('ariaDescribedby property', () => { + test('adds aria-describedby attribute when provided', () => { + const wrapper = renderActionCard({ ariaDescribedby: 'description-id' }); + expect(wrapper.getElement()).toHaveAttribute('aria-describedby', 'description-id'); + }); + + test('does not add aria-describedby when not provided', () => { + const wrapper = renderActionCard(); + expect(wrapper.getElement()).not.toHaveAttribute('aria-describedby'); + }); + }); + + describe('iconName property', () => { + test('does not render icon element when no icon provided', () => { + const wrapper = renderActionCard(); + expect(wrapper.findIcon()).toBeNull(); + }); + + test('renders icon when iconName provided', () => { + const wrapper = renderActionCard({ iconName: 'settings' }); + expect(wrapper.findIcon()).not.toBeNull(); + }); + }); + + describe('iconUrl property', () => { + const iconUrl = 'data:image/png;base64,aaaa'; + const iconAlt = 'Custom icon'; + + test('renders custom icon with iconUrl', () => { + const wrapper = renderActionCard({ iconUrl, iconAlt }); + const icon = wrapper.findIcon(); + expect(icon).not.toBeNull(); + expect(icon!.find('img')!.getElement()).toHaveAttribute('src', iconUrl); + }); + + test('renders custom icon with alt text', () => { + const wrapper = renderActionCard({ iconUrl, iconAlt }); + const icon = wrapper.findIcon(); + expect(icon!.find('img')!.getElement()).toHaveAttribute('alt', iconAlt); + }); + }); + + describe('iconSvg property', () => { + const iconSvg = ( + + + + ); + + test('renders custom SVG icon', () => { + const wrapper = renderActionCard({ iconSvg }); + const icon = wrapper.findIcon(); + expect(icon).not.toBeNull(); + expect(icon!.findByClassName('test-svg')).not.toBeNull(); + }); + }); + + describe('iconPosition property', () => { + test('renders icon on the left by default', () => { + const wrapper = renderActionCard({ iconName: 'settings', header: 'Header' }); + const icon = wrapper.findIcon(); + const header = wrapper.findHeader(); + expect(icon).not.toBeNull(); + expect(header).not.toBeNull(); + // Icon should come before the body content in DOM order + const iconElement = icon!.getElement(); + const headerElement = header!.getElement(); + const iconPosition = iconElement.compareDocumentPosition(headerElement); + // DOCUMENT_POSITION_FOLLOWING = 4 means header follows icon + expect(iconPosition & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy(); + }); + + test('renders icon on the right when specified', () => { + const wrapper = renderActionCard({ iconName: 'settings', iconPosition: 'right', header: 'Header' }); + const icon = wrapper.findIcon(); + const header = wrapper.findHeader(); + expect(icon).not.toBeNull(); + expect(header).not.toBeNull(); + // Icon should come after the body content in DOM order + const iconElement = icon!.getElement(); + const headerElement = header!.getElement(); + const iconPosition = iconElement.compareDocumentPosition(headerElement); + // DOCUMENT_POSITION_PRECEDING = 2 means header precedes icon + expect(iconPosition & Node.DOCUMENT_POSITION_PRECEDING).toBeTruthy(); + }); + }); + + describe('iconVerticalAlignment property', () => { + test('has top alignment by default', () => { + const wrapper = renderActionCard({ iconName: 'settings' }); + expect(wrapper.getElement()).toHaveClass(styles['icon-vertical-align-top']); + }); + + test('applies center alignment when specified', () => { + const wrapper = renderActionCard({ iconName: 'settings', iconVerticalAlignment: 'center' }); + expect(wrapper.getElement()).toHaveClass(styles['icon-vertical-align-center']); + }); + + test('applies bottom alignment when specified', () => { + const wrapper = renderActionCard({ iconName: 'settings', iconVerticalAlignment: 'bottom' }); + expect(wrapper.getElement()).toHaveClass(styles['icon-vertical-align-bottom']); + }); + }); + + describe('focus management', () => { + test('can be focused through the API', () => { + let actionCard: ActionCardProps.Ref | null = null; + const renderResult = render( (actionCard = el)} />); + const wrapper = createWrapper(renderResult.container); + actionCard!.focus(); + expect(document.activeElement).toBe(wrapper.findActionCard()!.getElement()); + }); + }); + + describe('button element', () => { + test('renders as a button element', () => { + const wrapper = renderActionCard(); + expect(wrapper.getElement().tagName).toBe('BUTTON'); + }); + + test('has type="button" attribute', () => { + const wrapper = renderActionCard(); + expect(wrapper.getElement()).toHaveAttribute('type', 'button'); + }); + }); +}); diff --git a/src/action-card/index.tsx b/src/action-card/index.tsx new file mode 100644 index 0000000000..5f047eb170 --- /dev/null +++ b/src/action-card/index.tsx @@ -0,0 +1,22 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +'use client'; +import React from 'react'; + +import useBaseComponent from '../internal/hooks/use-base-component'; +import { applyDisplayName } from '../internal/utils/apply-display-name'; +import { getExternalProps } from '../internal/utils/external-props'; +import { type ActionCardProps } from './interfaces'; +import InternalActionCard from './internal'; + +export { ActionCardProps }; + +const ActionCard = React.forwardRef((props: ActionCardProps, ref: React.Ref) => { + const baseComponentProps = useBaseComponent('ActionCard'); + const externalProps = getExternalProps(props); + + return ; +}); + +applyDisplayName(ActionCard, 'ActionCard'); +export default ActionCard; diff --git a/src/action-card/interfaces.ts b/src/action-card/interfaces.ts new file mode 100644 index 0000000000..62e06526c4 --- /dev/null +++ b/src/action-card/interfaces.ts @@ -0,0 +1,113 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { ReactNode } from 'react'; + +import { IconProps } from '../icon/interfaces'; +import { BaseComponentProps } from '../internal/base-component'; +import { CancelableEventHandler } from '../internal/events'; + +export interface ActionCardProps extends BaseComponentProps { + /** + * The header content displayed at the top of the action card. + */ + header?: ReactNode; + + /** + * The description content displayed below the header. + */ + description?: ReactNode; + + /** + * The main content of the action card. + */ + children?: ReactNode; + + /** + * Called when the user clicks on the action card. + */ + onClick?: CancelableEventHandler; + + /** + * Adds an aria-label to the action card. + */ + ariaLabel?: string; + + /** + * Adds an aria-describedby reference for the action card. + */ + ariaDescribedby?: string; + + /** + * Determines whether the action card is disabled. + * @default false + */ + disabled?: boolean; + + /** + * Displays an icon next to the content. You can use the `iconPosition` and `iconVerticalAlignment` properties to position the icon. + */ + iconName?: IconProps.Name; + + /** + * Specifies the URL of a custom icon. Use this property if the icon you want isn't available. + * + * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence. + */ + iconUrl?: string; + + /** + * Specifies the SVG of a custom icon. + * + * Use this property if you want your custom icon to inherit colors dictated by variant or hover states. + * When this property is set, the component will be decorated with `aria-hidden="true"`. Ensure that the `svg` element: + * - has attribute `focusable="false"`. + * - has `viewBox="0 0 16 16"`. + * + * If you set the `svg` element as the root node of the slot, the component will automatically + * - set `stroke="currentColor"`, `fill="none"`, and `vertical-align="top"`. + * - set the stroke width based on the size of the icon. + * - set the width and height of the SVG element based on the size of the icon. + * + * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`. + * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements. + * + * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence. + * + * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software. + * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component. + */ + iconSvg?: ReactNode; + + /** + * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility. + * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot. + */ + iconAlt?: string; + + /** + * Specifies the horizontal position of the icon. + * @default 'left' + */ + iconPosition?: ActionCardProps.IconPosition; + + /** + * Specifies the vertical alignment of the icon. + * @default 'top' + */ + iconVerticalAlignment?: ActionCardProps.IconVerticalAlignment; +} + +export namespace ActionCardProps { + // eslint-disable-next-line @typescript-eslint/no-empty-object-type + export interface ClickDetail {} + + export type IconPosition = 'left' | 'right'; + export type IconVerticalAlignment = 'top' | 'center' | 'bottom'; + + export interface Ref { + /** + * Sets focus on the action card. + */ + focus(): void; + } +} diff --git a/src/action-card/internal.tsx b/src/action-card/internal.tsx new file mode 100644 index 0000000000..7715fe168a --- /dev/null +++ b/src/action-card/internal.tsx @@ -0,0 +1,110 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useImperativeHandle, useRef } from 'react'; +import clsx from 'clsx'; + +import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal'; + +import InternalIcon from '../icon/internal'; +import { getBaseProps } from '../internal/base-component'; +import { fireCancelableEvent } from '../internal/events'; +import { InternalBaseComponentProps } from '../internal/hooks/use-base-component'; +import { type ActionCardProps } from './interfaces'; + +import styles from './styles.css.js'; + +export type InternalActionCardProps = ActionCardProps & InternalBaseComponentProps; + +const InternalActionCard = React.forwardRef( + ( + { + header, + description, + children, + onClick, + ariaLabel, + ariaDescribedby, + disabled = false, + iconName, + iconUrl, + iconSvg, + iconAlt, + iconPosition = 'left', + iconVerticalAlignment = 'top', + __internalRootRef, + ...rest + }: InternalActionCardProps, + ref: React.Ref + ) => { + const baseProps = getBaseProps(rest); + const buttonRef = useRef(null); + + useImperativeHandle(ref, () => ({ + focus: () => { + buttonRef.current?.focus(); + }, + })); + + const handleClick = (event: React.MouseEvent) => { + if (disabled) { + return; + } + fireCancelableEvent(onClick, {}, event); + }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (disabled) { + return; + } + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + fireCancelableEvent(onClick, {}, event); + } + }; + + const hasIcon = iconName || iconUrl || iconSvg; + + const iconElement = hasIcon && ( +
+ +
+ ); + + const contentElement = ( +
+ {header &&
{header}
} + {description &&
{description}
} + {children &&
{children}
} +
+ ); + const rootRef = useMergeRefs(buttonRef, __internalRootRef); + + return ( + + ); + } +); + +export default InternalActionCard; diff --git a/src/action-card/styles.scss b/src/action-card/styles.scss new file mode 100644 index 0000000000..4c7eab5af2 --- /dev/null +++ b/src/action-card/styles.scss @@ -0,0 +1,121 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../internal/styles' as styles; +@use '../internal/styles/tokens' as awsui; +@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible; + +.root { + @include styles.styles-reset; + position: relative; + display: block; + cursor: pointer; + border-start-start-radius: awsui.$border-radius-action-card; + border-start-end-radius: awsui.$border-radius-action-card; + border-end-start-radius: awsui.$border-radius-action-card; + border-end-end-radius: awsui.$border-radius-action-card; + border-width: 0; + + padding-block: awsui.$space-action-card-vertical; + padding-inline: awsui.$space-action-card-horizontal; + background-color: awsui.$color-background-action-card-default; + text-align: start; + inline-size: 100%; + + &.has-icon { + display: flex; + gap: awsui.$space-action-card-horizontal; + } + + &.icon-vertical-align-top { + align-items: flex-start; + } + + &.icon-vertical-align-center { + align-items: center; + } + + &.icon-vertical-align-bottom { + align-items: flex-end; + } + + // Use pseudo-element for border to allow for variable border width on different states + &::before { + content: ''; + position: absolute; + inset: 0; + box-shadow: 0 0 0 awsui.$border-width-action-card-default awsui.$color-border-action-card-default inset; + + border-start-start-radius: awsui.$border-radius-action-card; + border-start-end-radius: awsui.$border-radius-action-card; + border-end-start-radius: awsui.$border-radius-action-card; + border-end-end-radius: awsui.$border-radius-action-card; + + pointer-events: none; + } + + &:hover { + background-color: awsui.$color-background-action-card-hover; + + &::before { + box-shadow: 0 0 0 awsui.$border-width-action-card-hover awsui.$color-border-action-card-hover inset; + } + } + + &:active { + background-color: awsui.$color-background-action-card-active; + + &::before { + box-shadow: 0 0 0 awsui.$border-width-action-card-active awsui.$color-border-action-card-active inset; + } + } + + &:focus { + outline: none; + } + + @include focus-visible.when-visible { + @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter); + } + + &.disabled { + cursor: default; + pointer-events: none; + background-color: awsui.$color-background-action-card-default; + + &::before { + box-shadow: 0 0 0 awsui.$border-width-action-card-default awsui.$color-border-control-disabled inset; + } + } +} + +.icon { + flex-shrink: 0; + color: awsui.$color-text-interactive-default; +} + +.body { + flex-grow: 1; + min-inline-size: 0; +} + +.header { + @include styles.font-heading-s; + color: awsui.$color-text-heading-default; +} + +.description { + @include styles.font-body-m; + color: awsui.$color-text-body-secondary; + padding-block-start: awsui.$space-action-card-description-padding-top; +} + +.content { + padding-block-start: awsui.$space-action-card-content-padding-top; +} + +.action-card { + /* test-utils */ +} diff --git a/src/test-utils/dom/action-card/index.ts b/src/test-utils/dom/action-card/index.ts new file mode 100644 index 0000000000..28f82c8c83 --- /dev/null +++ b/src/test-utils/dom/action-card/index.ts @@ -0,0 +1,45 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom'; + +import styles from '../../../action-card/styles.selectors.js'; + +export default class ActionCardWrapper extends ComponentWrapper { + static rootSelector: string = styles.root; + + /** + * Returns the header element of the action card. + */ + findHeader(): ElementWrapper | null { + return this.findByClassName(styles.header); + } + + /** + * Returns the description element of the action card. + */ + findDescription(): ElementWrapper | null { + return this.findByClassName(styles.description); + } + + /** + * Returns the content element of the action card. + */ + findContent(): ElementWrapper | null { + return this.findByClassName(styles.content); + } + + /** + * Returns the icon element of the action card. + */ + findIcon(): ElementWrapper | null { + return this.findByClassName(styles.icon); + } + + /** + * Returns whether the action card is disabled. + */ + @usesDom + isDisabled(): boolean { + return this.element.disabled || this.element.getAttribute('aria-disabled') === 'true'; + } +} diff --git a/style-dictionary/classic/borders.ts b/style-dictionary/classic/borders.ts index 40f4df14ec..22c8582f15 100644 --- a/style-dictionary/classic/borders.ts +++ b/style-dictionary/classic/borders.ts @@ -42,6 +42,10 @@ const tokens: StyleDictionary.BordersDictionary = { borderWidthField: '1px', borderWidthPopover: '1px', borderWidthToken: '1px', + borderRadiusActionCard: '{borderRadiusContainer}', + borderWidthActionCardDefault: '1px', + borderWidthActionCardHover: '1px', + borderWidthActionCardActive: '1px', }; const expandedTokens: StyleDictionary.ExpandedGlobalScopeDictionary = merge({}, parentTokens, tokens); diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts index 146ad785ca..ba6f9e1925 100644 --- a/style-dictionary/classic/colors.ts +++ b/style-dictionary/classic/colors.ts @@ -149,6 +149,12 @@ const tokens: StyleDictionary.ColorsDictionary = { colorDragPlaceholderActive: { light: '{colorNeutral300}', dark: '{colorNeutral600}' }, colorDragPlaceholderHover: { light: '{colorPrimary200}', dark: '{colorPrimary600}' }, colorBackgroundDropdownItemHover: { light: '{colorNeutral200}', dark: '{colorNeutral700}' }, + colorBackgroundActionCardDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundActionCardHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' }, + colorBackgroundActionCardActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' }, + colorBorderActionCardDefault: { light: '{colorNeutral400}', dark: '{colorNeutral600}' }, + colorBorderActionCardHover: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorBorderActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge( diff --git a/style-dictionary/classic/spacing.ts b/style-dictionary/classic/spacing.ts index 2255af898a..3cbcaf0bbc 100644 --- a/style-dictionary/classic/spacing.ts +++ b/style-dictionary/classic/spacing.ts @@ -57,6 +57,10 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceTableHeaderHorizontal: '{spaceContainerHorizontal}', spaceTableHeaderToolsBottom: '{spaceScaledXxs}', spaceTableHorizontal: '0px', + spaceActionCardHorizontal: '{spaceL}', + spaceActionCardVertical: '{spaceM}', + spaceActionCardDescriptionPaddingTop: '{spaceScaledXxs}', + spaceActionCardContentPaddingTop: '{spaceScaledS}', }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge( diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 94967eb06a..9e9b8de714 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -771,7 +771,13 @@ export type ColorsTokenName = | 'colorDropzoneBorderDefault' | 'colorDropzoneBorderHover' | 'colorGapGlobalDrawer' - | 'colorItemSelected'; + | 'colorItemSelected' + | 'colorBackgroundActionCardDefault' + | 'colorBackgroundActionCardHover' + | 'colorBackgroundActionCardActive' + | 'colorBorderActionCardDefault' + | 'colorBorderActionCardHover' + | 'colorBorderActionCardActive'; export type TypographyTokenName = | 'fontBoxValueLargeWeight' | 'fontButtonLetterSpacing' @@ -871,7 +877,11 @@ export type BordersTokenName = | 'borderWidthIconNormal' | 'borderWidthIconMedium' | 'borderWidthIconBig' - | 'borderWidthIconLarge'; + | 'borderWidthIconLarge' + | 'borderRadiusActionCard' + | 'borderWidthActionCardDefault' + | 'borderWidthActionCardHover' + | 'borderWidthActionCardActive'; export type MotionTokenName = | 'motionDurationExtraFast' | 'motionDurationExtraSlow' @@ -1024,7 +1034,11 @@ export type SpacingTokenName = | 'spaceXxl' | 'spaceXxs' | 'spaceXxxl' - | 'spaceXxxs'; + | 'spaceXxxs' + | 'spaceActionCardHorizontal' + | 'spaceActionCardVertical' + | 'spaceActionCardDescriptionPaddingTop' + | 'spaceActionCardContentPaddingTop'; export type ShadowsTokenName = | 'shadowContainer' | 'shadowContainerActive' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index ea3b3d3b89..62d74485df 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -52,4 +52,8 @@ export const tokens: StyleDictionary.BordersDictionary = { borderWidthIconMedium: '2px', borderWidthIconBig: '3px', borderWidthIconLarge: '4px', + borderRadiusActionCard: '{borderRadiusContainer}', + borderWidthActionCardDefault: '1px', + borderWidthActionCardHover: '1px', + borderWidthActionCardActive: '1px', }; diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index f6a6c8d3cf..f63a53a737 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -289,6 +289,12 @@ const tokens: StyleDictionary.ColorsDictionary = { colorDropzoneBorderHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, colorGapGlobalDrawer: { light: '{colorNeutral250}', dark: '{colorNeutral950}' }, colorTreeViewConnectorLine: { light: '{colorNeutral500}', dark: '{colorNeutral300}' }, + colorBackgroundActionCardDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, + colorBackgroundActionCardHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' }, + colorBackgroundActionCardActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' }, + colorBorderActionCardDefault: { light: '{colorPrimary600}', dark: '{colorNeutral600}' }, + colorBorderActionCardHover: { light: '{colorPrimary900}', dark: '{colorPrimary400}' }, + colorBorderActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index bfe420cac7..f369addc04 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -164,6 +164,27 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + + borderRadiusActionCard: { + description: 'The border radius of action cards.', + public: true, + themeable: true, + }, + borderWidthActionCardDefault: { + description: 'The border width of action cards in default state.', + public: true, + themeable: true, + }, + borderWidthActionCardHover: { + description: 'The border width of action cards in hover state.', + public: true, + themeable: true, + }, + borderWidthActionCardActive: { + description: 'The border width of action cards in active/pressed state.', + public: true, + themeable: true, + }, }; export default metadata; diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 0214a71179..14c117464a 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -887,6 +887,38 @@ const metadata: StyleDictionary.MetadataIndex = { themeable: true, public: true, }, + + // Action Card + colorBackgroundActionCardDefault: { + description: 'The default background color of action cards.', + themeable: true, + public: true, + }, + colorBackgroundActionCardHover: { + description: 'The background color of action cards in hover state.', + themeable: true, + public: true, + }, + colorBackgroundActionCardActive: { + description: 'The background color of action cards in active/pressed state.', + themeable: true, + public: true, + }, + colorBorderActionCardDefault: { + description: 'The default border color of action cards.', + themeable: true, + public: true, + }, + colorBorderActionCardHover: { + description: 'The border color of action cards in hover state.', + themeable: true, + public: true, + }, + colorBorderActionCardActive: { + description: 'The border color of action cards in active/pressed state.', + themeable: true, + public: true, + }, }; export default metadata; diff --git a/style-dictionary/visual-refresh/metadata/spacing.ts b/style-dictionary/visual-refresh/metadata/spacing.ts index 528e76d07e..d92e9b5b1c 100644 --- a/style-dictionary/visual-refresh/metadata/spacing.ts +++ b/style-dictionary/visual-refresh/metadata/spacing.ts @@ -124,6 +124,16 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: false, }, + spaceActionCardHorizontal: { + description: 'The horizontal padding inside action cards.', + public: true, + themeable: true, + }, + spaceActionCardVertical: { + description: 'The vertical padding inside action cards.', + public: true, + themeable: true, + }, }; export default metadata; diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index 18e97743f0..ed9b6b50b5 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -65,6 +65,10 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceTableHorizontal: '{spaceContainerHorizontal}', spaceTreeViewIndentation: '{spaceXl}', spaceTileGutter: { comfortable: '{spaceXl}', compact: '{spaceM}' }, + spaceActionCardHorizontal: '{spaceContainerHorizontal}', + spaceActionCardVertical: '{spaceScaledM}', + spaceActionCardDescriptionPaddingTop: '{spaceScaledXxs}', + spaceActionCardContentPaddingTop: '{spaceScaledXs}', spaceScaled2xNone: '{spaceNone}', spaceScaled2xXxxs: { comfortable: '{spaceXxxs}', compact: '{spaceNone}' },