@fileverse-dev/fortune-react 1.2.98 → 1.2.99

package/es/components/SheetTab/index.js

@@ -130,8 +130,9 @@ var SheetTab = function SheetTab() {
   });
   var finalStats = statsFilter.length !== 6 ? [] : statsFilter;
   return /*#__PURE__*/React.createElement("div", null, showDisclaimer && (/*#__PURE__*/React.createElement("div", {
-    className: "w-full",
+    className: "fortune-sheettab__info fortune-sheettab__disclaimer w-full",
     id: "denomination-warning",
+    "data-testid": "sheettab-info-disclaimer",
     style: {
       zIndex: 1003,
       position: "absolute",
@@ -148,36 +149,43 @@ var SheetTab = function SheetTab() {
   }, /*#__PURE__*/React.createElement("div", {
     className: "max-w-7xl mx-auto px-4 py-1 ".concat(isMobile && "w-full flex justify-between")
   }, /*#__PURE__*/React.createElement("p", {
-    className: "".concat(isMobile ? "text-left" : "text-center", " text-xsm")
+    className: "fortune-sheettab__para ".concat(isMobile ? "text-left" : "text-center", " text-xsm"),
+    "data-testid": "sheettab-para-disclaimer"
   }, /*#__PURE__*/React.createElement("span", {
     className: "font-medium"
   }, "Disclaimer:"), " Prices are not updated in real time and may differ slightly. Updates may be delayed by up to 20 minutes."), isMobile && (/*#__PURE__*/React.createElement("p", {
-    className: "ml-4 content-center cursor-pointer",
+    className: "fortune-sheettab__action fortune-sheettab__action--close-disclaimer ml-4 content-center cursor-pointer",
     style: {
       alignContent: "center"
     },
-    onClick: handleCloseDisclaimer
+    onClick: handleCloseDisclaimer,
+    "data-testid": "sheettab-action-close-disclaimer"
   }, "Close"))))), /*#__PURE__*/React.createElement("div", {
-    className: "luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
+    className: "fortune-sheettab luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
     onContextMenu: function onContextMenu(e) {
       return e.preventDefault();
     },
-    id: "luckysheet-sheet-area"
+    id: "luckysheet-sheet-area",
+    "data-testid": "sheettab"
   }, /*#__PURE__*/React.createElement("div", {
-    id: "luckysheet-sheet-content"
+    id: "luckysheet-sheet-content",
+    className: "fortune-sheettab__content",
+    "data-testid": "sheettab-content"
   }, context.allowEdit && (/*#__PURE__*/React.createElement(IconButton, {
-    className: "fortune-sheettab-button border-none shadow-none",
+    className: "fortune-sheettab__cta fortune-sheettab-button border-none shadow-none",
     onClick: onAddSheetClick,
     elevation: 1,
     icon: "Plus",
     size: "sm",
-    variant: "secondary"
+    variant: "secondary",
+    "data-testid": "sheettab-cta-add-sheet"
   })), context.allowEdit && (/*#__PURE__*/React.createElement("div", {
     className: "sheet-list-container"
   }, /*#__PURE__*/React.createElement("div", {
     id: "all-sheets",
-    className: "fortune-sheettab-button",
+    className: "fortune-sheettab__icon fortune-sheettab-button",
     ref: tabContainerRef,
+    "data-testid": "sheettab-icon-all-sheets",
     onMouseDown: function onMouseDown(e) {
       e.stopPropagation();
       setContext(function (ctx) {
@@ -186,14 +194,16 @@ var SheetTab = function SheetTab() {
       });
     }
   }, /*#__PURE__*/React.createElement(IconButton, {
-    className: "fortune-sheettab-button border-none shadow-none",
+    className: "fortune-sheettab__icon fortune-sheettab-button border-none shadow-none",
     elevation: 1,
     icon: "Menu",
     size: "sm",
-    variant: "secondary"
+    variant: "secondary",
+    "data-testid": "sheettab-icon-menu"
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sheettab-container",
-    id: "fortune-sheettab-container"
+    className: "fortune-sheettab__tabs fortune-sheettab-container",
+    id: "fortune-sheettab-container",
+    "data-testid": "sheettab-tabs"
   }, !isShowBoundary && /*#__PURE__*/React.createElement("div", {
     className: "boundary boundary-left"
   }), /*#__PURE__*/React.createElement("div", {
@@ -246,21 +256,24 @@ var SheetTab = function SheetTab() {
   })))), /*#__PURE__*/React.createElement("div", {
     className: "fortune-sheet-area-right"
   }, statsFilter.length === 6 && calInfo.count > 1 && (/*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(PopoverTrigger, {
-    className: "p-0 m-0 mr-2"
+    className: "fortune-sheettab__info-trigger p-0 m-0 mr-2",
+    "data-testid": "sheettab-info-stats-trigger"
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost",
-    className: "w-full !h-6 p-2 m-1 text-left flex items-center justify-center transition mr-2 !rounded-[0px]",
+    className: "fortune-sheettab__info fortune-sheettab__info--stats w-full !h-6 p-2 m-1 text-left flex items-center justify-center transition mr-2 !rounded-[0px]",
     style: {
       height: "24px !important"
-    }
+    },
+    "data-testid": "sheettab-info-stats"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center"
   }, /*#__PURE__*/React.createElement("p", {
-    className: "text-body-sm",
+    className: "fortune-sheettab__para fortune-sheettab__para--stats text-body-sm",
     style: {
       fontWeight: "500",
       marginRight: "8px"
-    }
+    },
+    "data-testid": "sheettab-para-stats"
   }, STATS_LABELS[selectedStat], ":", " ", calInfo[selectedStat]), /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "18",
@@ -293,7 +306,9 @@ var SheetTab = function SheetTab() {
     return /*#__PURE__*/React.createElement(Button, {
       variant: "ghost",
       key: option.value,
-      className: "w-full h-8 rounded p-2 m-1 text-left flex items-center justify-between transition mr-2 min-w-[50px] ".concat(selectedStat === option.value && "bg-[#F8F9FA]"),
+      className: "fortune-sheettab__stats-option fortune-sheettab__stats-option--".concat(option.value, " w-full h-8 rounded p-2 m-1 text-left flex items-center justify-between transition mr-2 min-w-[50px] ").concat(selectedStat === option.value && "bg-[#F8F9FA]"),
+      "data-stat-value": option.value,
+      "data-testid": "sheettab-stats-option-".concat(option.value),
       onClick: function onClick() {
         return setSelectedStat(option.value);
       }

package/es/components/Toolbar/Button.js

@@ -10,18 +10,25 @@ var Button = function Button(_a) {
     children = _a.children,
     style = _a.style,
     id = _a.id;
+  var iconIdClass = iconId.replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
   return /*#__PURE__*/React.createElement(Tooltip, {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: "fortune-toolbar-button fortune-toolbar-item",
+    className: "fortune-toolbar-button fortune-toolbar-item fortune-toolbar-button__cta fortune-toolbar-button--".concat(iconIdClass),
+    "data-icon-id": iconId,
     onClick: onClick,
     tabIndex: 0,
     role: "button",
     style: selected ? {
       backgroundColor: "#FFDF0A"
-    } : style
+    } : style,
+    "data-testid": "toolbar-cta-".concat(id !== null && id !== void 0 ? id : iconId)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fortune-toolbar-button__icon fortune-toolbar-button__icon--".concat(iconIdClass),
+    "data-icon-id": iconId,
+    "data-testid": "toolbar-icon-".concat(iconId)
   }, /*#__PURE__*/React.createElement(LucideIcon, {
     name: getLucideIcon(iconId),
     width: 16,
@@ -29,6 +36,6 @@ var Button = function Button(_a) {
     style: disabled ? {
       opacity: 0.3
     } : {}
-  }), children));
+  })), children));
 };
 export default Button;

package/es/components/Toolbar/Combo.js

@@ -2,6 +2,9 @@ import React, { useMemo, useRef, useState } from "react";
 import { IconButton, Tooltip, Popover, PopoverContent, PopoverTrigger, cn, Button, LucideIcon } from "@fileverse/ui";
 import SVGIcon from "../SVGIcon";
 import { getLucideIcon } from ".";
+var toCssId = function toCssId(s) {
+  return String(s).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
+};
 var Combo = function Combo(_a) {
   var tooltip = _a.tooltip,
     _onClick = _a.onClick,
@@ -20,6 +23,7 @@ var Combo = function Combo(_a) {
     setOpen = _c[1];
   var buttonRef = useRef(null);
   var ref = useRef(null);
+  var iconIdClass = iconId ? toCssId(iconId) : "combo";
   if (!triggerRef) {
     triggerRef = ref;
   }
@@ -33,7 +37,9 @@ var Combo = function Combo(_a) {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-combo-button",
+    className: "fortune-toolbar-combo-button fortune-toolbar-combo-button--".concat(iconIdClass),
+    "data-icon-id": iconId !== null && iconId !== void 0 ? iconId : undefined,
+    "data-testid": "toolbar-combo-".concat(iconId !== null && iconId !== void 0 ? iconId : "combo"),
     onClick: function onClick(e) {
       if (_onClick) {
         _onClick(e);
@@ -93,7 +99,9 @@ var Combo = function Combo(_a) {
   })))));
   return /*#__PURE__*/React.createElement("div", {
     ref: buttonRef,
-    className: "fortune-toolbar-item",
+    className: "fortune-toolbar-item fortune-toolbar-combo fortune-toolbar-combo--".concat(iconIdClass),
+    "data-icon-id": iconId !== null && iconId !== void 0 ? iconId : undefined,
+    "data-testid": "toolbar-combo-".concat(iconId !== null && iconId !== void 0 ? iconId : "combo"),
     onKeyDown: function onKeyDown(e) {
       e.stopPropagation();
     }

package/es/components/Toolbar/CustomButton.js

@@ -1,6 +1,9 @@
 import React from "react";
 import { Tooltip } from "@fileverse/ui";
 import CustomIcon from "./CustomIcon";
+var toCssId = function toCssId(s) {
+  return String(s).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
+};
 var CustomButton = function CustomButton(_a) {
   var tooltip = _a.tooltip,
     onClick = _a.onClick,
@@ -8,22 +11,28 @@ var CustomButton = function CustomButton(_a) {
     children = _a.children,
     iconName = _a.iconName,
     icon = _a.icon;
+  var iconNameClass = iconName ? toCssId(iconName) : "custom";
   return /*#__PURE__*/React.createElement(Tooltip, {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-button fortune-toolbar-item",
+    className: "fortune-toolbar-button fortune-toolbar-item fortune-toolbar-button--".concat(iconNameClass),
+    "data-icon-name": iconName !== null && iconName !== void 0 ? iconName : undefined,
     onClick: onClick,
     tabIndex: 0,
     role: "button",
     style: selected ? {
       backgroundColor: "#FFDF0A"
-    } : {}
+    } : {},
+    "data-testid": "toolbar-cta-".concat(iconName !== null && iconName !== void 0 ? iconName : "custom")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fortune-toolbar-button__icon fortune-toolbar-button__icon--".concat(iconNameClass),
+    "data-icon-name": iconName !== null && iconName !== void 0 ? iconName : undefined
   }, /*#__PURE__*/React.createElement(CustomIcon, {
     width: 16,
     height: 16,
     iconName: iconName,
     content: icon
-  }), children));
+  })), children));
 };
 export default CustomButton;

package/es/components/Toolbar/Select.js

@@ -8,16 +8,22 @@ var Select = function Select(_a) {
     style: style
   }, children);
 };
