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

package/lib/AlphabeticList/AlphabeticList.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AlphabeticListModule = _interopRequireDefault(require("./AlphabeticList.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -102,7 +104,7 @@ var AlphabeticList = /*#__PURE__*/function (_React$PureComponent) {
         dataId: "All_".concat(dataId)
       }, /*#__PURE__*/_react["default"].createElement("span", {
         onClick: this.handleSelectAll,
-        className: "".concat(_AlphabeticListModule["default"].heading, " ").concat(_AlphabeticListModule["default"].letter),
+        className: (0, _cssUtility.cn)("".concat(_AlphabeticListModule["default"].heading, " ").concat(_AlphabeticListModule["default"].letter)),
         "data-title": allTitle
       }, allText)), letters.map(function (letter) {
         return /*#__PURE__*/_react["default"].createElement(AlphabeticListItem, {
@@ -164,7 +166,7 @@ var AlphabeticListItem = /*#__PURE__*/function (_React$PureComponent2) {
         onClick: this.handleClick,
         dataId: "".concat(text, "_").concat(dataId)
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AlphabeticListModule["default"].letter
+        className: (0, _cssUtility.cn)(_AlphabeticListModule["default"].letter)
       }, text));
     }
   }]);

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

@@ -3,13 +3,13 @@
 exports[`AlphabeticList rendering the defult props 1`] = `
 <DocumentFragment>
   <ul
-    class="container column  flex coldir"
+    class="flex column container column"
     data-id="navigationDiv"
     data-selector-id="alphabeticList"
     data-test-id="navigationDiv"
   >
     <li
-      class="list title  shrinkOff"
+      class="noShrink list title"
       data-id="All_Navi"
       data-selector-id="box"
       data-test-id="All_Navi"
@@ -22,7 +22,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="A_Navi"
       data-selector-id="box"
       data-test-id="A_Navi"
@@ -34,7 +34,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="B_Navi"
       data-selector-id="box"
       data-test-id="B_Navi"
@@ -46,7 +46,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="C_Navi"
       data-selector-id="box"
       data-test-id="C_Navi"
@@ -58,7 +58,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="D_Navi"
       data-selector-id="box"
       data-test-id="D_Navi"
@@ -70,7 +70,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="E_Navi"
       data-selector-id="box"
       data-test-id="E_Navi"
@@ -82,7 +82,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="F_Navi"
       data-selector-id="box"
       data-test-id="F_Navi"
@@ -94,7 +94,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="G_Navi"
       data-selector-id="box"
       data-test-id="G_Navi"
@@ -106,7 +106,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="H_Navi"
       data-selector-id="box"
       data-test-id="H_Navi"
@@ -118,7 +118,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="I_Navi"
       data-selector-id="box"
       data-test-id="I_Navi"
@@ -130,7 +130,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="J_Navi"
       data-selector-id="box"
       data-test-id="J_Navi"
@@ -142,7 +142,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="K_Navi"
       data-selector-id="box"
       data-test-id="K_Navi"
@@ -154,7 +154,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="L_Navi"
       data-selector-id="box"
       data-test-id="L_Navi"
@@ -166,7 +166,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="M_Navi"
       data-selector-id="box"
       data-test-id="M_Navi"
@@ -178,7 +178,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="N_Navi"
       data-selector-id="box"
       data-test-id="N_Navi"
@@ -190,7 +190,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="O_Navi"
       data-selector-id="box"
       data-test-id="O_Navi"
@@ -202,7 +202,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="P_Navi"
       data-selector-id="box"
       data-test-id="P_Navi"
@@ -214,7 +214,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="Q_Navi"
       data-selector-id="box"
       data-test-id="Q_Navi"
@@ -226,7 +226,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="R_Navi"
       data-selector-id="box"
       data-test-id="R_Navi"
@@ -238,7 +238,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="S_Navi"
       data-selector-id="box"
       data-test-id="S_Navi"
@@ -250,7 +250,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="T_Navi"
       data-selector-id="box"
       data-test-id="T_Navi"
@@ -262,7 +262,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="U_Navi"
       data-selector-id="box"
       data-test-id="U_Navi"
@@ -274,7 +274,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="V_Navi"
       data-selector-id="box"
       data-test-id="V_Navi"
@@ -286,7 +286,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="W_Navi"
       data-selector-id="box"
       data-test-id="W_Navi"
@@ -298,7 +298,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="X_Navi"
       data-selector-id="box"
       data-test-id="X_Navi"
@@ -310,7 +310,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="Y_Navi"
       data-selector-id="box"
       data-test-id="Y_Navi"
@@ -322,7 +322,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="list  grow basis shrinkOff"
+      class="flexible basis_zero noShrink list"
       data-id="Z_Navi"
       data-selector-id="box"
       data-test-id="Z_Navi"

package/lib/Attachment/Attachment.js

@@ -19,6 +19,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AttachmentModule = _interopRequireDefault(require("./Attachment.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -131,7 +133,7 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         iconClass: _AttachmentModule["default"].downIcon
       })) : null, isDisabled ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-title": tooltip,
-        className: _AttachmentModule["default"].disableLayer
+        className: (0, _cssUtility.cn)(_AttachmentModule["default"].disableLayer)
       }) : null);
     }
   }]);

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

@@ -3,32 +3,32 @@
 exports[`Attachment rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="attachment   palette_default medium inflex rowdir"
