@gympass/yoga 7.37.0 → 7.38.0

package/esm/Banner/web/Banner.test.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { CheckedFull } from '@gympass/yoga-icons';
+import { ThemeProvider, Banner } from '../..';
+describe('<Banner />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Feedback message."
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with custom variant', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      variant: "success",
+      message: "Success banner without button"
+    }), /*#__PURE__*/React.createElement(Banner, {
+      variant: "informative",
+      message: "Informative banner without button"
+    }), /*#__PURE__*/React.createElement(Banner, {
+      variant: "attention",
+      message: "Attention banner without button"
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with icon', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      icon: CheckedFull,
+      message: "Banner with icon"
+    }))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with button', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Action',
+        action: function action() {}
+      }
+    }))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should call button action function when the banner button is clicked', function () {
+    var onButtonClickMock = jest.fn();
+
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Action',
+        action: onButtonClickMock
+      }
+    }))),
+        getByRole = _render5.getByRole;
+
+    fireEvent.click(getByRole('button', {
+      name: 'Action'
+    }));
+    expect(onButtonClickMock).toHaveBeenCalled();
+  });
+  it('should match snapshot with two action buttons', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with two action buttons",
+      primaryButton: {
+        label: 'Primary Action',
+        action: function action() {}
+      },
+      secondaryButton: {
+        label: 'Secondary Action',
+        action: function action() {}
+      }
+    }))),
+        container = _render6.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should call both buttons action function when each banner action button are clicked', function () {
+    var onPrimaryButtonClickMock = jest.fn();
+    var onSecondaryButtonClickMock = jest.fn();
+
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Primary Action',
+        action: onPrimaryButtonClickMock
+      },
+      secondaryButton: {
+        label: 'Secondary Action',
+        action: onSecondaryButtonClickMock
+      }
+    }))),
+        getByRole = _render7.getByRole;
+
+    fireEvent.click(getByRole('button', {
+      name: 'Primary Action'
+    }));
+    expect(onPrimaryButtonClickMock).toHaveBeenCalled();
+    fireEvent.click(getByRole('button', {
+      name: 'Secondary Action'
+    }));
+    expect(onSecondaryButtonClickMock).toHaveBeenCalled();
+  });
+});

package/esm/BottomSheet/web/BottomSheet.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { screen, render, fireEvent, cleanup } from '@testing-library/react';
+import { ThemeProvider, Button } from '../..';
+import BottomSheet from '.';
+describe('<BottomSheet />', function () {
+  afterEach(cleanup);
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"), /*#__PURE__*/React.createElement(BottomSheet.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(BottomSheet.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal bottom sheet', function () {
+    var onActionMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"), /*#__PURE__*/React.createElement(BottomSheet.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(BottomSheet.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+    screen.getByText('Title');
+    screen.getByText('Subtitle');
+    var button = screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+    fireEvent.click(button);
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+});

package/esm/Box/index.native.js

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

package/esm/Box/native/Box.js

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { system } from '@gympass/yoga-system';
+var Box = styled.View(system);
+export default Box;

package/esm/Box/native/Box.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Box, Text } from '../..';
+describe('<Box />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      b: "small",
+      p: "small",
+      borderRadius: "small",
+      color: "feedback.success.dark"
+    }, /*#__PURE__*/React.createElement(Text, null, "Making wellbeing universal")))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Box/native/index.js

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

package/esm/Box/web/Box.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Box } from '../..';
+describe('<Box />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      b: "small",
+      p: "small",
+      borderRadius: "small",
+      color: "feedback.success.dark"
+    }, "Making wellbeing universal"))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Button/index.native.js

@@ -0,0 +1,8 @@
+import Button from './native/Button';
+import ButtonText from './native/Text';
+import ButtonLink from './native/Link';
+import ButtonIcon from './native/Icon';
+Button.Text = ButtonText;
+Button.Link = ButtonLink;
+Button.Icon = ButtonIcon;
+export default Button;

package/esm/Button/native/Button.js

