@gympass/yoga 7.76.0 → 7.77.0

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 (8) hide show
  1. package/cjs/Card/web/PlanCard/List.js +23 -10
  2. package/cjs/Popover/web/Popover.js +32 -16
  3. package/cjs/Popover/web/styles.js +15 -5
  4. package/esm/Card/web/PlanCard/List.js +22 -9
  5. package/esm/Card/web/PlanCard/PlanCard.test.js +52 -15
  6. package/esm/Popover/web/Popover.js +33 -17
  7. package/esm/Popover/web/styles.js +10 -3
  8. package/package.json +2 -2
package/cjs/Card/web/PlanCard/List.js CHANGED
@@ -13,7 +13,9 @@ var _Text = _interopRequireDefault(require("../../../Text"));
13
13
 
14
14
  var _themeReader = _interopRequireDefault(require("../../../Theme/helpers/themeReader"));
15
15
 
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
16
+ var _Box = _interopRequireDefault(require("../../../Box"));
17
+
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
17
19
 
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
21
 
@@ -36,18 +38,25 @@ var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templat
36
38
 
37
39
  var Item = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n :not(:last-child) {\n margin-bottom: ", "px;\n }\n"])), card.plan.list.item.margin.bottom);
38
40
 
39
- var Wrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n min-width: 0;\n align-items: center;\n\n svg {\n flex-shrink: 0;\n }\n"])));
40
-
41
- var ItemText = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n height: 100%;\n vertical-align: middle;\n\n color: ", ";\n\n ", "\n"])), card.plan.list.item.font.color, truncateStyle);
41
+ var Wrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n min-width: 0;\n align-items: center;\n\n ", "\n\n svg {\n flex-shrink: 0;\n }\n"])), function (props) {
42
+ return props.as === 'button' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n border: none;\n padding: 0;\n background: transparent;\n cursor: pointer;\n "])));
43
+ });
44
+ var ItemText = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n height: 100%;\n vertical-align: middle;\n\n color: ", ";\n\n ", "\n"])), card.plan.list.item.font.color, truncateStyle);
42
45
 
43
- var Button = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n display: block;\n padding: 0;\n margin-top: ", "px;\n\n width: 100%;\n\n letter-spacing: normal;\n\n background-color: transparent;\n border: none;\n\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n color: ", ";\n\n cursor: pointer;\n text-decoration: none;\n text-align: left;\n outline: none;\n\n ", "\n"])), card.plan.list.button.margin.top, _themeReader["default"].baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);
46
+ var Button = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n display: block;\n padding: 0;\n margin-top: ", "px;\n\n width: 100%;\n\n letter-spacing: normal;\n\n background-color: transparent;\n border: none;\n\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n color: ", ";\n\n cursor: pointer;\n text-decoration: none;\n text-align: left;\n outline: none;\n\n ", "\n"])), card.plan.list.button.margin.top, _themeReader["default"].baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);
44
47
 
