@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/alert/AlertLookup/AlertLookup.js

@@ -13,6 +13,7 @@ import Section from "../../lookup/Section/Section";
 import FormAction from "../../FormAction/FormAction";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertLookup.module.css";
 export default class AlertLookup extends Component {
   render() {
@@ -74,13 +75,13 @@ export default class AlertLookup extends Component {
       alignBox: "row",
       className: style.section
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.innerSection} ${sectionClassName}`
+      className: cn(`${style.innerSection} ${sectionClassName}`)
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: message
       }
     }) : /*#__PURE__*/React.createElement("div", null, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
-      className: style.text
+      className: cn(style.text)
     }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xsmall"

package/es/alert/AlertLookup/__tests__/__snapshots__/AlertLookup.spec.js.snap

@@ -10,7 +10,7 @@ exports[`AlertLookup rendering the defult props 2`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir hCenter"
+      class="flex fullSize row justifyContent_center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"

package/es/avatar/AvatarClose/AvatarClose.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarClose.module.css";
 export default class AvatarClose extends React.Component {
   constructor(props) {
@@ -28,7 +29,7 @@ export default class AvatarClose extends React.Component {
       AvatarProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: style.container,
+      className: cn(style.container),
       "data-selector-id": dataSelectorId,
       "data-id": dataId,
       "data-test-id": dataId
@@ -38,12 +39,12 @@ export default class AvatarClose extends React.Component {
       title: title,
       size: size
     }, AvatarProps)), isClose && /*#__PURE__*/React.createElement("span", {
-      className: style.pop,
+      className: cn(style.pop),
       onClick: onClick,
       "data-id": `${dataId}_close`,
       "data-test-id": `${dataId}_close`
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.icon
+      className: cn(style.icon)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-plus"
     }))));

package/es/avatar/AvatarClose/__tests__/__snapshots__/AvatarClose.spec.js.snap

@@ -9,7 +9,7 @@ exports[`AvatarClose rendering the defult props 1`] = `
     data-test-id="avatarClose"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarCollision.module.css";
 export default class AvatarCollision extends React.Component {
   constructor(props) {
@@ -30,7 +31,7 @@ export default class AvatarCollision extends React.Component {
       AvatarProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`,
+      className: cn(`${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`),
       onClick: onClick,
       "data-id": "collsionPop",
       "data-test-id": "collsionPop",
@@ -44,10 +45,10 @@ export default class AvatarCollision extends React.Component {
       needTitle: false,
       initial: initial
     }, AvatarProps)), needCreateChat && !isLeft && /*#__PURE__*/React.createElement("span", {
-      className: style.pop,
+      className: cn(style.pop),
       "data-title": title
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.icon
+      className: cn(style.icon)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-livechat3"
     }))));

package/es/avatar/AvatarCollision/__tests__/__snapshots__/AvatarCollision.spec.js.snap

@@ -9,7 +9,7 @@ exports[`AvatarCollision rendering the defult props 1`] = `
     data-test-id="collsionPop"
   >
     <div
-      class="avatar xmedium xmedium circle default black border   "
+      class="avatar xmedium xmedium circle default black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -29,7 +29,7 @@ exports[`AvatarCollision rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-livechat3    "
+          class="zd_font_icons basic icon-livechat3"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -42,7 +42,7 @@ export default class AvatarIcon extends React.Component {
     }, AvatarIconProps), /*#__PURE__*/React.createElement(Icon, {
       name: name,
       size: iconSize,
-      iconClass: ` ${iconClass} ${style.avatar_align_center}  ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`] ? style[`icon_${iconColor}`] : ''}` : ''} `,
+      iconClass: `  ${style.avatar_align_center}  ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`] ? style[`icon_${iconColor}`] : ''}` : ''} ${iconClass}`,
       isBold: isIconBold
     }));
   }

package/es/avatar/AvatarIcon/__tests__/__snapshots__/AvatarIcon.spec.js.snap