@@ -0,0 +1,110 @@
+var _excluded = ["children", "full", "disabled", "small", "pressed", "inverted", "secondary", "icon", "theme"];
+
+var _templateObject, _templateObject2;
+
+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, { forwardRef } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { node, oneOfType, func, bool } from 'prop-types';
+import withTouchable from './withTouchable';
+import Text from '../../Text';
+var Label = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  ", "\n"])), function (_ref) {
+  var small = _ref.small,
+      color = _ref.color,
+      button = _ref.theme.yoga.components.button;
+  return "\n      font-size: " + (small ? button.font.size.small : button.font.size["default"]) + "px;\n      color: " + color + ";\n    ";
+});
+var ButtonContainer = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var pressed = _ref2.pressed,
+      disabled = _ref2.disabled,
+      full = _ref2.full,
+      small = _ref2.small,
+      inverted = _ref2.inverted,
+      secondary = _ref2.secondary,
+      button = _ref2.theme.yoga.components.button;
+  var state = secondary ? 'secondary' : 'primary';
+  return "\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n\n      background-color: " + button.types.contained.backgroundColor[state]["default"] + ";\n      border-radius: " + button.border.radius + "px;\n      height: " + (small ? button.height.small : button.height["default"]) + ";\n      justify-content: center;\n      padding-left: " + (small ? button.padding.small.left : button.padding["default"].left) + "px;\n      padding-right: " + (small ? button.padding.small.right : button.padding["default"].right) + "px;\n      " + (full ? 'width: 100%;' : '') + "\n\n      " + (!disabled && pressed ? "\n        background-color: " + button.types.contained.backgroundColor[state].pressed + ";\n      " : '') + "\n\n      " + (disabled ? "\n        background-color: " + button.types.contained.backgroundColor.disabled + ";\n      " : '') + "\n\n      " + (inverted && !disabled ? "\n          background-color: " + button.types.contained.font["default"].color + ";\n        " : '') + "\n    ";
+});
+/** Buttons make common actions more obvious and help users more easily perform
+them. Buttons use labels and sometimes icons to communicate the action that will
+occur when the user touches them. */
+
+var Button = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      full = _ref3.full,
+      disabled = _ref3.disabled,
+      small = _ref3.small,
+      pressed = _ref3.pressed,
+      inverted = _ref3.inverted,
+      secondary = _ref3.secondary,
+      Icon = _ref3.icon,
+      button = _ref3.theme.yoga.components.button,
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+
+  var state = secondary ? 'secondary' : 'primary';
+  var textColor = button.types.contained.font["default"].color;
+
+  if (disabled) {
+    textColor = button.types.contained.font.disabled.color;
+  } else if (inverted) {
+    textColor = button.types.contained.backgroundColor[state]["default"];
+
+    if (pressed) {
+      textColor = button.types.contained.backgroundColor[state].pressed;
+    }
+  } else if (pressed) {
+    textColor = button.types.contained.font.pressed.color;
+  }
+
+  return /*#__PURE__*/React.createElement(ButtonContainer, _extends({}, rest, {
+    full: full,
+    pressed: pressed,
+    disabled: disabled,
+    small: small,
+    inverted: inverted,
+    secondary: secondary,
+    ref: ref
+  }), Icon && /*#__PURE__*/React.createElement(Icon, {
+    width: small ? button.icon.size.small : button.icon.size["default"],
+    height: small ? button.icon.size.small : button.icon.size["default"],
+    fill: textColor,
+    style: {
+      marginRight: button.icon.margin.right
+    }
+  }), /*#__PURE__*/React.createElement(Label, {
+    disabled: disabled,
+    pressed: pressed,
+    inverted: inverted,
+    small: small,
+    color: textColor
+  }, children));
+});
+Button.propTypes = {
+  children: node,
+  full: bool,
+  disabled: bool,
+  small: bool,
+  pressed: bool,
+  inverted: bool,
+  secondary: bool,
+
+  /** an Icon from yoga-icons package */
+  icon: oneOfType([bool, func])
+};
+Button.defaultProps = {
+  children: 'Button',
+  full: false,
+  disabled: false,
+  small: false,
+  pressed: false,
+  inverted: false,
+  secondary: false,
+  icon: undefined
+};
+var ButtonWithTouchable = withTouchable(withTheme(Button));
+export { Label, ButtonContainer, ButtonWithTouchable as default };