@gympass/yoga 7.87.0 → 7.88.0

package/esm/Avatar/native/Avatar.js

@@ -1,127 +0,0 @@
-var _excluded = ["icon", "src", "children", "fill", "stroke", "borderRadius", "width", "height"];
-
-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 { BuildingFilled } from '@gympass/yoga-icons';
-import { string, func, number } from 'prop-types';
-import { ImagePropTypes } from 'deprecated-react-native-prop-types';
-import { Image, StyleSheet } from 'react-native';
-import styled from 'styled-components';
-import { hexToRgb } from '@gympass/yoga-common';
-import Box from '../../Box';
-import Icon from '../../Icon';
-var BORDER_WIDTH = StyleSheet.hairlineWidth;
-var BORDER_OPACITY = 0.25;
-var Contain = styled(Box).attrs(function (_ref) {
-  var yoga = _ref.theme.yoga;
-  return {
-    bgColor: hexToRgb(yoga.colors.secondary, BORDER_OPACITY)
-  };
-})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  padding: ", "px;\n"])), BORDER_WIDTH);
-
-var Content = function Content(_ref2) {
-  var icon = _ref2.icon,
-      src = _ref2.src,
-      fill = _ref2.fill,
-      content = _ref2.content,
-      stroke = _ref2.stroke;
-
-  if (src) {
-    return /*#__PURE__*/React.createElement(Box, {
-      as: Image,
-      width: "100%",
-      height: "100%",
-      source: src
-    });
-  }
-
-  if (content) {
-    return content;
-  }
-
-  return /*#__PURE__*/React.createElement(Icon, {
-    as: icon,
-    width: "50%",
-    height: "50%",
-    fill: fill,
-    stroke: stroke
-  });
-};
-/**
- * The Avatar component is used to display the image.
- * It has two shapes: default and circle
- */
-
-
-var Avatar = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var _ref3$icon = _ref3.icon,
-      icon = _ref3$icon === void 0 ? BuildingFilled : _ref3$icon,
-      src = _ref3.src,
-      children = _ref3.children,
-      fill = _ref3.fill,
-      stroke = _ref3.stroke,
-      borderRadius = _ref3.borderRadius,
-      width = _ref3.width,
-      height = _ref3.height,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded);
-
-  return /*#__PURE__*/React.createElement(Contain, {
-    width: width,
-    height: height,
-    borderRadius: borderRadius,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden"
-  }, /*#__PURE__*/React.createElement(Box, _extends({
-    ref: ref,
-    bgColor: "elements.selectionAndIcons",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    borderRadius: borderRadius
-  }, props), /*#__PURE__*/React.createElement(Content, {
-    icon: icon,
-    src: src,
-    fill: fill,
-    stroke: stroke,
-    content: children
-  })));
-});
-Content.propTypes = _extends({
-  src: ImagePropTypes.source,
-  icon: func,
-  fill: string
-}, Box.propTypes);
-Content.defaultProps = {
-  src: undefined,
-  fill: 'white',
-  icon: BuildingFilled
-};
-Avatar.propTypes = _extends({
-  src: ImagePropTypes.source,
-  icon: func,
-  fill: string,
-  width: number,
-  height: number,
-  borderRadius: string
-}, Box.propTypes);
-Avatar.defaultProps = _extends({
-  src: undefined,
-  fill: 'white',
-  width: 48,
-  height: 48,
-  borderRadius: 'small'
-}, Box.defaultProps);
-Avatar.displayName = 'Avatar';
-export default Avatar;

package/esm/Avatar/native/Avatar.test.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { UserFilled } from '@gympass/yoga-icons';
-import { ThemeProvider } from '../..';
-import Avatar from './Avatar';
-import Text from '../../Text';
-describe('<Avatar />', function () {
-  it('should match snapshot in default avatar', function () {
-    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
-      width: 78,
-      height: 78,
-      fill: "black"
-    }))),
-        toJSON = _render.toJSON;
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-  it('should match snapshot in default avatar with placeholder prop', function () {
-    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
-      placeholder: UserFilled
-    }))),
-        toJSON = _render2.toJSON;
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-  it('should match snapshot in circle avatar', function () {
-    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, null))),
-        toJSON = _render3.toJSON;
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-  it('should match snapshot in circle avatar with placeholder prop', function () {
-    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, {
-      placeholder: UserFilled
-    }))),
-        toJSON = _render4.toJSON;
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-  it('should match snapshot in avatar with children prop', function () {
-    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement(Text, null, "AL")))),
-        toJSON = _render5.toJSON;
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/esm/Avatar/native/AvatarCircle.js

@@ -1,24 +0,0 @@
-var _excluded = ["src"];
-
-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; }
-
-import React, { forwardRef } from 'react';
-import { UserFilled } from '@gympass/yoga-icons';
-import Avatar from './Avatar';
-var AvatarCircle = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var src = _ref.src,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Avatar, _extends({}, props, {
-    src: src,
-    borderRadius: "circle",
-    icon: !src ? UserFilled : undefined,
-    ref: ref
-  }));
-});
-AvatarCircle.propTypes = Avatar.propTypes;
-AvatarCircle.defaultProps = Avatar.defaultProps;
-AvatarCircle.displayName = 'Avatar.Circle';
-export default AvatarCircle;