@@ -3,14 +3,14 @@
 exports[`AvatarIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  medium default  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center container medium default"
     data-id="containerComponent"
     data-selector-id="avatarIcon"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-add-ag    avatar_align_center  iconColor     "
+      class="zd_font_icons basic icon-add-ag avatar_align_center iconColor"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarStatus.module.css";
 export default class AvatarStatus extends React.Component {
   constructor(props) {
@@ -37,7 +38,7 @@ export default class AvatarStatus extends React.Component {
       AvatarProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${className} `
+      className: cn(`${style.container} ${className} `)
     }, AvatarStatusProps, {
       "aria-label": `${title}, ${name}, ${statusTitle}`,
       "data-selector-id": dataSelectorId
@@ -58,7 +59,7 @@ export default class AvatarStatus extends React.Component {
       needBorder: needBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       "data-title": statusTitle,
-      className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
+      className: cn(`${style.state} ${style[state]} ${style[size]} ${style[shape]}`)
     }));
   }
 

package/es/avatar/AvatarStatus/__tests__/__snapshots__/AvatarStatus.spec.js.snap

@@ -4,11 +4,11 @@ exports[`AvatarStatus rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-label="undefined, undefined, "
-    class="container  "
+    class="container"
     data-selector-id="avatarStatus"
   >
     <div
-      class="avatar medium medium circle info black  "
+      class="avatar medium medium circle info black"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"

package/es/avatar/AvatarThread/AvatarThread.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarThread.module.css";
 export default class AvatarThread extends React.Component {
   render() {
@@ -40,7 +41,7 @@ export default class AvatarThread extends React.Component {
     } = customProps;
     let hoverEffect = showOnHover ? style.hover : '';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`,
+      className: cn(`${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`),
       "data-selector-id": dataSelectorId
     }, AvatarThreadProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       initial: initial,
@@ -55,18 +56,17 @@ export default class AvatarThread extends React.Component {
       customClass: customTextClass,
       needTitle: needTitle
     }, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/React.createElement("span", {
-      className: `${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`,
+      className: cn(`${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`),
       "data-title": iconTitle,
       "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
       "data-test-id": iconTitle === 'Remove Follower' && 'removeFollower',
       onClick: onIconClick
     }, iconName && /*#__PURE__*/React.createElement("span", {
-      className: style.icon
+      className: cn(style.icon)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize,
-      iconClass: `${iconClass}
-                  ${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`
+      iconClass: `${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor} ${iconClass}`
     })), getCustomThread && getCustomThread()));
   }
 

package/es/avatar/AvatarThread/__tests__/__snapshots__/AvatarThread.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`AvatarThread rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  "
+    class="container"
     data-selector-id="avatarThread"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"

package/es/avatar/AvatarUser/AvatarUser.js

@@ -9,6 +9,7 @@ import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarIcon from "../AvatarIcon/AvatarIcon";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarUser.module.css";
 /**** Methods ****/
 
@@ -51,7 +52,7 @@ export default class AvatarUser extends React.Component {
       lockTitle = 'Locked'
     } = i18nKeys;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${style[size]}`,
+      className: cn(`${style.container} ${style[size]}`),
       "data-id": dataId || name || iconName,
       "data-test-id": dataId || name || iconName,
       "data-selector-id": dataSelectorId