45
48
  var ListItem = (0, _styledComponents.withTheme)(function (_ref) {
46
49
  var text = _ref.text,
47
50
  Icon = _ref.icon,
48
51
  buttonProps = _ref.buttonProps,
49
- yogaTheme = _ref.theme;
50
- return /*#__PURE__*/_react["default"].createElement(Item, null, /*#__PURE__*/_react["default"].createElement(Wrapper, null, Icon && /*#__PURE__*/_react["default"].createElement(IconWrapper, null, /*#__PURE__*/(0, _react.isValidElement)(Icon) ? Icon : /*#__PURE__*/_react["default"].createElement(Icon, {
52
+ yogaTheme = _ref.theme,
53
+ onClick = _ref.onClick;
54
+ var wrapperProps = onClick ? {
55
+ as: 'button',
56
+ type: 'button',
57
+ onClick: onClick
58
+ } : {};
59
+ return /*#__PURE__*/_react["default"].createElement(Item, null, /*#__PURE__*/_react["default"].createElement(Wrapper, wrapperProps, Icon && /*#__PURE__*/_react["default"].createElement(IconWrapper, null, /*#__PURE__*/(0, _react.isValidElement)(Icon) ? Icon : /*#__PURE__*/_react["default"].createElement(Icon, {
51
60
  width: 16,
52
61
  height: 16,
53
62
  fill: yogaTheme.yoga.colors.text.primary
@@ -60,16 +69,20 @@ List.displayName = 'PlanCard.List';
60
69
  ListItem.displayName = 'PlanCard.ListItem';
61
70
  Button.displayName = 'PlanCard.ListButton';
62
71
  ListItem.propTypes = {
63
- text: _propTypes.string.isRequired,
72
+ text: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]).isRequired,
64
73
 
65
74
  /** an icon to be displayed on the begin of the item */
66
75
  icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func]),
67
76
 
68
77
  /** if provided displays a button below the item text. It accepts all button
69
78
  * element props */
70
- buttonProps: (0, _propTypes.shape)({})
79
+ buttonProps: (0, _propTypes.shape)({}),
80
+
81
+ /** if provided makes the item clickable */
82
+ onClick: _propTypes.func
71
83
  };
72
84
  ListItem.defaultProps = {
73
85
  icon: undefined,
74
- buttonProps: {}
86
+ buttonProps: {},
87
+ onClick: undefined
75
88
  };
package/cjs/Popover/web/Popover.js CHANGED
@@ -11,12 +11,14 @@ var _yoga = require("@gympass/yoga");
11
11
 
12
12
  var _styles = require("./styles");
13
13
 
14
- var _excluded = ["children", "title", "description", "position", "width", "height"];
14
+ var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId"];
15
15
 
16
16
  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
17
 
18
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
19
 
20
+ 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); }
21
+
20
22
  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; }
21
23
 
22
24
  function Popover(_ref) {
@@ -26,48 +28,59 @@ function Popover(_ref) {
26
28
  position = _ref.position,
27
29
  width = _ref.width,
28
30
  height = _ref.height,
31
+ zIndex = _ref.zIndex,
32
+ a11yId = _ref.a11yId,
29
33
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
30
34
 
31
35
  var _useState = (0, _react.useState)(false),
32
36
  isPopoverOpen = _useState[0],
33
37
  setIsPopoverOpen = _useState[1];
34
38
 
35
- function handleShowPopover() {
39
+ var handleShowPopover = function handleShowPopover() {
36
40
  setIsPopoverOpen(true);
37
- }
41
+ };
38
42
 
39
- function handleHidePopover() {
43
+ var handleHidePopover = function handleHidePopover() {
40
44
  setIsPopoverOpen(false);
41
- }
45
+ };
42
46
 
43
- return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, props, isPopoverOpen && /*#__PURE__*/_react["default"].createElement(_styles.PopoverContainer, {
47
+ return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, props, isPopoverOpen && /*#__PURE__*/_react["default"].createElement(_styles.PopoverContainer, _extends({}, a11yId && {
48
+ id: a11yId
49
+ }, {
44
50
  position: position,
45
51
  width: width,
46
52
  height: height,
47
- role: "tooltip"
48
- }, !!title && /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
53
+ role: "tooltip",
54
+ $zIndex: zIndex
55
+ }), !!title && /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
49
56
  mb: "xxxsmall",
50
57
  fw: "medium",
51
58
  color: "white"
52
59
  }, title), /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
53
60
  m: "zero",
54
61
  color: "white"
55
- }, description)), /*#__PURE__*/_react["default"].createElement("button", {
56
- type: "button",
57
- style: {
58
- all: 'unset'
59
- },
62
+ }, description)), /*#__PURE__*/_react["default"].createElement(_styles.PopoverButton, _extends({}, a11yId && {
63
+ 'aria-describedby': a11yId
64
+ }, {
60
65
  onMouseEnter: handleShowPopover,
61
66
  onMouseLeave: handleHidePopover,
62
67
  onTouchStart: handleShowPopover,
63
68
  onTouchEnd: handleHidePopover,
64
69
  onClick: function onClick(event) {
65
70
  return event.preventDefault();
71
+ },
72
+ onKeyDown: function onKeyDown(event) {
73
+ if (event.key === 'Enter') {
74
+ setIsPopoverOpen(function (current) {
75
+ return !current;
76
+ });
77
+ }
66
78
  }
67
- }, children));
79
+ }), children));
68
80
  }
