@gympass/yoga 7.36.0 → 7.37.2

package/esm/Checkbox/native/Checkbox.js

@@ -0,0 +1,179 @@
+var _excluded = ["label", "helper", "disabled", "checked", "error", "style", "onPressIn", "onPressOut", "inverted", "theme"];
+
+var _templateObject;
+
+function _extends() { _extends = Object.assign || 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 _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; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React, { useState } from 'react';
+import { bool, func, string, shape } from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { hexToRgb } from '@gympass/yoga-common';
+import { Check } from '@gympass/yoga-icons';
+import Text from '../../Text';
+var CheckboxWrapper = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  align-items: center;\n"])));
+var Label = styled(Text.Regular)(function (_ref) {
+  var checkbox = _ref.theme.yoga.components.checkbox;
+  return "\n  padding-left: " + checkbox.label.padding.left + "px;\n\n  font-size: " + checkbox.label.font.size + "px;\n\n  color: " + checkbox.label.font.color + ";\n";
+});
+var HelperWrapper = styled.View(function (_ref2) {
+  var checkbox = _ref2.theme.yoga.components.checkbox;
+  return "\n  margin-top: " + checkbox.helper.margin.top + "px;\n";
+});
+var Helper = styled(Text.Regular)(function (_ref3) {
+  var error = _ref3.error,
+      _ref3$theme$yoga = _ref3.theme.yoga,
+      feedback = _ref3$theme$yoga.colors.feedback,
+      checkbox = _ref3$theme$yoga.components.checkbox;
+  return "\n  font-size: " + checkbox.helper.font.size + "px;\n\n  color: " + (error ? feedback.attention[1] : checkbox.helper.font.color) + ";\n";
+});
+var CheckBackground = styled.View(function (_ref4) {
+  var checked = _ref4.checked,
+      disabled = _ref4.disabled,
+      inverted = _ref4.inverted,
+      error = _ref4.error,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      _ref4$theme$yoga$colo = _ref4$theme$yoga.colors,
+      primary = _ref4$theme$yoga$colo.primary,
+      feedback = _ref4$theme$yoga$colo.feedback,
+      elements = _ref4$theme$yoga$colo.elements,
+      white = _ref4$theme$yoga$colo.white,
+      checkbox = _ref4$theme$yoga.components.checkbox;
+  var borderColor = primary;
+  var bgColor = 'transparent';
+
+  if (error) {
+    var _feedback$attention = feedback.attention;
+    borderColor = _feedback$attention[1];
+
+    if (checked) {
+      var _feedback$attention2 = feedback.attention;
+      bgColor = _feedback$attention2[1];
+    }
+  } else if (disabled) {
+    borderColor = checkbox.disabled.border.color;
+
+    if (checked) {
+      bgColor = checkbox.disabled.backgroundColor;
+      borderColor = elements.lineAndBorders;
+    }
+  } else if (checked) {
+    borderColor = primary;
+    bgColor = primary;
+
+    if (inverted) {
+      bgColor = white;
+      borderColor = white;
+    }
+  } else if (inverted) {
+    borderColor = white;
+  }
+
+  return "\n      position: absolute;\n\n      width: " + checkbox.size + "px;\n      height: " + checkbox.size + "px;\n\n      border-radius: " + checkbox.border.radius + "px;\n      border-width: " + checkbox.border.width + "px;\n      border-style: solid;\n\n      background-color: " + bgColor + ";\n\n      border-color: " + borderColor + ";\n    ";
+});
+var Shadow = styled.View(function (_ref5) {
+  var checked = _ref5.checked,
+      inverted = _ref5.inverted,
+      _ref5$theme$yoga = _ref5.theme.yoga,
+      _ref5$theme$yoga$colo = _ref5$theme$yoga.colors,
+      primary = _ref5$theme$yoga$colo.primary,
+      elements = _ref5$theme$yoga$colo.elements,
+      white = _ref5$theme$yoga$colo.white,
+      checkbox = _ref5$theme$yoga.components.checkbox;
+  var size = checkbox.size * 1.67;
+  var shadowColor = checked ? primary : elements.backgroundAndDisabled;
+  return "\n      width: " + size + "px;\n      height: " + size + "px;\n\n      background-color: " + hexToRgb(inverted ? white : shadowColor, 0.75) + ";\n      border-radius: " + checkbox.hover.border.radius + "px;\n    ";
+});
+var CheckArea = styled.View(function (_ref6) {
+  var checkbox = _ref6.theme.yoga.components.checkbox;
+  return "\n  justify-content: center;\n  align-items: center;\n\n  width: " + checkbox.size + "px;\n  height: " + checkbox.size + "px;\n";
+});
+/** The checkbox component is used when the user needs to select one or more
+ * items on a task. This component can also allow the user to turn an option on
+ * or off.  */
+
+var Checkbox = function Checkbox(_ref7) {
+  var label = _ref7.label,
+      helper = _ref7.helper,
+      disabled = _ref7.disabled,
+      checked = _ref7.checked,
+      error = _ref7.error,
+      style = _ref7.style,
+      _onPressIn = _ref7.onPressIn,
+      _onPressOut = _ref7.onPressOut,
+      inverted = _ref7.inverted,
+      _ref7$theme$yoga = _ref7.theme.yoga,
+      checkbox = _ref7$theme$yoga.components.checkbox,
+      colors = _ref7$theme$yoga.colors,
+      rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
+
+  var _useState = useState(false),
+      pressed = _useState[0],
+      setPressed = _useState[1];
+
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, _extends({}, rest, {
+    disabled: disabled,
+    onPressIn: function onPressIn(e) {
+      setPressed(true);
+
+      _onPressIn(e);
+    },
+    onPressOut: function onPressOut(e) {
+      setPressed(false);
+
+      _onPressOut(e);
+    }
+  }), /*#__PURE__*/React.createElement(CheckboxWrapper, {
+    style: style
+  }, /*#__PURE__*/React.createElement(CheckArea, null, pressed && !disabled && /*#__PURE__*/React.createElement(Shadow, {
+    pressed: pressed,
+    checked: checked,
+    inverted: inverted
+  }), /*#__PURE__*/React.createElement(CheckBackground, {
+    disabled: disabled,
+    checked: checked,
+    error: error,
+    pressed: pressed,
+    inverted: inverted
+  }), checked && /*#__PURE__*/React.createElement(Check, {
+    fill: inverted ? colors.primary : checkbox.checked.icon.color,
+    style: {
+      position: 'absolute'
+    },
+    width: 24,
+    height: 24
+  })), label && /*#__PURE__*/React.createElement(Label, null, label))), (helper || error) && /*#__PURE__*/React.createElement(HelperWrapper, null, /*#__PURE__*/React.createElement(Helper, {
+    error: error
+  }, error || helper)));
+};
+
+Checkbox.propTypes = {
+  label: string,
+
+  /** set a short helper text under checkbox */
+  helper: string,
+  checked: bool,
+  disabled: bool,
+  inverted: bool,
+  error: string,
+  style: shape({}),
+  onPressIn: func,
+  onPressOut: func
+};
+Checkbox.defaultProps = {
+  label: undefined,
+  helper: undefined,
+  checked: false,
+  disabled: false,
+  inverted: false,
+  error: undefined,
+  style: {},
+  onPressIn: function onPressIn() {},
+  onPressOut: function onPressOut() {}
+};
+Checkbox.displayName = 'Checkbox';
+export default withTheme(Checkbox);

