@gympass/yoga 7.36.0 → 7.37.2

package/cjs/RadioGroup/native/Radio/Radio.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _propTypes=require("prop-types");var _reactNative=require("react-native");var _yogaCommon=require("@gympass/yoga-common");var _RadioGroupContext=_interopRequireDefault(require("../../RadioGroupContext"));var _excluded=["value","disabled"],_excluded2=["onChange","small","selectedValue"];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;}var RadioMark=_styledComponents["default"].View(function(_ref){var _ref$theme$yoga=_ref.theme.yoga,white=_ref$theme$yoga.colors.white,radiogroup=_ref$theme$yoga.components.radiogroup,checked=_ref.checked,disabled=_ref.disabled,pressed=_ref.pressed;return"\n  justify-content: center;\n  align-items: center;\n  \n  height: "+radiogroup.radio.size+"px;\n  width: "+radiogroup.radio.size+"px;\n\n  background-color: "+(pressed?(0,_yogaCommon.hexToRgb)(radiogroup.hover.backgroundColor,0.75):white)+";\n\n  border-width: "+radiogroup.radio.size*0.1+"px;\n  border-style: solid;\n  border-color: "+radiogroup.radio.backgroundColor+";\n  border-radius: "+radiogroup.radio.border.radius+"px;\n\n  "+(checked?"\n          border-color: "+radiogroup.checked.backgroundColor+";\n          background-color: "+(pressed?(0,_yogaCommon.hexToRgb)(radiogroup.checked.hover.backgroundColor,0.75):white)+"\n        ":"")+"\n\n  "+(disabled?"\n          border-color: "+radiogroup.disabled.backgroundColor+";\n        ":"")+"\n";});var Dot=_styledComponents["default"].View(function(_ref2){var radiogroup=_ref2.theme.yoga.components.radiogroup,checked=_ref2.checked,disabled=_ref2.disabled;return"\n  height: "+radiogroup.radio.size*0.5+"px;\n  width: "+radiogroup.radio.size*0.5+"px;\n\n  background-color: "+radiogroup.radio.backgroundColor+";\n  border-radius: "+radiogroup.radio.border.radius+"px;\n\n  "+(checked?"\n          background-color: "+radiogroup.checked.backgroundColor+";\n        ":"")+"\n\n  "+(disabled?"\n          background-color: "+radiogroup.disabled.backgroundColor+";\n        ":"")+"\n";});var Shadow=_styledComponents["default"].View(function(_ref3){var checked=_ref3.checked,radiogroup=_ref3.theme.yoga.components.radiogroup;return"\n  position: absolute;\n  height: "+(radiogroup.radio.size+radiogroup.radio.size*0.4*2)+"px;\n  width: "+(radiogroup.radio.size+radiogroup.radio.size*0.4*2)+"px;\n\n  border-width: "+radiogroup.radio.size*0.4+"px;\n  border-style: solid;\n  border-color: "+(checked?(0,_yogaCommon.hexToRgb)(radiogroup.checked.hover.backgroundColor,0.75):(0,_yogaCommon.hexToRgb)(radiogroup.hover.backgroundColor,0.75))+";\n  border-radius: "+radiogroup.radio.border.radius+"px;\n\n  opacity: 0.75;\n";});var RadioGroupRadio=function RadioGroupRadio(_ref4){var value=_ref4.value,disabled=_ref4.disabled,rest=(0,_objectWithoutProperties2["default"])(_ref4,_excluded);var _useContext=(0,_react.useContext)(_RadioGroupContext["default"]),onChange=_useContext.onChange,small=_useContext.small,selectedValue=_useContext.selectedValue,context=(0,_objectWithoutProperties2["default"])(_useContext,_excluded2);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2["default"])(_useState,2),pressing=_useState2[0],togglePressing=_useState2[1];var inputValue=value;var checked=inputValue===selectedValue;return _react["default"].createElement(_reactNative.TouchableWithoutFeedback,(0,_extends2["default"])({onPressIn:function onPressIn(){togglePressing(true);},onPress:function onPress(){onChange({value:inputValue});},onPressOut:function onPressOut(){togglePressing(false);},disabled:disabled},context),_react["default"].createElement(RadioMark,(0,_extends2["default"])({checked:checked,disabled:disabled,pressed:pressing},rest),checked&&_react["default"].createElement(Dot,{checked:checked,disabled:disabled}),pressing&&_react["default"].createElement(Shadow,{checked:checked})));};RadioGroupRadio.displayName='RadioGroup.Radio';RadioGroupRadio.propTypes={disabled:_propTypes.bool,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])};RadioGroupRadio.defaultProps={disabled:false,value:''};var _default=RadioGroupRadio;exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _propTypes=require("prop-types");var _reactNative=require("react-native");var _yogaCommon=require("@gympass/yoga-common");var _RadioGroupContext=_interopRequireDefault(require("../../RadioGroupContext"));var _excluded=["value","disabled"],_excluded2=["onChange","small","selectedValue"];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;}var RadioMark=_styledComponents["default"].View(function(_ref){var _ref$theme$yoga=_ref.theme.yoga,white=_ref$theme$yoga.colors.white,radiogroup=_ref$theme$yoga.components.radiogroup,checked=_ref.checked,disabled=_ref.disabled,pressed=_ref.pressed;return"\n  justify-content: center;\n  align-items: center;\n  \n  height: "+radiogroup.radio.size+"px;\n  width: "+radiogroup.radio.size+"px;\n\n  background-color: "+(pressed?(0,_yogaCommon.hexToRgb)(radiogroup.hover.backgroundColor,0.75):white)+";\n\n  border-width: "+radiogroup.radio.size*0.1+"px;\n  border-style: solid;\n  border-color: "+radiogroup.radio.backgroundColor+";\n  border-radius: "+radiogroup.radio.border.radius+"px;\n\n  "+(checked?"\n          border-color: "+radiogroup.checked.backgroundColor+";\n          background-color: "+(pressed?(0,_yogaCommon.hexToRgb)(radiogroup.checked.hover.backgroundColor,0.75):white)+"\n        ":"")+"\n\n  "+(disabled?"\n          border-color: "+radiogroup.disabled.backgroundColor+";\n        ":"")+"\n";});var Dot=_styledComponents["default"].View(function(_ref2){var radiogroup=_ref2.theme.yoga.components.radiogroup,checked=_ref2.checked,disabled=_ref2.disabled;return"\n  height: "+radiogroup.radio.size*0.5+"px;\n  width: "+radiogroup.radio.size*0.5+"px;\n\n  background-color: "+radiogroup.radio.backgroundColor+";\n  border-radius: "+radiogroup.radio.border.radius+"px;\n\n  "+(checked?"\n          background-color: "+radiogroup.checked.backgroundColor+";\n        ":"")+"\n\n  "+(disabled?"\n          background-color: "+radiogroup.disabled.backgroundColor+";\n        ":"")+"\n";});var Shadow=_styledComponents["default"].View(function(_ref3){var checked=_ref3.checked,radiogroup=_ref3.theme.yoga.components.radiogroup;return"\n  position: absolute;\n  height: "+(radiogroup.radio.size+radiogroup.radio.size*0.4*2)+"px;\n  width: "+(radiogroup.radio.size+radiogroup.radio.size*0.4*2)+"px;\n\n  border-width: "+radiogroup.radio.size*0.4+"px;\n  border-style: solid;\n  border-color: "+(checked?(0,_yogaCommon.hexToRgb)(radiogroup.checked.hover.backgroundColor,0.75):(0,_yogaCommon.hexToRgb)(radiogroup.hover.backgroundColor,0.75))+";\n  border-radius: "+radiogroup.radio.border.radius+"px;\n\n  opacity: 0.75;\n";});var RadioGroupRadio=_react["default"].forwardRef(function(_ref4,ref){var value=_ref4.value,disabled=_ref4.disabled,rest=(0,_objectWithoutProperties2["default"])(_ref4,_excluded);var _useContext=(0,_react.useContext)(_RadioGroupContext["default"]),onChange=_useContext.onChange,small=_useContext.small,selectedValue=_useContext.selectedValue,context=(0,_objectWithoutProperties2["default"])(_useContext,_excluded2);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2["default"])(_useState,2),pressing=_useState2[0],togglePressing=_useState2[1];var inputValue=value;var checked=inputValue===selectedValue;return _react["default"].createElement(_reactNative.TouchableWithoutFeedback,(0,_extends2["default"])({onPressIn:function onPressIn(){togglePressing(true);},onPress:function onPress(){onChange({value:inputValue});},onPressOut:function onPressOut(){togglePressing(false);},disabled:disabled},context),_react["default"].createElement(RadioMark,(0,_extends2["default"])({checked:checked,disabled:disabled,pressed:pressing,ref:ref},rest),checked&&_react["default"].createElement(Dot,{checked:checked,disabled:disabled}),pressing&&_react["default"].createElement(Shadow,{checked:checked})));});RadioGroupRadio.displayName='RadioGroup.Radio';RadioGroupRadio.propTypes={disabled:_propTypes.bool,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])};RadioGroupRadio.defaultProps={disabled:false,value:''};var _default=RadioGroupRadio;exports["default"]=_default;

