@gympass/yoga 7.87.1 → 7.88.0

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

@@ -1,64 +1,153 @@
-var _excluded = ["children", "value"],
-    _excluded2 = ["name", "onChange", "small", "selectedValue"];
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useContext } from "react";
+import { string, oneOfType, number } from "prop-types";
+import styled from "styled-components";
+import RadioGroupContext from "../../RadioGroupContext";
+import { HiddenInput } from "../../../shared";
+const Button = styled.label`
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
 
-var _templateObject, _templateObject2;
+  min-width: 126px;
+  white-space: nowrap;
 
-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); }
+  cursor: pointer;
 
-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; }
+  ${({
+  theme: {
+    yoga: {
+      components: { radiogroup }
+    }
+  },
+  small,
+  checked
+}) => `
+    box-sizing: border-box;
+    background-color: ${radiogroup.button.backgroundColor};
+    border-radius: ${radiogroup.button.border.radius}px;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+    ${checked ? `
+            background-color: ${radiogroup.checked.backgroundColor};
+            box-shadow: 0 0 0  ${radiogroup.button.border.width}px ${radiogroup.checked.backgroundColor};
+            color: ${radiogroup.checked.font.color};
+            font-weight: ${radiogroup.checked.font.weight};
+            z-index: 1;
+          ` : `
+          &:hover, &:focus {
+            background-color: ${radiogroup.hover.backgroundColor};
+          }
+        `}
 
