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

package/es/Select/__tests__/Select.spec.js

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

package/es/Select/__tests__/SelectWithAvatar.spec.js

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

package/es/Select/__tests__/SelectWithIcon.spec.js

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

package/es/Select/index.js

@@ -1,4 +1,4 @@
-export { default as Select } from "./Select";
-export { default as GroupSelect } from "./GroupSelect";
-export { default as SelectWithAvatar } from "./SelectWithAvatar";
-export { default as SelectWithIcon } from "./SelectWithIcon";
+export { default as Select } from './Select';
+export { default as GroupSelect } from './GroupSelect';
+export { default as SelectWithAvatar } from './SelectWithAvatar';
+export { default as SelectWithIcon } from './SelectWithIcon';

package/es/Select/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from "../../Provider/Config";
+import { getLibraryConfig } from '../../Provider/Config';
 export const Select_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: getLibraryConfig('autoComplete'),

package/es/Stencils/Stencils.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
-import style from "./Stencils.module.css";
+import style from './Stencils.module.css';
 export default class Stencils extends React.PureComponent {
   render() {
     let {

package/es/Stencils/__tests__/Stencils.spec.js

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

package/es/Switch/Switch.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Label from "../Label/Label";
-import style from "./Switch.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Label from '../Label/Label';
+import LibraryContext from '../Provider/LibraryContextInit';
+import style from './Switch.module.css';
 export default class Switch extends React.Component {
   constructor(props) {
     super(props);
@@ -18,7 +19,7 @@ export default class Switch extends React.Component {
     onChange && onChange(!checked, e);
   }
 
-  render() {
+  renderSwitch(context) {
     let {
       id,
       name,
@@ -35,6 +36,7 @@ export default class Switch extends React.Component {
       dataId,
       dataSelectorId,
       customClass,
+      viewType,
       customProps
     } = this.props;
     let {
@@ -48,6 +50,7 @@ export default class Switch extends React.Component {
       customLabel = ''
     } = customClass;
     size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
+    const isOnOffLabelEnabled = context.a11y_onOffLabel;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       isCover: false,
@@ -75,9 +78,26 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+      className: `${style.label} ${style[`${size}Label`]} ${customSwitch} ${viewType === 'labelOnTrack' && isOnOffLabelEnabled ? style.labelOnTrack : ''}`,
       tabIndex: isReadOnly || disabled ? '-1' : '0'
-    })), text && /*#__PURE__*/React.createElement(Label, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.thumb
+    }, isOnOffLabelEnabled && viewType === 'thumb' && /*#__PURE__*/React.createElement("div", {
+      className: style.onOffIndicationHolder
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.onOffIndication} ${checked ? style.onIndication : style.offIndication}`
+    }))), isOnOffLabelEnabled && /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: checked ? 'row' : 'row-reverse',
+      className: style.onOffLabel,
+      isCover: false
+    }, viewType === 'labelOnTrack' && /*#__PURE__*/React.createElement("div", {
+      className: style.onOffIndicationText
+    }, checked ? 'ON' : 'OFF'), isOnOffLabelEnabled && viewType === 'track' && /*#__PURE__*/React.createElement("div", {
+      className: `${style.onOffIndication} ${checked ? style.onIndication : style.offIndication} ${style.thumbIndication}`
+    })))), isOnOffLabelEnabled && viewType === 'labelSide' && /*#__PURE__*/React.createElement(Box, {
+      className: `${style.labelText} ${size === "switch_medium" ? style.mediumLabelText : style.smallLabelText}`
+    }, checked ? 'On' : 'Off'), text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       id: id,
@@ -89,6 +109,10 @@ export default class Switch extends React.Component {
     }));
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(LibraryContext.Consumer, null, context => this.renderSwitch(context));
+  }
+
 }
 Switch.defaultProps = defaultProps;
 Switch.propTypes = propTypes; // if (__DOCS__) {

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 {