package/esm/Checkbox/native/Checkbox.test.js

@@ -0,0 +1,115 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from 'react';
+import { render, fireEvent, toJSON } from '@testing-library/react-native';
+import Checkbox from '..';
+import ThemeProvider from '../../Theme';
+var data = {
+  label: 'Checkbox Component',
+  helper: 'Helper Text'
+};
+describe('<Checkbox />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot without label', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, null))),
+          container = _render.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot without label', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, null))),
+          container = _render2.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with default checkbox', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, data))),
+          container = _render3.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled checkbox', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        disabled: true
+      })))),
+          container = _render4.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with checked checkbox', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        checked: true
+      })))),
+          container = _render5.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled and checked checkbox', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        disabled: true,
+        checked: true
+      })))),
+          container = _render6.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with error checkbox', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        error: "Error text"
+      })))),
+          container = _render7.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with error and checked checkbox', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        error: "Error text",
+        checked: true
+      })))),
+          container = _render8.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with inverted', function () {
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        inverted: true
+      })))),
+          container = _render9.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with inverted and checked', function () {
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        inverted: true,
+        checked: true
+      })))),
+          container = _render10.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with inverted and checked and disabled', function () {
+      var _render11 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        inverted: true,
+        checked: true,
+        disabled: true
+      })))),
+          container = _render11.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChange function when press on Checkbox', function () {
+      var onChangeMock = jest.fn();
+
+      var _render12 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        onPress: onChangeMock,
+        testID: "checkbox"
+      })))),
+          getByTestId = _render12.getByTestId;
+
+      fireEvent.press(getByTestId('checkbox'));
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Checkbox/native/Switch.js