69
81
 
70
82
  Popover.propTypes = {
83
+ a11yId: _propTypes.string,
71
84
  children: _propTypes.node.isRequired,
72
85
  title: _propTypes.string,
73
86
  description: _propTypes.string.isRequired,
@@ -75,13 +88,16 @@ Popover.propTypes = {
75
88
  /** Position of the popover relative to the children. Accepted values: bottom-[start|center|end], left-[start|center|end], top-[start|center|end] or right-[start|center|end] */
76
89
  position: (0, _propTypes.oneOf)(['bottom-start', 'bottom-center', 'bottom-end', 'left-start', 'left-center', 'left-end', 'top-start', 'top-center', 'top-end', 'right-start', 'right-center', 'right-end']),
77
90
  width: _propTypes.number,
78
- height: _propTypes.number
91
+ height: _propTypes.number,
92
+ zIndex: _propTypes.number
79
93
  };
80
94
  Popover.defaultProps = {
95
+ a11yId: undefined,
81
96
  title: undefined,
82
97
  position: 'bottom-center',
83
98
  width: 265,
84
- height: 116
99
+ height: 200,
100
+ zIndex: 1
85
101
  };
86
102
  var _default = Popover;
87
103
  exports["default"] = _default;
package/cjs/Popover/web/styles.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.Wrapper = exports.PopoverContainer = void 0;
4
+ exports.Wrapper = exports.PopoverContainer = exports.PopoverButton = void 0;
5
5
 
6
6
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
7
7
 
8
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
9
9
 
10
10
  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); }
11
11
 
@@ -62,8 +62,18 @@ var PopoverContainer = _styledComponents["default"].div(_templateObject14 || (_t
62
62
  radii = _ref$theme$yoga.radii,
63
63
  position = _ref.position,
64
64
  width = _ref.width,
65
- height = _ref.height;
66
- return (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, popoverContainerPositionModifier[position]);
65
+ height = _ref.height,
66
+ $zIndex = _ref.$zIndex;
67
+ return (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n overflow: auto;\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n z-index: ", ";\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, $zIndex, popoverContainerPositionModifier[position]);
67
68
  });
68
69
 
69
- exports.PopoverContainer = PopoverContainer;
70
+ exports.PopoverContainer = PopoverContainer;
71
+
72
+ var PopoverButton = _styledComponents["default"].button.attrs({
73
+ type: 'button'
74
+ })(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n all: unset;\n\n ", "\n"])), function (_ref2) {
75
+ var elevations = _ref2.theme.yoga.elevations;
76
+ return (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n @media (hover: hover) and (pointer: fine) {\n &:focus {\n box-shadow: ", ";\n transition: box-shadow ease 0.5s;\n }\n }\n "])), elevations.small);
77
+ });
78
+
79
+ exports.PopoverButton = PopoverButton;
package/esm/Card/web/PlanCard/List.js CHANGED
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
2
2
 
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
@@ -7,6 +7,7 @@ import styled, { css, withTheme } from 'styled-components';
7
7
  import { string, node, shape, oneOfType, func } from 'prop-types';
8
8
  import Text from '../../../Text';
9
9
  import theme from '../../../Theme/helpers/themeReader';
10
+ import Box from '../../../Box';
10
11
  var _theme$components = theme.components,
11
12
  card = _theme$components.card,
12
13
  cardweb = _theme$components.cardweb;
