@zohodesk/dot 1.9.18 → 1.9.20

package/es/list/SecondaryText/Website.js

@@ -46,9 +46,4 @@ export default class Website extends Component {
 
 }
 Website.propTypes = Website_propTypes;
-Website.defaultProps = Website_defaultProps; // if (__DOCS__) {
-//   Website.docs = {
-//     folderName: 'List',
-//     componentGroup: 'WebsiteText'
-//   };
-// }
+Website.defaultProps = Website_defaultProps;

package/es/list/SecondaryText/__tests__/__snapshots__/AccountName.spec.js.snap

@@ -1,27 +1,27 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AccountName rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_baseline"
+    class="d-flex d-flex-row d-items-baseline"
     data-id="accountName"
     data-selector-id="container"
     data-test-id="accountName"
   >
     <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_baseline primaryAccountNameCnt"
+        class="d-flex d-flex-row d-items-baseline primaryAccountNameCnt"
         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"

package/es/list/SecondaryText/__tests__/__snapshots__/ContactName.spec.js.snap

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ContactName rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_baseline"
+    class="d-flex d-flex-row d-items-baseline"
     data-id="contactName"
     data-selector-id="container"
     data-test-id="contactName"
   >
     <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"

package/es/list/SecondaryText/__tests__/__snapshots__/DepartmentText.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/Email.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/HappinessRating.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/PhoneNumber.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/PriorityText.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/SecondaryText.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/StatusText.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/TicketId.spec.js.snap

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

package/es/list/SecondaryText/__tests__/__snapshots__/Website.spec.js.snap

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

package/es/list/SecondryPanel/SecondryPanel.js

@@ -9,6 +9,7 @@ import Dot from "../Dot/Dot";
 import Container from '@zohodesk/components/es/Layout/Container';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./SecondryPanel.module.css";
 export default class SecondryPanel extends Component {
   render() {
@@ -17,7 +18,7 @@ export default class SecondryPanel extends Component {
       className
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: className
+      className: cn(className)
     }, children);
   }
 
@@ -97,9 +98,4 @@ export class SecondryPanelItem extends Component {
 
 }
 SecondryPanelItem.propTypes = SecondryPanelItem_propTypes;
-SecondryPanelItem.defaultProps = SecondryPanelItem_defaultProps; // if (__DOCS__) {
-//   SecondryPanel.docs = {
-//     folderName: 'List',
-//     componentGroup: 'SecondaryLayout'
-//   };
-// }
+SecondryPanelItem.defaultProps = SecondryPanelItem_defaultProps;

package/es/list/SecondryPanel/SecondryPanel.module.css

@@ -1,5 +1,5 @@
 .listItemContainer {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .dottedStyle {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';

package/es/list/SecondryPanel/__tests__/__snapshots__/SecondryPanel.spec.js.snap

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

package/es/list/SentimentStatus/SentimentStatus.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./SentimentStatus.module.css";
 import { Icon } from '@zohodesk/icons';
 export default class SentimentStatus extends React.Component {
@@ -18,7 +19,7 @@ export default class SentimentStatus extends React.Component {
       positive: 'ZD-botPositive'
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
+      className: cn(style.container),
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: icons[type],
@@ -27,8 +28,4 @@ export default class SentimentStatus extends React.Component {
   }
 
 }
-SentimentStatus.propTypes = propTypes; // if (__DOCS__) {
-//   SentimentStatus.docs = {
-//     componentGroup: ''
-//   };
-// }
+SentimentStatus.propTypes = propTypes;

package/es/list/SentimentStatus/SentimentStatus.module.css

@@ -1,10 +1,10 @@
 .container {
+  composes: d-align-middle from global;
   margin-inline: var(--zd_size5) 0 ;
   margin-block:0 ;
-  vertical-align: middle;
   font-size: var(--zd_font_size10) ;
 }
 
 .sentimentIcon {
-  display: block;
+  composes: d-block from global;
 }

package/es/list/SentimentStatus/__tests__/__snapshots__/SentimentStatus.spec.js.snap

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

package/es/list/Subject/Subject.js

@@ -70,9 +70,4 @@ export default class Subject extends Component {
 
 }
 Subject.propTypes = propTypes;
-Subject.defaultProps = defaultProps; // if (__DOCS__) {
-//   Subject.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Subject'
-//   };
-// }
+Subject.defaultProps = defaultProps;

package/es/list/Subject/Subject.module.css

@@ -4,9 +4,9 @@
 
 .subject {
   composes: varClass;
+  composes: d-block from global;
   /* css:theme-validation:ignore */
   color: var(--subject_text);
-  display: block;
 }
 
 .dotted {
@@ -31,5 +31,5 @@
 }
 
 .cursorPointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }

package/es/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Subject applies fontWeight prop 1`] = `
 <DocumentFragment>

package/es/list/TagNew/TagNew.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./TagNew.module.css";
 export default class TagNew extends Component {
   constructor(props) {
@@ -16,7 +17,7 @@ export default class TagNew extends Component {
       dataId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
+      className: cn(`${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`),
       onClick: onClick,
       "data-id": dataId,
       "data-test-id": dataId
@@ -25,9 +26,4 @@ export default class TagNew extends Component {
 
 }
 TagNew.propTypes = propTypes;
-TagNew.defaultProps = defaultProps; // if (__DOCS__) {
-//   TagNew.docs = {
-//     folderName: 'List',
-//     componentGroup: 'TagNew'
-//   };
-// }
+TagNew.defaultProps = defaultProps;

package/es/list/TagNew/TagNew.module.css

@@ -7,19 +7,16 @@
   padding-block:0 ;
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-invisible d-cursor-pointer d-opacity-0 from global;
   transition: all var(--zd_transition2) ease 0s;
-  opacity: 0;
-  visibility: hidden;
   border-radius: 14px;
   background-color: var(--zdt_tagnew_default_bg);
   box-shadow: var(--zd_bs_tagnew_shadow);
   transform: scale(0);
-  cursor: pointer;
 }
 
 .bounceIn {
-  visibility: visible;
-  opacity: 1;
+  composes: d-visible d-opacity-100 from global;
   transform: scale(1);
 }
 

package/es/list/TagNew/__tests__/__snapshots__/TagNew.spec.js.snap

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

package/es/list/Thread/Thread.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/es/semantic/Button/Button';
+import { cn } from "@dot-system/css-utility";
 import style from "./Thread.module.css";
 export default class Thread extends Component {
   constructor(props) {
@@ -28,15 +29,10 @@ export default class Thread extends Component {
       name: "ZD-TK-thread",
       size: "9"
     }), /*#__PURE__*/React.createElement("span", {
-      className: style.count
+      className: cn(style.count)
     }, count));
   }
 
 }
 Thread.propTypes = propTypes;
-Thread.defaultProps = defaultProps; // if (__DOCS__) {
-//   Thread.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Thread'
-//   };
-// }
+Thread.defaultProps = defaultProps;

package/es/list/Thread/Thread.module.css

@@ -3,9 +3,8 @@
 }
 .container {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-cursor-pointer from global;
   color: var(--icon_color);
-  cursor: pointer;
 }
 .container:hover {
   --icon_color: var(--zdt_thread_hover_iconText);

package/es/list/Thread/__tests__/__snapshots__/Thread.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Thread rendering the defult props 1`] = `
 <DocumentFragment>
@@ -11,7 +11,7 @@ exports[`Thread rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons rtl basic icon-thread"
+      class="zd_font_icons ff icon-thread basic d-inline-block d-align-middle rtl"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/listCommon.module.css

@@ -1,6 +1,5 @@
 .inlineBlockMiddle {
-  display: inline-block;
-  vertical-align: middle;
+  composes: d-inline-block d-align-middle from global;
 }
 
 .inlineFlex {
@@ -24,14 +23,7 @@
 
 .statusColumn {
   composes: inlineBlockMiddle;
-}
-
-[dir=ltr] .statusColumn {
-  text-align: right;
-}
-
-[dir=rtl] .statusColumn {
-  text-align: left;
+  composes: d-text-right from global;
 }
 
 .classic .floatingIconContainer {
@@ -62,7 +54,7 @@
 
 .listContainer,
 .listLayoutContainer {
-  position: relative;
+  composes: d-relative from global;
   transition: var(--zd_transition3) all ease;
 }
 /*Active:ignore*/

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -10,6 +10,7 @@ import Loader from '@zohodesk/svg/es/Loader/Loader';
 import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
 import StatusListItem from "../StatusListItem/StatusListItem";
+import { cn } from "@dot-system/css-utility";
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
@@ -195,7 +196,7 @@ export class StatusDropdown extends React.Component {
     let containerClass = `${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`} ${className ? className : ''}`;
     let ariaTitleId = this.getAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: style.posRel,
+      className: cn(style.posRel),
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
       onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
     }, renderTargetElement ? renderTargetElement({
@@ -340,16 +341,11 @@ export class StatusDropdown extends React.Component {
       size: "small",
       getEmptyState: this.emptySearchSVG
     }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null))) : null);
   }
 
