@zohodesk/dot 1.9.18 → 1.9.19

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -20,6 +20,7 @@ import Section from "../../../lookup/Section/Section";
 import FormAction from "../../../FormAction/FormAction";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertLookupNew.module.css";
 let buttonPaletteObject = {
   success: {
@@ -159,7 +160,7 @@ export default class AlertLookup extends Component {
     }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
+      className: cn(`${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`)
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
       id: ariaMessageId,
       dangerouslySetInnerHTML: {
@@ -169,9 +170,9 @@ export default class AlertLookup extends Component {
       id: ariaMessageId
     }, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
       id: ariaConfirmMsgId,
-      className: `${message ? style.confirmMsgText : ''}`
+      className: cn(`${message ? style.confirmMsgText : ''}`)
     }, confirmationMessage)))), renderFooterNode || submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-      className: style.footer
+      className: cn(style.footer)
     }, renderNode(renderFooterNode) || /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xmedium"
@@ -203,9 +204,4 @@ export default class AlertLookup extends Component {
 
 }
 AlertLookup.propTypes = propTypes;
-AlertLookup.defaultProps = defaultProps; // if (__DOCS__) {
-//   AlertLookup.docs = {
-//     componentGroup: 'AlertLookup',
-//     folderName: 'Alert'
-//   };
-// }
+AlertLookup.defaultProps = defaultProps;

package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -1,5 +1,5 @@
 .section {
-  min-height: auto ;
+  composes: d-min-h-auto from global;
 }
 
 .innerSection {
@@ -26,14 +26,14 @@
 }
 
 .footer {
-  overflow: hidden;
+  composes: d-overflow-hidden from global;
   border-radius: 0 0 10px 10px;
 }
 
 .horizontalScroll,
 .verticalScroll,
 .bothScroll {
-  height: 100% ;
+  composes: d-h-full from global;
 }
 
 .horizontalScroll {

package/es/version2/lookup/AlertLookup/__tests__/__snapshots__/AlertLookup.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlertLookup rendering isActive is true defult 1`] = `
 <DocumentFragment>
@@ -8,7 +8,7 @@ exports[`AlertLookup rendering isActive is true defult 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"

package/es/version2/lookup/alertLookupCommonNew.module.css

@@ -20,9 +20,9 @@
 }
 
 .noteUl {
+    composes: d-m-0 from global;
     padding-block: var(--zd_size14) 0 ;
     padding-inline: var(--zd_size16) ;
-    margin: 0 ;
 }
 
 .noteUl li {

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -10,6 +10,7 @@ import Button from '@zohodesk/components/es/Button/Button';
 import FormAction from "../../../FormAction/FormAction";
 import DesktopNotificationHeader from "../DesktopNotificationHeader/DesktopNotificationHeader";
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import style from "./DesktopNotification.module.css";
 let buttonPaletteObject = {
   success: {
@@ -106,7 +107,7 @@ export function DesktopNotificationUI(props) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: style.parentElement,
+    className: cn(style.parentElement),
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
@@ -136,17 +137,17 @@ export function DesktopNotificationUI(props) {
   }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
+    className: cn(`${style.section} ${style.infoText}`)
   }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    className: cn(`${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`)
   }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
+    className: cn(`${info ? style.secondaryInfo : ''}`)
   }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
+    className: cn(style.footer)
   }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`,
+    className: cn(`${style.message}`),
     tagName: "p"
   }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
     size: "small",
@@ -179,9 +180,4 @@ export default function DesktopNotification(props) {
   }));
 }
 DesktopNotification.propTypes = propTypes;
-DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {
-//   DesktopNotification.docs = {
-//     componentGroup: 'DesktopNotification',
-//     folderName: 'Alert'
-//   };
-// }
+DesktopNotification.defaultProps = defaultProps;

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -1,14 +1,12 @@
 .parentElement {
+  composes: d-relative from global;
   margin-block-end: var(--zd_size7) ;
-  position: relative;
 }
 
 .container {
+  composes: d-relative d-max-h-full d-pointer-events-auto from global;
   color: var(--zdt_desktopnotification_text);
   transition: all var(--zd_transition4);
-  position: relative;
-  max-height: 100% ;
-  pointer-events: auto;
   background-color: var(--zdt_desktopnotification_bg);
   box-shadow: var(--zd_bs_desktopnotification_container);
   border-radius: 0 0 10px 10px;
@@ -38,8 +36,7 @@
 }
 
 .tapWidth {
-  max-width: 100% ;
-  min-width: 100% ;
+  composes: d-min-w-full d-max-w-full from global;
 }
 
 /* Animation Style */
@@ -69,7 +66,7 @@
 }
 
 .leftnoanimate {
-  opacity: 1;
+  composes: d-opacity-100 from global;
   transform: translateX(0) scale(1);
 }
 