@@ -77,27 +78,27 @@ export default class AvatarUser extends React.Component {
       alternateSrc: alternateSrc
     }, AvatarProps)), isPaid ? /*#__PURE__*/React.createElement("span", {
       "data-title": paidTitle,
-      className: style.paid,
+      className: cn(style.paid),
       "data-id": "paidUser",
       "data-test-id": "paidUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-paiduser"
     })) : null, isPortal ? /*#__PURE__*/React.createElement("span", {
       "data-title": portalTitle,
-      className: style.portal,
+      className: cn(style.portal),
       "data-id": "portalUser",
       "data-test-id": "portalUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-globe1"
     })) : null, isLocked ? /*#__PURE__*/React.createElement("span", {
       "data-title": lockTitle,
-      className: style.lock,
+      className: cn(style.lock),
       "data-id": "locked",
       "data-test-id": "locked"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-lock01"
     })) : null, needDelete ? /*#__PURE__*/React.createElement("span", {
-      className: style.delete,
+      className: cn(style.delete),
       "data-id": "dltContactPhoto",
       "data-test-id": "dltContactPhoto",
       onClick: onDelete

package/es/avatar/AvatarUser/__tests__/__snapshots__/AvatarUser.spec.js.snap

@@ -7,7 +7,7 @@ exports[`AvatarUser rendering the defult props 1`] = `
     data-selector-id="avatarUser"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarTeam from '@zohodesk/components/es/AvatarTeam/AvatarTeam';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarWithTeam.module.css";
 export default class AvatarWithTeam extends React.Component {
   render() {
@@ -34,7 +35,7 @@ export default class AvatarWithTeam extends React.Component {
       AvatarTeam2Props = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("span", _extends({
-      className: `${style.container} `,
+      className: cn(`${style.container} `),
       "data-id": "avatarWithTeamId",
       "data-test-id": "avatarWithTeamId",
       "data-selector-id": dataSelectorId
@@ -71,7 +72,7 @@ export default class AvatarWithTeam extends React.Component {
       customClass: customTextClass,
       borderOnActive: borderOnActive
     }, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.teamAvatar} ${teamClassName} `,
+      className: cn(`${style.teamAvatar} ${teamClassName} `),
       "data-id": "teamNameTestId",
       "data-test-id": "teamNameTestId",
       "data-title": needTitle ? title : undefined

package/es/avatar/AvatarWithTeam/__tests__/__snapshots__/AvatarWithTeam.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`AvatarWithTeam rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="container "
+    class="container"
     data-id="avatarWithTeamId"
     data-selector-id="avatarWithTeam"
     data-test-id="avatarWithTeamId"
   >
     <div
-      class="avatar xmedium xmedium circle primary black border   "
+      class="avatar xmedium xmedium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"

package/es/deprecated/FreezeLayer/FreezeLayer.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container } from '@zohodesk/components/es/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { cn } from "@dot-system/css-utility";
 import style from "./_FreezeLayer.module.css";
 import { getZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import { getDotLibraryConfig } from "../Provider/Config";
@@ -105,9 +106,9 @@ export default class FreezeLayer extends Component {
       style: isActive && needAutoZindex ? {
         zIndex: `${this.getNextIndex()}`
       } : {},
-      className: `
-              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
-            `,
+      className: cn(`
+              ${style.container}  ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''} ${customClass}
+            `),
       onClick: onClick ? onClick : null,
       ref: forwardRef
     }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -8,6 +8,7 @@ import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import style from "./SelectDropdown.module.css";
 
 class SelectDropdown extends React.Component {
@@ -63,13 +64,13 @@ class SelectDropdown extends React.Component {
     } = suggestions;
     return /*#__PURE__*/React.createElement("span", {
       ref: getTargetRef,
-      className: style.container,
+      className: cn(style.container),
       onClick: removeClose
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.departName,
+      className: cn(style.departName),
       onClick: this.handleTogglePopup
     }, selectedText), /*#__PURE__*/React.createElement("span", {
-      className: style.departIcon,
+      className: cn(style.departIcon),
       onClick: this.handleTogglePopup
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down1",

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -16,6 +16,7 @@ import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
 import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 import { findScrollEnd } from '@zohodesk/components/es/utils/Common';
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
+import { cn } from "@dot-system/css-utility";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import RippleEffect from '@zohodesk/components/es/RippleEffect/RippleEffect';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
@@ -555,12 +556,12 @@ export class ToggleDropDown extends Component {
       searchValue,
       isFetchingOptions
     } = this.state;
-    const commonClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : ''} ${isDisabled ? CssProvider('isDisable') : isReadOnly || !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
+    const commonClass = ` ${isPopupReady ? activeStyle ? activeStyle : '' : ''} ${isDisabled ? CssProvider('isDisable') : isReadOnly || !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`} ${className ? className : ''}`;
     let listIndex = -1;
     const ariaTitleId = this.getAriaId(); // const allyOptionsArr = this.getOptionsArray();
 
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: style.wrapper,
+      className: cn(style.wrapper),
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
       onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
       "data-selector-id": dataSelectorId
@@ -578,7 +579,7 @@ export class ToggleDropDown extends Component {
       isActive: isPopupOpen,
       isNeedEffect: isEditable && isNeedEffect
     }, /*#__PURE__*/React.createElement(Container, {
-      className: `${btnStyle.buttonReset} ${commonClass} ${!isPopupOpen && showIconOnHover ? style.hoverIcon : ''}`,
+      className: `${btnStyle.buttonReset} ${!isPopupOpen && showIconOnHover ? style.hoverIcon : ''}  ${commonClass}`,
       isCover: false,
       alignBox: "row",
       align: "vertical",
@@ -708,9 +709,9 @@ export class ToggleDropDown extends Component {
       return /*#__PURE__*/React.createElement(Fragment, {
         key: `index${groupName}`
       }, needDivider && /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
+        className: cn(style.seperatedLine)
       }), groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupName
+        className: cn(style.groupName)
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
         text: groupName,
         palette: palette,
@@ -807,7 +808,7 @@ export class ToggleDropDown extends Component {
       return /*#__PURE__*/React.createElement(Fragment, {
         key: i
       }, needDivider ? /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
+        className: cn(style.seperatedLine)
       }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
         dataId: item[keyName],
         value: item[keyName],
@@ -872,7 +873,7 @@ export class ToggleDropDown extends Component {
       size: "small",
       getEmptyState: this.emptySearchSVG
     }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null))) : null);
   }
 