@@ -14,15 +15,23 @@ var truncateStyle = css(_templateObject || (_templateObject = _taggedTemplateLit
14
15
  var List = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n margin: ", "px 0 0;\n padding: 0;\n\n list-style: none;\n"])), cardweb.plan.list.margin.top);
15
16
  var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n display: flex;\n margin-right: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right);
16
17
  var Item = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n :not(:last-child) {\n margin-bottom: ", "px;\n }\n"])), card.plan.list.item.margin.bottom);
17
- var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n min-width: 0;\n align-items: center;\n\n svg {\n flex-shrink: 0;\n }\n"])));
18
- var ItemText = styled(Text.Small)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n height: 100%;\n vertical-align: middle;\n\n color: ", ";\n\n ", "\n"])), card.plan.list.item.font.color, truncateStyle);
19
- var Button = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n display: block;\n padding: 0;\n margin-top: ", "px;\n\n width: 100%;\n\n letter-spacing: normal;\n\n background-color: transparent;\n border: none;\n\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n color: ", ";\n\n cursor: pointer;\n text-decoration: none;\n text-align: left;\n outline: none;\n\n ", "\n"])), card.plan.list.button.margin.top, theme.baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);
18
+ var Wrapper = styled(Box)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n min-width: 0;\n align-items: center;\n\n ", "\n\n svg {\n flex-shrink: 0;\n }\n"])), function (props) {
19
+ return props.as === 'button' && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n border: none;\n padding: 0;\n background: transparent;\n cursor: pointer;\n "])));
20
+ });
21
+ var ItemText = styled(Text.Small)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n height: 100%;\n vertical-align: middle;\n\n color: ", ";\n\n ", "\n"])), card.plan.list.item.font.color, truncateStyle);
22
+ var Button = styled.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n display: block;\n padding: 0;\n margin-top: ", "px;\n\n width: 100%;\n\n letter-spacing: normal;\n\n background-color: transparent;\n border: none;\n\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n color: ", ";\n\n cursor: pointer;\n text-decoration: none;\n text-align: left;\n outline: none;\n\n ", "\n"])), card.plan.list.button.margin.top, theme.baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);
20
23
  var ListItem = withTheme(function (_ref) {
21
24
  var text = _ref.text,
22
25
  Icon = _ref.icon,
23
26
  buttonProps = _ref.buttonProps,
24
- yogaTheme = _ref.theme;
25
- 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, {
27
+ yogaTheme = _ref.theme,
28
+ onClick = _ref.onClick;
29
+ var wrapperProps = onClick ? {
30
+ as: 'button',
31
+ type: 'button',
32
+ onClick: onClick
33
+ } : {};
34
+ return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, Icon && /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/isValidElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, {
26
35
  width: 16,
27
36
  height: 16,
28
37
  fill: yogaTheme.yoga.colors.text.primary
@@ -34,17 +43,21 @@ List.displayName = 'PlanCard.List';
34
43
  ListItem.displayName = 'PlanCard.ListItem';
35
44
  Button.displayName = 'PlanCard.ListButton';
36
45
  ListItem.propTypes = {
37
- text: string.isRequired,
46
+ text: oneOfType([string, node]).isRequired,
38
47
 
39
48
  /** an icon to be displayed on the begin of the item */
40
49
  icon: oneOfType([node, func]),
41
50
 
42
51
  /** if provided displays a button below the item text. It accepts all button
43
52
  * element props */
44
- buttonProps: shape({})
53
+ buttonProps: shape({}),
54
+
55
+ /** if provided makes the item clickable */
56
+ onClick: func
45
57
  };
46
58
  ListItem.defaultProps = {
47
59
  icon: undefined,
48
- buttonProps: {}
60
+ buttonProps: {},
61
+ onClick: undefined
49
62
  };
50
63
  export { List, ListItem };
package/esm/Card/web/PlanCard/PlanCard.test.js CHANGED
@@ -6,7 +6,10 @@ import PlanCard from '.';
6
6
  describe('<PlanCard />', function () {
7
7
  var buttonOnClickMock = jest.fn();
8
8
 
9
- var renderPlan = function renderPlan() {
9
+ var renderPlan = function renderPlan(_temp) {
10
+ var _ref = _temp === void 0 ? {} : _temp,
11
+ clickableItems = _ref.clickableItems;
12
+
10
13
  return render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Tag, {
11
14
  variant: "informative"
12
15
  }, "Recommended Plan"), /*#__PURE__*/React.createElement(PlanCard.Content, {
@@ -22,7 +25,8 @@ describe('<PlanCard />', function () {
22
25
  width: "small",
23
26
  stroke: "medium"
24
27
  }),
25
- text: "gyms and studios"
28
+ text: "gyms and studios",
29
+ onClick: clickableItems && jest.fn()
26
30
  }), /*#__PURE__*/React.createElement(PlanCard.ListItem, {
27
31
  icon: Star,
28
32
  text: "list item",
@@ -30,7 +34,8 @@ describe('<PlanCard />', function () {
30
34
  children: 'button',
31
35
  as: 'a',
32
36
  onClick: buttonOnClickMock
33
- }
37
+ },
38
+ onClick: clickableItems && jest.fn()
34
39
  }))), /*#__PURE__*/React.createElement(PlanCard.Actions, null, /*#__PURE__*/React.createElement(Button, {
35
40
  full: true
36
41
  }, "Select this plan")))));
@@ -44,6 +49,30 @@ describe('<PlanCard />', function () {
44
49
  fireEvent.click(getByText('button'));
45
50
  expect(buttonOnClickMock).toHaveBeenCalled();
46
51
  });
52
+ it('should make list item clickable', function () {
53
+ var itemClickMock = jest.fn();
54
+
55
+ var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
56
+ variant: "energy"
57
+ }, /*#__PURE__*/React.createElement(PlanCard.Content, {
58
+ title: "Basic"
59
+ }, /*#__PURE__*/React.createElement(PlanCard.List, null, /*#__PURE__*/React.createElement(PlanCard.ListItem, {
60
+ icon: /*#__PURE__*/React.createElement(Icon, {
61
+ as: MapPin,
62
+ height: "small",
63
+ width: "small",
64
+ stroke: "medium"
65
+ }),
66
+ text: "gyms and studios",
67
+ onClick: itemClickMock
68
+ })))))),
69
+ getByRole = _render.getByRole;
70
+
71
+ fireEvent.click(getByRole('button', {
72
+ label: 'gyms and studios'
73
+ }));
74
+ expect(itemClickMock).toHaveBeenCalled();
75
+ });
47
76
  });
