@zohodesk/dot 1.9.18 → 1.9.19

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}`

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`VideoLookup rendering the defult props 1`] = `<DocumentFragment />`;
 
@@ -10,7 +10,7 @@ exports[`VideoLookup rendering with TestId 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -24,7 +24,7 @@ exports[`VideoLookup rendering with TestId 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -64,7 +64,7 @@ exports[`VideoLookup rendering with closeText 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -78,7 +78,7 @@ exports[`VideoLookup rendering with closeText 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -118,7 +118,7 @@ exports[`VideoLookup rendering with customId 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -132,7 +132,7 @@ exports[`VideoLookup rendering with customId 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -172,7 +172,7 @@ exports[`VideoLookup rendering with customStyle 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -186,7 +186,7 @@ exports[`VideoLookup rendering with customStyle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -226,7 +226,7 @@ exports[`VideoLookup rendering with isEmbeddedLink is true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -240,7 +240,7 @@ exports[`VideoLookup rendering with isEmbeddedLink is true 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -277,7 +277,7 @@ exports[`VideoLookup rendering with link 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -291,7 +291,7 @@ exports[`VideoLookup rendering with link 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -332,7 +332,7 @@ exports[`VideoLookup rendering with prop isOpened 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -346,7 +346,7 @@ exports[`VideoLookup rendering with prop isOpened 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -386,7 +386,7 @@ exports[`VideoLookup rendering with videoFormat 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -400,7 +400,7 @@ exports[`VideoLookup rendering with videoFormat 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-close2"
+          class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/es/VideoLookup/css/VideoLookup.module.css

@@ -1,13 +1,13 @@
 .videoContainer {
+  composes: d-overflow-hidden from global;
   height: var(--zd_size567) ;
   width: var(--zd_size1008) ;
-  overflow: hidden;
 }
 .close {
+  composes: d-absolute from global;
   width: var(--zd_size40) ;
   --button_padding: 6px 0;
   --button_text_color: var(--zdt_videolookup_close);
-  position: absolute;
   top: var(--zd_size20) ;
 }
 [dir=ltr] .close {
@@ -30,8 +30,7 @@
 
 .videoIframe,
 .videoPlayer {
-  width: 100% ;
-  height: 100% ;
+  composes: d-size-full from global;
 }
 
 .videoIframe, .videoPlayer {

package/es/alert/AlertHeader/AlertHeader.js

@@ -5,6 +5,7 @@ import Title from "../../lookup/header/Title/Title";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
 import Close from "../../lookup/header/Close/Close";
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertHeader.module.css";
 export default class AlertHeader extends Component {
   render() {
@@ -37,7 +38,7 @@ export default class AlertHeader extends Component {
       wrap: "wrap",
       dataId: `${dataId}_alertHeader`
     }, needIcon ? /*#__PURE__*/React.createElement("div", {
-      className: style.iconContainer
+      className: cn(style.iconContainer)
     }, /*#__PURE__*/React.createElement(Icon, {
       size: iconSize,
       name: iconName ? iconName : iconObj[iconType] ? iconObj[iconType] : iconName,
@@ -66,9 +67,4 @@ export default class AlertHeader extends Component {
 
 }
 AlertHeader.propTypes = propTypes;
-AlertHeader.defaultProps = defaultProps; // if (__DOCS__) {
-//   AlertHeader.docs = {
-//     componentGroup: 'AlertHeader',
-//     folderName: 'Alert'
-//   };
-// }
+AlertHeader.defaultProps = defaultProps;

package/es/alert/AlertHeader/AlertHeader.module.css

@@ -1,6 +1,6 @@
 .container {
+  composes: d-relative from global;
   min-height: var(--zd_size54) ;
-  position: relative;
   padding-block:var(--zd_size12) ;
   padding-inline:var(--zd_size26) var(--zd_size45) ;
 }
@@ -22,7 +22,7 @@
 }
 
 .iconStyle {
-  display: block;
+  composes: d-block from global;
 }
 
 /* Palette */