package/cjs/RadioGroup/native/Radio/Radio.test.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _=_interopRequireDefault(require("../.."));var _Theme=_interopRequireDefault(require("../../../Theme"));var _RadioGroupContext=_interopRequireDefault(require("../../RadioGroupContext"));describe('<RadioGroup />',function(){describe('<RadioGroup.Radio />',function(){describe('Snapshots',function(){it('should match snapshot with default radio',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"].Radio,null))),container=_render.container;expect((0,_reactNative.toJSON)(container)).toMatchSnapshot();});it('should match snapshot with disabled radio',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"].Radio,{disabled:true}))),container=_render2.container;expect((0,_reactNative.toJSON)(container)).toMatchSnapshot();});it('should match snapshot with default radio',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"].Radio,null))),container=_render3.container;expect((0,_reactNative.toJSON)(container)).toMatchSnapshot();});it('should match snapshot with default radio pressed',function(){var _render4=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"].Radio,{testID:"radio"}))),container=_render4.container,getByTestId=_render4.getByTestId;var radio=getByTestId(/^radio/);_reactNative.fireEvent.pressIn(radio);expect((0,_reactNative.toJSON)(container)).toMatchSnapshot();});});describe('Props',function(){it('checked should be the selectedValue provided from Context',function(){var _render5=(0,_reactNative.render)(_react["default"].createElement(_RadioGroupContext["default"].Provider,{value:{selectedValue:'Radio 2'}},_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"].Radio,{testID:"radio",value:"Radio 1"}),_react["default"].createElement(_["default"].Radio,{testID:"radio",value:"Radio 2"})))),getAllByTestId=_render5.getAllByTestId;var _getAllByTestId=getAllByTestId(/^radio/),_getAllByTestId2=(0,_slicedToArray2["default"])(_getAllByTestId,2),radio=_getAllByTestId2[0],radio2=_getAllByTestId2[1];expect(radio.props.checked).toBe(false);expect(radio2.props.checked).toBe(true);});});describe('Events',function(){it('should call onchange from Context',function(){var onChangeMock=jest.fn();var _render6=(0,_reactNative.render)(_react["default"].createElement(_RadioGroupContext["default"].Provider,{value:{onChange:onChangeMock}},_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"].Radio,{testID:"radio"})))),getByTestId=_render6.getByTestId;var radio=getByTestId(/^radio/);_reactNative.fireEvent.press(radio);expect(onChangeMock).toHaveBeenCalled();});it('value should be as prop value',function(){var onChangeMock=jest.fn();var _render7=(0,_reactNative.render)(_react["default"].createElement(_RadioGroupContext["default"].Provider,{value:{onChange:onChangeMock}},_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"].Radio,{value:"radio1",testID:"radio"})))),getByTestId=_render7.getByTestId;var radio=getByTestId(/^radio/);_reactNative.fireEvent.press(radio);expect(onChangeMock).toHaveBeenCalledWith({value:'radio1'});});});});});

package/cjs/RadioGroup/native/RadioGroup.test.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _=_interopRequireDefault(require(".."));var _Theme=_interopRequireDefault(require("../../Theme"));describe('<RadioGroup />',function(){describe('Snapshots',function(){it('should match snapshot with radio button as children',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"],null,_react["default"].createElement(_["default"].Button,null,"Option 1"),_react["default"].createElement(_["default"].Button,null,"Option 2"),_react["default"].createElement(_["default"].Button,null,"Option 3")))),container=_render.container,getAllByText=_render.getAllByText;expect((0,_reactNative.toJSON)(container)).toMatchSnapshot();expect(getAllByText(/^Option/)).toHaveLength(3);});it('should match snapshot with small radios',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"],{small:true},_react["default"].createElement(_["default"].Button,null,"Option 1"),_react["default"].createElement(_["default"].Button,null,"Option 2"),_react["default"].createElement(_["default"].Button,null,"Option 3")))),container=_render2.container;expect((0,_reactNative.toJSON)(container)).toMatchSnapshot();});it('should has setted the selected value',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"],{selectedValue:"Option 2"},_react["default"].createElement(_["default"].Button,null,"Option 1"),_react["default"].createElement(_["default"].Button,null,"Option 2"),_react["default"].createElement(_["default"].Button,null,"Option 3")))),container=_render3.container,getByText=_render3.getByText;expect(container).toMatchSnapshot();expect(getByText('Option 2').props.checked).toBe(true);});});});describe('Events',function(){it('should set the onchange for its children',function(){var onChangeMock=jest.fn();var _render4=(0,_reactNative.render)(_react["default"].createElement(_Theme["default"],null,_react["default"].createElement(_["default"],{onChange:onChangeMock},_react["default"].createElement(_["default"].Button,null,"Option 1"),_react["default"].createElement(_["default"].Button,null,"Option 2"),_react["default"].createElement(_["default"].Button,null,"Option 3")))),getByText=_render4.getByText;var firstOption=getByText('Option 1');_reactNative.fireEvent.press(firstOption);expect(onChangeMock).toHaveBeenCalled();});});

package/cjs/RadioGroup/web/Button/RadioButton.js

@@ -45,7 +45,7 @@ var ButtonWrapper = _styledComponents["default"].div(_templateObject2 || (_templ
 value on group to set the selected option. */
 
 
-var RadioGroupButton = function RadioGroupButton(_ref3) {
+var RadioGroupButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
   var children = _ref3.children,
       value = _ref3.value,
       rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
@@ -67,9 +67,10 @@ var RadioGroupButton = function RadioGroupButton(_ref3) {
     value: inputValue,
     checked: checked,
     name: name,
-    onChange: onChange
+    onChange: onChange,
+    ref: ref
   }, rest, context)), children));
-};
+});
 
 RadioGroupButton.displayName = 'RadioGroup.Button';
 RadioGroupButton.propTypes = {

package/cjs/RadioGroup/web/Button/RadioButton.test.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("../.."));
+
+var _Theme = _interopRequireDefault(require("../../../Theme"));
+
+var _RadioGroupContext = _interopRequireDefault(require("../../RadioGroupContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable no-console */
+var originalError = console.error;
+beforeEach(function () {
+  console.error = jest.fn();
+});
+afterEach(function () {
+  console.error = originalError;
+});
+describe('<RadioGroup />', function () {
+  describe('<RadioGroup.Button />', function () {
+    describe('Snapshots', function () {
+      it('should match snapshot with default radio button', function () {
+        var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Radio 1"))),
+            container = _render.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with small radio button', function () {
+        var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroupContext["default"].Provider, {
+          value: {
+            small: true
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Radio 1")))),
+            container = _render2.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('Props', function () {
+      it('should contains input type radio', function () {
+        var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio"
+        }, "Radio 1"))),
+            getByTestId = _render3.getByTestId;
+
+        expect(getByTestId('radio').type).toBe('radio');
+      });
+      it('value should be as prop value', function () {
+        var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio",
+          value: "radio1"
+        }, "Radio 1"))),
+            getByTestId = _render4.getByTestId;
+
+        expect(getByTestId('radio').value).toBe('radio1');
+      });
+      it('value should be children if prop value is ommited', function () {
+        var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio"
+        }, "Radio 1"))),
+            getByTestId = _render5.getByTestId,
+            getByText = _render5.getByText;
+
+        var label = getByText('Radio 1');
+        var radio = getByTestId('radio');
+        expect(radio.value).toBe(label.textContent);
+      });
+      it('checked should be the selectedValue provided from Context', function () {
+        var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroupContext["default"].Provider, {
+          value: {
+            selectedValue: 'Radio 2'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio"
+        }, "Radio 1"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio"
+        }, "Radio 2")))),
+            getAllByTestId = _render6.getAllByTestId;
+
+        var _getAllByTestId = getAllByTestId('radio'),
+            radio = _getAllByTestId[0],
+            radio2 = _getAllByTestId[1];
+
+        expect(radio.checked).toBe(false);
+        expect(radio2.checked).toBe(true);
+      });
+      it('name should the one provided by context', function () {
+        var name = 'test';
+
+        var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroupContext["default"].Provider, {
+          value: {
+            name: name
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio"
+        }, "Radio 1"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio"
+        }, "Radio 2"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+          "data-testid": "radio"
+        }, "Radio 3")))),
+            getAllByTestId = _render7.getAllByTestId;
+
+        var radios = getAllByTestId('radio');
+        radios.map(function (radio) {
+          return expect(radio.name).toBe(name);
+        });
+      });
+    });
+    describe('Events', function () {
+      it('should call onchange from Context', function () {
+        var onChangeMock = jest.fn();
+
+        var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroupContext["default"].Provider, {
+          value: {
+            onChange: onChangeMock
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Radio 1")))),
+            getByText = _render8.getByText;
+
+        var radio = getByText('Radio 1');
+
+        _react2.fireEvent.click(radio);
+
+        expect(onChangeMock).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/cjs/RadioGroup/web/Radio/Radio.js

@@ -54,7 +54,7 @@ var Wrapper = _styledComponents["default"].div(_templateObject3 || (_templateObj
  * single option from a list. */
 
 
-var RadioGroupRadio = function RadioGroupRadio(_ref3) {
+var RadioGroupRadio = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
   var value = _ref3.value,
       disabled = _ref3.disabled,
       style = _ref3.style,
@@ -82,9 +82,10 @@ var RadioGroupRadio = function RadioGroupRadio(_ref3) {
     checked: checked,
     name: name,
     onChange: onChange,
-    disabled: disabled
+    disabled: disabled,
+    ref: ref
   }, rest, context)));
-};
+});
 
 RadioGroupRadio.displayName = 'RadioGroup.Radio';
 RadioGroupRadio.propTypes = {

package/cjs/RadioGroup/web/Radio/Radio.test.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("../.."));
+
+var _Theme = _interopRequireDefault(require("../../../Theme"));
+
+var _RadioGroupContext = _interopRequireDefault(require("../../RadioGroupContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable no-console */
+var originalError = console.error;
+beforeEach(function () {
+  console.error = jest.fn();
+});
+afterEach(function () {
+  console.error = originalError;
+});
+describe('<RadioGroup />', function () {
+  describe('<RadioGroup.Radio />', function () {
+    describe('Snapshots', function () {
+      it('should match snapshot with default radio', function () {
+        var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Radio, null))),
+            container = _render.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('Props', function () {
+      it('should contains input type radio', function () {
+        var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio"
+        }))),
+            getByTestId = _render2.getByTestId;
+
+        expect(getByTestId('radio').type).toBe('radio');
+      });
+      it('value should be as prop value', function () {
+        var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio",
+          value: "radio1"
+        }))),
+            getByTestId = _render3.getByTestId;
+
+        expect(getByTestId('radio').value).toBe('radio1');
+      });
+      it('checked should be the selectedValue provided from Context', function () {
+        var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroupContext["default"].Provider, {
+          value: {
+            selectedValue: 'Radio 2'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio",
+          value: "Radio 1"
+        }), /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio",
+          value: "Radio 2"
+        })))),
+            getAllByTestId = _render4.getAllByTestId;
+
+        var _getAllByTestId = getAllByTestId('radio'),
+            radio = _getAllByTestId[0],
+            radio2 = _getAllByTestId[1];
+
+        expect(radio.checked).toBe(false);
+        expect(radio2.checked).toBe(true);
+      });
+      it('name should be the one provided by context', function () {
+        var name = 'test';
+
+        var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroupContext["default"].Provider, {
+          value: {
+            name: name
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio",
+          value: "Radio 1"
+        }), /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio",
+          value: "Radio 2"
+        }), /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio",
+          value: "Radio 3"
+        })))),
+            getAllByTestId = _render5.getAllByTestId;
+
+        var radios = getAllByTestId('radio');
+        radios.map(function (radio) {
+          return expect(radio.name).toBe(name);
+        });
+      });
+    });
+    describe('Events', function () {
+      it('should call onchange from Context', function () {
+        var onChangeMock = jest.fn();
+
+        var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroupContext["default"].Provider, {
+          value: {
+            onChange: onChangeMock
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Radio, {
+          "data-testid": "radio",
+          value: "Radio 1"
+        })))),
+            getByTestId = _render6.getByTestId;
+
+        var radio = getByTestId('radio');
+
+        _react2.fireEvent.click(radio);
+
+        expect(onChangeMock).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/cjs/RadioGroup/web/RadioGroup.test.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require(".."));
+
+var _Theme = _interopRequireDefault(require("../../Theme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<RadioGroup />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default radiogroup', function () {
+      var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with full radiogroup', function () {
+      var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+        full: true
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with radios as children', function () {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 1"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 2"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 3")))),
+          container = _render3.container,
+          getAllByText = _render3.getAllByText;
+
+      expect(container).toMatchSnapshot();
+      expect(getAllByText(/^Option/)).toHaveLength(3);
+    });
+    it('should match snapshot with small radios', function () {
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+        small: true
+      }, /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 1"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 2"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 3")))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should has setted the selected value', function () {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+        selectedValue: "Option 2"
+      }, /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 1"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 2"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 3")))),
+          container = _render5.container,
+          getByText = _render5.getByText;
+
+      expect(container).toMatchSnapshot();
+      expect(getByText('Option 2').checked).toBe(true);
+    });
+    it('should set the name for all children', function () {
+      var groupName = 'test';
+
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+        name: groupName
+      }, /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+        "data-testid": "Option 1"
+      }, "Option 1"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+        "data-testid": "Option 2"
+      }, "Option 2"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, {
+        "data-testid": "Option 3"
+      }, "Option 3")))),
+          container = _render6.container,
+          getAllByTestId = _render6.getAllByTestId;
+
+      expect(container).toMatchSnapshot(); // use testid to get the input[type=radio] instead of label
+
+      getAllByTestId(/^Option/).map(function (radio) {
+        return expect(radio.name).toBe(groupName);
+      });
+    });
+  });
+});
+describe('Events', function () {
+  it('should set the onchange for its children', function () {
+    var onChangeMock = jest.fn();
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Theme["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      onChange: onChangeMock
+    }, /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 1"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 2"), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null, "Option 3")))),
+        getByText = _render7.getByText;
+
+    var firstOption = getByText('Option 1');
+
+    _react2.fireEvent.click(firstOption);
+
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});

