@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/lib/v1/Button/props/propTypes.js

@@ -41,16 +41,27 @@ var propTypes = {
   title: _propTypes["default"].string,
   customClass: _propTypes["default"].shape({
     wrapper: _propTypes["default"].string,
-    text: _propTypes["default"].string
+    text: _propTypes["default"].string,
+    icon: _propTypes["default"].string,
+    loader: _propTypes["default"].string,
+    success: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].shape({
     text: _propTypes["default"].object,
     icon: _propTypes["default"].object
   }),
-  customAttributes: _propTypes["default"].object,
+  customAttributes: _propTypes["default"].shape({
+    button: _propTypes["default"].object,
+    contentWrapper: _propTypes["default"].object,
+    loader: _propTypes["default"].object,
+    success: _propTypes["default"].object,
+    icon: _propTypes["default"].object,
+    text: _propTypes["default"].object
+  }),
   a11yAttributes: _propTypes["default"].object,
   customId: _propTypes["default"].string,
-  testId: _propTypes["default"].string
+  testId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 var _default = propTypes;
 exports["default"] = _default;

package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/lib/v1/Switch/Switch.js

@@ -23,6 +23,8 @@ var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
 var _Label = _interopRequireDefault(require("../../Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _Switch_v1Module = _interopRequireDefault(require("./css/Switch_v1.module.css"));
 
 var _excluded = ["ariaDisabled", "ariaLabel"];
@@ -127,20 +129,20 @@ var Switch = function Switch(props) {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    className: trackClass,
+    className: (0, _cssUtility.cn)(trackClass),
     "data-title": title,
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
   })), /*#__PURE__*/_react["default"].createElement("svg", {
-    className: thumbClass,
+    className: (0, _cssUtility.cn)(thumbClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
     cx: "50%",
     cy: "50%",
     r: _contants.THUMB_RADIUS[size]
   })), hasStateIndication ? /*#__PURE__*/_react["default"].createElement("svg", {
-    className: labelIndicationClass,
+    className: (0, _cssUtility.cn)(labelIndicationClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
     width: "100%",

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -1,83 +1,83 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .hover\:bg-brand-80:hover {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .focus\:bg-brand-80:focus {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .active\:bg-brand-80:active {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .selected\:bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .hover\:bg-brand-100:hover {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .focus\:bg-brand-100:focus {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .active\:bg-brand-100:active {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .selected\:bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .hover\:bg-brand-10:hover {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .focus\:bg-brand-10:focus {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .active\:bg-brand-10:active {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .selected\:bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 /* color not available */
 .bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .hover\:bg-brand-20:hover {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .focus\:bg-brand-20:focus {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .active\:bg-brand-20:active {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .selected\:bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 /* Static Grey Palette */
@@ -122,23 +122,23 @@
 }
 
 .bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .hover\:bg-grey-10:hover {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .focus\:bg-grey-10:focus {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .active\:bg-grey-10:active {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .selected\:bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .bg-grey-15 {
@@ -163,23 +163,23 @@
 
 /* Static Blue Palette */
 .bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .hover\:bg-blue-80:hover {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .focus\:bg-blue-80:focus {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .active\:bg-blue-80:active {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .selected\:bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .bg-blue-100 {
@@ -569,23 +569,23 @@
 
 /* Utility Colors */
 .bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .hover\:bg-transparent:hover {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .focus\:bg-transparent:focus {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .active\:bg-transparent:active {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .selected\:bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .bg-white {

package/lib/v1/helpers/colorHelpers/border/borderColor.module.css

@@ -62,84 +62,84 @@
 
 /* Static Grey Palette */
 .border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-65:hover {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-65:focus {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-65:active {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .hover\:border-grey-55:hover {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .focus\:border-grey-55:focus {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .active\:border-grey-55:active {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .selected\:border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-15:hover {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-15:focus {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-15:active {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 /* Static Blue Palette */
 .border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .hover\:border-blue-80:hover {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .focus\:border-blue-80:focus {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .active\:border-blue-80:active {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .selected\:border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .border-blue-100 {

package/lib/v1/helpers/colorHelpers/text/textColor.module.css

@@ -1,22 +1,22 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .hover\:text-brand-80:hover {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .focus\:text-brand-80:focus {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .active\:text-brand-80:active {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .selected\:text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .text-brand-100 {
@@ -41,23 +41,23 @@
 
 /* Static Grey Palette */
 .text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .hover\:text-grey-65:hover {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .focus\:text-grey-65:focus {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .active\:text-grey-65:active {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .selected\:text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .text-grey-100 {
@@ -82,43 +82,43 @@
 
 /* Static Blue Palette */
 .text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .hover\:text-blue-80:hover {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .focus\:text-blue-80:focus {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .active\:text-blue-80:active {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .selected\:text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .hover\:text-blue-100:hover {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .focus\:text-blue-100:focus {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .active\:text-blue-100:active {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .selected\:text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 /* Static Green Palette */
@@ -307,62 +307,62 @@
 }
 
 .text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .hover\:text-white:hover {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .focus\:text-white:focus {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .active\:text-white:active {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .selected\:text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .hover\:text-black:hover {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .focus\:text-black:focus {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .active\:text-black:active {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .selected\:text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 /* CTA-aware filled text — adapts to CTA theme */
 .text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .hover\:text-brand-filled:hover {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .focus\:text-brand-filled:focus {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .active\:text-brand-filled:active {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .selected\:text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }

package/lib/v1/shared/Loader/Loader.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,17 +22,17 @@ var Loader = function Loader(props) {
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper),
+    className: (0, _cssUtility.cn)("".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _Loader_v1Module["default"].spinnerTrack,
+    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _Loader_v1Module["default"].spinnerHead,
+    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"

package/lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Loader renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="spinner "
+    class="spinner"
     role="img"
     viewBox="0 0 24 24"
   >

package/lib/v1/shared/SuccessTick/SuccessTick.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SuccessTick_v1Module = _interopRequireDefault(require("./SuccessTick_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,7 +22,7 @@ var SuccessTick = function SuccessTick(props) {
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper),
+    className: (0, _cssUtility.cn)("".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/lib/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="tick "
+    class="tick"
     role="img"
     viewBox="0 0 24 24"
   >