@gympass/yoga 7.37.0 → 7.38.0

package/esm/Card/native/PlanCard/Actions.js

@@ -0,0 +1,24 @@
+var _templateObject, _templateObject2, _templateObject3;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+import Actions from '../Card/Actions';
+import Button from '../../../Button';
+import theme from '../../../Theme/helpers/themeReader';
+var _theme$components = theme.components,
+    cardnative = _theme$components.cardnative,
+    card = _theme$components.card;
+var PlanCardButton = styled(Button).attrs({
+  small: false,
+  full: true
+})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+var PlanCardButtonText = styled(Button.Text).attrs({
+  small: true,
+  full: true
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"])), cardnative.plan.actions.buttonText.margin.top, card.plan.actions.buttonText.margin.bottom);
+var PlanCardActions = styled(Actions)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n"])), cardnative.plan.actions.margin.top);
+PlanCardActions.displayName = 'PlanCard.Actions';
+PlanCardButton.displayName = 'PlanCard.Button';
+PlanCardButtonText.displayName = 'PlanCard.ButtonText';
+export { PlanCardActions as Actions, PlanCardButton as Button, PlanCardButtonText as ButtonText };

package/esm/Card/native/PlanCard/Content.js

@@ -0,0 +1,75 @@
+var _excluded = ["title", "subtitle", "description", "currency", "suffix", "price", "period", "children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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 from 'react';
+import styled, { css } from 'styled-components';
+import { string, node } from 'prop-types';
+import Content from '../Card/Content';
+import Text from '../../../Text';
+import theme from '../../../Theme/helpers/themeReader';
+import Subtitle from './Subtitle';
+import Divider from '../../../Divider';
+var Title = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
+  var _theme = theme(props),
+      _theme$components = _theme.components,
+      cardnative = _theme$components.cardnative,
+      card = _theme$components.card;
+
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      line-height: ", "px;\n    "])), card.plan.title.color, cardnative.plan.title.margin.top, cardnative.plan.title.margin.bottom, cardnative.plan.title.lineHeight);
+});
+var Description = styled(Text.Small)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n\n  color: ", ";\n"])), theme.components.card.plan.description.color);
+var Price = styled.View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n\n  ", "\n"])), function (props) {
+  var _theme2 = theme(props),
+      plan = _theme2.components.cardnative.plan;
+
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", "px;\n    "])), plan.price.margin.bottom);
+});
+var EnhancePrice = styled.View(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  align-self: center;\n"])));
+
+var PlanCardContent = function PlanCardContent(_ref) {
+  var title = _ref.title,
+      subtitle = _ref.subtitle,
+      description = _ref.description,
+      currency = _ref.currency,
+      suffix = _ref.suffix,
+      price = _ref.price,
+      period = _ref.period,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Content, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, {
+    numberOfLines: 2
+  }, description), /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Text.H4, null, currency), price && /*#__PURE__*/React.createElement(Text.H4, null, price), suffix && /*#__PURE__*/React.createElement(Text.H4, null, suffix), period && /*#__PURE__*/React.createElement(EnhancePrice, null, /*#__PURE__*/React.createElement(Text.Medium, null, "" + period))), /*#__PURE__*/React.createElement(Divider, null), children);
+};
+
+PlanCardContent.propTypes = {
+  /** plan name */
+  title: string.isRequired,
+
+  /** currency of the current country */
+  currency: string,
+
+  /** suffix currency of the current country */
+  suffix: string,
+  price: string.isRequired,
+
+  /** period that this price will be charged  */
+  period: string.isRequired,
+  description: string,
+  subtitle: string,
+  children: node
+};
+PlanCardContent.defaultProps = {
+  children: null,
+  description: null,
+  subtitle: null,
+  currency: null,
+  suffix: null
+};
+PlanCardContent.displayName = 'PlanCard.Content';
+export default PlanCardContent;

package/esm/Card/native/PlanCard/List.js

