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

package/lib/deprecated/Switch/Switch.js

@@ -15,6 +15,8 @@ var _Layout = require("../../v1/Layout");
 
 var _Label = _interopRequireDefault(require("../../v1/Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SwitchModule = _interopRequireDefault(require("../../Switch/Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,7 +64,7 @@ var Switch = function Switch(props) {
     isCover: false,
     alignBox: "row",
     isInline: true,
-    className: "".concat(_SwitchModule["default"].container, " ").concat(customSwitchWrap, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect),
+    className: "".concat(_SwitchModule["default"].container, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect, " ").concat(customSwitchWrap, " "),
     "data-title": disabled ? disableTitle : title,
     "aria-checked": checked,
     role: "switch",
@@ -72,7 +74,7 @@ var Switch = function Switch(props) {
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
     id: id,
-    className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : '')),
     name: name,
     value: value,
     checked: checked,
@@ -83,7 +85,7 @@ var Switch = function Switch(props) {
     htmlFor: id,
     "data-id": dataId,
     "data-test-id": dataId,
-    className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)),
     tabIndex: isReadOnly || disabled ? '-1' : '0'
   })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
     text: text,

package/lib/semantic/Button/Button.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _semanticButtonModule = _interopRequireDefault(require("./semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,7 +73,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           ariaControls = a11y.ariaControls,
           ariaLabelledby = a11y.ariaLabelledby;
       return /*#__PURE__*/_react["default"].createElement("button", {
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass)),
         "aria-label": ariaLabel,
         "aria-haspopup": ariaHaspopup,
         "aria-expanded": ariaExpanded,

package/lib/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="buttonReset "
+    class="buttonReset"
     data-id="semanticButton"
     data-test-id="semanticButton"
     type="button"

package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -1,17 +1,17 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  active    inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -25,14 +25,14 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   disabled   inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -46,14 +46,14 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon    readonly  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -67,14 +67,14 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon rotated     inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -96,7 +96,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -110,14 +110,14 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down  arrowIcon_iconClass  "
+      class="zd_font_icons basic icon-down arrowIcon_iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -131,14 +131,14 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -152,14 +152,14 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -189,7 +189,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -203,14 +203,14 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     flex rowdir"
+    class="flex row varClass customContainer effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />