@licklist/design 0.78.29 → 0.78.31
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/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -0
- package/dist/styles/iframe-page/Page.scss +2 -2
- package/dist/v2/components/Alert/Alert.js +87 -0
- package/dist/v2/components/Alert/Alert.scss.js +6 -0
- package/dist/v2/components/Button/Button.js +121 -0
- package/dist/v2/components/Button/Button.scss.js +6 -0
- package/dist/v2/components/Checkbox/Checkbox.js +231 -0
- package/dist/v2/components/Checkbox/Checkbox.scss.js +6 -0
- package/dist/v2/components/FormField/FormField.js +98 -0
- package/dist/v2/components/FormField/FormField.scss.js +6 -0
- package/dist/v2/components/NPSScore/NPSScore.js +546 -0
- package/dist/v2/components/NPSScore/NPSScore.scss.js +6 -0
- package/dist/v2/components/NewInput/NewInput.js +134 -0
- package/dist/v2/components/NewPageHeader/NewPageHeader.js +36 -0
- package/dist/v2/components/NewPageHeader/NewPageHeader.scss.js +6 -0
- package/dist/v2/components/SectionHeader/SectionHeader.js +13 -0
- package/dist/v2/components/SectionHeader/SectionHeader.scss.js +6 -0
- package/dist/v2/components/WYSIWYGEditor/Icons.js +221 -0
- package/dist/v2/components/WYSIWYGEditor/WYSIWYGEditor.js +358 -0
- package/dist/v2/components/WYSIWYGEditor/WYSIWYGEditor.scss.js +6 -0
- package/dist/v2/navigation/DashboardLayout/DashboardLayout.scss.js +1 -1
- package/dist/v2/pages/Settings/components/SidebarCustomisation.d.ts.map +1 -1
- package/dist/v2/pages/Settings/components/SidebarCustomisation.js +32 -4
- package/dist/v2/pages/Settings/components/SidebarCustomisation.scss.js +1 -1
- package/dist/v2/pages/Settings/components/SidebarNavItem.d.ts.map +1 -1
- package/dist/v2/pages/Settings/components/SidebarNavItem.js +15 -2
- package/dist/v2/styles/form/NewInput.scss.js +6 -0
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/styles/iframe-page/Page.scss +2 -2
- package/src/v2/navigation/DashboardLayout/DashboardLayout.scss +5 -0
- package/src/v2/pages/Settings/components/SidebarCustomisation.scss +1 -1
- package/src/v2/pages/Settings/components/SidebarCustomisation.tsx +11 -5
- package/src/v2/pages/Settings/components/SidebarNavItem.tsx +2 -2
- package/src/v2/styles/tokens/_sizes.scss +3 -0
|
@@ -0,0 +1,546 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import './NPSScore.scss.js';
|
|
4
|
+
|
|
5
|
+
function _array_like_to_array(arr, len) {
|
|
6
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
7
|
+
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
8
|
+
return arr2;
|
|
9
|
+
}
|
|
10
|
+
function _array_with_holes(arr) {
|
|
11
|
+
if (Array.isArray(arr)) return arr;
|
|
12
|
+
}
|
|
13
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
14
|
+
try {
|
|
15
|
+
var info = gen[key](arg);
|
|
16
|
+
var value = info.value;
|
|
17
|
+
} catch (error) {
|
|
18
|
+
reject(error);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
if (info.done) {
|
|
22
|
+
resolve(value);
|
|
23
|
+
} else {
|
|
24
|
+
Promise.resolve(value).then(_next, _throw);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function _async_to_generator(fn) {
|
|
28
|
+
return function() {
|
|
29
|
+
var self = this, args = arguments;
|
|
30
|
+
return new Promise(function(resolve, reject) {
|
|
31
|
+
var gen = fn.apply(self, args);
|
|
32
|
+
function _next(value) {
|
|
33
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
34
|
+
}
|
|
35
|
+
function _throw(err) {
|
|
36
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
37
|
+
}
|
|
38
|
+
_next(undefined);
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
function _define_property(obj, key, value) {
|
|
43
|
+
if (key in obj) {
|
|
44
|
+
Object.defineProperty(obj, key, {
|
|
45
|
+
value: value,
|
|
46
|
+
enumerable: true,
|
|
47
|
+
configurable: true,
|
|
48
|
+
writable: true
|
|
49
|
+
});
|
|
50
|
+
} else {
|
|
51
|
+
obj[key] = value;
|
|
52
|
+
}
|
|
53
|
+
return obj;
|
|
54
|
+
}
|
|
55
|
+
function _iterable_to_array_limit(arr, i) {
|
|
56
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
57
|
+
if (_i == null) return;
|
|
58
|
+
var _arr = [];
|
|
59
|
+
var _n = true;
|
|
60
|
+
var _d = false;
|
|
61
|
+
var _s, _e;
|
|
62
|
+
try {
|
|
63
|
+
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
64
|
+
_arr.push(_s.value);
|
|
65
|
+
if (i && _arr.length === i) break;
|
|
66
|
+
}
|
|
67
|
+
} catch (err) {
|
|
68
|
+
_d = true;
|
|
69
|
+
_e = err;
|
|
70
|
+
} finally{
|
|
71
|
+
try {
|
|
72
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
73
|
+
} finally{
|
|
74
|
+
if (_d) throw _e;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
return _arr;
|
|
78
|
+
}
|
|
79
|
+
function _non_iterable_rest() {
|
|
80
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
81
|
+
}
|
|
82
|
+
function _object_spread(target) {
|
|
83
|
+
for(var i = 1; i < arguments.length; i++){
|
|
84
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
85
|
+
var ownKeys = Object.keys(source);
|
|
86
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
87
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
88
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
89
|
+
}));
|
|
90
|
+
}
|
|
91
|
+
ownKeys.forEach(function(key) {
|
|
92
|
+
_define_property(target, key, source[key]);
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
return target;
|
|
96
|
+
}
|
|
97
|
+
function ownKeys(object, enumerableOnly) {
|
|
98
|
+
var keys = Object.keys(object);
|
|
99
|
+
if (Object.getOwnPropertySymbols) {
|
|
100
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
101
|
+
if (enumerableOnly) {
|
|
102
|
+
symbols = symbols.filter(function(sym) {
|
|
103
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
keys.push.apply(keys, symbols);
|
|
107
|
+
}
|
|
108
|
+
return keys;
|
|
109
|
+
}
|
|
110
|
+
function _object_spread_props(target, source) {
|
|
111
|
+
source = source != null ? source : {};
|
|
112
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
113
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
114
|
+
} else {
|
|
115
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
116
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
return target;
|
|
120
|
+
}
|
|
121
|
+
function _sliced_to_array(arr, i) {
|
|
122
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
123
|
+
}
|
|
124
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
125
|
+
if (!o) return;
|
|
126
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
127
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
128
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
129
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
|
130
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
131
|
+
}
|
|
132
|
+
function _ts_generator(thisArg, body) {
|
|
133
|
+
var f, y, t, g, _ = {
|
|
134
|
+
label: 0,
|
|
135
|
+
sent: function() {
|
|
136
|
+
if (t[0] & 1) throw t[1];
|
|
137
|
+
return t[1];
|
|
138
|
+
},
|
|
139
|
+
trys: [],
|
|
140
|
+
ops: []
|
|
141
|
+
};
|
|
142
|
+
return g = {
|
|
143
|
+
next: verb(0),
|
|
144
|
+
"throw": verb(1),
|
|
145
|
+
"return": verb(2)
|
|
146
|
+
}, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
|
|
147
|
+
return this;
|
|
148
|
+
}), g;
|
|
149
|
+
function verb(n) {
|
|
150
|
+
return function(v) {
|
|
151
|
+
return step([
|
|
152
|
+
n,
|
|
153
|
+
v
|
|
154
|
+
]);
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
function step(op) {
|
|
158
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
159
|
+
while(_)try {
|
|
160
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
161
|
+
if (y = 0, t) op = [
|
|
162
|
+
op[0] & 2,
|
|
163
|
+
t.value
|
|
164
|
+
];
|
|
165
|
+
switch(op[0]){
|
|
166
|
+
case 0:
|
|
167
|
+
case 1:
|
|
168
|
+
t = op;
|
|
169
|
+
break;
|
|
170
|
+
case 4:
|
|
171
|
+
_.label++;
|
|
172
|
+
return {
|
|
173
|
+
value: op[1],
|
|
174
|
+
done: false
|
|
175
|
+
};
|
|
176
|
+
case 5:
|
|
177
|
+
_.label++;
|
|
178
|
+
y = op[1];
|
|
179
|
+
op = [
|
|
180
|
+
0
|
|
181
|
+
];
|
|
182
|
+
continue;
|
|
183
|
+
case 7:
|
|
184
|
+
op = _.ops.pop();
|
|
185
|
+
_.trys.pop();
|
|
186
|
+
continue;
|
|
187
|
+
default:
|
|
188
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
|
|
189
|
+
_ = 0;
|
|
190
|
+
continue;
|
|
191
|
+
}
|
|
192
|
+
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
|
|
193
|
+
_.label = op[1];
|
|
194
|
+
break;
|
|
195
|
+
}
|
|
196
|
+
if (op[0] === 6 && _.label < t[1]) {
|
|
197
|
+
_.label = t[1];
|
|
198
|
+
t = op;
|
|
199
|
+
break;
|
|
200
|
+
}
|
|
201
|
+
if (t && _.label < t[2]) {
|
|
202
|
+
_.label = t[2];
|
|
203
|
+
_.ops.push(op);
|
|
204
|
+
break;
|
|
205
|
+
}
|
|
206
|
+
if (t[2]) _.ops.pop();
|
|
207
|
+
_.trys.pop();
|
|
208
|
+
continue;
|
|
209
|
+
}
|
|
210
|
+
op = body.call(thisArg, _);
|
|
211
|
+
} catch (e) {
|
|
212
|
+
op = [
|
|
213
|
+
6,
|
|
214
|
+
e
|
|
215
|
+
];
|
|
216
|
+
y = 0;
|
|
217
|
+
} finally{
|
|
218
|
+
f = t = 0;
|
|
219
|
+
}
|
|
220
|
+
if (op[0] & 5) throw op[1];
|
|
221
|
+
return {
|
|
222
|
+
value: op[0] ? op[1] : void 0,
|
|
223
|
+
done: true
|
|
224
|
+
};
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
var roleOptions = [
|
|
228
|
+
{
|
|
229
|
+
value: 'owner',
|
|
230
|
+
label: 'Business Owner'
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
value: 'manager',
|
|
234
|
+
label: 'Manager'
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
value: 'finance',
|
|
238
|
+
label: 'Finance'
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
value: 'marketing',
|
|
242
|
+
label: 'Marketing'
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
value: 'staff',
|
|
246
|
+
label: 'Staff Member'
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
value: 'other',
|
|
250
|
+
label: 'Other'
|
|
251
|
+
}
|
|
252
|
+
];
|
|
253
|
+
// Icons
|
|
254
|
+
var IconSad = function(param) {
|
|
255
|
+
var _param_size = param.size, size = _param_size === void 0 ? 24 : _param_size, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
|
|
256
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
257
|
+
width: size,
|
|
258
|
+
height: size,
|
|
259
|
+
viewBox: "0 0 32 32",
|
|
260
|
+
fill: "none",
|
|
261
|
+
className: className,
|
|
262
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
263
|
+
d: "M16 6C21.5228 6 26 10.4771 26 16C26 21.5228 21.5228 26 16 26C10.4771 26 6 21.5228 6 16C6 10.4771 10.4771 6 16 6ZM16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8ZM16 16C18.7614 16 21 18.2386 21 21H19C19 19.3431 17.6569 18 16 18C14.3431 18 13 19.3431 13 21H11C11 18.2386 13.2386 16 16 16ZM13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.6716 15 12 14.3284 12 13.5C12 12.6716 12.6716 12 13.5 12ZM18.5 12C19.3284 12 20 12.6716 20 13.5C20 14.3284 19.3284 15 18.5 15C17.6716 15 17 14.3284 17 13.5C17 12.6716 17.6716 12 18.5 12Z",
|
|
264
|
+
fill: "currentColor"
|
|
265
|
+
})
|
|
266
|
+
});
|
|
267
|
+
};
|
|
268
|
+
var IconBigSmile = function(param) {
|
|
269
|
+
var _param_size = param.size, size = _param_size === void 0 ? 24 : _param_size, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
|
|
270
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
271
|
+
width: size,
|
|
272
|
+
height: size,
|
|
273
|
+
viewBox: "0 0 32 32",
|
|
274
|
+
fill: "none",
|
|
275
|
+
className: className,
|
|
276
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
277
|
+
d: "M16 6C21.5228 6 26 10.4771 26 16C26 21.5228 21.5228 26 16 26C10.4771 26 6 21.5228 6 16C6 10.4771 10.4771 6 16 6ZM16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8ZM21 17C21 19.7614 18.7614 22 16 22C13.2386 22 11 19.7614 11 17H21ZM13.5 11C14.3284 11 15 11.6716 15 12.5C15 13.3284 14.3284 14 13.5 14C12.6716 14 12 13.3284 12 12.5C12 11.6716 12.6716 11 13.5 11ZM18.5 11C19.3284 11 20 11.6716 20 12.5C20 13.3284 19.3284 14 18.5 14C17.6716 14 17 13.3284 17 12.5C17 11.6716 17.6716 11 18.5 11Z",
|
|
278
|
+
fill: "currentColor"
|
|
279
|
+
})
|
|
280
|
+
});
|
|
281
|
+
};
|
|
282
|
+
var NPSScore = function(param) {
|
|
283
|
+
var firstName = param.firstName, onSubmit = param.onSubmit; param.onDismiss;
|
|
284
|
+
var _useState = _sliced_to_array(useState(null), 2), selectedScore = _useState[0], setSelectedScore = _useState[1];
|
|
285
|
+
var _useState1 = _sliced_to_array(useState(''), 2), reason = _useState1[0], setReason = _useState1[1];
|
|
286
|
+
var _useState2 = _sliced_to_array(useState(''), 2), role = _useState2[0], setRole = _useState2[1];
|
|
287
|
+
var _useState3 = _sliced_to_array(useState(false), 2), isSubmitting = _useState3[0], setIsSubmitting = _useState3[1];
|
|
288
|
+
var _useState4 = _sliced_to_array(useState({}), 2), errors = _useState4[0], setErrors = _useState4[1];
|
|
289
|
+
var _useState5 = _sliced_to_array(useState(false), 2); _useState5[0]; _useState5[1];
|
|
290
|
+
var _useState6 = _sliced_to_array(useState(false), 2), isSubmitted = _useState6[0], setIsSubmitted = _useState6[1];
|
|
291
|
+
var handleSubmit = function() {
|
|
292
|
+
var _ref = _async_to_generator(function() {
|
|
293
|
+
var newErrors;
|
|
294
|
+
return _ts_generator(this, function(_state) {
|
|
295
|
+
switch(_state.label){
|
|
296
|
+
case 0:
|
|
297
|
+
if (!selectedScore) return [
|
|
298
|
+
2
|
|
299
|
+
];
|
|
300
|
+
// Validate required fields - reason required for all scores
|
|
301
|
+
newErrors = {};
|
|
302
|
+
if (!reason.trim()) {
|
|
303
|
+
newErrors.reason = 'Please provide a reason for your score';
|
|
304
|
+
}
|
|
305
|
+
if (!role) {
|
|
306
|
+
newErrors.role = 'Please select your role';
|
|
307
|
+
}
|
|
308
|
+
if (Object.keys(newErrors).length > 0) {
|
|
309
|
+
setErrors(newErrors);
|
|
310
|
+
return [
|
|
311
|
+
2
|
|
312
|
+
];
|
|
313
|
+
}
|
|
314
|
+
setErrors({});
|
|
315
|
+
setIsSubmitting(true);
|
|
316
|
+
_state.label = 1;
|
|
317
|
+
case 1:
|
|
318
|
+
_state.trys.push([
|
|
319
|
+
1,
|
|
320
|
+
,
|
|
321
|
+
3,
|
|
322
|
+
4
|
|
323
|
+
]);
|
|
324
|
+
return [
|
|
325
|
+
4,
|
|
326
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
|
|
327
|
+
score: selectedScore,
|
|
328
|
+
role: role,
|
|
329
|
+
reason: reason.trim() || undefined
|
|
330
|
+
})
|
|
331
|
+
];
|
|
332
|
+
case 2:
|
|
333
|
+
_state.sent();
|
|
334
|
+
setIsSubmitted(true);
|
|
335
|
+
return [
|
|
336
|
+
3,
|
|
337
|
+
4
|
|
338
|
+
];
|
|
339
|
+
case 3:
|
|
340
|
+
setIsSubmitting(false);
|
|
341
|
+
return [
|
|
342
|
+
7
|
|
343
|
+
];
|
|
344
|
+
case 4:
|
|
345
|
+
return [
|
|
346
|
+
2
|
|
347
|
+
];
|
|
348
|
+
}
|
|
349
|
+
});
|
|
350
|
+
});
|
|
351
|
+
return function handleSubmit() {
|
|
352
|
+
return _ref.apply(this, arguments);
|
|
353
|
+
};
|
|
354
|
+
}();
|
|
355
|
+
if (isSubmitted) {
|
|
356
|
+
return /*#__PURE__*/ jsx("div", {
|
|
357
|
+
className: "nps-score",
|
|
358
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
359
|
+
className: "nps-score__container",
|
|
360
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
361
|
+
className: "nps-score__success",
|
|
362
|
+
children: [
|
|
363
|
+
/*#__PURE__*/ jsx(IconBigSmile, {
|
|
364
|
+
size: 48,
|
|
365
|
+
className: "nps-score__success-icon"
|
|
366
|
+
}),
|
|
367
|
+
/*#__PURE__*/ jsx("h3", {
|
|
368
|
+
className: "nps-score__success-title",
|
|
369
|
+
children: "Thank you!"
|
|
370
|
+
}),
|
|
371
|
+
/*#__PURE__*/ jsx("p", {
|
|
372
|
+
className: "nps-score__success-message",
|
|
373
|
+
children: "Your feedback has been submitted successfully."
|
|
374
|
+
})
|
|
375
|
+
]
|
|
376
|
+
})
|
|
377
|
+
})
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
return /*#__PURE__*/ jsx("div", {
|
|
381
|
+
className: "nps-score",
|
|
382
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
383
|
+
className: "nps-score__container",
|
|
384
|
+
children: [
|
|
385
|
+
/*#__PURE__*/ jsxs("h3", {
|
|
386
|
+
className: "nps-score__question",
|
|
387
|
+
children: [
|
|
388
|
+
firstName ? "Hey ".concat(firstName, ", how") : 'How',
|
|
389
|
+
" likely would you be to recommend Booked it to a friend or colleague?"
|
|
390
|
+
]
|
|
391
|
+
}),
|
|
392
|
+
/*#__PURE__*/ jsxs("div", {
|
|
393
|
+
className: "nps-score__labels",
|
|
394
|
+
children: [
|
|
395
|
+
/*#__PURE__*/ jsxs("div", {
|
|
396
|
+
className: "nps-score__label",
|
|
397
|
+
children: [
|
|
398
|
+
/*#__PURE__*/ jsx(IconSad, {
|
|
399
|
+
size: 24,
|
|
400
|
+
className: "nps-score__label-icon"
|
|
401
|
+
}),
|
|
402
|
+
/*#__PURE__*/ jsx("span", {
|
|
403
|
+
children: "Not Likely"
|
|
404
|
+
})
|
|
405
|
+
]
|
|
406
|
+
}),
|
|
407
|
+
/*#__PURE__*/ jsxs("div", {
|
|
408
|
+
className: "nps-score__label nps-score__label--desktop",
|
|
409
|
+
children: [
|
|
410
|
+
/*#__PURE__*/ jsx("span", {
|
|
411
|
+
children: "Most Likely"
|
|
412
|
+
}),
|
|
413
|
+
/*#__PURE__*/ jsx(IconBigSmile, {
|
|
414
|
+
size: 24,
|
|
415
|
+
className: "nps-score__label-icon"
|
|
416
|
+
})
|
|
417
|
+
]
|
|
418
|
+
})
|
|
419
|
+
]
|
|
420
|
+
}),
|
|
421
|
+
/*#__PURE__*/ jsx("div", {
|
|
422
|
+
className: "nps-score__buttons",
|
|
423
|
+
children: [
|
|
424
|
+
1,
|
|
425
|
+
2,
|
|
426
|
+
3,
|
|
427
|
+
4,
|
|
428
|
+
5,
|
|
429
|
+
6,
|
|
430
|
+
7,
|
|
431
|
+
8,
|
|
432
|
+
9,
|
|
433
|
+
10
|
|
434
|
+
].map(function(score) {
|
|
435
|
+
return /*#__PURE__*/ jsx("button", {
|
|
436
|
+
onClick: function() {
|
|
437
|
+
return setSelectedScore(score);
|
|
438
|
+
},
|
|
439
|
+
className: "nps-score__button ".concat(selectedScore === score ? 'nps-score__button--selected' : ''),
|
|
440
|
+
children: score
|
|
441
|
+
}, score);
|
|
442
|
+
})
|
|
443
|
+
}),
|
|
444
|
+
/*#__PURE__*/ jsxs("div", {
|
|
445
|
+
className: "nps-score__label nps-score__label--mobile",
|
|
446
|
+
children: [
|
|
447
|
+
/*#__PURE__*/ jsx("span", {
|
|
448
|
+
children: "Most Likely"
|
|
449
|
+
}),
|
|
450
|
+
/*#__PURE__*/ jsx(IconBigSmile, {
|
|
451
|
+
size: 24,
|
|
452
|
+
className: "nps-score__label-icon"
|
|
453
|
+
})
|
|
454
|
+
]
|
|
455
|
+
}),
|
|
456
|
+
selectedScore !== null && /*#__PURE__*/ jsxs("div", {
|
|
457
|
+
className: "nps-score__expanded",
|
|
458
|
+
children: [
|
|
459
|
+
/*#__PURE__*/ jsxs("div", {
|
|
460
|
+
className: "nps-score__field",
|
|
461
|
+
children: [
|
|
462
|
+
/*#__PURE__*/ jsx("label", {
|
|
463
|
+
className: "nps-score__field-label",
|
|
464
|
+
children: "Reason for this score?"
|
|
465
|
+
}),
|
|
466
|
+
/*#__PURE__*/ jsx("textarea", {
|
|
467
|
+
value: reason,
|
|
468
|
+
onChange: function(e) {
|
|
469
|
+
setReason(e.target.value);
|
|
470
|
+
if (errors.reason) setErrors(function(prev) {
|
|
471
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
472
|
+
reason: undefined
|
|
473
|
+
});
|
|
474
|
+
});
|
|
475
|
+
},
|
|
476
|
+
placeholder: "",
|
|
477
|
+
className: "nps-score__textarea ".concat(errors.reason ? 'nps-score__textarea--error' : '')
|
|
478
|
+
}),
|
|
479
|
+
errors.reason ? /*#__PURE__*/ jsx("p", {
|
|
480
|
+
className: "nps-score__error",
|
|
481
|
+
children: errors.reason
|
|
482
|
+
}) : /*#__PURE__*/ jsx("p", {
|
|
483
|
+
className: "nps-score__hint",
|
|
484
|
+
children: "Help us improve by explaining your score."
|
|
485
|
+
})
|
|
486
|
+
]
|
|
487
|
+
}),
|
|
488
|
+
/*#__PURE__*/ jsxs("div", {
|
|
489
|
+
className: "nps-score__field nps-score__field--roles",
|
|
490
|
+
children: [
|
|
491
|
+
/*#__PURE__*/ jsx("label", {
|
|
492
|
+
className: "nps-score__field-label",
|
|
493
|
+
children: "The role that best describes you?"
|
|
494
|
+
}),
|
|
495
|
+
/*#__PURE__*/ jsx("div", {
|
|
496
|
+
className: "nps-score__roles",
|
|
497
|
+
children: roleOptions.map(function(option) {
|
|
498
|
+
return /*#__PURE__*/ jsxs("label", {
|
|
499
|
+
className: "nps-score__role",
|
|
500
|
+
children: [
|
|
501
|
+
/*#__PURE__*/ jsx("input", {
|
|
502
|
+
type: "radio",
|
|
503
|
+
name: "role",
|
|
504
|
+
value: option.value,
|
|
505
|
+
checked: role === option.value,
|
|
506
|
+
onChange: function(e) {
|
|
507
|
+
setRole(e.target.value);
|
|
508
|
+
if (errors.role) setErrors(function(prev) {
|
|
509
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
510
|
+
role: undefined
|
|
511
|
+
});
|
|
512
|
+
});
|
|
513
|
+
},
|
|
514
|
+
className: "nps-score__role-input"
|
|
515
|
+
}),
|
|
516
|
+
/*#__PURE__*/ jsx("span", {
|
|
517
|
+
className: "nps-score__role-radio"
|
|
518
|
+
}),
|
|
519
|
+
/*#__PURE__*/ jsx("span", {
|
|
520
|
+
className: "nps-score__role-label",
|
|
521
|
+
children: option.label
|
|
522
|
+
})
|
|
523
|
+
]
|
|
524
|
+
}, option.value);
|
|
525
|
+
})
|
|
526
|
+
}),
|
|
527
|
+
errors.role && /*#__PURE__*/ jsx("p", {
|
|
528
|
+
className: "nps-score__error",
|
|
529
|
+
children: errors.role
|
|
530
|
+
})
|
|
531
|
+
]
|
|
532
|
+
}),
|
|
533
|
+
/*#__PURE__*/ jsx("button", {
|
|
534
|
+
onClick: handleSubmit,
|
|
535
|
+
disabled: isSubmitting,
|
|
536
|
+
className: "nps-score__submit",
|
|
537
|
+
children: isSubmitting ? 'Submitting...' : 'Submit'
|
|
538
|
+
})
|
|
539
|
+
]
|
|
540
|
+
})
|
|
541
|
+
]
|
|
542
|
+
})
|
|
543
|
+
});
|
|
544
|
+
};
|
|
545
|
+
|
|
546
|
+
export { NPSScore, NPSScore as default };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".nps-score{margin-top:24px;width:100%}.nps-score__container{background:var(--surfaces-main-surface-secondary,#f4f4f7);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:16px;padding:24px}.nps-score__question{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:18px;font-weight:600;line-height:24px;margin:0 0 16px}.nps-score__labels{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.nps-score__label{align-items:center;display:flex;gap:8px}.nps-score__label span{color:var(--labels-main-label-secondary,#626a90);font-family:var(--font-family-sans);font-size:14px;font-weight:500}.nps-score__label--desktop{display:none}@media (min-width:768px){.nps-score__label--desktop{display:flex}}.nps-score__label--mobile{display:flex;justify-content:flex-end;margin-top:12px}@media (min-width:768px){.nps-score__label--mobile{display:none}}.nps-score__label-icon{color:var(--fills-main-fill-secondary,#626a90);flex-shrink:0}.nps-score__buttons{display:grid;gap:8px;grid-template-columns:repeat(5,1fr)}@media (min-width:768px){.nps-score__buttons{grid-template-columns:repeat(10,1fr)}}.nps-score__button{background:var(--surfaces-main-surface-primary,#fff);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:12px;color:var(--labels-main-label-primary,#121e52);cursor:pointer;font-family:var(--font-family-sans);font-size:18px;font-weight:600;height:48px;transition:all .2s ease}.nps-score__button:hover:not(.nps-score__button--selected){background:var(--surfaces-main-surface-primary-hover,#f8f8fa)}.nps-score__button--selected{background:var(--fills-main-fill-primary,#14215a);border-color:#0000;color:#fff}.nps-score__expanded{animation:nps-fade-in .2s ease;display:flex;flex-direction:column;gap:16px;margin-top:16px}.nps-score__field--roles{padding-top:16px}.nps-score__field-label{color:var(--labels-main-label-primary,#121e52);display:block;font-family:var(--font-family-sans);font-size:14px;font-weight:500;margin-bottom:8px}.nps-score__field-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.nps-score__optional{color:var(--labels-main-label-secondary,#626a90)}.nps-score__optional,.nps-score__textarea{font-family:var(--font-family-sans);font-size:14px}.nps-score__textarea{background:var(--surfaces-main-surface-primary,#fff);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:8px;box-sizing:border-box;color:var(--labels-main-label-primary,#121e52);min-height:100px;padding:12px;resize:vertical;width:100%}.nps-score__textarea::placeholder{color:var(--labels-main-label-tertiary,#9ca3af)}.nps-score__textarea:focus{border-color:var(--fills-main-fill-primary,#14215a);outline:none}.nps-score__textarea--error{border-color:var(--fills-main-fill-danger,#dc2626)}.nps-score__hint{color:var(--labels-main-label-secondary,#626a90)}.nps-score__error,.nps-score__hint{font-family:var(--font-family-sans);font-size:14px;margin:4px 0 0}.nps-score__error{color:var(--fills-main-fill-danger,#dc2626)}.nps-score__add-comment{background:none;border:none;color:var(--labels-main-label-action,#2563eb);cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:500;padding:0;text-decoration:underline;transition:color .2s ease}.nps-score__add-comment:hover{color:var(--labels-main-label-action-hover,#1d4ed8)}.nps-score__roles{display:grid;gap:12px;grid-template-columns:1fr}@media (min-width:640px){.nps-score__roles{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.nps-score__roles{grid-template-columns:repeat(3,1fr)}}.nps-score__role{align-items:center;cursor:pointer;display:flex;gap:8px;position:relative}.nps-score__role-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--surfaces-main-surface-primary,#fff);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:50%;cursor:pointer;flex-shrink:0;height:20px;margin:0;position:relative;transition:border-color .2s ease;width:20px}.nps-score__role-input:before{background:var(--fills-main-fill-primary,#14215a);border-radius:50%;content:\"\";height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:10px}.nps-score__role-input:checked{border-color:var(--fills-main-fill-primary,#14215a)}.nps-score__role-input:checked:before{transform:translate(-50%,-50%) scale(1)}.nps-score__role-input:focus{box-shadow:0 0 0 2px var(--fills-main-fill-primary-opacity,#14215a33);outline:none}.nps-score__role-radio{display:none}.nps-score__role-label{color:var(--labels-main-label-primary,#121e52)}.nps-score__role-label,.nps-score__submit{font-family:var(--font-family-sans);font-size:14px}.nps-score__submit{align-items:center;background:var(--fills-main-fill-primary,#14215a);border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-weight:600;justify-content:center;padding:12px 24px;transition:background .2s ease;width:fit-content}.nps-score__submit:hover:not(:disabled){background:var(--fills-main-fill-primary-hover,#1a2a6e)}.nps-score__submit:disabled{cursor:not-allowed;opacity:.6}.nps-score__success{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:32px;text-align:center}.nps-score__success-icon{color:var(--fills-main-fill-success,#10b981);margin-bottom:16px}.nps-score__success-title{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:24px;font-weight:600;margin:0 0 8px}.nps-score__success-message{color:var(--labels-main-label-secondary,#626a90);font-family:var(--font-family-sans);font-size:14px;margin:0}@keyframes nps-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}";
|
|
4
|
+
styleInject(css_248z);
|
|
5
|
+
|
|
6
|
+
export { css_248z as default };
|