package/es/dropdown/ToggleDropDown/__tests__/__snapshots__/ToggleDropDown.spec.js.snap

@@ -7,7 +7,7 @@ exports[`ToggleDropDown rendering the defult props 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex rowdir vCenter"
+      class="flex row alignItems_center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -16,7 +16,7 @@ exports[`ToggleDropDown rendering the defult props 1`] = `
         aria-expanded="false"
         aria-haspopup="true"
         aria-labelledby="1"
-        class="buttonReset   cursor   effect default border defaultHover  hoverEffect  flex rowdir vCenter"
+        class="flex row alignItems_center buttonReset cursor effect default border defaultHover hoverEffect"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/es/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Link from "../../Link/Link";
+import { cn } from "@dot-system/css-utility";
 import style from "./CommonEmptyState.module.css";
 export default class CommonEmptyState extends Component {
   render() {
@@ -27,16 +28,16 @@ export default class CommonEmptyState extends Component {
       descriptionClass = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[size]} ${className} ${!isFluid ? style.fluid : ''} ${style[palette]}`,
+      className: cn(`${style.container} ${style[size]} ${!isFluid ? style.fluid : ''} ${style[palette]}  ${className}`),
       "data-id": dataId,
       "data-test-id": dataId
     }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/React.createElement("div", {
       tabIndex: "0",
-      className: `${style.title} ${titleClass}`
+      className: cn(`${style.title} ${titleClass}`)
     }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
-      className: style.linkWrapper
+      className: cn(style.linkWrapper)
     }, /*#__PURE__*/React.createElement("span", {
-      className: `${style.desc} ${descriptionClass}`
+      className: cn(`${style.desc} ${descriptionClass}`)
     }, description), !linkDescription && linkText ? /*#__PURE__*/React.createElement(Link, {
       href: linkUrl,
       className: style.link,
@@ -44,9 +45,9 @@ export default class CommonEmptyState extends Component {
       onClick: onUrlClick,
       dataId: `${dataId}_primarylink`
     }, linkText) : null) : null, linkDescription || !description && !linkDescription && linkText ? /*#__PURE__*/React.createElement("div", {
-      className: style.linkDescWrapper
+      className: cn(style.linkDescWrapper)
     }, linkDescription ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.linkDesc}`
+      className: cn(`${style.linkDesc}`)
     }, linkDescription) : null, linkText ? /*#__PURE__*/React.createElement(Link, {
       href: linkUrl,
       className: style.link,
@@ -54,7 +55,7 @@ export default class CommonEmptyState extends Component {
       onClick: onUrlClick,
       dataId: `${dataId}_secondarylink`
     }, linkText) : null) : null, children ? /*#__PURE__*/React.createElement("div", {
-      className: style.children
+      className: cn(style.children)
     }, children) : null);
   }
 

