@zohodesk/dot 1.9.18 → 1.9.19

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Upload rendering the dataId prop with isPreview isPreviewType are true  1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -29,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 ff icon-close-e basic d-inline-block d-align-middle d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -42,7 +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="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -53,7 +53,7 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
       data-test-id="TestdataId_attachLoading"
     />
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="TestdataId_openNewTab"
       data-selector-id="box"
       data-test-id="TestdataId_openNewTab"
@@ -69,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 ff icon-close-e basic d-inline-block d-align-middle d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -82,13 +82,13 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
 exports[`Upload rendering the dataSelectorId prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="selectorId"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -104,13 +104,13 @@ exports[`Upload rendering the dataSelectorId prop 1`] = `
 exports[`Upload rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -126,13 +126,13 @@ exports[`Upload rendering the defult props 1`] = `
 exports[`Upload rendering the fileSize prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -150,20 +150,20 @@ exports[`Upload rendering the fileSize prop 1`] = `
 exports[`Upload rendering the iconName prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 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 ff icon-close-e basic d-inline-block d-align-middle fileIcon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -179,7 +179,7 @@ exports[`Upload rendering the iconName prop 1`] = `
 exports[`Upload rendering the imgSrc prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -201,7 +201,7 @@ exports[`Upload rendering the imgSrc prop 1`] = `
 exports[`Upload rendering the isPreview prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -212,7 +212,7 @@ exports[`Upload rendering the isPreview prop 1`] = `
       data-test-id="upload_attachLoading"
     />
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -228,13 +228,13 @@ exports[`Upload rendering the isPreview prop 1`] = `
 exports[`Upload rendering the isPreview prop is false 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -250,13 +250,13 @@ exports[`Upload rendering the isPreview prop is false 1`] = `
 exports[`Upload rendering the isPreviewType false prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -272,7 +272,7 @@ exports[`Upload rendering the isPreviewType false prop 1`] = `
 exports[`Upload rendering the isPreviewType true prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -293,13 +293,13 @@ exports[`Upload rendering the isPreviewType true prop 1`] = `
 exports[`Upload rendering the onRemove prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -315,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 ff icon-close-e basic d-inline-block d-align-middle d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,13 +328,13 @@ exports[`Upload rendering the onRemove prop 1`] = `
 exports[`Upload rendering the palette of - light 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -350,13 +350,13 @@ exports[`Upload rendering the palette of - light 1`] = `
 exports[`Upload rendering the palette of - night 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container night medium"
+    class="d-inline-flex d-flex-col container night medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -372,7 +372,7 @@ exports[`Upload rendering the palette of - night 1`] = `
 exports[`Upload rendering the progressValue prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -384,7 +384,7 @@ exports[`Upload rendering the progressValue prop 1`] = `
       style="width: 90%;"
     />
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -400,13 +400,13 @@ exports[`Upload rendering the progressValue prop 1`] = `
 exports[`Upload rendering the size of - medium 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -422,13 +422,13 @@ exports[`Upload rendering the size of - medium 1`] = `
 exports[`Upload rendering the size of - small 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light small"
+    class="d-inline-flex d-flex-col container light small"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -444,14 +444,14 @@ exports[`Upload rendering the size of - small 1`] = `
 exports[`Upload rendering the tooltip prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
     data-title="Tooltip"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 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)

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`VideoLookup rendering the defult props 1`] = `<DocumentFragment />`;
 
@@ -10,7 +10,7 @@ exports[`VideoLookup rendering with TestId 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -24,7 +24,7 @@ exports[`VideoLookup rendering with TestId 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -64,7 +64,7 @@ exports[`VideoLookup rendering with closeText 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -78,7 +78,7 @@ exports[`VideoLookup rendering with closeText 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -118,7 +118,7 @@ exports[`VideoLookup rendering with customId 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -132,7 +132,7 @@ exports[`VideoLookup rendering with customId 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -172,7 +172,7 @@ exports[`VideoLookup rendering with customStyle 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -186,7 +186,7 @@ exports[`VideoLookup rendering with customStyle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -226,7 +226,7 @@ exports[`VideoLookup rendering with isEmbeddedLink is true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -240,7 +240,7 @@ exports[`VideoLookup rendering with isEmbeddedLink is true 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -277,7 +277,7 @@ exports[`VideoLookup rendering with link 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -291,7 +291,7 @@ exports[`VideoLookup rendering with link 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -332,7 +332,7 @@ exports[`VideoLookup rendering with prop isOpened 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -346,7 +346,7 @@ exports[`VideoLookup rendering with prop isOpened 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -386,7 +386,7 @@ exports[`VideoLookup rendering with videoFormat 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -400,7 +400,7 @@ exports[`VideoLookup rendering with videoFormat 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/VideoLookup/css/VideoLookup.module.css

@@ -1,13 +1,13 @@
 .videoContainer {
+  composes: d-overflow-hidden from global;
   height: var(--zd_size567) ;
   width: var(--zd_size1008) ;
-  overflow: hidden;
 }
 .close {
+  composes: d-absolute from global;
   width: var(--zd_size40) ;
   --button_padding: 6px 0;
   --button_text_color: var(--zdt_videolookup_close);
-  position: absolute;
   top: var(--zd_size20) ;
 }
 [dir=ltr] .close {
@@ -30,8 +30,7 @@
 
 .videoIframe,
 .videoPlayer {
-  width: 100% ;
-  height: 100% ;
+  composes: d-size-full from global;
 }
 
 .videoIframe, .videoPlayer {

package/lib/alert/AlertHeader/AlertHeader.js

@@ -21,6 +21,8 @@ var _icons = require("@zohodesk/icons");
 
 var _Close = _interopRequireDefault(require("../../lookup/header/Close/Close"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AlertHeaderModule = _interopRequireDefault(require("./AlertHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -91,7 +93,7 @@ var AlertHeader = /*#__PURE__*/function (_Component) {
         wrap: "wrap",
         dataId: "".concat(dataId, "_alertHeader")
       }, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _AlertHeaderModule["default"].iconContainer
+        className: (0, _cssUtility.cn)(_AlertHeaderModule["default"].iconContainer)
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         size: iconSize,
         name: iconName ? iconName : iconObj[iconType] ? iconObj[iconType] : iconName,
@@ -124,9 +126,4 @@ var AlertHeader = /*#__PURE__*/function (_Component) {
 
 exports["default"] = AlertHeader;
 AlertHeader.propTypes = _propTypes.propTypes;
-AlertHeader.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AlertHeader.docs = {
-//     componentGroup: 'AlertHeader',
-//     folderName: 'Alert'
-//   };
-// }
+AlertHeader.defaultProps = _defaultProps.defaultProps;

package/lib/alert/AlertHeader/AlertHeader.module.css

@@ -1,6 +1,6 @@
 .container {
+  composes: d-relative from global;
   min-height: var(--zd_size54) ;
-  position: relative;
   padding-block:var(--zd_size12) ;
   padding-inline:var(--zd_size26) var(--zd_size45) ;
 }
@@ -22,7 +22,7 @@
 }
 
 .iconStyle {
-  display: block;
+  composes: d-block from global;
 }
 
 /* Palette */