@gympass/yoga 7.93.2 → 7.95.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 (11) hide show
  1. package/cjs/Feedback/web/StyledFeedback.js +2 -0
  2. package/cjs/NavigationMenu/web/BottomItems/BottomItem.js +5 -10
  3. package/cjs/NavigationMenu/web/BottomItems/BottomItems.js +8 -4
  4. package/cjs/NavigationMenu/web/Item/styles.js +20 -0
  5. package/cjs/NavigationMenu/web/NavigationMenu.js +19 -12
  6. package/esm/Feedback/web/StyledFeedback.js +2 -0
  7. package/esm/NavigationMenu/web/BottomItems/BottomItem.js +5 -10
  8. package/esm/NavigationMenu/web/BottomItems/BottomItems.js +8 -4
  9. package/esm/NavigationMenu/web/Item/styles.js +20 -0
  10. package/esm/NavigationMenu/web/NavigationMenu.js +19 -12
  11. package/package.json +2 -2
package/cjs/Feedback/web/StyledFeedback.js CHANGED
@@ -82,10 +82,12 @@ const Actions = (0, import_styled_components.default)(import_Box.default)`
82
82
  }) => import_styled_components.css`
83
83
  display: flex;
84
84
  flex-direction: column;
85
+ gap: ${spacing.small}px;
85
86
 
86
87
  @media (min-width: 769px) {
87
88
  flex-direction: row;
88
89
  margin-top: ${spacing.xxlarge}px;
90
+ gap: 0;
89
91
  }
90
92
  `}}
91
93
  `;
