@gympass/yoga 7.96.3 → 7.97.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/Dialog/web/Dialog.js +30 -1
- package/esm/Dialog/web/Dialog.js +31 -2
- package/package.json +2 -2
package/cjs/Dialog/web/Dialog.js
CHANGED
|
@@ -113,6 +113,27 @@ const Overlay = import_styled_components.default.div`
|
|
|
113
113
|
background-color: rgba(35, 27, 34, 0.48);
|
|
114
114
|
`}
|
|
115
115
|
`;
|
|
116
|
+
const CloseButton = (0, import_styled_components.default)(import__.Button.Icon)`
|
|
117
|
+
${({ theme }) => {
|
|
118
|
+
const background = theme.yoga.colors.elements.lineAndBorders;
|
|
119
|
+
const containerSize = theme.yoga.spacing.xxlarge;
|
|
120
|
+
const svgSize = theme.yoga.spacing.medium;
|
|
121
|
+
return import_styled_components.css`
|
|
122
|
+
width: ${containerSize}px;
|
|
123
|
+
height: ${containerSize}px;
|
|
124
|
+
background-color: ${background};
|
|
125
|
+
|
|
126
|
+
svg {
|
|
127
|
+
width: ${svgSize}px;
|
|
128
|
+
height: ${svgSize}px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&:active {
|
|
132
|
+
background-color: ${background};
|
|
133
|
+
}
|
|
134
|
+
`;
|
|
135
|
+
}}
|
|
136
|
+
`;
|
|
116
137
|
const Dialog = import_react.default.forwardRef(
|
|
117
138
|
(_a, forwardedRef) => {
|
|
118
139
|
var _b = _a, { isOpen, hideCloseButton, children, dialogId, onClose, zIndex } = _b, props = __objRest(_b, ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"]);
|
|
@@ -150,7 +171,15 @@ const Dialog = import_react.default.forwardRef(
|
|
|
150
171
|
ref: dialogRef,
|
|
151
172
|
zIndex,
|
|
152
173
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledDialog, __spreadProps(__spreadValues({ onClose }, props), { children: [
|
|
153
|
-
isCloseButtonVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
174
|
+
isCloseButtonVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
175
|
+
CloseButton,
|
|
176
|
+
{
|
|
177
|
+
icon: import_yoga_icons.Close,
|
|
178
|
+
inverted: true,
|
|
179
|
+
secondary: true,
|
|
180
|
+
onClick: onClose
|
|
181
|
+
}
|
|
182
|
+
) }),
|
|
154
183
|
children
|
|
155
184
|
] }))
|
|
156
185
|
}
|
package/esm/Dialog/web/Dialog.js
CHANGED
|
@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
|
|
|
32
32
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
33
33
|
import React, { useEffect, useCallback } from "react";
|
|
34
34
|
import { createPortal } from "react-dom";
|
|
35
|
-
import styled from "styled-components";
|
|
35
|
+
import styled, { css } from "styled-components";
|
|
36
36
|
import { func, bool, node, number, string } from "prop-types";
|
|
37
37
|
import { Close } from "@gympass/yoga-icons";
|
|
38
38
|
import { usePortal, useCombinedRefs } from "../../hooks";
|
|
@@ -81,6 +81,27 @@ const Overlay = styled.div`
|
|
|
81
81
|
background-color: rgba(35, 27, 34, 0.48);
|
|
82
82
|
`}
|
|
83
83
|
`;
|
|
84
|
+
const CloseButton = styled(Button.Icon)`
|
|
85
|
+
${({ theme }) => {
|
|
86
|
+
const background = theme.yoga.colors.elements.lineAndBorders;
|
|
87
|
+
const containerSize = theme.yoga.spacing.xxlarge;
|
|
88
|
+
const svgSize = theme.yoga.spacing.medium;
|
|
89
|
+
return css`
|
|
90
|
+
width: ${containerSize}px;
|
|
91
|
+
height: ${containerSize}px;
|
|
92
|
+
background-color: ${background};
|
|
93
|
+
|
|
94
|
+
svg {
|
|
95
|
+
width: ${svgSize}px;
|
|
96
|
+
height: ${svgSize}px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&:active {
|
|
100
|
+
background-color: ${background};
|
|
101
|
+
}
|
|
102
|
+
`;
|
|
103
|
+
}}
|
|
104
|
+
`;
|
|
84
105
|
const Dialog = React.forwardRef(
|
|
85
106
|
(_a, forwardedRef) => {
|
|
86
107
|
var _b = _a, { isOpen, hideCloseButton, children, dialogId, onClose, zIndex } = _b, props = __objRest(_b, ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"]);
|
|
@@ -118,7 +139,15 @@ const Dialog = React.forwardRef(
|
|
|
118
139
|
ref: dialogRef,
|
|
119
140
|
zIndex,
|
|
120
141
|
children: /* @__PURE__ */ jsxs(StyledDialog, __spreadProps(__spreadValues({ onClose }, props), { children: [
|
|
121
|
-
isCloseButtonVisible && /* @__PURE__ */ jsx(Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ jsx(
|
|
142
|
+
isCloseButtonVisible && /* @__PURE__ */ jsx(Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ jsx(
|
|
143
|
+
CloseButton,
|
|
144
|
+
{
|
|
145
|
+
icon: Close,
|
|
146
|
+
inverted: true,
|
|
147
|
+
secondary: true,
|
|
148
|
+
onClick: onClose
|
|
149
|
+
}
|
|
150
|
+
) }),
|
|
122
151
|
children
|
|
123
152
|
] }))
|
|
124
153
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.97.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": "
|
|
60
|
+
"gitHead": "d408eb43f0ce85e44b67092d103df0f6ef343d8a",
|
|
61
61
|
"module": "./esm",
|
|
62
62
|
"private": false,
|
|
63
63
|
"react-native": "./cjs/index.native.js"
|