package/cjs/Rating/native/Rating.test.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _=require("../..");var _2=_interopRequireDefault(require("."));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;}describe('<Rating />',function(){describe('Snapshots',function(){it('should match snapshot with Rating',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_2["default"],null))),container=_render.container;expect(container).toMatchSnapshot();});it('should match snapshot when it is not readOnly',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_2["default"],{readOnly:false}))),container=_render2.container;expect(container).toMatchSnapshot();});it('should match snapshot with different values',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_2["default"],{value:0}),_react["default"].createElement(_2["default"],{value:0.5}),_react["default"].createElement(_2["default"],{value:1}),_react["default"].createElement(_2["default"],{value:1.1}),_react["default"].createElement(_2["default"],{value:1.2}),_react["default"].createElement(_2["default"],{value:1.3}),_react["default"].createElement(_2["default"],{value:1.4}),_react["default"].createElement(_2["default"],{value:1.5}),_react["default"].createElement(_2["default"],{value:1.6}),_react["default"].createElement(_2["default"],{value:1.7}),_react["default"].createElement(_2["default"],{value:1.8}),_react["default"].createElement(_2["default"],{value:1.9}),_react["default"].createElement(_2["default"],{value:2}),_react["default"].createElement(_2["default"],{value:2.5}),_react["default"].createElement(_2["default"],{value:3}),_react["default"].createElement(_2["default"],{value:3.5}),_react["default"].createElement(_2["default"],{value:4}),_react["default"].createElement(_2["default"],{value:4.5}))),container=_render3.container;expect(container).toMatchSnapshot();});it('should match snapshot with different icon quantity',function(){var _render4=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_2["default"],{max:3,value:0}),_react["default"].createElement(_2["default"],{max:3,value:0.5}),_react["default"].createElement(_2["default"],{max:3,value:1}),_react["default"].createElement(_2["default"],{max:3,value:1.5}),_react["default"].createElement(_2["default"],{max:3,value:2}),_react["default"].createElement(_2["default"],{max:3,value:2.5}),_react["default"].createElement(_2["default"],{max:3,value:3}))),container=_render4.container;expect(container).toMatchSnapshot();});it('should match snapshot with different icon',function(){var CircleIcon=function CircleIcon(props){return _react["default"].createElement(_reactNativeSvg["default"],props,_react["default"].createElement(_reactNativeSvg.Circle,{cx:12,cy:12,r:12}));};var _render5=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_2["default"],{icon:{type:CircleIcon},value:0}),_react["default"].createElement(_2["default"],{icon:{type:CircleIcon},value:1}),_react["default"].createElement(_2["default"],{icon:{type:CircleIcon},value:2}))),container=_render5.container;expect(container).toMatchSnapshot();});});});