48
77
  describe('Snapshots', function () {
49
78
  it('should match snapshot with default PlanCard', function () {
@@ -53,7 +82,7 @@ describe('<PlanCard />', function () {
53
82
  expect(planCard).toMatchSnapshot();
54
83
  });
55
84
  it('should match snapshot with variant', function () {
56
- var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
85
+ var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
57
86
  variant: "hope"
58
87
  }, /*#__PURE__*/React.createElement(PlanCard.Content, {
59
88
  subtitle: "plan",
@@ -62,12 +91,12 @@ describe('<PlanCard />', function () {
62
91
  price: "99.90",
63
92
  period: "/month"
64
93
  })))),
65
- container = _render.container;
94
+ container = _render2.container;
66
95
 
67
96
  expect(container).toMatchSnapshot();
68
97
  });
69
98
  it('should match snapshot with suffix', function () {
70
- var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
99
+ var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
71
100
  variant: "hope"
72
101
  }, /*#__PURE__*/React.createElement(PlanCard.Content, {
73
102
  subtitle: "plan",
@@ -77,44 +106,52 @@ describe('<PlanCard />', function () {
77
106
  price: "99.90",
78
107
  period: "/month"
79
108
  })))),
80
- container = _render2.container;
109
+ container = _render3.container;
81
110
 
82
111
  expect(container).toMatchSnapshot();
83
112
  });