@@ -0,0 +1,73 @@
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+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, { isValidElement } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { TouchableWithoutFeedback } from 'react-native';
+import { string, node, shape, oneOfType, func } from 'prop-types';
+import get from 'lodash.get';
+import Text from '../../../Text';
+import Icon from '../../../Icon';
+import theme from '../../../Theme/helpers/themeReader';
+var _theme$components = theme.components,
+    card = _theme$components.card,
+    cardnative = _theme$components.cardnative;
+var List = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n"])), cardnative.plan.list.margin.top);
+var Item = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", "px;\n"])), card.plan.list.item.margin.bottom);
+var Wrapper = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  align-items: center;\n"])));
+var IconWrapper = styled.View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  margin-right: ", "px;\n"])), cardnative.plan.list.item.icon.margin.right);
+var Button = styled.View(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n"])), card.plan.list.button.margin.top);
+var ButtonText = styled(Text.Medium)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-size: ", "px;\n  color: ", ";\n"])), card.plan.list.button.font.size, card.plan.list.button.font.color);
+var ItemText = styled(Text.Small)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref) {
+  var color = _ref.color;
+  return color || card.plan.list.item.font.color;
+});
+var ListItem = withTheme(function (_ref2) {
+  var text = _ref2.text,
+      variant = _ref2.variant,
+      yogaTheme = _ref2.theme,
+      icon = _ref2.icon,
+      _ref2$buttonProps = _ref2.buttonProps,
+      children = _ref2$buttonProps.children,
+      buttonProps = _objectWithoutPropertiesLoose(_ref2$buttonProps, _excluded);
+
+  var itemColor = get(yogaTheme.yoga.colors, variant);
+  if (variant && !itemColor) // eslint-disable-next-line no-console
+    console.warn("Invalid token " + variant + ", you can use " + JSON.stringify(Object.keys(yogaTheme.yoga.colors)));
+  return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Wrapper, null, icon && /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/isValidElement(icon) ? icon : /*#__PURE__*/React.createElement(Icon, {
+    as: icon,
+    size: "small",
+    fill: variant || 'text.primary'
+  })), /*#__PURE__*/React.createElement(ItemText, {
+    color: itemColor
+  }, text)), Boolean(Object.keys(buttonProps).length) && /*#__PURE__*/React.createElement(TouchableWithoutFeedback, buttonProps, /*#__PURE__*/React.createElement(Button, null, /*#__PURE__*/React.createElement(ButtonText, null, children))));
+});
+List.displayName = 'PlanCard.List';
+ListItem.displayName = 'PlanCard.ListItem';
+Button.displayName = 'PlanCard.ListButton';
+ListItem.propTypes = {
+  text: string.isRequired,
+
+  /** an icon to be displayed on the begin of the item */
+  icon: oneOfType([node, func]),
+
+  /** if provided displays a button below the item text. It accepts all button
+   * element props */
+  buttonProps: shape({}),
+
+  /** if provided a color variant, like "vibin", "hope", "energy" the icon and
+   * the item text will be rendered on this color.
+   */
+  variant: string
+};
+ListItem.defaultProps = {
+  icon: undefined,
+  buttonProps: {},
+  variant: undefined
+};
+export { List, ListItem };

package/esm/Card/native/PlanCard/PlanCard.js

@@ -0,0 +1,54 @@
+var _excluded = ["children", "variant"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 from 'react';
+import styled, { css } from 'styled-components';
+import { node, oneOf } from 'prop-types';
+import theme from '../../../Theme/helpers/themeReader';
+import Card from '../Card';
+export var PLAN_LINE_HEIGHT = 8;
+var Plan = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-width: 288px;\n  width: 100%;\n  position: relative;\n\n  ", "\n"])), function (props) {
+  var _theme = theme(props),
+      colors = _theme.colors,
+      plan = _theme.components.card.plan;
+
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", "px ", "px\n        ", "px ", "px;\n\n      border-radius: ", "px;\n\n      background-color: ", ";\n    "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, plan.radius, colors.white);
+});
+var Border = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: 8px;\n  background-color: ", ";\n"])), function (_ref) {
+  var variant = _ref.variant,
+      _ref$theme$yoga$color = _ref.theme.yoga.colors,
+      deepPurple = _ref$theme$yoga$color.deepPurple,
+      _ref$theme$yoga$color2 = _ref$theme$yoga$color[variant],
+      color = _ref$theme$yoga$color2 === void 0 ? deepPurple : _ref$theme$yoga$color2;
+  return color;
+});
+
+var PlanCard = function PlanCard(_ref2) {
+  var children = _ref2.children,
+      variant = _ref2.variant,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Plan, rest, /*#__PURE__*/React.createElement(Border, {
+    variant: variant
+  }), children);
+};
+
+PlanCard.propTypes = {
+  children: node,
+
+  /** style the card border top color following the theme (primary, secondary,
+   * vibin, hope, energy, relax, peace, verve, uplift, deepPurple, deep,
+   * stamina, dark, medium, light, clear, white) */
+  variant: oneOf(['primary', 'secondary', 'vibin', 'hope', 'energy', 'relax', 'peace', 'verve', 'uplift', 'deepPurple', 'stamina', 'dark', 'medium', 'deep', 'light', 'clear', 'white'])
+};
+PlanCard.defaultProps = {
+  children: undefined,
+  variant: 'deepPurple'
+};
+PlanCard.displayName = 'PlanCard';
+export default PlanCard;

