@zohodesk/components 1.0.0-temp-199.1 → 1.0.0-temp-211

package/es/Switch/Switch.module.css

@@ -37,7 +37,7 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-.label:after {
+.thumb {
   content: '';
   display: block;
   position: absolute;
@@ -46,14 +46,21 @@
   box-shadow: var(--switch_cricle_box_shadow);
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
+  left: var(--zd_size1) ;
+}
+.onOffIndicationHolder{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100% ;
 }
 
 .checked+.label {
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
-
-.checked+.label:after {
-  right: calc( var(--zd_size1) * -1 ) ;
+.checked+label .thumb {
+  right: var(--zd_size1) ;
+  left: auto ;
 }
 
 .input {
@@ -65,15 +72,15 @@
   width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size9) ;
+  height: var(--zd_size12) ;
   width: var(--zd_size22) ;
-  top: calc( var(--zd_size2) * -1 ) ;
+  bottom: var(--zd_size1) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel:after {
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: calc( var(--zd_size2) * -1 ) ;
+.switch_smallLabel .thumb{
+  width: var(--zd_size10) ;
+  height: var(--zd_size10) ;
+  top: var(--zd_size1) ;
 }
 
 .medium {
@@ -81,15 +88,21 @@
   width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size13) ;
+  height: var(--zd_size16) ;
   width: var(--zd_size31) ;
   top: var(--zd_size2) ;
   left: var(--zd_size2) ;
 }
-.switch_mediumLabel:after {
-  width: var(--zd_size18) ;
-  height: var(--zd_size18) ;
-  top: calc( var(--zd_size3) * -1 ) ;
+.switch_smallLabel.labelOnTrack{
+  width: var(--zd_size32) ;
+}
+.switch_mediumLabel.labelOnTrack{
+  width: var(--zd_size42) ;
+}
+.switch_mediumLabel .thumb{
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: var(--zd_size2) ;
 }
 
 .input:disabled+.label {
@@ -125,4 +138,101 @@
 
 [dir=rtl] .switch+label {
   margin-right: var(--zd_size12) ;
+}
+.onOffLabel{
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.onOffIndication{    
+  /* css:theme-validation:ignore */
+  border: 0.5px solid;
+}
+.offIndication{
+ /* css:theme-validation:ignore */
+ border-color: #868585;
+ border-radius: 50%;
+}
+.onIndication{
+  /* css:theme-validation:ignore */
+  border-color: var(--switch_on_bg_color);
+  border-radius: 5px;
+}
+.thumbIndication.onIndication{
+  border-color: var(--zdt_switch_circle_bg);
+}
+.switch_small .thumbIndication.onOffLabel{
+  top: calc( var(--zd_size10) * -1 ) ;
+}
+[dir=ltr] .switch_small .thumbIndication.onOffLabel{
+  right: var(--zd_size3) ;
+}
+[dir=rtl] .switch_small .thumbIndication.onOffLabel{
+  left: var(--zd_size3) ;
+}
+.switch_small .offIndication{
+  width: var(--zd_size5) ;
+  height: var(--zd_size5) ;
+}
+.switch_small .thumbIndication.offIndication{
+    margin: 0 var(--zd_size3) ;
+}
+.switch_small .onIndication{
+  width: var(--zd_size1) ;
+  height: var(--zd_size5) ;
+}
+.switch_small .thumbIndication.onIndication{
+  margin: 0 var(--zd_size5) ;
+}
+.switch_medium .thumbIndication.onOffLabel{
+  top: calc( var(--zd_size10) * -1 ) ;
+}
+[dir=ltr] .switch_medium .thumbIndication.onOffLabel{
+  right: var(--zd_size3) ;
+}
+[dir=rtl] .switch_medium .thumbIndication.onOffLabel{
+  left: var(--zd_size3) ;
+}
+.switch_medium .offIndication{
+  width: var(--zd_size7) ;
+  height: var(--zd_size7) ;
+}
+.switch_medium .thumbIndication.offIndication{
+  margin: 0 var(--zd_size5) ;
+}
+.switch_medium .onIndication{
+  width: var(--zd_size1) ;
+  height: var(--zd_size7) ;
+}
+.switch_medium .thumbIndication.onIndication{
+  margin: 0 var(--zd_size7) ;
+}
+.onOffIndicationText{
+    /* css:theme-validation:ignore */
+  color: #fff;
+}
+.switch_small .onOffIndicationText{
+  font-size: var(--zd_font_size7) ;
+  margin: 0 var(--zd_size4) ;
+}
+.switch_medium .onOffIndicationText{
+  font-size: var(--zd_font_size10) ;
+  margin: 0 var(--zd_size6) ;
+}
+.labelText{
+    /* css:theme-validation:ignore */
+  color: #000;
+}
+.smallLabelText{
+  font-size: var(--zd_font_size11) ;
+  margin: var(--zd_size1) 0 0 ;
+}
+.mediumLabelText{
+  font-size: var(--zd_font_size12) ;
+}
+[dir=ltr] .mediumLabelText{
+  margin : var(--zd_size1) 0 0 var(--zd_size2) ;
+}
+[dir=rtl] .mediumLabelText{
+  margin  : var(--zd_size1) var(--zd_size2) 0 0 ;
 }

package/es/Switch/__tests__/Switch.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Switch from "../Switch";
+import Switch from '../Switch';
 describe('Switch', () => {
   test('rendering the defult props', () => {
     const {

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

@@ -23,10 +23,14 @@ exports[`Switch rendering the CustomClass 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel SwtichCustomSwitch"
+        class="label switch_mediumLabel SwtichCustomSwitch "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium primary font_default
@@ -66,10 +70,14 @@ exports[`Switch rendering the CustomProps 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium primary font_default
@@ -109,10 +117,14 @@ exports[`Switch rendering the ID 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium primary font_default
@@ -152,10 +164,14 @@ exports[`Switch rendering the Name 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -185,10 +201,14 @@ exports[`Switch rendering the Title 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -217,10 +237,14 @@ exports[`Switch rendering the Value 1`] = `
         value="true"
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -250,10 +274,14 @@ exports[`Switch rendering the checked 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -282,12 +310,16 @@ exports[`Switch rendering the dataId 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         data-id="data-Switch"
         data-test-id="data-Switch"
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -315,9 +347,13 @@ exports[`Switch rendering the defult props 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -348,10 +384,14 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="-1"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -380,9 +420,13 @@ exports[`Switch rendering the isReadOnly 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         tabindex="-1"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -411,10 +455,14 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium danger font_default
@@ -453,10 +501,14 @@ exports[`Switch rendering the labelSize of- default 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium default font_default
@@ -495,10 +547,14 @@ exports[`Switch rendering the labelSize of- large 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle large primary font_default
@@ -537,10 +593,14 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium mandatory font_default
@@ -579,10 +639,14 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium primary font_default
@@ -621,10 +685,14 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium primary font_default
@@ -663,10 +731,14 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium secondary font_default
@@ -705,10 +777,14 @@ exports[`Switch rendering the labelSize of- small 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle small primary font_default
@@ -747,10 +823,14 @@ exports[`Switch rendering the size of- medium 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -779,10 +859,14 @@ exports[`Switch rendering the size of- small 1`] = `
         value=""
       />
       <label
-        class="label switch_smallLabel "
+        class="label switch_smallLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>
@@ -811,10 +895,14 @@ exports[`Switch rendering the text 1`] = `
         value=""
       />
       <label
-        class="label switch_mediumLabel "
+        class="label switch_mediumLabel  "
         for="SwitchID"
         tabindex="0"
-      />
+      >
+        <div
+          class="thumb"
+        />
+      </label>
     </div>
     <label
       class="label subtitle medium primary font_default

package/es/Tab/Tab.js

@@ -2,11 +2,11 @@
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
 import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from "./props/defaultProps";
-import { Tab_propTypes } from "./props/propTypes";
-import { Box, Container } from "../Layout";
-import { cs } from "../utils/Common";
-import styles from "./Tab.module.css";
+import { Tab_defaultProps } from './props/defaultProps';
+import { Tab_propTypes } from './props/propTypes';
+import { Box, Container } from '../Layout';
+import { cs } from '../utils/Common';
+import styles from './Tab.module.css';
 const tabTypes = {
   alpha: {
     active: 'alphaActive',

package/es/Tab/TabContent.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TabContent_defaultProps } from "./props/defaultProps";
-import { TabContent_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-import style from "./TabContent.module.css";
+import { TabContent_defaultProps } from './props/defaultProps';
+import { TabContent_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
+import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
 const TabContent = _ref => {

package/es/Tab/TabContentWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TabContentWrapper_defaultProps } from "./props/defaultProps";
-import { TabContentWrapper_propTypes } from "./props/propTypes";
-import { Box } from "../Layout";
+import { TabContentWrapper_defaultProps } from './props/defaultProps';
+import { TabContentWrapper_propTypes } from './props/propTypes';
+import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
 const TabContentWrapper = _ref => {

package/es/Tab/TabWrapper.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from "./props/defaultProps";
-import { TabWrapper_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
+import { TabWrapper_defaultProps } from './props/defaultProps';
+import { TabWrapper_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
 
 function TabWrapper(_ref) {
   let {

package/es/Tab/Tabs.js

@@ -9,20 +9,20 @@
 */
 import React from 'react';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import Tab from "./Tab";
-import { Tabs_defaultProps } from "./props/defaultProps";
-import { Tabs_propTypes } from "./props/propTypes";
-import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from "../utils/Common";
-import { Box, Container } from "../Layout";
-import ResizeObserver from "../Responsive/ResizeObserver";
-import ListItem from "../ListItem/ListItem";
+import Tab from './Tab';
+import { Tabs_defaultProps } from './props/defaultProps';
+import { Tabs_propTypes } from './props/propTypes';
+import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from '../utils/Common';
+import { Box, Container } from '../Layout';
+import ResizeObserver from '../Responsive/ResizeObserver';
+import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from "./Tabs.module.css";
-import Popup from "../Popup/Popup";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
-import btnstyle from "../semantic/Button/semanticButton.module.css";
+import tabsStyle from './Tabs.module.css';
+import Popup from '../Popup/Popup';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import btnstyle from '../semantic/Button/semanticButton.module.css';
 
 class Tabs extends React.Component {
   constructor(props) {

package/es/Tab/__tests__/Tab.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Tab from "../Tab";
+import Tab from '../Tab';
 describe('Tab', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/__tests__/TabContent.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import TabContent from "../TabContent";
+import TabContent from '../TabContent';
 describe('TabContent', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/__tests__/TabContentWrapper.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import TabContentWrapper from "../TabContentWrapper";
+import TabContentWrapper from '../TabContentWrapper';
 describe('TabContentWrapper', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/__tests__/TabWrapper.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import TabWrapper from "../TabWrapper";
+import TabWrapper from '../TabWrapper';
 describe('TabWrapper', () => {
   test('rendering the defult props', () => {
     const {