@zohodesk/components 1.0.0-temp-217.1 → 1.0.0-temp-218

package/es/CheckBox/CheckBox.js

@@ -92,7 +92,7 @@ export default class CheckBox extends React.Component {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      "data-selector-id": dataSelectorId || id,
+      dataSelectorId: dataSelectorId || id,
       ...CheckBoxProps
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`

package/es/Provider/LibraryContext.js

@@ -9,15 +9,13 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
-    a11y_onOffLabel,
     children
   } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction,
     coloredTagVariant,
-    hasTagColorInheritedToText,
-    a11y_onOffLabel
+    hasTagColorInheritedToText
   });
 
   function setGlobalContext(key, data) {

package/es/Switch/Switch.js

@@ -3,7 +3,6 @@ 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) {
@@ -19,7 +18,7 @@ export default class Switch extends React.Component {
     onChange && onChange(!checked, e);
   }
 
-  renderSwitch(context) {
+  render() {
     let {
       id,
       name,
@@ -49,8 +48,6 @@ export default class Switch extends React.Component {
       customLabel = ''
     } = customClass;
     size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-    const isOnOffLabelEnabled = context.a11y_onOffLabel;
-    const onOffLabelType = '';
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       isCover: false,
@@ -78,26 +75,9 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch} ${onOffLabelType === 'labelOnTrack' && isOnOffLabelEnabled ? style.labelOnTrack : ''}`,
+      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
       tabIndex: isReadOnly || disabled ? '-1' : '0'
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.thumb
-    }, isOnOffLabelEnabled && onOffLabelType === '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
-    }, onOffLabelType === 'labelOnTrack' && /*#__PURE__*/React.createElement("div", {
-      className: style.onOffIndicationText
-    }, checked ? 'ON' : 'OFF'), isOnOffLabelEnabled && onOffLabelType === 'track' && /*#__PURE__*/React.createElement("div", {
-      className: `${style.onOffIndication} ${checked ? style.onIndication : style.offIndication} ${style.thumbIndication}`
-    })))), isOnOffLabelEnabled && onOffLabelType === 'labelSide' && /*#__PURE__*/React.createElement(Box, {
-      className: `${style.labelText} ${size === "switch_medium" ? style.mediumLabelText : style.smallLabelText}`
-    }, checked ? 'On' : 'Off'), text && /*#__PURE__*/React.createElement(Label, {
+    })), text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       id: id,
@@ -109,10 +89,6 @@ 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);
 }
-.thumb {
+.label:after {
   content: '';
   display: block;
   position: absolute;
@@ -46,21 +46,14 @@
   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 .thumb {
-  right: var(--zd_size1) ;
-  left: auto ;
+
+.checked+.label:after {
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 .input {
@@ -72,15 +65,15 @@
   width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size12) ;
+  height: var(--zd_size9) ;
   width: var(--zd_size22) ;
-  bottom: var(--zd_size1) ;
+  top: calc( var(--zd_size2) * -1 ) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel .thumb{
-  width: var(--zd_size10) ;
-  height: var(--zd_size10) ;
-  top: var(--zd_size1) ;
+.switch_smallLabel:after {
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 
 .medium {
@@ -88,21 +81,15 @@
   width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size16) ;
+  height: var(--zd_size13) ;
   width: var(--zd_size31) ;
   top: var(--zd_size2) ;
   left: var(--zd_size2) ;
 }
-.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) ;
+.switch_mediumLabel:after {
+  width: var(--zd_size18) ;
+  height: var(--zd_size18) ;
+  top: calc( var(--zd_size3) * -1 ) ;
 }
 
 .input:disabled+.label {
@@ -138,102 +125,4 @@
 
 [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{
-   /* css:theme-validation:ignore */
-  border-color: #fff;
-}
-.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/index.js

@@ -29,7 +29,6 @@ export { default as RippleEffect } from './RippleEffect/RippleEffect';
 export * from './Select';
 export { default as Stencils } from './Stencils/Stencils';
 export { default as Switch } from './Switch/Switch';
-export { default as SwitchNew } from './SwitchNew/SwitchNew';
 export * from './Tab';
 export { default as Tag } from './Tag/Tag';
 export { default as Textarea } from './Textarea/Textarea';

package/lib/CheckBox/CheckBox.js

@@ -143,7 +143,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-hidden": ariaHidden,
-        "data-selector-id": dataSelectorId || id
+        dataSelectorId: dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {

package/lib/Provider/LibraryContext.js

@@ -44,15 +44,13 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       direction = _ref.direction,
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
-      a11y_onOffLabel = _ref.a11y_onOffLabel,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
     isReducedMotion: isReducedMotion,
     direction: direction,
     coloredTagVariant: coloredTagVariant,
-    hasTagColorInheritedToText: hasTagColorInheritedToText,
-    a11y_onOffLabel: a11y_onOffLabel
+    hasTagColorInheritedToText: hasTagColorInheritedToText
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],

package/lib/Switch/Switch.js

@@ -17,8 +17,6 @@ var _Layout = require("../Layout");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
-var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
-
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -69,8 +67,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
       onChange && onChange(!checked, e);
     }
   }, {
-    key: "renderSwitch",
-    value: function renderSwitch(context) {
+    key: "render",
+    value: function render() {
       var _this$props2 = this.props,
           id = _this$props2.id,
           name = _this$props2.name,
@@ -101,8 +99,6 @@ var Switch = /*#__PURE__*/function (_React$Component) {
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
       size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-      var isOnOffLabelEnabled = context.a11y_onOffLabel;
-      var onOffLabelType = '';
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         align: "vertical",
         isCover: false,
@@ -129,26 +125,9 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         htmlFor: id,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch, " ").concat(onOffLabelType === 'labelOnTrack' && isOnOffLabelEnabled ? _SwitchModule["default"].labelOnTrack : ''),
+        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
         tabIndex: isReadOnly || disabled ? '-1' : '0'
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SwitchModule["default"].thumb
-      }, isOnOffLabelEnabled && onOffLabelType === 'thumb' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SwitchModule["default"].onOffIndicationHolder
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SwitchModule["default"].onOffIndication, " ").concat(checked ? _SwitchModule["default"].onIndication : _SwitchModule["default"].offIndication)
-      }))), isOnOffLabelEnabled && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        align: "vertical",
-        alignBox: checked ? 'row' : 'row-reverse',
-        className: _SwitchModule["default"].onOffLabel,
-        isCover: false
-      }, onOffLabelType === 'labelOnTrack' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SwitchModule["default"].onOffIndicationText
-      }, checked ? 'ON' : 'OFF'), isOnOffLabelEnabled && onOffLabelType === 'track' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SwitchModule["default"].onOffIndication, " ").concat(checked ? _SwitchModule["default"].onIndication : _SwitchModule["default"].offIndication, " ").concat(_SwitchModule["default"].thumbIndication)
-      })))), isOnOffLabelEnabled && onOffLabelType === 'labelSide' && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_SwitchModule["default"].labelText, " ").concat(size === "switch_medium" ? _SwitchModule["default"].mediumLabelText : _SwitchModule["default"].smallLabelText)
-      }, checked ? 'On' : 'Off'), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+      })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,
         id: id,
