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

package/es/SwitchNew/SwitchNew.js

@@ -0,0 +1,118 @@
+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(--off-label-size)'} ${checked ? 'var(--on-label-height)' : 'var(--off-label-size)'}`,
+    className: checked ? style.onLabelWrapper : style.offLabelWrapper
+  }, 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

@@ -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/es/SwitchNew/props/defaultProps.js

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

package/es/SwitchNew/props/propTypes.js

@@ -0,0 +1,32 @@
+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/es/index.js

@@ -29,6 +29,7 @@ export { default as RippleEffect } from './RippleEffect/RippleEffect';
 export * from './Select';
 export { default as Stencils } from './Stencils/Stencils';
 export { default as Switch } from './Switch/Switch';
+export { default as SwitchNew } from './SwitchNew/SwitchNew';
 export * from './Tab';
 export { default as Tag } from './Tag/Tag';
 export { default as Textarea } from './Textarea/Textarea';

package/lib/Button/Button.js

@@ -1,15 +1,11 @@
 "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"] = Button;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
+var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
 
@@ -23,18 +19,8 @@ var _ButtonModule = _interopRequireDefault(require("./css/Button.module.css"));
 
 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 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; }
-
 /*
 Button text and children props?
 use children for both cases
@@ -57,18 +43,10 @@ function Button(props) {
       customStyle = props.customStyle,
       a11y = props.a11y,
       id = props.id;
-
-  var _useContext = (0, _react.useContext)(_LibraryContextInit["default"]),
-      a11y_strikeThroughButtons = _useContext.a11y_strikeThroughButtons;
-
   var finalStyle = (0, _utils.mergeStyle)(_ButtonModule["default"], customStyle);
 
-  var buttonProps = _objectSpread(_objectSpread({}, props), {}, {
-    a11y_strikeThroughButtons: a11y_strikeThroughButtons
-  });
-
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
-    props: buttonProps,
+    props: props,
     style: finalStyle
   }),
       buttonClass = _cssJSLogic.buttonClass,

package/lib/Button/css/Button.module.css

@@ -525,86 +525,4 @@
 
 .loader{
   color:var(--dot_mirror)
-}
-[dir=ltr] .primaryStrike {
-  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
-}
-[dir=rtl] .primaryStrike {
-  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
-}
-
-.primaryfilledStrike {
-  --button_border_color: var(--zdt_button_primaryfill_bg);
-}
-
-[dir=ltr] .primaryfilledStrike {
-  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
-}
-
-[dir=rtl] .primaryfilledStrike {
-  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
-}
-
-[dir=ltr] .dangerStrike {
-  background: repeating-linear-gradient(120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
-}
-
-[dir=rtl] .dangerStrike {
-  background: repeating-linear-gradient(-120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
-}
-
-.dangerfilledStrike {
-  --button_border_color: var(--zdt_button_danger_border);
-}
-
-[dir=ltr] .dangerfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
-}
-
-[dir=rtl] .dangerfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
-}
-
-[dir=ltr] .secondaryStrike {
-  background: repeating-linear-gradient(120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
-}
-
-[dir=rtl] .secondaryStrike {
-  background: repeating-linear-gradient(-120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
-}
-
-.secondaryfilledStrike {
-  --button_border_color: var(--zdt_button_secondaryfill_bg);
-}
-
-[dir=ltr] .secondaryfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
-}
-
-[dir=rtl] .secondaryfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
-}
-
-.tertiaryfilledStrike {
-  --button_border_color: var(--zdt_button_tertiaryfill_bg);
-}
-
-[dir=ltr] .tertiaryfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
-}
-
-[dir=rtl] .tertiaryfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
-}
-
-.successfilledStrike {
-  --button_border_color: var(--zdt_button_successfill_border);
-}
-
-[dir=ltr] .successfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
-}
-
-[dir=rtl] .successfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
 }

package/lib/Button/css/cssJSLogic.js

@@ -21,20 +21,16 @@ function cssJSLogic(_ref) {
       size = props.size,
       children = props.children,
       palette = props.palette,
-      status = props.status,
-      disabled = props.disabled,
-      a11y_strikeThroughButtons = props.a11y_strikeThroughButtons;
+      status = props.status;
   var _customClass$customBu = customClass.customButton,
       customButton = _customClass$customBu === void 0 ? '' : _customClass$customBu,
       _customClass$customSt = customClass.customStatus,
       customStatus = _customClass$customSt === void 0 ? '' : _customClass$customSt,
       _customClass$customSt2 = customClass.customStatusSize,
       customStatusSize = _customClass$customSt2 === void 0 ? '' : _customClass$customSt2;
-  var strikeExcluded = ['plainprimary', 'plainsecondary'];
   var paletteLower = palette.toLowerCase();
   var statusLower = status.toLowerCase();
-  var strikeEnabled = !strikeExcluded.includes(paletteLower);
-  var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, style["".concat(paletteLower, "Strike")], disabled && a11y_strikeThroughButtons && strikeEnabled), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
+  var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
   var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.success, statusLower != 'loading'), _compileClassNames2));
   var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
   return {

package/lib/Provider/LibraryContext.js

@@ -44,7 +44,7 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       direction = _ref.direction,
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
-      a11y_strikeThroughButtons = _ref.a11y_strikeThroughButtons,
+      a11y_onOffLabel = _ref.a11y_onOffLabel,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
@@ -52,7 +52,7 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
     direction: direction,
     coloredTagVariant: coloredTagVariant,
     hasTagColorInheritedToText: hasTagColorInheritedToText,
-    a11y_strikeThroughButtons: a11y_strikeThroughButtons
+    a11y_onOffLabel: a11y_onOffLabel
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],

package/lib/Switch/Switch.js

@@ -17,6 +17,8 @@ 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 }; }
@@ -67,8 +69,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
       onChange && onChange(!checked, e);
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "renderSwitch",
+    value: function renderSwitch(context) {
       var _this$props2 = this.props,
           id = _this$props2.id,
           name = _this$props2.name,
@@ -99,6 +101,8 @@ 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,
@@ -125,9 +129,26 @@ 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),
+        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch, " ").concat(onOffLabelType === 'labelOnTrack' && isOnOffLabelEnabled ? _SwitchModule["default"].labelOnTrack : ''),
         tabIndex: isReadOnly || disabled ? '-1' : '0'
-      })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+      }, /*#__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: text,
         palette: labelPalette,
         id: id,
@@ -137,6 +158,15 @@ 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;