-} // if (__DOCS__) {
-//   StatusDropdown.docs = {
-//     componentGroup: 'Molecule'
-//   };
-// }
-
+}
 StatusDropdown.defaultProps = defaultProps;
 StatusDropdown.propTypes = propTypes;
 const StatusDropdown_Component = Popup(StatusDropdown);

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -1,8 +1,8 @@
 .container {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .posRel {
-  position: relative;
+  composes: d-relative from global;
 }
 .maxHgt {
   max-height: var(--zd_size265) ;
@@ -22,7 +22,7 @@
   padding-block:0 ;
 }
 .overlay_arrow {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   transform: translateY(-50%) perspective(1px);
 }
@@ -51,19 +51,16 @@
   padding-block-end: var(--zd_size25) ;
 }
 .readOnly {
-  cursor: no-drop;
+  composes: d-cursor-no-drop from global;
 }
 .cursorDefault {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 .cursor {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
-[dir=ltr] .dropBoxContainer {
-  text-align: left;
-}
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
+.dropBoxContainer {
+  composes: d-text-left from global;
 }
 .iconBox {
   margin-inline-end: var(--zd_size4) ;
@@ -76,7 +73,7 @@
   margin: 0 auto ;
 }
 .seperatedLine {
-  height: var(--zd_size1) ;
+  composes: d-h-px from global;
   margin-block: var(--zd_size9) var(--zd_size10) ;
   margin-inline:0 ;
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);

package/es/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import StatusDropdown from "../StatusDropdown";
+import { cn } from "@dot-system/css-utility";
 describe('StatusDropdown', () => {
   test('rendering the defult props', () => {
     const {
@@ -12,7 +13,7 @@ describe('StatusDropdown', () => {
       isPopupOpen
     }) => {
       return /*#__PURE__*/React.createElement("div", {
-        className: isPopupOpen ? 'popupOpened' : 'popupClosed'
+        className: cn(isPopupOpen ? 'popupOpened' : 'popupClosed')
       }, "Target Element");
     };
 

package/es/list/status/StatusDropdown/__tests__/__snapshots__/StatusDropdown.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`StatusDropdown rendering target element 1`] = `
 <DocumentFragment>
@@ -23,21 +23,21 @@ exports[`StatusDropdown rendering the defult props 1`] = `
       aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
-      class="flex row alignItems_center container buttonReset cursor"
+      class="d-flex d-flex-row d-items-center container buttonReset cursor"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
       tabindex="0"
     >
       <span
-        class="shrink value toggleDropText"
+        class="d-min-w-0 d-flex-shrink value toggleDropText"
         data-id="undefined_value"
         data-selector-id="box"
         data-test-id="undefined_value"
       />
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-down toggleDropIcon arrow default_arrow"
+        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle toggleDropIcon arrow default_arrow"
         data-id="statusdownarrow"
         data-selector-id="fontIcon"
         data-test-id="statusdownarrow"

package/es/list/status/StatusListItem/StatusListItem.js

@@ -11,6 +11,7 @@ import { Icon } from '@zohodesk/icons';
 import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./StatusListItem.module.css";
 export default class StatusListItem extends React.Component {
   constructor(props) {
@@ -119,7 +120,7 @@ export default class StatusListItem extends React.Component {
       shrink: true,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
-      className: style.tickIcon,
+      className: cn(style.tickIcon),
       "aria-hidden": ariaHidden
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
@@ -129,9 +130,4 @@ export default class StatusListItem extends React.Component {
 
 }
 StatusListItem.defaultProps = defaultProps;
-StatusListItem.propTypes = propTypes; // if (__DOCS__) {
-//   StatusListItem.docs = {
-//     componentGroup: 'StatusListItem',
-//     folderName: 'List'
-//   };
-// }
+StatusListItem.propTypes = propTypes;

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -6,12 +6,11 @@
 
 .list {
   composes: varClass;
+  composes: d-relative d-cursor-pointer from global;
   color: var(--zdt_statuslistitem_list_text);
   font-size: var(--statuslistitem_font_size);
-  position: relative;
   list-style: none;
   min-height: var(--statuslistitem_min_height);
-  cursor: pointer;
 }
 [dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
@@ -69,8 +68,8 @@
   color: var(--zdt_statuslistitem_secondary_effect_text);
 }
 .tickIcon {
+  composes: d-absolute from global;
   color: var(--zdt_statuslistitem_tickicon);
-  position: absolute;
   top:50% ;
   transform: translateY(-50%);
 }
@@ -88,12 +87,12 @@
 }
 .contentWrapper {
   composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
-  width: 100% ;
+  composes: d-w-full from global;
 }
 /* Status Type */
 .statusType{
-  position: relative;
   composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative from global;
   min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
   min-width: var(--zd_size20) ;
 }