@gympass/yoga 7.67.5 → 7.69.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/cjs/Accordion/web/Content.js +4 -17
  2. package/cjs/Card/web/PlanCard/Content.js +22 -11
  3. package/cjs/Card/web/PlanCard/PlanCard.js +47 -16
  4. package/esm/Accordion/web/Accordion.test.js +13 -1
  5. package/esm/Accordion/web/Content.js +4 -15
  6. package/esm/Card/web/PlanCard/Content.js +22 -11
  7. package/esm/Card/web/PlanCard/PlanCard.js +45 -17
  8. package/esm/Card/web/PlanCard/PlanCard.test.js +28 -0
  9. package/package.json +2 -2
package/cjs/Accordion/web/Content.js CHANGED
@@ -3,10 +3,6 @@
3
3
  exports.__esModule = true;
4
4
  exports["default"] = void 0;
5
5
 
6
- var _propTypes = require("prop-types");
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
6
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
7
 
12
8
  var _templateObject;
@@ -15,19 +11,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
15
11
 
16
12
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
17
13
 
18
- var Content = function Content(_ref) {
19
- var children = _ref.children;
20
-
21
- var ContentWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n "])), function (_ref2) {
22
- var accordion = _ref2.theme.yoga.components.accordion;
23
- return "\n padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n ";
24
- });
25
-
26
- return /*#__PURE__*/_react["default"].createElement(ContentWrapper, null, children);
27
- };
14
+ var Content = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
15
+ var accordion = _ref.theme.yoga.components.accordion;
16
+ return "\n padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n ";
17
+ });
28
18
 
29
- Content.propTypes = {
30
- children: _propTypes.node.isRequired
31
- };
32
19
  var _default = Content;
33
20
  exports["default"] = _default;
package/cjs/Card/web/PlanCard/Content.js CHANGED
@@ -19,9 +19,9 @@ var _Subtitle = _interopRequireDefault(require("./Subtitle"));
19
19
 
20
20
  var _Divider = _interopRequireDefault(require("../../../Divider"));
21
21
 
22
- var _excluded = ["title", "subtitle", "description", "currency", "suffix", "price", "period", "extra", "children"];
22
+ var _excluded = ["title", "badgeColor", "subtitle", "description", "currency", "suffix", "price", "period", "extra", "children"];
23
23
 
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
25
25
 
26
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
27
 
@@ -38,23 +38,28 @@ var Title = (0, _styledComponents["default"])(_Text["default"].Medium)(_template
38
38
  var _theme = (0, _themeReader["default"])(props),
39
39
  _theme$components = _theme.components,
40
40
  card = _theme$components.card,
41
- cardweb = _theme$components.cardweb;
41
+ cardweb = _theme$components.cardweb,
42
+ colors = _theme.colors,
43
+ radii = _theme.radii;
42
44
 
43
- return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _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);
45
+ var badgeColor = props.badgeColor;
46
+ var badgeStyle = badgeColor && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ::before {\n position: absolute;\n left: 0;\n content: '';\n height: 24px;\n width: 4px;\n background-color: ", ";\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n "])), colors[props.badgeColor], radii.xsmall, radii.xsmall);
47
+ return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-bottom: ", "px;\n line-height: ", "px;\n ", "\n "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight, badgeStyle);
44
48
  });
45
- var Description = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject4 || (_templateObject4 = _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"])), _themeReader["default"].components.card.plan.description.color);
49
+ var Description = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject5 || (_templateObject5 = _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"])), _themeReader["default"].components.card.plan.description.color);
46
50
 
47
- var Price = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
51
+ var Price = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
48
52
  var _theme2 = (0, _themeReader["default"])(props),
49
53
  cardweb = _theme2.components.cardweb;
50
54
 
51
- return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
55
+ return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
52
56
  });
53
57
 
54
- var EnhancePrice = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
58
+ var EnhancePrice = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
55
59
 