@@ -0,0 +1,115 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React, { useEffect, useState } from 'react';
+import { bool } from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+import { hexToRgb } from '@gympass/yoga-common';
+import { Animated } from 'react-native';
+import withTouchable from '../../Button/native/withTouchable';
+import Box from '../../Box';
+var SwitchTrack = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+  var checkboxswitch = _ref.theme.yoga.components.checkboxswitch,
+      checked = _ref.checked,
+      disabled = _ref.disabled;
+  return "\n    display: flex;\n    justify-content: center;\n    width: " + checkboxswitch.track.width + "px;\n    height: " + checkboxswitch.track.height + "px;\n    borderRadius: " + checkboxswitch.track.radii + "px;\n    background-color: " + (checked ? checkboxswitch.track.checked.backgroundColor : checkboxswitch.track.backgroundColor) + ";\n\n    " + (disabled ? "\n        background-color: " + checkboxswitch.track.disabled.backgroundColor + ";" : '') + "\n  ";
+});
+var ThumbShadow = styled.View(function (_ref2) {
+  var _ref2$theme$yoga = _ref2.theme.yoga,
+      colors = _ref2$theme$yoga.colors,
+      checkboxswitch = _ref2$theme$yoga.components.checkboxswitch,
+      checked = _ref2.checked;
+  var width = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+  var height = checkboxswitch.thumb.height * checkboxswitch.thumb.shadowScale;
+  return "\n      width: " + width + "px;\n      height: " + height + "px;\n      position: absolute;\n      background-color: " + (checked ? hexToRgb(colors.primary, 0.75) : hexToRgb(colors.elements.backgroundAndDisabled, 0.75)) + ";\n      border-radius: " + checkboxswitch.thumb.radii + "px;\n    ";
+});
+var SwitchThumb = styled(Box).attrs(function (_ref3) {
+  var checkboxswitch = _ref3.theme.yoga.components.checkboxswitch,
+      disabled = _ref3.disabled;
+  return {
+    width: checkboxswitch.thumb.width,
+    height: checkboxswitch.thumb.height,
+    borderRadius: checkboxswitch.thumb.radii,
+    bgColor: disabled ? checkboxswitch.thumb.disabled.backgroundColor : checkboxswitch.thumb.backgroundColor,
+    elevation: checkboxswitch.thumb.shadow
+  };
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
+
+var CheckboxSwitch = function CheckboxSwitch(_ref4) {
+  var checked = _ref4.checked,
+      pressed = _ref4.pressed,
+      disabled = _ref4.disabled,
+      checkboxswitch = _ref4.theme.yoga.components.checkboxswitch;
+
+  var _useState = useState(new Animated.Value(Number(checked))),
+      thumbPosition = _useState[0];
+
+  var thumbTo = checkboxswitch.track.width - checkboxswitch.thumb.width - checkboxswitch.thumb.left;
+  var thumbFrom = checkboxswitch.thumb.left;
+  var shadowDiameter = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+  var shadowAndThumbDiff = shadowDiameter - checkboxswitch.thumb.width;
+  var halfDiff = shadowAndThumbDiff / 2;
+  var thumbShadowFrom = (halfDiff - checkboxswitch.thumb.left) * -1;
+  var thumbShadowTo = thumbTo - halfDiff;
+  useEffect(function () {
+    var toggle = function toggle(isChecked, position) {
+      var animValue = {
+        fromValue: isChecked ? 0 : 1,
+        toValue: isChecked ? 1 : 0,
+        duration: 100,
+        useNativeDriver: false
+      };
+      Animated.timing(position, animValue).start();
+    };
+
+    toggle(!checked, thumbPosition);
+  }, [checked]);
+  return /*#__PURE__*/React.createElement(SwitchTrack, {
+    checked: checked,
+    disabled: disabled,
+    as: Animated.View,
+    style: !disabled && {
+      backgroundColor: thumbPosition.interpolate({
+        inputRange: [0, 1],
+        outputRange: [checkboxswitch.track.checked.backgroundColor, checkboxswitch.track.backgroundColor]
+      })
+    }
+  }, pressed && !disabled && /*#__PURE__*/React.createElement(ThumbShadow, {
+    checked: checked,
+    as: Animated.View,
+    style: {
+      transform: [{
+        translateX: thumbPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [thumbShadowTo, thumbShadowFrom]
+        })
+      }]
+    }
+  }), /*#__PURE__*/React.createElement(SwitchThumb, {
+    checked: checked,
+    disabled: disabled,
+    as: Animated.View,
+    style: {
+      transform: [{
+        translateX: thumbPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [thumbTo, thumbFrom]
+        })
+      }]
+    }
+  }));
+};
+
+CheckboxSwitch.propTypes = {
+  checked: bool,
+  disabled: bool,
+  pressed: bool
+};
+CheckboxSwitch.defaultProps = {
+  checked: false,
+  disabled: false,
+  pressed: false
+};
+CheckboxSwitch.displayName = 'Checkbox.Switch';
+export default withTouchable(withTheme(CheckboxSwitch));

