@zohodesk/components 1.0.0-temp-219.3 → 1.0.0-temp-229.1

package/lib/CheckBox/CheckBox.js

@@ -13,8 +13,6 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
-var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
-
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
 var _Layout = require("../Layout");
@@ -215,16 +213,11 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
   return CheckBox;
 }(_react["default"].Component);
 
+exports["default"] = CheckBox;
 CheckBox.defaultProps = _defaultProps.defaultProps;
 CheckBox.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //   CheckBox.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
-
-var _default = (0, _ComponentRegistry.withComponentRegistrar)(CheckBox, {
-  name: 'ZDC_CheckBox'
-});
-
-exports["default"] = _default;
+// }

package/lib/Label/Label.js

@@ -13,8 +13,6 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
-
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 
 var _LabelColorsModule = _interopRequireDefault(require("./LabelColors.module.css"));
@@ -89,16 +87,11 @@ var Label = /*#__PURE__*/function (_React$Component) {
   return Label;
 }(_react["default"].Component);
 
+exports["default"] = Label;
 Label.defaultProps = _defaultProps.defaultProps;
 Label.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //   Label.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
-
-var _default = (0, _ComponentRegistry.withComponentRegistrar)(Label, {
-  name: 'ZDC_Label'
-});
-
-exports["default"] = _default;
+// }

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;

package/lib/v1/Switch/Switch.js

@@ -7,102 +7,153 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
-var _Layout = require("../Layout");
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _Label = _interopRequireDefault(require("../Label/Label"));
+var _utils = require("@zohodesk/utils");
 
-var _SwitchModule = _interopRequireDefault(require("../../Switch/Switch.module.css"));
+var _useSwitch2 = _interopRequireDefault(require("./useSwitch"));
+
+var _contants = require("./contants");
+
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _Label = _interopRequireDefault(require("../../Label/Label"));
+
+var _Switch_v1Module = _interopRequireDefault(require("./css/Switch_v1.module.css"));
+
+var _excluded = ["ariaDisabled", "ariaLabel"];
 
 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; }
+
+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 Switch = function Switch(props) {
-  var id = props.id,
-      name = props.name,
+  var name = props.name,
       value = props.value,
-      checked = props.checked,
-      disabled = props.disabled,
-      isReadOnly = props.isReadOnly,
+      id = props.id,
       size = props.size,
-      text = props.text,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      hasStateIndication = props.hasStateIndication,
+      label = props.label,
+      labelPlacement = props.labelPlacement,
       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", {
+      customProps = props.customProps,
+      tagAttributes = props.tagAttributes,
+      a11yAttributes = props.a11yAttributes,
+      i18nKeys = props.i18nKeys,
+      customId = props.customId,
+      testId = props.testId,
+      customStyle = props.customStyle;
+  var customProps_container = customProps.container,
+      customProps_label = customProps.label;
+  var tagAttributes_container = tagAttributes.container,
+      tagAttributes_switch = tagAttributes["switch"];
+  var a11yAttributes_container = a11yAttributes.container,
+      _a11yAttributes$switc = a11yAttributes["switch"],
+      a11yAttributes_switch = _a11yAttributes$switc === void 0 ? {} : _a11yAttributes$switc,
+      a11yAttributes_label = a11yAttributes.label;
+
+  var _a11yAttributes_switc = a11yAttributes_switch.ariaDisabled,
+      ariaDisabled = _a11yAttributes_switc === void 0 ? isDisabled : _a11yAttributes_switc,
+      ariaLabel = a11yAttributes_switch.ariaLabel,
+      restA11yAttributes_switch = _objectWithoutProperties(a11yAttributes_switch, _excluded);
+
+  var _i18nKeys$readOnlyAri = i18nKeys.readOnlyAriaLabel,
+      i18n_readOnlyAriaLabel = _i18nKeys$readOnlyAri === void 0 ? 'Read Only' : _i18nKeys$readOnlyAri;
+  var readOnlyAriaLabel = label ? "".concat(label, ", ").concat(i18n_readOnlyAriaLabel) : i18n_readOnlyAriaLabel;
+
+  var _useSwitch = (0, _useSwitch2["default"])(props),
+      isChecked = _useSwitch.isChecked,
+      handleChange = _useSwitch.handleChange;
+
+  var style = (0, _utils.mergeStyle)(_Switch_v1Module["default"], customStyle);
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    props: _objectSpread(_objectSpread({}, props), {}, {
+      isChecked: isChecked
+    }),
+    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({}, customProps_container, {
+    $ui_displayMode: "inline",
+    $ui_direction: _contants.ITEMS_DIRECTION[labelPlacement],
+    $ui_alignItems: _contants.ALIGN_ITEMS[labelPlacement],
+    $tagAttributes_container: _objectSpread(_objectSpread({}, tagAttributes_container), {}, {
+      'data-selector-id': customId
+    }),
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass,
+    $a11yAttributes_container: a11yAttributes_container
+  }), label && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({}, customProps_label, {
+    text: label,
+    palette: isDisabled ? 'primary' : 'default',
+    size: labelSize,
+    htmlFor: id,
+    customClass: labelClass,
+    a11y: a11yAttributes_label,
+    clipped: true,
+    title: label
+  })), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    $flag_shrink: false,
+    $ui_className: trackWrapperClass
+  }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, tagAttributes_switch, restA11yAttributes_switch, {
     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)));
+    checked: isChecked,
+    onChange: handleChange,
+    className: trackClass,
+    "data-title": title,
+    role: "switch",
+    "aria-disabled": ariaDisabled,
+    "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
+  })), /*#__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.THUMB_RADIUS[size]
+  })), hasStateIndication ? /*#__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.OFF_LABEL_RADIUS[size]
+  })) : null));
 };
 
-Switch.defaultProps = _defaultProps.defaultProps;
-Switch.propTypes = _propTypes.propTypes;
-var _default = Switch; // if (__DOCS__) {
-//   Switch.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
-
-exports["default"] = _default;
+var _default = Switch;
+exports["default"] = _default;
+Switch.defaultProps = _defaultProps["default"];
+Switch.propTypes = _propTypes["default"];

package/lib/v1/Switch/__tests__/Switch.spec.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Switch = _interopRequireDefault(require("../Switch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Switch', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Switch with Checked', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      id: "switch",
+      isChecked: true
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Switch with Disabled', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      id: "switch",
+      isChecked: true,
+      isDisabled: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch rendering the Switch with Checked 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium checked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        checked=""
+        class="track"
+        id="switch"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="onLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="100%"
+          rx="50%"
+          width="100%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch rendering the Switch with Disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium checked disabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        aria-disabled="true"
+        checked=""
+        class="track"
+        id="switch"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="onLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="100%"
+          rx="50%"
+          width="100%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;