@gympass/yoga 7.95.0 → 7.96.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 (9) hide show
  1. package/cjs/Heading/Heading.theme.js +8 -6
  2. package/cjs/Heading/web/BackButton.js +57 -7
  3. package/cjs/Heading/web/RightButton.js +55 -7
  4. package/cjs/Heading/web/StyledHeading.js +1 -3
  5. package/esm/Heading/Heading.theme.js +8 -6
  6. package/esm/Heading/web/BackButton.js +58 -8
  7. package/esm/Heading/web/RightButton.js +55 -7
  8. package/esm/Heading/web/StyledHeading.js +1 -3
  9. package/package.json +2 -2
package/cjs/Heading/Heading.theme.js CHANGED
@@ -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.small,
28
- horizontal: spacing.huge,
29
- horizontalMobile: spacing.medium
27
+ vertical: spacing.xxxsmall,
28
+ horizontal: spacing.small
30
29
  },
31
30
  height: spacing.xxxlarge,
32
31
  button: {
33
- width: spacing.large,
34
- height: spacing.large,
35
- marginRight: spacing.medium
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;
package/cjs/Heading/web/BackButton.js CHANGED
@@ -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
- const ButtonIcon = (0, import_styled_components.default)(import_Button.default.Icon)`
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
- width: ${heading.button.width}px;
79
- height: ${heading.button.height}px;
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), { icon: import_yoga_icons.ArrowLeft, inverted: true, onClick }));
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
package/cjs/Heading/web/RightButton.js CHANGED
@@ -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
- const ButtonIcon = (0, import_styled_components.default)(import_Button.default.Icon)`
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
- }) => import_styled_components.css`
76
- width: ${heading.button.width}px;
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
- :not(:last-of-type) {
80
- margin-right: ${heading.button.marginRight}px;
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), { icon, inverted: true, onClick }));
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,
package/cjs/Heading/web/StyledHeading.js CHANGED
@@ -44,10 +44,8 @@ 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;
47
+ padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
49
48
  width: 100%;
50
- min-height: ${heading.height}px;
51
49
  display: flex;
52
50
  justify-content: space-between;
53
51
  align-items: center;
package/esm/Heading/Heading.theme.js CHANGED
@@ -1,15 +1,17 @@
1
1
  const Heading = ({ spacing, colors }) => ({
2
2
  background: colors.white,
3
3
  padding: {
4
- vertical: spacing.small,
5
- horizontal: spacing.huge,
6
- horizontalMobile: spacing.medium
4
+ vertical: spacing.xxxsmall,
5
+ horizontal: spacing.small
7
6
  },
8
7
  height: spacing.xxxlarge,
9
8
  button: {
10
- width: spacing.large,
11
- height: spacing.large,
12
- marginRight: spacing.medium
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;
package/esm/Heading/web/BackButton.js CHANGED
@@ -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
- const ButtonIcon = styled(Button.Icon)`
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
- width: ${heading.button.width}px;
48
- height: ${heading.button.height}px;
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), { icon: ArrowLeft, inverted: true, onClick }));
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
package/esm/Heading/web/RightButton.js CHANGED
@@ -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
- const ButtonIcon = styled(Button.Icon)`
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
- }) => css`
45
- width: ${heading.button.width}px;
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
- :not(:last-of-type) {
49
- margin-right: ${heading.button.marginRight}px;
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), { icon, inverted: true, onClick }));
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,
package/esm/Heading/web/StyledHeading.js CHANGED
@@ -10,10 +10,8 @@ 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;
13
+ padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
15
14
  width: 100%;
16
- min-height: ${heading.height}px;
17
15
  display: flex;
18
16
  justify-content: space-between;
19
17
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.95.0",
3
+ "version": "7.96.0",
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": "cc39368e92af1bffe325d0ed46961c77354b806a",
60
+ "gitHead": "d1537d3671135330e2c56c847105d5a86ff38515",
61
61
  "module": "./esm",
62
62
  "private": false,
63
63
  "react-native": "./cjs/index.native.js"