package/esm/Checkbox/native/Switch.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, fireEvent, toJSON } from '@testing-library/react-native';
+import Checkbox from '..';
+import ThemeProvider from '../../Theme';
+jest.useFakeTimers();
+describe('<Checkbox />', function () {
+  describe('<Checkbox.Switch />', function () {
+    describe('Snapshots', function () {
+      it('should match snapshot with default switch', function () {
+        var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, null))),
+            container = _render.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should match snapshot with disabled switch', function () {
+        var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          disabled: true
+        }))),
+            container = _render2.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should match snapshot with checked switch', function () {
+        var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          checked: true
+        }))),
+            container = _render3.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should match snapshot with disabled and checked switch', function () {
+        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          disabled: true,
+          checked: true
+        }))),
+            container = _render4.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should call onChange function when click on Checkbox.Switch', function () {
+        var onChangeMock = jest.fn();
+
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          onChange: onChangeMock,
+          accessibilityRole: "button"
+        }))),
+            getByRole = _render5.getByRole;
+
+        fireEvent.press(getByRole('button'));
+        expect(onChangeMock).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/esm/Checkbox/native/index.js

@@ -0,0 +1,3 @@
+import Switch from './Switch';
+import Checkbox from './Checkbox';
+export { Checkbox, Switch };

package/esm/Checkbox/web/Checkbox.test.js

@@ -0,0 +1,153 @@
+function _extends() { _extends = Object.assign || 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); }
+
+/* eslint-disable no-console */
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Checkbox from '..';
+import ThemeProvider from '../../Theme';
+var data = {
+  label: 'Checkbox Component',
+  helper: 'Helper Text'
+};
+var originalError = console.error;
+beforeEach(function () {
+  console.error = jest.fn();
+});
+afterEach(function () {
+  console.error = originalError;
+});
+describe('<Checkbox />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot without props', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with default checkbox', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, data))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled checkbox', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        disabled: true
+      })))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with checked checkbox', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        checked: true
+      })))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled and checked checkbox', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        disabled: true,
+        checked: true
+      })))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with error checkbox', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        error: "Error msg"
+      })))),
+          container = _render6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with error and checked checkbox', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        error: "Error msg",
+        checked: true
+      })))),
+          container = _render7.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with inverted', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        inverted: true
+      })))),
+          container = _render8.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with inverted and checked', function () {
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        inverted: true,
+        checked: true
+      })))),
+          container = _render9.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with inverted and checked and disabled', function () {
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        inverted: true,
+        checked: true,
+        disabled: true
+      })))),
+          container = _render10.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with indeterminate', function () {
+      var _render11 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, {
+        indeterminate: true
+      }))),
+          container = _render11.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with indeterminate and disabled checkbox', function () {
+      var _render12 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, {
+        indeterminate: true,
+        disabled: true
+      }))),
+          container = _render12.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with error and indeterminate checkbox', function () {
+      var _render13 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        error: "Error msg",
+        indeterminate: true
+      })))),
+          container = _render13.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with inverted and indeterminate', function () {
+      var _render14 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        inverted: true,
+        indeterminate: true
+      })))),
+          container = _render14.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChange function when press on Checkbox', function () {
+      var onChangeMock = jest.fn();
+
+      var _render15 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+        onChange: onChangeMock
+      })))),
+          getByRole = _render15.getByRole;
+
+      fireEvent.click(getByRole('checkbox', {
+        hidden: true
+      }));
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Checkbox/web/Switch.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Checkbox from '..';
+import ThemeProvider from '../../Theme';
+describe('<Checkbox />', function () {
+  describe('<Checkbox.Switch />', function () {
+    describe('Snapshots', function () {
+      it('should match snapshot with default switch', function () {
+        var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, null))),
+            container = _render.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with disabled switch', function () {
+        var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          disabled: true
+        }))),
+            container = _render2.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with checked switch', function () {
+        var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          checked: true
+        }))),
+            container = _render3.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with disabled and checked switch', function () {
+        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          disabled: true,
+          checked: true
+        }))),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should call onChange function when click on Checkbox.Switch', function () {
+        var onChangeMock = jest.fn();
+
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Checkbox.Switch, {
+          disabled: true,
+          checked: true,
+          onChange: onChangeMock
+        }))),
+            getByRole = _render5.getByRole;
+
+        fireEvent.click(getByRole('switch', {
+          hidden: true
+        }));
+        expect(onChangeMock).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/esm/Chips/index.native.js

@@ -0,0 +1,2 @@
+import Chips from './native';
+export default Chips;