@appquality/unguess-design-system 2.10.65 → 2.10.68
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/CHANGELOG.md +37 -0
- package/build/index.d.ts +1 -0
- package/build/index.js +95 -59
- package/build/stories/dropdowns/autocomplete/index.stories.d.ts +1 -0
- package/build/stories/dropdowns/item-content/_types.d.ts +9 -0
- package/build/stories/dropdowns/item-content/index.d.ts +3 -0
- package/build/stories/theme/components.d.ts +3 -0
- package/build/stories/theme/index.d.ts +3 -0
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
# v2.10.68 (Tue Aug 02 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- feat(item-with-media): add new item content to handle media ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.67 (Fri Jul 29 2022)
|
|
14
|
+
|
|
15
|
+
#### ⚠️ Pushed to `master`
|
|
16
|
+
|
|
17
|
+
- feat(editor): Add characters count feature ([@cannarocks](https://github.com/cannarocks))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v2.10.66 (Fri Jul 29 2022)
|
|
26
|
+
|
|
27
|
+
#### ⚠️ Pushed to `master`
|
|
28
|
+
|
|
29
|
+
- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
|
|
30
|
+
- chore(theme): update dangerHue shade ([@cannarocks](https://github.com/cannarocks))
|
|
31
|
+
|
|
32
|
+
#### Authors: 1
|
|
33
|
+
|
|
34
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
1
38
|
# v2.10.65 (Fri Jul 29 2022)
|
|
2
39
|
|
|
3
40
|
#### ⚠️ Pushed to `master`
|
package/build/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export * from "./stories/counter";
|
|
|
18
18
|
export * from "./stories/drawers";
|
|
19
19
|
export * as DropdownField from "./stories/dropdowns/field";
|
|
20
20
|
export * from "./stories/dropdowns/item";
|
|
21
|
+
export * from "./stories/dropdowns/item-content";
|
|
21
22
|
export * from "./stories/dropdowns/menu";
|
|
22
23
|
export * from "./stories/dropdowns/multiselect";
|
|
23
24
|
export * from "./stories/dropdowns/select";
|
package/build/index.js
CHANGED
|
@@ -22,6 +22,7 @@ var react = require('@tiptap/react');
|
|
|
22
22
|
var Typography = require('@tiptap/extension-typography');
|
|
23
23
|
var StarterKit = require('@tiptap/starter-kit');
|
|
24
24
|
var Placeholder = require('@tiptap/extension-placeholder');
|
|
25
|
+
var CharacterCount = require('@tiptap/extension-character-count');
|
|
25
26
|
var reactForms = require('@zendeskgarden/react-forms');
|
|
26
27
|
var reactGrid = require('@zendeskgarden/react-grid');
|
|
27
28
|
var reactChrome = require('@zendeskgarden/react-chrome');
|
|
@@ -56,6 +57,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
56
57
|
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
|
|
57
58
|
var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
|
|
58
59
|
var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
|
|
60
|
+
var CharacterCount__default = /*#__PURE__*/_interopDefaultLegacy(CharacterCount);
|
|
59
61
|
|
|
60
62
|
/******************************************************************************
|
|
61
63
|
Copyright (c) Microsoft Corporation.
|
|
@@ -255,12 +257,14 @@ var gradients = {
|
|
|
255
257
|
var _a, _b, _c, _d, _e, _f, _g$3, _h;
|
|
256
258
|
var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
|
|
257
259
|
imgMaxHeight: "214px",
|
|
260
|
+
}, autocomplete: {
|
|
261
|
+
thumbSize: "60px",
|
|
258
262
|
} });
|
|
259
263
|
|
|
260
|
-
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[
|
|
264
|
+
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
261
265
|
|
|
262
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
263
|
-
var templateObject_1$
|
|
266
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
|
|
267
|
+
var templateObject_1$1f;
|
|
264
268
|
|
|
265
269
|
/**
|
|
266
270
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -275,14 +279,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
275
279
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
276
280
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
277
281
|
|
|
278
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
282
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"])), function (_a) {
|
|
279
283
|
var theme = _a.theme;
|
|
280
284
|
return theme.palette.grey[700];
|
|
281
285
|
}, function (_a) {
|
|
282
286
|
var theme = _a.theme;
|
|
283
287
|
return theme.fontSizes.sm;
|
|
284
288
|
});
|
|
285
|
-
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$
|
|
289
|
+
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (_a) {
|
|
286
290
|
var theme = _a.theme;
|
|
287
291
|
return theme.fontSizes.md;
|
|
288
292
|
});
|
|
@@ -296,9 +300,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
296
300
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
297
301
|
Alert.Title = UgAlertTitle;
|
|
298
302
|
Alert.Close = reactNotifications.Close;
|
|
299
|
-
var templateObject_1$
|
|
303
|
+
var templateObject_1$1e, templateObject_2$v;
|
|
300
304
|
|
|
301
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
305
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
302
306
|
return props.avatarType &&
|
|
303
307
|
props.avatarType !== "image" &&
|
|
304
308
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -322,7 +326,7 @@ var Avatar = function (props) {
|
|
|
322
326
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
323
327
|
};
|
|
324
328
|
Avatar.Text = UgAvatar.Text;
|
|
325
|
-
var templateObject_1$
|
|
329
|
+
var templateObject_1$1d;
|
|
326
330
|
|
|
327
331
|
/**
|
|
328
332
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -353,7 +357,7 @@ var getThemeStyle = function (props) {
|
|
|
353
357
|
}
|
|
354
358
|
return theme;
|
|
355
359
|
};
|
|
356
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
360
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject([""], [""])));
|
|
357
361
|
/**
|
|
358
362
|
* Buttons let users take action quickly.
|
|
359
363
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -371,7 +375,7 @@ var Button = function (props) {
|
|
|
371
375
|
};
|
|
372
376
|
Button.StartIcon = UgButton.StartIcon;
|
|
373
377
|
Button.EndIcon = UgButton.EndIcon;
|
|
374
|
-
var templateObject_1$
|
|
378
|
+
var templateObject_1$1c;
|
|
375
379
|
|
|
376
380
|
/**
|
|
377
381
|
A Button group lets users make a selection from a set of options.
|
|
@@ -401,7 +405,7 @@ Used for this:
|
|
|
401
405
|
**/
|
|
402
406
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
403
407
|
|
|
404
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
408
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
405
409
|
var theme = _a.theme;
|
|
406
410
|
return theme.borderRadii.lg;
|
|
407
411
|
}, function (_a) {
|
|
@@ -422,7 +426,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
422
426
|
- To group related content
|
|
423
427
|
*/
|
|
424
428
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
425
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$
|
|
429
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
426
430
|
var theme = _a.theme;
|
|
427
431
|
return theme.borderRadii.xl;
|
|
428
432
|
}, function (_a) {
|
|
@@ -439,7 +443,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
439
443
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
440
444
|
});
|
|
441
445
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
442
|
-
var templateObject_1$
|
|
446
|
+
var templateObject_1$1b, templateObject_2$u;
|
|
443
447
|
|
|
444
448
|
/**
|
|
445
449
|
* Tags let users categorize content using a keyword.
|
|
@@ -654,7 +658,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
654
658
|
})));
|
|
655
659
|
};
|
|
656
660
|
|
|
657
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
661
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
658
662
|
return props.isLight ?
|
|
659
663
|
"\n &:before {\n background-image: linear-gradient(45deg, transparent, ".concat(props.theme.palette.grey[200], ", transparent);\n }\n ") : "\n background-color: ".concat(props.theme.palette.grey[200], ";\n ");
|
|
660
664
|
});
|
|
@@ -672,22 +676,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
672
676
|
- To communicate a typing status, use Inline instead
|
|
673
677
|
*/
|
|
674
678
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
675
|
-
var templateObject_1$
|
|
679
|
+
var templateObject_1$1a;
|
|
676
680
|
|
|
677
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
681
|
+
var CardMeta = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
678
682
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
679
683
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n height: ").concat(theme.space.base * 6, "px;\n padding: ").concat(theme.space.xxs, " 0;\n margin-bottom: ").concat(theme.space.xs, ";\n ");
|
|
680
684
|
});
|
|
681
|
-
var templateObject_1$
|
|
685
|
+
var templateObject_1$19;
|
|
682
686
|
|
|
683
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
687
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
684
688
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
685
689
|
return "\n display: flex;\n\n ".concat(!isStretched ? "max-width: ".concat(theme.space.base * 16, "px") : "", ";\n max-height: ").concat(isStretched ? '150px' : "".concat(theme.space.base * 16, "px"), ";\n ").concat(align === "left" ? "margin-right: auto;" : '', "\n ").concat(align === "right" ? "margin-left: auto;" : '', "\n ").concat(align === "center" || isStretched ? "margin: auto;" : '', "\n\n padding: ").concat(theme.space.xxs, " 0;\n\n svg {\n width: 100%;\n height: auto;\n }\n ");
|
|
686
690
|
});
|
|
687
691
|
CardThumbnail.defaultProps = {
|
|
688
692
|
align: "left"
|
|
689
693
|
};
|
|
690
|
-
var templateObject_1$
|
|
694
|
+
var templateObject_1$18;
|
|
691
695
|
|
|
692
696
|
/**
|
|
693
697
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -699,11 +703,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
699
703
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
700
704
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
701
705
|
|
|
702
|
-
var Label$
|
|
706
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
703
707
|
var theme = _a.theme;
|
|
704
708
|
return theme.palette.grey[500];
|
|
705
709
|
});
|
|
706
|
-
var Title$3 = styled__default["default"](LG)(templateObject_2$
|
|
710
|
+
var Title$3 = styled__default["default"](LG)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
707
711
|
var theme = _a.theme;
|
|
708
712
|
return theme.colors.primaryHue;
|
|
709
713
|
}, function (_a) {
|
|
@@ -713,24 +717,24 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$s || (templateObje
|
|
|
713
717
|
var theme = _a.theme;
|
|
714
718
|
return theme.space.xxs;
|
|
715
719
|
});
|
|
716
|
-
var Description$
|
|
720
|
+
var Description$3 = styled__default["default"](MD)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
717
721
|
var theme = _a.theme;
|
|
718
722
|
return theme.palette.grey[700];
|
|
719
723
|
}, function (_a) {
|
|
720
724
|
var theme = _a.theme;
|
|
721
725
|
return theme.space.xxs;
|
|
722
726
|
});
|
|
723
|
-
var Container$
|
|
727
|
+
var Container$2 = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
724
728
|
var theme = _a.theme, align = _a.align;
|
|
725
729
|
return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
726
730
|
});
|
|
727
|
-
var CardHeader = function (props) { return jsxRuntime.jsx(Container$
|
|
728
|
-
CardHeader.Label = Label$
|
|
731
|
+
var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign({}, props)); };
|
|
732
|
+
CardHeader.Label = Label$2;
|
|
729
733
|
CardHeader.Title = Title$3;
|
|
730
|
-
CardHeader.Text = Description$
|
|
731
|
-
var templateObject_1$
|
|
734
|
+
CardHeader.Text = Description$3;
|
|
735
|
+
var templateObject_1$17, templateObject_2$t, templateObject_3$j, templateObject_4$c;
|
|
732
736
|
|
|
733
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
737
|
+
var Divider = styled__default["default"].div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
734
738
|
var theme = _a.theme;
|
|
735
739
|
return theme.space.base * 3;
|
|
736
740
|
}, function (_a) {
|
|
@@ -740,15 +744,15 @@ var Divider = styled__default["default"].div(templateObject_1$15 || (templateObj
|
|
|
740
744
|
var theme = _a.theme;
|
|
741
745
|
return theme.palette.grey["300"];
|
|
742
746
|
});
|
|
743
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
744
|
-
var Container = styled__default["default"].div(templateObject_3$
|
|
747
|
+
var Footer$2 = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
|
|
748
|
+
var Container$1 = styled__default["default"].div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
745
749
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
746
750
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
|
|
747
751
|
});
|
|
748
|
-
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
749
|
-
var templateObject_1$
|
|
752
|
+
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
753
|
+
var templateObject_1$16, templateObject_2$s, templateObject_3$i;
|
|
750
754
|
|
|
751
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
755
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
752
756
|
var theme = _a.theme;
|
|
753
757
|
return theme.borderRadii.lg;
|
|
754
758
|
}, function (_a) {
|
|
@@ -774,7 +778,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
774
778
|
SpecialCard.Thumb = CardThumbnail;
|
|
775
779
|
SpecialCard.Header = CardHeader;
|
|
776
780
|
SpecialCard.Footer = CardFooter;
|
|
777
|
-
var templateObject_1$
|
|
781
|
+
var templateObject_1$15;
|
|
778
782
|
|
|
779
783
|
var CampaignCardSkeleton = function () {
|
|
780
784
|
return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
@@ -807,11 +811,11 @@ var getTypeDataIcon = function (type) {
|
|
|
807
811
|
return SvgCampaignFunctional;
|
|
808
812
|
}
|
|
809
813
|
};
|
|
810
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
814
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
811
815
|
var theme = _a.theme;
|
|
812
816
|
return theme.palette.grey["700"];
|
|
813
817
|
});
|
|
814
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$
|
|
818
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
|
|
815
819
|
var theme = _a.theme;
|
|
816
820
|
return theme.space.base * 6;
|
|
817
821
|
}, function (_a) {
|
|
@@ -824,7 +828,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$q || (temp
|
|
|
824
828
|
var theme = _a.theme;
|
|
825
829
|
return theme.palette.white;
|
|
826
830
|
});
|
|
827
|
-
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$
|
|
831
|
+
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
828
832
|
var theme = _a.theme;
|
|
829
833
|
return theme.palette.grey["500"];
|
|
830
834
|
});
|
|
@@ -834,9 +838,9 @@ var CampaignCard = function (_a) {
|
|
|
834
838
|
var PillIcon = getTypeDataIcon(type);
|
|
835
839
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
836
840
|
};
|
|
837
|
-
var templateObject_1$
|
|
841
|
+
var templateObject_1$14, templateObject_2$r, templateObject_3$h;
|
|
838
842
|
|
|
839
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
843
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
|
|
840
844
|
var theme = _a.theme;
|
|
841
845
|
return theme.space.base * 6;
|
|
842
846
|
}, function (_a) {
|
|
@@ -853,16 +857,16 @@ var ProductCard = function (props) {
|
|
|
853
857
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
854
858
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
|
|
855
859
|
};
|
|
856
|
-
var templateObject_1$
|
|
860
|
+
var templateObject_1$13;
|
|
857
861
|
|
|
858
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
862
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
859
863
|
var theme = _a.theme;
|
|
860
864
|
return theme.palette.grey[500];
|
|
861
865
|
}, function (_a) {
|
|
862
866
|
var theme = _a.theme;
|
|
863
867
|
return theme.space.base;
|
|
864
868
|
});
|
|
865
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$
|
|
869
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
866
870
|
var theme = _a.theme;
|
|
867
871
|
return theme.palette.blue[600];
|
|
868
872
|
}, function (_a) {
|
|
@@ -872,15 +876,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$p || (templat
|
|
|
872
876
|
var theme = _a.theme;
|
|
873
877
|
return theme.fontWeights.semibold;
|
|
874
878
|
});
|
|
875
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
879
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
876
880
|
var theme = _a.theme;
|
|
877
881
|
return theme.space.xs;
|
|
878
882
|
}, function (_a) {
|
|
879
883
|
var theme = _a.theme;
|
|
880
884
|
return theme.space.xs;
|
|
881
885
|
});
|
|
882
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
883
|
-
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$
|
|
886
|
+
var CardContent = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
887
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
884
888
|
var theme = _a.theme;
|
|
885
889
|
return theme.space.base;
|
|
886
890
|
}, function (_a) {
|
|
@@ -907,15 +911,15 @@ var ServiceCard = function (props) {
|
|
|
907
911
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
908
912
|
return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
|
|
909
913
|
};
|
|
910
|
-
var templateObject_1$
|
|
914
|
+
var templateObject_1$12, templateObject_2$q, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
911
915
|
|
|
912
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
916
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
913
917
|
var InfoCard = function (props) {
|
|
914
918
|
return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
|
|
915
919
|
};
|
|
916
|
-
var templateObject_1$
|
|
920
|
+
var templateObject_1$11;
|
|
917
921
|
|
|
918
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1
|
|
922
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
919
923
|
var theme = _a.theme;
|
|
920
924
|
return theme.space.xl;
|
|
921
925
|
}, function (_a) {
|
|
@@ -926,7 +930,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
926
930
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
927
931
|
*/
|
|
928
932
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
929
|
-
var templateObject_1
|
|
933
|
+
var templateObject_1$10;
|
|
930
934
|
|
|
931
935
|
/**
|
|
932
936
|
* Use Span to style and format inline text elements.
|
|
@@ -966,8 +970,8 @@ function useWindowSize() {
|
|
|
966
970
|
return size;
|
|
967
971
|
}
|
|
968
972
|
|
|
969
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1
|
|
970
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
973
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""])));
|
|
974
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"])), function (_a) {
|
|
971
975
|
var status = _a.status, theme = _a.theme;
|
|
972
976
|
switch (status) {
|
|
973
977
|
case "completed":
|
|
@@ -1001,9 +1005,9 @@ var Counter = function (props) {
|
|
|
1001
1005
|
return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
|
|
1002
1006
|
};
|
|
1003
1007
|
Counter.Avatar = StyledTag.Avatar;
|
|
1004
|
-
var templateObject_1
|
|
1008
|
+
var templateObject_1$$, templateObject_2$p;
|
|
1005
1009
|
|
|
1006
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
1010
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1007
1011
|
var theme = _a.theme;
|
|
1008
1012
|
return theme.breakpoints.sm;
|
|
1009
1013
|
});
|
|
@@ -1020,22 +1024,52 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1020
1024
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1021
1025
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1022
1026
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1023
|
-
var templateObject_1$
|
|
1027
|
+
var templateObject_1$_;
|
|
1024
1028
|
|
|
1025
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1026
|
-
var templateObject_1$
|
|
1029
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject([""], [""])));
|
|
1030
|
+
var templateObject_1$Z;
|
|
1027
1031
|
|
|
1028
1032
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1029
1033
|
__proto__: null,
|
|
1030
1034
|
Field: Field$1
|
|
1031
1035
|
});
|
|
1032
1036
|
|
|
1033
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1037
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"])), function (_a) {
|
|
1034
1038
|
var theme = _a.theme;
|
|
1035
1039
|
return theme.palette.blue[100];
|
|
1036
1040
|
});
|
|
1037
1041
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1038
|
-
var templateObject_1$
|
|
1042
|
+
var templateObject_1$Y;
|
|
1043
|
+
|
|
1044
|
+
var Container = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
1045
|
+
var MetaContainer$1 = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"])));
|
|
1046
|
+
var ThumbContainer = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
|
|
1047
|
+
var theme = _a.theme;
|
|
1048
|
+
return theme.space.sm;
|
|
1049
|
+
}, function (_a) {
|
|
1050
|
+
var theme = _a.theme;
|
|
1051
|
+
return theme.components.autocomplete.thumbSize;
|
|
1052
|
+
});
|
|
1053
|
+
var Label$1 = styled__default["default"](MD)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
1054
|
+
var theme = _a.theme;
|
|
1055
|
+
return theme.fontWeights.medium;
|
|
1056
|
+
}, function (_a) {
|
|
1057
|
+
var theme = _a.theme;
|
|
1058
|
+
return theme.colors.primaryHue;
|
|
1059
|
+
});
|
|
1060
|
+
var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1061
|
+
var theme = _a.theme;
|
|
1062
|
+
return theme.palette.grey[600];
|
|
1063
|
+
});
|
|
1064
|
+
var Image$1 = React.memo(function (_a) {
|
|
1065
|
+
var src = _a.src;
|
|
1066
|
+
return jsxRuntime.jsx("img", { src: src });
|
|
1067
|
+
});
|
|
1068
|
+
var ItemContent = function (props) {
|
|
1069
|
+
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1070
|
+
return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, { children: label }), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
|
|
1071
|
+
};
|
|
1072
|
+
var templateObject_1$X, templateObject_2$o, templateObject_3$f, templateObject_4$a, templateObject_5$5;
|
|
1039
1073
|
|
|
1040
1074
|
/**
|
|
1041
1075
|
* A Menu is a wrapper for items elements
|
|
@@ -1344,6 +1378,7 @@ var Editor = function (_a) {
|
|
|
1344
1378
|
}
|
|
1345
1379
|
return "Can you add some further context?";
|
|
1346
1380
|
} }, placeholderOptions)),
|
|
1381
|
+
CharacterCount__default["default"],
|
|
1347
1382
|
], content: children || "", editorProps: {
|
|
1348
1383
|
handleKeyDown: function (view, event) {
|
|
1349
1384
|
if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
|
|
@@ -2961,6 +2996,7 @@ exports.IconButton = IconButton;
|
|
|
2961
2996
|
exports.InfoCard = InfoCard;
|
|
2962
2997
|
exports.Input = Input;
|
|
2963
2998
|
exports.Item = Item;
|
|
2999
|
+
exports.ItemContent = ItemContent;
|
|
2964
3000
|
exports.ItemMeta = ItemMeta;
|
|
2965
3001
|
exports.LG = LG;
|
|
2966
3002
|
exports.Label = Label;
|
|
@@ -4,5 +4,6 @@ interface AutocompleteStoryArgs extends AutocompleteArgs {
|
|
|
4
4
|
allowNew?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export declare const Default: Story<AutocompleteStoryArgs>;
|
|
7
|
+
export declare const WithMedia: Story<AutocompleteStoryArgs>;
|
|
7
8
|
declare const _default: ComponentMeta<(props: AutocompleteArgs) => JSX.Element>;
|
|
8
9
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appquality/unguess-design-system",
|
|
3
|
-
"version": "2.10.
|
|
3
|
+
"version": "2.10.68",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
|
|
6
|
+
"@tiptap/extension-character-count": "^2.0.0-beta.31",
|
|
6
7
|
"@tiptap/extension-placeholder": "^2.0.0-beta.53",
|
|
7
8
|
"@tiptap/extension-typography": "^2.0.0-beta.22",
|
|
8
9
|
"@tiptap/react": "^2.0.0-beta.114",
|