@zohodesk/dot 1.9.18 → 1.9.20

package/lib/Link/Link.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Common = require("@zohodesk/components/es/utils/Common");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LinkModule = _interopRequireDefault(require("./Link.module.css"));
 
 var _LinkContext = _interopRequireDefault(require("./LinkContext"));
@@ -134,7 +136,7 @@ var Link = /*#__PURE__*/function (_React$Component) {
         href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
         target: target,
         "data-title": title,
-        className: "".concat(_LinkModule["default"].container, "  ").concat(className ? className : '')
+        className: (0, _cssUtility.cn)("".concat(_LinkModule["default"].container, "  ").concat(className ? className : ''))
       }, option, {
         rel: rel,
         "data-id": dataId,
@@ -153,8 +155,4 @@ var Link = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Link;
 Link.contextType = _LinkContext["default"];
 Link.defaultProps = _defaultProps.defaultProps;
-Link.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+Link.propTypes = _propTypes.propTypes;

package/lib/Link/Link.module.css

@@ -1,4 +1,3 @@
 .container {
-  text-decoration: none;
-  color: inherit;
+  composes: d-text-inherit d-no-underline from global;
 }

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Link Component Snapshot Tests renders with children content 1`] = `
 <DocumentFragment>

package/lib/Loader/Loader.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LoaderModule = _interopRequireDefault(require("./Loader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -54,12 +56,12 @@ var Loader = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _LoaderModule["default"].ajaxLoader,
+        className: (0, _cssUtility.cn)(_LoaderModule["default"].ajaxLoader),
         style: {
           zIndex: "".concat(this.getNextIndex())
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _LoaderModule["default"].loader
+        className: (0, _cssUtility.cn)(_LoaderModule["default"].loader)
       }));
     }
   }]);

package/lib/Loader/Loader.module.css