+var toCssId = function toCssId(s) {
+  return String(s).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
+};
 var Option = function Option(_a) {
   var iconId = _a.iconId,
     onClick = _a.onClick,
     children = _a.children,
     _onMouseLeave = _a.onMouseLeave,
     _onMouseEnter = _a.onMouseEnter;
+  var iconIdClass = iconId ? toCssId(iconId) : "option";
   return /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
     tabIndex: 0,
-    className: "fortune-toolbar-select-option",
+    className: "fortune-toolbar-select-option fortune-toolbar-select-option--".concat(iconIdClass),
+    "data-icon-id": iconId !== null && iconId !== void 0 ? iconId : undefined,
+    "data-testid": "toolbar-select-option-".concat(iconId !== null && iconId !== void 0 ? iconId : "option"),
     onMouseLeave: function onMouseLeave(e) {
       return _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e);
     },

package/lib/components/ConditionFormat/ConditionRules.js

@@ -369,8 +369,10 @@ var ConditionRules = function ConditionRules(_a) {
         setEditConditionRange(rangeEdit);
         setEditConditionFormatValue(allConditionFormats[key].conditionValue);
       },
-      className: "group flex items-center border-b border-gray-200 condition-list-parent",
-      key: key
+      className: "group flex items-center border-b border-gray-200 condition-list-parent fortune-condition-rules__item fortune-condition-rules__item--".concat(String(key).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-")),
+      "data-condition-key": key,
+      key: key,
+      "data-testid": "condition-rules-item-".concat(key)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "condition-list-pill",
       style: {
@@ -392,9 +394,11 @@ var ConditionRules = function ConditionRules(_a) {
         buttonClickCreateRef.current = true;
       }
     }, /*#__PURE__*/_react.default.createElement("h3", {
-      className: "condition-list-type"
+      className: "fortune-condition-rules__heading condition-list-type",
+      "data-testid": "condition-rules-heading-".concat(key)
     }, conditionformat[allConditionFormats[key].conditionName], " ", (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/_react.default.createElement("p", {
-      className: "condition-list-range"
+      className: "fortune-condition-rules__para condition-list-range",
+      "data-testid": "condition-rules-para-".concat(key)
     }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
       var startCol = (0, _helper.numberToColumn)(range.column[0] + 1);
       var endCol = (0, _helper.numberToColumn)(range.column[1] + 1);
@@ -402,12 +406,15 @@ var ConditionRules = function ConditionRules(_a) {
       var endRow = range.row[1] + 1;
       return "".concat(startCol).concat(startRow, ":").concat(endCol).concat(endRow);
     }).join(", "))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "opacity-0 group-hover:opacity-100 transition-opacity"
+      className: "fortune-condition-rules__icon fortune-condition-rules__action opacity-0 group-hover:opacity-100 transition-opacity",
+      "data-condition-key": key,
+      "data-testid": "condition-rules-action-delete-".concat(key)
     }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
       elevation: 1,
       icon: "Trash2",
       size: "md",
       variant: "secondary",
+      className: "fortune-condition-rules__icon--trash",
       style: {
         border: "0px",
         boxShadow: "none",
@@ -428,6 +435,7 @@ var ConditionRules = function ConditionRules(_a) {
     leftIcon: "Plus",
     size: "md",
     variant: "secondary",
+    className: "fortune-condition-rules__cta fortune-condition-rules__cta--add",
     onClick: function onClick() {
       setType("greaterThan");
       setCreate(true);
@@ -441,11 +449,13 @@ var ConditionRules = function ConditionRules(_a) {
       });
       editKeyRef.current = null;
       buttonClickCreateRef.current = true;
-    }
+    },
+    "data-testid": "condition-rules-cta-add"
   }, "Add another rule"))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-col"