package/esm/Card/native/PlanCard/PlanCard.test.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Star, MapPin } from '@gympass/yoga-icons';
+import { ThemeProvider, Button, Icon } from '../../..';
+import PlanCard from '.';
+describe('<PlanCard />', function () {
+  var buttonOnPressMock = jest.fn();
+
+  var renderPlan = function renderPlan() {
+    return render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Tag, {
+      variant: "informative"
+    }, "Recommended Plan"), /*#__PURE__*/React.createElement(PlanCard.Content, {
+      subtitle: "plan",
+      title: "Basic",
+      currency: "$",
+      price: "99.90",
+      period: "/month"
+    }, /*#__PURE__*/React.createElement(PlanCard.Subtitle, null, "Get access to"), /*#__PURE__*/React.createElement(PlanCard.List, null, /*#__PURE__*/React.createElement(PlanCard.ListItem, {
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        as: MapPin,
+        height: "small",
+        width: "small",
+        stroke: "medium"
+      }),
+      text: "gyms and studios"
+    }), /*#__PURE__*/React.createElement(PlanCard.ListItem, {
+      icon: Star,
+      text: "list item",
+      buttonProps: {
+        children: 'button',
+        onPress: buttonOnPressMock
+      }
+    }))), /*#__PURE__*/React.createElement(PlanCard.Actions, null, /*#__PURE__*/React.createElement(Button, {
+      full: true
+    }, "Select this plan")))));
+  };
+
+  describe('Events', function () {
+    it('should call onPress when ListItem has a button', function () {
+      var _renderPlan = renderPlan(),
+          getByText = _renderPlan.getByText;
+
+      fireEvent.press(getByText('button'));
+      expect(buttonOnPressMock).toHaveBeenCalled();
+    });
+  });
+  describe('Snapshots', function () {
+    it('should match snapshot with default PlanCard', function () {
+      var _renderPlan2 = renderPlan(),
+          planCard = _renderPlan2.container;
+
+      expect(planCard).toMatchSnapshot();
+    });
+    it('should match snapshot with variant', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
+        variant: "hope"
+      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
+        subtitle: "plan",
+        title: "Basic",
+        currency: "$",
+        price: "99.90",
+        period: "/month"
+      })))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with suffix', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
+        variant: "hope"
+      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
+        subtitle: "plan",
+        title: "Basic",
+        currency: "$",
+        suffix: "MXN",
+        price: "99.90",
+        period: "/month"
+      })))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/native/PlanCard/Subtitle.js

@@ -0,0 +1,15 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled, { css } from 'styled-components';
+import theme from '../../../Theme/helpers/themeReader';
+import Text from '../../../Text';
+var Subtitle = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
+  var _theme = theme(props),
+      plan = _theme.components.card.plan;
+
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", "px;\n\n      color: ", ";\n      font-size: ", "px;\n    "])), plan.subtitle.margin.bottom, plan.subtitle.font.color, plan.subtitle.font.size);
+});
+Subtitle.displayName = 'PlanCard.Subtitle';
+export default Subtitle;

package/esm/Card/native/PlanCard/Tag.js