56
60
  var PlanCardContent = function PlanCardContent(_ref) {
57
61
  var title = _ref.title,
62
+ badgeColor = _ref.badgeColor,
58
63
  subtitle = _ref.subtitle,
59
64
  description = _ref.description,
60
65
  currency = _ref.currency,
@@ -65,7 +70,9 @@ var PlanCardContent = function PlanCardContent(_ref) {
65
70
  children = _ref.children,
66
71
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
67
72
 
68
- return /*#__PURE__*/_react["default"].createElement(Wrapper, rest, subtitle && /*#__PURE__*/_react["default"].createElement(_Subtitle["default"], null, subtitle), title && /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description), !!price && /*#__PURE__*/_react["default"].createElement(Price, null, currency && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
73
+ return /*#__PURE__*/_react["default"].createElement(Wrapper, rest, subtitle && /*#__PURE__*/_react["default"].createElement(_Subtitle["default"], null, subtitle), title && /*#__PURE__*/_react["default"].createElement(Title, {
74
+ badgeColor: badgeColor
75
+ }, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description), !!price && /*#__PURE__*/_react["default"].createElement(Price, null, currency && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
69
76
  as: "sup"
70
77
  }, currency), price && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
71
78
  as: "strong"
@@ -92,7 +99,10 @@ PlanCardContent.propTypes = {
92
99
  description: _propTypes.string,
93
100
  subtitle: _propTypes.string,
94
101
  extra: _propTypes.node,
95
- children: _propTypes.node
102
+ children: _propTypes.node,
103
+
104
+ /** color of the badge attached to the title */
105
+ badgeColor: _propTypes.string
96
106
  };
97
107
  PlanCardContent.defaultProps = {
98
108
  children: null,
@@ -102,7 +112,8 @@ PlanCardContent.defaultProps = {
102
112
  suffix: null,
103
113
  price: null,
104
114
  period: null,
105
- extra: null
115
+ extra: null,
116
+ badgeColor: null
106
117
  };
107
118
  PlanCardContent.displayName = 'PlanCard.Content';
108
119
  var _default = PlanCardContent;
package/cjs/Card/web/PlanCard/PlanCard.js CHANGED
@@ -9,9 +9,13 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
10
  var _propTypes = require("prop-types");
11
11
 
12
- var _excluded = ["children", "variant"];
12
+ var _Box = _interopRequireDefault(require("../../../Box"));
13
13
 
14
- var _templateObject, _templateObject2, _templateObject3;
14
+ var _Text = _interopRequireDefault(require("../../../Text"));
15
+
16
+ var _excluded = ["children", "discount", "variant"];
17
+
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
15
19
 
16
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
21
 
@@ -23,8 +27,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
23
27
 
24
28
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
25
29
 
26
- var PLAN_LINE_HEIGHT = 8;
30
+ var PLAN_LINE_HEIGHT = 4;
27
31
  exports.PLAN_LINE_HEIGHT = PLAN_LINE_HEIGHT;
32
+ var DISCOUNT_HEIGHT = 28;
28
33
 
29
34
  var Plan = _styledComponents["default"].article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n max-width: 312px;\n\n overflow: hidden;\n\n ", "\n"])), function (props) {
30
35
  var theme = props.theme.yoga;
@@ -32,27 +37,52 @@ var Plan = _styledComponents["default"].article(_templateObject || (_templateObj
32
37
  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n border: ", "px solid ", ";\n border-radius: ", "px;\n\n background-color: ", ";\n "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, theme.borders.small, theme.colors.light, plan.radius, theme.colors.white);
33
38
  });
34
39
 
35
- var Border = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n\n display: inline-block;\n width: 100%;\n\n height: ", "px;\n background-color: ", ";\n"])), PLAN_LINE_HEIGHT, function (_ref) {
40
+ var Border = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
36
41
  var variant = _ref.variant,
37
- _ref$theme$yoga$color = _ref.theme.yoga.colors,
38
- deepPurple = _ref$theme$yoga$color.deepPurple,
39
- _ref$theme$yoga$color2 = _ref$theme$yoga$color[variant],
40
- color = _ref$theme$yoga$color2 === void 0 ? deepPurple : _ref$theme$yoga$color2;
41
- return color;
42
+ hasRightMask = _ref.hasRightMask,
43
+ theme = _ref.theme;
44
+ var _theme$yoga = theme.yoga,
45
+ spacing = _theme$yoga.spacing,
46
+ colors = _theme$yoga.colors;
47
+ var color = colors[variant];
48
+ var MASK_SIZE = 112;
49
+ var baseMaskStyle = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: ", "px;\n width: ", "px;\n content: '';\n background: radial-gradient(\n 50% 50% at 50% 50%,\n ", " 0%,\n transparent 100%\n );\n border-radius: 50%;\n "])), MASK_SIZE, MASK_SIZE, colors.white);
50
+ return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n\n display: inline-block;\n width: 100%;\n\n height: ", "px;\n background-color: ", ";\n\n ::before {\n ", "\n left: ", "px;\n top: -", "px;\n opacity: 0.8;\n }\n\n ", "\n "])), PLAN_LINE_HEIGHT, color, baseMaskStyle, spacing.large, MASK_SIZE - DISCOUNT_HEIGHT, hasRightMask && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n ::after {\n ", "\n top: -", "px;\n right: ", "px;\n opacity: 0.5;\n }\n "])), baseMaskStyle, MASK_SIZE - DISCOUNT_HEIGHT + PLAN_LINE_HEIGHT, spacing.large));
42
51
  });