+    className: "flex flex-col fortune-condition-rules__form"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
+    className: "fortune-condition-rules__info condition-rules-value text-heading-xsm",
+    "data-testid": "condition-rules-info-range"
   }, conditionformat.applyRange, " range"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
     rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
       name: "Grid2x2",
@@ -463,7 +473,8 @@ var ConditionRules = function ConditionRules(_a) {
       dataSelectRange("conditionRules".concat(type));
     }
   })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
+    className: "fortune-condition-rules__heading-sm condition-rules-value text-heading-xsm",
+    "data-testid": "condition-rules-heading-format"
   }, "Format cells if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
     value: type,
     onValueChange: function onValueChange(value) {

package/lib/components/DataVerification/RangeDialog.js

@@ -47,7 +47,8 @@ var RangeDialog = function RangeDialog() {
   }, [context, context.luckysheet_select_save]);
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "range-dialog",
-    className: "fortune-dialog",
+    className: "fortune-dialog fortune-range-dialog",
+    "data-testid": "range-dialog",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
@@ -65,32 +66,41 @@ var RangeDialog = function RangeDialog() {
     },
     tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _ui.cn)("flex items-center justify-between border-b color-border-default py-3 px-6")
+    className: (0, _ui.cn)("fortune-range-dialog__header flex items-center justify-between border-b color-border-default py-3 px-6"),
+    "data-testid": "range-dialog-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-range-dialog__heading text-heading-sm",
+    "data-testid": "range-dialog-heading"
   }, dataVerification.selectCellRange), /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
     icon: "X",
     variant: "ghost",
     onClick: close,
