@stokr/components-library 2.3.65-beta.2 → 2.3.65-beta.4
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/dist/components/2FA/main-flow.js +28 -7
- package/dist/components/2FA/main-flow.stories.js +144 -15
- package/dist/components/Input/SearchInput.js +75 -0
- package/dist/components/Input/SearchInput.stories.js +304 -0
- package/dist/components/Input/SearchInput.styles.js +25 -0
- package/dist/components/Modal/SideModal.js +82 -0
- package/dist/components/Modal/SideModal.stories.js +342 -0
- package/dist/components/Modal/SideModal.styles.js +21 -0
- package/dist/components/StatusTag/StatusTag.js +168 -0
- package/dist/components/StatusTag/StatusTag.stories.js +262 -0
- package/dist/components/StatusTag/StatusTag.styles.js +37 -0
- package/dist/index.js +22 -0
- package/dist/static/images/document-icon.svg +3 -0
- package/dist/static/images/search-icon.svg +3 -0
- package/dist/static/images/sent-icon.svg +10 -0
- package/package.json +1 -1
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.SideModal = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactDom = require("react-dom");
|
|
9
|
+
var _SideModal = require("./SideModal.styles");
|
|
10
|
+
var _Modal = require("./Modal.styles");
|
|
11
|
+
const _excluded = ["children", "isOpen", "onClose", "width", "minWidth", "className", "containerStyle", "closeOnDimmerClick", "showCloseButton"];
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
15
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
16
|
+
const SideModal = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
children,
|
|
19
|
+
isOpen,
|
|
20
|
+
onClose,
|
|
21
|
+
width = 40,
|
|
22
|
+
minWidth = 400,
|
|
23
|
+
className,
|
|
24
|
+
containerStyle,
|
|
25
|
+
closeOnDimmerClick = true,
|
|
26
|
+
showCloseButton = true
|
|
27
|
+
} = _ref,
|
|
28
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
29
|
+
const [isVisible, setIsVisible] = (0, _react.useState)(false);
|
|
30
|
+
(0, _react.useEffect)(() => {
|
|
31
|
+
// Disable scroll on background when modal is open
|
|
32
|
+
if (isOpen) {
|
|
33
|
+
document.body.style.overflow = 'hidden';
|
|
34
|
+
// Small delay to trigger animation
|
|
35
|
+
setTimeout(() => setIsVisible(true), 10);
|
|
36
|
+
} else {
|
|
37
|
+
document.body.style.overflow = 'unset';
|
|
38
|
+
setIsVisible(false);
|
|
39
|
+
}
|
|
40
|
+
return () => {
|
|
41
|
+
document.body.style.overflow = 'unset';
|
|
42
|
+
};
|
|
43
|
+
}, [isOpen]);
|
|
44
|
+
|
|
45
|
+
// Handle escape key
|
|
46
|
+
(0, _react.useEffect)(() => {
|
|
47
|
+
const handleEscape = e => {
|
|
48
|
+
if (e.key === 'Escape' && isOpen) {
|
|
49
|
+
onClose();
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
if (isOpen) {
|
|
53
|
+
document.addEventListener('keydown', handleEscape);
|
|
54
|
+
}
|
|
55
|
+
return () => {
|
|
56
|
+
document.removeEventListener('keydown', handleEscape);
|
|
57
|
+
};
|
|
58
|
+
}, [isOpen, onClose]);
|
|
59
|
+
const handleDimmerClick = e => {
|
|
60
|
+
if (closeOnDimmerClick && e.target === e.currentTarget) {
|
|
61
|
+
onClose();
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
if (!isOpen) return null;
|
|
65
|
+
const modalContent = /*#__PURE__*/_react.default.createElement(_SideModal.SideModalRoot, _extends({
|
|
66
|
+
className: className,
|
|
67
|
+
style: containerStyle
|
|
68
|
+
}, props), /*#__PURE__*/_react.default.createElement(_SideModal.Dimmer, {
|
|
69
|
+
onClick: handleDimmerClick,
|
|
70
|
+
isVisible: isVisible
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement(_SideModal.SideModalBox, {
|
|
72
|
+
width: width,
|
|
73
|
+
minWidth: minWidth,
|
|
74
|
+
isVisible: isVisible,
|
|
75
|
+
onClick: e => e.stopPropagation()
|
|
76
|
+
}, showCloseButton && /*#__PURE__*/_react.default.createElement(_Modal.ModalClose, {
|
|
77
|
+
onClick: onClose
|
|
78
|
+
}), children)));
|
|
79
|
+
return /*#__PURE__*/(0, _reactDom.createPortal)(modalContent, document.body);
|
|
80
|
+
};
|
|
81
|
+
exports.SideModal = SideModal;
|
|
82
|
+
var _default = exports.default = SideModal;
|
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.WithoutCloseButton = exports.WithContent = exports.NoDimmerClose = exports.LongContent = exports.DifferentWidths = exports.Basic = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _SideModal = _interopRequireDefault(require("./SideModal"));
|
|
9
|
+
var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
|
|
10
|
+
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
|
|
11
|
+
var _global = _interopRequireDefault(require("../../styles/global"));
|
|
12
|
+
var _colors = _interopRequireDefault(require("../../styles/colors"));
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
|
+
var _default = exports.default = {
|
|
16
|
+
title: 'Components Library/Modal/SideModal',
|
|
17
|
+
component: _SideModal.default,
|
|
18
|
+
decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
|
|
19
|
+
argTypes: {
|
|
20
|
+
isOpen: {
|
|
21
|
+
control: 'boolean',
|
|
22
|
+
description: 'Controls modal visibility'
|
|
23
|
+
},
|
|
24
|
+
width: {
|
|
25
|
+
control: {
|
|
26
|
+
type: 'range',
|
|
27
|
+
min: 20,
|
|
28
|
+
max: 90,
|
|
29
|
+
step: 5
|
|
30
|
+
},
|
|
31
|
+
description: 'Width as percentage of screen',
|
|
32
|
+
defaultValue: 40
|
|
33
|
+
},
|
|
34
|
+
minWidth: {
|
|
35
|
+
control: 'number',
|
|
36
|
+
description: 'Minimum width in pixels',
|
|
37
|
+
defaultValue: 400
|
|
38
|
+
},
|
|
39
|
+
closeOnDimmerClick: {
|
|
40
|
+
control: 'boolean',
|
|
41
|
+
description: 'Close modal when clicking dimmed area',
|
|
42
|
+
defaultValue: true
|
|
43
|
+
},
|
|
44
|
+
showCloseButton: {
|
|
45
|
+
control: 'boolean',
|
|
46
|
+
description: 'Show close button',
|
|
47
|
+
defaultValue: true
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}; // Basic example
|
|
51
|
+
const Basic = () => {
|
|
52
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
53
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
54
|
+
onClick: () => setIsOpen(true)
|
|
55
|
+
}, "Open Side Modal"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
56
|
+
isOpen: isOpen,
|
|
57
|
+
onClose: () => setIsOpen(false)
|
|
58
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
59
|
+
style: {
|
|
60
|
+
padding: '40px'
|
|
61
|
+
}
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement("h2", {
|
|
63
|
+
style: {
|
|
64
|
+
marginBottom: '20px'
|
|
65
|
+
}
|
|
66
|
+
}, "Basic Side Modal"), /*#__PURE__*/_react.default.createElement("p", {
|
|
67
|
+
style: {
|
|
68
|
+
marginBottom: '16px',
|
|
69
|
+
lineHeight: '1.6'
|
|
70
|
+
}
|
|
71
|
+
}, "This is a basic side modal that slides in from the right. It takes 40% of the screen width by default."), /*#__PURE__*/_react.default.createElement("p", {
|
|
72
|
+
style: {
|
|
73
|
+
marginBottom: '16px',
|
|
74
|
+
lineHeight: '1.6'
|
|
75
|
+
}
|
|
76
|
+
}, "You can close it by clicking the X button, clicking outside, or pressing Escape."), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
77
|
+
onClick: () => setIsOpen(false)
|
|
78
|
+
}, "Close Modal"))));
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
// Different widths
|
|
82
|
+
exports.Basic = Basic;
|
|
83
|
+
const DifferentWidths = () => {
|
|
84
|
+
const [isOpen30, setIsOpen30] = (0, _react.useState)(false);
|
|
85
|
+
const [isOpen40, setIsOpen40] = (0, _react.useState)(false);
|
|
86
|
+
const [isOpen60, setIsOpen60] = (0, _react.useState)(false);
|
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
88
|
+
style: {
|
|
89
|
+
display: 'flex',
|
|
90
|
+
flexDirection: 'column',
|
|
91
|
+
gap: '16px'
|
|
92
|
+
}
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
94
|
+
onClick: () => setIsOpen30(true)
|
|
95
|
+
}, "Open 30% Width"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
96
|
+
onClick: () => setIsOpen40(true)
|
|
97
|
+
}, "Open 40% Width"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
98
|
+
onClick: () => setIsOpen60(true)
|
|
99
|
+
}, "Open 60% Width")), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
100
|
+
isOpen: isOpen30,
|
|
101
|
+
onClose: () => setIsOpen30(false),
|
|
102
|
+
width: 30,
|
|
103
|
+
minWidth: 300
|
|
104
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
105
|
+
style: {
|
|
106
|
+
padding: '40px'
|
|
107
|
+
}
|
|
108
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "30% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 30% of the screen width."))), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
109
|
+
isOpen: isOpen40,
|
|
110
|
+
onClose: () => setIsOpen40(false),
|
|
111
|
+
width: 40,
|
|
112
|
+
minWidth: 400
|
|
113
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
114
|
+
style: {
|
|
115
|
+
padding: '40px'
|
|
116
|
+
}
|
|
117
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "40% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 40% of the screen width (default)."))), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
118
|
+
isOpen: isOpen60,
|
|
119
|
+
onClose: () => setIsOpen60(false),
|
|
120
|
+
width: 60,
|
|
121
|
+
minWidth: 500
|
|
122
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
123
|
+
style: {
|
|
124
|
+
padding: '40px'
|
|
125
|
+
}
|
|
126
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "60% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 60% of the screen width."))));
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
// With content example (like payout details)
|
|
130
|
+
exports.DifferentWidths = DifferentWidths;
|
|
131
|
+
const WithContent = () => {
|
|
132
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
133
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
134
|
+
onClick: () => setIsOpen(true)
|
|
135
|
+
}, "View Payout Details"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
136
|
+
isOpen: isOpen,
|
|
137
|
+
onClose: () => setIsOpen(false)
|
|
138
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
139
|
+
style: {
|
|
140
|
+
padding: '40px'
|
|
141
|
+
}
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement("h1", {
|
|
143
|
+
style: {
|
|
144
|
+
fontSize: '24px',
|
|
145
|
+
fontWeight: 'bold',
|
|
146
|
+
marginBottom: '8px',
|
|
147
|
+
textTransform: 'uppercase'
|
|
148
|
+
}
|
|
149
|
+
}, "PAYOUT DETAILS"), /*#__PURE__*/_react.default.createElement("p", {
|
|
150
|
+
style: {
|
|
151
|
+
color: _colors.default.grey2,
|
|
152
|
+
marginBottom: '32px'
|
|
153
|
+
}
|
|
154
|
+
}, "View all payout information here."), /*#__PURE__*/_react.default.createElement("div", {
|
|
155
|
+
style: {
|
|
156
|
+
marginBottom: '32px'
|
|
157
|
+
}
|
|
158
|
+
}, /*#__PURE__*/_react.default.createElement("h3", {
|
|
159
|
+
style: {
|
|
160
|
+
marginBottom: '16px',
|
|
161
|
+
fontSize: '16px'
|
|
162
|
+
}
|
|
163
|
+
}, "Status"), /*#__PURE__*/_react.default.createElement("div", {
|
|
164
|
+
style: {
|
|
165
|
+
display: 'flex',
|
|
166
|
+
flexDirection: 'column',
|
|
167
|
+
gap: '16px'
|
|
168
|
+
}
|
|
169
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
|
170
|
+
style: {
|
|
171
|
+
display: 'flex',
|
|
172
|
+
alignItems: 'center',
|
|
173
|
+
gap: '8px'
|
|
174
|
+
}
|
|
175
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
176
|
+
style: {
|
|
177
|
+
color: _colors.default.freshGreen
|
|
178
|
+
}
|
|
179
|
+
}, "\u2713"), /*#__PURE__*/_react.default.createElement("span", {
|
|
180
|
+
style: {
|
|
181
|
+
fontWeight: 'bold'
|
|
182
|
+
}
|
|
183
|
+
}, "Initiated"), /*#__PURE__*/_react.default.createElement("span", {
|
|
184
|
+
style: {
|
|
185
|
+
color: _colors.default.grey2,
|
|
186
|
+
fontSize: '12px'
|
|
187
|
+
}
|
|
188
|
+
}, "12. AUG 2025 11:57")), /*#__PURE__*/_react.default.createElement("p", {
|
|
189
|
+
style: {
|
|
190
|
+
color: _colors.default.grey2,
|
|
191
|
+
fontSize: '14px',
|
|
192
|
+
marginLeft: '24px'
|
|
193
|
+
}
|
|
194
|
+
}, "Awaiting receipt of your funds.")))), /*#__PURE__*/_react.default.createElement("div", {
|
|
195
|
+
style: {
|
|
196
|
+
backgroundColor: _colors.default.grey3,
|
|
197
|
+
padding: '20px',
|
|
198
|
+
borderRadius: '8px',
|
|
199
|
+
marginBottom: '24px'
|
|
200
|
+
}
|
|
201
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
202
|
+
style: {
|
|
203
|
+
marginBottom: '16px'
|
|
204
|
+
}
|
|
205
|
+
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
206
|
+
style: {
|
|
207
|
+
color: _colors.default.grey2,
|
|
208
|
+
fontSize: '12px'
|
|
209
|
+
}
|
|
210
|
+
}, "Amount"), /*#__PURE__*/_react.default.createElement("div", {
|
|
211
|
+
style: {
|
|
212
|
+
display: 'flex',
|
|
213
|
+
alignItems: 'center',
|
|
214
|
+
gap: '8px'
|
|
215
|
+
}
|
|
216
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
217
|
+
style: {
|
|
218
|
+
fontSize: '20px',
|
|
219
|
+
fontWeight: 'bold'
|
|
220
|
+
}
|
|
221
|
+
}, "13.23145 BTC"))), /*#__PURE__*/_react.default.createElement("div", {
|
|
222
|
+
style: {
|
|
223
|
+
marginBottom: '16px'
|
|
224
|
+
}
|
|
225
|
+
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
226
|
+
style: {
|
|
227
|
+
color: _colors.default.grey2,
|
|
228
|
+
fontSize: '12px'
|
|
229
|
+
}
|
|
230
|
+
}, "Wallet address"), /*#__PURE__*/_react.default.createElement("div", {
|
|
231
|
+
style: {
|
|
232
|
+
fontWeight: 'bold'
|
|
233
|
+
}
|
|
234
|
+
}, "GAYiyo[...]LGXg")), /*#__PURE__*/_react.default.createElement("div", {
|
|
235
|
+
style: {
|
|
236
|
+
marginBottom: '16px'
|
|
237
|
+
}
|
|
238
|
+
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
239
|
+
style: {
|
|
240
|
+
color: _colors.default.grey2,
|
|
241
|
+
fontSize: '12px'
|
|
242
|
+
}
|
|
243
|
+
}, "Period"), /*#__PURE__*/_react.default.createElement("div", {
|
|
244
|
+
style: {
|
|
245
|
+
fontWeight: 'bold'
|
|
246
|
+
}
|
|
247
|
+
}, "01.10.2025. - 31.11.2025.")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
|
|
248
|
+
style: {
|
|
249
|
+
color: _colors.default.grey2,
|
|
250
|
+
fontSize: '12px'
|
|
251
|
+
}
|
|
252
|
+
}, "Type"), /*#__PURE__*/_react.default.createElement("div", {
|
|
253
|
+
style: {
|
|
254
|
+
fontWeight: 'bold'
|
|
255
|
+
}
|
|
256
|
+
}, "Interest"))), /*#__PURE__*/_react.default.createElement("div", {
|
|
257
|
+
style: {
|
|
258
|
+
backgroundColor: _colors.default.grey3,
|
|
259
|
+
padding: '20px',
|
|
260
|
+
borderRadius: '8px',
|
|
261
|
+
marginBottom: '24px'
|
|
262
|
+
}
|
|
263
|
+
}, /*#__PURE__*/_react.default.createElement("p", {
|
|
264
|
+
style: {
|
|
265
|
+
color: _colors.default.grey2,
|
|
266
|
+
fontSize: '14px',
|
|
267
|
+
marginBottom: '8px'
|
|
268
|
+
}
|
|
269
|
+
}, "To modify payout details or cancel this transaction, contact our support team at", ' ', /*#__PURE__*/_react.default.createElement("a", {
|
|
270
|
+
href: "mailto:support@stokr.io",
|
|
271
|
+
style: {
|
|
272
|
+
color: _colors.default.blue,
|
|
273
|
+
textDecoration: 'none'
|
|
274
|
+
}
|
|
275
|
+
}, "support@stokr.io"), ".")), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
276
|
+
onClick: () => setIsOpen(false)
|
|
277
|
+
}, "Close"))));
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
// Without close button
|
|
281
|
+
exports.WithContent = WithContent;
|
|
282
|
+
const WithoutCloseButton = () => {
|
|
283
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
284
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
285
|
+
onClick: () => setIsOpen(true)
|
|
286
|
+
}, "Open Modal (No Close Button)"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
287
|
+
isOpen: isOpen,
|
|
288
|
+
onClose: () => setIsOpen(false),
|
|
289
|
+
showCloseButton: false
|
|
290
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
291
|
+
style: {
|
|
292
|
+
padding: '40px'
|
|
293
|
+
}
|
|
294
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Modal Without Close Button"), /*#__PURE__*/_react.default.createElement("p", null, "This modal doesn't have a close button. You can only close it by:"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Clicking outside (on the dimmed area)"), /*#__PURE__*/_react.default.createElement("li", null, "Pressing Escape key"), /*#__PURE__*/_react.default.createElement("li", null, "Using the close button below")), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
295
|
+
onClick: () => setIsOpen(false)
|
|
296
|
+
}, "Close Modal"))));
|
|
297
|
+
};
|
|
298
|
+
|
|
299
|
+
// Don't close on dimmer click
|
|
300
|
+
exports.WithoutCloseButton = WithoutCloseButton;
|
|
301
|
+
const NoDimmerClose = () => {
|
|
302
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
303
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
304
|
+
onClick: () => setIsOpen(true)
|
|
305
|
+
}, "Open Modal (No Dimmer Close)"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
306
|
+
isOpen: isOpen,
|
|
307
|
+
onClose: () => setIsOpen(false),
|
|
308
|
+
closeOnDimmerClick: false
|
|
309
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
310
|
+
style: {
|
|
311
|
+
padding: '40px'
|
|
312
|
+
}
|
|
313
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Modal That Doesn't Close on Dimmer Click"), /*#__PURE__*/_react.default.createElement("p", null, "This modal won't close when you click outside. You must use the close button or Escape key."), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
314
|
+
onClick: () => setIsOpen(false)
|
|
315
|
+
}, "Close Modal"))));
|
|
316
|
+
};
|
|
317
|
+
|
|
318
|
+
// Long content (scrollable)
|
|
319
|
+
exports.NoDimmerClose = NoDimmerClose;
|
|
320
|
+
const LongContent = () => {
|
|
321
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
322
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
323
|
+
onClick: () => setIsOpen(true)
|
|
324
|
+
}, "Open Modal with Long Content"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
|
|
325
|
+
isOpen: isOpen,
|
|
326
|
+
onClose: () => setIsOpen(false)
|
|
327
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
328
|
+
style: {
|
|
329
|
+
padding: '40px'
|
|
330
|
+
}
|
|
331
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Long Content Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal has scrollable content:"), Array.from({
|
|
332
|
+
length: 50
|
|
333
|
+
}, (_, i) => /*#__PURE__*/_react.default.createElement("p", {
|
|
334
|
+
key: i,
|
|
335
|
+
style: {
|
|
336
|
+
marginBottom: '16px'
|
|
337
|
+
}
|
|
338
|
+
}, "This is paragraph ", i + 1, ". The modal should be scrollable when content exceeds the viewport height.")), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
339
|
+
onClick: () => setIsOpen(false)
|
|
340
|
+
}, "Close Modal"))));
|
|
341
|
+
};
|
|
342
|
+
exports.LongContent = LongContent;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SideModalRoot = exports.SideModalBox = exports.Dimmer = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _colors = _interopRequireDefault(require("../../styles/colors"));
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const SideModalRoot = exports.SideModalRoot = _styledComponents.default.div.withConfig({
|
|
11
|
+
displayName: "SideModalstyles__SideModalRoot",
|
|
12
|
+
componentId: "sc-f9ztpn-0"
|
|
13
|
+
})(["position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;"]);
|
|
14
|
+
const Dimmer = exports.Dimmer = _styledComponents.default.div.withConfig({
|
|
15
|
+
displayName: "SideModalstyles__Dimmer",
|
|
16
|
+
componentId: "sc-f9ztpn-1"
|
|
17
|
+
})(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);display:flex;justify-content:flex-end;align-items:stretch;opacity:", ";transition:opacity 0.3s ease-in-out;pointer-events:", ";"], props => props.isVisible ? 1 : 0, props => props.isVisible ? 'auto' : 'none');
|
|
18
|
+
const SideModalBox = exports.SideModalBox = _styledComponents.default.div.withConfig({
|
|
19
|
+
displayName: "SideModalstyles__SideModalBox",
|
|
20
|
+
componentId: "sc-f9ztpn-2"
|
|
21
|
+
})(["position:relative;width:", "%;min-width:", "px;max-width:90%;height:100%;background-color:", ";box-shadow:-2px 0 8px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(", ");transition:transform 0.3s ease-in-out;z-index:1;pointer-events:auto;@media (max-width:768px){width:90%;min-width:90%;max-width:90%;}"], props => props.width, props => props.minWidth, _colors.default.white, props => props.isVisible ? '0' : '100%');
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.StatusTag = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon"));
|
|
9
|
+
var _Icon = require("../Icon/Icon.style");
|
|
10
|
+
var _checkIcon = require("../../static/images/check-icon.svg");
|
|
11
|
+
var _crossIcon = require("../../static/images/cross-icon.svg");
|
|
12
|
+
var _sentIcon = require("../../static/images/sent-icon.svg");
|
|
13
|
+
var _documentIcon = require("../../static/images/document-icon.svg");
|
|
14
|
+
var _colors = _interopRequireDefault(require("../../styles/colors"));
|
|
15
|
+
var _StatusTag = require("./StatusTag.styles");
|
|
16
|
+
const _excluded = ["variant", "icon", "text", "tooltip", "tooltipProps", "iconColor", "hoverColor", "disableHoverColor", "minWidth", "className", "containerStyle", "iconStyle", "textStyle", "onClick", "center"];
|
|
17
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
19
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
20
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
21
|
+
const PaidIcon = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
iconColor,
|
|
24
|
+
hoverColor,
|
|
25
|
+
disableHoverColor
|
|
26
|
+
} = _ref;
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement(_StatusTag.PaidIconWrapper, {
|
|
28
|
+
iconColor: iconColor,
|
|
29
|
+
hoverColor: hoverColor,
|
|
30
|
+
disableHoverColor: disableHoverColor
|
|
31
|
+
}, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null));
|
|
32
|
+
};
|
|
33
|
+
const DeclinedIcon = _ref2 => {
|
|
34
|
+
let {
|
|
35
|
+
iconColor,
|
|
36
|
+
hoverColor,
|
|
37
|
+
disableHoverColor
|
|
38
|
+
} = _ref2;
|
|
39
|
+
return /*#__PURE__*/_react.default.createElement(_StatusTag.DeclinedIconWrapper, {
|
|
40
|
+
iconColor: iconColor,
|
|
41
|
+
hoverColor: hoverColor,
|
|
42
|
+
disableHoverColor: disableHoverColor
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement(_crossIcon.ReactComponent, null));
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
// Variant configuration - maps variant to icon and colors only
|
|
47
|
+
const variantConfig = {
|
|
48
|
+
pending: {
|
|
49
|
+
icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
|
|
50
|
+
icon: _Icon.iconsMap.inProgress,
|
|
51
|
+
size: 12
|
|
52
|
+
}),
|
|
53
|
+
iconColor: _colors.default.grey2,
|
|
54
|
+
hoverColor: _colors.default.warningOrange,
|
|
55
|
+
disableHoverColor: false
|
|
56
|
+
},
|
|
57
|
+
initiated: {
|
|
58
|
+
icon: /*#__PURE__*/_react.default.createElement(_sentIcon.ReactComponent, {
|
|
59
|
+
width: 12,
|
|
60
|
+
height: 12
|
|
61
|
+
}),
|
|
62
|
+
iconColor: _colors.default.grey2,
|
|
63
|
+
hoverColor: _colors.default.blue,
|
|
64
|
+
disableHoverColor: false
|
|
65
|
+
},
|
|
66
|
+
confirmed: {
|
|
67
|
+
icon: /*#__PURE__*/_react.default.createElement(_documentIcon.ReactComponent, {
|
|
68
|
+
width: 12,
|
|
69
|
+
height: 12
|
|
70
|
+
}),
|
|
71
|
+
iconColor: _colors.default.grey2,
|
|
72
|
+
hoverColor: _colors.default.blue,
|
|
73
|
+
disableHoverColor: false
|
|
74
|
+
},
|
|
75
|
+
declined: {
|
|
76
|
+
icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(DeclinedIcon, {
|
|
77
|
+
iconColor: iconColor,
|
|
78
|
+
hoverColor: hoverColor,
|
|
79
|
+
disableHoverColor: disableHoverColor
|
|
80
|
+
}),
|
|
81
|
+
iconColor: _colors.default.grey2,
|
|
82
|
+
hoverColor: _colors.default.darkRed,
|
|
83
|
+
disableHoverColor: false
|
|
84
|
+
},
|
|
85
|
+
paid: {
|
|
86
|
+
icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(PaidIcon, {
|
|
87
|
+
iconColor: iconColor,
|
|
88
|
+
hoverColor: hoverColor,
|
|
89
|
+
disableHoverColor: disableHoverColor
|
|
90
|
+
}),
|
|
91
|
+
iconColor: _colors.default.grey2,
|
|
92
|
+
hoverColor: _colors.default.freshGreen,
|
|
93
|
+
disableHoverColor: false
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
const StatusTag = _ref3 => {
|
|
97
|
+
var _variantData$disableH;
|
|
98
|
+
let {
|
|
99
|
+
variant,
|
|
100
|
+
icon,
|
|
101
|
+
text,
|
|
102
|
+
tooltip,
|
|
103
|
+
tooltipProps,
|
|
104
|
+
iconColor,
|
|
105
|
+
hoverColor,
|
|
106
|
+
disableHoverColor,
|
|
107
|
+
minWidth,
|
|
108
|
+
className,
|
|
109
|
+
containerStyle,
|
|
110
|
+
iconStyle,
|
|
111
|
+
textStyle,
|
|
112
|
+
onClick,
|
|
113
|
+
center
|
|
114
|
+
} = _ref3,
|
|
115
|
+
props = _objectWithoutProperties(_ref3, _excluded);
|
|
116
|
+
// If variant is provided, use its configuration (but allow overrides)
|
|
117
|
+
const variantData = variant ? variantConfig[variant] : null;
|
|
118
|
+
|
|
119
|
+
// Determine colors - variant config can be overridden by props
|
|
120
|
+
const finalIconColor = iconColor !== undefined ? iconColor : (variantData === null || variantData === void 0 ? void 0 : variantData.iconColor) || _colors.default.grey2;
|
|
121
|
+
const finalHoverColor = hoverColor !== undefined ? hoverColor : variantData === null || variantData === void 0 ? void 0 : variantData.hoverColor;
|
|
122
|
+
const finalDisableHoverColor = disableHoverColor !== undefined ? disableHoverColor : (_variantData$disableH = variantData === null || variantData === void 0 ? void 0 : variantData.disableHoverColor) !== null && _variantData$disableH !== void 0 ? _variantData$disableH : false;
|
|
123
|
+
|
|
124
|
+
// Determine which icon to use - handle function icons (for paid/declined)
|
|
125
|
+
let finalIcon = null;
|
|
126
|
+
if (icon) {
|
|
127
|
+
finalIcon = icon;
|
|
128
|
+
} else if (variantData !== null && variantData !== void 0 && variantData.icon) {
|
|
129
|
+
if (typeof variantData.icon === 'function') {
|
|
130
|
+
// Icon is a function (paid/declined) - pass color props
|
|
131
|
+
finalIcon = variantData.icon(finalIconColor, finalHoverColor, finalDisableHoverColor);
|
|
132
|
+
} else {
|
|
133
|
+
// Icon is a React element (pending/initiated/confirmed)
|
|
134
|
+
finalIcon = variantData.icon;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
const content = /*#__PURE__*/_react.default.createElement(_StatusTag.StatusTagContainer, _extends({
|
|
138
|
+
className: className,
|
|
139
|
+
style: containerStyle,
|
|
140
|
+
onClick: onClick,
|
|
141
|
+
hasClick: !!onClick
|
|
142
|
+
}, props), /*#__PURE__*/_react.default.createElement(_StatusTag.StatusTagWrapper, {
|
|
143
|
+
minWidth: minWidth,
|
|
144
|
+
center: center
|
|
145
|
+
}, finalIcon && /*#__PURE__*/_react.default.createElement(_StatusTag.IconWrapper, {
|
|
146
|
+
iconColor: finalIconColor,
|
|
147
|
+
hoverColor: finalHoverColor,
|
|
148
|
+
disableHoverColor: finalDisableHoverColor,
|
|
149
|
+
style: iconStyle,
|
|
150
|
+
isCustomIcon: typeof (variantData === null || variantData === void 0 ? void 0 : variantData.icon) === 'function'
|
|
151
|
+
}, finalIcon), text && /*#__PURE__*/_react.default.createElement(_StatusTag.StatusText, {
|
|
152
|
+
style: textStyle
|
|
153
|
+
}, text)));
|
|
154
|
+
|
|
155
|
+
// Wrap with InfoIcon tooltip if tooltip is provided
|
|
156
|
+
if (tooltip) {
|
|
157
|
+
return /*#__PURE__*/_react.default.createElement(_InfoIcon.default, _extends({
|
|
158
|
+
title: tooltip,
|
|
159
|
+
position: "top",
|
|
160
|
+
noIcon: true,
|
|
161
|
+
noMarginLeft: true,
|
|
162
|
+
noMarginRight: true
|
|
163
|
+
}, tooltipProps), content);
|
|
164
|
+
}
|
|
165
|
+
return content;
|
|
166
|
+
};
|
|
167
|
+
exports.StatusTag = StatusTag;
|
|
168
|
+
var _default = exports.default = StatusTag;
|