+    class="inlineFlex row attachment palette_default medium"
     data-id="attachment"
     data-selector-id="attachment"
     data-test-id="attachment"
     tabindex="0"
   >
     <div
-      class="attachright grow basis shrinkOff"
+      class="flexible basis_zero noShrink attachright"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir hCenter"
+        class="flex fullSize column justifyContent_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="footer shrinkOff"
+          class="noShrink footer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir baseline"
+            class="flex row alignItems_baseline"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -43,7 +43,7 @@ exports[`Attachment rendering the defult props 1`] = `
 exports[`Attachment with props rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="attachment  attachmentHover palette_default medium inflex rowdir"
+    class="inlineFlex row attachment attachmentHover palette_default medium"
     data-id="test_id"
     data-selector-id="test_selector"
     data-test-id="test_id"
@@ -51,32 +51,32 @@ exports[`Attachment with props rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="attachleft shrinkOff"
+      class="noShrink attachleft"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir both"
+        class="flex fullSize column alignItems_center justifyContent_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       />
     </div>
     <div
-      class="attachright grow basis shrinkOff"
+      class="flexible basis_zero noShrink attachright"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir hCenter"
+        class="flex fullSize column justifyContent_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="atatchName shrinkOff"
+          class="noShrink atatchName"
           data-id="test_id_filename"
           data-selector-id="box"
           data-test-id="test_id_filename"
@@ -85,19 +85,19 @@ exports[`Attachment with props rendering the defult props 1`] = `
           test_file
         </div>
         <div
-          class="footer shrinkOff"
+          class="noShrink footer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir baseline"
+            class="flex row alignItems_baseline"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="attachSize basisAuto shrinkOn"
+              class="basis_auto shrink attachSize"
               data-id="test_id_filesize"
               data-selector-id="box"
               data-test-id="test_id_filesize"
@@ -106,13 +106,13 @@ exports[`Attachment with props rendering the defult props 1`] = `
               10MB
             </div>
             <div
-              class="dot shrinkOff"
+              class="noShrink dot"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             />
             <div
-              class="attachSize basisAuto shrinkOn"
+              class="basis_auto shrink attachSize"
               data-id="test_id_fileinfo"
               data-selector-id="box"
               data-test-id="test_id_fileinfo"
@@ -125,7 +125,7 @@ exports[`Attachment with props rendering the defult props 1`] = `
       </div>
     </div>
     <a
-      class="container  attachDownload"
+      class="container attachDownload"
       data-id="test_id_download"
       data-test-id="test_id_download"
       data-title="Download"
@@ -135,7 +135,7 @@ exports[`Attachment with props rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-download-new  downIcon  "
+        class="zd_font_icons basic icon-download-new downIcon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/AttachmentViewer/AttachmentImage.js

@@ -19,6 +19,8 @@ var _utils = require("./utils");
 
 var _Image = _interopRequireDefault(require("../Image/Image"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -92,7 +94,8 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
           isCover = _this$props.isCover,
           customClass = _this$props.customClass,
           onLoad = _this$props.onLoad,
-          onError = _this$props.onError;
+          onError = _this$props.onError,
+          imageRef = _this$props.imageRef;
       var isImageValid = this.state.isImageValid;
       var _customClass$customIm = customClass.customImageClass,
           customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm;
@@ -104,6 +107,7 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
         className: customImageClass,
         alt: alt,
         isCover: isCover,
+        eleRef: imageRef,
         onLoad: onLoad,
         onError: onError
       });
@@ -139,11 +143,11 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
       var _customClass$customCh = customClass.customChildrenClass,
           customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_AttachmentViewerModule["default"].spinLoad),
+        className: (0, _cssUtility.cn)("".concat(_AttachmentViewerModule["default"].spinLoad)),
         "data-id": "".concat(dataId, "_loader"),
         "data-test-id": "".concat(dataId, "_loader")
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _AttachmentViewerModule["default"].loader
+        className: (0, _cssUtility.cn)(_AttachmentViewerModule["default"].loader)
       })) : isImageValid ? this.renderImage() : children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         htmlId: id,