@zohodesk/components 1.0.0-temp-217.6 → 1.0.0-temp-221.1

package/es/components-v2/Switch/css/Switch_v2.module.css

@@ -1,123 +0,0 @@
-.container {
-    --switch-cursor: pointer;
-    gap: var(--zd_size6) ;
-}
-.small {
-    --switch-track-width: var(--zd_size22);
-    --switch-track-height: var(--zd_size12);
-    --switch-track-border-radius: 8px;
-    --switch-thumb-size: var(--zd_size10);
-    --switch-onLabel-height: var(--zd_size6);
-    --switch-onLabel-left: var(--zd_size5);
-    --switch-offLabel-size: var(--zd_size7);
-    --switch-offLabel-right: var(--zd_size2);
-}
-.medium {
-    --switch-track-width: var(--zd_size28);
-    --switch-track-height: var(--zd_size16);
-    --switch-track-border-radius: 16px;
-    --switch-thumb-size: var(--zd_size14);
-    --switch-onLabel-height: var(--zd_size8);
-    --switch-onLabel-left: var(--zd_size6);
-    --switch-offLabel-size: var(--zd_size8);
-    --switch-offLabel-right: var(--zd_size3);
-}
-.large {
-    --switch-track-width: var(--zd_size34);
-    --switch-track-height: var(--zd_size20);
-    --switch-track-border-radius: 10px;
-    --switch-thumb-size: var(--zd_size18);
-    --switch-onLabel-height: var(--zd_size11);
-    --switch-onLabel-left: var(--zd_size7);
-    --switch-offLabel-size: var(--zd_size9);
-    --switch-offLabel-right: var(--zd_size4);
-}
-.checked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_bg);
-    --switch-thumb-translateX-value: 0
-}
-.unChecked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_bg);
-    --switch-thumb-translateX-value: calc(var(--switch-thumb-size) + 2px - var(--switch-track-width));
-}
-.disabled, .readonly {
-    --switch-cursor: not-allowed;
-}
-.trackWrapper {
-    position: relative;
-}
-.track {
-    appearance: none;
-    display: block;
-    position: relative;
-    height: var(--switch-track-height);
-    width: var(--switch-track-width);
-    margin: 0 ;
-    border-radius: var(--switch-track-border-radius);
-    background-color: var(--switch-track-background-color);
-    cursor: var(--switch-cursor);
-}
-.checked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_hover_bg);
-}
-.unChecked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_hover_bg);
-}
-.commonSvg {
-    display: block;
-    position: absolute;
-    pointer-events: none;
-    top: 50% ;
-}
-.thumb {
-    transition: transform var(--zd_transition2);
-    fill: var(--zdt_v2_switch_thumb_bg);   
-    height: var(--switch-thumb-size);
-    width: var(--switch-thumb-size);
-    transform: translateX(var(--switch-thumb-translateX-value)) translateY(-50%);
-}
-[dir=ltr] .thumb {
-    right: var(--zd_size1) ;
-}
-[dir=rtl] .thumb {
-    left: var(--zd_size1) ;
-}
-.label {
-    cursor: var(--switch-cursor);
-}
-.onLabel {
-    height: var(--switch-onLabel-height);
-    fill: var(--zdt_v2_switch_on_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .onLabel {
-    left: var(--switch-onLabel-left);
-}
-[dir=rtl] .onLabel {
-    right: var(--switch-onLabel-left);
-}
-.offLabel {
-    height: var(--switch-offLabel-size);
-    width: var(--switch-offLabel-size);
-    fill: transparent;
-    stroke: var(--zdt_v2_switch_off_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .offLabel {
-    right: var(--switch-offLabel-right);
-}
-[dir=rtl] .offLabel {
-    left: var(--switch-offLabel-right);
-}
-.small .onLabel {
-    width: 1.2px;
-}
-.medium .onLabel {
-    width: 1.4px;
-}
-.large .onLabel {
-    width: 1.6px;
-}
-.disabled .trackWrapper {
-    opacity: 0.4;
-}

package/es/components-v2/Switch/css/cssJSLogic.js

@@ -1,47 +0,0 @@
-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]]: true,
-    [style.checked]: isChecked,
-    [style.unChecked]: !isChecked,
-    [style.disabled]: 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/components-v2/Switch/props/defaultProps.js

@@ -1,17 +0,0 @@
-export default {
-  size: 'medium',
-  isChecked: false,
-  isDisabled: false,
-  isReadOnly: false,
-  hasOnOffIndication: true,
-  labelPlacement: 'left',
-  labelSize: 'medium',
-  customProps_container: {},
-  customProps_label: {},
-  tagAttributes_container: {},
-  tagAttributes_switch: {},
-  a11yAttributes_container: {},
-  a11yAttributes_switch: {},
-  a11yAttributes_label: {},
-  customStyle: {}
-};

package/es/components-v2/Switch/props/propTypes.js

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-export default {
-  name: PropTypes.string,
-  value: PropTypes.string,
-  id: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  isChecked: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onChange: PropTypes.func,
-  hasOnOffIndication: PropTypes.bool,
-  labelText: PropTypes.string,
-  labelPlacement: PropTypes.oneOf(['left', 'right']),
-  labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
-  title: PropTypes.string,
-  customProps_container: PropTypes.object,
-  customProps_label: PropTypes.object,
-  tagAttributes_container: PropTypes.object,
-  tagAttributes_switch: PropTypes.object,
-  a11yAttributes_container: PropTypes.object,
-  a11yAttributes_switch: PropTypes.object,
-  a11yAttributes_label: PropTypes.object,
-  customId: PropTypes.string,
-  testId: PropTypes.string,
-  customStyle: PropTypes.object
-};

package/lib/components-v2/Switch/Switch.js

@@ -1,137 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
-var _propTypes = require("./props/propTypes");
-
-var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
-
-var _utils = require("@zohodesk/utils");
-
-var _contants = require("./contants");
-
-var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
-
-var _Label = _interopRequireDefault(require("../../Label/Label"));
-
-var _Switch_v2Module = _interopRequireDefault(require("./css/Switch_v2.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); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Switch = function Switch(props) {
-  var name = props.name,
-      value = props.value,
-      id = props.id,
-      size = props.size,
-      isChecked = props.isChecked,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly,
-      onChange = props.onChange,
-      hasOnOffIndication = props.hasOnOffIndication,
-      labelText = props.labelText,
-      labelPlacement = props.labelPlacement,
-      labelSize = props.labelSize,
-      title = props.title,
-      customProps_container = props.customProps_container,
-      customProps_label = props.customProps_label,
-      tagAttributes_container = props.tagAttributes_container,
-      tagAttributes_switch = props.tagAttributes_switch,
-      a11yAttributes_container = props.a11yAttributes_container,
-      a11yAttributes_switch = props.a11yAttributes_switch,
-      a11yAttributes_label = props.a11yAttributes_label,
-      customId = props.customId,
-      testId = props.testId,
-      customStyle = props.customStyle;
-  var _a11yAttributes_switc = a11yAttributes_switch.role,
-      role = _a11yAttributes_switc === void 0 ? 'switch' : _a11yAttributes_switc,
-      extraA11yAttributes_switch = a11yAttributes_switch.extraA11yAttributes_switch;
-  var style = (0, _utils.mergeStyle)(_Switch_v2Module["default"], customStyle);
-
-  var _cssJSLogic = (0, _cssJSLogic2["default"])({
-    props: props,
-    style: style
-  }),
-      containerClass = _cssJSLogic.containerClass,
-      labelClass = _cssJSLogic.labelClass,
-      trackClass = _cssJSLogic.trackClass,
-      trackWrapperClass = _cssJSLogic.trackWrapperClass,
-      thumbClass = _cssJSLogic.thumbClass,
-      labelIndicationClass = _cssJSLogic.labelIndicationClass;
-
-  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
-    $ui_displayMode: "inline",
-    $ui_direction: labelPlacement === 'left' ? 'row' : 'rowReverse',
-    $ui_alignItems: "center",
-    $tagAttributes_container: _objectSpread({
-      'data-selector-id': customId
-    }, tagAttributes_container),
-    testId: testId,
-    customId: customId,
-    customStyle: {
-      inlineFlex: containerClass
-    },
-    $a11yAttributes_container: a11yAttributes_container
-  }, customProps_container), labelText && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
-    text: labelText,
-    palette: isDisabled || isReadOnly ? 'primary' : 'default',
-    size: labelSize,
-    htmlFor: id,
-    customClass: labelClass,
-    a11y: a11yAttributes_label
-  }, customProps_label)), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-    $flag_shrink: false,
-    customStyle: {
-      noShrink: trackWrapperClass
-    }
-  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
-    type: "checkbox",
-    id: id,
-    name: name,
-    value: value,
-    checked: isChecked,
-    disabled: isDisabled,
-    readOnly: isReadOnly,
-    onChange: !isDisabled && !isReadOnly ? onChange : null,
-    role: role,
-    className: trackClass,
-    "data-title": title
-  }, tagAttributes_switch, extraA11yAttributes_switch)), /*#__PURE__*/_react["default"].createElement("svg", {
-    className: thumbClass,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: _contants.thumbRadius[size]
-  })), hasOnOffIndication ? /*#__PURE__*/_react["default"].createElement("svg", {
-    className: labelIndicationClass,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
-    width: "100%",
-    height: "100%",
-    rx: "50%"
-  }) : /*#__PURE__*/_react["default"].createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: _contants.offLabelRadius[size]
-  })) : null));
-};
-
-var _default = Switch;
-exports["default"] = _default;
-Switch.defaultProps = _defaultProps["default"];
-Switch.propTypes = _propTypes.propTypes;

