@zohodesk/components 1.0.0-temp-197 → 1.0.0-temp-199

package/es/Stencils/Stencils.module.css

@@ -1,96 +1,96 @@
-.varClass {
-  /* stencils default variables */
-  --stencil_height: var(--zd_size9);
-  --stencil_width: 100%;
-  --stencil_border_radius: 5px;
-}
-.container {
-  composes: varClass;
-  height: var(--stencil_height);
-  width: var(--stencil_width);
-  border-radius: var(--stencil_border_radius);
-}
-.stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-@keyframes placeHolderShimmer-ltr {
-  0% {
-    background-position: calc(var(--zd_size468) * -1) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 0;
-  }
-}
-@keyframes placeHolderShimmer-rtl {
-  0% {
-    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 100%;
-  }
-}
-
-.rectangular {
-  composes: stencil;
-  --stencil_height: var(--zd_size9);
-  --stencil_border_radius: 5px;
-}
-.primary {
-  background-color: var(--zdt_stencil_primary_bg);
-  background-image: var(--zdt_stencil_primary_gradient_bg);
-}
-.secondary {
-  background-color: var(--zdt_stencil_secondary_bg);
-  background-image: var(--zdt_stencil_secondary_gradient_bg);
-}
-.dark {
-  background-color: var(--zdt_stencil_dark_bg);
-  background-image: var(--zdt_stencil_dark_gradient_bg);
-}
-
-.small {
-  --stencil_width: var(--zd_size110);
-}
-.default {
-  --stencil_width: 100%;
-}
-.medium {
-  --stencil_width: var(--zd_size170);
-}
-.large {
-  --stencil_width: var(--zd_size220);
-}
-
-.circle {
-  composes: stencil;
-  --stencil_border_radius: 50%;
-}
-.clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
-}
-.cmedium,
-.cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
-}
-.csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
-}
+.varClass {
+  /* stencils default variables */
+  --stencil_height: var(--zd_size9);
+  --stencil_width: 100%;
+  --stencil_border_radius: 5px;
+}
+.container {
+  composes: varClass;
+  height: var(--stencil_height);
+  width: var(--stencil_width);
+  border-radius: var(--stencil_border_radius);
+}
+.stencil {
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+@keyframes placeHolderShimmer-ltr {
+  0% {
+    background-position: calc(var(--zd_size468) * -1) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 0;
+  }
+}
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
+
+.rectangular {
+  composes: stencil;
+  --stencil_height: var(--zd_size9);
+  --stencil_border_radius: 5px;
+}
+.primary {
+  background-color: var(--zdt_stencil_primary_bg);
+  background-image: var(--zdt_stencil_primary_gradient_bg);
+}
+.secondary {
+  background-color: var(--zdt_stencil_secondary_bg);
+  background-image: var(--zdt_stencil_secondary_gradient_bg);
+}
+.dark {
+  background-color: var(--zdt_stencil_dark_bg);
+  background-image: var(--zdt_stencil_dark_gradient_bg);
+}
+
+.small {
+  --stencil_width: var(--zd_size110);
+}
+.default {
+  --stencil_width: 100%;
+}
+.medium {
+  --stencil_width: var(--zd_size170);
+}
+.large {
+  --stencil_width: var(--zd_size220);
+}
+
+.circle {
+  composes: stencil;
+  --stencil_border_radius: 50%;
+}
+.clarge {
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
+}
+.cmedium,
+.cdefault {
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
+}
+.csmall {
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}

package/es/Switch/Switch.module.css

@@ -6,7 +6,7 @@
   /* switch circle default variables */
   --switch_circle_bg_color: var(--zdt_switch_circle_bg);
   --switch_circle_border_radius: 50px;
-  --switch_cricle_box_shadow: var(--zd_bs_contrast_outline, 0 1px 4px 0 var(--zdt_switch_circle_shadow));
+  --switch_cricle_box_shadow: var(--zd_bs_switch_default);
 }
 
 .container {
@@ -49,7 +49,6 @@
 }
 
 .checked+.label {
-  /* css:validation:ignore */
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
 

package/es/Tab/TabContent.module.css

@@ -1,4 +1,4 @@
-/* $Id$ */
-.container {
-  position: relative;
-}
+/* $Id$ */
+.container {
+  position: relative;
+}

package/es/Tab/Tabs.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/forbid-component-props */
 
-/* eslint css-modules/no-unused-class: [2, {
-      markAsUsed: [
-          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
-          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
-        ]
-    }]
+/* eslint css-modules/no-unused-class: [2, {
+      markAsUsed: [
+          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
+          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
+        ]
+    }]
 */
 import React from 'react';
 import Tab from './Tab';
@@ -139,9 +139,9 @@ class Tabs extends React.Component {
     } = this.state;
 
     if (prevProps.children && children) {
-      /**
-       * To recalculate the dimensions of tabs we are checking the children length.
-       * and also checking the tab id and their order.
+      /**
+       * To recalculate the dimensions of tabs we are checking the children length.
+       * and also checking the tab id and their order.
        */
       let newTabKeys = [];
       React.Children.toArray(children).forEach(child => {
@@ -314,14 +314,14 @@ class Tabs extends React.Component {
       });
 
       if (selectedTabDimension > totalDimension) {
-        /* let { align } = this.props;
-        let newDim = `${remConvert(totalDimension)}rem`;
-        let newTabs;
-        if (align === 'vertical') {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
-        } else {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
-        }
+        /* let { align } = this.props;
+        let newDim = `${remConvert(totalDimension)}rem`;
+        let newTabs;
+        if (align === 'vertical') {
+          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
+        } else {
+          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
+        }
         mainTabs = newTabs; */
         this.setMaxDim(totalDimension);
       }

package/es/Tab/Tabs.module.css

@@ -31,7 +31,7 @@
   bottom: 0 ;
   height: var(--zd_size10) ;
   border-radius: 100px / 5px;
-  box-shadow: var(--zd_bs_contrast_outline, 0 -2px 9px var(--zdt_tabs_alpha_box_shadow));
+  box-shadow: var(--zd_bs_tabs_shadow);
 }
 
 [dir=ltr] .alpha::after {
@@ -123,13 +123,13 @@
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1);
+  right: calc(var(--tab_position_gap) * -1); 
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1);
+  left: calc(var(--tab_position_gap) * -1); 
 }
 
 .hidden {

package/es/Tooltip/Tooltip.module.css

@@ -1,144 +1,141 @@
-.tooltiptext {
-  position: fixed;
-  z-index: 9999999;
-  /*Hook for editor alert*/
-  pointer-events: none;
-  /*css:validation:ignore*/
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}
-
-.tooltipcont {
-  color: var(--zdt_tooltip_default_text);
-  font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
-  word-break: break-word;
-  max-width: var(--zd_size420) ;
-  line-height: 1.5385;
-  min-height: var(--zd_size24) ;
-  overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10) ;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
-}
-
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-
-.tooltipNormalCont {
-  white-space: normal;
-}
-.tooltiparrow {
-  content: '';
-  position: absolute;
-  top: 0 ;
-  border-top-left-radius: 3px;
-}
-
-.arrowUp,
-.arrowDown {
-  /*  Variable:Ignore  */
-  width: 11px;
-  /*  Variable:Ignore  */
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-  /*css:validation:ignore*/
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  z-index: -1;
-}
-
-.arrowDown {
-  /*  Variable:Ignore  */
-  margin-top: -4px !important;
-  /* put important because of '.wms-mainui *' have margin: 0; */
-}
-
-.arrowLeft,
-.arrowRight {
-  /*  Variable:Ignore  */
-  width: 11px;
-  /*  Variable:Ignore  */
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-  /*css:validation:ignore*/
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  z-index: -1;
-}
-
-.arrowRight {
-  /*  Variable:Ignore  */
-  margin-left: -2px;
-}
-
-.arrowLeft {
-  /*  Variable:Ignore  */
-  margin-left: 1px;
-}
-
-.arrowUp {
-  transform: rotate(45deg);
-}
-
-.arrowDown {
-  transform: rotate(225deg);
-}
-
-.arrowLeft {
-  transform: rotate(315deg) translateY(-50%);
-}
-
-.arrowRight {
-  transform: rotate(135deg) translateY(50%);
-}
-@keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-ms-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+.tooltiptext {
+  position: fixed;
+  z-index: 9999999;
+  /*Hook for editor alert*/
+  pointer-events: none;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  border-radius: var(--zd_size4);
+}[dir=ltr] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}[dir=rtl] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+
+.tooltipcont {
+  color: var(--zdt_tooltip_default_text);
+  font-size: var(--zd_font_size13) ;
+  font-family: var(--zd_semibold);
+  word-break: break-word;
+  max-width: var(--zd_size420) ;
+  line-height: 1.5385;
+  min-height: var(--zd_size24) ;
+  overflow: hidden;
+  background-color: var(--zdt_tooltip_default_bg);
+  padding: 0 var(--zd_size10) ;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
+}
+
+.tooltipWrapCont {
+  white-space: pre-wrap;
+}
+
+.tooltipNormalCont {
+  white-space: normal;
+}
+.tooltiparrow {
+  content: '';
+  position: absolute;
+  top: 0 ;
+  border-top-left-radius: 3px;
+}
+
+.arrowUp,
+.arrowDown {
+  /*  Variable:Ignore  */
+  width: 11px;
+  /*  Variable:Ignore  */
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
+}
+
+.arrowDown {
+  /*  Variable:Ignore  */
+  margin-top: -4px !important;
+  /* put important because of '.wms-mainui *' have margin: 0; */
+}
+
+.arrowLeft,
+.arrowRight {
+  /*  Variable:Ignore  */
+  width: 11px;
+  /*  Variable:Ignore  */
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
+}
+
+.arrowRight {
+  /*  Variable:Ignore  */
+  margin-left: -2px;
+}
+
+.arrowLeft {
+  /*  Variable:Ignore  */
+  margin-left: 1px;
+}
+
+.arrowUp {
+  transform: rotate(45deg);
+}
+
+.arrowDown {
+  transform: rotate(225deg);
+}
+
+.arrowLeft {
+  transform: rotate(315deg) translateY(-50%);
+}
+
+.arrowRight {
+  transform: rotate(135deg) translateY(50%);
+}
+@keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-ms-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }

package/es/common/a11y.module.css

@@ -1,4 +1,4 @@
-:root {
-    --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
-    --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
+:root {
+    --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
 }