@zohodesk/dot 1.9.18 → 1.9.20

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

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`IconButton Checking the "Children" 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -27,7 +27,7 @@ exports[`IconButton eleRef prop is a function 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -45,7 +45,7 @@ exports[`IconButton rendering ally 1`] = `
     aria-label="ariaLabel"
     aria-labelledby="ariaLabelledby"
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -60,7 +60,7 @@ exports[`IconButton rendering ally 2`] = `
     aria-expanded="false"
     aria-haspopup="false"
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -73,7 +73,7 @@ exports[`IconButton rendering in ClassName 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper IconButtonClass effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper IconButtonClass"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -86,7 +86,7 @@ exports[`IconButton rendering in Icon 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold icon_button_center iconClass"
+      class="zd_font_icons ff icon-infoStroke basic d-inline-block d-align-middle d-font-bold icon_button_center iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -108,7 +108,7 @@ exports[`IconButton rendering in dataIsHtml is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="true"
     data-selector-id="iconButton"
@@ -121,7 +121,7 @@ exports[`IconButton rendering in isDisabled is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover disabled"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover disabled buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -135,7 +135,7 @@ exports[`IconButton rendering in title 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -149,7 +149,7 @@ exports[`IconButton rendering isNeedEffect is False 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -162,7 +162,7 @@ exports[`IconButton rendering needButtonTag 1`] = `
 <DocumentFragment>
   <div
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -175,7 +175,7 @@ exports[`IconButton rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -188,7 +188,7 @@ exports[`IconButton rendering the hovertypes- bg 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border bgHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border bgHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -201,7 +201,7 @@ exports[`IconButton rendering the hovertypes- border 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border borderHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border borderHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -214,7 +214,7 @@ exports[`IconButton rendering the hovertypes- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -227,7 +227,7 @@ exports[`IconButton rendering the isActive true with palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover active hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover active hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -240,7 +240,7 @@ exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primary_active effect primary border defaultHover active hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect primary border defaultHover active hoverEffect buttonReset large wrapper primary_active"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -253,7 +253,7 @@ exports[`IconButton rendering the isActive true with palette of- primaryFilled 1
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primaryFilled_active effect primaryFilled border defaultHover active hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect primaryFilled border defaultHover active hoverEffect buttonReset large wrapper primaryFilled_active"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -266,7 +266,7 @@ exports[`IconButton rendering the palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -279,7 +279,7 @@ exports[`IconButton rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primary effect primary border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect primary border defaultHover hoverEffect buttonReset large wrapper primary"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -292,7 +292,7 @@ exports[`IconButton rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primaryFilled effect primaryFilled border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect primaryFilled border defaultHover hoverEffect buttonReset large wrapper primaryFilled"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -305,7 +305,7 @@ exports[`IconButton rendering the size of- large 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -318,7 +318,7 @@ exports[`IconButton rendering the size of- medium 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset medium wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset medium wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -331,7 +331,7 @@ exports[`IconButton rendering the size of- small 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset small wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset small wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -344,7 +344,7 @@ exports[`IconButton rendering the size of- xlarge 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset xlarge wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset xlarge wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -357,7 +357,7 @@ exports[`IconButton rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset xsmall wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset xsmall wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -370,7 +370,7 @@ exports[`IconButton rendering tourId 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"

package/es/Image/Image.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 "./Image.module.css";
 export default class Image extends React.Component {
   render() {
@@ -24,7 +25,7 @@ export default class Image extends React.Component {
       "data-title": title,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${isCover ? style.imgFullSize : style.imgMaxFullSize} ${className}`,
+      className: cn(`${isCover ? style.imgFullSize : style.imgMaxFullSize} ${className}`),
       onClick: onClick,
       id: htmlId,
       ref: eleRef,
@@ -36,8 +37,4 @@ export default class Image extends React.Component {
 
 }
 Image.propTypes = propTypes;
-Image.defaultProps = defaultProps; // if (__DOCS__) {
-//   Image.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+Image.defaultProps = defaultProps;

package/es/Image/Image.module.css

@@ -1,10 +1,8 @@
 .imgFullSize{
-    height:100% ;
-    width:100%  
+    composes: d-size-full from global;
 }
 .imgMaxFullSize{
-    max-height:100% ;
-    max-width:100%  
+    composes: d-max-w-full d-max-h-full from global;
 }
 .imgFullSize, .imgMaxFullSize{
   /*  Variable:Ignore  */

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Image -  checking  "isCover" is false 1`] = `
 <DocumentFragment>

package/es/ImportantNotes/ImportantNotes.js

@@ -40,9 +40,4 @@ export default class ImportantNotes extends React.Component {
 
 }
 ImportantNotes.propTypes = propTypes;
-ImportantNotes.defaultProps = defaultProps; // if (__DOCS__) {
-//   ImportantNotes.docs = {
-//     componentGroup: 'Common',
-//     folderName: 'General'
-//   };
-// }
+ImportantNotes.defaultProps = defaultProps;

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

@@ -1,22 +1,22 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ImportantNotes rendering the children 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -24,7 +24,7 @@ exports[`ImportantNotes rendering the children 1`] = `
       />
     </div>
     <div
-      class="flexible basis_zero noShrink title"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -38,20 +38,20 @@ exports[`ImportantNotes rendering the children 1`] = `
 exports[`ImportantNotes rendering the className prop 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section customClass"
+    class="d-flex d-flex-row d-items-start section customClass"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -65,20 +65,20 @@ exports[`ImportantNotes rendering the className prop 1`] = `
 exports[`ImportantNotes rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -92,20 +92,20 @@ exports[`ImportantNotes rendering the defult props 1`] = `
 exports[`ImportantNotes rendering the iconClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-info customIconClass"
+        class="zd_font_icons ff icon-info basic d-inline-block d-align-middle customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,20 +119,20 @@ exports[`ImportantNotes rendering the iconClass 1`] = `
 exports[`ImportantNotes rendering the iconName prop 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-info"
+        class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -140,7 +140,7 @@ exports[`ImportantNotes rendering the iconName prop 1`] = `
       />
     </div>
     <div
-      class="flexible basis_zero noShrink title"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -154,7 +154,7 @@ exports[`ImportantNotes rendering the iconName prop 1`] = `
 exports[`ImportantNotes rendering the iconName prop and text and children are empty 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -165,13 +165,13 @@ exports[`ImportantNotes rendering the iconName prop and text and children are em
 exports[`ImportantNotes rendering the iconName prop is null and given text value 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink title"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -185,20 +185,20 @@ exports[`ImportantNotes rendering the iconName prop is null and given text value
 exports[`ImportantNotes rendering the iconSize 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-info"
+        class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -212,20 +212,20 @@ exports[`ImportantNotes rendering the iconSize 1`] = `
 exports[`ImportantNotes rendering the isCover prop is false 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_start section"
+    class="d-inline-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -239,20 +239,20 @@ exports[`ImportantNotes rendering the isCover prop is false 1`] = `
 exports[`ImportantNotes rendering the isCover prop is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -266,20 +266,20 @@ exports[`ImportantNotes rendering the isCover prop is true 1`] = `
 exports[`ImportantNotes rendering the text and children prop 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -287,7 +287,7 @@ exports[`ImportantNotes rendering the text and children prop 1`] = `
       />
     </div>
     <div
-      class="flexible basis_zero noShrink title"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -301,20 +301,20 @@ exports[`ImportantNotes rendering the text and children prop 1`] = `
 exports[`ImportantNotes rendering the text and children prop is empty 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,20 +328,20 @@ exports[`ImportantNotes rendering the text and children prop is empty 1`] = `
 exports[`ImportantNotes rendering the text prop 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_start section"
+    class="d-flex d-flex-row d-items-start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink alignSelf_start icon"
+      class="d-flex-shrink-0 d-self-start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre"
+        class="zd_font_icons ff icon-help-centre basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -349,7 +349,7 @@ exports[`ImportantNotes rendering the text prop 1`] = `
       />
     </div>
     <div
-      class="flexible basis_zero noShrink title"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/es/Link/Link.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import { cn } from "@dot-system/css-utility";
 import style from "./Link.module.css";
 import LinkContext from "./LinkContext";
 export default class Link extends React.Component {
@@ -85,7 +86,7 @@ export default class Link extends React.Component {
       href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
       target: target,
       "data-title": title,
-      className: `${style.container}  ${className ? className : ''}`
+      className: cn(`${style.container}  ${className ? className : ''}`)
     }, option, {
       rel: rel,
       "data-id": dataId,
@@ -100,8 +101,4 @@ export default class Link extends React.Component {
 }
 Link.contextType = LinkContext;
 Link.defaultProps = defaultProps;
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+Link.propTypes = propTypes;