@zohodesk/components 1.3.4 → 1.4.0

package/es/v1/Switch/css/Switch_v1.module.css

@@ -0,0 +1,133 @@
+.container {
+    --local-switch-cursor: pointer;
+    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel);
+    gap: var(--zd_size6) ;
+}
+.small {
+    --local-switch-track-width: var(--zd_size22);
+    --local-switch-track-height: var(--zd_size12);
+    --local-switch-track-border-radius: 8px;
+    --local-switch-thumb-size: var(--zd_size10);
+    --local-switch-onLabel-height: var(--zd_size6);
+    --local-switch-onLabel-left: var(--zd_size5);
+    --local-switch-offLabel-size: var(--zd_size7);
+    --local-switch-offLabel-right: var(--zd_size2);
+    --local-switch-onLabel-scaleX: 1.2;
+}
+.medium {
+    --local-switch-track-width: var(--zd_size28);
+    --local-switch-track-height: var(--zd_size16);
+    --local-switch-track-border-radius: 16px;
+    --local-switch-thumb-size: var(--zd_size14);
+    --local-switch-onLabel-height: var(--zd_size8);
+    --local-switch-onLabel-left: var(--zd_size6);
+    --local-switch-offLabel-size: var(--zd_size8);
+    --local-switch-offLabel-right: var(--zd_size3);
+    --local-switch-onLabel-scaleX: 1.4;
+}
+.large {
+    --local-switch-track-width: var(--zd_size34);
+    --local-switch-track-height: var(--zd_size20);
+    --local-switch-track-border-radius: 10px;
+    --local-switch-thumb-size: var(--zd_size18);
+    --local-switch-onLabel-height: var(--zd_size10);
+    --local-switch-onLabel-left: var(--zd_size7);
+    --local-switch-offLabel-size: var(--zd_size9);
+    --local-switch-offLabel-right: var(--zd_size4);
+    --local-switch-onLabel-scaleX: 1.6;
+}
+.xlarge {
+    --local-switch-track-width: var(--zd_size40);
+    --local-switch-track-height: var(--zd_size24);
+    --local-switch-track-border-radius: 12px;
+    --local-switch-thumb-size: var(--zd_size22);
+    --local-switch-onLabel-height: var(--zd_size12);
+    --local-switch-onLabel-left: var(--zd_size8);
+    --local-switch-offLabel-size: var(--zd_size10);
+    --local-switch-offLabel-right: var(--zd_size5);
+    --local-switch-onLabel-scaleX: 1.8;
+}
+.disabled, .readonly {
+    --local-switch-cursor: not-allowed;
+}
+.checked.enabled:hover {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_hover_bg);
+}
+.unChecked.enabled:hover {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_hover_bg);
+}
+.enabled:hover {
+    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
+}
+.trackWrapper {
+    position: relative;
+}
+.disabled > .trackWrapper {
+    opacity: 0.4;
+}
+.track {
+    appearance: none;
+    display: block;
+    position: relative;
+    height: var(--local-switch-track-height);
+    width: var(--local-switch-track-width);
+    margin: 0 ;
+    border-radius: var(--local-switch-track-border-radius);
+    background-color: var(--local-switch-track-background-color);
+    cursor: var(--local-switch-cursor);
+}
+.commonSvg {
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    top: 50% ;
+}
+.thumb {
+    transition: transform var(--zd_transition2) cubic-bezier(0.4, 0, 0.2, 1);
+    fill: var(--zdt_v1_switch_thumb_bg);   
+    height: var(--local-switch-thumb-size);
+    width: var(--local-switch-thumb-size);
+    transform: translateX(var(--local-switch-thumb-translateX)) translateY(-50%);
+}
+[dir=ltr] .thumb {
+    left: var(--zd_size1) ;
+}
+[dir=rtl] .thumb {
+    right: var(--zd_size1) ;
+}
+.label {
+    cursor: var(--local-switch-cursor);
+}
+.onLabel {
+    height: var(--local-switch-onLabel-height);
+    fill: var(--zdt_v1_switch_onLabel);
+    width: var(--zd_size1) ;
+    transform: translateY(-50%) scaleX(var(--local-switch-onLabel-scaleX));
+}
+[dir=ltr] .onLabel {
+    left: var(--local-switch-onLabel-left);
+}
+[dir=rtl] .onLabel {
+    right: var(--local-switch-onLabel-left);
+}
+.offLabel {
+    height: var(--local-switch-offLabel-size);
+    width: var(--local-switch-offLabel-size);
+    fill: transparent;
+    stroke: var(--local-switch-offLabel-stroke);
+    transform: translateY(-50%);
+}
+[dir=ltr] .offLabel {
+    right: var(--local-switch-offLabel-right);
+}
+[dir=rtl] .offLabel {
+    left: var(--local-switch-offLabel-right);
+}
+.checked {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_bg);
+    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px)
+}
+.unChecked {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_bg);
+    --local-switch-thumb-translateX: 0;
+}

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