@@ -0,0 +1,33 @@
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2;
+
+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 from 'react';
+import styled, { css } from 'styled-components';
+import { node } from 'prop-types';
+import { PLAN_LINE_HEIGHT } from './PlanCard';
+import Tag from '../../../Tag';
+import theme from '../../../Theme/helpers/themeReader';
+var StyledTag = styled(Tag.Informative)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n"])), function (props) {
+  var _theme = theme(props),
+      plan = _theme.components.card.plan;
+
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      top: ", "px;\n      left: ", "px;\n    "])), plan.tag.position.top + PLAN_LINE_HEIGHT, plan.tag.position.left);
+});
+
+var PlanCardTag = function PlanCardTag(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledTag, rest, children);
+};
+
+PlanCardTag.displayName = 'PlanCard.Tag';
+PlanCardTag.propTypes = {
+  children: node.isRequired
+};
+export default PlanCardTag;

package/esm/Card/native/PlanCard/index.js

@@ -0,0 +1,15 @@
+import { Actions, Button, ButtonText } from './Actions';
+import Content from './Content';
+import PlanCard from './PlanCard';
+import Subtitle from './Subtitle';
+import Tag from './Tag';
+import { List, ListItem } from './List';
+PlanCard.Actions = Actions;
+PlanCard.Button = Button;
+PlanCard.ButtonText = ButtonText;
+PlanCard.Content = Content;
+PlanCard.List = List;
+PlanCard.ListItem = ListItem;
+PlanCard.Subtitle = Subtitle;
+PlanCard.Tag = Tag;
+export default PlanCard;

package/esm/Card/native/index.js

@@ -0,0 +1,5 @@
+import Card from './Card';
+import PlanCard from './PlanCard';
+import EventCard from './EventCard';
+import GymCard from './GymCard';
+export { Card, PlanCard, EventCard, GymCard };

package/esm/Card/web/Card/Card.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Button } from '../../..';
+import Card from '.';
+describe('<Card />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default Card', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Card.Header, null, "Hello World"), /*#__PURE__*/React.createElement(Card.Content, null, "It's fine here"), /*#__PURE__*/React.createElement(Card.Actions, null, /*#__PURE__*/React.createElement(Button, null, "Action's children must be Button"))))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/web/EventCard/EventCard.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../../..';
+import EventCard from '.';
+var event = {
+  name: 'Yoga Class',
+  place: 'Gympass',
+  time: '19 am'
+};
+var date = {
+  day: '19',
+  weekday: 'thu',
+  month: 'dec'
+};
+describe('<Card />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default EventCard', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(EventCard, {
+        event: event,
+        date: date
+      }))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/web/PlanCard/Actions.js

@@ -10,7 +10,7 @@ var _theme$components = theme.components,
     card = _theme$components.card,
     cardweb = _theme$components.cardweb;
 var PlanCardButton = styled(Button).attrs({
-  small: true,
+  small: false,
   full: true
 })(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
 var PlanCardButtonText = styled(Button.Text).attrs({

package/esm/Card/web/PlanCard/Content.js

@@ -1,6 +1,6 @@
 var _excluded = ["title", "subtitle", "description", "currency", "suffix", "price", "period", "children"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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; }
 
@@ -13,49 +13,44 @@ import theme from '../../../Theme/helpers/themeReader';
 import Text from '../../../Text';
 import Content from '../Card/Content';
 import Subtitle from './Subtitle';
-var Title = styled(Text.H5)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
+import Divider from '../../../Divider';
+var Title = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
   var _theme = theme(props),
       _theme$components = _theme.components,
       card = _theme$components.card,
       cardweb = _theme$components.cardweb;
 
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      margin-bottom: ", "px;\n    "])), card.plan.title.color, cardweb.plan.title.margin.bottom);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      margin-bottom: ", "px;\n      line-height: ", "px;\n    "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight);
 });
 var Description = styled(Text.Small)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  color: ", ";\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-overflow: -o-ellipsis-lastline;\n"])), theme.components.card.plan.description.color);
 var Price = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", "\n"])), function (props) {
   var _theme2 = theme(props),
-      _theme2$components = _theme2.components,
-      card = _theme2$components.card,
-      cardweb = _theme2$components.cardweb;
+      cardweb = _theme2.components.cardweb;
 
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n    "])), card.plan.price.margin.top, cardweb.plan.price.margin.bottom);
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", "px;\n    "])), cardweb.plan.price.margin.bottom);
 });
-var EnhancePrice = styled(Text.Small)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var align = _ref.align;
-  return "\n    align-self: " + align + ";\n  ";
-});
-var Currency = styled(EnhancePrice)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  margin-right: ", "px;\n"])), theme.components.card.plan.price.currency.margin.right);
+var EnhancePrice = styled(Text.Medium)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  align-self: center;\n"])));
 
