@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.1

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

@@ -3,7 +3,7 @@
 exports[`TagWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper grey large  inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center wrapper grey large"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/lib/ToastMessage/ToastMessage.js

@@ -25,6 +25,8 @@ var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _AutoClose = _interopRequireDefault(require("../actions/AutoClose"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 
 var _ToastMessageModule = _interopRequireDefault(require("./ToastMessage.module.css"));
@@ -164,7 +166,7 @@ function ToastMessageUI(props) {
     "data-title": subject,
     id: titleId
   }, subject)), info ? /*#__PURE__*/_react["default"].createElement("p", {
-    className: _ToastMessageModule["default"].alertMessage,
+    className: (0, _cssUtility.cn)(_ToastMessageModule["default"].alertMessage),
     "data-title": info,
     id: infoId
   }, info) : null, getInnerBottomContainer ? /*#__PURE__*/_react["default"].createElement("div", null, getInnerBottomContainer()) : null), type == 'information' && needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -181,7 +183,7 @@ function ToastMessageUI(props) {
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: _ToastMessageModule["default"].alerttab
   }, needClose ? /*#__PURE__*/_react["default"].createElement("button", {
-    className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ToastMessageModule["default"].closeIcon),
+    className: (0, _cssUtility.cn)("".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ToastMessageModule["default"].closeIcon)),
     onClick: onClose,
     "data-id": "".concat(dataId, "_closeRight"),
     "data-test-id": "".concat(dataId, "_closeRight")

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

@@ -7,7 +7,7 @@ exports[`ToastMessage rendering the defult props 1`] = `
     aria-describedby="2"
     aria-labelledby="1"
     aria-live="assertive"
-    class="container leftanimate  flex coldir"
+    class="flex column container leftanimate"
     data-id="toastMessage"
     data-selector-id="toastMessage"
     data-test-id="toastMessage"
@@ -15,31 +15,31 @@ exports[`ToastMessage rendering the defult props 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="alertifychild grow basis shrinkOff"
+      class="flexible basis_zero noShrink alertifychild"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="alertifybanner flex cover rowdir"
+        class="flex fullSize row alertifybanner"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="alertleft grow basis shrinkOff"
+          class="flexible basis_zero noShrink alertleft"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="alertico shrinkOff"
+              class="noShrink alertico"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -47,19 +47,19 @@ exports[`ToastMessage rendering the defult props 1`] = `
               <span />
             </div>
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex rowdir vCenter"
+                class="flex row alignItems_center"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="alertTitle grow basis shrinkOff"
+                  class="flexible basis_zero noShrink alertTitle"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
@@ -70,13 +70,13 @@ exports[`ToastMessage rendering the defult props 1`] = `
           </div>
         </div>
         <div
-          class="alertright shrinkOff"
+          class="noShrink alertright"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="alerttab flex cover coldir"
+            class="flex fullSize column alerttab"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/lib/Upload/Upload.js

@@ -19,6 +19,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _Image = _interopRequireDefault(require("../Image/Image"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _UploadModule = _interopRequireDefault(require("./Upload.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -83,7 +85,7 @@ var Upload = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isPreview ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_attachLoading"),
         "data-test-id": "".concat(dataId, "_attachLoading"),
-        className: _UploadModule["default"].loader,
+        className: (0, _cssUtility.cn)(_UploadModule["default"].loader),
         style: {
           width: "".concat(progressValue, "%")
         }
@@ -93,7 +95,7 @@ var Upload = /*#__PURE__*/function (_React$Component) {
         alt: "Uploaded Image",
         dataId: "".concat(dataId, "_fileName")
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _UploadModule["default"].overlay,
+        className: (0, _cssUtility.cn)(_UploadModule["default"].overlay),
         onClick: onClick
       })) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _UploadModule["default"].attachInfo,
@@ -103,9 +105,9 @@ var Upload = /*#__PURE__*/function (_React$Component) {
         name: iconName,
         iconClass: _UploadModule["default"].fileIcon
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _UploadModule["default"].attachsize
+        className: (0, _cssUtility.cn)(_UploadModule["default"].attachsize)
       }, fileSize))), typeof onRemove !== 'undefined' && onRemove != null ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _UploadModule["default"].uploadclose,
+        className: (0, _cssUtility.cn)(_UploadModule["default"].uploadclose),
         onClick: onRemove,
         "data-id": "".concat(dataId, "_deleteUpload"),
         "data-test-id": "".concat(dataId, "_deleteUpload")

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

@@ -3,8 +3,7 @@
 exports[`Upload rendering the dataId prop with isPreview isPreviewType are true  1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -16,7 +15,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
     />
     <img
       alt="Uploaded Image"
-      class=" uploadimage  imgMaxFullSize "
+      class="imgMaxFullSize uploadimage"
       data-id="TestdataId_fileName"
       data-test-id="TestdataId_fileName"
     />
@@ -30,7 +29,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold   "
+        class="zd_font_icons basic icon-close-e fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -43,8 +42,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
 exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -55,7 +53,7 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
       data-test-id="TestdataId_attachLoading"
     />
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="TestdataId_openNewTab"
       data-selector-id="box"
       data-test-id="TestdataId_openNewTab"
@@ -71,7 +69,7 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold   "
+        class="zd_font_icons basic icon-close-e fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -84,14 +82,13 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
 exports[`Upload rendering the dataSelectorId prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="selectorId"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -107,14 +104,13 @@ exports[`Upload rendering the dataSelectorId prop 1`] = `
 exports[`Upload rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -130,14 +126,13 @@ exports[`Upload rendering the defult props 1`] = `
 exports[`Upload rendering the fileSize prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -155,21 +150,20 @@ exports[`Upload rendering the fileSize prop 1`] = `
 exports[`Upload rendering the iconName prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e  fileIcon  "
+        class="zd_font_icons basic icon-close-e fileIcon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -185,15 +179,14 @@ exports[`Upload rendering the iconName prop 1`] = `
 exports[`Upload rendering the imgSrc prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <img
       alt="Uploaded Image"
-      class=" uploadimage  imgMaxFullSize "
+      class="imgMaxFullSize uploadimage"
       data-id="upload_fileName"
       data-test-id="upload_fileName"
       src="http://sampleImageUrl.com"
@@ -208,8 +201,7 @@ exports[`Upload rendering the imgSrc prop 1`] = `
 exports[`Upload rendering the isPreview prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -220,7 +212,7 @@ exports[`Upload rendering the isPreview prop 1`] = `
       data-test-id="upload_attachLoading"
     />
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -236,14 +228,13 @@ exports[`Upload rendering the isPreview prop 1`] = `
 exports[`Upload rendering the isPreview prop is false 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -259,14 +250,13 @@ exports[`Upload rendering the isPreview prop is false 1`] = `
 exports[`Upload rendering the isPreviewType false prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -282,15 +272,14 @@ exports[`Upload rendering the isPreviewType false prop 1`] = `
 exports[`Upload rendering the isPreviewType true prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <img
       alt="Uploaded Image"
-      class=" uploadimage  imgMaxFullSize "
+      class="imgMaxFullSize uploadimage"
       data-id="upload_fileName"
       data-test-id="upload_fileName"
     />
@@ -304,14 +293,13 @@ exports[`Upload rendering the isPreviewType true prop 1`] = `
 exports[`Upload rendering the onRemove prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -327,7 +315,7 @@ exports[`Upload rendering the onRemove prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold   "
+        class="zd_font_icons basic icon-close-e fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -340,14 +328,13 @@ exports[`Upload rendering the onRemove prop 1`] = `
 exports[`Upload rendering the palette of - light 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -363,14 +350,13 @@ exports[`Upload rendering the palette of - light 1`] = `
 exports[`Upload rendering the palette of - night 1`] = `
 <DocumentFragment>
   <div
-    class="container night medium 
- inflex coldir"
+    class="inlineFlex column container night medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -386,8 +372,7 @@ exports[`Upload rendering the palette of - night 1`] = `
 exports[`Upload rendering the progressValue prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -399,7 +384,7 @@ exports[`Upload rendering the progressValue prop 1`] = `
       style="width: 90%;"
     />
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -415,14 +400,13 @@ exports[`Upload rendering the progressValue prop 1`] = `
 exports[`Upload rendering the size of - medium 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -438,14 +422,13 @@ exports[`Upload rendering the size of - medium 1`] = `
 exports[`Upload rendering the size of - small 1`] = `
 <DocumentFragment>
   <div
-    class="container light small 
- inflex coldir"
+    class="inlineFlex column container light small"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -461,15 +444,14 @@ exports[`Upload rendering the size of - small 1`] = `
 exports[`Upload rendering the tooltip prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
     data-title="Tooltip"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"

package/lib/VideoLookup/VideoLookup.js

@@ -23,6 +23,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _VideoLookupModule = _interopRequireDefault(require("./css/VideoLookup.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -82,18 +84,18 @@ function VideoLookup(props) {
     $ui_size: "14",
     $flag_dotted: true
   }, closeText)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: style.videoContainer,
+    className: (0, _cssUtility.cn)(style.videoContainer),
     "data-id": "".concat(customId, "_container"),
     "data-test-id": "".concat(testId, "_container")
   }, isEmbeddedLink ? /*#__PURE__*/_react["default"].createElement("iframe", {
     src: link,
     allowFullScreen: true,
     allow: "autoplay",
-    className: style.videoIframe
+    className: (0, _cssUtility.cn)(style.videoIframe)
   }) : /*#__PURE__*/_react["default"].createElement("video", {
     autoPlay: true,
     controls: true,
-    className: style.videoPlayer
+    className: (0, _cssUtility.cn)(style.videoPlayer)
   }, /*#__PURE__*/_react["default"].createElement("source", {
     src: link,
     type: "video/".concat(videoFormat)