@@ -0,0 +1,48 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  const {
+    size,
+    isChecked,
+    isDisabled,
+    isReadOnly
+  } = props;
+  let containerClass = compileClassNames({
+    [style.container]: true,
+    [style[size]]: !!style[size],
+    [style.checked]: isChecked,
+    [style.unChecked]: !isChecked,
+    [style.disabled]: isDisabled,
+    [style.enabled]: !isDisabled,
+    [style.readonly]: isReadOnly
+  });
+  let trackClass = compileClassNames({
+    [style.track]: true
+  });
+  let labelClass = compileClassNames({
+    [style.label]: true
+  });
+  let trackWrapperClass = compileClassNames({
+    [style.trackWrapper]: true
+  });
+  let thumbClass = compileClassNames({
+    [style.thumb]: true,
+    [style.commonSvg]: true
+  });
+  let labelIndicationClass = compileClassNames({
+    [style.onLabel]: isChecked,
+    [style.offLabel]: !isChecked,
+    [style.commonSvg]: true
+  });
+  return {
+    containerClass,
+    trackClass,
+    labelClass,
+    trackWrapperClass,
+    thumbClass,
+    labelIndicationClass
+  };
+}

package/es/v1/Switch/props/defaultProps.js

@@ -1,11 +1,14 @@
-export const defaultProps = {
-  checked: false,
-  disabled: false,
-  labelPalette: 'primary',
-  labelSize: 'medium',
+export default {
   size: 'medium',
+  isDefaultChecked: false,
+  isDisabled: false,
   isReadOnly: false,
-  customClass: {},
+  hasStateIndication: true,
+  labelPlacement: 'start',
+  labelSize: 'medium',
   customProps: {},
-  dataSelectorId: 'switch'
+  tagAttributes: {},
+  a11yAttributes: {},
+  i18nKeys: {},
+  customStyle: {}
 };

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

@@ -1,28 +1,36 @@
 import PropTypes from 'prop-types';
-export const propTypes = {
-  checked: PropTypes.bool,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  disableTitle: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-  isReadOnly: PropTypes.bool,
-  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
-  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+export default {
   name: PropTypes.string,
+  value: PropTypes.string,
+  id: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+  isChecked: PropTypes.bool,
+  isDefaultChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
   onChange: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium']),
-  text: PropTypes.string,
+  hasStateIndication: PropTypes.bool,
+  label: PropTypes.string,
+  labelPlacement: PropTypes.oneOf(['start', 'end', 'top', 'bottom']),
+  labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   title: PropTypes.string,
-  value: PropTypes.bool,
-  customClass: PropTypes.shape({
-    customSwitchWrap: PropTypes.string,
-    customSwitch: PropTypes.string,
-    customSwitchSize: PropTypes.string,
-    customLabel: PropTypes.string
-  }),
   customProps: PropTypes.shape({
-    SwitchProps: PropTypes.object,
-    LabelProps: PropTypes.object
-  })
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    switch: PropTypes.object
+  }),
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    switch: PropTypes.object,
+    label: PropTypes.object
+  }),
+  i18nKeys: PropTypes.shape({
+    readOnlyAriaLabel: PropTypes.string
+  }),
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customStyle: PropTypes.object
 };

package/es/v1/Switch/useSwitch.js

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+const useSwitch = props => {
+  const {
+    isChecked: isCheckedProp,
+    isDefaultChecked,
+    onChange,
+    isReadOnly,
+    isDisabled
+  } = props;
+  const isControlled = isCheckedProp !== undefined;
+  const [internalChecked, setInternalChecked] = useState(isDefaultChecked);
+  const isChecked = isControlled ? isCheckedProp : internalChecked;
+
+  const handleChange = e => {
+    if (isReadOnly || isDisabled) return;
+
+    if (!isControlled) {
+      setInternalChecked(!isChecked);
+    }
+
+    onChange?.({
+      isChecked: !isChecked
+    }, e);
+  };
+
+  return {
+    isChecked,
+    handleChange
+  };
+};
+
+export default useSwitch;

package/lib/AppContainer/AppContainer.js

@@ -148,14 +148,15 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
 
       if (this.containerElement && needTooltip) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-        this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+        this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.unObserveElement();
-        (0, _Config.setLibraryConfig)({
-          getTooltipContainer: function getTooltipContainer() {
-            return null;
-          }
-        });
       }