-var PlanCardContent = function PlanCardContent(_ref2) {
-  var title = _ref2.title,
-      subtitle = _ref2.subtitle,
-      description = _ref2.description,
-      currency = _ref2.currency,
-      suffix = _ref2.suffix,
-      price = _ref2.price,
-      period = _ref2.period,
-      children = _ref2.children,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+var PlanCardContent = function PlanCardContent(_ref) {
+  var title = _ref.title,
+      subtitle = _ref.subtitle,
+      description = _ref.description,
+      currency = _ref.currency,
+      suffix = _ref.suffix,
+      price = _ref.price,
+      period = _ref.period,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Content, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Currency, {
-    as: "sup",
-    align: "flex-start"
-  }, currency), price && /*#__PURE__*/React.createElement(Text.H1, {
+  return /*#__PURE__*/React.createElement(Content, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Text.H4, {
+    as: "sup"
+  }, currency), price && /*#__PURE__*/React.createElement(Text.H4, {
     as: "strong"
-  }, price), period && /*#__PURE__*/React.createElement(EnhancePrice, {
-    as: "sub",
-    align: "flex-end"
-  }, (suffix || '') + " " + period)), children);
+  }, price), suffix && /*#__PURE__*/React.createElement(Text.H4, {
+    as: "sup"
+  }, suffix), period && /*#__PURE__*/React.createElement(EnhancePrice, {
+    as: "sub"
+  }, period)), /*#__PURE__*/React.createElement(Divider, null), children);
 };
 
 PlanCardContent.propTypes = {

package/esm/Card/web/PlanCard/PlanCard.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Star, MapPin } from '@gympass/yoga-icons';
+import { ThemeProvider, Button, Icon } from '../../..';
+import PlanCard from '.';
+describe('<PlanCard />', function () {
+  var buttonOnClickMock = jest.fn();
+
+  var renderPlan = function renderPlan() {
+    return render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Tag, {
+      variant: "informative"
+    }, "Recommended Plan"), /*#__PURE__*/React.createElement(PlanCard.Content, {
+      subtitle: "plan",
+      title: "Basic",
+      currency: "$",
+      price: "99.90",
+      period: "/month"
+    }, /*#__PURE__*/React.createElement(PlanCard.Subtitle, null, "Get access to"), /*#__PURE__*/React.createElement(PlanCard.List, null, /*#__PURE__*/React.createElement(PlanCard.ListItem, {
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        as: MapPin,
+        height: "small",
+        width: "small",
+        stroke: "medium"
+      }),
+      text: "gyms and studios"
+    }), /*#__PURE__*/React.createElement(PlanCard.ListItem, {
+      icon: Star,
+      text: "list item",
+      buttonProps: {
+        children: 'button',
+        as: 'a',
+        onClick: buttonOnClickMock
+      }
+    }))), /*#__PURE__*/React.createElement(PlanCard.Actions, null, /*#__PURE__*/React.createElement(Button, {
+      full: true
+    }, "Select this plan")))));
+  };
+
+  describe('Events', function () {
+    it('should call onClick when ListItem has a button', function () {
+      var _renderPlan = renderPlan(),
+          getByText = _renderPlan.getByText;
+
+      fireEvent.click(getByText('button'));
+      expect(buttonOnClickMock).toHaveBeenCalled();
+    });
+  });
+  describe('Snapshots', function () {
+    it('should match snapshot with default PlanCard', function () {
+      var _renderPlan2 = renderPlan(),
+          planCard = _renderPlan2.container;
+
+      expect(planCard).toMatchSnapshot();
+    });
+    it('should match snapshot with variant', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
+        variant: "hope"
+      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
+        subtitle: "plan",
+        title: "Basic",
+        currency: "$",
+        price: "99.90",
+        period: "/month"
+      })))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with suffix', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
+        variant: "hope"
+      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
+        subtitle: "plan",
+        title: "Basic",
+        currency: "$",
+        suffix: "MXN",
+        price: "99.90",
+        period: "/month"
+      })))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Checkbox/index.native.js

@@ -0,0 +1,3 @@
+import { Checkbox, Switch } from './native';
+Checkbox.Switch = Switch;
+export default Checkbox;