@dmsi/wedgekit-react 0.0.140 → 0.0.142

package/dist/components/index.js

@@ -1,73 +1,73 @@
 import {
   Tooltip
-} from "../chunk-QZGUMB7T.js";
+} from "../chunk-4VTOTNKJ.js";
 import {
   Select
-} from "../chunk-Y4HUYAI5.js";
+} from "../chunk-56Y5DDG3.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-Z36QJ7ZF.js";
-import "../chunk-XCIBYDVK.js";
-import "../chunk-TTO4PL7Y.js";
-import "../chunk-D2YP2BTN.js";
+} from "../chunk-J4E6Q5TM.js";
+import "../chunk-GXSXCEAA.js";
+import "../chunk-BATIOCXB.js";
+import "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-CG2NIXZE.js";
-import "../chunk-FWPJ73IK.js";
-import "../chunk-6UI5GABI.js";
-import "../chunk-4JLU7TAC.js";
-import "../chunk-4F6VQXKY.js";
-import "../chunk-J6LETUNM.js";
-import "../chunk-3ZUSYRI7.js";
+import "../chunk-C4JGTH6G.js";
+import "../chunk-SYEJVSE4.js";
+import "../chunk-R7ELP5C5.js";
+import "../chunk-ZFOANBWG.js";
+import "../chunk-GG5JOFS6.js";
+import "../chunk-AZ7LVLOK.js";
+import "../chunk-EPQLWHCL.js";
 import {
   Checkbox
-} from "../chunk-WT5XXW6G.js";
+} from "../chunk-WFQEE2OO.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-KS4RDR6P.js";
+} from "../chunk-4NCDT5ZY.js";
 import {
   Menu
-} from "../chunk-37TJJQL3.js";
+} from "../chunk-YR7JUKYO.js";
 import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "../chunk-VH3EJNVE.js";
+} from "../chunk-FFU6FB3K.js";
 import {
   useInfiniteScroll
 } from "../chunk-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";
 import {
   Search
-} from "../chunk-OB3URVCR.js";
+} from "../chunk-PMBEIP24.js";
 import {
   Input
-} from "../chunk-R5TLUWDD.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Label
-} from "../chunk-S5K22XTH.js";
+} from "../chunk-JWCT72WR.js";
 import "../chunk-WVUIIBRR.js";
 import {
   Subheader
-} from "../chunk-O4M2GISS.js";
+} from "../chunk-CYZL57LH.js";
 import {
   Accordion
-} from "../chunk-QTD7K43M.js";
-import "../chunk-EO3JJWFW.js";
+} from "../chunk-WSS2DFTP.js";
+import "../chunk-N6JVLYEE.js";
 import {
   Card
-} from "../chunk-4OS6APPF.js";
+} from "../chunk-4LXG6QNT.js";
 import {
   Paragraph
-} from "../chunk-VG4EPHJA.js";
+} from "../chunk-HVI3CL7Y.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import {
   componentGap,
   componentPadding
