@zohodesk/dot 1.9.18 → 1.9.20

package/es/Onboarding/css/Onboarding.module.css

@@ -4,20 +4,22 @@
 
 
 .positon_absolute{
-  position: absolute;
+  composes: d-absolute from global;
 }
 
 .positon_fixed{
-  position: fixed;
+  composes: d-fixed from global;
+}
+
+.mainContainerAnimation{
+  composes: d-origin-bottom-right from global;
 }
 
 [dir=ltr] .mainContainerAnimation{
-  transform-origin: 100% 100%;
   animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
 }
 
 [dir=rtl] .mainContainerAnimation{
-  transform-origin: 0% 100%;
   animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
 }
 
@@ -36,7 +38,7 @@
 }
 
 .header {
-  position: relative;
+  composes: d-relative from global;
   height: var(--zd_size200) ;
   padding: var(--zd_size10) ;
   background-color: var(--zdt_onboarding_header_bg);
@@ -52,29 +54,25 @@
 
 
 .mediaElement {
-  width: 100% ;
-  height: 100% ;
-  object-fit: cover;
+  composes: d-object-cover d-size-full from global;
   min-height: var(--zd_size182) ;
   border-radius: 10px;
   border: 1px solid var(--zdt_onboarding_header_border);
 }
 
 .image {
+  composes: d-bg-no-repeat d-bg-cover from global;
   user-drag: none;
-  -webkit-user-drag: none;
-  background-repeat: no-repeat;
-  background-size: cover; 
+  -webkit-user-drag: none; 
 }
 
 /* image filter layer */
 .dvLayer {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .innerHead{
-  width: 100% ;
-  height: 100% ;
+  composes: d-size-full from global;
 }
 
 
@@ -103,13 +101,13 @@
 
 
 .playIcon {
+  composes: d-cursor-pointer from global;
   width: var(--zd_size44) ;
   height: var(--zd_size44) ;
   z-index: 1;
   color: var(--zdt_onboarding_play_icon_text);
   border-radius: 50%;
   background-color: var(--zdt_onboarding_play_icon_bg);
-  cursor: pointer;
   border: 2px solid var(--zdt_onboarding_play_icon_border);
 }
 
@@ -131,10 +129,10 @@
 
 /* play icon animation  */
 .playIconWrapper {
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   composes: navigate transZ from '~@zohodesk/components/es/common/animation.module.css';
+  composes: d-absolute from global;
 }
 [dir=ltr] .playIconWrapper {
   left: 0 ;
@@ -184,14 +182,13 @@
 }
 
 .footer {
-  gap: var(--zd_size10) ;
+  composes: d-gap-[10px] from global;
   padding: 0 var(--zd_size30) var(--zd_size30) ;
   margin-top: var(--zd_size7) ;
 }
 
 .btnWrapper{
-  gap: var(--zd_size10) ;
-  width: 100% ;
+  composes: d-w-full d-gap-[10px] from global;
 }
 
 .footerButton {
@@ -202,11 +199,9 @@
 
 .secondaryButttonLink {
   letter-spacing:  0.2px;
-  text-transform: capitalize;
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-capitalize d-text-center d-cursor-pointer from global;
   border-radius: 4px;
-  cursor: pointer;
-  text-align:center;
 }
 .secondaryButtton{
   color: var(--zdt_onboarding_learnmore_text);
@@ -231,12 +226,11 @@
 }
 
 .closeIconContainer {
-  position: absolute;
+  composes: d-absolute d-cursor-pointer from global;
   height: var(--zd_size32) ;
   width: var(--zd_size32) ;
   top: calc( var(--zd_size14) * -1 ) ;
   border-radius: 8px;
-  cursor: pointer;
 }
 
 [dir=ltr] .closeIconContainer {
@@ -294,10 +288,8 @@
 
 /* ribbon txt */
 .newRibbon {
-  position: absolute;
+  composes: d-absolute d-overflow-visible d-capitalize from global;
   top: var(--zd_size20) ;
-  text-transform: capitalize;
-  overflow: visible;
   --ribbon_bg_color: var(--zdt_onboarding_ribbon_bg);
   --ribbon_text_color:var(--zdt_onboarding_ribbon_text);
 }
@@ -347,8 +339,7 @@
 
 /* for gradient border */
 .mainWrapper {
-  width: 100% ;
-  position: relative;
+  composes: d-relative d-w-full from global;
   border-radius: 20px;
   box-shadow: var(--zd_bs_onboarding_gradient);
 }
@@ -392,12 +383,10 @@
 
 /* for backgrouns graident */
 .gradientLayer {
-  overflow: hidden;
+  composes: d-absolute d-overflow-hidden d-pointer-events-none from global;
   /* z-index: 2;  */
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
-  pointer-events: none;
   border-radius: 20px;
   border-radius: 20px;
 }
@@ -411,11 +400,11 @@
 }
 
 .circleBlur {
+  composes: d-absolute from global;
   width: var(--zd_size267) ;
   height: var(--zd_size227) ;
   opacity: 0.3;
   filter: blur(64px);
-  position: absolute;
   border-radius: 267px;
   background-color: var(--zdt_onboarding_primary_bg);
 }
@@ -449,19 +438,17 @@
 }
 
 .expandedButton  {
-  width: 100% ;
+  composes: d-w-full from global;
 }
 
 /* carousel */
 .carousel {
-  overflow: hidden;
-  width: 100% ;
-  position: relative;
+  composes: d-relative d-overflow-hidden d-w-full from global;
   border-radius: 20px 20px 0 0;
 }
 .carouselInner {
+  composes: d-w-full from global;
   transition: transform var(--zd_transition3) cubic-bezier(0.5, 0.11, 0.15, 1);
-  width: 100% ;
 }
 [dir=ltr] .carouselInner {
   transform: translateX(var(--local_translate_movement))
@@ -471,7 +458,7 @@
   transform: translateX(calc(var(--local_translate_movement) * -1));
 }
 .carouselItem {
-  width: 100%  
+  composes: d-w-full from global;
 }
 
 

package/es/PlusIcon/PlusIcon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./PlusIcon.module.css";
 import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
 export default class PlusIcon extends React.Component {
@@ -21,7 +22,7 @@ export default class PlusIcon extends React.Component {
       customProps
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: style.container,
+      className: cn(style.container),
       onClick: onClick,
       "data-id": dataId,
       "data-test-id": dataId,
@@ -38,9 +39,4 @@ export default class PlusIcon extends React.Component {
 
 }
 PlusIcon.defaultProps = defaultProps;
-PlusIcon.propTypes = propTypes; // if (__DOCS__) {
-//   PlusIcon.docs = {
-//     componentGroup: 'Common',
-//     folderName: 'Ticket DetailView'
-//   };
-// }
+PlusIcon.propTypes = propTypes;

package/es/PlusIcon/PlusIcon.module.css

@@ -1,8 +1,8 @@
 .container {
   composes: dinblk from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-cursor-pointer from global;
   border-radius: 50%;
   box-shadow: var(--zd_bs_plusicon_container);
-  cursor: pointer;
   background-color: var(--zdt_plusicon_bg);
 }
 

package/es/PlusIcon/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PlusIcon renders with  size is  - medium 1`] = `
 <DocumentFragment>
@@ -8,14 +8,14 @@ exports[`PlusIcon renders with  size is  - medium 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container medium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container medium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -34,14 +34,14 @@ exports[`PlusIcon renders with  size is  - small 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container small default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container small default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -60,14 +60,14 @@ exports[`PlusIcon renders with  size is  - xlarge 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xlarge default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xlarge default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -86,14 +86,14 @@ exports[`PlusIcon renders with  size is  - xmedium 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -112,14 +112,14 @@ exports[`PlusIcon renders with  size is  - xsmall 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xsmall default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xsmall default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -138,14 +138,14 @@ exports[`PlusIcon renders with  size is  - xxsmall 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xxsmall default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xxsmall default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -164,14 +164,14 @@ exports[`PlusIcon renders with customClass prop 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon custom-plus-icon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon custom-plus-icon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -190,14 +190,14 @@ exports[`PlusIcon renders with dataId prop 1`] = `
     data-test-id="test-id"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -216,14 +216,14 @@ exports[`PlusIcon renders with default props 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -242,14 +242,14 @@ exports[`PlusIcon renders with iconClass prop 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon custom-icon-class"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon custom-icon-class"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -268,14 +268,14 @@ exports[`PlusIcon renders with iconName prop 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -294,14 +294,14 @@ exports[`PlusIcon renders with iconSize prop 1`] = `
     data-test-id="addreqNowbutton"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -321,14 +321,14 @@ exports[`PlusIcon renders with title prop 1`] = `
     data-title="Plus Icon"
   >
     <div
-      class="inlineFlex column alignItems_center justifyContent_center container xmedium default plusIcon"
+      class="d-inline-flex d-flex-col d-items-center d-justify-center container xmedium default plusIcon"
       data-id="containerComponent"
       data-selector-id="avatarIcon"
       data-test-id="containerComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus avatar_align_center iconColor icon"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle avatar_align_center iconColor icon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/es/Separator/Separator.module.css

@@ -22,7 +22,7 @@
   /* line-height: var(--zd_size13); */
 }
 .none {
-  display: none;
+  composes: d-hidden from global;
 }
 .default {
   color: var(--zdt_separator_default_text);