-    tabIndex: 0
+    tabIndex: 0,
+    className: "fortune-range-dialog__icon fortune-range-dialog__icon--close",
+    "data-testid": "range-dialog-icon-close"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 pt-4 text-body-sm"
+    className: "fortune-range-dialog__para px-6 pb-6 pt-4 text-body-sm",
+    "data-testid": "range-dialog-para"
   }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
     className: "w-full",
     readOnly: true,
     placeholder: dataVerification.selectCellRange2,
     value: rangeTxt2
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+    className: "fortune-range-dialog__actions px-6 pb-6 flex flex-row gap-2 justify-end",
+    "data-testid": "range-dialog-actions"
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "secondary",
+    className: "fortune-range-dialog__cta fortune-range-dialog__cta--close",
     style: {
       minWidth: "80px"
     },
     onClick: close,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "range-dialog-cta-close"
   }, button.close), /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "default",
+    className: "fortune-range-dialog__cta fortune-range-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
@@ -100,7 +110,8 @@ var RangeDialog = function RangeDialog() {
       });
       close();
     },
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "range-dialog-cta-confirm"
   }, button.confirm)));
 };
 var _default = exports.default = RangeDialog;

package/lib/components/Dialog/index.css

@@ -9,6 +9,43 @@
   overflow: auto;
 }
 
