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

package/es/SwitchNew/SwitchNew.js

@@ -1,118 +0,0 @@
-import React, { useContext } from 'react';
-import { Container, Box } from "../Layout";
-import Label from "../Label/Label";
-import style from "./SwitchNew.module.css";
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import LibraryContext from "../Provider/LibraryContextInit";
-
-const SwitchNew = props => {
-  const {
-    id,
-    title,
-    name,
-    value,
-    checked,
-    disabled,
-    isReadOnly,
-    size,
-    text,
-    disableTitle,
-    dataId,
-    dataSelectorId,
-    onChange,
-    customProps,
-    customClass,
-    labelSize,
-    labelPlacement,
-    a11y
-  } = props;
-
-  const handleChange = e => {
-    if (!disabled && !isReadOnly && onChange) {
-      onChange(!checked, e);
-    }
-  };
-
-  const {
-    SwitchProps = {},
-    LabelProps = {}
-  } = customProps || {};
-  const {
-    WrapperProps = {},
-    TrackProps = {}
-  } = SwitchProps;
-  const {
-    customSwitchWrap = '',
-    customSwitch = '',
-    customLabel = ''
-  } = customClass || {};
-  const {
-    role = 'switch',
-    ...a11yAttributes
-  } = a11y || {};
-  const context = useContext(LibraryContext);
-  const {
-    a11y_onOffLabel = true
-  } = context;
-  return /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    isCover: false,
-    isInline: true,
-    alignBox: labelPlacement == 'right' ? 'row' : 'row-reverse',
-    "data-title": disabled ? disableTitle : title,
-    dataSelectorId: dataSelectorId,
-    className: customSwitchWrap ? customSwitchWrap : '',
-    ...WrapperProps
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.switchWrapper} ${style[`${size}_switch`]} ${!disabled && !isReadOnly ? style.effect : ''} ${disabled ? style.disabled : ''}`
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: id,
-    name: name,
-    value: value,
-    checked: checked,
-    disabled: disabled,
-    readOnly: isReadOnly,
-    onChange: handleChange,
-    role: role,
-    "aria-checked": checked,
-    tabIndex: disabled ? -1 : 0,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    className: `${style.track} ${customSwitch} ${a11y_onOffLabel ? checked ? style.onLabel : style.offLabel : ''}`,
-    ...a11yAttributes,
-    ...TrackProps
-  }), /*#__PURE__*/React.createElement("span", {
-    className: style.thumb
-  }), a11y_onOffLabel ? /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: `0 0 ${checked ? '2' : 'var(--switch-off-label-size)'} ${checked ? 'var(--switch-on-label-height)' : 'var(--switch-off-label-size)'}`,
-    className: `${checked ? style[`${size}OnLabelWrapper`] : style[`${size}OffLabelWrapper`]} ${style.labelWrapper}`
-  }, checked ? /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    rx: "0.8",
-    ry: "0.8",
-    width: "100%",
-    height: "100%",
-    className: style.onLabel
-  }) : /*#__PURE__*/React.createElement("circle", {
-    className: style.offLabel,
-    cx: "50%",
-    cy: "50%",
-    width: "100%",
-    height: "100%",
-    fill: "none"
-  })) : null), text && /*#__PURE__*/React.createElement(Label, {
-    customClass: ` ${style[`switchLabel_${labelPlacement}`]}  ${customLabel ? customLabel : ''}`,
-    htmlFor: id,
-    size: labelSize,
-    type: "subtitle",
-    text: text,
-    ...LabelProps
-  }));
-};
-
-export default SwitchNew;
-SwitchNew.defaultProps = defaultProps;
-SwitchNew.propTypes = propTypes;

package/es/SwitchNew/SwitchNew.module.css

@@ -1,229 +0,0 @@
-.switchWrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-.switchWrapper *, .switchWrapper:hover * {
-  cursor: pointer;
-}
-.disabled {
-  opacity: 0.4;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-.track {
-  width: var(--switch-track-width);
-  height: var(--switch-track-height);
-  appearance: none;
-  /* css:theme-validation:ignore */
-  transition: background-color 0.3s ease-in-out;
-  border-radius: 10px;
-  background-color: var(--dot_paleBlue);
-  margin: 0 ;
-}
-.thumb {
-  width: var(--switch-thumb-size);
-  height: var(--switch-thumb-size);
-  /* css:theme-validation:ignore */ 
-  position: absolute;
-  pointer-events: none;
-  z-index: 1;
-  top: var(--zd_size2) ;
-  bottom: var(--zd_size2) ;
-  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
-  border-radius: 50%;
-  background-color: var(--dot_white);
-}
-[dir=ltr] .thumb {
-  left: var(--zd_size2) ;
-}
-[dir=rtl] .thumb {
-  right: var(--zd_size2) ;
-}
-.track:checked {
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_strongGreen); 
-}
-[dir=ltr] .track:checked + .thumb {
-  transform: translateX(calc(var(--switch-track-width) - var(--switch-thumb-size) - 4px));
-}
-[dir=rtl] .track:checked + .thumb {
-  transform: translateX(calc(-1*(var(--switch-track-width) - var(--switch-thumb-size) - 4px)));
-}
-.switchWrapper:hover .track {
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_paleNavy); 
-}
-.switchWrapper:hover .track:checked {
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_camarone);
-}
-.effect:hover .offLabelWrapper > .offLabel {
-  stroke: var(--dot_black);
-}
-.small_switch {
-  --switch-track-width: var(--zd_size22);
-  --switch-track-height: var(--zd_size12);
-  --switch-thumb-size: var(--zd_size8);
-  /* --switch-off-label-size: 7px;
-  --switch-off-label-radius: 2.5px;
-  --switch-off-label-top: 2.5px;
-  --switch-off-label-right: 3px;
-  --switch-off-label-stroke: 1px;
-  --switch-on-label-width: 1.2px;
-  --switch-on-label-height: 6px;
-  --switch-on-label-top: 3px;
-  --switch-on-label-left: 5px; */
-}
-
-.medium_switch {
-  --switch-track-width: var(--zd_size28);
-  --switch-track-height: var(--zd_size16);
-  --switch-thumb-size: var(--zd_size12);
-  /* --switch-off-label-size: 8px;
-  --switch-off-label-radius: 3px;
-  --switch-off-label-top: 4px;
-  --switch-off-label-right: 3.5px;
-  --switch-off-label-stroke: 1.1px;
-  --switch-on-label-width: 1.4px;
-  --switch-on-label-height: 8px;
-  --switch-on-label-top: 4px;
-  --switch-on-label-left: 6px; */
-}
-
-.large_switch {
-  --switch-track-width: var(--zd_size34);
-  --switch-track-height: var(--zd_size20);
-  --switch-thumb-size: var(--zd_size16);
-  /* --switch-off-label-size: 9px;
-  --switch-off-label-radius: 3.5px;
-  --switch-off-label-top: 5.5px;
-  --switch-off-label-right: 4px;
-  --switch-off-label-stroke: 1.2px;
-  --switch-on-label-width: 1.6px;
-  --switch-on-label-height: 11px;
-  --switch-on-label-top: 4.5px;
-  --switch-on-label-left: 7px; */
-}
-[dir=ltr] .switchLabel_right {
-  margin-right: var(--zd_size12) ;
-}
-[dir=rtl] .switchLabel_right {
-  margin-left: var(--zd_size12) ;
-}
-[dir=ltr] .switchLabel_left {
-  margin-left: var(--zd_size12) ;
-}
-[dir=rtl] .switchLabel_left {
-  margin-right: var(--zd_size12) ;
-}
-/* .offLabelWrapper,
-.onLabelWrapper {
-  position: absolute;
-  pointer-events: none;
-}
-.offLabelWrapper {
-  width: var(--switch-off-label-size);
-  height: var(--switch-off-label-size);
-  top: var(--switch-off-label-top);
-  right: var(--switch-off-label-right);
-}
-.onLabelWrapper {
-  width: var(--switch-on-label-width);
-  height: var(--switch-on-label-height);
-  top: var(--switch-on-label-top);
-  left: var(--switch-on-label-left);
-} */
-.labelWrapper {
-  position: absolute;
-  pointer-events: none;
-}
-.smallOnLabelWrapper {
-  width: 1.2px;
-  height: var(--zd_size6) ;
-  top: var(--zd_size3) ;
-}
-[dir=ltr] .smallOnLabelWrapper {
-  left: var(--zd_size5) ;
-}
-[dir=rtl] .smallOnLabelWrapper {
-  right: var(--zd_size5) ;
-}
-.mediumOnLabelWrapper {
-  width: 1.4px;
-  height: var(--zd_size8) ;
-  top: var(--zd_size4) ;
-}
-[dir=ltr] .mediumOnLabelWrapper {
-  left: var(--zd_size6) ;
-}
-[dir=rtl] .mediumOnLabelWrapper {
-  right: var(--zd_size6) ;
-}
-.largeOnLabelWrapper {
-  width: 1.6px;
-  height: var(--zd_size11) ;
-  top: 4.5px;
-}
-[dir=ltr] .largeOnLabelWrapper {
-  left: var(--zd_size7) ;
-}
-[dir=rtl] .largeOnLabelWrapper {
-  right: var(--zd_size7) ;
-}
-.smallOffLabelWrapper {
-  width: var(--zd_size7) ;
-  height: var(--zd_size7) ;
-  top: 2.5px;
-}
-[dir=ltr] .smallOffLabelWrapper {
-  right: var(--zd_size3) ;
-}
-[dir=rtl] .smallOffLabelWrapper {
-  left: var(--zd_size3) ;
-}
-.mediumOffLabelWrapper {
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
-  top: var(--zd_size4) ;
-}
-[dir=ltr] .mediumOffLabelWrapper {
-  right: 3.5px;
-}
-[dir=rtl] .mediumOffLabelWrapper {
-  left: 3.5px;
-}
-.largeOffLabelWrapper {
-  width: var(--zd_size9) ;
-  height: var(--zd_size9) ;
-  top: 5.5px;
-}
-[dir=ltr] .largeOffLabelWrapper {
-  right: var(--zd_size4) ;
-}
-[dir=rtl] .largeOffLabelWrapper {
-  left: var(--zd_size4) ;
-}
-
-.offLabel {
-  stroke: var(--dot_shuttleGrey);
-  /* stroke-width: var(--switch-off-label-stroke); */
-  /* r: var(--switch-off-label-radius); */
-  fill: none;
-}
-.smallOffLabelWrapper .offLabel {
-  stroke-width: 1px;
-  r: 2.5px;
-}
-.mediumOffLabelWrapper .offLabel {
-  stroke-width: 1.1px;
-  r: 3px;
-}
-.largeOffLabelWrapper .offLabel {
-  stroke-width: 1.2px;
-  r: 3.5px;
-}
-
-.onLabel {
-  fill: var(--dot_white);
-}

package/es/SwitchNew/props/defaultProps.js

@@ -1,9 +0,0 @@
-export const defaultProps = {
-  checked: false,
-  disabled: false,
-  isReadOnly: false,
-  size: 'medium',
-  dataSelectorId: 'switch',
-  labelSize: 'medium',
-  labelPlacement: 'right'
-};

package/es/SwitchNew/props/propTypes.js

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  id: PropTypes.string,
-  title: PropTypes.string,
-  name: PropTypes.string,
-  value: PropTypes.bool,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  text: PropTypes.string,
-  disableTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  onChange: PropTypes.func,
-  dataSelectorId: PropTypes.string,
-  customClass: PropTypes.shape({
-    customSwitchWrap: PropTypes.string,
-    customSwitch: PropTypes.string,
-    customLabel: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    SwitchProps: PropTypes.shape({
-      WrapperProps: PropTypes.object,
-      TrackProps: PropTypes.object
-    }),
-    LabelProps: PropTypes.object
-  }),
-  labelPalette: PropTypes.oneOf[("default", "primary", "secondary", "danger", "mandatory", "disable", "dark")],
-  labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
-  labelPlacement: PropTypes.string,
-  a11y: PropTypes.object
-};

package/lib/SwitchNew/SwitchNew.js

@@ -1,148 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Layout = require("../Layout");
-
-var _Label = _interopRequireDefault(require("../Label/Label"));
-
-var _SwitchNewModule = _interopRequireDefault(require("./SwitchNew.module.css"));
-
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
-
-var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
-
-var _excluded = ["role"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var SwitchNew = function SwitchNew(props) {
-  var id = props.id,
-      title = props.title,
-      name = props.name,
-      value = props.value,
-      checked = props.checked,
-      disabled = props.disabled,
-      isReadOnly = props.isReadOnly,
-      size = props.size,
-      text = props.text,
-      disableTitle = props.disableTitle,
-      dataId = props.dataId,
-      dataSelectorId = props.dataSelectorId,
-      onChange = props.onChange,
-      customProps = props.customProps,
-      customClass = props.customClass,
-      labelSize = props.labelSize,
-      labelPlacement = props.labelPlacement,
-      a11y = props.a11y;
-
-  var handleChange = function handleChange(e) {
-    if (!disabled && !isReadOnly && onChange) {
-      onChange(!checked, e);
-    }
-  };
-
-  var _ref = customProps || {},
-      _ref$SwitchProps = _ref.SwitchProps,
-      SwitchProps = _ref$SwitchProps === void 0 ? {} : _ref$SwitchProps,
-      _ref$LabelProps = _ref.LabelProps,
-      LabelProps = _ref$LabelProps === void 0 ? {} : _ref$LabelProps;
-
-  var _SwitchProps$WrapperP = SwitchProps.WrapperProps,
-      WrapperProps = _SwitchProps$WrapperP === void 0 ? {} : _SwitchProps$WrapperP,
-      _SwitchProps$TrackPro = SwitchProps.TrackProps,
-      TrackProps = _SwitchProps$TrackPro === void 0 ? {} : _SwitchProps$TrackPro;
-
-  var _ref2 = customClass || {},
-      _ref2$customSwitchWra = _ref2.customSwitchWrap,
-      customSwitchWrap = _ref2$customSwitchWra === void 0 ? '' : _ref2$customSwitchWra,
-      _ref2$customSwitch = _ref2.customSwitch,
-      customSwitch = _ref2$customSwitch === void 0 ? '' : _ref2$customSwitch,
-      _ref2$customLabel = _ref2.customLabel,
-      customLabel = _ref2$customLabel === void 0 ? '' : _ref2$customLabel;
-
-  var _ref3 = a11y || {},
-      _ref3$role = _ref3.role,
-      role = _ref3$role === void 0 ? 'switch' : _ref3$role,
-      a11yAttributes = _objectWithoutProperties(_ref3, _excluded);
-
-  var context = (0, _react.useContext)(_LibraryContextInit["default"]);
-  var _context$a11y_onOffLa = context.a11y_onOffLabel,
-      a11y_onOffLabel = _context$a11y_onOffLa === void 0 ? true : _context$a11y_onOffLa;
-  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-    align: "vertical",
-    isCover: false,
-    isInline: true,
-    alignBox: labelPlacement == 'right' ? 'row' : 'row-reverse',
-    "data-title": disabled ? disableTitle : title,
-    dataSelectorId: dataSelectorId,
-    className: customSwitchWrap ? customSwitchWrap : ''
-  }, WrapperProps), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_SwitchNewModule["default"].switchWrapper, " ").concat(_SwitchNewModule["default"]["".concat(size, "_switch")], " ").concat(!disabled && !isReadOnly ? _SwitchNewModule["default"].effect : '', " ").concat(disabled ? _SwitchNewModule["default"].disabled : '')
-  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
-    type: "checkbox",
-    id: id,
-    name: name,
-    value: value,
-    checked: checked,
-    disabled: disabled,
-    readOnly: isReadOnly,
-    onChange: handleChange,
-    role: role,
-    "aria-checked": checked,
-    tabIndex: disabled ? -1 : 0,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    className: "".concat(_SwitchNewModule["default"].track, " ").concat(customSwitch, " ").concat(a11y_onOffLabel ? checked ? _SwitchNewModule["default"].onLabel : _SwitchNewModule["default"].offLabel : '')
-  }, a11yAttributes, TrackProps)), /*#__PURE__*/_react["default"].createElement("span", {
-    className: _SwitchNewModule["default"].thumb
-  }), a11y_onOffLabel ? /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 ".concat(checked ? '2' : 'var(--switch-off-label-size)', " ").concat(checked ? 'var(--switch-on-label-height)' : 'var(--switch-off-label-size)'),
-    className: "".concat(checked ? _SwitchNewModule["default"]["".concat(size, "OnLabelWrapper")] : _SwitchNewModule["default"]["".concat(size, "OffLabelWrapper")], " ").concat(_SwitchNewModule["default"].labelWrapper)
-  }, checked ? /*#__PURE__*/_react["default"].createElement("rect", {
-    x: "0",
-    rx: "0.8",
-    ry: "0.8",
-    width: "100%",
-    height: "100%",
-    className: _SwitchNewModule["default"].onLabel
-  }) : /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _SwitchNewModule["default"].offLabel,
-    cx: "50%",
-    cy: "50%",
-    width: "100%",
-    height: "100%",
-    fill: "none"
-  })) : null), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
-    customClass: " ".concat(_SwitchNewModule["default"]["switchLabel_".concat(labelPlacement)], "  ").concat(customLabel ? customLabel : ''),
-    htmlFor: id,
-    size: labelSize,
-    type: "subtitle",
-    text: text
-  }, LabelProps)));
-};
-
-var _default = SwitchNew;
-exports["default"] = _default;
-SwitchNew.defaultProps = _defaultProps.defaultProps;
-SwitchNew.propTypes = _propTypes.propTypes;