package/cjs/Rating/web/Rating.test.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = require("../..");
+
+var _2 = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+describe('<Rating />', function () {
+  var originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
+  beforeAll(function () {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 76 // 5 stars (5 * 12px + 4 * 4px gutter)
+
+    });
+  });
+  afterAll(function () {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
+  });
+  describe('Snapshots', function () {
+    it('should match snapshot with Rating', function () {
+      var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with different values', function () {
+      var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 0
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 0.5
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.1
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.2
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.3
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.4
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.5
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.6
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.7
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.8
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 1.9
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 2
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 2.5
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 3
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 3.5
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 4
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        value: 4.5
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with different icon quantity', function () {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        max: 3,
+        value: 0
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        max: 3,
+        value: 0.5
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        max: 3,
+        value: 1
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        max: 3,
+        value: 1.5
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        max: 3,
+        value: 2
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        max: 3,
+        value: 2.5
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        max: 3,
+        value: 3
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with different icon', function () {
+      var Circle = function Circle(props) {
+        return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("circle", {
+          cx: "12",
+          cy: "12",
+          r: "12"
+        }));
+      };
+
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        icon: {
+          type: Circle
+        },
+        value: 0
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        icon: {
+          type: Circle
+        },
+        value: 1
+      }), /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        icon: {
+          type: Circle
+        },
+        value: 2
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot when mouse over', function () {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        readOnly: false
+      }))),
+          container = _render5.container;
+
+      var firstChild = container.firstChild;
+
+      _react2.fireEvent.mouseMove(firstChild, {
+        /** Each star has 12px. Gutter is 4px.
+         * For the third star, we should set clentX > 32px and < 48px */
+        clientX: 40
+      });
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onRate when clicking', function () {
+      var onRateMock = jest.fn();
+
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        onRate: onRateMock,
+        readOnly: false
+      }))),
+          container = _render6.container;
+
+      var firstChild = container.firstChild;
+
+      _react2.fireEvent.mouseMove(firstChild, {
+        clientX: 40 // third star position
+
+      });
+
+      _react2.fireEvent.click(firstChild);
+
+      expect(onRateMock).toHaveBeenCalled();
+      expect(onRateMock).toHaveBeenCalledWith(3);
+    });
+    it('should call onMouseOver callback', function () {
+      var onMouseOverMock = jest.fn();
+
+      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        onMouseOver: onMouseOverMock,
+        readOnly: false
+      }))),
+          container = _render7.container;
+
+      var firstChild = container.firstChild;
+
+      _react2.fireEvent.mouseOver(firstChild);
+
+      expect(onMouseOverMock).toHaveBeenCalled();
+    });
+    it('should call onMouseLeave callback', function () {
+      var onMouseLeaveMock = jest.fn();
+
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+        onMouseLeave: onMouseLeaveMock,
+        readOnly: false
+      }))),
+          container = _render8.container;
+
+      var firstChild = container.firstChild;
+
+      _react2.fireEvent.mouseLeave(firstChild);
+
+      expect(onMouseLeaveMock).toHaveBeenCalled();
+    });
+  });
+});