+/* BEM selectors for testing and styling */
+.fortune-dialog__header {
+  /* header container */
+}
+
+.fortune-dialog__heading {
+  /* dialog title */
+}
+
+.fortune-dialog__para {
+  /* dialog body content */
+}
+
+.fortune-dialog__icon {
+  /* icon in header (e.g. close) */
+}
+
+.fortune-dialog__icon--close {
+  /* close button icon */
+}
+
+.fortune-dialog__actions {
+  /* footer action container */
+}
+
+.fortune-dialog__cta {
+  /* primary/secondary action button */
+}
+
+.fortune-dialog__cta--cancel {
+  /* cancel button */
+}
+
+.fortune-dialog__cta--confirm {
+  /* confirm/ok button */
+}
+
 .fortune-dialog-box-button-container {
   display: flex;
   align-items: center;

package/lib/components/Dialog/index.js

@@ -36,46 +36,60 @@ var Dialog = function Dialog(_a) {
   var button = (0, _fortuneCore.locale)(context).button;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-dialog",
+    "data-testid": "dialog",
     style: __assign(__assign({}, containerStyle), ["Data validation", "Split text to columns", "Resize column"].includes(title) ? {
       maxWidth: "unset"
     } : {})
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _ui.cn)("flex items-center justify-between border-b color-border-default py-3 px-6")
+    className: (0, _ui.cn)("fortune-dialog__header flex items-center justify-between border-b color-border-default py-3 px-6"),
+    "data-testid": "dialog-header"
   }, title ? (/*#__PURE__*/_react.default.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-dialog__heading text-heading-sm",
+    "data-testid": "dialog-heading"
   }, title)) : (/*#__PURE__*/_react.default.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-dialog__heading text-heading-sm",
+    "data-testid": "dialog-heading"
   }, "Oops! Something went wrong")), /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
     icon: "X",
     variant: "ghost",
     onClick: onCancel,