43
52
 
44
- var PlanCard = function PlanCard(_ref2) {
45
- var children = _ref2.children,
46
- variant = _ref2.variant,
47
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
53
+ var DiscountWrapper = (0, _styledComponents["default"])(_Box["default"]).attrs({
54
+ ph: 'xsmall',
55
+ pv: 'xxxsmall'
56
+ })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
57
+ var bg = _ref2.bg,
58
+ theme = _ref2.theme;
59
+ var _theme$yoga2 = theme.yoga,
60
+ spacing = _theme$yoga2.spacing,
61
+ colors = _theme$yoga2.colors;
62
+ return (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n align-items: center;\n min-height: ", "px;\n border-bottom-left-radius: ", "px;\n\n ::before {\n content: '';\n position: absolute;\n left: -", "px;\n height: ", "px;\n width: ", "px;\n top: ", "px;\n background: transparent;\n border-top-right-radius: ", "px;\n box-shadow: ", " ", "px -1px;\n }\n "])), DISCOUNT_HEIGHT, spacing.small, DISCOUNT_HEIGHT, DISCOUNT_HEIGHT / 2 - PLAN_LINE_HEIGHT, DISCOUNT_HEIGHT, PLAN_LINE_HEIGHT, spacing.small, colors[bg], spacing.xsmall);
63
+ });
48
64
 
49
- return /*#__PURE__*/_react["default"].createElement(Plan, rest, /*#__PURE__*/_react["default"].createElement(Border, {
50
- variant: variant
65
+ function PlanCard(_ref3) {
66
+ var children = _ref3.children,
67
+ discount = _ref3.discount,
68
+ variant = _ref3.variant,
69
+ rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
70
+
71
+ var hasDiscount = !!discount;
72
+ return /*#__PURE__*/_react["default"].createElement(Plan, rest, hasDiscount && /*#__PURE__*/_react["default"].createElement(DiscountWrapper, {
73
+ bg: variant
74
+ }, /*#__PURE__*/_react["default"].createElement(_Text["default"].Tiny, {
75
+ color: "white",
76
+ fontWeight: "medium"
77
+ }, discount)), /*#__PURE__*/_react["default"].createElement(Border, {
78
+ variant: variant,
79
+ hasRightMask: hasDiscount
51
80
  }), children);
52
- };
81
+ }
53
82
 
54
83
  PlanCard.propTypes = {
55
84
  children: _propTypes.node,
85
+ discount: _propTypes.string,
56
86
 
57
87
  /** style the card border top color following the theme (primary, secondary,
58
88
  * vibin, hope, energy, relax, peace, verve, uplift, deepPurple, deep,
@@ -61,6 +91,7 @@ PlanCard.propTypes = {
61
91
  };
62
92
  PlanCard.defaultProps = {
63
93
  children: undefined,
94
+ discount: undefined,
64
95
  variant: 'deepPurple'
65
96
  };
66
97
  PlanCard.displayName = 'PlanCard';
package/esm/Accordion/web/Accordion.test.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { render, cleanup } from '@testing-library/react';
2
+ import { render, cleanup, screen } from '@testing-library/react';
3
3
  import { Text, Button } from '@gympass/yoga';
4
4
  import { ThemeProvider } from '../..';
5
5
  import Accordion from '.';
@@ -16,4 +16,16 @@ describe('<Accordion />', function () {
16
16
 
17
17
  expect(baseElement).toMatchSnapshot();
18
18
  });
19
+ it('should have className when passed as props', function () {
20
+ render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
21
+ title: "Title"
22
+ }, /*#__PURE__*/React.createElement(Accordion.Content, {
23
+ className: "className-as-props",
24
+ "data-testid": "accordion-content"
25
+ }, /*#__PURE__*/React.createElement(Text, null, "Content"), /*#__PURE__*/React.createElement(Button, {
26
+ small: true,
27
+ inverted: true
28
+ }, "Small button")))));
29
+ expect(screen.getByTestId('accordion-content')).toHaveClass('className-as-props');
30
+ });
19
31
  });
