@spaced-out/ui-design-system 0.5.9 → 0.5.11

package/.github/workflows/publish_to_npm.yml

@@ -2,14 +2,10 @@
 # Note: Do not change
 
 name: Release Genesis to NPM
+
 on:
   workflow_dispatch:
     inputs:
-      branch:
-        # Note(Nishant): New input added to dynamically select release branch from UI
-        description: 'Branch to release from'
-        required: true
-        default: master
       release-type:
         description: 'Select Release type (prerelease appends beta in build number)'
         type: choice
@@ -19,6 +15,7 @@ on:
           - major
           - prerelease
         required: true
+
 jobs:
   release:
     runs-on: ubuntu-latest
@@ -40,8 +37,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
-          fetch-depth: '0'
-          ref: ${{ github.event.inputs.branch }} # Note(Nishant): Dynamically checkout the selected branch from input
+          fetch-depth: 0
+          ref: ${{ github.ref }} # e.g. refs/heads/master (from the UI selector)
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -49,25 +46,20 @@ jobs:
           registry-url: https://registry.npmjs.org/
           node-version: '22.18.0'
 
-      # -------------------------------------------------------------------------------------
-      # Note(Nishant): Install isolated dependencies
-      # -------------------------------------------------------------------------------------
       - name: Install dependencies
-        run: |
-          yarn install
+        run: yarn install
 
       # ToDo(Nishant): Activate this once we have chromatic tests ready.
-      #- name: Run tests
-      #  run: yarn test
+      # - name: Run tests
+      #   run: yarn test
 
-      # Configure Git. TODO(Nishant): update with a org bot instead of personal detail
       - name: Git configuration
         run: |
           git config --global user.email "86281150+superrover@users.noreply.github.com"
           git config --global user.name "Nishant Gaurav"
-          git fetch --all
-          git checkout ${{ github.event.inputs.branch }}  # Note(Nishant): Checkout the correct branch before release
-          git pull origin ${{ github.event.inputs.branch }}
+          git fetch --all --tags
+          git checkout "${GITHUB_REF_NAME}"
+          git pull --ff-only origin "${GITHUB_REF_NAME}"
 
       # Bump package version
       # Use tag latest
@@ -76,7 +68,7 @@ jobs:
       - name: Validate release type against selected branch
         id: validate-release
         run: |
-          BRANCH="${{ github.event.inputs.branch }}"
+          BRANCH="${GITHUB_REF_NAME}"
           RELEASE_TYPE="${{ github.event.inputs.release-type }}"
 
           if [[ "$BRANCH" != "master" && "$RELEASE_TYPE" != "prerelease" ]]; then
@@ -85,11 +77,11 @@ jobs:
           fi
 
           if [[ "$RELEASE_TYPE" == "prerelease" ]]; then
-            echo "RELEASE_TAG=beta" >> $GITHUB_ENV
-            echo "IS_PRERELEASE=true" >> $GITHUB_ENV
+            echo "RELEASE_TAG=beta" >> "$GITHUB_ENV"
+            echo "IS_PRERELEASE=true" >> "$GITHUB_ENV"
           else
-            echo "RELEASE_TAG=latest" >> $GITHUB_ENV
-            echo "IS_PRERELEASE=false" >> $GITHUB_ENV
+            echo "RELEASE_TAG=latest" >> "$GITHUB_ENV"
+            echo "IS_PRERELEASE=false" >> "$GITHUB_ENV"
           fi
         # Note(Nishant): Enforces prerelease-only behavior on non-master branches
 
@@ -102,16 +94,18 @@ jobs:
           fi
         # Note(Nishant): Unified step for version bump, respecting prerelease condition
 
-      # Push changes
+        # Push changes
       - name: Push CHANGELOG.md and created release tag
