@zohodesk/dot 1.9.18 → 1.9.19

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -14,7 +14,7 @@
 
 .small,
 .large {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
   height: var(--zd_size18) ;
   padding-inline: var(--zd_size6) ;
   padding-block:0 ;

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TagWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center wrapper grey large"
+    class="d-inline-flex d-flex-row d-items-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")
@@ -239,8 +241,4 @@ function ToastMessage(props) {
 }
 
 ToastMessage.propTypes = _propTypes.propTypes;
-ToastMessage.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   ToastMessage.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+ToastMessage.defaultProps = _defaultProps.defaultProps;

package/lib/ToastMessage/ToastMessage.module.css

@@ -1,8 +1,7 @@
 .container {
+  composes: d-relative d-max-h-full from global;
   transition: all var(--zd_transition4);
   margin-block-end: var(--zd_size7) ;
-  position: relative;
-  max-height: 100% ;
   border-radius: 5px;
   box-shadow: var(--zd_bs_toastmessage_container);
   background-color: var(--zdt_toastmessage_default_bg);
@@ -38,7 +37,7 @@
 }
 
 .leftnoanimate {
-  opacity: 1;
+  composes: d-opacity-100 from global;
   transform: translateX(0) scale(1);
 }
 
@@ -49,11 +48,11 @@
 }
 
 .alertifychild {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .alertifybanner {
-  overflow: hidden;
+  composes: d-overflow-hidden from global;
 }
 
 [dir=ltr] .alertifybanner {
@@ -80,9 +79,8 @@
   font-size: var(--zd_font_size10) ;
   color: var(--zdt_toastmessage_popbutton_text);
   composes: wbreak textCap from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative d-cursor-pointer from global;
   transition: all var(--zd_transition3);
-  position: relative;
-  cursor: pointer;
 }
 
 .mainbutton {
@@ -180,17 +178,16 @@
 }
 
 .buttonText {
+  composes: d-text-center d-cursor-pointer from global;
   font-size: inherit ;
   line-height: normal;
   padding-block:0 ;
   padding-inline: var(--zd_size7) ;
-  text-align: center;
-  cursor: pointer;
 }
 
 .closeIcon,
 .closeIconPrimary {
-  position: absolute;
+  composes: d-absolute d-cursor-pointer from global;
   top: 0 ;
   z-index: 1;
   color: var(--zdt_toastmessage_closeicon);
@@ -198,7 +195,6 @@
 
 .closeIcon, .closeIconPrimary {
   padding:var(--zd_size2) ;
-  cursor: pointer;
 }
 
 [dir=ltr] .closeIcon, [dir=ltr] .closeIconPrimary {
@@ -224,9 +220,8 @@
 }
 
 .dropdown {
+  composes: d-relative d-h-full from global;
   width: var(--zd_size23) ;
-  position: relative;
-  height: 100% ;
   color: var(--zdt_toastmessage_dropdown_text);
   background: var(--zdt_toastmessage_dropdown_bg);
 }
@@ -253,15 +248,13 @@
 .message {
   padding-block: var(--zd_size10) ;
   padding-inline: var(--zd_size76) var(--zd_size20) ;
-  position: relative;
   color: var(--zdt_toastmessage_popbutton_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative d-cursor-pointer d-m-0 from global;
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
   border-top: 1px solid var(--zdt_toastmessage_message_border);
-  cursor: pointer;
-  margin: 0 ;
 }
 
 .messageOff {
@@ -282,7 +275,7 @@
   height: var(--zd_size29) ;
   line-height: var(--zd_size29);
   composes: rounded from '~@zohodesk/components/es/common/common.module.css';
-  text-align: center;
+  composes: d-text-center from global;
 }
 
 .successFill {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ToastMessage rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`ToastMessage rendering the defult props 1`] = `
     aria-describedby="2"
     aria-labelledby="1"
     aria-live="assertive"
-    class="flex column container leftanimate"
+    class="d-flex d-flex-col 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="flexible basis_zero noShrink alertifychild"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 alertifychild"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize row alertifybanner"
+        class="d-flex d-h-full d-w-full d-flex-row alertifybanner"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_zero noShrink alertleft"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 alertleft"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink alertico"
+              class="d-flex-shrink-0 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="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex row alignItems_center"
+                class="d-flex d-flex-row d-items-center"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="flexible basis_zero noShrink alertTitle"
+                  class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 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="noShrink alertright"
+          class="d-flex-shrink-0 alertright"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize column alerttab"
+            class="d-flex d-h-full d-w-full d-flex-col 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")
@@ -121,8 +123,4 @@ var Upload = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Upload;
 Upload.propTypes = _propTypes.propTypes;
-Upload.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Upload.docs = {
-//     componentGroup: 'Upload'
-//   };
-// }
+Upload.defaultProps = _defaultProps.defaultProps;

package/lib/Upload/Upload.module.css

@@ -1,8 +1,6 @@
 .container {
-  position: relative;
+  composes: d-relative d-align-middle d-cursor-pointer from global;
   transition: all var(--zd_transition3);
-  vertical-align: middle;
-  cursor: pointer;
   padding:var(--zd_size5) ;
   border-radius: 2px;
 }
@@ -16,7 +14,7 @@
 }
 
 .overlay {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
   background-color: var(--zdt_upload_overlay_bg);
@@ -43,12 +41,12 @@
 }
 
 .preview {
+  composes: d-cursor-default from global;
   opacity: 0.4;
-  cursor: default;
 }
 
 .loader {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: calc( var(--zd_size1) * -1 ) ;
   height: var(--zd_size2) ;
   width: 0% ;
@@ -72,8 +70,7 @@
 }
 
 .uploadimage {
-  width: 100% ;
-  height: 100% ;
+  composes: d-size-full from global;
 }
 
 .attachInfo {
@@ -91,7 +88,7 @@
   padding-inline:0 ;
   letter-spacing: 1px;
   composes: dotted from "~@zohodesk/components/es/common/common.module.css";
-  text-transform: uppercase;
+  composes: d-uppercase from global;
 }
 
 .light .attachsize {
@@ -103,13 +100,12 @@
 }
 
 .uploadclose {
+  composes: d-absolute d-text-center from global;
   height: var(--zd_size12) ;
   width: var(--zd_size12) ;
   top: 0 ;
-  position: absolute;
   line-height: 0.8333;
   font-size: var(--zd_font_size12) ;
-  text-align: center;
 }
 
 [dir=ltr] .uploadclose {
@@ -140,8 +136,7 @@
 
 .uploadclose,
 .overlay {
-  opacity: 0;
-  visibility: hidden;
+  composes: d-invisible d-opacity-0 from global;
   transition: var(--zd_transition3);
 }