package/lib/components-v2/Switch/contants/index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.thumbRadius = exports.offLabelRadius = void 0;
-var offLabelRadius = {
-  small: '35.7%',
-  medium: '37.5%',
-  large: '38.9%'
-};
-exports.offLabelRadius = offLabelRadius;
-var thumbRadius = {
-  small: '40%',
-  medium: '42.85%',
-  large: '44.45%'
-};
-exports.thumbRadius = thumbRadius;

package/lib/components-v2/Switch/css/Switch_v2.module.css

@@ -1,123 +0,0 @@
-.container {
-    --switch-cursor: pointer;
-    gap: var(--zd_size6) ;
-}
-.small {
-    --switch-track-width: var(--zd_size22);
-    --switch-track-height: var(--zd_size12);
-    --switch-track-border-radius: 8px;
-    --switch-thumb-size: var(--zd_size10);
-    --switch-onLabel-height: var(--zd_size6);
-    --switch-onLabel-left: var(--zd_size5);
-    --switch-offLabel-size: var(--zd_size7);
-    --switch-offLabel-right: var(--zd_size2);
-}
-.medium {
-    --switch-track-width: var(--zd_size28);
-    --switch-track-height: var(--zd_size16);
-    --switch-track-border-radius: 16px;
-    --switch-thumb-size: var(--zd_size14);
-    --switch-onLabel-height: var(--zd_size8);
-    --switch-onLabel-left: var(--zd_size6);
-    --switch-offLabel-size: var(--zd_size8);
-    --switch-offLabel-right: var(--zd_size3);
-}
-.large {
-    --switch-track-width: var(--zd_size34);
-    --switch-track-height: var(--zd_size20);
-    --switch-track-border-radius: 10px;
-    --switch-thumb-size: var(--zd_size18);
-    --switch-onLabel-height: var(--zd_size11);
-    --switch-onLabel-left: var(--zd_size7);
-    --switch-offLabel-size: var(--zd_size9);
-    --switch-offLabel-right: var(--zd_size4);
-}
-.checked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_bg);
-    --switch-thumb-translateX-value: 0
-}
-.unChecked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_bg);
-    --switch-thumb-translateX-value: calc(var(--switch-thumb-size) + 2px - var(--switch-track-width));
-}
-.disabled, .readonly {
-    --switch-cursor: not-allowed;
-}
-.trackWrapper {
-    position: relative;
-}
-.track {
-    appearance: none;
-    display: block;
-    position: relative;
-    height: var(--switch-track-height);
-    width: var(--switch-track-width);
-    margin: 0 ;
-    border-radius: var(--switch-track-border-radius);
-    background-color: var(--switch-track-background-color);
-    cursor: var(--switch-cursor);
-}
-.checked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_hover_bg);
-}
-.unChecked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_hover_bg);
-}
-.commonSvg {
-    display: block;
-    position: absolute;
-    pointer-events: none;
-    top: 50% ;
-}
-.thumb {
-    transition: transform var(--zd_transition2);
-    fill: var(--zdt_v2_switch_thumb_bg);   
-    height: var(--switch-thumb-size);
-    width: var(--switch-thumb-size);
-    transform: translateX(var(--switch-thumb-translateX-value)) translateY(-50%);
-}
-[dir=ltr] .thumb {
-    right: var(--zd_size1) ;
-}
-[dir=rtl] .thumb {
-    left: var(--zd_size1) ;
-}
-.label {
-    cursor: var(--switch-cursor);
-}
-.onLabel {
-    height: var(--switch-onLabel-height);
-    fill: var(--zdt_v2_switch_on_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .onLabel {
-    left: var(--switch-onLabel-left);
-}
-[dir=rtl] .onLabel {
-    right: var(--switch-onLabel-left);
-}
-.offLabel {
-    height: var(--switch-offLabel-size);
-    width: var(--switch-offLabel-size);
-    fill: transparent;
-    stroke: var(--zdt_v2_switch_off_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .offLabel {
-    right: var(--switch-offLabel-right);
-}
-[dir=rtl] .offLabel {
-    left: var(--switch-offLabel-right);
-}
-.small .onLabel {
-    width: 1.2px;
-}
-.medium .onLabel {
-    width: 1.4px;
-}
-.large .onLabel {
-    width: 1.6px;
-}
-.disabled .trackWrapper {
-    opacity: 0.4;
-}

package/lib/components-v2/Switch/css/cssJSLogic.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = cssJSLogic;
-
-var _compileClassNames7 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function cssJSLogic(_ref) {
-  var _compileClassNames, _compileClassNames5, _compileClassNames6;
-
-  var props = _ref.props,
-      style = _ref.style;
-  var size = props.size,
-      isChecked = props.isChecked,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly;
-  var containerClass = (0, _compileClassNames7["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, style.container, true), _defineProperty(_compileClassNames, style[size], true), _defineProperty(_compileClassNames, style.checked, isChecked), _defineProperty(_compileClassNames, style.unChecked, !isChecked), _defineProperty(_compileClassNames, style.disabled, isDisabled), _defineProperty(_compileClassNames, style.readonly, isReadOnly), _compileClassNames));
-  var trackClass = (0, _compileClassNames7["default"])(_defineProperty({}, style.track, true));
-  var labelClass = (0, _compileClassNames7["default"])(_defineProperty({}, style.label, true));
-  var trackWrapperClass = (0, _compileClassNames7["default"])(_defineProperty({}, style.trackWrapper, true));
-  var thumbClass = (0, _compileClassNames7["default"])((_compileClassNames5 = {}, _defineProperty(_compileClassNames5, style.thumb, true), _defineProperty(_compileClassNames5, style.commonSvg, true), _compileClassNames5));
-  var labelIndicationClass = (0, _compileClassNames7["default"])((_compileClassNames6 = {}, _defineProperty(_compileClassNames6, style.onLabel, isChecked), _defineProperty(_compileClassNames6, style.offLabel, !isChecked), _defineProperty(_compileClassNames6, style.commonSvg, true), _compileClassNames6));
-  return {
-    containerClass: containerClass,
-    trackClass: trackClass,
-    labelClass: labelClass,
-    trackWrapperClass: trackWrapperClass,
-    thumbClass: thumbClass,
-    labelIndicationClass: labelIndicationClass
-  };
-}

package/lib/components-v2/Switch/props/defaultProps.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = {
-  size: 'medium',
-  isChecked: false,
-  isDisabled: false,
-  isReadOnly: false,
-  hasOnOffIndication: true,
-  labelPlacement: 'left',
-  labelSize: 'medium',
-  customProps_container: {},
-  customProps_label: {},
-  tagAttributes_container: {},
-  tagAttributes_switch: {},
-  a11yAttributes_container: {},
-  a11yAttributes_switch: {},
-  a11yAttributes_label: {},
-  customStyle: {}
-};
-exports["default"] = _default;

package/lib/components-v2/Switch/props/propTypes.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = {
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  isChecked: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  hasOnOffIndication: _propTypes["default"].bool,
-  labelText: _propTypes["default"].string,
-  labelPlacement: _propTypes["default"].oneOf(['left', 'right']),
-  labelSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
-  title: _propTypes["default"].string,
-  customProps_container: _propTypes["default"].object,
-  customProps_label: _propTypes["default"].object,
-  tagAttributes_container: _propTypes["default"].object,
-  tagAttributes_switch: _propTypes["default"].object,
-  a11yAttributes_container: _propTypes["default"].object,
-  a11yAttributes_switch: _propTypes["default"].object,
-  a11yAttributes_label: _propTypes["default"].object,
-  customId: _propTypes["default"].string,
-  testId: _propTypes["default"].string,
-  customStyle: _propTypes["default"].object
-};
-exports["default"] = _default;