@gympass/yoga 7.76.1 → 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.
|
@@ -13,7 +13,9 @@ var _Text = _interopRequireDefault(require("../../../Text"));
|
|
|
13
13
|
|
|
14
14
|
var _themeReader = _interopRequireDefault(require("../../../Theme/helpers/themeReader"));
|
|
15
15
|
|
|
16
|
-
var
|
|
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"]
|
|
40
|
-
|
|
41
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
};
|
|
@@ -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
|
|
18
|
-
|
|
19
|
-
|
|
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
|
-
|
|
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 };
|
|
@@ -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
|
|
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 =
|
|
94
|
+
container = _render2.container;
|
|
66
95
|
|
|
67
96
|
expect(container).toMatchSnapshot();
|
|
68
97
|
});
|
|
69
98
|
it('should match snapshot with suffix', function () {
|
|
70
|
-
var
|
|
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 =
|
|
109
|
+
container = _render3.container;
|
|
81
110
|
|
|
82
111
|
expect(container).toMatchSnapshot();
|
|
83
112
|
});
|
|
84
113
|
it('should render the extra content', function () {
|
|
85
|
-
var
|
|
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 =
|
|
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
|
|
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 =
|
|
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
|
|
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 =
|
|
135
|
+
getByText = _render6.getByText;
|
|
107
136
|
|
|
108
137
|
expect(getByText('Basic')).toMatchSnapshot();
|
|
109
138
|
});
|
|
110
139
|
it('should render the discount', function () {
|
|
111
|
-
var
|
|
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 =
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
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": "
|
|
56
|
+
"gitHead": "463ab24d95ca452369523da8d13ef2fd26579903",
|
|
57
57
|
"module": "./esm",
|
|
58
58
|
"private": false,
|
|
59
59
|
"react-native": "./cjs/index.native.js"
|