@@ -158,15 +137,6 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         customClass: customLabel
       }, LabelProps)));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      return /*#__PURE__*/_react["default"].createElement(_LibraryContextInit["default"].Consumer, null, function (context) {
-        return _this2.renderSwitch(context);
-      });
-    }
   }]);
 
   return Switch;

package/lib/Switch/Switch.module.css

@@ -37,7 +37,7 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-.thumb {
+.label:after {
   content: '';
   display: block;
   position: absolute;
@@ -46,21 +46,14 @@
   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 .thumb {
-  right: var(--zd_size1) ;
-  left: auto ;
+
+.checked+.label:after {
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 .input {
@@ -72,15 +65,15 @@
   width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size12) ;
+  height: var(--zd_size9) ;
   width: var(--zd_size22) ;
-  bottom: var(--zd_size1) ;
+  top: calc( var(--zd_size2) * -1 ) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel .thumb{
-  width: var(--zd_size10) ;
-  height: var(--zd_size10) ;
-  top: var(--zd_size1) ;
+.switch_smallLabel:after {
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 
 .medium {
@@ -88,21 +81,15 @@
   width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size16) ;
+  height: var(--zd_size13) ;
   width: var(--zd_size31) ;
   top: var(--zd_size2) ;
   left: var(--zd_size2) ;
 }
-.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) ;
+.switch_mediumLabel:after {
+  width: var(--zd_size18) ;
+  height: var(--zd_size18) ;
+  top: calc( var(--zd_size3) * -1 ) ;
 }
 
 .input:disabled+.label {
@@ -138,102 +125,4 @@
 
 [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{
-   /* css:theme-validation:ignore */
-  border-color: #fff;
-}
-.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/lib/index.js

@@ -26,7 +26,6 @@ var _exportNames = {
   RippleEffect: true,
   Stencils: true,
   Switch: true,
-  SwitchNew: true,
   Tag: true,
   Textarea: true,
   TextBox: true,
@@ -145,12 +144,6 @@ Object.defineProperty(exports, "Switch", {
     return _Switch["default"];
   }
 });
-Object.defineProperty(exports, "SwitchNew", {
-  enumerable: true,
-  get: function get() {
-    return _SwitchNew["default"];
-  }
-});
 Object.defineProperty(exports, "Tag", {
   enumerable: true,
   get: function get() {
@@ -359,8 +352,6 @@ var _Stencils = _interopRequireDefault(require("./Stencils/Stencils"));
 
 var _Switch = _interopRequireDefault(require("./Switch/Switch"));
 
-var _SwitchNew = _interopRequireDefault(require("./SwitchNew/SwitchNew"));
-
 var _Tab = require("./Tab");
 
 Object.keys(_Tab).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-217.1",
+  "version": " 1.0.0-temp-218",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run download",
+    "prepublishOnly": "node prePublish.js && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",