-    tabIndex: 0
+    tabIndex: 0,
+    className: "fortune-dialog__icon fortune-dialog__icon--close",
+    "data-testid": "dialog-icon-close"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 pt-4 text-body-sm",
-    style: contentStyle
+    className: "fortune-dialog__para px-6 pb-6 pt-4 text-body-sm",
+    style: contentStyle,
+    "data-testid": "dialog-para"
   }, children), type != null && (/*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+    className: "fortune-dialog__actions px-6 pb-6 flex flex-row gap-2 justify-end",
+    "data-testid": "dialog-actions"
   }, type === "ok" ? (/*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "default",
+    className: "fortune-dialog__cta fortune-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
     onClick: onOk,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-confirm"
   }, okLabel || button.confirm)) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "secondary",
+    className: "fortune-dialog__cta fortune-dialog__cta--cancel",
     style: {
       minWidth: "80px"
     },
     onClick: onCancel,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-cancel"
   }, cancelLabel || button.cancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "default",
+    className: "fortune-dialog__cta fortune-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
     onClick: onOk,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-confirm"
   }, okLabel || button.confirm))))));
 };
 var _default = exports.default = Dialog;

package/lib/components/ErrorState/index.js

@@ -31,11 +31,14 @@ var ErrorBoxes = function ErrorBoxes() {
       zIndex: 100,
       borderRadius: "4px"
     },
-    className: "shadow-lg flex flex-col gap-2 break-all"
+    className: "fortune-error-state shadow-lg flex flex-col gap-2 break-all",
+    "data-testid": "error-state"
   }, /*#__PURE__*/_react.default.createElement("h3", {
-    className: "text-heading-xsm color-text-danger"
+    className: "fortune-error-state__heading text-heading-xsm color-text-danger",
+    "data-testid": "error-state-heading"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "color-text-default text-body-sm"
+    className: "fortune-error-state__para color-text-default text-body-sm",
+    "data-testid": "error-state-para"
   }, message));
 };
 var _default = exports.default = ErrorBoxes;

package/lib/components/LinkEidtCard/index.js

@@ -105,10 +105,13 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
     };
   }, [refs.globalCache, isButtonDisabled]);
   var renderToolbarButton = (0, _react.useCallback)(function (iconId, onClick) {
+    var iconIdClass = iconId.replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "fortune-toolbar-button",
+      className: "fortune-link-card__icon fortune-link-card__action fortune-link-card__action--".concat(iconIdClass, " fortune-toolbar-button"),
+      "data-icon-id": iconId,
       onClick: onClick,
-      tabIndex: 0
+      tabIndex: 0,
+      "data-testid": "link-card-action-".concat(iconId)
     }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
       name: iconId,
       style: {
@@ -161,19 +164,21 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      className: "fortune-link-modify-modal link-toolbar",
+      className: "fortune-link-card fortune-link-modify-modal link-toolbar",
       style: {
         left: position.cellLeft + 20,
         top: position.cellBottom - 5
-      }
+      },
+      "data-testid": "link-card"
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "link-content",
+      className: "fortune-link-card__info link-content",
       onClick: function onClick() {
         setContext(function (draftCtx) {
           return (0, _fortuneCore.goToLink)(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
         });
       },
-      tabIndex: 0
+      tabIndex: 0,
+      "data-testid": "link-card-info-open"
     }, linkType === "webpage" ? insertLink.openLink : (0, _fortuneCore.replaceHtml)(insertLink.goTo, {
       linkAddress: linkAddress
     })), context.allowEdit === true && /*#__PURE__*/_react.default.createElement("div", {
@@ -197,13 +202,15 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
     }));
   }
   return /*#__PURE__*/_react.default.createElement("div", __assign({
-    className: "fortune-link-card",
+    className: "fortune-link-card fortune-link-card--editing",
     ref: cardRef,
     style: {
       left: position.cellLeft + 20,
       top: cardTop
     }
-  }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
+  }, containerEvent, {
+    "data-testid": "link-card-editing"
+  }), /*#__PURE__*/_react.default.createElement(_ui.Select, {
     value: linkType,
     onValueChange: function onValueChange(value) {
       if (value === "sheet") {
@@ -228,9 +235,10 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       value: type.value
     }, type.text);
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-input-with-icon"
+    className: "fortune-link-card__para fortune-input-with-icon",
+    "data-testid": "link-card-para-text"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "input-icon"
+    className: "fortune-link-card__icon input-icon"
   }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
     name: "ALargeSmall"
   })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
@@ -283,7 +291,7 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       value: sheet.name
     }, sheet.name);
   }))))), /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    className: "fortune-insert-button",
+    className: "fortune-link-card__cta fortune-insert-button",
     disabled: isButtonDisabled,
     onClick: function onClick() {
       if (isButtonDisabled) return;
@@ -291,7 +299,8 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       setContext(function (draftCtx) {
         return (0, _fortuneCore.saveHyperlink)(draftCtx, r, c, linkText, linkType, linkAddress);
       });
-    }
+    },
+    "data-testid": "link-card-cta-insert"
   }, "Insert link"));
 };
 var _default = exports.default = LinkEditCard;