84
113
  it('should render the extra content', function () {
85
- var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
114
+ var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
86
115
  title: "Basic",
87
116
  extra: /*#__PURE__*/React.createElement("p", null, "Hello")
88
117
  })))),
89
- container = _render3.container;
118
+ container = _render4.container;
90
119
 
91
120
  expect(container).toMatchSnapshot();
92
121
  });
93
122
  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, {
123
+ var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
95
124
  title: "Basic"
96
125
  })))),
97
- getByText = _render4.getByText;
126
+ getByText = _render5.getByText;
98
127
 
99
128
  expect(getByText('Basic')).toMatchSnapshot();
100
129
  });
101
130
  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, {
131
+ var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
103
132
  title: "Basic",
104
133
  badgeColor: "energy"
105
134
  })))),
106
- getByText = _render5.getByText;
135
+ getByText = _render6.getByText;
107
136
 
108
137
  expect(getByText('Basic')).toMatchSnapshot();
109
138
  });
110
139
  it('should render the discount', function () {
111
- var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
140
+ var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
112
141
  discount: "SAVE 40%",
113
142
  variant: "energy"
114
143
  }, /*#__PURE__*/React.createElement(PlanCard.Content, {
115
144
  title: "Basic"
116
145
  })))),
117
- container = _render6.container;
146
+ container = _render7.container;
147
+
148
+ expect(container).toMatchSnapshot();
149
+ });
150
+ it('should render list item content as button', function () {
151
+ var _renderPlan3 = renderPlan({
152
+ clickableItems: true
153
+ }),
154
+ container = _renderPlan3.container;
118
155
 
119
156
  expect(container).toMatchSnapshot();
120
157
  });
package/esm/Popover/web/Popover.js CHANGED
@@ -1,11 +1,13 @@
1
- var _excluded = ["children", "title", "description", "position", "width", "height"];
1
+ var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId"];
2
+
3
+ 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); }
2
4
 
3
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; }
4
6
 
5
7
  import React, { useState } from 'react';
6
8
  import { node, number, oneOf, string } from 'prop-types';
7
9
  import { Text } from '@gympass/yoga';
8
- import { PopoverContainer, Wrapper } from './styles';
10
+ import { PopoverContainer, PopoverButton, Wrapper } from './styles';
9
11
 
