@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/lib/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Buttongrop -  Checking the "customclass" 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined customClassButtonGroup"
+    class="buttonGroup customClassButtonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -28,7 +28,7 @@ exports[`Buttongrop -  Checking the "customclass" 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -53,7 +53,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -78,7 +78,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -103,7 +103,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
 exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup footer "
+    class="buttonGroup footer"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -128,7 +128,7 @@ exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
 exports[`Buttongrop -  rendering the "type"   - header 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup header "
+    class="buttonGroup header"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -153,7 +153,7 @@ exports[`Buttongrop -  rendering the "type"   - header 1`] = `
 exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup tab "
+    class="buttonGroup tab"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -178,7 +178,7 @@ exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
 exports[`Buttongrop -  rendering the default props 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"

package/lib/CheckBox/CheckBox.js

@@ -21,6 +21,8 @@ var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _CheckBoxModule = _interopRequireDefault(require("./CheckBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -160,14 +162,14 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         ref: getRef,
         name: name
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_CheckBoxModule["default"].checkbox, " ").concat(accessMode, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].checkbox, " ").concat(accessMode, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize))
       }, activeStyle == 'tick' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 40 40"
       }, checked ? /*#__PURE__*/_react["default"].createElement("path", {
         xmlns: "http://www.w3.org/2000/svg",
         d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
-        className: "".concat(_CheckBoxModule["default"].cbBox)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].cbBox))
       }) : /*#__PURE__*/_react["default"].createElement("rect", {
         xmlns: "http://www.w3.org/2000/svg",
         x: "1",
@@ -175,14 +177,14 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         width: "38",
         height: "38",
         rx: "4",
-        className: "".concat(_CheckBoxModule["default"].cbBox)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].cbBox))
       })), checked ? /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 44 44",
-        className: "".concat(_CheckBoxModule["default"].tick, " ").concat(_CheckBoxModule["default"]["".concat(size, "tick")], "  ").concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(customTickSize)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].tick, " ").concat(_CheckBoxModule["default"]["".concat(size, "tick")], "  ").concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(customTickSize))
       }, /*#__PURE__*/_react["default"].createElement("polyline", {
         points: "12.56 19 19.61 26.06 40.39 5.28",
-        className: "".concat(_CheckBoxModule["default"].tickPath, " ").concat(_CheckBoxModule["default"].checkedtickPath)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].tickPath, " ").concat(_CheckBoxModule["default"].checkedtickPath))
       })) : null) : /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 40 40"
@@ -193,10 +195,10 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         width: "38",
         height: "38",
         rx: "4",
-        className: "".concat(_CheckBoxModule["default"].cbBox)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].cbBox))
       }), checked ? /*#__PURE__*/_react["default"].createElement("line", {
         xmlns: "http://www.w3.org/2000/svg",
-        className: "".concat(_CheckBoxModule["default"].linePath, " ").concat(_CheckBoxModule["default"].cbBox),
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].linePath, " ").concat(_CheckBoxModule["default"].cbBox)),
         x1: "11.47",
         y1: "20",
         x2: "28.53",