@@ -1,5 +1,5 @@
 .ajaxLoader {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
 }[dir=ltr] .ajaxLoader {
   left: 0 ;
@@ -9,21 +9,19 @@
   left: 0 ;
 }
 .loader {
-  width: 100% ;
+  composes: d-w-full d-bg-bottom-left from global;
   /*  Variable:Ignore  */
   height: 5px;
   background-size: 50% auto;
 }
 [dir=ltr] .loader {
   background-image: linear-gradient(to right, var(--zdt_loader_bg) 30%, var(--dot_solitude) 50%, var(--zdt_loader_bg) 90%);
-  background-position: 0 100%;
   animation:  loading-ltr 2s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
 }
 [dir=rtl] .loader {
   background-image: linear-gradient(to left, var(--zdt_loader_bg) 30%, var(--dot_solitude) 50%, var(--zdt_loader_bg) 90%);
-  background-position: 100% 100%;
   animation:  loading-rtl 2s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Loader rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/Message/Message.js

@@ -19,6 +19,8 @@ var _icons = require("@zohodesk/icons");
 
 var _AutoClose = _interopRequireDefault(require("../actions/AutoClose"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MessageModule = _interopRequireDefault(require("./Message.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -102,11 +104,7 @@ var Message = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Message;
 Message.propTypes = _propTypes.propTypes;
-Message.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Message.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+Message.defaultProps = _defaultProps.defaultProps;
 
 function MessageUI(props) {
   function onClose(e) {
@@ -124,22 +122,22 @@ function MessageUI(props) {
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _MessageModule["default"].message,
+    className: (0, _cssUtility.cn)(_MessageModule["default"].message),
     "data-id": "show_".concat(type, "_message"),
     "data-test-id": "show_".concat(type, "_message"),
     "data-selector-id": dataSelectorId
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _MessageModule["default"].container
+    className: (0, _cssUtility.cn)(_MessageModule["default"].container)
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _MessageModule["default"][type]
+    className: (0, _cssUtility.cn)(_MessageModule["default"][type])
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: _MessageModule["default"].tickIcn
+    className: (0, _cssUtility.cn)(_MessageModule["default"].tickIcn)
   }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
     name: type == 'alert' ? 'ZD-notifiExclamation' : type == 'info' ? 'ZD-info31' : 'ZD-check',
     isBold: true,
     size: "10"
   }))), /*#__PURE__*/_react["default"].createElement("span", {
-    className: _MessageModule["default"].text,
+    className: (0, _cssUtility.cn)(_MessageModule["default"].text),
     onClick: onClick,
     "data-id": "infoMessage",
     "data-test-id": "infoMessage",
@@ -147,7 +145,7 @@ function MessageUI(props) {
       __html: message
     }
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: _MessageModule["default"].close,
+    className: (0, _cssUtility.cn)(_MessageModule["default"].close),
     "data-title": closeTitle,
     onClick: onClose,
     "data-id": "close_".concat(type, "_message"),

package/lib/Message/Message.module.css

@@ -1,10 +1,8 @@
 .message {
-  position: absolute;
+  composes: d-absolute d-text-center d-pointer-events-none from global;
   top: 0 ;
   z-index: 1000;
   /*Hook for editor alert*/
-  pointer-events: none;
-  text-align: center;
 }[dir=ltr] .message {
   right: 0 ;
   left: 0 ;
@@ -14,10 +12,9 @@
 }
 
 .container {
+  composes: d-inline-block d-relative from global;
   padding-block: var(--zd_size13) ;
   padding-inline:var(--zd_size50) var(--zd_size10) ;
-  position: relative;
-  display: inline-block;
   pointer-events: initial;
   box-shadow: var(--zd_bs_message_container);
   border-radius: 0 0 5px 5px;
@@ -25,27 +22,16 @@
 }
 
 .text {
+  composes: d-inline-block d-text-left d-align-middle from global;
   max-width: var(--zd_size480) ;
-  display: inline-block;
   word-break: break-word;
   font-size: var(--zd_font_size14) ;
-  vertical-align: middle;
-}
-
-[dir=ltr] .text {
-  text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
 }
 
 .icon {
-  position: absolute;
+  composes: d-inline-block d-absolute d-h-full from global;
   top: 0 ;
   width: var(--zd_size40) ;
-  display: inline-block;
-  height: 100% ;
 }
 
 [dir=ltr] .icon {
@@ -76,15 +62,13 @@
 .tickIcn {
   color: var(--zdt_message_tickicon);
   font-size: var(--zd_font_size16) ;
-  position: absolute;
   composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-absolute from global;
 }
 
 .close {
+  composes: d-inline-block d-align-middle d-cursor-pointer from global;
   color: var(--zdt_message_close_text);
   font-size: var(--zd_font_size16) ;
-  display: inline-block;
-  vertical-align: middle;
   margin-inline-start: var(--zd_size10) ;
-  cursor: pointer;
 }

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Message rendering the defult props 1`] = `
 <DocumentFragment>
@@ -17,7 +17,7 @@ exports[`Message rendering the defult props 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-check fbold"
+            class="zd_font_icons ff icon-check basic d-inline-block d-align-middle d-font-bold"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -38,7 +38,7 @@ exports[`Message rendering the defult props 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"

package/lib/MessageBanner/MessageBanner.js

@@ -109,8 +109,4 @@ var MessageBanner = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = MessageBanner;
 MessageBanner.defaultProps = _defaultProps.defaultProps;
-MessageBanner.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   MessageBanner.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+MessageBanner.propTypes = _propTypes.propTypes;

package/lib/MessageBanner/MessageBanner.module.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line block-no-empty -- intentional empty type stub */
 .type_secondary {
   max-width: var(--zd_size468) ;
   border-radius: 3px;
@@ -16,8 +17,8 @@
 }
 .message,.link{font-size:  var(--zd_font_size14) ;}
 .close {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_messagebanner_close_text);
-  cursor: pointer;
 }
 .type_primary .close:hover {
   background: var(--zdt_messagebanner_close_hover_bg);

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

@@ -1,27 +1,27 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MessageBanner rendering the customClass props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_default customMessage"
+    class="d-flex d-flex-row type_primary palette_default customMessage"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -38,25 +38,25 @@ exports[`MessageBanner rendering the customClass props 1`] = `
 exports[`MessageBanner rendering the default props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_default"
+    class="d-flex d-flex-row type_primary palette_default"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -73,31 +73,31 @@ exports[`MessageBanner rendering the default props 1`] = `
 exports[`MessageBanner rendering the href props along with urlText props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_default"
+    class="d-flex d-flex-row type_primary palette_default"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         />
         <div
-          class="noShrink"
+          class="d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -122,25 +122,25 @@ exports[`MessageBanner rendering the href props along with urlText props 1`] = `
 exports[`MessageBanner rendering the onClose props via mock function 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_default"
+    class="d-flex d-flex-row type_primary palette_default"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -151,20 +151,20 @@ exports[`MessageBanner rendering the onClose props via mock function 1`] = `
       </div>
     </div>
     <div
-      class="noShrink close"
+      class="d-flex-shrink-0 close"
       data-id="MessageBanner_close"
       data-selector-id="box"
       data-test-id="MessageBanner_close"
     >
       <div
-        class="flex fullSize column alignItems_center justifyContent_center"
+        class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close-e"
+          class="zd_font_icons ff icon-close-e basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -179,25 +179,25 @@ exports[`MessageBanner rendering the onClose props via mock function 1`] = `
 exports[`MessageBanner rendering the palette of - blue 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_blue"
+    class="d-flex d-flex-row type_primary palette_blue"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -214,25 +214,25 @@ exports[`MessageBanner rendering the palette of - blue 1`] = `
 exports[`MessageBanner rendering the palette of - default 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_default"
+    class="d-flex d-flex-row type_primary palette_default"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -249,25 +249,25 @@ exports[`MessageBanner rendering the palette of - default 1`] = `
 exports[`MessageBanner rendering the palette of - white 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_white"
+    class="d-flex d-flex-row type_primary palette_white"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -284,25 +284,25 @@ exports[`MessageBanner rendering the palette of - white 1`] = `
 exports[`MessageBanner rendering the type of - primary 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_primary palette_default"
+    class="d-flex d-flex-row type_primary palette_default"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -319,25 +319,25 @@ exports[`MessageBanner rendering the type of - primary 1`] = `
 exports[`MessageBanner rendering the type of - secondary 1`] = `
 <DocumentFragment>
   <div
-    class="flex row type_secondary palette_default"
+    class="d-flex d-flex-row type_secondary palette_default"
     data-id="MessageBanner"
     data-selector-id="messageBanner"
     data-test-id="MessageBanner"
   >
     <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 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="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="basis_auto shrink message"
+          class="d-basis-auto d-min-w-0 d-flex-shrink message"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/NewStar/NewStar.js

@@ -110,8 +110,4 @@ var NewStar = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = NewStar;
 NewStar.propTypes = _propTypes.propTypes;
-NewStar.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   NewStar.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+NewStar.defaultProps = _defaultProps.defaultProps;

package/lib/NewStar/NewStar.module.css

@@ -1,8 +1,7 @@
 .star {
-  position: absolute;
+  composes: d-absolute d-pointer-events-none from global;
   height: var(--zd_size20) ;
   width: var(--zd_size21) ;
-  pointer-events: none;
 }
 .topLeft {
   top: 0 ;
@@ -50,7 +49,7 @@
 }
 
 .stars {
-  position: absolute;
+  composes: d-absolute from global;
 }
 
 [dir=ltr] .stars {