@@ -83,14 +80,13 @@
 .message {
   padding-block: var(--zd_size10) ;
   padding-inline: var(--zd_size76) var(--zd_size20) ;
-  position: relative;
   color: var(--zdt_desktopnotification_message_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative d-cursor-pointer from global;
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
   border-top: 1px solid var(--zdt_desktopnotification_message_border);
-  cursor: pointer;
 }
 
 .message:hover {
@@ -126,6 +122,6 @@
 }
 
 .footer {
-  overflow: hidden;
+  composes: d-overflow-hidden from global;
   border-radius: 0 0 10px 10px;
 }

package/es/version2/notification/DesktopNotification/__tests__/__snapshots__/DesktopNotification.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DesktopNotification rendering the defult props 1`] = `
 <DocumentFragment>
@@ -8,19 +8,19 @@ exports[`DesktopNotification rendering the defult props 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex column container leftanimate"
+      class="d-flex d-flex-col container leftanimate"
       data-id="toastMessage"
       data-selector-id="container"
       data-test-id="toastMessage"
     >
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex row wrap alignItems_center container primary_header"
+          class="d-flex d-flex-row d-flex-wrap d-items-center container primary_header"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
@@ -100,19 +100,19 @@ exports[`DesktopNotification rendering the defult props 1`] = `
             </div>
           </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 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="shrink"
+                class="d-min-w-0 d-flex-shrink"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
@@ -124,13 +124,13 @@ exports[`DesktopNotification rendering the defult props 1`] = `
             </div>
           </div>
           <div
-            class="noShrink close"
+            class="d-flex-shrink-0 close"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="inlineFlex row alignItems_center justifyContent_center close light"
+              class="d-inline-flex d-flex-row d-items-center d-justify-center close light"
               data-id="toastMessage_close"
               data-selector-id="container"
               data-test-id="toastMessage_close"
@@ -138,14 +138,14 @@ exports[`DesktopNotification rendering the defult props 1`] = `
               tabindex="0"
             >
               <div
-                class="noShrink"
+                class="d-flex-shrink-0"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Cross fbold closeIcon"
+                  class="zd_font_icons ff icon-Cross basic d-inline-block d-align-middle d-font-bold closeIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -157,13 +157,13 @@ exports[`DesktopNotification rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex fullSize column"
+          class="d-flex d-h-full d-w-full d-flex-col"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -6,6 +6,7 @@ import AlertClose from "../../AlertClose/AlertClose";
 import AlertIcons from "../../alertIcons/AlertIcons";
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/Typography/Typography';
+import { cn } from "@dot-system/css-utility";
 import style from "./DesktopNotificationHeader.module.css";
 export default class DesktopNotificationHeader extends Component {
   constructor(props) {
@@ -47,7 +48,7 @@ export default class DesktopNotificationHeader extends Component {
     }, ({
       uptoTablet
     }) => /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
-      className: style.iconContainer
+      className: cn(style.iconContainer)
     }, /*#__PURE__*/React.createElement(AlertIcons, {
       type: type
     })) : null, /*#__PURE__*/React.createElement(Box, {
@@ -85,9 +86,4 @@ export default class DesktopNotificationHeader extends Component {
 
 }
 DesktopNotificationHeader.propTypes = propTypes;
-DesktopNotificationHeader.defaultProps = defaultProps; // if (__DOCS__) {
-//   DesktopNotificationHeader.docs = {
-//     componentGroup: 'DesktopNotificationHeader',
-//     folderName: 'Alert'
-//   };
-// }
+DesktopNotificationHeader.defaultProps = defaultProps;

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -4,12 +4,11 @@
 
 .container {
   composes: varClass;
+  composes: d-relative d-border-solid from global;
   min-height: var(--zd_size54) ;
-  position: relative;
   /*css:theme-validation:ignore*/
   color: var(--zdt_desktopnotification_text);
   background-color: var(--alert_lookup_bg_color);
-  border-style: solid;
   border-color: var(--commonalert_border_color);
   border-width: 2px 0 0 0;
 }
@@ -21,7 +20,7 @@
 }
 
 .infoText {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 /* Palette */

package/es/version2/notification/DesktopNotificationHeader/__tests__/__snapshots__/DesktopNotificationHeader.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DesktopNotificationHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container primary_header"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container primary_header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -83,19 +83,19 @@ exports[`DesktopNotificationHeader rendering the defult props 1`] = `
       </div>
     </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 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="shrink"
+          class="d-min-w-0 d-flex-shrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -107,27 +107,27 @@ exports[`DesktopNotificationHeader rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink close"
+      class="d-flex-shrink-0 close"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="inlineFlex row alignItems_center justifyContent_center close light"
+        class="d-inline-flex d-flex-row d-items-center d-justify-center close light"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
         tabindex="0"
       >
         <div
-          class="noShrink"
+          class="d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-Cross fbold closeIcon"
+            class="zd_font_icons ff icon-Cross basic d-inline-block d-align-middle d-font-bold closeIcon"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/ActionButton/ActionButton.module.css

@@ -48,15 +48,12 @@
 
 .contentBox,
 .arrowWrapper {
+  composes: d-m-0 from global;
   transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
 }
 
-.contentBox, .arrowWrapper {
-  margin: 0 ;
-}
-
 .clickable {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 [dir=ltr] .contentBoxBdr {
@@ -100,9 +97,9 @@
 }
 
 .txt {
+  composes: d-capitalize from global;
   font-size: var(--zd_font_size13) ;
   font-weight: var(--zd-fw-semibold);
-  text-transform: capitalize;
 }
 
 .subTxt {
@@ -112,7 +109,7 @@
 .contentwrapper,
 .txt,
 .subTxt {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 .txt,
@@ -123,9 +120,8 @@
 }
 
 .arrowWrapper {
-  position: relative;
   composes: offSelection from '~@zohodesk/components/es/common/common.module.css';
-  cursor: pointer;
+  composes: d-relative d-cursor-pointer from global;
 }
 
 [dir=ltr] .arrowWrapper {
@@ -172,8 +168,7 @@
 }
 
 .btn {
-  height: 100% ;
-  width: 100% ;
+  composes: d-size-full from global;
 }
 
 .popupWrapper {