@gympass/yoga 7.72.4 → 7.73.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.
- package/cjs/Tag/web/Informative.js +10 -4
- package/cjs/Tag/web/Tag.js +10 -5
- package/esm/Tag/web/Informative.js +10 -4
- package/esm/Tag/web/Tag.js +11 -6
- package/esm/Tag/web/Tag.test.js +27 -0
- package/package.json +2 -2
|
@@ -15,7 +15,7 @@ var _Tag = _interopRequireDefault(require("./Tag"));
|
|
|
15
15
|
|
|
16
16
|
var _Icon = _interopRequireDefault(require("../../Icon"));
|
|
17
17
|
|
|
18
|
-
var _excluded = ["children", "icon", "theme", "small"];
|
|
18
|
+
var _excluded = ["children", "icon", "theme", "small", "ellipsis"];
|
|
19
19
|
|
|
20
20
|
var _templateObject;
|
|
21
21
|
|
|
@@ -52,10 +52,12 @@ var TagInformative = function TagInformative(_ref2) {
|
|
|
52
52
|
text = _ref2$theme$yoga.colors.text,
|
|
53
53
|
tag = _ref2$theme$yoga.components.tag,
|
|
54
54
|
small = _ref2.small,
|
|
55
|
+
ellipsis = _ref2.ellipsis,
|
|
55
56
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
56
57
|
|
|
57
58
|
return /*#__PURE__*/_react["default"].createElement(Informative, _extends({
|
|
58
|
-
small: small
|
|
59
|
+
small: small,
|
|
60
|
+
ellipsis: ellipsis
|
|
59
61
|
}, props), icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
60
62
|
as: icon,
|
|
61
63
|
size: small ? tag.icon.size.small : tag.icon.size["default"],
|
|
@@ -75,12 +77,16 @@ TagInformative.propTypes = {
|
|
|
75
77
|
children: _propTypes.node.isRequired,
|
|
76
78
|
|
|
77
79
|
/** The tag's size */
|
|
78
|
-
small: _propTypes.bool
|
|
80
|
+
small: _propTypes.bool,
|
|
81
|
+
|
|
82
|
+
/** After set a max-width can put ellipses for large texts */
|
|
83
|
+
ellipsis: _propTypes.bool
|
|
79
84
|
};
|
|
80
85
|
TagInformative.defaultProps = {
|
|
81
86
|
icon: undefined,
|
|
82
87
|
small: false,
|
|
83
|
-
variant: 'neutral'
|
|
88
|
+
variant: 'neutral',
|
|
89
|
+
ellipsis: false
|
|
84
90
|
};
|
|
85
91
|
TagInformative.displayName = 'Tag.Informative';
|
|
86
92
|
|
package/cjs/Tag/web/Tag.js
CHANGED
|
@@ -17,9 +17,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
17
17
|
|
|
18
18
|
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
19
19
|
|
|
20
|
-
var StyledTag = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n border-style: solid;\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
20
|
+
var StyledTag = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n border-style: solid;\n\n ", "\n\n ", "\n ", "\n"])), function (_ref) {
|
|
21
21
|
var variant = _ref.variant,
|
|
22
22
|
small = _ref.small,
|
|
23
|
+
ellipsis = _ref.ellipsis,
|
|
23
24
|
_ref$theme$yoga = _ref.theme.yoga,
|
|
24
25
|
_ref$theme$yoga$color = _ref$theme$yoga.colors,
|
|
25
26
|
text = _ref$theme$yoga$color.text,
|
|
@@ -34,8 +35,8 @@ var StyledTag = _styledComponents["default"].div(_templateObject || (_templateOb
|
|
|
34
35
|
dark: elements.selectionAndIcons
|
|
35
36
|
} : _ref$theme$yoga$color4,
|
|
36
37
|
tag = _ref$theme$yoga.components.tag;
|
|
37
|
-
return "\n " + (small ? "\n padding:\n " + tag.padding.small.top + "\n " + tag.padding.small.right + "px\n " + tag.padding.small.bottom + "\n " + tag.padding.small.left + "px;\n " : "\n padding:\n " + tag.padding["default"].top + "px\n " + tag.padding["default"].right + "px\n " + tag.padding["default"].bottom + "px\n " + tag.padding["default"].left + "px;\n ") + "\n
|
|
38
|
-
}, _yogaSystem.margins);
|
|
38
|
+
return "\n " + (small ? "\n padding:\n " + tag.padding.small.top + "\n " + tag.padding.small.right + "px\n " + tag.padding.small.bottom + "\n " + tag.padding.small.left + "px;\n " : "\n padding:\n " + tag.padding["default"].top + "px\n " + tag.padding["default"].right + "px\n " + tag.padding["default"].bottom + "px\n " + tag.padding["default"].left + "px;\n ") + "\n\n " + (ellipsis ? "\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n " : "") + "\n\n color: " + color.dark + ";\n border-radius: " + tag.border.radius + "px;\n border-width: " + tag.border.width + "px;\n border-color: " + borderColor.dark + ";\n\n font-size: " + tag.font.size + "px;\n line-height: " + tag.font.lineHeight + "px;\n font-weight: " + tag.font.weight + ";\n ";
|
|
39
|
+
}, _yogaSystem.margins, _yogaSystem.maxWidth);
|
|
39
40
|
/** Tags should be keywords to categorize or organize an item. */
|
|
40
41
|
|
|
41
42
|
|
|
@@ -49,11 +50,15 @@ Tag.propTypes = {
|
|
|
49
50
|
children: _propTypes.node.isRequired,
|
|
50
51
|
|
|
51
52
|
/** Can send small to use this variant */
|
|
52
|
-
small: _propTypes.bool
|
|
53
|
+
small: _propTypes.bool,
|
|
54
|
+
|
|
55
|
+
/** After set a max-width can put ellipses for large texts */
|
|
56
|
+
ellipsis: _propTypes.bool
|
|
53
57
|
};
|
|
54
58
|
Tag.defaultProps = {
|
|
55
59
|
variant: '',
|
|
56
|
-
small: false
|
|
60
|
+
small: false,
|
|
61
|
+
ellipsis: false
|
|
57
62
|
};
|
|
58
63
|
var _default = Tag;
|
|
59
64
|
exports["default"] = _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["children", "icon", "theme", "small"];
|
|
1
|
+
var _excluded = ["children", "icon", "theme", "small", "ellipsis"];
|
|
2
2
|
|
|
3
3
|
var _templateObject;
|
|
4
4
|
|
|
@@ -35,10 +35,12 @@ var TagInformative = function TagInformative(_ref2) {
|
|
|
35
35
|
text = _ref2$theme$yoga.colors.text,
|
|
36
36
|
tag = _ref2$theme$yoga.components.tag,
|
|
37
37
|
small = _ref2.small,
|
|
38
|
+
ellipsis = _ref2.ellipsis,
|
|
38
39
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
39
40
|
|
|
40
41
|
return /*#__PURE__*/React.createElement(Informative, _extends({
|
|
41
|
-
small: small
|
|
42
|
+
small: small,
|
|
43
|
+
ellipsis: ellipsis
|
|
42
44
|
}, props), icon && /*#__PURE__*/React.createElement(Icon, {
|
|
43
45
|
as: icon,
|
|
44
46
|
size: small ? tag.icon.size.small : tag.icon.size["default"],
|
|
@@ -58,12 +60,16 @@ TagInformative.propTypes = {
|
|
|
58
60
|
children: node.isRequired,
|
|
59
61
|
|
|
60
62
|
/** The tag's size */
|
|
61
|
-
small: bool
|
|
63
|
+
small: bool,
|
|
64
|
+
|
|
65
|
+
/** After set a max-width can put ellipses for large texts */
|
|
66
|
+
ellipsis: bool
|
|
62
67
|
};
|
|
63
68
|
TagInformative.defaultProps = {
|
|
64
69
|
icon: undefined,
|
|
65
70
|
small: false,
|
|
66
|
-
variant: 'neutral'
|
|
71
|
+
variant: 'neutral',
|
|
72
|
+
ellipsis: false
|
|
67
73
|
};
|
|
68
74
|
TagInformative.displayName = 'Tag.Informative';
|
|
69
75
|
export default withTheme(TagInformative);
|
package/esm/Tag/web/Tag.js
CHANGED
|
@@ -5,10 +5,11 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { oneOf, node, bool } from 'prop-types';
|
|
8
|
-
import { margins } from '@gympass/yoga-system';
|
|
9
|
-
var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n border-style: solid;\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
8
|
+
import { margins, maxWidth } from '@gympass/yoga-system';
|
|
9
|
+
var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n border-style: solid;\n\n ", "\n\n ", "\n ", "\n"])), function (_ref) {
|
|
10
10
|
var variant = _ref.variant,
|
|
11
11
|
small = _ref.small,
|
|
12
|
+
ellipsis = _ref.ellipsis,
|
|
12
13
|
_ref$theme$yoga = _ref.theme.yoga,
|
|
13
14
|
_ref$theme$yoga$color = _ref$theme$yoga.colors,
|
|
14
15
|
text = _ref$theme$yoga$color.text,
|
|
@@ -23,8 +24,8 @@ var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplate
|
|
|
23
24
|
dark: elements.selectionAndIcons
|
|
24
25
|
} : _ref$theme$yoga$color4,
|
|
25
26
|
tag = _ref$theme$yoga.components.tag;
|
|
26
|
-
return "\n " + (small ? "\n padding:\n " + tag.padding.small.top + "\n " + tag.padding.small.right + "px\n " + tag.padding.small.bottom + "\n " + tag.padding.small.left + "px;\n " : "\n padding:\n " + tag.padding["default"].top + "px\n " + tag.padding["default"].right + "px\n " + tag.padding["default"].bottom + "px\n " + tag.padding["default"].left + "px;\n ") + "\n
|
|
27
|
-
}, margins);
|
|
27
|
+
return "\n " + (small ? "\n padding:\n " + tag.padding.small.top + "\n " + tag.padding.small.right + "px\n " + tag.padding.small.bottom + "\n " + tag.padding.small.left + "px;\n " : "\n padding:\n " + tag.padding["default"].top + "px\n " + tag.padding["default"].right + "px\n " + tag.padding["default"].bottom + "px\n " + tag.padding["default"].left + "px;\n ") + "\n\n " + (ellipsis ? "\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n " : "") + "\n\n color: " + color.dark + ";\n border-radius: " + tag.border.radius + "px;\n border-width: " + tag.border.width + "px;\n border-color: " + borderColor.dark + ";\n\n font-size: " + tag.font.size + "px;\n line-height: " + tag.font.lineHeight + "px;\n font-weight: " + tag.font.weight + ";\n ";
|
|
28
|
+
}, margins, maxWidth);
|
|
28
29
|
/** Tags should be keywords to categorize or organize an item. */
|
|
29
30
|
|
|
30
31
|
var Tag = function Tag(props) {
|
|
@@ -37,10 +38,14 @@ Tag.propTypes = {
|
|
|
37
38
|
children: node.isRequired,
|
|
38
39
|
|
|
39
40
|
/** Can send small to use this variant */
|
|
40
|
-
small: bool
|
|
41
|
+
small: bool,
|
|
42
|
+
|
|
43
|
+
/** After set a max-width can put ellipses for large texts */
|
|
44
|
+
ellipsis: bool
|
|
41
45
|
};
|
|
42
46
|
Tag.defaultProps = {
|
|
43
47
|
variant: '',
|
|
44
|
-
small: false
|
|
48
|
+
small: false,
|
|
49
|
+
ellipsis: false
|
|
45
50
|
};
|
|
46
51
|
export default Tag;
|
package/esm/Tag/web/Tag.test.js
CHANGED
|
@@ -76,4 +76,31 @@ describe('<Tag />', function () {
|
|
|
76
76
|
|
|
77
77
|
expect(container).toMatchSnapshot();
|
|
78
78
|
});
|
|
79
|
+
it('should match snapshot with ellipsis prop', function () {
|
|
80
|
+
var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag, {
|
|
81
|
+
maxWidth: "10px",
|
|
82
|
+
ellipsis: true
|
|
83
|
+
}, "Default with ellipsis"))),
|
|
84
|
+
container = _render8.container;
|
|
85
|
+
|
|
86
|
+
expect(container).toMatchSnapshot();
|
|
87
|
+
});
|
|
88
|
+
it('should match snapshot with variant, informative type and ellipsis prop', function () {
|
|
89
|
+
var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
|
|
90
|
+
variant: "success",
|
|
91
|
+
maxWidth: "10px",
|
|
92
|
+
ellipsis: true
|
|
93
|
+
}, "Success with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
|
|
94
|
+
variant: "attention",
|
|
95
|
+
maxWidth: "10px",
|
|
96
|
+
ellipsis: true
|
|
97
|
+
}, "Attention with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
|
|
98
|
+
variant: "informative",
|
|
99
|
+
maxWidth: "10px",
|
|
100
|
+
ellipsis: true
|
|
101
|
+
}, "Informative with ellipsis"))),
|
|
102
|
+
container = _render9.container;
|
|
103
|
+
|
|
104
|
+
expect(container).toMatchSnapshot();
|
|
105
|
+
});
|
|
79
106
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.73.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": "1e683b25901f777084721ebe795c1ebd5e560ff2",
|
|
57
57
|
"module": "./esm",
|
|
58
58
|
"private": false,
|
|
59
59
|
"react-native": "./cjs/index.native.js"
|