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

package/es/v1/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from "./TabWrapper";
-export { default as TabContentWrapper } from "./TabContentWrapper";
-export { default as TabContent } from "./TabContent";
-export { default as Tabs } from "./Tabs";
-export { default as Tab } from "./Tab";
+export { default as TabWrapper } from './TabWrapper';
+export { default as TabContentWrapper } from './TabContentWrapper';
+export { default as TabContent } from './TabContent';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

package/es/v1/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Avatar from "../Avatar/Avatar";
-import { Container } from "../Layout";
-import Button from "../semantic/Button/Button";
-import { useUniqueId } from "../../Provider/IdProvider";
-import style from "../../Tag/Tag.module.css";
+import Avatar from '../Avatar/Avatar';
+import { Container } from '../Layout';
+import Button from '../semantic/Button/Button';
+import { useUniqueId } from '../../Provider/IdProvider';
+import style from '../../Tag/Tag.module.css';
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/v1/TextBox/TextBox.js

@@ -1,7 +1,7 @@
 import React, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../TextBox/TextBox.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../TextBox/TextBox.module.css';
 
 function TextBox(props) {
   let {

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import TextBox from "../TextBox/TextBox";
-import { Container, Box } from "../Layout";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import btnStyle from "../../semantic/Button/semanticButton.module.css";
-import style from "../../TextBoxIcon/TextBoxIcon.module.css";
+import btnStyle from '../../semantic/Button/semanticButton.module.css';
+import style from '../../TextBoxIcon/TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */
 
 export default function TextBoxIcon(props) {

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/v1/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Textarea/Textarea.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Textarea/Textarea.module.css';
 export default function Textarea(props) {
   let {
     size,

package/es/v1/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../../Provider/Config";
-import ResizeObserver from "../../Responsive/ResizeObserver";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getLibraryConfig } from '../../Provider/Config';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import selectn from 'selectn';
-import { whiteSpaceClassMapping } from "../../utils/cssUtils";
-import style from "../../Tooltip/Tooltip.module.css";
+import { whiteSpaceClassMapping } from '../../utils/cssUtils';
+import style from '../../Tooltip/Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

package/es/v1/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from "./css/v1_Typography.module.css";
+import defaultStyle from './css/v1_Typography.module.css';
 
 const Typography = props => {
   const {

package/es/v1/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from "../utils";
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 export default function VelocityAnimation(props) {
   let {
     children,

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/v1/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../../semantic/Button/semanticButton.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../../semantic/Button/semanticButton.module.css';
 export default function Button(props) {
   const {
     value,

package/es/v1/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from "./Button/Button";
+export { default as SemanticButton } from './Button/Button';

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.2",
+  "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",