@@ -138,6 +138,7 @@ import React from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function TableBodyRow({
   id,
+  testid,
   columnVirtualizer,
   row,
   // rowVirtualizer,
@@ -169,6 +170,8 @@ function TableBodyRow({
         isError && "!bg-background-action-critical-secondary-hover",
         showFilterRow ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
       ),
+      id: id ? `${id}-row-${row.id}` : void 0,
+      "data-testid": testid ? `${testid}-row-${row.id}` : void 0,
       style: {
         display: "flex",
         position: "absolute",
@@ -190,7 +193,8 @@ function TableBodyRow({
           return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ jsx2(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx2(
             CellElement,
             {
-              id: id ? `${id}-cell-${cell.id}` : void 0,
+              id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
+              testid: testid ? `${testid}-row-${row.id}-cell-${cell.id}` : void 0,
               cell,
               className: clsx2({
                 "justify-end": typeof cellValue === "number"
@@ -200,6 +204,7 @@ function TableBodyRow({
                 Tooltip,
                 {
                   id: id ? `${id}-tooltip-${cell.id}` : void 0,
+                  testid: testid ? `${testid}-tooltip-${cell.id}` : void 0,
                   showOnTruncation: true,
                   message: cellValue,
                   position: "bottom",
@@ -225,22 +230,25 @@ function TableBodyRow({
 import { jsx as jsx3 } from "react/jsx-runtime";
 function LoadingCell({
   id,
+  testid,
   column
 }) {
   const key = `loading-${column.id}`;
   if (column.cell === "checkbox") {
-    return /* @__PURE__ */ jsx3(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ jsx3(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
+    return /* @__PURE__ */ jsx3(DataGridCell, { id: id ? `${id}-${key}` : void 0, testid: testid ? `${testid}-${key}` : void 0, children: /* @__PURE__ */ jsx3(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, testid: testid ? `${testid}-${key}-checkbox` : void 0, disabled: true }) }, key);
   }
   if (column.cell === "input") {
     return /* @__PURE__ */ jsx3(
       DataGridCell,
       {
         id: id ? `${id}-${key}` : void 0,
+        testid: testid ? `${testid}-${key}` : void 0,
         component: "input",
         children: /* @__PURE__ */ jsx3(
           Input,
           {
             id: id ? `${id}-${key}-input` : void 0,
+            testid: testid ? `${testid}-${key}-input` : void 0,
             align: "left",
             disabled: true,
             wrapperClassName: "!rounded-none !border-0"
@@ -250,13 +258,14 @@ function LoadingCell({
       key
     );
   }
-  return /* @__PURE__ */ jsx3(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ jsx3("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
+  return /* @__PURE__ */ jsx3(DataGridCell, { id: id ? `${id}-${key}` : void 0, testid: testid ? `${testid}-${key}` : void 0, children: /* @__PURE__ */ jsx3("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
 }
 
 // src/components/DataGrid/TableBody/index.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function TableBody({
   id,
+  testid,
   columnVirtualizer,
   table,
   tableContainerRef,
@@ -311,6 +320,7 @@ function TableBody({
               zIndex: 10
             },
             className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
+            "data-testid": testid ? `${testid}-filter-row` : void 0,
             children: headerGroups.flatMap(
               (x) => x.headers.map((header) => {
                 var _a, _b, _c, _d, _e;
@@ -318,6 +328,7 @@ function TableBody({
                   CellElement,
                   {
                     id: id ? `${id}-filter-cell-${header.id}` : void 0,
+                    testid: testid ? `${testid}-filter-cell-${header.id}` : void 0,
                     noPadding: true,
                     cell: header,
                     width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
@@ -328,6 +339,7 @@ function TableBody({
                       Search,
                       {
                         id: id ? `${id}-filter-search-${header.id}` : void 0,
+                        testid: testid ? `${testid}-filter-search-${header.id}` : void 0,
                         removeRoundness: true,
                         onChange: (e) => header.column.setFilterValue(e.target.value),
                         value: (_d = header.column.getFilterValue()) != null ? _d : "",
@@ -348,6 +360,7 @@ function TableBody({
             TableBodyRow,
             {
               id,
+              testid,
               columnVirtualizer,
               row,
               rowVirtualizer,
@@ -372,7 +385,7 @@ function TableBody({
               transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
             },
             className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx4(LoadingCell, { id, column: column.columnDef }, column.id))
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx4(LoadingCell, { id, testid, column: column.columnDef }, column.id))
           }
         )
       ]
@@ -389,17 +402,20 @@ function PinnedColumns(_a) {
     centerHeader,
     allSelectedAcrossPages,
     someSelectedAcrossPages,
-    toggleSelectAllAcrossPages
+    toggleSelectAllAcrossPages,
+    testid
   } = _b, props = __objRest(_b, [
     "pinDirection",
     "table",
     "centerHeader",
     "allSelectedAcrossPages",
     "someSelectedAcrossPages",
-    "toggleSelectAllAcrossPages"
+    "toggleSelectAllAcrossPages",
+    "testid"
   ]);
   var _a2;
   const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
+  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : void 0;
   return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ jsxs3(
     "table",
     {
@@ -407,9 +423,10 @@ function PinnedColumns(_a) {
         "flex flex-col min-h-min sticky z-20",
         pinDirection === "left" ? "left-0" : "right-0"
       ),
+      "data-testid": pinnedTestId,
       children: [
         /* @__PURE__ */ jsx5("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
-          return /* @__PURE__ */ jsx5("tr", { className: "flex w-full", children: headerGroup.headers.map((header) => {
+          return /* @__PURE__ */ jsx5("tr", { "data-testid": pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: headerGroup.headers.map((header) => {
             var _a3, _b2, _c;
             if (!header) {
               return;
@@ -420,6 +437,7 @@ function PinnedColumns(_a) {
                 DataCellHeader,
                 {
                   locked: true,
+                  testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
                   header,
                   center: centerHeader,
                   width: customHeaderWidth,
@@ -473,7 +491,9 @@ function PinnedColumns(_a) {
         }) }),
         /* @__PURE__ */ jsx5(
           TableBody,
-          __spreadProps(__spreadValues({}, props), {
+          __spreadProps(__spreadValues({
+            testid: pinnedTestId
+          }, props), {
             table,
             locked: true,
             pinDirection
@@ -492,15 +512,17 @@ import { useState } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function ColumnSelectorMenuOption({
   id,
+  testid,
   column,
   toggleColumnVisibility
 }) {
   const [isVisible, setIsVisible] = useState(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ jsx6(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx6(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx6(
     Checkbox,
     {
       id: id ? `${id}-checkbox` : void 0,
+      testid: testid ? `${testid}-checkbox` : void 0,
       label: label != null ? label : "Unknown",
       checked: isVisible,
       onChange: (e) => {
@@ -515,6 +537,7 @@ function ColumnSelectorMenuOption({
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function ColumnSelectorHeaderCell({
   id,
+  testid,
   table,
   toggleColumnVisibility,
   resetColumnVisibility
@@ -525,6 +548,7 @@ function ColumnSelectorHeaderCell({
     DataGridCell,
     {
       id,
+      testid,
       width: "48",
       type: "header",
       color: "text-secondary-normal",
@@ -534,6 +558,7 @@ function ColumnSelectorHeaderCell({
           Button,
           {
             id: id ? `${id}-button` : void 0,
+            testid: testid ? `${testid}-button` : void 0,
             onClick: () => setShow((prev) => !prev),
             variant: "navigation",
             iconOnly: true,
@@ -544,6 +569,7 @@ function ColumnSelectorHeaderCell({
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
+            testid: testid ? `${testid}-menu` : void 0,
             positionTo: ref,
             position: "bottom-right",
             show,
@@ -553,6 +579,7 @@ function ColumnSelectorHeaderCell({
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
+                  testid: testid ? `${testid}-reset-button` : void 0,
                   variant: "tertiary",
                   onClick: () => {
                     resetColumnVisibility();
@@ -568,6 +595,7 @@ function ColumnSelectorHeaderCell({
                 ColumnSelectorMenuOption,
                 {
                   id: id ? `${id}-option-${column.id}` : void 0,
+                  testid: testid ? `${testid}-option-${column.id}` : void 0,
                   column,
                   toggleColumnVisibility
                 },
@@ -587,6 +615,7 @@ var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
 var NO_RESULTS_HEIGHT = "h-[120px]";
 function DataGrid({
   id,
+  testid,
   data,
   columns,
   status,
@@ -793,6 +822,7 @@ function DataGrid({
             "div",
             {
               id,
+              "data-testid": testid,
               className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
               children: [
                 /* @__PURE__ */ jsxs5(
@@ -807,6 +837,7 @@ function DataGrid({
                       /* @__PURE__ */ jsx8(
                         PinnedColumns,
                         {
+                          testid,
                           pinDirection: "left",
                           table,
                           tableContainerRef: containerRef,
@@ -818,7 +849,7 @@ function DataGrid({
                         }
                       ),
                       /* @__PURE__ */ jsxs5("table", { className: "flex-1 flex flex-col min-h-min", children: [
-                        /* @__PURE__ */ jsx8("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5("tr", { className: "flex w-full", children: [
+                        /* @__PURE__ */ jsx8("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5("tr", { "data-testid": testid ? `${testid}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: [
                           virtualPaddingLeft ? (
                             // fake empty column to the left for virtualization scroll padding
                             /* @__PURE__ */ jsx8(
@@ -841,6 +872,7 @@ function DataGrid({
                                 DraggableCellHeader,
                                 {
                                   id: id ? `${id}-header-${header.id}` : void 0,
+                                  testid: testid ? `${testid}-header-${header.id}` : void 0,
                                   header,
                                   locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
                                   center: centerHeader,
@@ -889,6 +921,7 @@ function DataGrid({
                               DataGridCell,
                               {
                                 id: id ? `${id}-header-${header.id}` : void 0,
+                                testid: testid ? `${testid}-header-${header.id}` : void 0,
                                 type: "header",
                                 component: "checkbox",
                                 locked: true,
@@ -896,6 +929,7 @@ function DataGrid({
                                   Checkbox,
                                   {
                                     id: id ? `${id}-select-all-checkbox` : void 0,
+                                    testid: testid ? `${testid}-select-all-checkbox` : void 0,
                                     checked: allSelectedAcrossPages,
                                     indeterminate: someSelectedAcrossPages,
                                     onChange: toggleSelectAllAcrossPages
@@ -920,6 +954,7 @@ function DataGrid({
                             ColumnSelectorHeaderCell,
                             {
                               id: id ? `${id}-column-selector` : void 0,
+                              testid: testid ? `${testid}-column-selector` : void 0,
                               table,
                               toggleColumnVisibility,
                               resetColumnVisibility
@@ -930,6 +965,7 @@ function DataGrid({
                           TableBody,
                           {
                             id,
+                            testid,
                             columnVirtualizer,
                             table,
                             tableContainerRef: containerRef,
@@ -946,6 +982,7 @@ function DataGrid({
                       /* @__PURE__ */ jsx8(
                         PinnedColumns,
                         {
+                          testid,
                           pinDirection: "right",
                           table,
                           tableContainerRef: containerRef,
@@ -968,6 +1005,7 @@ function DataGrid({
                       componentGap,
                       componentPadding
                     ),
+                    "data-testid": testid ? `${testid}-no-results` : void 0,
                     children: [
                       /* @__PURE__ */ jsx8(Subheader, { color: "text-secondary-normal", children: "No Results" }),
                       /* @__PURE__ */ jsx8(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
@@ -981,6 +1019,7 @@ function DataGrid({
                         Select,
                         {
                           id: id ? `${id}-pagesize-select` : void 0,
+                          testid: testid ? `${testid}-pagesize-select` : void 0,
                           wrapperClassName: "!w-20",
                           value: pagination.pageSize.toString(),
                           onChange: (e) => {
@@ -991,6 +1030,7 @@ function DataGrid({
                             Menu,
                             __spreadProps(__spreadValues({}, props), {
                               id: id ? `${id}-pagesize-menu` : void 0,
+                              testid: testid ? `${testid}-pagesize-menu` : void 0,
                               children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
                                 MenuOption,
                                 {
@@ -1015,6 +1055,7 @@ function DataGrid({
                         Button,
                         {
                           id: id ? `${id}-prev-page-button` : void 0,
+                          testid: testid ? `${testid}-prev-page-button` : void 0,
                           iconOnly: true,
                           leftIcon: /* @__PURE__ */ jsx8(Icon, { name: "chevron_left" }),
                           onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
@@ -1038,6 +1079,7 @@ function DataGrid({
                         Button,
                         {
                           id: id ? `${id}-next-page-button` : void 0,
+                          testid: testid ? `${testid}-next-page-button` : void 0,
                           iconOnly: true,
                           leftIcon: /* @__PURE__ */ jsx8(Icon, { name: "chevron_right" }),
                           onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
@@ -1047,7 +1089,7 @@ function DataGrid({
                       )
                     ] })
                   ] }),
-                  status && /* @__PURE__ */ jsx8(Paragraph, { children: status })
+                  status && /* @__PURE__ */ jsx8(Paragraph, { testid: testid ? `${testid}-status-text` : void 0, children: status })
                 ] })
               ]
             }

package/dist/index.css

@@ -2073,6 +2073,9 @@
   .\!text-text-primary-error {
     color: var(--color-text-primary-error) !important;
   }
+  .\!text-text-secondary-normal {
+    color: var(--color-text-secondary-normal) !important;
+  }
   .text-action-400 {
     color: var(--color-action-400);
   }
@@ -2536,6 +2539,13 @@
       }
     }
   }
+  .peer-hover\:bg-border-action-hover {
+    &:is(:where(.peer):hover ~ *) {
+      @media (hover: hover) {
+        background-color: var(--color-border-action-hover);
+      }
+    }
+  }
   .peer-hover\:text-icon-action-critical-secondary-hover {
     &:is(:where(.peer):hover ~ *) {
       @media (hover: hover) {
@@ -2615,6 +2625,11 @@
       background-color: var(--color-background-action-secondary-active);
     }
   }
+  .peer-active\:bg-border-action-active {
+    &:is(:where(.peer):active ~ *) {
+      background-color: var(--color-border-action-active);
+    }
+  }
   .peer-active\:text-icon-action-critical-secondary-active {
     &:is(:where(.peer):active ~ *) {
       color: var(--color-icon-action-critical-secondary-active);
@@ -2863,17 +2878,17 @@
       }
     }
   }
-  .hover\:bg-border-action-hover {
+  .hover\:\!text-brand-text-on-action-primary-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-border-action-hover);
+        color: var(--color-brand-text-on-action-primary-hover) !important;
       }
     }
   }
-  .hover\:\!text-brand-text-on-action-primary-hover {
+  .hover\:\!text-text-action-primary-hover {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-brand-text-on-action-primary-hover) !important;
+        color: var(--color-text-action-primary-hover) !important;
       }
     }
   }
@@ -3163,6 +3178,11 @@
       color: var(--color-brand-text-on-action-primary-active) !important;
     }
   }
+  .active\:\!text-text-action-primary-active {
+    &:active {
+      color: var(--color-text-action-primary-active) !important;
+    }
+  }
   .active\:\!text-text-on-action-primary-active {
     &:active {
       color: var(--color-text-on-action-primary-active) !important;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.140",
+  "version": "0.0.142",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Accordion.tsx

@@ -16,10 +16,11 @@ interface AccordionProps {
   onClick?: () => void;
   className?: string;
   disabled?: boolean;
+  testid?: string;
 }
 
 export function Accordion(props: AccordionProps) {
-  const { isOpen, onClick, className, disabled } = props;
+  const { isOpen, onClick, className, disabled, testid } = props;
   const {
     title,
     before,
@@ -50,12 +51,13 @@ export function Accordion(props: AccordionProps) {
       )}
       selected={isOpen}
       onClick={handleClick}
+      testid={testid}
     >
       <Stack sizing="component" horizontal justify="between" items="center">
         <Stack sizing="layout-group" horizontal items="center">
           {before}
           {typeof title === "string" ? (
-            <Paragraph className="text-text-primary-normal">{title}</Paragraph>
+            <Paragraph testid={testid ? `${testid}-title` : undefined} className="text-text-primary-normal">{title}</Paragraph>
           ) : (
             title
           )}
@@ -67,6 +69,7 @@ export function Accordion(props: AccordionProps) {
         style={{
           gridTemplateRows: isOpen ? "1fr" : "0fr",
         }}
+        data-testid={testid ? `${testid}-content-container` : undefined}
       >
         <div className="overflow-hidden">
           <div

package/src/components/Breadcrumbs.tsx

@@ -10,6 +10,7 @@ type BreadcrumbsProps = {
   path?: string; // Optional override for SSR / testing
   crumbs: BreadcrumbProps[];
   id?: string;
+  testid?: string;
 };
 
 type BreadcrumbProps = {
@@ -17,6 +18,7 @@ type BreadcrumbProps = {
   children: React.ReactNode;
   onClick?: () => void; // Optional click handler
   id?: string;
+  testid?: string;
 };
 
 export const Breadcrumb = ({
@@ -24,6 +26,7 @@ export const Breadcrumb = ({
   children,
   onClick,
   id,
+  testid
 }: BreadcrumbProps) => {
   const linkPadding = clsx(
     "!text-text-link-normal  whitespace-nowrap",
@@ -33,9 +36,10 @@ export const Breadcrumb = ({
   );
 
   return (
-    <li key={href} id={id} className="flex items-center">
+    <li key={href} id={id} data-testid={testid} className="flex items-center">
       <Link
         id={id ? `${id}-link` : undefined}
+        data-testid={testid ? `${testid}-link` : undefined}
         className={linkPadding}
         href={href}
         onClick={onClick}
@@ -52,7 +56,7 @@ const Chevron = () => (
   </li>
 );
 
-export const Breadcrumbs = ({ asCardStyle, id, crumbs }: BreadcrumbsProps) => {
+export const Breadcrumbs = ({ asCardStyle, id, testid, crumbs }: BreadcrumbsProps) => {
   const scrollableElement = React.useRef<HTMLElement | null>(null);
   const [isOverflow, setIsOverflow] = useState(false);
 
@@ -78,6 +82,7 @@ export const Breadcrumbs = ({ asCardStyle, id, crumbs }: BreadcrumbsProps) => {
   return (
     <nav
       id={id}
+      data-testid={testid}
       className={clsx(
         "relative select-none flex items-center  max-w-full w-full",
         {
@@ -97,6 +102,7 @@ export const Breadcrumbs = ({ asCardStyle, id, crumbs }: BreadcrumbsProps) => {
 
       <ol
         id={id ? `${id}-list` : undefined}
+        data-testid={testid ? `${testid}-list` : undefined}
         className="flex items-center overflow-x-scroll"
         style={{ scrollbarWidth: "none" }}
         onScroll={updateOverflow}
@@ -114,6 +120,7 @@ export const Breadcrumbs = ({ asCardStyle, id, crumbs }: BreadcrumbsProps) => {
                 href={href}
                 onClick={onClick}
                 id={id ? `${id}-crumb-${index}` : undefined}
+                testid={testid ? `${testid}-crumb-${index}` : undefined}
               >
                 {children}
               </Breadcrumb>

package/src/components/Button.tsx

@@ -32,6 +32,7 @@ type BaseButtonProps = Omit<
   colorClassName?: string;
   href?: string;
   id?: string;
+  testid?: string;
 };
 
 // At least one of leftIcon, rightIcon, or children must be provided
@@ -56,6 +57,7 @@ export const Button = ({
   colorClassName,
   href,
   id,
+  testid,
   ...props
 }: AsProps<Tags> & ButtonProps) => {
   const primaryVariantStyles =
@@ -189,6 +191,7 @@ export const Button = ({
   return (
     <Element
       id={id}
+      data-testid={testid}
       type={Element === "button" ? "button" : undefined}
       className={buttonClasses}
       {...props}
@@ -200,7 +203,7 @@ export const Button = ({
       {leftIcon && leftIcon}
 
       {!iconOnly && children && (
-        <span id={id ? `${id}-label` : undefined} className={labelClasses}>
+        <span id={id ? `${id}-label` : undefined} data-testid={testid ? `${testid}-label` : undefined} className={labelClasses}>
           {children}
         </span>
       )}