-        run: |
-          git push --follow-tags origin ${{ github.event.inputs.branch }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Push to the same branch the workflow was dispatched from
+          git push --follow-tags origin "${GITHUB_REF_NAME}"
+
         # Note(Nishant): Push to selected branch, not hardcoded master
 
       # Publish version to NPM repository
       - name: Publish to NPM
-        run: yarn publish --verbose --access public --tag ${{ env.RELEASE_TAG }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+        run: yarn publish --verbose --access public --tag "$RELEASE_TAG"

package/.storybook/main.ts

@@ -59,7 +59,7 @@ const config: StorybookConfig = {
       process: require.resolve('process/browser'),
     };
 
-    // Fix font rule clobbering images (your existing tweak)
+    // Fix font rule clobbering images
     config.module!.rules = (config.module!.rules || []).map((rule: any) => {
       if (rule.test && rule.test.toString().includes('woff')) {
         return {

package/.storybook/public/component-parent-levels.json

@@ -1,95 +1,95 @@
 {
   "leaves": [
-    "Card - Done",
-    "CircularLoader - Done",
-    "ConditionalWrapper - Done",
-    "EmptyState - Done",
-    "ErrorMessage - Done",
-    "FocusManager - Done",
-    "Grid - Done",
-    "LinearLoader - Done",
-    "Separator - Done",
-    "Shimmer - Done",
-    "StatusIndicator - Done",
-    "StickyBar - Done",
-    "Text - Done",
-    "Toggle - Done",
-    "Truncate - Done"
+    "Card",
+    "CircularLoader",
+    "ConditionalWrapper",
+    "EmptyState",
+    "ErrorMessage",
+    "FocusManager",
+    "Grid",
+    "LinearLoader",
+    "Separator",
+    "Shimmer",
+    "StatusIndicator",
+    "StickyBar",
+    "Text",
+    "Toggle",
+    "Truncate"
   ],
   "1_level_parents": [
-    "FocusManagerWithArrowKeyNavigation - Done",
-    "Icon - Done",
-    "ProgressDonut - Done",
-    "RadioButton - Done",
-    "ScoreBar - Done",
-    "Textarea - Done",
-    "Tooltip - Done"
+    "FocusManagerWithArrowKeyNavigation",
+    "Icon",
+    "ProgressDonut",
+    "RadioButton",
+    "ScoreBar",
+    "Textarea",
+    "Tooltip"
   ],
   "2_level_parents": [
-    "Avatar - Done",
-    "Badge - Done",
-    "BadgedIcon - Done",
-    "Button - Done",
-    "Checkbox - Done",
-    "Chip - Done",
-    "FormTitleWrapper - Done",
-    "Input - Done",
-    "KPIBox - Done",
-    "Link - Done",
-    "Notification - Done",
-    "PromptChip - Done",
-    "Stepper - Done",
-    "TextTile - Done",
-    "Timeline - Done",
-    "Toast - Done",
-    "TruncatedTextWithTooltip - Done"
+    "Avatar",
+    "Badge",
+    "BadgedIcon",
+    "Button",
+    "Checkbox",
+    "Chip",
+    "FormTitleWrapper",
+    "Input",
+    "KPIBox",
+    "Link",
+    "Notification",
+    "PromptChip",
+    "Stepper",
+    "TextTile",
+    "Timeline",
+    "Toast",
+    "TruncatedTextWithTooltip"
   ],
   "3_level_parents": [
-    "Accordion - Done",
-    "AvatarGroup - Done",
-    "Breadcrumbs - Done",
-    "ChatBubble - Done",
-    "CollapsibleCard - Done",
-    "FileUpload - Done",
-    "InContextAlert - Done",
-    "Modal - Done",
-    "PageTitle - Done",
-    "PromptInput - Done",
-    "RadioTile - Done",
-    "RangeSlider - Done",
-    "Rating - Done",
-    "SearchInput - Done",
-    "SideMenuLink - Done",
-    "SubMenu - Done",
-    "WeekdayPicker - Done"
+    "Accordion",
+    "AvatarGroup",
+    "Breadcrumbs",
+    "ChatBubble",
+    "CollapsibleCard",
+    "FileUpload",
+    "InContextAlert",
+    "Modal",
+    "PageTitle",
+    "PromptInput",
+    "RadioTile",
+    "RangeSlider",
+    "Rating",
+    "SearchInput",
+    "SideMenuLink",
+    "SubMenu",
+    "WeekdayPicker"
   ],
   "4_level_parents": [
-    "Banner - Done",
-    "Dialog - Done",
-    "InContextAlertWithMultipleActions - Done",
-    "Menu - Done",
-    "Panel - Done"
+    "Banner",
+    "Dialog",
+    "InContextAlertWithMultipleActions",
+    "Menu",
+    "Panel"
   ],
   "5_level_parents": [
-    "ButtonDropdown - Done",
-    "Disclaimer - Done",
-    "Dropdown - Done",
-    "Typeahead - Done"
+    "ButtonDropdown",
+    "Disclaimer",
+    "Dropdown",
+    "Typeahead"
   ],
   "6_level_parents": [
-    "ButtonTabs - Done",
-    "Charts - Done",
-    "Combobox - Done",
-    "DateRangePicker - Done",
-    "FilterButtonOverlay - Done",
-    "InlineDropdown - Done",
-    "OptionButton - Done",
-    "Pagination - Done",
-    "Table - Done",
-    "Tabs - Done",
-    "TokenListInput - Done"
+    "ButtonTabs",
+    "Charts",
+    "Combobox",
+    "DateRangePicker",
+    "FilterButtonOverlay",
+    "InlineDropdown",
+    "OptionButton",
+    "Pagination",
+    "Table",
+    "Tabs",
+    "TokenListInput"
   ],
   "7_level_parents": [
-    "InfinitePagination - Done"
+    "InfinitePagination"
   ]
 }

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.11](https://github.com/spaced-out/ui-design-system/compare/v0.5.10...v0.5.11) (2025-09-23)
+
+
+### Features
+
+* adds testid support in input icon and text ([3ce908f](https://github.com/spaced-out/ui-design-system/commit/3ce908f6171b85cba0757433e1924df5d9ee09f2))
+* adds testid support other leaf nodes ([ccdd323](https://github.com/spaced-out/ui-design-system/commit/ccdd3230a73b8813033024473a83271024b2b6d9))
+* extra classNames in prompt chip ([#408](https://github.com/spaced-out/ui-design-system/issues/408)) ([f000cbf](https://github.com/spaced-out/ui-design-system/commit/f000cbf6b8841680460a7c5d82db86066514b200))
+
+### [0.5.10](https://github.com/spaced-out/ui-design-system/compare/v0.5.9...v0.5.10) (2025-09-23)
+
+
+### Features
+
+* introduces new util and story for generating data-testids ([4baf068](https://github.com/spaced-out/ui-design-system/commit/4baf0680bfe3d1aa9cf86b88c150df97c85271be))
+* release workflow changes ([90a910e](https://github.com/spaced-out/ui-design-system/commit/90a910ea75517b3da60e2156cc508d660b2cc8c4))
+
+
+### Bug Fixes
+
+* added stricter eslint rules ([45c42b9](https://github.com/spaced-out/ui-design-system/commit/45c42b9b1a3de57c5420047a247b2028aac5e9dd))
+* added stricter rules ([2ca45da](https://github.com/spaced-out/ui-design-system/commit/2ca45dada041a412c3d43a84b6b442a44542fbf0))
+* fixed scripts to work with alias paths ([b3f1542](https://github.com/spaced-out/ui-design-system/commit/b3f1542710f4347611235b7770858209092dcb0b))
+* rules of hooks fixed ([2eaba73](https://github.com/spaced-out/ui-design-system/commit/2eaba73ab64bd4191852f9926d7e54c1469b5c1b))
+
 ### [0.5.9](https://github.com/spaced-out/ui-design-system/compare/v0.5.8...v0.5.9) (2025-09-17)
 
 

package/eslint.config.mjs

@@ -65,21 +65,21 @@ export default [
     files: ['src/**/*.{ts,tsx}'],
     rules: {
       // Core
-      'arrow-body-style': ['warn', 'as-needed'],
-      curly: ['warn', 'all'],
-      'comma-spacing': ['warn', {before: false, after: true}],
-      'eol-last': 'warn',
+      'arrow-body-style': ['error', 'as-needed'],
+      curly: ['error', 'all'],
+      'comma-spacing': ['error', {before: false, after: true}],
+      'eol-last': 'error',
       eqeqeq: ['error', 'always', {null: 'ignore'}],
       indent: 'off',
-      'max-params': ['warn', {max: 4}],
-      'no-alert': 'warn',
+      'max-params': ['error', {max: 4}],
+      'no-alert': 'error',
       'no-console': ['error', {allow: ['warn', 'error']}],
       'no-dupe-args': 'error',
       'no-dupe-keys': 'error',
       'no-duplicate-case': 'error',
       // Allow TS overloads
       'no-dupe-class-members': 'off',
-      'no-empty-function': 'warn',
+      'no-empty-function': 'error',
       'no-empty-pattern': 'error',
       'no-eval': 'error',
       'no-extend-native': 'error',
@@ -94,43 +94,51 @@ export default [
       'no-redeclare': 'off', // use TS rule
       'no-restricted-globals': ['error', 'event', 'location'],
       'no-sparse-arrays': 'error',
-      'no-tabs': 'warn',
+      'no-tabs': 'error',
       'no-this-before-super': 'error',
-      'no-trailing-spaces': 'warn',
+      'no-trailing-spaces': 'error',
       'no-underscore-dangle': 'off',
-      'no-unmodified-loop-condition': 'warn',
+      'no-unmodified-loop-condition': 'error',
       'no-undef': 'off', // TS handles this
-      'no-unreachable': 'warn',
+      'no-unreachable': 'error',
       'no-useless-constructor': 'off', // use TS rule
       'no-var': 'error',
       'no-with': 'error',
       'object-shorthand': 'error',
       'prefer-arrow-callback': 'error',
-      'prefer-const': 'warn',
-      'prefer-spread': 'warn',
-      quotes: ['warn', 'single', {allowTemplateLiterals: true}],
+      'prefer-const': 'error',
+      'prefer-spread': 'error',
+      quotes: ['error', 'single', {allowTemplateLiterals: true}],
       'require-yield': 'error',
       'rest-spread-spacing': 'error',
-      strict: ['warn', 'never'],
+      strict: ['error', 'never'],
 
       // import
-      'import/newline-after-import': ['warn', {count: 2}],
+      'import/newline-after-import': ['error', {count: 2}],
       'import/no-duplicates': 'error',
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            './*', // ban same-folder
+            '../*', // ban parent-folder
+          ],
+        },
+      ],
 
       // react
       'react/jsx-no-undef': 'error',
-      'react/jsx-pascal-case': 'warn',
+      'react/jsx-pascal-case': 'error',
       'react/jsx-uses-react': 'off',
       'react/jsx-uses-vars': 'error',
-      'react/no-array-index-key': 'warn',
+      'react/no-array-index-key': 'error',
       'react/no-deprecated': 'error',
       'react/no-direct-mutation-state': 'error',
-      'react/no-string-refs': 'warn',
+      'react/no-string-refs': 'error',
       'react/prop-types': 'off',
       'react/react-in-jsx-scope': 'off',
 
-      // hooks //NOTE:(diwaker) temp keep as warn during migration; tighten later
-      'react-hooks/rules-of-hooks': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
 
       // unused
       'unused-imports/no-unused-imports': 'error',
@@ -169,11 +177,19 @@ export default [
       '@typescript-eslint/ban-ts-comment': 'error',
       '@typescript-eslint/no-empty-object-type': 'error',
       '@typescript-eslint/no-unnecessary-type-constraint': 'error',
-      '@typescript-eslint/no-non-null-assertion': 'warn',
+      '@typescript-eslint/no-non-null-assertion': 'error',
       '@typescript-eslint/prefer-as-const': 'error',
 
       // ADDITIONAL NON TYPE-AWARE RULES (Valid for v8.39.1)
-      // '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+      '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports', // enforce `import type`
+          disallowTypeAnnotations: false, // allow `import Foo = require(...)` style if needed
+          fixStyle: 'separate-type-imports', // auto-fix groups type imports separately
+        },
+      ],
       '@typescript-eslint/explicit-function-return-type': 'off', // Too strict for most projects
       '@typescript-eslint/explicit-member-accessibility': 'off', // Too strict for most projects
       '@typescript-eslint/explicit-module-boundary-types': 'off', // Too strict for most projects
@@ -214,7 +230,7 @@ export default [
   {
     files: ['**/*.stories.{jsx,tsx}'],
     rules: {
-      semi: ['warn', 'always'],
+      semi: ['error', 'always'],
     },
   },
 
@@ -256,7 +272,7 @@ export default [
       ],
 
       // optional: keep two blank lines after imports (helps readability)
-      'import/newline-after-import': ['warn', {count: 2}],
+      'import/newline-after-import': ['error', {count: 2}],
     },
   },
 ];

package/lib/components/Card/Card.d.ts

@@ -20,20 +20,22 @@ export interface CardProps {
     paddingRight?: PaddingSizeType;
     paddingBottom?: PaddingSizeType;
     paddingLeft?: PaddingSizeType;
+    testId?: string;
 }
 export interface CardChildProps {
     className?: string;
     children: React.ReactNode;
+    testId?: string;
 }
 export interface ClickableCardProps extends Omit<CardProps, 'onClick' | 'disabled'> {
     onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
     disabled?: boolean;
 }
-export declare const CardHeader: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
-export declare const CardTitle: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
-export declare const CardActions: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
-export declare const CardFooter: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
-export declare const CardContent: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardHeader: ({ className, children, testId, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardTitle: ({ className, children, testId, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardActions: ({ className, children, testId, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardFooter: ({ className, children, testId, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardContent: ({ className, children, testId, ...props }: CardChildProps) => React.JSX.Element;
 export declare const Card: Flow.AbstractComponent<CardProps, HTMLDivElement>;
 export declare const ClickableCard: Flow.AbstractComponent<ClickableCardProps, HTMLDivElement>;
 export {};

package/lib/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;EAKxB,CAAC;AAEH,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;IAC/C,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,eAAO,MAAM,UAAU,GAAI,mCAAiC,cAAc,sBAIzE,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,mCAAiC,cAAc,sBAIxE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mCAIzB,cAAc,sBAIhB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,mCAAiC,cAAc,sBAIzE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mCAIzB,cAAc,sBAIhB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CA6BhE,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CA+Cf,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;EAKxB,CAAC;AAEH,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;IAC/C,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,eAAO,MAAM,UAAU,GAAI,2CAKxB,cAAc,sBAQhB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,2CAKvB,cAAc,sBAQhB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,2CAKzB,cAAc,sBAQhB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,2CAKxB,cAAc,sBAQhB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,2CAKzB,cAAc,sBAQhB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CA8BhE,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAsDf,CAAC"}

package/lib/components/Card/Card.js

@@ -7,6 +7,7 @@ exports.PADDING_SIZES = exports.ClickableCard = exports.CardTitle = exports.Card
 var React = _interopRequireWildcard(require("react"));
 var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _string = require("../../utils/string");
 var _CardModule = _interopRequireDefault(require("./Card.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,10 +27,15 @@ const CardHeader = _ref => {
   let {
     className,
     children,
+    testId,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'header'
+    }),
     className: (0, _classify.default)(_CardModule.default.cardHeader, className),
     children: children
   });
@@ -39,10 +45,15 @@ const CardTitle = _ref2 => {
   let {
     className,
     children,
+    testId,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'title'
+    }),
     className: (0, _classify.default)(_CardModule.default.cardTitle, className),
     children: children
   });
@@ -52,10 +63,15 @@ const CardActions = _ref3 => {
   let {
     className,
     children,
+    testId,
     ...props
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'actions'
+    }),
     className: (0, _classify.default)(_CardModule.default.cardActions, className),
     children: children
   });
@@ -65,10 +81,15 @@ const CardFooter = _ref4 => {
   let {
     className,
     children,
+    testId,
     ...props
   } = _ref4;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'footer'
+    }),
     className: (0, _classify.default)(_CardModule.default.cardFooter, className),
     children: children
   });
@@ -78,10 +99,15 @@ const CardContent = _ref5 => {
   let {
     className,
     children,
+    testId,
     ...props
   } = _ref5;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'content'
+    }),
     className: (0, _classify.default)(_CardModule.default.cardContent, className),
     children: children
   });
@@ -95,6 +121,7 @@ const Card = exports.Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     paddingRight = 'medium',
     paddingBottom = 'medium',
     paddingLeft = 'medium',
+    testId,
     ...props
   } = _ref6;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -105,7 +132,10 @@ const Card = exports.Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       '--card-padding-bottom': getPaddingValue(paddingBottom),
       '--card-padding-left': getPaddingValue(paddingLeft)
     },
-    "data-testid": "Card",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'card'
+    }),
     className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
     ref: ref,
     children: children
@@ -116,6 +146,7 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
     classNames,
     onClick,
     disabled = false,
+    testId,
     ...props
   } = _ref7;
   const componentRef = React.useRef(null);
@@ -145,6 +176,7 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
     tabIndex: disabled ? -1 : 0,
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,
+    testId: testId,
     ref: ref
   });
 });

package/lib/components/CircularLoader/CircularLoader.d.ts

@@ -5,6 +5,7 @@ export interface CircularLoaderProps {
     className?: string;
     ariaLabel?: string;
     colorToken?: keyof typeof COLORS;
+    testId?: string;
 }
 export declare const CircularLoader: Flow.AbstractComponent<CircularLoaderProps, HTMLDivElement>;
 //# sourceMappingURL=CircularLoader.d.ts.map

package/lib/components/CircularLoader/CircularLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularLoader.d.ts","sourceRoot":"","sources":["../../../src/components/CircularLoader/CircularLoader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAMtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAqCf,CAAC"}
+{"version":3,"file":"CircularLoader.d.ts","sourceRoot":"","sources":["../../../src/components/CircularLoader/CircularLoader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAOtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAuCf,CAAC"}

package/lib/components/CircularLoader/CircularLoader.js

@@ -7,6 +7,7 @@ exports.CircularLoader = void 0;
 var React = _interopRequireWildcard(require("react"));
 var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _CircularLoaderModule = _interopRequireDefault(require("./CircularLoader.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,9 +17,14 @@ const CircularLoader = exports.CircularLoader = /*#__PURE__*/React.forwardRef((_
     size = 'medium',
     className,
     colorToken = 'colorTextClickable',
-    ariaLabel = 'Loading'
+    ariaLabel = 'Loading',
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'loader'
+    }),
     className: (0, _classify.default)(_CircularLoaderModule.default.container, {
       [_CircularLoaderModule.default.mediumContainer]: size === 'medium',
       [_CircularLoaderModule.default.smallContainer]: size === 'small'