+
+      (0, _Config.setLibraryConfig)({
+        getTooltipContainer: function getTooltipContainer() {
+          return null;
+        }
+      });
     }
   }, {
     key: "render",

package/lib/Provider/LibraryContext.js

@@ -44,13 +44,15 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       direction = _ref.direction,
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
+      shouldIndicateSwitchState = _ref.shouldIndicateSwitchState,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
     isReducedMotion: isReducedMotion,
     direction: direction,
     coloredTagVariant: coloredTagVariant,
-    hasTagColorInheritedToText: hasTagColorInheritedToText
+    hasTagColorInheritedToText: hasTagColorInheritedToText,
+    shouldIndicateSwitchState: shouldIndicateSwitchState
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -74,13 +76,15 @@ LibraryContextProvider.propTypes = {
   isReducedMotion: _propTypes["default"].bool,
   coloredTagVariant: _propTypes["default"].oneOf(['bold', 'subtle', 'minimal']),
   hasTagColorInheritedToText: _propTypes["default"].bool,
-  direction: _propTypes["default"].string
+  direction: _propTypes["default"].string,
+  shouldIndicateSwitchState: _propTypes["default"].bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: (0, _Config.getLibraryConfig)('isReducedMotion'),
   direction: (0, _Config.getLibraryConfig)('direction'),
   coloredTagVariant: 'bold',
-  hasTagColorInheritedToText: true
+  hasTagColorInheritedToText: true,
+  shouldIndicateSwitchState: false
 };
 var _default = LibraryContextProvider;
 exports["default"] = _default;

package/lib/deprecated/Switch/Switch.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _Layout = require("../../v1/Layout");
+
+var _Label = _interopRequireDefault(require("../../v1/Label/Label"));
+
+var _SwitchModule = _interopRequireDefault(require("../../Switch/Switch.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var Switch = function Switch(props) {
+  var id = props.id,
+      name = props.name,
+      value = props.value,
+      checked = props.checked,
+      disabled = props.disabled,
+      isReadOnly = props.isReadOnly,
+      size = props.size,
+      text = props.text,
+      labelSize = props.labelSize,
+      labelPalette = props.labelPalette,
+      title = props.title,
+      disableTitle = props.disableTitle,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      customClass = props.customClass,
+      customProps = props.customProps;
+
+  function onChange(e) {
+    var onChange = props.onChange;
+    onChange && onChange(!checked, e);
+  }
+
+  var _customProps$SwitchPr = customProps.SwitchProps,
+      SwitchProps = _customProps$SwitchPr === void 0 ? {} : _customProps$SwitchPr,
+      _customProps$LabelPro = customProps.LabelProps,
+      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
+  var _customClass$customSw = customClass.customSwitchWrap,
+      customSwitchWrap = _customClass$customSw === void 0 ? '' : _customClass$customSw,
+      _customClass$customSw2 = customClass.customSwitch,
+      customSwitch = _customClass$customSw2 === void 0 ? '' : _customClass$customSw2,
+      _customClass$customSw3 = customClass.customSwitchSize,
+      customSwitchSize = _customClass$customSw3 === void 0 ? '' : _customClass$customSw3,
+      _customClass$customLa = customClass.customLabel,
+      customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
+  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+    align: "vertical",
+    isCover: false,
+    alignBox: "row",
+    isInline: true,
+    className: "".concat(_SwitchModule["default"].container, " ").concat(customSwitchWrap, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect),
+    "data-title": disabled ? disableTitle : title,
+    "aria-checked": checked,
+    role: "switch",
+    dataSelectorId: dataSelectorId
+  }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "checkbox",
+    id: id,
+    className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+    name: name,
+    value: value,
+    checked: checked,
+    disabled: disabled,
+    readOnly: isReadOnly,
+    onClick: !disabled || !isReadOnly ? onChange : null
+  }), /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: id,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+    tabIndex: isReadOnly || disabled ? '-1' : '0'
+  })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+    text: text,
+    palette: labelPalette,
+    id: id,
+    size: labelSize,
+    type: "subtitle",
+    onClick: !disabled || !isReadOnly ? onChange : null,
+    customClass: customLabel
+  }, LabelProps)));
+};
+
+Switch.defaultProps = _defaultProps.defaultProps;
+Switch.propTypes = _propTypes.propTypes;
+var _default = Switch; // if (__DOCS__) {
+//   Switch.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
+
+exports["default"] = _default;

package/lib/deprecated/Switch/props/defaultProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  checked: false,
+  disabled: false,
+  labelPalette: 'primary',
+  labelSize: 'medium',
+  size: 'medium',
+  isReadOnly: false,
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'switch'
+};
+exports.defaultProps = defaultProps;

package/lib/deprecated/Switch/props/propTypes.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  checked: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  id: _propTypes["default"].string.isRequired,
+  isReadOnly: _propTypes["default"].bool,
+  labelPalette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  name: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  size: _propTypes["default"].oneOf(['small', 'medium']),
+  text: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  value: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    customSwitchWrap: _propTypes["default"].string,
+    customSwitch: _propTypes["default"].string,
+    customSwitchSize: _propTypes["default"].string,
+    customLabel: _propTypes["default"].string
+  }),
+  customProps: _propTypes["default"].shape({
+    SwitchProps: _propTypes["default"].object,
+    LabelProps: _propTypes["default"].object
+  })
+};
+exports.propTypes = propTypes;