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

package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -1,44 +1,44 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorSingleSelect Should render the default selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="3"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="3"
+        aria-owns="1"
         aria-readonly="false"
-        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=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="5"
-              class="container effect    medium lgRadius default   "
+              aria-labelledby="3"
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -49,7 +49,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="5"
+                id="3"
               >
                 Red
               </div>
@@ -57,14 +57,14 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           </div>
           <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"
@@ -81,42 +81,42 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
 exports[`ColorSingleSelect Should render the selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="6"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="6"
+        aria-owns="1"
         aria-readonly="false"
-        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=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="8"
-              class="container effect    medium lgRadius default   "
+              aria-labelledby="3"
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -125,20 +125,20 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="8"
+                id="3"
               />
             </div>
           </div>
           <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"
@@ -155,11 +155,11 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
 exports[`ColorSingleSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -170,20 +170,20 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
         aria-haspopup="listbox"
         aria-owns="1"
         aria-readonly="false"
-        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=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -194,14 +194,14 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           </div>
           <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"
@@ -218,35 +218,35 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
 exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="9"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="9"
+        aria-owns="1"
         aria-readonly="false"
-        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=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -259,14 +259,14 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           </div>
           <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"
@@ -283,42 +283,42 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="11"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="11"
+        aria-owns="1"
         aria-readonly="false"
-        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=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="13"
-              class="container effect    medium lgRadius default   "
+              aria-labelledby="3"
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -329,7 +329,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="13"
+                id="3"
               >
                 Red
               </div>
@@ -337,14 +337,14 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           </div>
           <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"
@@ -361,35 +361,35 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="14"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="14"
+        aria-owns="1"
         aria-readonly="false"
-        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=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -400,14 +400,14 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           </div>
           <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/ColorSelect/_shared/ColorIndicator/ColorIndicator.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Common = require("../../../utils/Common");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ColorIndicatorModule = _interopRequireDefault(require("./ColorIndicator.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -32,7 +34,7 @@ function ColorIndicator(props) {
       background = _ref.background;
 
   return /*#__PURE__*/_react["default"].createElement("div", _extends({}, tagAttributes, a11yAttributes, {
-    className: "".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass),
+    className: (0, _cssUtility.cn)("".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass)),
     style: {
       backgroundColor: background
     },

package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 0, 255);"
@@ -14,7 +14,7 @@ exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '
 exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 255, 0);"
@@ -25,7 +25,7 @@ exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '
 exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(255, 0, 0);"
@@ -36,7 +36,7 @@ exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '
 exports[`ColorIndicator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -46,7 +46,7 @@ exports[`ColorIndicator rendering the defult props 1`] = `
 exports[`ColorIndicator rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -56,7 +56,7 @@ exports[`ColorIndicator rendering the shape of- circle 1`] = `
 exports[`ColorIndicator rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator square "
+    class="varClass indicator square"
     data-id=""
     data-test-id=""
   />
@@ -67,7 +67,7 @@ exports[`ColorIndicator rendering with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-label="color_indicator_aria-label"
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -87,7 +87,7 @@ exports[`ColorIndicator rendering with custom class 1`] = `
 exports[`ColorIndicator rendering with custom id and test id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id="custom-id"
     data-test-id="test-id"
   />
@@ -97,7 +97,7 @@ exports[`ColorIndicator rendering with custom id and test id 1`] = `
 exports[`ColorIndicator rendering with tagAttributes 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     title="color_indicator_tagAttributes"

package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColoredTag rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -22,8 +22,8 @@ exports[`ColoredTag rendering the defult props 1`] = `
 exports[`ColoredTag rendering with colorConfig 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect    medium lgRadius default   "
+    aria-labelledby="1"
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -33,7 +33,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="3"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -42,8 +42,8 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
 exports[`ColoredTag rendering with customAttributes 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect    medium lgRadius default   "
+    aria-labelledby="1"
+    class="container effect medium lgRadius default"
     data-custom-attribute="true"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -53,7 +53,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="4"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -62,8 +62,8 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
 exports[`ColoredTag rendering with isActive true 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected activedefault   medium lgRadius default   "
+    aria-labelledby="1"
+    class="container effect selected activedefault medium lgRadius default"
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -72,7 +72,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="2"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -81,8 +81,8 @@ exports[`ColoredTag rendering with isActive true 1`] = `
 exports[`ColoredTag rendering with text 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="5"
-    class="container effect    medium lgRadius default   "
+    aria-labelledby="1"
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -92,7 +92,7 @@ exports[`ColoredTag rendering with text 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="5"
+      id="1"
     >
       Colored Tag
     </div>

package/lib/DateTime/CalendarView.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _Layout = require("../Layout");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 var _common = require("../utils/datetime/common");
@@ -184,7 +186,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
               output = /*#__PURE__*/_react["default"].createElement(Span, {
                 i: i // isActive={isSelectedDay}
                 ,
-                tdclass: "".concat(tdclass, "  ").concat(_DateTimeModule["default"].invalidDate),
+                tdclass: "".concat(_DateTimeModule["default"].invalidDate, " ").concat(tdclass),
                 handleSelect: _this2.handleSelect,
                 incremday: nextDate,
                 userSeeMonth: nextMonth,
@@ -225,7 +227,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
         "data-test-id": "".concat(dataId, "_dateContainer"),
-        className: "".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : '')
+        className: (0, _cssUtility.cn)("".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : ''))
       }, rows));
     }
   }]);
@@ -274,7 +276,7 @@ var Span = /*#__PURE__*/function (_React$PureComponent2) {
           isToday = _this$props3.isToday;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: dataId,
-        className: "".concat(tdclass, " ").concat(isActive ? _DateTimeModule["default"].active : '', " ").concat(isToday ? _DateTimeModule["default"].today : ''),
+        className: "".concat(isActive ? _DateTimeModule["default"].active : '', " ").concat(isToday ? _DateTimeModule["default"].today : '', " ").concat(tdclass, " "),
         key: i,
         onClick: this.handleSelectChild,
         "aria-label": incremday