package/esm/Accordion/web/Content.js CHANGED
@@ -2,20 +2,9 @@ var _templateObject;
2
2
 
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
5
- import { node } from 'prop-types';
6
- import React from 'react';
7
5
  import styled from 'styled-components';
8
-
9
- var Content = function Content(_ref) {
10
- var children = _ref.children;
11
- var ContentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n "])), function (_ref2) {
12
- var accordion = _ref2.theme.yoga.components.accordion;
13
- return "\n padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n ";
14
- });
15
- return /*#__PURE__*/React.createElement(ContentWrapper, null, children);
16
- };
17
-
18
- Content.propTypes = {
19
- children: node.isRequired
20
- };
6
+ var Content = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
7
+ var accordion = _ref.theme.yoga.components.accordion;
8
+ return "\n padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n ";
9
+ });
21
10
  export default Content;
package/esm/Card/web/PlanCard/Content.js CHANGED
@@ -1,6 +1,6 @@
1
- var _excluded = ["title", "subtitle", "description", "currency", "suffix", "price", "period", "extra", "children"];
1
+ var _excluded = ["title", "badgeColor", "subtitle", "description", "currency", "suffix", "price", "period", "extra", "children"];
2
2
 
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
4
4
 
5
5
  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; }
6
6
 
@@ -19,21 +19,26 @@ var Title = styled(Text.Medium)(_templateObject2 || (_templateObject2 = _taggedT
19
19
  var _theme = theme(props),
20
20
  _theme$components = _theme.components,
21
21
  card = _theme$components.card,
22
- cardweb = _theme$components.cardweb;
22
+ cardweb = _theme$components.cardweb,
23
+ colors = _theme.colors,
24
+ radii = _theme.radii;
23
25
 
24
- return css(_templateObject3 || (_templateObject3 = _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);
26
+ var badgeColor = props.badgeColor;
27
+ var badgeStyle = badgeColor && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ::before {\n position: absolute;\n left: 0;\n content: '';\n height: 24px;\n width: 4px;\n background-color: ", ";\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n "])), colors[props.badgeColor], radii.xsmall, radii.xsmall);
28
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-bottom: ", "px;\n line-height: ", "px;\n ", "\n "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight, badgeStyle);
25
29
  });
26
- var Description = styled(Text.Small)(_templateObject4 || (_templateObject4 = _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);
27
- var Price = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
30
+ var Description = styled(Text.Small)(_templateObject5 || (_templateObject5 = _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);
31
+ var Price = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
28
32
  var _theme2 = theme(props),
29
33
  cardweb = _theme2.components.cardweb;
30
34
 
31
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
35
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
32
36
  });
33
- var EnhancePrice = styled(Text.Medium)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
37
+ var EnhancePrice = styled(Text.Medium)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
34
38
 
35
39
  var PlanCardContent = function PlanCardContent(_ref) {
36
40
  var title = _ref.title,
41
+ badgeColor = _ref.badgeColor,
37
42
  subtitle = _ref.subtitle,
38
43
  description = _ref.description,
39
44
  currency = _ref.currency,
@@ -44,7 +49,9 @@ var PlanCardContent = function PlanCardContent(_ref) {
44
49
  children = _ref.children,
45
50
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
46
51
 
47
- return /*#__PURE__*/React.createElement(Wrapper, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description), !!price && /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Text.H4, {
52
+ return /*#__PURE__*/React.createElement(Wrapper, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, {
53
+ badgeColor: badgeColor
54
+ }, title), description && /*#__PURE__*/React.createElement(Description, null, description), !!price && /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Text.H4, {
48
55
  as: "sup"
49
56
  }, currency), price && /*#__PURE__*/React.createElement(Text.H4, {
50
57
  as: "strong"
@@ -71,7 +78,10 @@ PlanCardContent.propTypes = {
71
78
  description: string,
72
79
  subtitle: string,
73
80
  extra: node,
74
- children: node
81
+ children: node,
82
+
83
+ /** color of the badge attached to the title */
84
+ badgeColor: string
75
85
  };
76
86
  PlanCardContent.defaultProps = {
77
87
  children: null,
@@ -81,7 +91,8 @@ PlanCardContent.defaultProps = {
81
91
  suffix: null,
82
92
  price: null,
83
93
  period: null,
84
- extra: null
94
+ extra: null,
95
+ badgeColor: null
85
96
  };
86
97
  PlanCardContent.displayName = 'PlanCard.Content';
87
98
  export default PlanCardContent;
package/esm/Card/web/PlanCard/PlanCard.js CHANGED
@@ -1,6 +1,6 @@
1
- var _excluded = ["children", "variant"];
1
+ var _excluded = ["children", "discount", "variant"];
2
2
 
3
- var _templateObject, _templateObject2, _templateObject3;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
4
4
 
5
5
  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; }
6
6
 
@@ -8,34 +8,61 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
8
8
 
9
9
  import React from 'react';
10
10
  import styled, { css } from 'styled-components';
11
- import { node, oneOf } from 'prop-types';
12
- export var PLAN_LINE_HEIGHT = 8;
11
+ import { node, oneOf, string } from 'prop-types';
12
+ import Box from '../../../Box';
13
+ import Text from '../../../Text';
14
+ export var PLAN_LINE_HEIGHT = 4;
15
+ var DISCOUNT_HEIGHT = 28;
13
16
  var Plan = styled.article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n max-width: 312px;\n\n overflow: hidden;\n\n ", "\n"])), function (props) {
14
17
  var theme = props.theme.yoga;
15
18
  var plan = theme.components.card.plan;
16
19
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n border: ", "px solid ", ";\n border-radius: ", "px;\n\n background-color: ", ";\n "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, theme.borders.small, theme.colors.light, plan.radius, theme.colors.white);
17
20
  });
18
- var Border = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n\n display: inline-block;\n width: 100%;\n\n height: ", "px;\n background-color: ", ";\n"])), PLAN_LINE_HEIGHT, function (_ref) {
21
+ var Border = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
19
22
  var variant = _ref.variant,
20
- _ref$theme$yoga$color = _ref.theme.yoga.colors,
21
- deepPurple = _ref$theme$yoga$color.deepPurple,
22
- _ref$theme$yoga$color2 = _ref$theme$yoga$color[variant],
23
- color = _ref$theme$yoga$color2 === void 0 ? deepPurple : _ref$theme$yoga$color2;
24
- return color;
23
+ hasRightMask = _ref.hasRightMask,
24
+ theme = _ref.theme;
25
+ var _theme$yoga = theme.yoga,
26
+ spacing = _theme$yoga.spacing,
27
+ colors = _theme$yoga.colors;
28
+ var color = colors[variant];
29
+ var MASK_SIZE = 112;
30
+ var baseMaskStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: ", "px;\n width: ", "px;\n content: '';\n background: radial-gradient(\n 50% 50% at 50% 50%,\n ", " 0%,\n transparent 100%\n );\n border-radius: 50%;\n "])), MASK_SIZE, MASK_SIZE, colors.white);
31
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n\n display: inline-block;\n width: 100%;\n\n height: ", "px;\n background-color: ", ";\n\n ::before {\n ", "\n left: ", "px;\n top: -", "px;\n opacity: 0.8;\n }\n\n ", "\n "])), PLAN_LINE_HEIGHT, color, baseMaskStyle, spacing.large, MASK_SIZE - DISCOUNT_HEIGHT, hasRightMask && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n ::after {\n ", "\n top: -", "px;\n right: ", "px;\n opacity: 0.5;\n }\n "])), baseMaskStyle, MASK_SIZE - DISCOUNT_HEIGHT + PLAN_LINE_HEIGHT, spacing.large));
32
+ });
33
+ var DiscountWrapper = styled(Box).attrs({
34
+ ph: 'xsmall',
35
+ pv: 'xxxsmall'
36
+ })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
37
+ var bg = _ref2.bg,
38
+ theme = _ref2.theme;
39
+ var _theme$yoga2 = theme.yoga,
40
+ spacing = _theme$yoga2.spacing,
41
+ colors = _theme$yoga2.colors;
42
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n align-items: center;\n min-height: ", "px;\n border-bottom-left-radius: ", "px;\n\n ::before {\n content: '';\n position: absolute;\n left: -", "px;\n height: ", "px;\n width: ", "px;\n top: ", "px;\n background: transparent;\n border-top-right-radius: ", "px;\n box-shadow: ", " ", "px -1px;\n }\n "])), DISCOUNT_HEIGHT, spacing.small, DISCOUNT_HEIGHT, DISCOUNT_HEIGHT / 2 - PLAN_LINE_HEIGHT, DISCOUNT_HEIGHT, PLAN_LINE_HEIGHT, spacing.small, colors[bg], spacing.xsmall);
25
43
  });
