@zohodesk/components 1.0.0-temp-216 → 1.0.0-temp-217

package/lib/Switch/Switch.module.css

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

@@ -0,0 +1,148 @@
+"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(--off-label-size)', " ").concat(checked ? 'var(--on-label-height)' : 'var(--off-label-size)'),
+    className: checked ? _SwitchNewModule["default"].onLabelWrapper : _SwitchNewModule["default"].offLabelWrapper
+  }, 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;

package/lib/SwitchNew/SwitchNew.module.css

@@ -0,0 +1,155 @@
+.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(--track-width);
+  height: var(--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(--thumb-size);
+  height: var(--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(--track-width) - var(--thumb-size) - 4px));
+}
+[dir=rtl] .track:checked + .thumb {
+  transform: translateX(calc(-1*(var(--track-width) - var(--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 {
+  --track-width: var(--zd_size22);
+  --track-height: var(--zd_size12);
+  --thumb-size: var(--zd_size8);
+  --off-label-size: var(--zd_size7);
+  --off-label-radius: 2.5px;
+  --off-label-top: var(--zd_size2.5);
+  --off-label-right: var(--zd_size3);
+  --off-label-stroke: 1px;
+  --on-label-width: var(--zd_size1.2);
+  --on-label-height: var(--zd_size6);
+  --on-label-top: var(--zd_size3);
+  --on-label-left: var(--zd_size5);
+}
+
+.medium_switch {
+  --track-width: var(--zd_size28);
+  --track-height: var(--zd_size16);
+  --thumb-size: var(--zd_size12);
+  --off-label-size: var(--zd_size8);
+  --off-label-radius: 3px;
+  --off-label-top: var(--zd_size4);
+  --off-label-right: var(--zd_size3.5);
+  --off-label-stroke: 1.1px;
+  --on-label-width: var(--zd_size1.4);
+  --on-label-height: var(--zd_size8);
+  --on-label-top: var(--zd_size4);
+  --on-label-left: var(--zd_size6);
+}
+
+.large_switch {
+  --track-width: var(--zd_size34);
+  --track-height: var(--zd_size20);
+  --thumb-size: var(--zd_size16);
+  --off-label-size: var(--zd_size9);
+  --off-label-radius: 3.5px;
+  --off-label-top: var(--zd_size5.5);
+  --off-label-right: var(--zd_size4);
+  --off-label-stroke: 1.2px;
+  --on-label-width: var(--zd_size1.6);
+  --on-label-height: var(--zd_size11);
+  --on-label-top: var(--zd_size4.5);
+  --on-label-left: var(--zd_size7);
+}
+[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(--off-label-size);
+  height: var(--off-label-size);
+  top: var(--off-label-top);
+}
+[dir=ltr] .offLabelWrapper {
+  right: var(--off-label-right);
+}
+[dir=rtl] .offLabelWrapper {
+  left: var(--off-label-right);
+}
+.onLabelWrapper {
+  width: var(--on-label-width);
+  height: var(--on-label-height);
+  top: var(--on-label-top);
+}
+[dir=ltr] .onLabelWrapper {
+  left: var(--on-label-left);
+}
+[dir=rtl] .onLabelWrapper {
+  right: var(--on-label-left);
+}
+.offLabel {
+  stroke: var(--dot_shuttleGrey);
+  stroke-width: var(--off-label-stroke);
+  r: var(--off-label-radius);
+  fill: none;
+}
+.onLabel {
+  fill: var(--dot_white);
+}

package/lib/SwitchNew/props/defaultProps.js

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

package/lib/SwitchNew/props/propTypes.js

@@ -0,0 +1,43 @@
+"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 = {
+  id: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  value: _propTypes["default"].bool,
+  checked: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  text: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  dataSelectorId: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    customSwitchWrap: _propTypes["default"].string,
+    customSwitch: _propTypes["default"].string,
+    customLabel: _propTypes["default"].string
+  }),
+  customProps: _propTypes["default"].shape({
+    SwitchProps: _propTypes["default"].shape({
+      WrapperProps: _propTypes["default"].object,
+      TrackProps: _propTypes["default"].object
+    }),
+    LabelProps: _propTypes["default"].object
+  }),
+  labelPalette: _propTypes["default"].oneOf[("default", "primary", "secondary", "danger", "mandatory", "disable", "dark")],
+  labelSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
+  labelPlacement: _propTypes["default"].string,
+  a11y: _propTypes["default"].object
+};
+exports.propTypes = propTypes;

package/lib/index.js

@@ -26,6 +26,7 @@ var _exportNames = {
   RippleEffect: true,
   Stencils: true,
   Switch: true,
+  SwitchNew: true,
   Tag: true,
   Textarea: true,
   TextBox: true,
@@ -144,6 +145,12 @@ 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() {
@@ -352,6 +359,8 @@ 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-216",
+  "version": "1.0.0-temp-217",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,