package/es/emptystate/CommonEmptyState/__tests__/__snapshots__/CommonEmptyState.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`CommonEmptyState rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container medium  fluid default"
+    class="container medium fluid default"
     data-id="emptyState"
     data-test-id="emptyState"
   />

package/es/emptystate/EditionPage/EditionPage.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import EmptyCrmPotential from '@zohodesk/svg/es/emptystate/version3/EmptyCrmPotential';
 import style from "./EditionPage.css";
+import { cn } from "@dot-system/css-utility";
 export default class EditionPage extends Component {
   constructor(props) {
     super(props);
@@ -20,28 +21,28 @@ export default class EditionPage extends Component {
       children
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.editionContainer,
+      className: cn(style.editionContainer),
       "data-id": dataId,
       "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.svg
+      className: cn(style.svg)
     }, /*#__PURE__*/React.createElement(EmptyCrmPotential, null)), /*#__PURE__*/React.createElement("div", {
-      className: style.header
+      className: cn(style.header)
     }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: style.description
+      className: cn(style.description)
     }, subtitle) : null, /*#__PURE__*/React.createElement("div", {
-      className: style.description
+      className: cn(style.description)
     }, information ? `${information} ` : null, butttonText ? /*#__PURE__*/React.createElement("span", {
-      className: style.button,
+      className: cn(style.button),
       "data-id": `${dataId}_button`,
       "data-test-id": `${dataId}_button`,
       onClick: onButtonClick
     }, butttonText) : null), children ? /*#__PURE__*/React.createElement("div", {
-      className: style.content
+      className: cn(style.content)
     }, children) : null, footerText ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_footerText`,
       "data-test-id": `${dataId}_footerText`,
-      className: style.footer
+      className: cn(style.footer)
     }, /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: footerText

package/es/emptystate/EditionPage/__tests__/__snapshots__/EditionPage.spec.js.snap

@@ -12,7 +12,7 @@ exports[`EditionPage rendering the defult props 1`] = `
     >
       <div
         aria-hidden="true"
-        class="large  default svgCenter "
+        class="large default svgCenter"
       >
         <svg
           data-id="emptyCrmPotential"

package/es/errorstate/Inconvenience/Inconvenience.js

@@ -5,6 +5,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
 import InconvenienceSVG from '@zohodesk/svg/es/errorstate/version1/EmptyInconvenience';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import style from "./Inconvenience.module.css";
 export default class Inconvenience extends React.Component {
@@ -50,9 +51,9 @@ export default class Inconvenience extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: commonStyle.top
     }, title ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      className: cn(uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title)
     }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      className: cn(uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle)
     }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
       className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
     }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
@@ -61,7 +62,7 @@ export default class Inconvenience extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      className: cn(uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText)
     }, description), /*#__PURE__*/React.createElement(LinkText, {
       text: urlText,
       href: url,