-import React, { useContext } from 'react';
-import { string, oneOfType, number } from 'prop-types';
-import styled from 'styled-components';
-import RadioGroupContext from '../../RadioGroupContext';
-import { HiddenInput } from '../../../shared';
-var Button = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n\n  min-width: 126px;\n  white-space: nowrap;\n\n  cursor: pointer;\n\n  ", "\n"])), function (_ref) {
-  var radiogroup = _ref.theme.yoga.components.radiogroup,
-      small = _ref.small,
-      checked = _ref.checked;
-  return "\n    box-sizing: border-box;\n    background-color: " + radiogroup.button.backgroundColor + ";\n    border-radius: " + radiogroup.button.border.radius + "px;\n\n    " + (checked ? "\n            background-color: " + radiogroup.checked.backgroundColor + ";\n            box-shadow: 0 0 0  " + radiogroup.button.border.width + "px " + radiogroup.checked.backgroundColor + ";\n            color: " + radiogroup.checked.font.color + ";\n            font-weight: " + radiogroup.checked.font.weight + ";\n            z-index: 1;\n          " : "\n          &:hover, &:focus {\n            background-color: " + radiogroup.hover.backgroundColor + ";\n          }\n        ") + "\n\n    font-size: " + radiogroup.font.size + "px;\n    height: " + (small ? radiogroup.button.height.small : radiogroup.button.height.normal) + "px;\n    padding-left: " + radiogroup.button.padding.left + "px;\n    padding-right: " + radiogroup.button.padding.right + "px;\n  ";
-});
-var ButtonWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  border-style: solid;\n\n  ", "\n"])), function (_ref2) {
-  var radiogroup = _ref2.theme.yoga.components.radiogroup;
-  return "\n    border-color: " + radiogroup.button.border.color + ";\n    border-top-width: " + radiogroup.button.border.width + "px;\n    border-bottom-width: " + radiogroup.button.border.width + "px;\n    \n    border-left: none;\n    border-right: none;\n    \n    &:first-child {\n      border-right-width: 0;\n      border-left-width: " + radiogroup.button.border.width + "px;\n      border-left-style: solid;\n      border-left-color: " + radiogroup.button.border.color + ";\n\n      border-top-left-radius: " + radiogroup.button.border.radius + "px;\n      border-bottom-left-radius: " + radiogroup.button.border.radius + "px;\n    }\n  \n    &:last-child {\n      border-left-width: 0;\n\n      border-right-width: " + radiogroup.button.border.width + "px;\n      border-right-style: solid;\n      border-right-color: " + radiogroup.button.border.color + ";\n\n      border-top-right-radius: " + radiogroup.button.border.radius + "px;\n      border-bottom-right-radius: " + radiogroup.button.border.radius + "px;\n    }\n  ";
-});
-/** Radio group allows user to select one option from a set of options. Use
-value on group to set the selected option. */
+    font-size: ${radiogroup.font.size}px;
+    height: ${small ? radiogroup.button.height.small : radiogroup.button.height.normal}px;
+    padding-left: ${radiogroup.button.padding.left}px;
+    padding-right: ${radiogroup.button.padding.right}px;
+  `}
+`;
+const ButtonWrapper = styled.div`
+  border-style: solid;
 
-var RadioGroupButton = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-      value = _ref3.value,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+  ${({
+  theme: {
+    yoga: {
+      components: { radiogroup }
+    }
+  }
+}) => `
+    border-color: ${radiogroup.button.border.color};
+    border-top-width: ${radiogroup.button.border.width}px;
+    border-bottom-width: ${radiogroup.button.border.width}px;
+    
+    border-left: none;
+    border-right: none;
+    
+    &:first-child {
+      border-right-width: 0;
+      border-left-width: ${radiogroup.button.border.width}px;
+      border-left-style: solid;
+      border-left-color: ${radiogroup.button.border.color};
 
-  var _useContext = useContext(RadioGroupContext),
-      name = _useContext.name,
-      onChange = _useContext.onChange,
-      small = _useContext.small,
-      selectedValue = _useContext.selectedValue,
-      context = _objectWithoutPropertiesLoose(_useContext, _excluded2);
+      border-top-left-radius: ${radiogroup.button.border.radius}px;
+      border-bottom-left-radius: ${radiogroup.button.border.radius}px;
+    }
+  
+    &:last-child {
+      border-left-width: 0;
 
-  var inputValue = value || children;
-  var checked = inputValue === selectedValue;
-  return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-    small: small,
-    checked: checked
-  }, /*#__PURE__*/React.createElement(HiddenInput, _extends({
-    type: "radio",
-    value: inputValue,
-    checked: checked,
-    name: name,
-    onChange: onChange,
-    ref: ref
-  }, rest, context)), children));
-});
-RadioGroupButton.displayName = 'RadioGroup.Button';
+      border-right-width: ${radiogroup.button.border.width}px;
+      border-right-style: solid;
+      border-right-color: ${radiogroup.button.border.color};
+
+      border-top-right-radius: ${radiogroup.button.border.radius}px;
+      border-bottom-right-radius: ${radiogroup.button.border.radius}px;
+    }
+  `}
+`;
+const RadioGroupButton = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, value } = _b, rest = __objRest(_b, ["children", "value"]);
+    const _a2 = useContext(RadioGroupContext), { name, onChange, small, selectedValue } = _a2, context = __objRest(_a2, ["name", "onChange", "small", "selectedValue"]);
+    const inputValue = value || children;
+    const checked = inputValue === selectedValue;
+    return /* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsxs(Button, __spreadProps(__spreadValues({}, { small, checked }), { children: [
+      /* @__PURE__ */ jsx(
+        HiddenInput,
+        __spreadValues(__spreadValues({
+          type: "radio",
+          value: inputValue,
+          checked,
+          name,
+          onChange,
+          ref
+        }, rest), context)
+      ),
+      children
+    ] })) });
+  }
+);
+RadioGroupButton.displayName = "RadioGroup.Button";
 RadioGroupButton.propTypes = {
   children: oneOfType([string, number]).isRequired,
   value: oneOfType([string, number])
 };
 RadioGroupButton.defaultProps = {
-  value: ''
+  value: ""
+};
+var RadioButton_default = RadioGroupButton;
+export {
+  RadioButton_default as default
 };
-export default RadioGroupButton;

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

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