package/cjs/NavigationMenu/web/BottomItems/BottomItem.js CHANGED
@@ -33,10 +33,10 @@ __export(BottomItem_exports, {
33
33
  module.exports = __toCommonJS(BottomItem_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_styled_components = __toESM(require("styled-components"));
36
+ var import_yoga = require("@gympass/yoga");
36
37
  var import_Icon = __toESM(require("../../../Icon"));
37
38
  var import_Box = __toESM(require("../../../Box"));
38
- var import_Text = __toESM(require("../../../Text"));
39
- const StyledText = (0, import_styled_components.default)(import_Text.default)`
39
+ const StyledText = (0, import_styled_components.default)(import_yoga.Text.SmallestException)`
40
40
  ${({
41
41
  theme: {
42
42
  yoga: {
@@ -58,7 +58,7 @@ const Active = import_styled_components.css`
58
58
  theme: {
59
59
  yoga: {
60
60
  components: {
61
- navigationmenu: { backgroundColor, icon, font }
61
+ navigationmenu: { icon, font }
62
62
  }
63
63
  }
64
64
  }
@@ -68,8 +68,6 @@ const Active = import_styled_components.css`
68
68
  }
69
69
 
70
70
  div {
71
- background-color: ${backgroundColor.default};
72
-
73
71
  ${StyledText} {
74
72
  color: ${font.color.active};
75
73
  }
@@ -86,14 +84,13 @@ const StyledItem = import_styled_components.default.li`
86
84
  theme: {
87
85
  yoga: {
88
86
  components: {
89
- navigationmenu: { backgroundColor, border, icon, font }
87
+ navigationmenu: { border, icon, font }
90
88
  }
91
89
  }
92
90
  }
93
91
  }) => import_styled_components.css`
94
92
  transition: background-color 300ms ease-in-out;
95
93
 
96
- background-color: transparent;
97
94
  border-radius: ${border.radius.default}px;
98
95
  list-style-type: none;
99
96
  cursor: pointer;
@@ -107,8 +104,6 @@ const StyledItem = import_styled_components.default.li`
107
104
  &:hover,
108
105
  &:focus {
109
106
  ${!isActive && import_styled_components.css`
110
- background-color: ${backgroundColor.hover};
111
-
112
107
  ${StyledText} {
113
108
  color: ${font.color.hover};
114
109
  }
@@ -147,7 +142,7 @@ const StyledTextContainer = (0, import_styled_components.default)(import_Box.def
147
142
  align-items: center;
148
143
  justify-content: center;
149
144
  gap: ${gap.xxxsmall}px;
150
- padding: ${padding.xxsmall}px ${padding.xxxsmall}px;
145
+ padding: ${padding.xxxsmall}px;
151
146
  border-radius: ${border.radius.default}px;
152
147
  `}
153
148
  `;
package/cjs/NavigationMenu/web/BottomItems/BottomItems.js CHANGED
@@ -35,6 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_styled_components = __toESM(require("styled-components"));
36
36
  var import_yoga_helpers = require("@gympass/yoga-helpers");
37
37
  const StyledItemsContainer = import_styled_components.default.nav`
38
+ position: relative;
38
39
  ${import_yoga_helpers.media.lg`display: none`}
39
40
  `;
40
41
  const StyledItems = import_styled_components.default.ul`
@@ -42,22 +43,25 @@ const StyledItems = import_styled_components.default.ul`
42
43
  theme: {
43
44
  yoga: {
44
45
  components: {
45
- navigationmenu: { backgroundColor, border, gap, padding }
46
+ navigationmenu: { backgroundColor, border, gap }
46
47
  }
47
48
  }
48
49
  }
49
50
  }) => import_styled_components.css`
51
+ position: absolute;
52
+ bottom: 0;
50
53
  display: grid;
51
54
  grid-auto-columns: minmax(0, 1fr);
52
55
  grid-auto-flow: column;
53
56
  align-items: center;
54
57
  width: 100%;
55
- height: 74px;
56
- background-color: ${backgroundColor.default};
58
+ height: 56px;
59
+ background-color: ${backgroundColor.white};;
57
60
  margin: 0;
58
- padding: ${padding.xxxsmall}px;
61
+ padding: 0;
59
62
  border: 1px solid ${border.color.default};
60
63
  gap: ${gap.xxxsmall}px;
64
+ z-index: 15;
61
65
  `}
62
66
  `;
63
67
  const BottomItems = ({ children }) => {
package/cjs/NavigationMenu/web/Item/styles.js CHANGED
@@ -135,6 +135,7 @@ const StyledItem = import_styled_components.default.li`
135
135
  isActive,
136
136
  theme: {
137
137
  yoga: {
138
+ spacing,
138
139
  components: {
139
140
  navigationmenu: { backgroundColor, border, icon, font }
140
141
  }
@@ -147,6 +148,7 @@ const StyledItem = import_styled_components.default.li`
147
148
  border-radius: ${border.radius.default}px;
148
149
  list-style-type: none;
149
150
  cursor: pointer;
151
+ margin-right: ${spacing.xxsmall}px;
150
152
 
151
153
  svg {
152
154
  height: ${icon.height}px;
@@ -171,6 +173,24 @@ const StyledItem = import_styled_components.default.li`
171
173
  a {
172
174
  text-decoration: none;
173
175
 
176
+ &:hover,
177
+ &:focus {
178
+ outline: none;
179
+
180
+ ${StyledTextContainer} {
181
+ background-color: ${backgroundColor.hover};
182
+ color: ${font.color.hover};
183
+ }
184
+
185
+ ${StyledText} {
186
+ color: ${font.color.hover};
187
+ }
188
+
189
+ svg {
190
+ fill: ${icon.fill.hover};
191
+ }
192
+ }
193
+
174
194
  &.active {
175
195
  ${Active}
176
196
  }
package/cjs/NavigationMenu/web/NavigationMenu.js CHANGED
@@ -39,10 +39,8 @@ var import_Switcher = __toESM(require("./Switcher"));
39
39
  var import_Item = require("./Item");
40
40
  var import_BottomItems = require("./BottomItems");
41
41
  var import_Box = __toESM(require("../../Box"));
42
- const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.default)`
42
+ const DeskTopContainer = import_styled_components.css`
43
43
  ${({
44
- isOpenOnMobile,
45
- isResponsive,
46
44
  theme: {
47
45
  yoga: {
48
46
  components: {
@@ -51,8 +49,10 @@ const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.de
51
49
  }
52
50
  }
53
51
  }) => import_styled_components.css`
52
+ position: relative;
54
53
  display: flex;
55
54
  flex-direction: column;
55
+ flex-shrink: 0;
56
56
  gap: ${gap.medium}px;
57
57
  padding: ${padding.small}px ${padding.xsmall}px;
58
58
  background-color: ${backgroundColor.default};
@@ -62,17 +62,24 @@ const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.de
62
62
  right: 0;
63
63
 
64
64
  transition: width 300ms ease-in-out;
65
+ `}
66
+ `;
67
+ const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.default)`
68
+ ${({ isOpenOnMobile, isResponsive }) => import_styled_components.css`
69
+ ${DeskTopContainer};
70
+
71
+ ${isResponsive && import_styled_components.css`
72
+ position: fixed;
73
+ width: 100%;
74
+ height: calc(100% - 56px);
75
+ z-index: 10;
76
+ top: 0;
77
+ right: ${isOpenOnMobile ? "0" : "-100%"};
65
78
 
66
- ${isResponsive && import_yoga_helpers.media.max("lg")`
67
- position: absolute;
68
- width: 100%;
69
- height: calc(100% - 74px);
70
- z-index: 10;
71
- Top: 0;
72
- right: ${isOpenOnMobile ? "0" : "-100%"};
79
+ transition: right 300ms ease-in-out;
73
80
 
74
- transition: right 300ms ease-in-out;
75
- `}
81
+ ${import_yoga_helpers.media.lg`${DeskTopContainer}`}
82
+ `}
76
83
  `}
77
84
  `;
78
85
  const StyledHeader = (0, import_styled_components.default)(import_Box.default)`
package/esm/Feedback/web/StyledFeedback.js CHANGED
@@ -44,10 +44,12 @@ const Actions = styled(Box)`
44
44
  }) => css`
45
45
  display: flex;
46
46
  flex-direction: column;
47
+ gap: ${spacing.small}px;
47
48
 
48
49
  @media (min-width: 769px) {
49
50
  flex-direction: row;
50
51
  margin-top: ${spacing.xxlarge}px;
52
+ gap: 0;
51
53
  }
52
54
  `}}
53
55
  `;
package/esm/NavigationMenu/web/BottomItems/BottomItem.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import styled, { css } from "styled-components";
3
+ import { Text } from "@gympass/yoga";
3
4
  import Icon from "../../../Icon";
4
5
  import Box from "../../../Box";
5
- import Text from "../../../Text";
6
- const StyledText = styled(Text)`
6
+ const StyledText = styled(Text.SmallestException)`
7
7
  ${({
8
8
  theme: {
9
9
  yoga: {
@@ -25,7 +25,7 @@ const Active = css`
25
25
  theme: {
26
26
  yoga: {
27
27
  components: {
28
- navigationmenu: { backgroundColor, icon, font }
28
+ navigationmenu: { icon, font }
29
29
  }
30
30
  }
31
31
  }
@@ -35,8 +35,6 @@ const Active = css`
35
35
  }
36
36
 
37
37
  div {
38
- background-color: ${backgroundColor.default};
39
-
40
38
  ${StyledText} {
41
39
  color: ${font.color.active};
42
40
  }
@@ -53,14 +51,13 @@ const StyledItem = styled.li`
53
51
  theme: {
54
52
  yoga: {
55
53
  components: {
56
- navigationmenu: { backgroundColor, border, icon, font }
54
+ navigationmenu: { border, icon, font }
57
55
  }
58
56
  }
59
57
  }
60
58
  }) => css`
61
59
  transition: background-color 300ms ease-in-out;
62
60
 
63
- background-color: transparent;
64
61
  border-radius: ${border.radius.default}px;
65
62
  list-style-type: none;
66
63
  cursor: pointer;
@@ -74,8 +71,6 @@ const StyledItem = styled.li`
74
71
  &:hover,
75
72
  &:focus {
76
73
  ${!isActive && css`
77
- background-color: ${backgroundColor.hover};
78
-
79
74
  ${StyledText} {
80
75
  color: ${font.color.hover};
81
76
  }
@@ -114,7 +109,7 @@ const StyledTextContainer = styled(Box)`
114
109
  align-items: center;
115
110
  justify-content: center;
116
111
  gap: ${gap.xxxsmall}px;
117
- padding: ${padding.xxsmall}px ${padding.xxxsmall}px;
112
+ padding: ${padding.xxxsmall}px;
118
113
  border-radius: ${border.radius.default}px;
119
114
  `}
120
115
  `;
package/esm/NavigationMenu/web/BottomItems/BottomItems.js CHANGED
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import styled, { css } from "styled-components";
3
3
  import { media } from "@gympass/yoga-helpers";
4
4
  const StyledItemsContainer = styled.nav`
5
+ position: relative;
5
6
  ${media.lg`display: none`}
6
7
  `;
7
8
  const StyledItems = styled.ul`
@@ -9,22 +10,25 @@ const StyledItems = styled.ul`
9
10
  theme: {
10
11
  yoga: {
11
12
  components: {
12
- navigationmenu: { backgroundColor, border, gap, padding }
13
+ navigationmenu: { backgroundColor, border, gap }
13
14
  }
14
15
  }
15
16
  }
16
17
  }) => css`
18
+ position: absolute;
19
+ bottom: 0;
17
20
  display: grid;
18
21
  grid-auto-columns: minmax(0, 1fr);
19
22
  grid-auto-flow: column;
20
23
  align-items: center;
21
24
  width: 100%;
22
- height: 74px;
23
- background-color: ${backgroundColor.default};
25
+ height: 56px;
26
+ background-color: ${backgroundColor.white};;
24
27
  margin: 0;
25
- padding: ${padding.xxxsmall}px;
28
+ padding: 0;
26
29
  border: 1px solid ${border.color.default};
27
30
  gap: ${gap.xxxsmall}px;
31
+ z-index: 15;
28
32
  `}
29
33
  `;
30
34
  const BottomItems = ({ children }) => {
package/esm/NavigationMenu/web/Item/styles.js CHANGED
@@ -99,6 +99,7 @@ const StyledItem = styled.li`
99
99
  isActive,
100
100
  theme: {
101
101
  yoga: {
102
+ spacing,
102
103
  components: {
103
104
  navigationmenu: { backgroundColor, border, icon, font }
104
105
  }
@@ -111,6 +112,7 @@ const StyledItem = styled.li`
111
112
  border-radius: ${border.radius.default}px;
112
113
  list-style-type: none;
113
114
  cursor: pointer;
115
+ margin-right: ${spacing.xxsmall}px;
114
116
 
115
117
  svg {
116
118
  height: ${icon.height}px;
@@ -135,6 +137,24 @@ const StyledItem = styled.li`
135
137
  a {
136
138
  text-decoration: none;
137
139
 
140
+ &:hover,
141
+ &:focus {
142
+ outline: none;
143
+
144
+ ${StyledTextContainer} {
145
+ background-color: ${backgroundColor.hover};
146
+ color: ${font.color.hover};
147
+ }
148
+
149
+ ${StyledText} {
150
+ color: ${font.color.hover};
151
+ }
152
+
153
+ svg {
154
+ fill: ${icon.fill.hover};
155
+ }
156
+ }
157
+
138
158
  &.active {
139
159
  ${Active}
140
160
  }
package/esm/NavigationMenu/web/NavigationMenu.js CHANGED
@@ -6,10 +6,8 @@ import Switcher from "./Switcher";
6
6
  import { Item, Subitem } from "./Item";
7
7
  import { BottomItems, BottomItem } from "./BottomItems";
8
8
  import Box from "../../Box";
9
- const StyledNavigationMenu = styled(Box)`
9
+ const DeskTopContainer = css`
10
10
  ${({
11
- isOpenOnMobile,
12
- isResponsive,
13
11
  theme: {
14
12
  yoga: {
15
13
  components: {
@@ -18,8 +16,10 @@ const StyledNavigationMenu = styled(Box)`
18
16
  }
19
17
  }
20
18
  }) => css`
19
+ position: relative;
21
20
  display: flex;
22
21
  flex-direction: column;
22
+ flex-shrink: 0;
23
23
  gap: ${gap.medium}px;
24
24
  padding: ${padding.small}px ${padding.xsmall}px;
25
25
  background-color: ${backgroundColor.default};
@@ -29,17 +29,24 @@ const StyledNavigationMenu = styled(Box)`
29
29
  right: 0;
30
30
 
31
31
  transition: width 300ms ease-in-out;
32
+ `}
33
+ `;
34
+ const StyledNavigationMenu = styled(Box)`
35
+ ${({ isOpenOnMobile, isResponsive }) => css`
36
+ ${DeskTopContainer};
37
+
38
+ ${isResponsive && css`
39
+ position: fixed;
40
+ width: 100%;
41
+ height: calc(100% - 56px);
42
+ z-index: 10;
43
+ top: 0;
44
+ right: ${isOpenOnMobile ? "0" : "-100%"};
32
45
 
33
- ${isResponsive && media.max("lg")`
34
- position: absolute;
35
- width: 100%;
36
- height: calc(100% - 74px);
37
- z-index: 10;
38
- Top: 0;
39
- right: ${isOpenOnMobile ? "0" : "-100%"};
46
+ transition: right 300ms ease-in-out;
40
47
 
41
- transition: right 300ms ease-in-out;
42
- `}
48
+ ${media.lg`${DeskTopContainer}`}
49
+ `}
43
50
  `}
44
51
  `;
45
52
  const StyledHeader = styled(Box)`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.93.2",
3
+ "version": "7.95.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": "6911e74a9ed37640c06031dcbe1525140d0967d5",
60
+ "gitHead": "cc39368e92af1bffe325d0ed46961c77354b806a",
61
61
  "module": "./esm",
62
62
  "private": false,
63
63
  "react-native": "./cjs/index.native.js"