@appquality/unguess-design-system 2.11.19 → 2.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.12.0 (Mon Sep 19 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- CUP-1300-restyle-sidebar [#91](https://github.com/AppQuality/unguess-design-system/pull/91) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.11.19 (Wed Sep 14 2022)
|
|
2
14
|
|
|
3
15
|
#### ⚠️ Pushed to `master`
|
package/build/index.js
CHANGED
|
@@ -247,7 +247,11 @@ var isMac = function () {
|
|
|
247
247
|
var parser = new UAParser__default["default"]();
|
|
248
248
|
var os = parser.getOS().name;
|
|
249
249
|
return os && /Mac OS|iOS/.test(os);
|
|
250
|
-
};
|
|
250
|
+
};
|
|
251
|
+
styled.css(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n transition: opacity 0.2s ease;\n"], ["\n transition: opacity 0.2s ease;\n"])));
|
|
252
|
+
var sidebarNavItemExpanded = styled.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n visibility: visible;\n opacity: 1;\n // transition: opacity 0.2s ease;\n"], ["\n visibility: visible;\n opacity: 1;\n // transition: opacity 0.2s ease;\n"])));
|
|
253
|
+
var sidebarNavItemHidden = styled.css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"], ["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"])));
|
|
254
|
+
var templateObject_1$1j, templateObject_2$y, templateObject_3$l;
|
|
251
255
|
|
|
252
256
|
var gradients = {
|
|
253
257
|
horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
|
|
@@ -263,8 +267,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
263
267
|
|
|
264
268
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), 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 }) });
|
|
265
269
|
|
|
266
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
267
|
-
var templateObject_1$
|
|
270
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1i || (templateObject_1$1i = __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);
|
|
271
|
+
var templateObject_1$1i;
|
|
268
272
|
|
|
269
273
|
/**
|
|
270
274
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -279,14 +283,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
279
283
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
280
284
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
281
285
|
|
|
282
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
286
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
283
287
|
var theme = _a.theme;
|
|
284
288
|
return theme.palette.grey[700];
|
|
285
289
|
}, function (_a) {
|
|
286
290
|
var theme = _a.theme;
|
|
287
291
|
return theme.fontSizes.sm;
|
|
288
292
|
});
|
|
289
|
-
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$
|
|
293
|
+
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (_a) {
|
|
290
294
|
var theme = _a.theme;
|
|
291
295
|
return theme.fontSizes.md;
|
|
292
296
|
});
|
|
@@ -300,9 +304,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
300
304
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
301
305
|
Alert.Title = UgAlertTitle;
|
|
302
306
|
Alert.Close = reactNotifications.Close;
|
|
303
|
-
var templateObject_1$
|
|
307
|
+
var templateObject_1$1h, templateObject_2$x;
|
|
304
308
|
|
|
305
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
309
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
306
310
|
return props.avatarType &&
|
|
307
311
|
props.avatarType !== "image" &&
|
|
308
312
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -326,7 +330,7 @@ var Avatar = function (props) {
|
|
|
326
330
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
327
331
|
};
|
|
328
332
|
Avatar.Text = UgAvatar.Text;
|
|
329
|
-
var templateObject_1$
|
|
333
|
+
var templateObject_1$1g;
|
|
330
334
|
|
|
331
335
|
/**
|
|
332
336
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -357,7 +361,7 @@ var getThemeStyle = function (props) {
|
|
|
357
361
|
}
|
|
358
362
|
return theme;
|
|
359
363
|
};
|
|
360
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
364
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""])));
|
|
361
365
|
/**
|
|
362
366
|
* Buttons let users take action quickly.
|
|
363
367
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -376,7 +380,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
|
|
|
376
380
|
var Button = ButtonComponent;
|
|
377
381
|
Button.StartIcon = UgButton.StartIcon;
|
|
378
382
|
Button.EndIcon = UgButton.EndIcon;
|
|
379
|
-
var templateObject_1$
|
|
383
|
+
var templateObject_1$1f;
|
|
380
384
|
|
|
381
385
|
/**
|
|
382
386
|
A Button group lets users make a selection from a set of options.
|
|
@@ -406,7 +410,7 @@ Used for this:
|
|
|
406
410
|
**/
|
|
407
411
|
var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
|
|
408
412
|
|
|
409
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
413
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n\n ", "\n"])), function (_a) {
|
|
410
414
|
var theme = _a.theme;
|
|
411
415
|
return theme.borderRadii.lg;
|
|
412
416
|
}, function (_a) {
|
|
@@ -427,7 +431,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
427
431
|
- To group related content
|
|
428
432
|
*/
|
|
429
433
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
430
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$
|
|
434
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: default;\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n cursor: default;\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
431
435
|
var theme = _a.theme;
|
|
432
436
|
return theme.borderRadii.xl;
|
|
433
437
|
}, function (_a) {
|
|
@@ -444,7 +448,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
444
448
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
445
449
|
});
|
|
446
450
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
447
|
-
var templateObject_1$
|
|
451
|
+
var templateObject_1$1e, templateObject_2$w;
|
|
448
452
|
|
|
449
453
|
/**
|
|
450
454
|
* Tags let users categorize content using a keyword.
|
|
@@ -659,7 +663,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
659
663
|
})));
|
|
660
664
|
};
|
|
661
665
|
|
|
662
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
666
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
663
667
|
return props.isLight ?
|
|
664
668
|
"\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 ");
|
|
665
669
|
});
|
|
@@ -677,22 +681,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
677
681
|
- To communicate a typing status, use Inline instead
|
|
678
682
|
*/
|
|
679
683
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
680
|
-
var templateObject_1$
|
|
684
|
+
var templateObject_1$1d;
|
|
681
685
|
|
|
682
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
686
|
+
var CardMeta = styled__default["default"].div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
683
687
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
684
688
|
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 ");
|
|
685
689
|
});
|
|
686
|
-
var templateObject_1$
|
|
690
|
+
var templateObject_1$1c;
|
|
687
691
|
|
|
688
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
692
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
689
693
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
690
694
|
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 ");
|
|
691
695
|
});
|
|
692
696
|
CardThumbnail.defaultProps = {
|
|
693
697
|
align: "left"
|
|
694
698
|
};
|
|
695
|
-
var templateObject_1$
|
|
699
|
+
var templateObject_1$1b;
|
|
696
700
|
|
|
697
701
|
/**
|
|
698
702
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -704,11 +708,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
704
708
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
705
709
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
706
710
|
|
|
707
|
-
var Label$2 = styled__default["default"](SM)(templateObject_1$
|
|
711
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
708
712
|
var theme = _a.theme;
|
|
709
713
|
return theme.palette.grey[500];
|
|
710
714
|
});
|
|
711
|
-
var Title$3 = styled__default["default"](LG)(templateObject_2$
|
|
715
|
+
var Title$3 = styled__default["default"](LG)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
712
716
|
var theme = _a.theme;
|
|
713
717
|
return theme.colors.primaryHue;
|
|
714
718
|
}, function (_a) {
|
|
@@ -718,14 +722,14 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$u || (templateObje
|
|
|
718
722
|
var theme = _a.theme;
|
|
719
723
|
return theme.space.xxs;
|
|
720
724
|
});
|
|
721
|
-
var Description$3 = styled__default["default"](MD)(templateObject_3$
|
|
725
|
+
var Description$3 = styled__default["default"](MD)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
722
726
|
var theme = _a.theme;
|
|
723
727
|
return theme.palette.grey[700];
|
|
724
728
|
}, function (_a) {
|
|
725
729
|
var theme = _a.theme;
|
|
726
730
|
return theme.space.xxs;
|
|
727
731
|
});
|
|
728
|
-
var Container$2 = styled__default["default"].div(templateObject_4$
|
|
732
|
+
var Container$2 = styled__default["default"].div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
729
733
|
var theme = _a.theme, align = _a.align;
|
|
730
734
|
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 ");
|
|
731
735
|
});
|
|
@@ -733,9 +737,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
733
737
|
CardHeader.Label = Label$2;
|
|
734
738
|
CardHeader.Title = Title$3;
|
|
735
739
|
CardHeader.Text = Description$3;
|
|
736
|
-
var templateObject_1$
|
|
740
|
+
var templateObject_1$1a, templateObject_2$v, templateObject_3$k, templateObject_4$e;
|
|
737
741
|
|
|
738
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
742
|
+
var Divider = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
739
743
|
var theme = _a.theme;
|
|
740
744
|
return theme.space.base * 3;
|
|
741
745
|
}, function (_a) {
|
|
@@ -745,15 +749,15 @@ var Divider = styled__default["default"].div(templateObject_1$18 || (templateObj
|
|
|
745
749
|
var theme = _a.theme;
|
|
746
750
|
return theme.palette.grey["300"];
|
|
747
751
|
});
|
|
748
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
749
|
-
var Container$1 = styled__default["default"].div(templateObject_3$
|
|
752
|
+
var Footer$2 = styled__default["default"].div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
753
|
+
var Container$1 = styled__default["default"].div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
750
754
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
751
755
|
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 ");
|
|
752
756
|
});
|
|
753
757
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
754
|
-
var templateObject_1$
|
|
758
|
+
var templateObject_1$19, templateObject_2$u, templateObject_3$j;
|
|
755
759
|
|
|
756
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
760
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n ", "\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
757
761
|
var theme = _a.theme;
|
|
758
762
|
return theme.borderRadii.lg;
|
|
759
763
|
}, function (_a) {
|
|
@@ -783,7 +787,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
783
787
|
SpecialCard.Thumb = CardThumbnail;
|
|
784
788
|
SpecialCard.Header = CardHeader;
|
|
785
789
|
SpecialCard.Footer = CardFooter;
|
|
786
|
-
var templateObject_1$
|
|
790
|
+
var templateObject_1$18;
|
|
787
791
|
|
|
788
792
|
var CampaignCardSkeleton = function () {
|
|
789
793
|
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%" } })] })] }));
|
|
@@ -816,11 +820,11 @@ var getTypeDataIcon = function (type) {
|
|
|
816
820
|
return SvgCampaignFunctional;
|
|
817
821
|
}
|
|
818
822
|
};
|
|
819
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
823
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
820
824
|
var theme = _a.theme;
|
|
821
825
|
return theme.palette.grey["700"];
|
|
822
826
|
});
|
|
823
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$
|
|
827
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$t || (templateObject_2$t = __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) {
|
|
824
828
|
var theme = _a.theme;
|
|
825
829
|
return theme.space.base * 6;
|
|
826
830
|
}, function (_a) {
|
|
@@ -833,7 +837,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$s || (temp
|
|
|
833
837
|
var theme = _a.theme;
|
|
834
838
|
return theme.palette.white;
|
|
835
839
|
});
|
|
836
|
-
var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$
|
|
840
|
+
var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
837
841
|
var theme = _a.theme;
|
|
838
842
|
return theme.palette.grey["500"];
|
|
839
843
|
});
|
|
@@ -843,9 +847,9 @@ var CampaignCard = function (_a) {
|
|
|
843
847
|
var PillIcon = getTypeDataIcon(type);
|
|
844
848
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { 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, {})] })] })));
|
|
845
849
|
};
|
|
846
|
-
var templateObject_1$
|
|
850
|
+
var templateObject_1$17, templateObject_2$t, templateObject_3$i;
|
|
847
851
|
|
|
848
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
852
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
849
853
|
var theme = _a.theme;
|
|
850
854
|
return theme.space.base * 6;
|
|
851
855
|
}, function (_a) {
|
|
@@ -862,16 +866,16 @@ var ProductCard = function (props) {
|
|
|
862
866
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
863
867
|
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 })) }))] })));
|
|
864
868
|
};
|
|
865
|
-
var templateObject_1$
|
|
869
|
+
var templateObject_1$16;
|
|
866
870
|
|
|
867
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
871
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
868
872
|
var theme = _a.theme;
|
|
869
873
|
return theme.palette.grey[500];
|
|
870
874
|
}, function (_a) {
|
|
871
875
|
var theme = _a.theme;
|
|
872
876
|
return theme.space.base;
|
|
873
877
|
});
|
|
874
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$
|
|
878
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
875
879
|
var theme = _a.theme;
|
|
876
880
|
return theme.palette.blue[600];
|
|
877
881
|
}, function (_a) {
|
|
@@ -881,14 +885,14 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$r || (templat
|
|
|
881
885
|
var theme = _a.theme;
|
|
882
886
|
return theme.fontWeights.semibold;
|
|
883
887
|
});
|
|
884
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
888
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
885
889
|
var theme = _a.theme;
|
|
886
890
|
return theme.space.xs;
|
|
887
891
|
}, function (_a) {
|
|
888
892
|
var theme = _a.theme;
|
|
889
893
|
return theme.space.xs;
|
|
890
894
|
});
|
|
891
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
895
|
+
var CardContent = styled__default["default"].div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
892
896
|
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) {
|
|
893
897
|
var theme = _a.theme;
|
|
894
898
|
return theme.space.base;
|
|
@@ -916,15 +920,15 @@ var ServiceCard = function (props) {
|
|
|
916
920
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
917
921
|
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)); }) })))] })] })));
|
|
918
922
|
};
|
|
919
|
-
var templateObject_1$
|
|
923
|
+
var templateObject_1$15, templateObject_2$s, templateObject_3$h, templateObject_4$d, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
920
924
|
|
|
921
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
925
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
922
926
|
var InfoCard = function (props) {
|
|
923
927
|
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; }) }) })))] })));
|
|
924
928
|
};
|
|
925
|
-
var templateObject_1$
|
|
929
|
+
var templateObject_1$14;
|
|
926
930
|
|
|
927
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
931
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
928
932
|
var theme = _a.theme;
|
|
929
933
|
return theme.space.xl;
|
|
930
934
|
}, function (_a) {
|
|
@@ -935,7 +939,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
935
939
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
936
940
|
*/
|
|
937
941
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
938
|
-
var templateObject_1$
|
|
942
|
+
var templateObject_1$13;
|
|
939
943
|
|
|
940
944
|
/**
|
|
941
945
|
* Use Span to style and format inline text elements.
|
|
@@ -975,8 +979,8 @@ function useWindowSize() {
|
|
|
975
979
|
return size;
|
|
976
980
|
}
|
|
977
981
|
|
|
978
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
979
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
982
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject([""], [""])));
|
|
983
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$r || (templateObject_2$r = __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) {
|
|
980
984
|
var status = _a.status, theme = _a.theme;
|
|
981
985
|
switch (status) {
|
|
982
986
|
case "completed":
|
|
@@ -1010,9 +1014,9 @@ var Counter = function (props) {
|
|
|
1010
1014
|
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() })] })));
|
|
1011
1015
|
};
|
|
1012
1016
|
Counter.Avatar = StyledTag.Avatar;
|
|
1013
|
-
var templateObject_1$
|
|
1017
|
+
var templateObject_1$12, templateObject_2$r;
|
|
1014
1018
|
|
|
1015
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
1019
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1016
1020
|
var theme = _a.theme;
|
|
1017
1021
|
return theme.breakpoints.sm;
|
|
1018
1022
|
});
|
|
@@ -1029,33 +1033,33 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1029
1033
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1030
1034
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1031
1035
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1032
|
-
var templateObject_1$
|
|
1036
|
+
var templateObject_1$11;
|
|
1033
1037
|
|
|
1034
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1
|
|
1035
|
-
var templateObject_1
|
|
1038
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject([""], [""])));
|
|
1039
|
+
var templateObject_1$10;
|
|
1036
1040
|
|
|
1037
1041
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1038
1042
|
__proto__: null,
|
|
1039
1043
|
Field: Field$1
|
|
1040
1044
|
});
|
|
1041
1045
|
|
|
1042
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1
|
|
1046
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
1043
1047
|
var theme = _a.theme;
|
|
1044
1048
|
return theme.palette.blue[100];
|
|
1045
1049
|
});
|
|
1046
1050
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1047
|
-
var templateObject_1
|
|
1051
|
+
var templateObject_1$$;
|
|
1048
1052
|
|
|
1049
|
-
var Container = styled__default["default"].div(templateObject_1$
|
|
1050
|
-
var MetaContainer$1 = styled__default["default"].div(templateObject_2$
|
|
1051
|
-
var ThumbContainer = styled__default["default"].div(templateObject_3$
|
|
1053
|
+
var Container = styled__default["default"].div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
1054
|
+
var MetaContainer$1 = styled__default["default"].div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
1055
|
+
var ThumbContainer = styled__default["default"].div(templateObject_3$g || (templateObject_3$g = __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) {
|
|
1052
1056
|
var theme = _a.theme;
|
|
1053
1057
|
return theme.space.sm;
|
|
1054
1058
|
}, function (_a) {
|
|
1055
1059
|
var theme = _a.theme;
|
|
1056
1060
|
return theme.components.autocomplete.thumbSize;
|
|
1057
1061
|
});
|
|
1058
|
-
var Label$1 = styled__default["default"](MD)(templateObject_4$
|
|
1062
|
+
var Label$1 = styled__default["default"](MD)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
1059
1063
|
var theme = _a.theme;
|
|
1060
1064
|
return theme.fontWeights.medium;
|
|
1061
1065
|
}, function (_a) {
|
|
@@ -1074,7 +1078,7 @@ var ItemContent = function (props) {
|
|
|
1074
1078
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1075
1079
|
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, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
|
|
1076
1080
|
};
|
|
1077
|
-
var templateObject_1$
|
|
1081
|
+
var templateObject_1$_, templateObject_2$q, templateObject_3$g, templateObject_4$c, templateObject_5$5;
|
|
1078
1082
|
|
|
1079
1083
|
/**
|
|
1080
1084
|
* A Menu is a wrapper for items elements
|
|
@@ -1098,7 +1102,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1098
1102
|
*/
|
|
1099
1103
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1100
1104
|
|
|
1101
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1105
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1102
1106
|
return props.isPrimary &&
|
|
1103
1107
|
"\n background-color: ".concat(props.theme.palette.blue[600], ";\n color: white;\n & svg[data-garden-id=\"forms.media_figure\"] {\n color: white;\n }\n ");
|
|
1104
1108
|
});
|
|
@@ -1115,7 +1119,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1115
1119
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1116
1120
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1117
1121
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1118
|
-
var templateObject_1$
|
|
1122
|
+
var templateObject_1$Z;
|
|
1119
1123
|
|
|
1120
1124
|
/**
|
|
1121
1125
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1130,7 +1134,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1130
1134
|
|
|
1131
1135
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1132
1136
|
|
|
1133
|
-
var editorStyle = styled.css(templateObject_1$
|
|
1137
|
+
var editorStyle = styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n > * + * {\n margin-top: 0.75em;\n }\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n font-weight: 500;\n color: ", ";\n }\n\n h1 {\n font-size: 2.617924em;\n }\n\n h2 {\n font-size: 1.618em;\n }\n\n h3 {\n font-size: 1.5rem;\n }\n\n h4 {\n font-size: 1.3rem;\n }\n\n h5 {\n font-size: 1.2rem;\n }\n\n h6 {\n font-size: 1.1rem;\n }\n\n /*=====\n #Lists\n =====*/\n ul,\n ol,\n dl {\n padding: 0.618em 0.618rem;\n margin-left: 1rem;\n }\n\n ul {\n list-style: disc;\n }\n\n ol {\n list-style: decimal;\n }\n\n li {\n padding: 0 0.618rem;\n line-height: 1.618;\n }\n\n dt {\n text-indent: -0.618rem;\n }\n\n dd {\n margin: 0;\n padding: 0 0.618rem 0 0.618rem;\n }\n\n hr {\n border: none;\n border-top: 2px solid rgba(#0d0d0d, 0.1);\n margin: 2rem 0;\n }\n\n p,\n blockquote {\n line-height: 1.618;\n }\n\n p {\n font-size: 1rem;\n margin-bottom: 0.618em;\n }\n\n blockquote {\n border-left: 3px solid;\n border-color: ", ";\n margin: 1.618em 0.618rem;\n padding-left: 0.618em;\n }\n\n em,\n i,\n cite {\n font-style: italic;\n }\n\n strong,\n b {\n font-weight: 500;\n }\n\n cite {\n display: block;\n text-align: right;\n }\n\n u {\n text-decoration: none;\n border-bottom: 1px dotted red;\n }\n\n small,\n sub,\n sup {\n font-size: 0.618rem;\n line-height: 1;\n }\n\n sub {\n vertical-align: sub;\n }\n\n sup {\n vertical-align: super;\n }\n\n s,\n strike,\n del {\n text-decoration: strikethrough;\n }\n\n ins,\n del {\n background-color: rgba(220, 220, 220, 0.25);\n }\n\n ins {\n text-decoration: none;\n }\n\n /*\n mark and selection should be different, so user knows which one they've selected.\n \n mark and selections:\n saturation: 44%\n lightness: 75%\n Hue is different\n */\n mark {\n background-color: rgba(165, 220, 165, 0.9);\n }\n\n ::selection {\n background-color: rgba(165, 220, 220, 0.9);\n }\n\n /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n mark::selection {\n background-color: rgba(165, 220, 110, 0.9);\n }\n\n /* dfn and dt both do the same thing: denote a term to be defined */\n dfn,\n dt {\n font-style: oblique;\n font-weight: 700;\n text-transform: capitalize;\n }\n\n code {\n background-color: ", ";\n color: ", ";\n padding: 0.2rem 0.3rem;\n border-radius: 4px;\n }\n\n pre {\n background: #0d0d0d;\n color: #fff;\n font-family: \"JetBrainsMono\", monospace;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n\n code {\n color: inherit;\n padding: 0;\n background: none;\n font-size: 0.8rem;\n }\n }\n\n kbd,\n samp,\n data {\n background-color: rgba(165, 165, 165, 0.2);\n }\n\n kbd {\n font-size: 0.75rem;\n padding: 0.25ex 0.5ex;\n border: 1px solid rgb(193, 193, 193);\n border-radius: 3px;\n }\n\n /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n samp,\n data {\n padding: 0 10px;\n }\n\n var,\n data {\n font-style: italic;\n }\n\n samp {\n border-left: 5px solid rgb(193, 193, 193);\n }\n\n data {\n padding: 0 10px;\n }\n\n /* Placeholder (at the top) */\n /*p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }*/\n\n /* Placeholder (on every new line) */\n .is-empty::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }\n"], ["\n > * + * {\n margin-top: 0.75em;\n }\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n font-weight: 500;\n color: ", ";\n }\n\n h1 {\n font-size: 2.617924em;\n }\n\n h2 {\n font-size: 1.618em;\n }\n\n h3 {\n font-size: 1.5rem;\n }\n\n h4 {\n font-size: 1.3rem;\n }\n\n h5 {\n font-size: 1.2rem;\n }\n\n h6 {\n font-size: 1.1rem;\n }\n\n /*=====\n #Lists\n =====*/\n ul,\n ol,\n dl {\n padding: 0.618em 0.618rem;\n margin-left: 1rem;\n }\n\n ul {\n list-style: disc;\n }\n\n ol {\n list-style: decimal;\n }\n\n li {\n padding: 0 0.618rem;\n line-height: 1.618;\n }\n\n dt {\n text-indent: -0.618rem;\n }\n\n dd {\n margin: 0;\n padding: 0 0.618rem 0 0.618rem;\n }\n\n hr {\n border: none;\n border-top: 2px solid rgba(#0d0d0d, 0.1);\n margin: 2rem 0;\n }\n\n p,\n blockquote {\n line-height: 1.618;\n }\n\n p {\n font-size: 1rem;\n margin-bottom: 0.618em;\n }\n\n blockquote {\n border-left: 3px solid;\n border-color: ", ";\n margin: 1.618em 0.618rem;\n padding-left: 0.618em;\n }\n\n em,\n i,\n cite {\n font-style: italic;\n }\n\n strong,\n b {\n font-weight: 500;\n }\n\n cite {\n display: block;\n text-align: right;\n }\n\n u {\n text-decoration: none;\n border-bottom: 1px dotted red;\n }\n\n small,\n sub,\n sup {\n font-size: 0.618rem;\n line-height: 1;\n }\n\n sub {\n vertical-align: sub;\n }\n\n sup {\n vertical-align: super;\n }\n\n s,\n strike,\n del {\n text-decoration: strikethrough;\n }\n\n ins,\n del {\n background-color: rgba(220, 220, 220, 0.25);\n }\n\n ins {\n text-decoration: none;\n }\n\n /*\n mark and selection should be different, so user knows which one they've selected.\n \n mark and selections:\n saturation: 44%\n lightness: 75%\n Hue is different\n */\n mark {\n background-color: rgba(165, 220, 165, 0.9);\n }\n\n ::selection {\n background-color: rgba(165, 220, 220, 0.9);\n }\n\n /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n mark::selection {\n background-color: rgba(165, 220, 110, 0.9);\n }\n\n /* dfn and dt both do the same thing: denote a term to be defined */\n dfn,\n dt {\n font-style: oblique;\n font-weight: 700;\n text-transform: capitalize;\n }\n\n code {\n background-color: ", ";\n color: ", ";\n padding: 0.2rem 0.3rem;\n border-radius: 4px;\n }\n\n pre {\n background: #0d0d0d;\n color: #fff;\n font-family: \"JetBrainsMono\", monospace;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n\n code {\n color: inherit;\n padding: 0;\n background: none;\n font-size: 0.8rem;\n }\n }\n\n kbd,\n samp,\n data {\n background-color: rgba(165, 165, 165, 0.2);\n }\n\n kbd {\n font-size: 0.75rem;\n padding: 0.25ex 0.5ex;\n border: 1px solid rgb(193, 193, 193);\n border-radius: 3px;\n }\n\n /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n samp,\n data {\n padding: 0 10px;\n }\n\n var,\n data {\n font-style: italic;\n }\n\n samp {\n border-left: 5px solid rgb(193, 193, 193);\n }\n\n data {\n padding: 0 10px;\n }\n\n /* Placeholder (at the top) */\n /*p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }*/\n\n /* Placeholder (on every new line) */\n .is-empty::before {\n content: attr(data-placeholder);\n float: left;\n color: #ced4da;\n pointer-events: none;\n height: 0;\n }\n"])), function (_a) {
|
|
1134
1138
|
var theme = _a.theme;
|
|
1135
1139
|
return theme.palette.grey["800"];
|
|
1136
1140
|
}, function (_a) {
|
|
@@ -1143,7 +1147,7 @@ var editorStyle = styled.css(templateObject_1$X || (templateObject_1$X = __makeT
|
|
|
1143
1147
|
var theme = _a.theme;
|
|
1144
1148
|
return theme.palette.red[600];
|
|
1145
1149
|
});
|
|
1146
|
-
var templateObject_1$
|
|
1150
|
+
var templateObject_1$Y;
|
|
1147
1151
|
|
|
1148
1152
|
var _path$l;
|
|
1149
1153
|
|
|
@@ -1301,8 +1305,8 @@ var SvgH3Fill = function SvgH3Fill(props) {
|
|
|
1301
1305
|
}))));
|
|
1302
1306
|
};
|
|
1303
1307
|
|
|
1304
|
-
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1305
|
-
var MenuContainer = styled__default["default"](Card)(templateObject_2$
|
|
1308
|
+
var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject([""], [""])));
|
|
1309
|
+
var MenuContainer = styled__default["default"](Card)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"], ["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"])), function (_a) {
|
|
1306
1310
|
var theme = _a.theme;
|
|
1307
1311
|
return theme.space.xxs;
|
|
1308
1312
|
}, StyledIconButton);
|
|
@@ -1319,9 +1323,9 @@ var FloatingMenu = function (props) {
|
|
|
1319
1323
|
return editor.chain().focus().toggleHeading({ level: 3 }).run();
|
|
1320
1324
|
}, isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBold().run(); }, isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleItalic().run(); }, isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
|
|
1321
1325
|
};
|
|
1322
|
-
var templateObject_1$
|
|
1326
|
+
var templateObject_1$X, templateObject_2$p;
|
|
1323
1327
|
|
|
1324
|
-
var Header$1 = styled__default["default"].div(templateObject_1$
|
|
1328
|
+
var Header$1 = styled__default["default"].div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"])), function (_a) {
|
|
1325
1329
|
var theme = _a.theme;
|
|
1326
1330
|
return theme.space.xs;
|
|
1327
1331
|
}, function (_a) {
|
|
@@ -1331,7 +1335,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$V || (templateObj
|
|
|
1331
1335
|
var theme = _a.theme;
|
|
1332
1336
|
return theme.palette.grey[300];
|
|
1333
1337
|
});
|
|
1334
|
-
var Title$2 = styled__default["default"](MD)(templateObject_2$
|
|
1338
|
+
var Title$2 = styled__default["default"](MD)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1335
1339
|
var validation = _a.validation, theme = _a.theme;
|
|
1336
1340
|
if (validation === "success") {
|
|
1337
1341
|
return "color: ".concat(theme.colors.successHue, ";");
|
|
@@ -1350,23 +1354,23 @@ var EditorHeader = function (props) {
|
|
|
1350
1354
|
var title = props.title, validation = props.validation;
|
|
1351
1355
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1352
1356
|
};
|
|
1353
|
-
var templateObject_1$
|
|
1357
|
+
var templateObject_1$W, templateObject_2$o;
|
|
1354
1358
|
|
|
1355
|
-
var Footer$1 = styled__default["default"].div(templateObject_1$
|
|
1359
|
+
var Footer$1 = styled__default["default"].div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"])), function (_a) {
|
|
1356
1360
|
var theme = _a.theme;
|
|
1357
1361
|
return theme.space.sm;
|
|
1358
1362
|
}, function (_a) {
|
|
1359
1363
|
var theme = _a.theme;
|
|
1360
1364
|
return theme.palette.grey[100];
|
|
1361
1365
|
});
|
|
1362
|
-
var Text = styled__default["default"](SM)(templateObject_2$
|
|
1366
|
+
var Text = styled__default["default"](SM)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n line-height: 1.7;\n"], ["\n line-height: 1.7;\n"])));
|
|
1363
1367
|
var EditorFooter = function (_a) {
|
|
1364
1368
|
var saveText = _a.saveText;
|
|
1365
1369
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1366
1370
|
};
|
|
1367
|
-
var templateObject_1$
|
|
1371
|
+
var templateObject_1$V, templateObject_2$n;
|
|
1368
1372
|
|
|
1369
|
-
var EditorContainer = styled__default["default"].div(templateObject_1$
|
|
1373
|
+
var EditorContainer = styled__default["default"].div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"], ["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"])), function (_a) {
|
|
1370
1374
|
var theme = _a.theme;
|
|
1371
1375
|
return theme.borderRadii.md;
|
|
1372
1376
|
}, function (_a) {
|
|
@@ -1450,9 +1454,9 @@ var Editor = function (_a) {
|
|
|
1450
1454
|
});
|
|
1451
1455
|
return (jsxRuntime.jsxs(EditorContainer, __assign({ editable: isEditable, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: __assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
|
|
1452
1456
|
};
|
|
1453
|
-
var templateObject_1$
|
|
1457
|
+
var templateObject_1$U;
|
|
1454
1458
|
|
|
1455
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1459
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
1456
1460
|
/**
|
|
1457
1461
|
* A Checkbox lets users select and unselect options from a list.
|
|
1458
1462
|
* <hr>
|
|
@@ -1464,17 +1468,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1464
1468
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1465
1469
|
**/
|
|
1466
1470
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1467
|
-
var templateObject_1$
|
|
1471
|
+
var templateObject_1$T;
|
|
1468
1472
|
|
|
1469
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1473
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
|
|
1470
1474
|
/**
|
|
1471
1475
|
* A Label is used to specify a title for an input.
|
|
1472
1476
|
* <hr>
|
|
1473
1477
|
**/
|
|
1474
1478
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1475
|
-
var templateObject_1$
|
|
1479
|
+
var templateObject_1$S;
|
|
1476
1480
|
|
|
1477
|
-
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$
|
|
1481
|
+
var StyledLabel$1 = styled__default["default"](Label)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1478
1482
|
var theme = _a.theme;
|
|
1479
1483
|
return theme.space.base;
|
|
1480
1484
|
});
|
|
@@ -1487,14 +1491,14 @@ var CheckboxCard = function (props) {
|
|
|
1487
1491
|
};
|
|
1488
1492
|
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, __assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel$1, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1489
1493
|
};
|
|
1490
|
-
var templateObject_1$
|
|
1494
|
+
var templateObject_1$R;
|
|
1491
1495
|
|
|
1492
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1496
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
1493
1497
|
/**
|
|
1494
1498
|
* A Field is a wrapper for input elements
|
|
1495
1499
|
**/
|
|
1496
1500
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1497
|
-
var templateObject_1$
|
|
1501
|
+
var templateObject_1$Q;
|
|
1498
1502
|
|
|
1499
1503
|
var index = /*#__PURE__*/Object.freeze({
|
|
1500
1504
|
__proto__: null,
|
|
@@ -1502,8 +1506,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1502
1506
|
Hint: reactForms.Hint
|
|
1503
1507
|
});
|
|
1504
1508
|
|
|
1505
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1506
|
-
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$
|
|
1509
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
1510
|
+
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject([""], [""])));
|
|
1507
1511
|
/**
|
|
1508
1512
|
* An Input lets users enter text into a field.
|
|
1509
1513
|
* <hr>
|
|
@@ -1512,7 +1516,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$l || (te
|
|
|
1512
1516
|
* - To enter multiline text, use a Textarea
|
|
1513
1517
|
**/
|
|
1514
1518
|
var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
|
|
1515
|
-
var templateObject_1$
|
|
1519
|
+
var templateObject_1$P, templateObject_2$m;
|
|
1516
1520
|
|
|
1517
1521
|
var _g$1;
|
|
1518
1522
|
|
|
@@ -1538,16 +1542,16 @@ var SvgNotesStroke = function SvgNotesStroke(props) {
|
|
|
1538
1542
|
};
|
|
1539
1543
|
|
|
1540
1544
|
var ToggleContext = React.createContext({});
|
|
1541
|
-
var StyledInput = styled__default["default"](Input)(templateObject_1$
|
|
1545
|
+
var StyledInput = styled__default["default"](Input)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"], ["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"])), function (_a) {
|
|
1542
1546
|
var theme = _a.theme;
|
|
1543
1547
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1544
1548
|
});
|
|
1545
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_2$
|
|
1549
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n padding: ", ";\n transition: opacity 0.2s ease-in-out;\n"], ["\n padding: ", ";\n transition: opacity 0.2s ease-in-out;\n"])), function (_a) {
|
|
1546
1550
|
var theme = _a.theme;
|
|
1547
1551
|
return "".concat(theme.space.xxs, " ").concat(theme.space.xxs, " 0");
|
|
1548
1552
|
});
|
|
1549
|
-
var StyledText$1 = styled__default["default"](XL)(templateObject_3$
|
|
1550
|
-
var Wrapper = styled__default["default"].div(templateObject_4$
|
|
1553
|
+
var StyledText$1 = styled__default["default"](XL)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
|
|
1554
|
+
var Wrapper = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", ";\n }\n }\n"])), StyledText$1, function (_a) {
|
|
1551
1555
|
var theme = _a.theme;
|
|
1552
1556
|
return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
|
|
1553
1557
|
}, function (_a) {
|
|
@@ -1591,9 +1595,9 @@ var InputItem = function (props) {
|
|
|
1591
1595
|
};
|
|
1592
1596
|
InputToggle.Item = InputItem;
|
|
1593
1597
|
InputToggle.Label = StyledLabel;
|
|
1594
|
-
var templateObject_1$
|
|
1598
|
+
var templateObject_1$O, templateObject_2$l, templateObject_3$f, templateObject_4$b;
|
|
1595
1599
|
|
|
1596
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1600
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1597
1601
|
/**
|
|
1598
1602
|
* Media elements add even more context to an input.
|
|
1599
1603
|
* <hr>
|
|
@@ -1602,9 +1606,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1602
1606
|
* - To enter multiline text, use a Textarea
|
|
1603
1607
|
**/
|
|
1604
1608
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1605
|
-
var templateObject_1$
|
|
1609
|
+
var templateObject_1$N;
|
|
1606
1610
|
|
|
1607
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1611
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1608
1612
|
/**
|
|
1609
1613
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1610
1614
|
* <hr>
|
|
@@ -1616,7 +1620,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$L ||
|
|
|
1616
1620
|
* - To select from a long list of options, use Select instead
|
|
1617
1621
|
**/
|
|
1618
1622
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1619
|
-
var templateObject_1$
|
|
1623
|
+
var templateObject_1$M;
|
|
1620
1624
|
|
|
1621
1625
|
var _path$i;
|
|
1622
1626
|
|
|
@@ -1636,7 +1640,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1636
1640
|
})));
|
|
1637
1641
|
};
|
|
1638
1642
|
|
|
1639
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1643
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1640
1644
|
var theme = _a.theme;
|
|
1641
1645
|
return theme.space.base;
|
|
1642
1646
|
}, function (_a) {
|
|
@@ -1646,7 +1650,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1
|
|
|
1646
1650
|
var theme = _a.theme;
|
|
1647
1651
|
return theme.fontWeights.medium;
|
|
1648
1652
|
});
|
|
1649
|
-
var Circle = styled__default["default"].div(templateObject_2$
|
|
1653
|
+
var Circle = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
|
|
1650
1654
|
var theme = _a.theme;
|
|
1651
1655
|
return theme.space.base * 6;
|
|
1652
1656
|
}, function (_a) {
|
|
@@ -1670,9 +1674,9 @@ var RadioCard = function (_a) {
|
|
|
1670
1674
|
props.onChecked && props.onChecked(props.value);
|
|
1671
1675
|
} }, { children: [jsxRuntime.jsx(SpecialCard.Meta, __assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, __assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
|
|
1672
1676
|
};
|
|
1673
|
-
var templateObject_1$
|
|
1677
|
+
var templateObject_1$L, templateObject_2$k;
|
|
1674
1678
|
|
|
1675
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1679
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1676
1680
|
/**
|
|
1677
1681
|
* A Textarea is a form control for multi-line text.
|
|
1678
1682
|
* <hr>
|
|
@@ -1680,9 +1684,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1680
1684
|
* - To enter multi-line text
|
|
1681
1685
|
**/
|
|
1682
1686
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1683
|
-
var templateObject_1$
|
|
1687
|
+
var templateObject_1$K;
|
|
1684
1688
|
|
|
1685
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1689
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1686
1690
|
/**
|
|
1687
1691
|
* A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
|
|
1688
1692
|
* <hr>
|
|
@@ -1693,11 +1697,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$I
|
|
|
1693
1697
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1694
1698
|
**/
|
|
1695
1699
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1696
|
-
var templateObject_1$
|
|
1700
|
+
var templateObject_1$J;
|
|
1697
1701
|
|
|
1698
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
1702
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), theme.space.lg, theme.breakpoints.sm, theme.space.md);
|
|
1699
1703
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
1700
|
-
var templateObject_1$
|
|
1704
|
+
var templateObject_1$I;
|
|
1701
1705
|
|
|
1702
1706
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1703
1707
|
|
|
@@ -1760,15 +1764,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1760
1764
|
})));
|
|
1761
1765
|
};
|
|
1762
1766
|
|
|
1763
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1767
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1764
1768
|
var Icon = function (props) {
|
|
1765
1769
|
var type = props.type, size = props.size;
|
|
1766
1770
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1767
1771
|
return (jsxRuntime.jsxs(StyledUgIcon$1, { children: [type === "square" && jsxRuntime.jsx(SvgUgSquare, { width: dim, height: dim }), type === "triangle" && jsxRuntime.jsx(SvgUgTriangle, { width: dim, height: dim }), type === "circle" && jsxRuntime.jsx(SvgUgCircle, { width: dim, height: dim })] }));
|
|
1768
1772
|
};
|
|
1769
|
-
var templateObject_1$
|
|
1773
|
+
var templateObject_1$H;
|
|
1770
1774
|
|
|
1771
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1775
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1772
1776
|
/**
|
|
1773
1777
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1774
1778
|
* <hr>
|
|
@@ -1780,9 +1784,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1780
1784
|
- When loading page content, use a Skeleton loader instead
|
|
1781
1785
|
*/
|
|
1782
1786
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1783
|
-
var templateObject_1$
|
|
1787
|
+
var templateObject_1$G;
|
|
1784
1788
|
|
|
1785
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1789
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1786
1790
|
/**
|
|
1787
1791
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1788
1792
|
* <hr>
|
|
@@ -1791,9 +1795,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1791
1795
|
- To provide a quick way to navigate to ancestor pages
|
|
1792
1796
|
*/
|
|
1793
1797
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1794
|
-
var templateObject_1$
|
|
1798
|
+
var templateObject_1$F;
|
|
1795
1799
|
|
|
1796
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1800
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1797
1801
|
var theme = _a.theme;
|
|
1798
1802
|
return theme.palette.white;
|
|
1799
1803
|
});
|
|
@@ -1801,7 +1805,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$D ||
|
|
|
1801
1805
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1802
1806
|
*/
|
|
1803
1807
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1804
|
-
var templateObject_1$
|
|
1808
|
+
var templateObject_1$E;
|
|
1805
1809
|
|
|
1806
1810
|
/**
|
|
1807
1811
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1825,23 +1829,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1825
1829
|
})));
|
|
1826
1830
|
};
|
|
1827
1831
|
|
|
1828
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1832
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1829
1833
|
var theme = _a.theme;
|
|
1830
1834
|
return theme.fonts.system;
|
|
1831
1835
|
});
|
|
1832
|
-
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$
|
|
1836
|
+
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1833
1837
|
var theme = _a.theme;
|
|
1834
1838
|
return theme.fonts.system;
|
|
1835
1839
|
});
|
|
1836
1840
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1837
|
-
var templateObject_1$
|
|
1841
|
+
var templateObject_1$D, templateObject_2$j;
|
|
1838
1842
|
|
|
1839
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1843
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1840
1844
|
var theme = _a.theme;
|
|
1841
1845
|
return theme.fonts.system;
|
|
1842
1846
|
});
|
|
1843
1847
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1844
|
-
var templateObject_1$
|
|
1848
|
+
var templateObject_1$C;
|
|
1845
1849
|
|
|
1846
1850
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1847
1851
|
|
|
@@ -1890,7 +1894,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1890
1894
|
})));
|
|
1891
1895
|
};
|
|
1892
1896
|
|
|
1893
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1897
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1894
1898
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1895
1899
|
return isCompact &&
|
|
1896
1900
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1906,13 +1910,13 @@ var WorkspacesDropdown = function (props) {
|
|
|
1906
1910
|
? selectedWorkspace.company + "'s workspace"
|
|
1907
1911
|
: "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })));
|
|
1908
1912
|
};
|
|
1909
|
-
var templateObject_1$
|
|
1913
|
+
var templateObject_1$B;
|
|
1910
1914
|
|
|
1911
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1915
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"], ["\n margin-right: 2px;\n border-right: none;\n @media (max-width: ", ") {\n right: 0;\n left: 0;\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n }\n"])), function (_a) {
|
|
1912
1916
|
var theme = _a.theme;
|
|
1913
1917
|
return theme.breakpoints.md;
|
|
1914
1918
|
});
|
|
1915
|
-
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$
|
|
1919
|
+
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1916
1920
|
var theme = _a.theme;
|
|
1917
1921
|
return theme.colors.primaryHue;
|
|
1918
1922
|
}, function (_a) {
|
|
@@ -1922,7 +1926,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1922
1926
|
var theme = _a.theme;
|
|
1923
1927
|
return theme.breakpoints.md;
|
|
1924
1928
|
});
|
|
1925
|
-
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$
|
|
1929
|
+
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1926
1930
|
var theme = _a.theme;
|
|
1927
1931
|
return theme.colors.primaryHue;
|
|
1928
1932
|
}, function (_a) {
|
|
@@ -1932,7 +1936,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1932
1936
|
var theme = _a.theme;
|
|
1933
1937
|
return theme.breakpoints.md;
|
|
1934
1938
|
});
|
|
1935
|
-
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$
|
|
1939
|
+
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1936
1940
|
var theme = _a.theme;
|
|
1937
1941
|
return theme.colors.primaryHue;
|
|
1938
1942
|
}, function (_a) {
|
|
@@ -1942,9 +1946,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1942
1946
|
var BrandItem = function (props) {
|
|
1943
1947
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
|
|
1944
1948
|
};
|
|
1945
|
-
var templateObject_1$
|
|
1949
|
+
var templateObject_1$A, templateObject_2$i, templateObject_3$e, templateObject_4$a;
|
|
1946
1950
|
|
|
1947
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1951
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1948
1952
|
/**
|
|
1949
1953
|
* An Header is a visual way to display general information.
|
|
1950
1954
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1953,13 +1957,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1953
1957
|
Header.HeaderItem = HeaderItem;
|
|
1954
1958
|
Header.HeaderItemText = HeaderItemText;
|
|
1955
1959
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1956
|
-
var templateObject_1$
|
|
1960
|
+
var templateObject_1$z;
|
|
1957
1961
|
|
|
1958
1962
|
var HeaderSkeleton = function () {
|
|
1959
1963
|
return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: window.matchMedia("only screen and (min-width: 576px)").matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: theme.space.sm } })) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
|
|
1960
1964
|
};
|
|
1961
1965
|
|
|
1962
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1966
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1963
1967
|
var theme = _a.theme;
|
|
1964
1968
|
return theme.breakpoints.sm;
|
|
1965
1969
|
});
|
|
@@ -1971,18 +1975,19 @@ var AppHeader = function (_a) {
|
|
|
1971
1975
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1972
1976
|
return isLoading ? jsxRuntime.jsx(HeaderSkeleton, {}) : (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
|
|
1973
1977
|
};
|
|
1974
|
-
var templateObject_1$
|
|
1978
|
+
var templateObject_1$y;
|
|
1975
1979
|
|
|
1976
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1980
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n transition: all 0.25s ease;\n ", "\n // transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"], ["\n border-right: ", ";\n border-color: ", ";\n transition: all 0.25s ease;\n ", "\n // transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
|
|
1977
1981
|
var theme = _a.theme;
|
|
1978
1982
|
return theme.borders.sm;
|
|
1979
1983
|
}, function (_a) {
|
|
1980
1984
|
var theme = _a.theme;
|
|
1981
1985
|
return reactTheming.getColor(theme.colors.neutralHue, 300);
|
|
1982
1986
|
}, function (props) {
|
|
1983
|
-
return "\n
|
|
1984
|
-
?
|
|
1985
|
-
: props.theme.components.chrome.nav.
|
|
1987
|
+
return "\n margin-left: ".concat(props.isExpanded
|
|
1988
|
+
? 0
|
|
1989
|
+
: -(props.theme.components.chrome.nav.openWidth -
|
|
1990
|
+
props.theme.components.chrome.nav.closedWidth), "px;\n width: ").concat(props.theme.components.chrome.nav.openWidth, "px;\n \n @media (max-width: ").concat(props.theme.breakpoints.sm, ") {\n width: ").concat(props.isExpanded ? "100%" : "0", ";\n border-right: none;\n }\n ");
|
|
1986
1991
|
}, function (_a) {
|
|
1987
1992
|
var theme = _a.theme;
|
|
1988
1993
|
return theme.space.sm;
|
|
@@ -2000,27 +2005,36 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$w || (t
|
|
|
2000
2005
|
- To give a consistent dashboard and navigation experience
|
|
2001
2006
|
*/
|
|
2002
2007
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
2003
|
-
var templateObject_1$
|
|
2008
|
+
var templateObject_1$x;
|
|
2004
2009
|
|
|
2005
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
2006
|
-
var
|
|
2010
|
+
var SelectedItemStyle = styled.css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2011
|
+
var theme = _a.theme;
|
|
2012
|
+
return theme.palette.kale["100"];
|
|
2013
|
+
});
|
|
2014
|
+
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n ", "\n &:focus {\n ", "\n }\n &:hover {\n background-color: ", ";\n }\n color: ", ";\n font-weight: ", ";\n ", "\n margin: ", " 0;\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n ", "\n &:focus {\n ", "\n }\n &:hover {\n background-color: ", ";\n }\n color: ", ";\n font-weight: ", ";\n ", "\n margin: ", " 0;\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
2007
2015
|
var theme = _a.theme;
|
|
2008
2016
|
return theme.fonts.system;
|
|
2009
|
-
}, function (props) { return !props.isExpanded &&
|
|
2017
|
+
}, sidebarNavItemExpanded, function (props) { return !props.isExpanded && sidebarNavItemHidden; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (_a) {
|
|
2018
|
+
var theme = _a.theme;
|
|
2019
|
+
return theme.palette.kale["200"];
|
|
2020
|
+
}, function (props) { return props.theme.colors.primaryHue; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
|
|
2010
2021
|
return props.isCurrent &&
|
|
2011
2022
|
"\n color: ".concat(props.theme.palette.blue["700"], ";\n font-weight: ").concat(props.theme.fontWeights.semibold, ";\n ");
|
|
2023
|
+
}, function (_a) {
|
|
2024
|
+
var theme = _a.theme;
|
|
2025
|
+
return theme.space.xs;
|
|
2012
2026
|
});
|
|
2013
2027
|
var NavItem = function (props) {
|
|
2014
2028
|
// const { isExpanded } = props;
|
|
2015
2029
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
2016
2030
|
};
|
|
2017
|
-
var templateObject_1$
|
|
2031
|
+
var templateObject_1$w, templateObject_2$h;
|
|
2018
2032
|
|
|
2019
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
2033
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
|
|
2020
2034
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
2021
|
-
var templateObject_1$
|
|
2035
|
+
var templateObject_1$v;
|
|
2022
2036
|
|
|
2023
|
-
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "
|
|
2037
|
+
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "158px" } }, { children: props.children })) }))); };
|
|
2024
2038
|
|
|
2025
2039
|
var _path$c;
|
|
2026
2040
|
|
|
@@ -2056,7 +2070,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
2056
2070
|
})));
|
|
2057
2071
|
};
|
|
2058
2072
|
|
|
2059
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
2073
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n width: ", "px;\n height: ", "px;\n min-width: ", ";\n position: absolute;\n top: ", "px;\n right: -", "px;\n background: ", "};\n z-index: 1;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2060
2074
|
var theme = _a.theme;
|
|
2061
2075
|
return theme.space.base * 6;
|
|
2062
2076
|
}, function (_a) {
|
|
@@ -2081,18 +2095,21 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$t ||
|
|
|
2081
2095
|
var NavToggle = function (props) {
|
|
2082
2096
|
return (jsxRuntime.jsx(StyledToggle, __assign({}, props, { isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
|
|
2083
2097
|
};
|
|
2084
|
-
var templateObject_1$
|
|
2098
|
+
var templateObject_1$u;
|
|
2085
2099
|
|
|
2086
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
2100
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: 100%;\n min-height: 8px;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"], ["\n width: 100%;\n min-height: 8px;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: ", ";\n pointer-events: none;\n\n &:after {\n background: ", ";\n height: 1px;\n flex: 1;\n content: \"\";\n }\n\n span {\n background: #fff;\n margin: 0;\n margin-right: ", ";\n color: ", ";\n font-size: ", ";\n }\n ", "\n"])), function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
|
|
2087
2101
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
2088
|
-
var templateObject_1$
|
|
2102
|
+
var templateObject_1$t;
|
|
2089
2103
|
|
|
2090
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
2091
|
-
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$
|
|
2104
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
|
|
2105
|
+
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n padding: 12px 8px;\n opacity: 1;\n padding-left: ", "; //Accordion Alingment\n"], ["\n flex-flow: column;\n align-items: flex-start;\n padding: 12px 8px;\n opacity: 1;\n padding-left: ", "; //Accordion Alingment\n"])), function (_a) {
|
|
2106
|
+
var theme = _a.theme;
|
|
2107
|
+
return theme.space.xxl;
|
|
2108
|
+
});
|
|
2092
2109
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
2093
2110
|
NavItemProject.Title = NavItemText;
|
|
2094
2111
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
2095
|
-
var templateObject_1$
|
|
2112
|
+
var templateObject_1$s, templateObject_2$g;
|
|
2096
2113
|
|
|
2097
2114
|
var _path$a;
|
|
2098
2115
|
|
|
@@ -2188,7 +2205,6 @@ var SvgFolderIcon = function SvgFolderIcon(props) {
|
|
|
2188
2205
|
width: 12,
|
|
2189
2206
|
height: 12,
|
|
2190
2207
|
viewBox: "0 0 12 12",
|
|
2191
|
-
fill: "#68737D",
|
|
2192
2208
|
xmlns: "http://www.w3.org/2000/svg"
|
|
2193
2209
|
}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2194
2210
|
fillRule: "evenodd",
|
|
@@ -2261,7 +2277,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2261
2277
|
})))));
|
|
2262
2278
|
};
|
|
2263
2279
|
|
|
2264
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2280
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2265
2281
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2266
2282
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2267
2283
|
});
|
|
@@ -2269,15 +2285,46 @@ var LoadingSidebar = function (props) {
|
|
|
2269
2285
|
var isExpanded = props.isExpanded;
|
|
2270
2286
|
return (jsxRuntime.jsxs(StyledNav, __assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
2271
2287
|
};
|
|
2272
|
-
var templateObject_1$
|
|
2288
|
+
var templateObject_1$r;
|
|
2289
|
+
|
|
2290
|
+
var AccordionItem = styled__default["default"](Accordion)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n opacity: 1;\n ", "\n ", "\n order: 1;\n margin-top: ", "px;\n"], ["\n opacity: 1;\n ", "\n ", "\n order: 1;\n margin-top: ", "px;\n"])), sidebarNavItemExpanded, function (props) { return !props.isExpanded && sidebarNavItemHidden; }, function (_a) {
|
|
2291
|
+
var theme = _a.theme;
|
|
2292
|
+
return theme.space.xs;
|
|
2293
|
+
});
|
|
2294
|
+
var AccordionItemHeader = styled__default["default"](Accordion.Header)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-direction: row-reverse;\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n\n > button {\n padding-left: 2px;\n }\n\n svg {\n width: 26px;\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n flex-direction: row-reverse;\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n\n > button {\n padding-left: 2px;\n }\n\n svg {\n width: 26px;\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
2295
|
+
var theme = _a.theme;
|
|
2296
|
+
return theme.space.base * 6;
|
|
2297
|
+
}, function (_a) {
|
|
2298
|
+
var theme = _a.theme;
|
|
2299
|
+
return theme.space.base * 6;
|
|
2300
|
+
}, function (props) { return props.theme.palette.kale["200"]; });
|
|
2301
|
+
var AccordionItemPanel = styled__default["default"](Accordion.Panel)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n\n &:hover {\n overflow-y: auto;\n }\n"], ["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n\n &:hover {\n overflow-y: auto;\n }\n"])));
|
|
2302
|
+
var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n padding: 12px 9px;\n ", "\n"], ["\n padding: 12px 9px;\n ", "\n"])), function (_a) {
|
|
2303
|
+
var theme = _a.theme;
|
|
2304
|
+
return "\n color: ".concat(theme.colors.primaryHue, ";\n fill: ").concat(theme.colors.primaryHue, ";\n font-weight: ").concat(theme.fontWeights.medium, ";\n ");
|
|
2305
|
+
});
|
|
2306
|
+
AccordionItem.Panel = AccordionItemPanel;
|
|
2307
|
+
AccordionItem.Header = AccordionItemHeader;
|
|
2308
|
+
AccordionItem.Label = AccordionItemLabel;
|
|
2309
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$d, templateObject_4$9;
|
|
2273
2310
|
|
|
2274
2311
|
var TokenContainer = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2275
|
-
var
|
|
2276
|
-
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
2312
|
+
var StyledNavItem = styled__default["default"](NavItem)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
2277
2313
|
var isExpanded = _a.isExpanded;
|
|
2278
2314
|
return isExpanded &&
|
|
2279
2315
|
"\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
|
|
2280
2316
|
});
|
|
2317
|
+
var SidebarLabel = styled__default["default"](SM)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n color: ", ";\n margin: ", " 0 16px;\n padding-left: 16px;\n order: 1;\n\n ", ";\n"], ["\n color: ", ";\n margin: ", " 0 16px;\n padding-left: 16px;\n order: 1;\n\n ", ";\n"])), function (_a) {
|
|
2318
|
+
var theme = _a.theme;
|
|
2319
|
+
return theme.palette.grey["500"];
|
|
2320
|
+
}, function (_a) {
|
|
2321
|
+
var theme = _a.theme;
|
|
2322
|
+
return theme.space.xxs;
|
|
2323
|
+
}, function (_a) {
|
|
2324
|
+
var isExpanded = _a.isExpanded;
|
|
2325
|
+
return !isExpanded &&
|
|
2326
|
+
"\n display: none; ";
|
|
2327
|
+
});
|
|
2281
2328
|
/**
|
|
2282
2329
|
* The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
|
|
2283
2330
|
* <br>
|
|
@@ -2302,11 +2349,11 @@ var Sidebar = function (props) {
|
|
|
2302
2349
|
: {};
|
|
2303
2350
|
return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown &&
|
|
2304
2351
|
props.workspaces &&
|
|
2305
|
-
props.workspaces.length > 1 && (jsxRuntime.
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2352
|
+
props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, __assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(AccordionItem, __assign({ className: "sidebar-project-accordion-first-item", level: 4, isExpanded: props.isExpanded }, { children: jsxRuntime.jsxs(AccordionItem.Section, { children: [jsxRuntime.jsx(AccordionItem.Header, { children: jsxRuntime.jsxs(AccordionItem.Label, { children: [props.dividerLabel || "", " ", jsxRuntime.jsx(SvgFolderIcon, { style: { marginLeft: theme.space.xs } })] }) }), jsxRuntime.jsx(AccordionItem.Panel, { children: props.projects &&
|
|
2353
|
+
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) })] }) })), jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); }, style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, __assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: {
|
|
2354
|
+
marginLeft: theme.space.xs,
|
|
2355
|
+
color: theme.palette.grey[800],
|
|
2356
|
+
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] })), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
2310
2357
|
};
|
|
2311
2358
|
var templateObject_1$p, templateObject_2$e, templateObject_3$c;
|
|
2312
2359
|
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AccordionArgs } from "../../../accordions/_types";
|
|
3
|
+
import { NavItemArgs } from "./_types";
|
|
4
|
+
declare const AccordionItem: import("styled-components").StyledComponent<{
|
|
5
|
+
(props: AccordionArgs): JSX.Element;
|
|
6
|
+
Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
|
+
Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
|
+
Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
|
|
10
|
+
}, any, AccordionArgs & NavItemArgs, never>;
|
|
11
|
+
export { AccordionItem };
|
|
@@ -18,6 +18,8 @@ export interface SidebarArgs extends NavArgs, WorkspaceDropdownArgs {
|
|
|
18
18
|
tokens?: string;
|
|
19
19
|
tokensLabel?: string;
|
|
20
20
|
isExpanded?: boolean;
|
|
21
|
+
activityLabel?: string;
|
|
22
|
+
walletLabel?: string;
|
|
21
23
|
onToggleMenu?: () => void;
|
|
22
24
|
onNavToggle?: (route: string, parameter?: string) => void;
|
|
23
25
|
isLoading?: boolean;
|
|
@@ -2,3 +2,6 @@ import { IGardenTheme } from "@zendeskgarden/react-theming";
|
|
|
2
2
|
export declare const hex2rgba: (hex: string, alpha?: number) => string;
|
|
3
3
|
export declare const boxShadow: (theme: IGardenTheme) => string;
|
|
4
4
|
export declare const isMac: () => boolean | "" | undefined;
|
|
5
|
+
export declare const opacityTransition: import("styled-components").FlattenSimpleInterpolation;
|
|
6
|
+
export declare const sidebarNavItemExpanded: import("styled-components").FlattenSimpleInterpolation;
|
|
7
|
+
export declare const sidebarNavItemHidden: import("styled-components").FlattenSimpleInterpolation;
|