@gympass/yoga 7.75.0 → 7.75.2
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/Accordion/web/Accordion.js +50 -49
- package/esm/Accordion/web/Accordion.js +50 -49
- package/package.json +3 -3
|
@@ -17,7 +17,7 @@ var _Content = _interopRequireDefault(require("./Content"));
|
|
|
17
17
|
|
|
18
18
|
var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
|
|
19
19
|
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
23
|
|
|
@@ -31,12 +31,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
31
31
|
|
|
32
32
|
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
33
33
|
|
|
34
|
-
var AccordionWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n border: none;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n z-index: 1;\n\n ", "\n\n hr {\n bottom: 0;\n left: 0;\n margin: 0;\n position: absolute;\n z-index: -1;\n }\n"])), function (_ref) {
|
|
35
|
-
var
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
var AccordionWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n border: none;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n z-index: 1;\n\n ", "\n\n hr {\n bottom: 0;\n left: 0;\n margin: 0;\n position: absolute;\n z-index: -1;\n }\n"])), function (_ref) {
|
|
35
|
+
var theme = _ref.theme;
|
|
36
|
+
return theme.yoga.colors.white;
|
|
37
|
+
}, function (_ref2) {
|
|
38
|
+
var disabled = _ref2.disabled,
|
|
39
|
+
elements = _ref2.theme.yoga.colors.elements;
|
|
40
|
+
return disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), elements.backgroundAndDisabled);
|
|
40
41
|
});
|
|
41
42
|
|
|
42
43
|
var getVerticalPadding = function getVerticalPadding(accordion, small) {
|
|
@@ -49,66 +50,66 @@ var getHorizontalPadding = function getHorizontalPadding(accordion, hasHorizonta
|
|
|
49
50
|
return accordion.padding.zero;
|
|
50
51
|
};
|
|
51
52
|
|
|
52
|
-
var Header = _styledComponents["default"].button(
|
|
53
|
-
var accordion =
|
|
54
|
-
small =
|
|
55
|
-
hasHorizontalPadding =
|
|
53
|
+
var Header = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n align-items: center;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ", "\n\n &:focus-visible {\n ", "\n }\n\n ", "\n"])), function (_ref3) {
|
|
54
|
+
var accordion = _ref3.theme.yoga.components.accordion,
|
|
55
|
+
small = _ref3.small,
|
|
56
|
+
hasHorizontalPadding = _ref3.hasHorizontalPadding;
|
|
56
57
|
return "\n padding:" + getVerticalPadding(accordion, small) + "px " + getHorizontalPadding(accordion, hasHorizontalPadding) + "px;\n";
|
|
57
|
-
}, function (_ref3) {
|
|
58
|
-
var elements = _ref3.theme.yoga.colors.elements;
|
|
59
|
-
return "\n background: " + elements.backgroundAndDisabled + ";\n\n ";
|
|
60
58
|
}, function (_ref4) {
|
|
61
|
-
var
|
|
62
|
-
return
|
|
59
|
+
var elements = _ref4.theme.yoga.colors.elements;
|
|
60
|
+
return "\n background: " + elements.backgroundAndDisabled + ";\n\n ";
|
|
61
|
+
}, function (_ref5) {
|
|
62
|
+
var disabled = _ref5.disabled;
|
|
63
|
+
return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "])));
|
|
63
64
|
});
|
|
64
65
|
|
|
65
|
-
var Title = _styledComponents["default"].div(
|
|
66
|
-
var accordion =
|
|
67
|
-
subtitle =
|
|
66
|
+
var Title = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n text-align: start;\n\n ", "\n\n ", "\n"])), function (_ref6) {
|
|
67
|
+
var accordion = _ref6.theme.yoga.components.accordion,
|
|
68
|
+
subtitle = _ref6.subtitle;
|
|
68
69
|
return "\n gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n";
|
|
69
|
-
}, function (
|
|
70
|
-
var disabled =
|
|
71
|
-
return disabled && (0, _styledComponents.css)(
|
|
72
|
-
var text =
|
|
70
|
+
}, function (_ref7) {
|
|
71
|
+
var disabled = _ref7.disabled;
|
|
72
|
+
return disabled && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n ", "\n "])), function (_ref8) {
|
|
73
|
+
var text = _ref8.theme.yoga.colors.text;
|
|
73
74
|
return "\n color: " + text.secundary + ";\n ";
|
|
74
75
|
});
|
|
75
76
|
});
|
|
76
77
|
|
|
77
|
-
var AccordionContent = _styledComponents["default"].div(
|
|
78
|
-
var isOpen =
|
|
78
|
+
var AccordionContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n height: auto;\n max-height: ", ";\n overflow: hidden;\n transition: max-height 200ms ease-in-out;\n\n ", "\n\n ", "\n"])), function (_ref9) {
|
|
79
|
+
var isOpen = _ref9.isOpen;
|
|
79
80
|
return isOpen ? '9999px' : '0';
|
|
80
|
-
}, function (_ref9) {
|
|
81
|
-
var accordion = _ref9.theme.yoga.components.accordion,
|
|
82
|
-
small = _ref9.small;
|
|
83
|
-
return small && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n ", " {\n padding-bottom: ", "px;\n }\n "])), _Content["default"], accordion.padding.small);
|
|
84
81
|
}, function (_ref10) {
|
|
85
|
-
var
|
|
86
|
-
|
|
82
|
+
var accordion = _ref10.theme.yoga.components.accordion,
|
|
83
|
+
small = _ref10.small;
|
|
84
|
+
return small && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n ", " {\n padding-bottom: ", "px;\n }\n "])), _Content["default"], accordion.padding.small);
|
|
85
|
+
}, function (_ref11) {
|
|
86
|
+
var hasHorizontalPadding = _ref11.hasHorizontalPadding;
|
|
87
|
+
return !hasHorizontalPadding && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n ", " {\n padding-left: 0;\n padding-right: 0;\n }\n "])), _Content["default"]);
|
|
87
88
|
});
|
|
88
89
|
|
|
89
|
-
var ArrowWrapper = _styledComponents["default"].div(
|
|
90
|
-
var isOpen =
|
|
90
|
+
var ArrowWrapper = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n align-items: center;\n display: flex;\n justify-content: center;\n\n svg {\n transform: ", ";\n transition: all 200ms ease-out 0s;\n\n ", "\n }\n\n ", "\n"])), function (_ref12) {
|
|
91
|
+
var isOpen = _ref12.isOpen;
|
|
91
92
|
return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
|
|
92
|
-
}, function (_ref12) {
|
|
93
|
-
var _ref12$theme$yoga$col = _ref12.theme.yoga.colors,
|
|
94
|
-
primary = _ref12$theme$yoga$col.primary,
|
|
95
|
-
text = _ref12$theme$yoga$col.text,
|
|
96
|
-
disabled = _ref12.disabled;
|
|
97
|
-
return "\n fill: " + (disabled ? text.secondary : primary) + ";\n ";
|
|
98
93
|
}, function (_ref13) {
|
|
99
|
-
var
|
|
94
|
+
var _ref13$theme$yoga$col = _ref13.theme.yoga.colors,
|
|
95
|
+
primary = _ref13$theme$yoga$col.primary,
|
|
96
|
+
text = _ref13$theme$yoga$col.text,
|
|
97
|
+
disabled = _ref13.disabled;
|
|
98
|
+
return "\n fill: " + (disabled ? text.secondary : primary) + ";\n ";
|
|
99
|
+
}, function (_ref14) {
|
|
100
|
+
var accordion = _ref14.theme.yoga.components.accordion;
|
|
100
101
|
return "\n padding: " + accordion.paddingArrow.total + "px;\n";
|
|
101
102
|
});
|
|
102
103
|
|
|
103
|
-
var Accordion = function Accordion(
|
|
104
|
-
var title =
|
|
105
|
-
subtitle =
|
|
106
|
-
children =
|
|
107
|
-
disabled =
|
|
108
|
-
expanded =
|
|
109
|
-
small =
|
|
110
|
-
hasHorizontalPadding =
|
|
111
|
-
props = _objectWithoutPropertiesLoose(
|
|
104
|
+
var Accordion = function Accordion(_ref15) {
|
|
105
|
+
var title = _ref15.title,
|
|
106
|
+
subtitle = _ref15.subtitle,
|
|
107
|
+
children = _ref15.children,
|
|
108
|
+
disabled = _ref15.disabled,
|
|
109
|
+
expanded = _ref15.expanded,
|
|
110
|
+
small = _ref15.small,
|
|
111
|
+
hasHorizontalPadding = _ref15.hasHorizontalPadding,
|
|
112
|
+
props = _objectWithoutPropertiesLoose(_ref15, _excluded);
|
|
112
113
|
|
|
113
114
|
var _useState = (0, _react.useState)(expanded),
|
|
114
115
|
open = _useState[0],
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
4
4
|
|
|
5
5
|
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); }
|
|
6
6
|
|
|
@@ -14,12 +14,13 @@ import { string, node, bool } from 'prop-types';
|
|
|
14
14
|
import { ChevronDown } from '@gympass/yoga-icons';
|
|
15
15
|
import { Text, Divider } from '@gympass/yoga';
|
|
16
16
|
import Content from './Content';
|
|
17
|
-
var AccordionWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n border: none;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n z-index: 1;\n\n ", "\n\n hr {\n bottom: 0;\n left: 0;\n margin: 0;\n position: absolute;\n z-index: -1;\n }\n"])), function (_ref) {
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
var AccordionWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n border: none;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n z-index: 1;\n\n ", "\n\n hr {\n bottom: 0;\n left: 0;\n margin: 0;\n position: absolute;\n z-index: -1;\n }\n"])), function (_ref) {
|
|
18
|
+
var theme = _ref.theme;
|
|
19
|
+
return theme.yoga.colors.white;
|
|
20
|
+
}, function (_ref2) {
|
|
21
|
+
var disabled = _ref2.disabled,
|
|
22
|
+
elements = _ref2.theme.yoga.colors.elements;
|
|
23
|
+
return disabled && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), elements.backgroundAndDisabled);
|
|
23
24
|
});
|
|
24
25
|
|
|
25
26
|
var getVerticalPadding = function getVerticalPadding(accordion, small) {
|
|
@@ -32,63 +33,63 @@ var getHorizontalPadding = function getHorizontalPadding(accordion, hasHorizonta
|
|
|
32
33
|
return accordion.padding.zero;
|
|
33
34
|
};
|
|
34
35
|
|
|
35
|
-
var Header = styled.button(
|
|
36
|
-
var accordion =
|
|
37
|
-
small =
|
|
38
|
-
hasHorizontalPadding =
|
|
36
|
+
var Header = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n align-items: center;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ", "\n\n &:focus-visible {\n ", "\n }\n\n ", "\n"])), function (_ref3) {
|
|
37
|
+
var accordion = _ref3.theme.yoga.components.accordion,
|
|
38
|
+
small = _ref3.small,
|
|
39
|
+
hasHorizontalPadding = _ref3.hasHorizontalPadding;
|
|
39
40
|
return "\n padding:" + getVerticalPadding(accordion, small) + "px " + getHorizontalPadding(accordion, hasHorizontalPadding) + "px;\n";
|
|
40
|
-
}, function (_ref3) {
|
|
41
|
-
var elements = _ref3.theme.yoga.colors.elements;
|
|
42
|
-
return "\n background: " + elements.backgroundAndDisabled + ";\n\n ";
|
|
43
41
|
}, function (_ref4) {
|
|
44
|
-
var
|
|
45
|
-
return
|
|
42
|
+
var elements = _ref4.theme.yoga.colors.elements;
|
|
43
|
+
return "\n background: " + elements.backgroundAndDisabled + ";\n\n ";
|
|
44
|
+
}, function (_ref5) {
|
|
45
|
+
var disabled = _ref5.disabled;
|
|
46
|
+
return disabled && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "])));
|
|
46
47
|
});
|
|
47
|
-
var Title = styled.div(
|
|
48
|
-
var accordion =
|
|
49
|
-
subtitle =
|
|
48
|
+
var Title = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n text-align: start;\n\n ", "\n\n ", "\n"])), function (_ref6) {
|
|
49
|
+
var accordion = _ref6.theme.yoga.components.accordion,
|
|
50
|
+
subtitle = _ref6.subtitle;
|
|
50
51
|
return "\n gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n";
|
|
51
|
-
}, function (
|
|
52
|
-
var disabled =
|
|
53
|
-
return disabled && css(
|
|
54
|
-
var text =
|
|
52
|
+
}, function (_ref7) {
|
|
53
|
+
var disabled = _ref7.disabled;
|
|
54
|
+
return disabled && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n ", "\n "])), function (_ref8) {
|
|
55
|
+
var text = _ref8.theme.yoga.colors.text;
|
|
55
56
|
return "\n color: " + text.secundary + ";\n ";
|
|
56
57
|
});
|
|
57
58
|
});
|
|
58
|
-
var AccordionContent = styled.div(
|
|
59
|
-
var isOpen =
|
|
59
|
+
var AccordionContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n height: auto;\n max-height: ", ";\n overflow: hidden;\n transition: max-height 200ms ease-in-out;\n\n ", "\n\n ", "\n"])), function (_ref9) {
|
|
60
|
+
var isOpen = _ref9.isOpen;
|
|
60
61
|
return isOpen ? '9999px' : '0';
|
|
61
|
-
}, function (_ref9) {
|
|
62
|
-
var accordion = _ref9.theme.yoga.components.accordion,
|
|
63
|
-
small = _ref9.small;
|
|
64
|
-
return small && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n ", " {\n padding-bottom: ", "px;\n }\n "])), Content, accordion.padding.small);
|
|
65
62
|
}, function (_ref10) {
|
|
66
|
-
var
|
|
67
|
-
|
|
63
|
+
var accordion = _ref10.theme.yoga.components.accordion,
|
|
64
|
+
small = _ref10.small;
|
|
65
|
+
return small && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n ", " {\n padding-bottom: ", "px;\n }\n "])), Content, accordion.padding.small);
|
|
66
|
+
}, function (_ref11) {
|
|
67
|
+
var hasHorizontalPadding = _ref11.hasHorizontalPadding;
|
|
68
|
+
return !hasHorizontalPadding && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n ", " {\n padding-left: 0;\n padding-right: 0;\n }\n "])), Content);
|
|
68
69
|
});
|
|
69
|
-
var ArrowWrapper = styled.div(
|
|
70
|
-
var isOpen =
|
|
70
|
+
var ArrowWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n align-items: center;\n display: flex;\n justify-content: center;\n\n svg {\n transform: ", ";\n transition: all 200ms ease-out 0s;\n\n ", "\n }\n\n ", "\n"])), function (_ref12) {
|
|
71
|
+
var isOpen = _ref12.isOpen;
|
|
71
72
|
return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
|
|
72
|
-
}, function (_ref12) {
|
|
73
|
-
var _ref12$theme$yoga$col = _ref12.theme.yoga.colors,
|
|
74
|
-
primary = _ref12$theme$yoga$col.primary,
|
|
75
|
-
text = _ref12$theme$yoga$col.text,
|
|
76
|
-
disabled = _ref12.disabled;
|
|
77
|
-
return "\n fill: " + (disabled ? text.secondary : primary) + ";\n ";
|
|
78
73
|
}, function (_ref13) {
|
|
79
|
-
var
|
|
74
|
+
var _ref13$theme$yoga$col = _ref13.theme.yoga.colors,
|
|
75
|
+
primary = _ref13$theme$yoga$col.primary,
|
|
76
|
+
text = _ref13$theme$yoga$col.text,
|
|
77
|
+
disabled = _ref13.disabled;
|
|
78
|
+
return "\n fill: " + (disabled ? text.secondary : primary) + ";\n ";
|
|
79
|
+
}, function (_ref14) {
|
|
80
|
+
var accordion = _ref14.theme.yoga.components.accordion;
|
|
80
81
|
return "\n padding: " + accordion.paddingArrow.total + "px;\n";
|
|
81
82
|
});
|
|
82
83
|
|
|
83
|
-
var Accordion = function Accordion(
|
|
84
|
-
var title =
|
|
85
|
-
subtitle =
|
|
86
|
-
children =
|
|
87
|
-
disabled =
|
|
88
|
-
expanded =
|
|
89
|
-
small =
|
|
90
|
-
hasHorizontalPadding =
|
|
91
|
-
props = _objectWithoutPropertiesLoose(
|
|
84
|
+
var Accordion = function Accordion(_ref15) {
|
|
85
|
+
var title = _ref15.title,
|
|
86
|
+
subtitle = _ref15.subtitle,
|
|
87
|
+
children = _ref15.children,
|
|
88
|
+
disabled = _ref15.disabled,
|
|
89
|
+
expanded = _ref15.expanded,
|
|
90
|
+
small = _ref15.small,
|
|
91
|
+
hasHorizontalPadding = _ref15.hasHorizontalPadding,
|
|
92
|
+
props = _objectWithoutPropertiesLoose(_ref15, _excluded);
|
|
92
93
|
|
|
93
94
|
var _useState = useState(expanded),
|
|
94
95
|
open = _useState[0],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.75.
|
|
3
|
+
"version": "7.75.2",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@gympass/yoga-common": "^1.1.2",
|
|
29
29
|
"@gympass/yoga-helpers": "^1.0.3",
|
|
30
|
-
"@gympass/yoga-icons": "^1.
|
|
30
|
+
"@gympass/yoga-icons": "^1.10.0",
|
|
31
31
|
"@gympass/yoga-illustrations": "^0.5.1",
|
|
32
32
|
"@gympass/yoga-system": "^0.11.0",
|
|
33
33
|
"@gympass/yoga-tokens": "^3.1.5",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"react": ">=16",
|
|
54
54
|
"styled-components": "^4.4.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "53be1dad6520aa5bd5029e70630a54b222a95c90",
|
|
57
57
|
"module": "./esm",
|
|
58
58
|
"private": false,
|
|
59
59
|
"react-native": "./cjs/index.native.js"
|