package/esm/Banner/Banner.theme.js

@@ -1,12 +0,0 @@
-var Banner = function Banner(_ref) {
-  var colors = _ref.colors,
-      radii = _ref.radii;
-  return {
-    defaultBackgroundColor: colors.feedback.informative.light,
-    border: {
-      radius: radii.small
-    }
-  };
-};
-
-export default Banner;

package/esm/Banner/index.js

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

package/esm/Banner/index.native.js

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

package/esm/Banner/native/Banner.js

@@ -1,129 +0,0 @@
-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,
-    marginTop: "xxsmall",
-    marginBottom: "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

@@ -1,103 +0,0 @@
-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

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

package/esm/BottomSheet/BottomSheet.theme.js

@@ -1,26 +0,0 @@
-var BottomSheet = function BottomSheet(_ref) {
-  var radii = _ref.radii,
-      spacing = _ref.spacing;
-  return {
-    border: {
-      radius: radii.regular
-    },
-    padding: {
-      top: spacing.large,
-      right: spacing.medium,
-      bottom: spacing.large,
-      left: spacing.medium
-    },
-    width: {
-      "default": 100
-    },
-    height: {
-      min: 160
-    },
-    position: {
-      "default": spacing.zero
-    }
-  };
-};
-
-export default BottomSheet;

package/esm/BottomSheet/index.js

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

package/esm/Box/index.js

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

package/esm/Box/index.native.js

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

package/esm/Box/native/Box.js

@@ -1,4 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

package/esm/Button/Button.theme.js

@@ -1,137 +0,0 @@
-import { hexToRgb } from '@gympass/yoga-common';
-
-var Button = function Button(_ref) {
-  var spacing = _ref.spacing,
-      fontSizes = _ref.fontSizes,
-      borders = _ref.borders,
-      radii = _ref.radii,
-      colors = _ref.colors,
-      fontWeights = _ref.fontWeights;
-  return {
-    padding: {
-      "default": {
-        right: spacing.large,
-        left: spacing.large
-      },
-      small: {
-        right: spacing.small,
-        left: spacing.small
-      }
-    },
-    height: {
-      "default": 48,
-      small: 32
-    },
-    font: {
-      size: {
-        "default": fontSizes.medium,
-        small: fontSizes.small
-      },
-      weight: fontWeights.medium
-    },
-    border: {
-      radius: radii.circle
-    },
-    icon: {
-      size: {
-        "default": 24,
-        small: 16
-      },
-      margin: {
-        right: spacing.xxsmall
-      }
-    },
-    types: {
-      contained: {
-        backgroundColor: {
-          disabled: colors.elements.backgroundAndDisabled,
-          primary: {
-            "default": colors.primary,
-            pressed: hexToRgb(colors.primary, 0.75)
-          },
-          secondary: {
-            "default": colors.secondary,
-            pressed: hexToRgb(colors.secondary, 0.75)
-          }
-        },
-        font: {
-          "default": {
-            color: colors.white
-          },
-          disabled: {
-            color: colors.deep
-          },
-          pressed: {
-            color: colors.white
-          }
-        }
-      },
-      outline: {
-        backgroundColor: {
-          "default": 'transparent',
-          primary: {
-            hover: colors.primary
-          },
-          secondary: {
-            hover: colors.secondary
-          }
-        },
-        border: {
-          width: borders.small
-        },
-        font: {
-          "default": {
-            primary: {
-              color: colors.primary
-            },
-            secondary: {
-              color: colors.secondary
-            }
-          },
-          disabled: {
-            color: colors.deep
-          },
-          hover: {
-            color: colors.white
-          },
-          pressed: {
-            primary: {
-              color: hexToRgb(colors.primary, 0.75)
-            },
-            secondary: {
-              color: hexToRgb(colors.secondary, 0.75)
-            }
-          }
-        }
-      },
-      text: {
-        backgroundColor: 'transparent',
-        disabled: colors.deep
-      },
-      link: {
-        font: {
-          primary: {
-            color: colors.primary
-          },
-          secondary: {
-            color: colors.secondary
-          },
-          disabled: {
-            color: colors.deep
-          }
-        },
-        margin: {
-          top: spacing.small,
-          bottom: spacing.xxsmall
-        },
-        icon: {
-          margin: {
-            right: spacing.xxxsmall
-          }
-        }
-      }
-    }
-  };
-};
-
-export default Button;

package/esm/Button/index.js

@@ -1,10 +0,0 @@
-import Button from './web/Button';
-import ButtonOutline from './web/Outline';
-import ButtonText from './web/Text';
-import ButtonLink from './web/Link';
-import ButtonIcon from './web/Icon';
-Button.Outline = ButtonOutline;
-Button.Text = ButtonText;
-Button.Link = ButtonLink;
-Button.Icon = ButtonIcon;
-export default Button;

package/esm/Button/index.native.js

@@ -1,8 +0,0 @@
-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;