26
44
 
27
- var PlanCard = function PlanCard(_ref2) {
28
- var children = _ref2.children,
29
- variant = _ref2.variant,
30
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
45
+ function PlanCard(_ref3) {
46
+ var children = _ref3.children,
47
+ discount = _ref3.discount,
48
+ variant = _ref3.variant,
49
+ rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
31
50
 
32
- return /*#__PURE__*/React.createElement(Plan, rest, /*#__PURE__*/React.createElement(Border, {
33
- variant: variant
51
+ var hasDiscount = !!discount;
52
+ return /*#__PURE__*/React.createElement(Plan, rest, hasDiscount && /*#__PURE__*/React.createElement(DiscountWrapper, {
53
+ bg: variant
54
+ }, /*#__PURE__*/React.createElement(Text.Tiny, {
55
+ color: "white",
56
+ fontWeight: "medium"
57
+ }, discount)), /*#__PURE__*/React.createElement(Border, {
58
+ variant: variant,
59
+ hasRightMask: hasDiscount
34
60
  }), children);
35
- };
61
+ }
36
62
 
37
63
  PlanCard.propTypes = {
38
64
  children: node,
65
+ discount: string,
39
66
 
40
67
  /** style the card border top color following the theme (primary, secondary,
41
68
  * vibin, hope, energy, relax, peace, verve, uplift, deepPurple, deep,
@@ -44,6 +71,7 @@ PlanCard.propTypes = {
44
71
  };
45
72
  PlanCard.defaultProps = {
46
73
  children: undefined,
74
+ discount: undefined,
47
75
  variant: 'deepPurple'
48
76
  };
49
77
  PlanCard.displayName = 'PlanCard';
package/esm/Card/web/PlanCard/PlanCard.test.js CHANGED
@@ -90,5 +90,33 @@ describe('<PlanCard />', function () {
90
90
 
91
91
  expect(container).toMatchSnapshot();
92
92
  });
93
+ it('should render the title without a colored badge', function () {
94
+ var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
95
+ title: "Basic"
96
+ })))),
97
+ getByText = _render4.getByText;
98
+
99
+ expect(getByText('Basic')).toMatchSnapshot();
100
+ });
101
+ it('should render the title with a colored badge', function () {
102
+ var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
103
+ title: "Basic",
104
+ badgeColor: "energy"
105
+ })))),
106
+ getByText = _render5.getByText;
107
+
108
+ expect(getByText('Basic')).toMatchSnapshot();
109
+ });
110
+ it('should render the discount', function () {
111
+ var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
112
+ discount: "SAVE 40%",
113
+ variant: "energy"
114
+ }, /*#__PURE__*/React.createElement(PlanCard.Content, {
115
+ title: "Basic"
116
+ })))),
117
+ container = _render6.container;
118
+
119
+ expect(container).toMatchSnapshot();
120
+ });
93
121
  });
94
122
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.67.5",
3
+ "version": "7.69.1",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -53,7 +53,7 @@
53
53
  "react": ">=16",
54
54
  "styled-components": "^4.4.0"
55
55
  },
56
- "gitHead": "f45407373d4033594e738ed9fd462cfaa5a33d30",
56
+ "gitHead": "8fe50ffb42fb0dc3d3feb368869dd32446afe64c",
57
57
  "module": "./esm",
58
58
  "private": false,
59
59
  "react-native": "./cjs/index.native.js"