@unbxd-ui/unbxd-react-components 0.2.221 → 0.3.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/README.md +17 -1
- package/components/Accordian/Accordian.js +14 -11
- package/components/Accordian/Accordian.stories.js +141 -118
- package/components/Accordian/index.js +1 -1
- package/components/Button/Button.js +8 -6
- package/components/Button/Button.stories.js +181 -62
- package/components/Button/DropdownButton.js +5 -6
- package/components/Button/buttonTheme.css +1 -1
- package/components/Button/index.js +2 -3
- package/components/DataLoader/DataLoader.js +6 -7
- package/components/DataLoader/DataLoader.stories.js +244 -58
- package/components/DataLoader/index.js +1 -1
- package/components/Form/Checkbox.js +12 -11
- package/components/Form/DragDropFileUploader.js +6 -7
- package/components/Form/Dropdown.js +14 -12
- package/components/Form/FileUploader.js +3 -4
- package/components/Form/Form.js +6 -7
- package/components/Form/FormElementWrapper.js +1 -1
- package/components/Form/Input.js +24 -15
- package/components/Form/RadioList.js +8 -9
- package/components/Form/RangeSlider.js +12 -13
- package/components/Form/SearchableDropdown.js +563 -0
- package/components/Form/ServerPaginatedDDList.js +53 -44
- package/components/Form/Textarea.js +26 -10
- package/components/Form/Toggle.js +6 -7
- package/components/Form/formCore.css +1 -1
- package/components/Form/formTheme.css +1 -1
- package/components/Form/index.js +8 -1
- package/components/Form/stories/Checkbox.stories.js +139 -40
- package/components/Form/stories/Dropdown.stories.js +323 -92
- package/components/Form/stories/FileUploader.stories.js +178 -19
- package/components/Form/stories/Input.stories.js +115 -0
- package/components/Form/stories/RangeSlider.stories.js +162 -64
- package/components/Form/stories/SearchableDropdown.stories.js +189 -0
- package/components/Form/stories/ServerPaginatedDropdown.stories.js +365 -0
- package/components/Form/stories/Textarea.stories.js +113 -34
- package/components/Form/stories/Toggle.stories.js +193 -14
- package/components/Form/variables.css +0 -0
- package/components/InlineModal/InlineModal.js +119 -21
- package/components/InlineModal/InlineModal.stories.js +239 -45
- package/components/InlineModal/index.js +1 -2
- package/components/InlineModal/inlineModalCore.css +1 -1
- package/components/Link/Link.js +139 -0
- package/components/Link/Link.stories.js +489 -0
- package/components/Link/index.js +28 -0
- package/components/Link/linkCore.css +1 -0
- package/components/Link/linkTheme.css +1 -0
- package/components/List/List.js +11 -8
- package/components/List/List.stories.js +238 -0
- package/components/List/index.js +1 -1
- package/components/Modal/Modal.js +67 -20
- package/components/Modal/Modal.stories.js +257 -38
- package/components/Modal/index.js +1 -1
- package/components/Modal/modalCore.css +1 -1
- package/components/NoDataPlaceholder/NoDataPlaceholder.js +41 -0
- package/components/NoDataPlaceholder/NoDataPlaceholder.stories.js +42 -0
- package/components/NoDataPlaceholder/index.js +9 -0
- package/components/NoDataPlaceholder/noDataPlaceholderCore.css +1 -0
- package/components/NotificationComponent/NotificationComponent.js +20 -10
- package/components/NotificationComponent/NotificationComponent.stories.js +171 -19
- package/components/NotificationComponent/index.js +1 -1
- package/components/NotificationComponent/notificationTheme.css +1 -1
- package/components/PageLoader/PageLoader.js +84 -0
- package/components/PageLoader/PageLoader.stories.js +276 -0
- package/components/PageLoader/index.js +9 -0
- package/components/PageLoader/pageLoaderCore.css +1 -0
- package/components/ProgressBar/ProgressBar.css +0 -0
- package/components/ProgressBar/ProgressBar.js +1 -1
- package/components/ProgressBar/ProgressBar.stories.js +203 -10
- package/components/ProgressBar/index.js +1 -1
- package/components/ProgressBar/progressBarCore.css +1 -1
- package/components/Table/BaseTable.js +86 -342
- package/components/Table/PaginationComponent.js +4 -4
- package/components/Table/Table.js +7 -326
- package/components/Table/Table.stories.js +2117 -158
- package/components/Table/TableChild.js +383 -0
- package/components/Table/TableConstants.js +15 -0
- package/components/Table/hooks/usePrevious.js +14 -0
- package/components/Table/index.js +14 -1
- package/components/Table/tableCore.css +1 -1
- package/components/TableOld/BaseTable.js +373 -0
- package/components/TableOld/PaginationComponent.js +86 -0
- package/components/TableOld/TableOld.js +367 -0
- package/components/TableOld/index.js +15 -0
- package/components/TabsComponent/TabsComponent.js +6 -7
- package/components/TabsComponent/TabsComponent.stories.js +291 -53
- package/components/TabsComponent/index.js +1 -1
- package/components/ToastNotification/ToastNotificationWrapper.js +212 -0
- package/components/ToastNotification/ToastNotificationWrapper.stories.js +554 -0
- package/components/ToastNotification/index.js +40 -0
- package/components/ToastNotification/toastNotificationCore.css +1 -0
- package/components/Tooltip/Tooltip.js +231 -56
- package/components/Tooltip/Tooltip.stories.js +380 -15
- package/components/Tooltip/index.js +1 -1
- package/components/Tooltip/tooltipCore.css +1 -1
- package/components/Tooltip/tooltipTheme.css +1 -1
- package/components/common/NoDataDropdown.js +50 -0
- package/components/common/common.css +1 -0
- package/components/core.css +2 -3
- package/components/core.scss +21 -1
- package/components/index.js +91 -3
- package/components/theme.css +2 -3
- package/components/theme.scss +2 -1
- package/core/Validators.js +1 -1
- package/core/customHooks.js +4 -4
- package/core/dataLoader.js +58 -17
- package/core/index.js +1 -1
- package/core/utils.js +15 -4
- package/index.js +54 -0
- package/package.json +41 -28
- package/components/Button/DropdownButton.stories.js +0 -49
- package/components/Form/stories/DragDropFileUploader.stories.js +0 -25
- package/components/Form/stories/FormDefault.stories.js +0 -115
- package/components/Form/stories/RadioList.stories.js +0 -53
- package/components/Form/stories/TextInput.stories.js +0 -76
- package/components/Form/stories/form.stories.js +0 -233
- package/components/List/list.stories.js +0 -35
- package/core/dataLoader.stories.js +0 -119
|
@@ -4,56 +4,250 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports["default"] = exports.
|
|
8
|
-
var _react =
|
|
9
|
-
var _addonLinks = require("@storybook/addon-links");
|
|
10
|
-
var _Constants = require("../../../public/Constants");
|
|
7
|
+
exports["default"] = exports.RightAligned = exports.Interactive = exports.HoverTriggered = exports.Controlled = exports.ComplexContent = exports.ClickTriggered = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
9
|
var _InlineModal = _interopRequireWildcard(require("./InlineModal"));
|
|
12
|
-
var
|
|
13
|
-
function
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
10
|
+
var _Button = _interopRequireWildcard(require("../Button/Button"));
|
|
11
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
14
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
17
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
18
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
|
+
var meta = {
|
|
20
|
+
title: 'Components/InlineModal',
|
|
21
|
+
component: _InlineModal["default"],
|
|
22
|
+
parameters: {
|
|
23
|
+
layout: 'centered'
|
|
24
|
+
},
|
|
25
|
+
tags: ['autodocs'],
|
|
26
|
+
argTypes: {
|
|
27
|
+
halign: {
|
|
28
|
+
control: 'select',
|
|
29
|
+
options: ['left', 'right'],
|
|
30
|
+
description: 'Horizontal alignment of the modal body'
|
|
31
|
+
},
|
|
32
|
+
activatorAction: {
|
|
33
|
+
control: 'radio',
|
|
34
|
+
options: ['click', 'hover'],
|
|
35
|
+
description: 'Event that triggers the modal'
|
|
36
|
+
},
|
|
37
|
+
isModalOpen: {
|
|
38
|
+
control: 'boolean',
|
|
39
|
+
description: 'Controls the modal visibility'
|
|
40
|
+
},
|
|
41
|
+
closeOnOutsideClick: {
|
|
42
|
+
control: 'boolean',
|
|
43
|
+
description: 'Whether to close the modal when clicking outside'
|
|
44
|
+
},
|
|
45
|
+
closeOnBodyClick: {
|
|
46
|
+
control: 'boolean',
|
|
47
|
+
description: 'Whether to close the modal when clicking inside the modal body'
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var _default = exports["default"] = meta; // Basic click-triggered modal
|
|
52
|
+
var ClickTriggered = exports.ClickTriggered = {
|
|
53
|
+
render: function render() {
|
|
54
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
55
|
+
style: {
|
|
56
|
+
padding: '50px'
|
|
57
|
+
}
|
|
58
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal["default"], null, /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalActivator, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
59
|
+
appearance: _Button.ButtonAppearance.PRIMARY
|
|
60
|
+
}, "Click me")), /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalBody, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
61
|
+
style: {
|
|
62
|
+
padding: '20px',
|
|
63
|
+
background: 'white',
|
|
64
|
+
border: '1px solid #eee',
|
|
65
|
+
borderRadius: '4px',
|
|
66
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
67
|
+
width: '200px'
|
|
68
|
+
}
|
|
69
|
+
}, "This is the modal content"))));
|
|
70
|
+
}
|
|
26
71
|
};
|
|
27
|
-
/* eslint-enable react/prop-types */
|
|
28
72
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
73
|
+
// Hover-triggered modal
|
|
74
|
+
var HoverTriggered = exports.HoverTriggered = {
|
|
75
|
+
render: function render() {
|
|
76
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
77
|
+
style: {
|
|
78
|
+
padding: '50px'
|
|
79
|
+
}
|
|
80
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal["default"], {
|
|
81
|
+
activatorAction: "hover"
|
|
82
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalActivator, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
83
|
+
appearance: _Button.ButtonAppearance.SECONDARY
|
|
84
|
+
}, "Hover me")), /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalBody, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
85
|
+
style: {
|
|
86
|
+
padding: '20px',
|
|
87
|
+
background: 'white',
|
|
88
|
+
border: '1px solid #eee',
|
|
89
|
+
borderRadius: '4px',
|
|
90
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
91
|
+
width: '200px'
|
|
92
|
+
}
|
|
93
|
+
}, "Hover content"))));
|
|
94
|
+
}
|
|
43
95
|
};
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
96
|
+
|
|
97
|
+
// Right-aligned modal
|
|
98
|
+
var RightAligned = exports.RightAligned = {
|
|
99
|
+
render: function render() {
|
|
100
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
101
|
+
style: {
|
|
102
|
+
padding: '50px'
|
|
103
|
+
}
|
|
104
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal["default"], {
|
|
105
|
+
halign: "right"
|
|
106
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalActivator, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Right aligned")), /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalBody, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
107
|
+
style: {
|
|
108
|
+
padding: '20px',
|
|
109
|
+
background: 'white',
|
|
110
|
+
border: '1px solid #eee',
|
|
111
|
+
borderRadius: '4px',
|
|
112
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
113
|
+
width: '200px'
|
|
114
|
+
}
|
|
115
|
+
}, "Right-aligned content"))));
|
|
49
116
|
}
|
|
50
117
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
118
|
+
|
|
119
|
+
// Controlled modal
|
|
120
|
+
var Controlled = exports.Controlled = {
|
|
121
|
+
render: function render() {
|
|
122
|
+
var _React$useState = _react["default"].useState(false),
|
|
123
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
124
|
+
isOpen = _React$useState2[0],
|
|
125
|
+
setIsOpen = _React$useState2[1];
|
|
126
|
+
var modalRef = _react["default"].useRef(null);
|
|
127
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
128
|
+
style: {
|
|
129
|
+
padding: '50px'
|
|
130
|
+
}
|
|
131
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal["default"], {
|
|
132
|
+
isModalOpen: isOpen
|
|
133
|
+
// onModalStateChange={(state) => {
|
|
134
|
+
// console.log('Modal state changed:', state);
|
|
135
|
+
// setIsOpen(state);
|
|
136
|
+
// }}
|
|
137
|
+
,
|
|
138
|
+
ref: modalRef
|
|
139
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalActivator, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
140
|
+
appearance: _Button.ButtonAppearance.PRIMARY,
|
|
141
|
+
size: _Button.ButtonSize.MEDIUM
|
|
142
|
+
}, "Controlled Modal")), /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalBody, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
143
|
+
style: {
|
|
144
|
+
padding: '20px',
|
|
145
|
+
background: 'white',
|
|
146
|
+
border: '1px solid #eee',
|
|
147
|
+
borderRadius: '4px',
|
|
148
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
149
|
+
width: '200px'
|
|
150
|
+
}
|
|
151
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "Controlled modal content"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
152
|
+
appearance: _Button.ButtonAppearance.SECONDARY,
|
|
153
|
+
onClick: function onClick() {
|
|
154
|
+
modalRef.current.hideModal();
|
|
155
|
+
},
|
|
156
|
+
style: {
|
|
157
|
+
marginTop: '10px'
|
|
158
|
+
}
|
|
159
|
+
}, "Close Modal")))));
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
// Complex content example
|
|
164
|
+
var ComplexContent = exports.ComplexContent = {
|
|
165
|
+
render: function render() {
|
|
166
|
+
var modalRef = _react["default"].useRef(null);
|
|
167
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
168
|
+
style: {
|
|
169
|
+
padding: '50px'
|
|
170
|
+
}
|
|
171
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal["default"], {
|
|
172
|
+
ref: modalRef
|
|
173
|
+
}, /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalActivator, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
174
|
+
appearance: _Button.ButtonAppearance.PRIMARY,
|
|
175
|
+
size: _Button.ButtonSize.LARGE
|
|
176
|
+
}, "Open Complex Modal")), /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalBody, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
177
|
+
style: {
|
|
178
|
+
padding: '20px',
|
|
179
|
+
background: 'white',
|
|
180
|
+
border: '1px solid #eee',
|
|
181
|
+
borderRadius: '4px',
|
|
182
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
183
|
+
width: '300px'
|
|
184
|
+
}
|
|
185
|
+
}, /*#__PURE__*/_react["default"].createElement("h3", {
|
|
186
|
+
style: {
|
|
187
|
+
margin: '0 0 10px 0'
|
|
188
|
+
}
|
|
189
|
+
}, "Complex Modal"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
190
|
+
style: {
|
|
191
|
+
marginBottom: '15px'
|
|
192
|
+
}
|
|
193
|
+
}, /*#__PURE__*/_react["default"].createElement("input", {
|
|
194
|
+
type: "text",
|
|
195
|
+
placeholder: "Enter some text",
|
|
196
|
+
style: {
|
|
197
|
+
width: '100%',
|
|
198
|
+
padding: '8px',
|
|
199
|
+
border: '1px solid #ddd',
|
|
200
|
+
borderRadius: '4px'
|
|
201
|
+
}
|
|
202
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
203
|
+
style: {
|
|
204
|
+
marginBottom: '15px'
|
|
205
|
+
}
|
|
206
|
+
}, /*#__PURE__*/_react["default"].createElement("select", {
|
|
207
|
+
style: {
|
|
208
|
+
width: '100%',
|
|
209
|
+
padding: '8px',
|
|
210
|
+
border: '1px solid #ddd',
|
|
211
|
+
borderRadius: '4px'
|
|
212
|
+
}
|
|
213
|
+
}, /*#__PURE__*/_react["default"].createElement("option", null, "Option 1"), /*#__PURE__*/_react["default"].createElement("option", null, "Option 2"), /*#__PURE__*/_react["default"].createElement("option", null, "Option 3"))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
214
|
+
style: {
|
|
215
|
+
display: 'flex',
|
|
216
|
+
justifyContent: 'flex-end',
|
|
217
|
+
gap: '10px'
|
|
218
|
+
}
|
|
219
|
+
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
220
|
+
appearance: _Button.ButtonAppearance.SECONDARY,
|
|
221
|
+
onClick: function onClick() {
|
|
222
|
+
return modalRef.current.hideModal();
|
|
223
|
+
}
|
|
224
|
+
}, "Cancel"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
225
|
+
appearance: _Button.ButtonAppearance.PRIMARY,
|
|
226
|
+
onClick: function onClick() {
|
|
227
|
+
return modalRef.current.hideModal();
|
|
228
|
+
}
|
|
229
|
+
}, "Submit"))))));
|
|
230
|
+
}
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
// Interactive example
|
|
234
|
+
var Interactive = exports.Interactive = {
|
|
235
|
+
args: {
|
|
236
|
+
halign: 'left',
|
|
237
|
+
activatorAction: 'click',
|
|
238
|
+
closeOnOutsideClick: true,
|
|
239
|
+
closeOnBodyClick: false,
|
|
240
|
+
children: [/*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalActivator, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
241
|
+
appearance: _Button.ButtonAppearance.PRIMARY
|
|
242
|
+
}, "Interactive Modal")), /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalBody, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
243
|
+
style: {
|
|
244
|
+
padding: '20px',
|
|
245
|
+
background: 'white',
|
|
246
|
+
border: '1px solid #eee',
|
|
247
|
+
borderRadius: '4px',
|
|
248
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
249
|
+
width: '200px'
|
|
250
|
+
}
|
|
251
|
+
}, "Interactive modal content"))]
|
|
58
252
|
}
|
|
59
253
|
};
|
|
@@ -18,6 +18,5 @@ Object.defineProperty(exports, "InlineModalBody", {
|
|
|
18
18
|
});
|
|
19
19
|
exports["default"] = void 0;
|
|
20
20
|
var _InlineModal = _interopRequireWildcard(require("./InlineModal"));
|
|
21
|
-
function
|
|
22
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
21
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
23
22
|
var _default = exports["default"] = _InlineModal["default"];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-body{position:absolute;z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}
|
|
1
|
+
.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-body{background-color:#fff;border:1px solid #DDE2EE;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0px 5px 15px 0px rgba(23,23,58,0.14902);max-height:300px;overflow-y:scroll;overflow-x:hidden;position:absolute;width:100%;z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.LinkTarget = exports.LinkSize = exports.LinkAppearance = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _excluded = ["children", "className", "disabled", "appearance", "size", "onClick", "href", "target", "textDecoration", "underlineOnHover", "external", "data-qa-id"];
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
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); }
|
|
13
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
16
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
17
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
18
|
+
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; }
|
|
19
|
+
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; }
|
|
20
|
+
/** LinkAppearance enum */
|
|
21
|
+
var LinkAppearance = exports.LinkAppearance = {
|
|
22
|
+
primary: "primary",
|
|
23
|
+
secondary: "secondary",
|
|
24
|
+
danger: "danger",
|
|
25
|
+
success: "success"
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
/** LinkSize enum */
|
|
29
|
+
var LinkSize = exports.LinkSize = {
|
|
30
|
+
SMALL: "small",
|
|
31
|
+
MEDIUM: "medium",
|
|
32
|
+
LARGE: "large"
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/** LinkTarget enum */
|
|
36
|
+
var LinkTarget = exports.LinkTarget = {
|
|
37
|
+
SELF: "_self",
|
|
38
|
+
BLANK: "_blank",
|
|
39
|
+
PARENT: "_parent",
|
|
40
|
+
TOP: "_top"
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
*
|
|
45
|
+
* Displays a Link component that looks and behaves like a traditional link
|
|
46
|
+
*/
|
|
47
|
+
var Link = function Link(props) {
|
|
48
|
+
var children = props.children,
|
|
49
|
+
className = props.className,
|
|
50
|
+
disabled = props.disabled,
|
|
51
|
+
appearance = props.appearance,
|
|
52
|
+
size = props.size,
|
|
53
|
+
onClick = props.onClick,
|
|
54
|
+
href = props.href,
|
|
55
|
+
target = props.target,
|
|
56
|
+
textDecoration = props.textDecoration,
|
|
57
|
+
underlineOnHover = props.underlineOnHover,
|
|
58
|
+
external = props.external,
|
|
59
|
+
dataQaId = props["data-qa-id"],
|
|
60
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
61
|
+
var linkClassName = ["RCB-link", "RCB-link-".concat(appearance), "RCB-link-".concat(size), "RCB-link-".concat(textDecoration), underlineOnHover && textDecoration !== "underline" && "RCB-link-underline-on-hover", disabled && "RCB-link-disabled", external && "RCB-link-external", className].filter(Boolean).join(" ");
|
|
62
|
+
var handleClick = function handleClick(e) {
|
|
63
|
+
if (disabled) {
|
|
64
|
+
e.preventDefault();
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (onClick) {
|
|
68
|
+
onClick(e);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
var linkProps = _objectSpread({
|
|
72
|
+
className: linkClassName,
|
|
73
|
+
onClick: handleClick
|
|
74
|
+
}, restProps);
|
|
75
|
+
|
|
76
|
+
// Always render as anchor tag for proper link appearance and semantics
|
|
77
|
+
// If no href provided, use href="#" and prevent default to handle as click handler
|
|
78
|
+
var linkHref = href || (onClick && !disabled ? "#" : undefined);
|
|
79
|
+
var handleLinkClick = function handleLinkClick(e) {
|
|
80
|
+
if (disabled) {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
// Prevent navigation for click handlers without href and execute onClick
|
|
85
|
+
if (!href && onClick) {
|
|
86
|
+
e.preventDefault();
|
|
87
|
+
onClick(e);
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
return /*#__PURE__*/_react["default"].createElement("a", _extends({}, linkProps, {
|
|
91
|
+
href: disabled ? undefined : linkHref,
|
|
92
|
+
target: target,
|
|
93
|
+
rel: target === LinkTarget.BLANK ? "noopener noreferrer" : undefined,
|
|
94
|
+
onClick: handleLinkClick,
|
|
95
|
+
role: !href && onClick ? "button" : undefined,
|
|
96
|
+
tabIndex: disabled ? -1 : undefined,
|
|
97
|
+
"data-qa-id": dataQaId
|
|
98
|
+
}), children, external && target === LinkTarget.BLANK && /*#__PURE__*/_react["default"].createElement("span", {
|
|
99
|
+
className: "RCB-link-external-icon",
|
|
100
|
+
"aria-hidden": "true"
|
|
101
|
+
}, " \u2197"));
|
|
102
|
+
};
|
|
103
|
+
Link.propTypes = {
|
|
104
|
+
/** Add any additional classes to Link component */
|
|
105
|
+
className: _propTypes["default"].string,
|
|
106
|
+
/** Boolean indicating whether the link should render as disabled */
|
|
107
|
+
disabled: _propTypes["default"].bool,
|
|
108
|
+
/** Text decoration style for the link */
|
|
109
|
+
textDecoration: _propTypes["default"].oneOf(["underline", "none", "overline", "line-through"]),
|
|
110
|
+
/** Boolean indicating whether to show underline on hover (only if not already underlined) */
|
|
111
|
+
underlineOnHover: _propTypes["default"].bool,
|
|
112
|
+
/** Boolean indicating whether this is an external link (adds external icon) */
|
|
113
|
+
external: _propTypes["default"].bool,
|
|
114
|
+
/** URL for the link */
|
|
115
|
+
href: _propTypes["default"].string,
|
|
116
|
+
/** QA automation identifier */
|
|
117
|
+
"data-qa-id": _propTypes["default"].string,
|
|
118
|
+
/** Target for the link when href is provided */
|
|
119
|
+
target: _propTypes["default"].oneOf(Object.values(LinkTarget)),
|
|
120
|
+
appearance: _propTypes["default"].oneOf(Object.values(LinkAppearance)),
|
|
121
|
+
/** String indicating the size of the Link */
|
|
122
|
+
size: _propTypes["default"].oneOf(Object.values(LinkSize)),
|
|
123
|
+
/** Link onClick handler */
|
|
124
|
+
onClick: _propTypes["default"].func,
|
|
125
|
+
/** Link content */
|
|
126
|
+
children: _propTypes["default"].node.isRequired
|
|
127
|
+
};
|
|
128
|
+
Link.defaultProps = {
|
|
129
|
+
onClick: undefined,
|
|
130
|
+
appearance: LinkAppearance.primary,
|
|
131
|
+
size: LinkSize.MEDIUM,
|
|
132
|
+
className: "",
|
|
133
|
+
disabled: false,
|
|
134
|
+
textDecoration: "none",
|
|
135
|
+
underlineOnHover: false,
|
|
136
|
+
external: false,
|
|
137
|
+
target: LinkTarget.SELF
|
|
138
|
+
};
|
|
139
|
+
var _default = exports["default"] = Link;
|