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

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

@@ -3,7 +3,7 @@
 exports[`TagWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper grey large  inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center wrapper grey large"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/es/ToastMessage/ToastMessage.js

@@ -10,6 +10,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import AutoClose from "../actions/AutoClose";
+import { cn } from "@dot-system/css-utility";
 import a11yStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css'; //style
 
 import style from "./ToastMessage.module.css";
@@ -122,7 +123,7 @@ function ToastMessageUI(props) {
     "data-title": subject,
     id: titleId
   }, subject)), info ? /*#__PURE__*/React.createElement("p", {
-    className: style.alertMessage,
+    className: cn(style.alertMessage),
     "data-title": info,
     id: infoId
   }, info) : null, getInnerBottomContainer ? /*#__PURE__*/React.createElement("div", null, getInnerBottomContainer()) : null), type == 'information' && needClose ? /*#__PURE__*/React.createElement(Box, {
@@ -139,7 +140,7 @@ function ToastMessageUI(props) {
   }, /*#__PURE__*/React.createElement(Container, {
     className: style.alerttab
   }, needClose ? /*#__PURE__*/React.createElement("button", {
-    className: `${a11yStyle.buttonReset} ${style.closeIcon}`,
+    className: cn(`${a11yStyle.buttonReset} ${style.closeIcon}`),
     onClick: onClose,
     "data-id": `${dataId}_closeRight`,
     "data-test-id": `${dataId}_closeRight`

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

@@ -7,7 +7,7 @@ exports[`ToastMessage rendering the defult props 1`] = `
     aria-describedby="2"
     aria-labelledby="1"
     aria-live="assertive"
-    class="container leftanimate  flex coldir"
+    class="flex column container leftanimate"
     data-id="toastMessage"
     data-selector-id="toastMessage"
     data-test-id="toastMessage"
@@ -15,31 +15,31 @@ exports[`ToastMessage rendering the defult props 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="alertifychild grow basis shrinkOff"
+      class="flexible basis_zero noShrink alertifychild"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="alertifybanner flex cover rowdir"
+        class="flex fullSize row alertifybanner"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="alertleft grow basis shrinkOff"
+          class="flexible basis_zero noShrink alertleft"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="alertico shrinkOff"
+              class="noShrink alertico"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -47,19 +47,19 @@ exports[`ToastMessage rendering the defult props 1`] = `
               <span />
             </div>
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex rowdir vCenter"
+                class="flex row alignItems_center"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="alertTitle grow basis shrinkOff"
+                  class="flexible basis_zero noShrink alertTitle"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
@@ -70,13 +70,13 @@ exports[`ToastMessage rendering the defult props 1`] = `
           </div>
         </div>
         <div
-          class="alertright shrinkOff"
+          class="noShrink alertright"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="alerttab flex cover coldir"
+            class="flex fullSize column alerttab"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/es/Upload/Upload.js

@@ -4,6 +4,7 @@ import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import Image from "../Image/Image";
+import { cn } from "@dot-system/css-utility";
 import style from "./Upload.module.css";
 export default class Upload extends React.Component {
   render() {
@@ -35,7 +36,7 @@ export default class Upload extends React.Component {
     }, /*#__PURE__*/React.createElement(React.Fragment, null, isPreview ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_attachLoading`,
       "data-test-id": `${dataId}_attachLoading`,
-      className: style.loader,
+      className: cn(style.loader),
       style: {
         width: `${progressValue}%`
       }
@@ -45,7 +46,7 @@ export default class Upload extends React.Component {
       alt: "Uploaded Image",
       dataId: `${dataId}_fileName`
     }), /*#__PURE__*/React.createElement("div", {
-      className: style.overlay,
+      className: cn(style.overlay),
       onClick: onClick
     })) : /*#__PURE__*/React.createElement(Box, {
       className: style.attachInfo,
@@ -55,9 +56,9 @@ export default class Upload extends React.Component {
       name: iconName,
       iconClass: style.fileIcon
     }), /*#__PURE__*/React.createElement("div", {
-      className: style.attachsize
+      className: cn(style.attachsize)
     }, fileSize))), typeof onRemove !== 'undefined' && onRemove != null ? /*#__PURE__*/React.createElement("span", {
-      className: style.uploadclose,
+      className: cn(style.uploadclose),
       onClick: onRemove,
       "data-id": `${dataId}_deleteUpload`,
       "data-test-id": `${dataId}_deleteUpload`

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

@@ -3,8 +3,7 @@
 exports[`Upload rendering the dataId prop with isPreview isPreviewType are true  1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -16,7 +15,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
     />
     <img
       alt="Uploaded Image"
-      class=" uploadimage  imgMaxFullSize "
+      class="imgMaxFullSize uploadimage"
       data-id="TestdataId_fileName"
       data-test-id="TestdataId_fileName"
     />
@@ -30,7 +29,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold   "
+        class="zd_font_icons basic icon-close-e fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -43,8 +42,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
 exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -55,7 +53,7 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
       data-test-id="TestdataId_attachLoading"
     />
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="TestdataId_openNewTab"
       data-selector-id="box"
       data-test-id="TestdataId_openNewTab"
@@ -71,7 +69,7 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold   "
+        class="zd_font_icons basic icon-close-e fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -84,14 +82,13 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
 exports[`Upload rendering the dataSelectorId prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="selectorId"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -107,14 +104,13 @@ exports[`Upload rendering the dataSelectorId prop 1`] = `
 exports[`Upload rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -130,14 +126,13 @@ exports[`Upload rendering the defult props 1`] = `
 exports[`Upload rendering the fileSize prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -155,21 +150,20 @@ exports[`Upload rendering the fileSize prop 1`] = `
 exports[`Upload rendering the iconName prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e  fileIcon  "
+        class="zd_font_icons basic icon-close-e fileIcon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -185,15 +179,14 @@ exports[`Upload rendering the iconName prop 1`] = `
 exports[`Upload rendering the imgSrc prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <img
       alt="Uploaded Image"
-      class=" uploadimage  imgMaxFullSize "
+      class="imgMaxFullSize uploadimage"
       data-id="upload_fileName"
       data-test-id="upload_fileName"
       src="http://sampleImageUrl.com"
@@ -208,8 +201,7 @@ exports[`Upload rendering the imgSrc prop 1`] = `
 exports[`Upload rendering the isPreview prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -220,7 +212,7 @@ exports[`Upload rendering the isPreview prop 1`] = `
       data-test-id="upload_attachLoading"
     />
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -236,14 +228,13 @@ exports[`Upload rendering the isPreview prop 1`] = `
 exports[`Upload rendering the isPreview prop is false 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -259,14 +250,13 @@ exports[`Upload rendering the isPreview prop is false 1`] = `
 exports[`Upload rendering the isPreviewType false prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -282,15 +272,14 @@ exports[`Upload rendering the isPreviewType false prop 1`] = `
 exports[`Upload rendering the isPreviewType true prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <img
       alt="Uploaded Image"
-      class=" uploadimage  imgMaxFullSize "
+      class="imgMaxFullSize uploadimage"
       data-id="upload_fileName"
       data-test-id="upload_fileName"
     />
@@ -304,14 +293,13 @@ exports[`Upload rendering the isPreviewType true prop 1`] = `
 exports[`Upload rendering the onRemove prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -327,7 +315,7 @@ exports[`Upload rendering the onRemove prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold   "
+        class="zd_font_icons basic icon-close-e fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -340,14 +328,13 @@ exports[`Upload rendering the onRemove prop 1`] = `
 exports[`Upload rendering the palette of - light 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -363,14 +350,13 @@ exports[`Upload rendering the palette of - light 1`] = `
 exports[`Upload rendering the palette of - night 1`] = `
 <DocumentFragment>
   <div
-    class="container night medium 
- inflex coldir"
+    class="inlineFlex column container night medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -386,8 +372,7 @@ exports[`Upload rendering the palette of - night 1`] = `
 exports[`Upload rendering the progressValue prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium preview
- inflex coldir"
+    class="inlineFlex column container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -399,7 +384,7 @@ exports[`Upload rendering the progressValue prop 1`] = `
       style="width: 90%;"
     />
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -415,14 +400,13 @@ exports[`Upload rendering the progressValue prop 1`] = `
 exports[`Upload rendering the size of - medium 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -438,14 +422,13 @@ exports[`Upload rendering the size of - medium 1`] = `
 exports[`Upload rendering the size of - small 1`] = `
 <DocumentFragment>
   <div
-    class="container light small 
- inflex coldir"
+    class="inlineFlex column container light small"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -461,15 +444,14 @@ exports[`Upload rendering the size of - small 1`] = `
 exports[`Upload rendering the tooltip prop 1`] = `
 <DocumentFragment>
   <div
-    class="container light medium 
- inflex coldir"
+    class="inlineFlex column container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
     data-title="Tooltip"
   >
     <div
-      class="attachInfo shrinkOff"
+      class="noShrink attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"

package/es/VideoLookup/VideoLookup.js

@@ -11,6 +11,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Styles ****/
 
+import { cn } from "@dot-system/css-utility";
 import defaultStyle from "./css/VideoLookup.module.css";
 export default function VideoLookup(props) {
   const {
@@ -60,18 +61,18 @@ export default function VideoLookup(props) {
     $ui_size: "14",
     $flag_dotted: true
   }, closeText)), /*#__PURE__*/React.createElement("div", {
-    className: style.videoContainer,
+    className: cn(style.videoContainer),
     "data-id": `${customId}_container`,
     "data-test-id": `${testId}_container`
   }, isEmbeddedLink ? /*#__PURE__*/React.createElement("iframe", {
     src: link,
     allowFullScreen: true,
     allow: "autoplay",
-    className: style.videoIframe
+    className: cn(style.videoIframe)
   }) : /*#__PURE__*/React.createElement("video", {
     autoPlay: true,
     controls: true,
-    className: style.videoPlayer
+    className: cn(style.videoPlayer)
   }, /*#__PURE__*/React.createElement("source", {
     src: link,
     type: `video/${videoFormat}`