@gympass/yoga 7.66.0 → 7.66.1

package/esm/Banner/native/Banner.js

@@ -0,0 +1,128 @@
+var _excluded = ["button"],
+    _excluded2 = ["icon", "variant", "message", "primaryButton", "secondaryButton"];
+
+var _templateObject;
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _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 from 'styled-components';
+import { borders, margins } from '@gympass/yoga-system';
+import { func, oneOf, string, checkPropTypes, elementType, shape } from 'prop-types';
+import Box from '../../Box';
+import Button from '../../Button';
+import Icon from '../../Icon';
+import Text from '../../Text';
+var StyledBanner = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  align-items: center;\n  ", "\n\n  ", "\n  \n  ", "\n"])), function (_ref) {
+  var variant = _ref.variant,
+      _ref$theme$yoga = _ref.theme.yoga,
+      banner = _ref$theme$yoga.components.banner,
+      spacing = _ref$theme$yoga.spacing,
+      _ref$theme$yoga$color = _ref$theme$yoga.colors.feedback[variant],
+      backgroundColor = _ref$theme$yoga$color === void 0 ? {
+    light: banner.defaultBackgroundColor
+  } : _ref$theme$yoga$color;
+  return "\n    background-color: " + backgroundColor.light + ";\n    padding: " + spacing.xxsmall + "px\n      " + spacing.small + "px;\n    border-radius: " + banner.border.radius + "px;\n  ";
+}, margins, borders);
+var BannerActionButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$button = _ref2.button,
+      label = _ref2$button.label,
+      action = _ref2$button.action,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: Button.Text,
+    small: true,
+    secondary: true,
+    onPress: action,
+    ref: ref
+  }, props), label);
+});
+BannerActionButton.propTypes = {
+  button: shape({
+    label: string.isRequired,
+    action: func.isRequired
+  }).isRequired
+};
+/** A banner is a component that displays a prominent message. It can have related action buttons on it or not. */
+
+var Banner = /*#__PURE__*/forwardRef(function (props, ref) {
+  var icon = props.icon,
+      variant = props.variant,
+      message = props.message,
+      primaryButton = props.primaryButton,
+      secondaryButton = props.secondaryButton,
+      rest = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  return /*#__PURE__*/React.createElement(StyledBanner, _extends({
+    ref: ref,
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(Box, {
+    flexDirection: "row",
+    flex: 1,
+    alignItems: "center"
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    as: icon,
+    size: "medium",
+    fill: "secondary",
+    marginRight: "xxsmall"
+  }), /*#__PURE__*/React.createElement(Text.Small, {
+    flex: 1,
+    marginVertical: "xxsmall"
+  }, message), primaryButton && !secondaryButton && /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: primaryButton,
+    marginLeft: "xxsmall"
+  })), primaryButton && secondaryButton && /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flex: 1,
+    justifyContent: "flex-end",
+    flexDirection: "row",
+    marginBottom: "xxsmall"
+  }, /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: primaryButton,
+    marginRight: "xxxsmall"
+  }), /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: secondaryButton
+  })));
+});
+var BannerActionButtonType = shape({
+  label: string.isRequired,
+  action: func.isRequired
+});
+Banner.propTypes = {
+  /** SVG to be rendered. */
+  icon: elementType,
+
+  /** style the banner following the theme (success, informative, attention) */
+  variant: oneOf(['success', 'informative', 'attention']),
+
+  /** the message to be displayed */
+  message: string.isRequired,
+
+  /** the label and action fuction are required for banner action buttons  */
+  primaryButton: BannerActionButtonType,
+
+  /** the secondary button should only be used assemble the primary button (the label and action fuction are required for banner action buttons).  */
+  secondaryButton: function secondaryButton(props, propName, componentName) {
+    var _checkPropTypes;
+
+    var primaryButton = props.primaryButton;
+
+    if (!primaryButton && !!props[propName]) {
+      return new Error("The " + propName + " must only be used ensemble with the primaryButton.");
+    }
+
+    return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = BannerActionButtonType, _checkPropTypes), props, 'prop', componentName);
+  }
+};
+Banner.defaultProps = {
+  icon: undefined,
+  variant: 'informative',
+  primaryButton: undefined,
+  secondaryButton: undefined
+};
+export default Banner;

package/esm/Banner/native/Banner.test.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+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."
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).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"
+    }))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).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"
+    }))),
+        toJSON = _render3.toJSON;
+
+    expect(toJSON()).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() {}
+      }
+    }))),
+        toJSON = _render4.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should call button action function when the banner button is pressed', function () {
+    var onButtonPressMock = jest.fn();
+
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Action',
+        action: onButtonPressMock
+      }
+    }))),
+        getByText = _render5.getByText;
+
+    fireEvent.press(getByText('Action'));
+    expect(onButtonPressMock).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() {}
+      }
+    }))),
+        toJSON = _render6.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should call both buttons action function when each banner action button are pressed', function () {
+    var onPrimaryButtonPressMock = jest.fn();
+    var onSecondaryButtonPressMock = jest.fn();
+
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Primary Action',
+        action: onPrimaryButtonPressMock
+      },
+      secondaryButton: {
+        label: 'Secondary Action',
+        action: onSecondaryButtonPressMock
+      }
+    }))),
+        getByText = _render7.getByText;
+
+    fireEvent.press(getByText('Primary Action'));
+    expect(onPrimaryButtonPressMock).toHaveBeenCalled();
+    fireEvent.press(getByText('Secondary Action'));
+    expect(onSecondaryButtonPressMock).toHaveBeenCalled();
+  });
+});

package/esm/Banner/native/index.js

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

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,48 @@
+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);
+  });
+  it('should hide the close button', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
+      isOpen: true,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"))));
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+  it('should show the close button', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
+      isOpen: true,
+      hideCloseButton: false,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"))));
+    expect(screen.getByRole('button')).not.toBeNull();
+  });
+});

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")))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).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 ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _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 };