10
12
  function Popover(_ref) {
11
13
  var children = _ref.children,
@@ -14,48 +16,59 @@ function Popover(_ref) {
14
16
  position = _ref.position,
15
17
  width = _ref.width,
16
18
  height = _ref.height,
19
+ zIndex = _ref.zIndex,
20
+ a11yId = _ref.a11yId,
17
21
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
18
22
 
19
23
  var _useState = useState(false),
20
24
  isPopoverOpen = _useState[0],
21
25
  setIsPopoverOpen = _useState[1];
22
26
 
23
- function handleShowPopover() {
27
+ var handleShowPopover = function handleShowPopover() {
24
28
  setIsPopoverOpen(true);
25
- }
29
+ };
26
30
 
27
- function handleHidePopover() {
31
+ var handleHidePopover = function handleHidePopover() {
28
32
  setIsPopoverOpen(false);
29
- }
33
+ };
30
34
 
31
- return /*#__PURE__*/React.createElement(Wrapper, props, isPopoverOpen && /*#__PURE__*/React.createElement(PopoverContainer, {
35
+ return /*#__PURE__*/React.createElement(Wrapper, props, isPopoverOpen && /*#__PURE__*/React.createElement(PopoverContainer, _extends({}, a11yId && {
36
+ id: a11yId
37
+ }, {
32
38
  position: position,
33
39
  width: width,
34
40
  height: height,
35
- role: "tooltip"
36
- }, !!title && /*#__PURE__*/React.createElement(Text.Small, {
41
+ role: "tooltip",
42
+ $zIndex: zIndex
43
+ }), !!title && /*#__PURE__*/React.createElement(Text.Small, {
37
44
  mb: "xxxsmall",
38
45
  fw: "medium",
39
46
  color: "white"
40
47
  }, title), /*#__PURE__*/React.createElement(Text.Small, {
41
48
  m: "zero",
42
49
  color: "white"
43
- }, description)), /*#__PURE__*/React.createElement("button", {
44
- type: "button",
45
- style: {
46
- all: 'unset'
47
- },
50
+ }, description)), /*#__PURE__*/React.createElement(PopoverButton, _extends({}, a11yId && {
51
+ 'aria-describedby': a11yId
52
+ }, {
48
53
  onMouseEnter: handleShowPopover,
49
54
  onMouseLeave: handleHidePopover,
50
55
  onTouchStart: handleShowPopover,
51
56
  onTouchEnd: handleHidePopover,
52
57
  onClick: function onClick(event) {
53
58
  return event.preventDefault();
59
+ },
60
+ onKeyDown: function onKeyDown(event) {
61
+ if (event.key === 'Enter') {
62
+ setIsPopoverOpen(function (current) {
63
+ return !current;
64
+ });
65
+ }
54
66
  }
55
- }, children));
67
+ }), children));
56
68
  }
57
69
 
58
70
  Popover.propTypes = {
71
+ a11yId: string,
59
72
  children: node.isRequired,
60
73
  title: string,
61
74
  description: string.isRequired,
@@ -63,12 +76,15 @@ Popover.propTypes = {
63
76
  /** Position of the popover relative to the children. Accepted values: bottom-[start|center|end], left-[start|center|end], top-[start|center|end] or right-[start|center|end] */
64
77
  position: oneOf(['bottom-start', 'bottom-center', 'bottom-end', 'left-start', 'left-center', 'left-end', 'top-start', 'top-center', 'top-end', 'right-start', 'right-center', 'right-end']),
65
78
  width: number,
66
- height: number
79
+ height: number,
80
+ zIndex: number
67
81
  };
68
82
  Popover.defaultProps = {
83
+ a11yId: undefined,
69
84
  title: undefined,
70
85
  position: 'bottom-center',
71
86
  width: 265,
72
- height: 116
87
+ height: 200,
88
+ zIndex: 1
73
89
  };
74
90
  export default Popover;
package/esm/Popover/web/styles.js CHANGED
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
2
2
 
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
@@ -49,6 +49,13 @@ export var PopoverContainer = styled.div(_templateObject14 || (_templateObject14
49
49
  radii = _ref$theme$yoga.radii,
50
50
  position = _ref.position,
51
51
  width = _ref.width,
52
- height = _ref.height;
53
- return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, popoverContainerPositionModifier[position]);
52
+ height = _ref.height,
53
+ $zIndex = _ref.$zIndex;
54
+ return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n overflow: auto;\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n z-index: ", ";\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, $zIndex, popoverContainerPositionModifier[position]);
55
+ });
56
+ export var PopoverButton = styled.button.attrs({
57
+ type: 'button'
58
+ })(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n all: unset;\n\n ", "\n"])), function (_ref2) {
59
+ var elevations = _ref2.theme.yoga.elevations;
60
+ return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n @media (hover: hover) and (pointer: fine) {\n &:focus {\n box-shadow: ", ";\n transition: box-shadow ease 0.5s;\n }\n }\n "])), elevations.small);
54
61
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.76.0",
3
+ "version": "7.77.0",
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": "c162c2c074dac2da331bbc5a02da61733dd14d44",
56
+ "gitHead": "463ab24d95ca452369523da8d13ef2fd26579903",
57
57
  "module": "./esm",
58
58
  "private": false,
59
59
  "react-native": "./cjs/index.native.js"