@gympass/yoga 7.95.0 → 7.96.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.
- package/cjs/Heading/Heading.theme.js +8 -6
- package/cjs/Heading/web/BackButton.js +57 -7
- package/cjs/Heading/web/RightButton.js +55 -7
- package/cjs/Heading/web/StyledHeading.js +2 -3
- package/esm/Heading/Heading.theme.js +8 -6
- package/esm/Heading/web/BackButton.js +58 -8
- package/esm/Heading/web/RightButton.js +55 -7
- package/esm/Heading/web/StyledHeading.js +2 -3
- package/package.json +2 -2
|
@@ -24,15 +24,17 @@ module.exports = __toCommonJS(Heading_theme_exports);
|
|
|
24
24
|
const Heading = ({ spacing, colors }) => ({
|
|
25
25
|
background: colors.white,
|
|
26
26
|
padding: {
|
|
27
|
-
vertical: spacing.
|
|
28
|
-
horizontal: spacing.
|
|
29
|
-
horizontalMobile: spacing.medium
|
|
27
|
+
vertical: spacing.xxxsmall,
|
|
28
|
+
horizontal: spacing.small
|
|
30
29
|
},
|
|
31
30
|
height: spacing.xxxlarge,
|
|
32
31
|
button: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
color: colors.secondary,
|
|
33
|
+
width: spacing.xxlarge + spacing.xxxsmall,
|
|
34
|
+
height: spacing.xxlarge + spacing.xxxsmall,
|
|
35
|
+
backgroundWidth: spacing.xxlarge,
|
|
36
|
+
backgroundHeight: spacing.xxlarge,
|
|
37
|
+
background: colors.elements.lineAndBorders
|
|
36
38
|
}
|
|
37
39
|
});
|
|
38
40
|
var Heading_theme_default = Heading;
|
|
@@ -66,23 +66,73 @@ var import_styled_components = __toESM(require("styled-components"));
|
|
|
66
66
|
var import_prop_types = __toESM(require("prop-types"));
|
|
67
67
|
var import_yoga_icons = require("@gympass/yoga-icons");
|
|
68
68
|
var import_Button = __toESM(require("../../Button"));
|
|
69
|
-
|
|
69
|
+
var import_Box = __toESM(require("../../Box"));
|
|
70
|
+
var import_Icon = __toESM(require("../../Icon"));
|
|
71
|
+
const ButtonIcon = (0, import_styled_components.default)(import_Button.default)`
|
|
70
72
|
${({
|
|
73
|
+
secondary,
|
|
71
74
|
theme: {
|
|
72
75
|
yoga: {
|
|
73
76
|
components: { heading }
|
|
74
77
|
}
|
|
75
78
|
}
|
|
76
79
|
}) => {
|
|
77
|
-
return `
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
80
|
+
return import_styled_components.css`
|
|
81
|
+
background-color: transparent;
|
|
82
|
+
box-shadow: none;
|
|
83
|
+
max-width: ${heading.button.width}px;
|
|
84
|
+
min-width: ${heading.button.width}px;
|
|
85
|
+
height: ${heading.button.height}px;
|
|
86
|
+
|
|
87
|
+
&:active {
|
|
88
|
+
background-color: transparent;
|
|
89
|
+
& svg {
|
|
90
|
+
fill: ${heading.button.color};
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:not([disabled]):hover {
|
|
95
|
+
background-color: transparent;
|
|
96
|
+
box-shadow: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&:not([disabled]):hover {
|
|
100
|
+
background-color: transparent;
|
|
101
|
+
box-shadow: none;
|
|
102
|
+
}
|
|
103
|
+
:not([disabled]):focus {
|
|
104
|
+
box-shadow: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
& div {
|
|
108
|
+
min-width: ${heading.button.backgroundWidth}px;
|
|
109
|
+
max-width: ${heading.button.backgroundWidth}px;
|
|
110
|
+
height: ${heading.button.backgroundHeight}px;
|
|
111
|
+
background-color: ${secondary ? "transparent" : heading.button.background};
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
& svg {
|
|
115
|
+
fill: ${heading.button.color};
|
|
116
|
+
margin: 0;
|
|
117
|
+
}
|
|
118
|
+
`;
|
|
119
|
+
}};
|
|
82
120
|
`;
|
|
83
121
|
const BackButton = (_a) => {
|
|
84
122
|
var _b = _a, { onClick } = _b, props = __objRest(_b, ["onClick"]);
|
|
85
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({}, props), {
|
|
123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({ onClick, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
|
+
import_Box.default,
|
|
125
|
+
{
|
|
126
|
+
flex: 1,
|
|
127
|
+
display: "flex",
|
|
128
|
+
justifyContent: "center",
|
|
129
|
+
alignItems: "center",
|
|
130
|
+
borderRadius: "50%",
|
|
131
|
+
width: "xxlarge",
|
|
132
|
+
height: "xxlarge",
|
|
133
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.ArrowLeft, role: "img" })
|
|
134
|
+
}
|
|
135
|
+
) }));
|
|
86
136
|
};
|
|
87
137
|
BackButton.propTypes = {
|
|
88
138
|
onClick: import_prop_types.default.func.isRequired
|
|
@@ -65,25 +65,73 @@ var import_react = __toESM(require("react"));
|
|
|
65
65
|
var import_styled_components = __toESM(require("styled-components"));
|
|
66
66
|
var import_prop_types = __toESM(require("prop-types"));
|
|
67
67
|
var import_Button = __toESM(require("../../Button"));
|
|
68
|
-
|
|
68
|
+
var import_Icon = __toESM(require("../../Icon"));
|
|
69
|
+
var import_Box = __toESM(require("../../Box"));
|
|
70
|
+
const ButtonIcon = (0, import_styled_components.default)(import_Button.default)`
|
|
69
71
|
${({
|
|
72
|
+
secondary,
|
|
70
73
|
theme: {
|
|
71
74
|
yoga: {
|
|
72
75
|
components: { heading }
|
|
73
76
|
}
|
|
74
77
|
}
|
|
75
|
-
}) =>
|
|
76
|
-
|
|
78
|
+
}) => {
|
|
79
|
+
return import_styled_components.css`
|
|
80
|
+
background-color: transparent;
|
|
81
|
+
box-shadow: none;
|
|
82
|
+
max-width: ${heading.button.width}px;
|
|
83
|
+
min-width: ${heading.button.width}px;
|
|
77
84
|
height: ${heading.button.height}px;
|
|
78
85
|
|
|
79
|
-
|
|
80
|
-
|
|
86
|
+
&:active {
|
|
87
|
+
background-color: transparent;
|
|
88
|
+
& svg {
|
|
89
|
+
fill: ${heading.button.color};
|
|
90
|
+
}
|
|
81
91
|
}
|
|
82
|
-
|
|
92
|
+
|
|
93
|
+
&:not([disabled]):hover {
|
|
94
|
+
background-color: transparent;
|
|
95
|
+
box-shadow: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:not([disabled]):hover {
|
|
99
|
+
background-color: transparent;
|
|
100
|
+
box-shadow: none;
|
|
101
|
+
}
|
|
102
|
+
:not([disabled]):focus {
|
|
103
|
+
box-shadow: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
& div {
|
|
107
|
+
min-width: ${heading.button.backgroundWidth}px;
|
|
108
|
+
max-width: ${heading.button.backgroundWidth}px;
|
|
109
|
+
height: ${heading.button.backgroundHeight}px;
|
|
110
|
+
background-color: ${secondary ? "transparent" : heading.button.background};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
& svg {
|
|
114
|
+
fill: ${heading.button.color};
|
|
115
|
+
margin: 0;
|
|
116
|
+
}
|
|
117
|
+
`;
|
|
118
|
+
}};
|
|
83
119
|
`;
|
|
84
120
|
const RightButton = (_a) => {
|
|
85
121
|
var _b = _a, { onClick, icon } = _b, props = __objRest(_b, ["onClick", "icon"]);
|
|
86
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({}, props), {
|
|
122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({ onClick, secondary: true, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
123
|
+
import_Box.default,
|
|
124
|
+
{
|
|
125
|
+
flex: 1,
|
|
126
|
+
display: "flex",
|
|
127
|
+
justifyContent: "center",
|
|
128
|
+
alignItems: "center",
|
|
129
|
+
borderRadius: "50%",
|
|
130
|
+
width: "xxlarge",
|
|
131
|
+
height: "xxlarge",
|
|
132
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: icon, role: "img" })
|
|
133
|
+
}
|
|
134
|
+
) }));
|
|
87
135
|
};
|
|
88
136
|
RightButton.propTypes = {
|
|
89
137
|
onClick: import_prop_types.default.func.isRequired,
|
|
@@ -44,10 +44,9 @@ const StyledHeading = import_styled_components.default.header`
|
|
|
44
44
|
}) => {
|
|
45
45
|
return import_styled_components.css`
|
|
46
46
|
background: ${heading.background};
|
|
47
|
-
padding: ${heading.padding.vertical}px
|
|
48
|
-
${heading.padding.horizontalMobile}px;
|
|
49
|
-
width: 100%;
|
|
47
|
+
padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
|
|
50
48
|
min-height: ${heading.height}px;
|
|
49
|
+
width: 100%;
|
|
51
50
|
display: flex;
|
|
52
51
|
justify-content: space-between;
|
|
53
52
|
align-items: center;
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
const Heading = ({ spacing, colors }) => ({
|
|
2
2
|
background: colors.white,
|
|
3
3
|
padding: {
|
|
4
|
-
vertical: spacing.
|
|
5
|
-
horizontal: spacing.
|
|
6
|
-
horizontalMobile: spacing.medium
|
|
4
|
+
vertical: spacing.xxxsmall,
|
|
5
|
+
horizontal: spacing.small
|
|
7
6
|
},
|
|
8
7
|
height: spacing.xxxlarge,
|
|
9
8
|
button: {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
color: colors.secondary,
|
|
10
|
+
width: spacing.xxlarge + spacing.xxxsmall,
|
|
11
|
+
height: spacing.xxlarge + spacing.xxxsmall,
|
|
12
|
+
backgroundWidth: spacing.xxlarge,
|
|
13
|
+
backgroundHeight: spacing.xxlarge,
|
|
14
|
+
background: colors.elements.lineAndBorders
|
|
13
15
|
}
|
|
14
16
|
});
|
|
15
17
|
var Heading_theme_default = Heading;
|
|
@@ -31,27 +31,77 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import { jsx } from "react/jsx-runtime";
|
|
33
33
|
import React from "react";
|
|
34
|
-
import styled from "styled-components";
|
|
34
|
+
import styled, { css } from "styled-components";
|
|
35
35
|
import PropTypes from "prop-types";
|
|
36
36
|
import { ArrowLeft } from "@gympass/yoga-icons";
|
|
37
37
|
import Button from "../../Button";
|
|
38
|
-
|
|
38
|
+
import Box from "../../Box";
|
|
39
|
+
import Icon from "../../Icon";
|
|
40
|
+
const ButtonIcon = styled(Button)`
|
|
39
41
|
${({
|
|
42
|
+
secondary,
|
|
40
43
|
theme: {
|
|
41
44
|
yoga: {
|
|
42
45
|
components: { heading }
|
|
43
46
|
}
|
|
44
47
|
}
|
|
45
48
|
}) => {
|
|
46
|
-
return `
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
49
|
+
return css`
|
|
50
|
+
background-color: transparent;
|
|
51
|
+
box-shadow: none;
|
|
52
|
+
max-width: ${heading.button.width}px;
|
|
53
|
+
min-width: ${heading.button.width}px;
|
|
54
|
+
height: ${heading.button.height}px;
|
|
55
|
+
|
|
56
|
+
&:active {
|
|
57
|
+
background-color: transparent;
|
|
58
|
+
& svg {
|
|
59
|
+
fill: ${heading.button.color};
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:not([disabled]):hover {
|
|
64
|
+
background-color: transparent;
|
|
65
|
+
box-shadow: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&:not([disabled]):hover {
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
box-shadow: none;
|
|
71
|
+
}
|
|
72
|
+
:not([disabled]):focus {
|
|
73
|
+
box-shadow: none;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
& div {
|
|
77
|
+
min-width: ${heading.button.backgroundWidth}px;
|
|
78
|
+
max-width: ${heading.button.backgroundWidth}px;
|
|
79
|
+
height: ${heading.button.backgroundHeight}px;
|
|
80
|
+
background-color: ${secondary ? "transparent" : heading.button.background};
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
& svg {
|
|
84
|
+
fill: ${heading.button.color};
|
|
85
|
+
margin: 0;
|
|
86
|
+
}
|
|
87
|
+
`;
|
|
88
|
+
}};
|
|
51
89
|
`;
|
|
52
90
|
const BackButton = (_a) => {
|
|
53
91
|
var _b = _a, { onClick } = _b, props = __objRest(_b, ["onClick"]);
|
|
54
|
-
return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({}, props), {
|
|
92
|
+
return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({ onClick, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ jsx(
|
|
93
|
+
Box,
|
|
94
|
+
{
|
|
95
|
+
flex: 1,
|
|
96
|
+
display: "flex",
|
|
97
|
+
justifyContent: "center",
|
|
98
|
+
alignItems: "center",
|
|
99
|
+
borderRadius: "50%",
|
|
100
|
+
width: "xxlarge",
|
|
101
|
+
height: "xxlarge",
|
|
102
|
+
children: /* @__PURE__ */ jsx(Icon, { as: ArrowLeft, role: "img" })
|
|
103
|
+
}
|
|
104
|
+
) }));
|
|
55
105
|
};
|
|
56
106
|
BackButton.propTypes = {
|
|
57
107
|
onClick: PropTypes.func.isRequired
|
|
@@ -34,25 +34,73 @@ import React from "react";
|
|
|
34
34
|
import styled, { css } from "styled-components";
|
|
35
35
|
import PropTypes from "prop-types";
|
|
36
36
|
import Button from "../../Button";
|
|
37
|
-
|
|
37
|
+
import Icon from "../../Icon";
|
|
38
|
+
import Box from "../../Box";
|
|
39
|
+
const ButtonIcon = styled(Button)`
|
|
38
40
|
${({
|
|
41
|
+
secondary,
|
|
39
42
|
theme: {
|
|
40
43
|
yoga: {
|
|
41
44
|
components: { heading }
|
|
42
45
|
}
|
|
43
46
|
}
|
|
44
|
-
}) =>
|
|
45
|
-
|
|
47
|
+
}) => {
|
|
48
|
+
return css`
|
|
49
|
+
background-color: transparent;
|
|
50
|
+
box-shadow: none;
|
|
51
|
+
max-width: ${heading.button.width}px;
|
|
52
|
+
min-width: ${heading.button.width}px;
|
|
46
53
|
height: ${heading.button.height}px;
|
|
47
54
|
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
&:active {
|
|
56
|
+
background-color: transparent;
|
|
57
|
+
& svg {
|
|
58
|
+
fill: ${heading.button.color};
|
|
59
|
+
}
|
|
50
60
|
}
|
|
51
|
-
|
|
61
|
+
|
|
62
|
+
&:not([disabled]):hover {
|
|
63
|
+
background-color: transparent;
|
|
64
|
+
box-shadow: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&:not([disabled]):hover {
|
|
68
|
+
background-color: transparent;
|
|
69
|
+
box-shadow: none;
|
|
70
|
+
}
|
|
71
|
+
:not([disabled]):focus {
|
|
72
|
+
box-shadow: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
& div {
|
|
76
|
+
min-width: ${heading.button.backgroundWidth}px;
|
|
77
|
+
max-width: ${heading.button.backgroundWidth}px;
|
|
78
|
+
height: ${heading.button.backgroundHeight}px;
|
|
79
|
+
background-color: ${secondary ? "transparent" : heading.button.background};
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
& svg {
|
|
83
|
+
fill: ${heading.button.color};
|
|
84
|
+
margin: 0;
|
|
85
|
+
}
|
|
86
|
+
`;
|
|
87
|
+
}};
|
|
52
88
|
`;
|
|
53
89
|
const RightButton = (_a) => {
|
|
54
90
|
var _b = _a, { onClick, icon } = _b, props = __objRest(_b, ["onClick", "icon"]);
|
|
55
|
-
return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({}, props), {
|
|
91
|
+
return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({ onClick, secondary: true, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ jsx(
|
|
92
|
+
Box,
|
|
93
|
+
{
|
|
94
|
+
flex: 1,
|
|
95
|
+
display: "flex",
|
|
96
|
+
justifyContent: "center",
|
|
97
|
+
alignItems: "center",
|
|
98
|
+
borderRadius: "50%",
|
|
99
|
+
width: "xxlarge",
|
|
100
|
+
height: "xxlarge",
|
|
101
|
+
children: /* @__PURE__ */ jsx(Icon, { as: icon, role: "img" })
|
|
102
|
+
}
|
|
103
|
+
) }));
|
|
56
104
|
};
|
|
57
105
|
RightButton.propTypes = {
|
|
58
106
|
onClick: PropTypes.func.isRequired,
|
|
@@ -10,10 +10,9 @@ const StyledHeading = styled.header`
|
|
|
10
10
|
}) => {
|
|
11
11
|
return css`
|
|
12
12
|
background: ${heading.background};
|
|
13
|
-
padding: ${heading.padding.vertical}px
|
|
14
|
-
${heading.padding.horizontalMobile}px;
|
|
15
|
-
width: 100%;
|
|
13
|
+
padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
|
|
16
14
|
min-height: ${heading.height}px;
|
|
15
|
+
width: 100%;
|
|
17
16
|
display: flex;
|
|
18
17
|
justify-content: space-between;
|
|
19
18
|
align-items: center;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.96.1",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"types": "./typings/index.d.ts",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-native": "0.72.3",
|
|
58
58
|
"styled-components": "^4.4.0"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "a16ac9a9aec864b53a8f40a720d72e7366c2a1d9",
|
|
61
61
|
"module": "./esm",
|
|
62
62
|
"private": false,
|
|
63
63
|
"react-native": "./cjs/index.native.js"
|