@appquality/unguess-design-system 2.10.50 → 2.10.53
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 +14 -0
- package/build/index.js +160 -140
- package/build/stories/navigation/page-header/_types.d.ts +10 -0
- package/build/stories/navigation/page-header/index.d.ts +17 -0
- package/build/stories/navigation/page-header/index.stories.d.ts +19 -0
- package/build/stories/navigation/page-header/styled/main.d.ts +2 -0
- package/build/stories/theme/components.d.ts +3 -0
- package/build/stories/theme/index.d.ts +3 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,21 @@
|
|
|
1
|
+
# v2.10.53 (Mon Jun 20 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Cup 823 page header [#72](https://github.com/AppQuality/unguess-design-system/pull/72) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v2.10.49 (Mon Jun 20 2022)
|
|
2
15
|
|
|
3
16
|
#### 🐛 Bug Fix
|
|
4
17
|
|
|
18
|
+
- Cup 634 mobile [#71](https://github.com/AppQuality/unguess-design-system/pull/71) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
|
|
5
19
|
- Cup 634 mobile view [#68](https://github.com/AppQuality/unguess-design-system/pull/68) ([@marcbon](https://github.com/marcbon))
|
|
6
20
|
|
|
7
21
|
#### ⚠️ Pushed to `master`
|
package/build/index.js
CHANGED
|
@@ -239,12 +239,14 @@ var gradients = {
|
|
|
239
239
|
};
|
|
240
240
|
|
|
241
241
|
var _a, _b, _c, _d, _e, _f, _g$3, _h;
|
|
242
|
-
var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) })
|
|
242
|
+
var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
|
|
243
|
+
imgMaxHeight: "214px",
|
|
244
|
+
} });
|
|
243
245
|
|
|
244
246
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400], 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 }) });
|
|
245
247
|
|
|
246
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
247
|
-
var templateObject_1$
|
|
248
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$17 || (templateObject_1$17 = __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);
|
|
249
|
+
var templateObject_1$17;
|
|
248
250
|
|
|
249
251
|
/**
|
|
250
252
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -259,7 +261,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
259
261
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
260
262
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
261
263
|
|
|
262
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
264
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
263
265
|
var theme = _a.theme;
|
|
264
266
|
return theme.palette.grey[700];
|
|
265
267
|
}, function (_a) {
|
|
@@ -280,9 +282,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
280
282
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
281
283
|
Alert.Title = UgAlertTitle;
|
|
282
284
|
Alert.Close = reactNotifications.Close;
|
|
283
|
-
var templateObject_1$
|
|
285
|
+
var templateObject_1$16, templateObject_2$q;
|
|
284
286
|
|
|
285
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
287
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
286
288
|
return props.avatarType &&
|
|
287
289
|
props.avatarType !== "image" &&
|
|
288
290
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -306,7 +308,7 @@ var Avatar = function (props) {
|
|
|
306
308
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
307
309
|
};
|
|
308
310
|
Avatar.Text = UgAvatar.Text;
|
|
309
|
-
var templateObject_1$
|
|
311
|
+
var templateObject_1$15;
|
|
310
312
|
|
|
311
313
|
/**
|
|
312
314
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -337,7 +339,7 @@ var getThemeStyle = function (props) {
|
|
|
337
339
|
}
|
|
338
340
|
return theme;
|
|
339
341
|
};
|
|
340
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
342
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""])));
|
|
341
343
|
/**
|
|
342
344
|
* Buttons let users take action quickly.
|
|
343
345
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -355,7 +357,7 @@ var Button = function (props) {
|
|
|
355
357
|
};
|
|
356
358
|
Button.StartIcon = UgButton.StartIcon;
|
|
357
359
|
Button.EndIcon = UgButton.EndIcon;
|
|
358
|
-
var templateObject_1$
|
|
360
|
+
var templateObject_1$14;
|
|
359
361
|
|
|
360
362
|
/**
|
|
361
363
|
A Button group lets users make a selection from a set of options.
|
|
@@ -385,7 +387,7 @@ Used for this:
|
|
|
385
387
|
**/
|
|
386
388
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
387
389
|
|
|
388
|
-
var
|
|
390
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
389
391
|
var theme = _a.theme;
|
|
390
392
|
return theme.borderRadii.lg;
|
|
391
393
|
}, function (_a) {
|
|
@@ -405,8 +407,8 @@ var UgContentCard$1 = styled__default["default"](reactNotifications.Well)(templa
|
|
|
405
407
|
* Used for this:
|
|
406
408
|
- To group related content
|
|
407
409
|
*/
|
|
408
|
-
var Card = function (props) { return jsxRuntime.jsx(
|
|
409
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
410
|
+
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
411
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
410
412
|
var theme = _a.theme;
|
|
411
413
|
return theme.borderRadii.xl;
|
|
412
414
|
}, function (_a) {
|
|
@@ -415,9 +417,15 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
415
417
|
}, function (_a) {
|
|
416
418
|
var theme = _a.theme;
|
|
417
419
|
return theme.palette.grey["200"];
|
|
420
|
+
}, function (_a) {
|
|
421
|
+
var theme = _a.theme;
|
|
422
|
+
return theme.breakpoints.sm;
|
|
423
|
+
}, function (_a) {
|
|
424
|
+
var theme = _a.theme;
|
|
425
|
+
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
418
426
|
});
|
|
419
427
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
420
|
-
var templateObject_1$
|
|
428
|
+
var templateObject_1$13, templateObject_2$p;
|
|
421
429
|
|
|
422
430
|
/**
|
|
423
431
|
* Tags let users categorize content using a keyword.
|
|
@@ -632,7 +640,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
632
640
|
})));
|
|
633
641
|
};
|
|
634
642
|
|
|
635
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
643
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
636
644
|
return props.isLight ?
|
|
637
645
|
"\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 ");
|
|
638
646
|
});
|
|
@@ -650,22 +658,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
650
658
|
- To communicate a typing status, use Inline instead
|
|
651
659
|
*/
|
|
652
660
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
653
|
-
var templateObject_1$
|
|
661
|
+
var templateObject_1$12;
|
|
654
662
|
|
|
655
|
-
var CardMeta = styled__default["default"].div(templateObject_1
|
|
663
|
+
var CardMeta = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
656
664
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
657
665
|
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 ");
|
|
658
666
|
});
|
|
659
|
-
var templateObject_1
|
|
667
|
+
var templateObject_1$11;
|
|
660
668
|
|
|
661
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
669
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
662
670
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
663
671
|
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 ");
|
|
664
672
|
});
|
|
665
673
|
CardThumbnail.defaultProps = {
|
|
666
674
|
align: "left"
|
|
667
675
|
};
|
|
668
|
-
var templateObject_1$
|
|
676
|
+
var templateObject_1$10;
|
|
669
677
|
|
|
670
678
|
/**
|
|
671
679
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -677,7 +685,7 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
677
685
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
678
686
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
679
687
|
|
|
680
|
-
var Label$1 = styled__default["default"](SM)(templateObject_1
|
|
688
|
+
var Label$1 = styled__default["default"](SM)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
681
689
|
var theme = _a.theme;
|
|
682
690
|
return theme.palette.grey[500];
|
|
683
691
|
});
|
|
@@ -706,9 +714,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign(
|
|
|
706
714
|
CardHeader.Label = Label$1;
|
|
707
715
|
CardHeader.Title = Title$1;
|
|
708
716
|
CardHeader.Text = Description$1;
|
|
709
|
-
var templateObject_1
|
|
717
|
+
var templateObject_1$$, templateObject_2$o, templateObject_3$g, templateObject_4$a;
|
|
710
718
|
|
|
711
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
719
|
+
var Divider = styled__default["default"].div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
712
720
|
var theme = _a.theme;
|
|
713
721
|
return theme.space.base * 3;
|
|
714
722
|
}, function (_a) {
|
|
@@ -724,9 +732,9 @@ var Container = styled__default["default"].div(templateObject_3$f || (templateOb
|
|
|
724
732
|
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 ");
|
|
725
733
|
});
|
|
726
734
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
727
|
-
var templateObject_1$
|
|
735
|
+
var templateObject_1$_, templateObject_2$n, templateObject_3$f;
|
|
728
736
|
|
|
729
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
737
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
730
738
|
var theme = _a.theme;
|
|
731
739
|
return theme.borderRadii.lg;
|
|
732
740
|
}, function (_a) {
|
|
@@ -752,7 +760,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
752
760
|
SpecialCard.Thumb = CardThumbnail;
|
|
753
761
|
SpecialCard.Header = CardHeader;
|
|
754
762
|
SpecialCard.Footer = CardFooter;
|
|
755
|
-
var templateObject_1$
|
|
763
|
+
var templateObject_1$Z;
|
|
756
764
|
|
|
757
765
|
var CampaignCardSkeleton = function () {
|
|
758
766
|
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%" } })] })] }));
|
|
@@ -785,7 +793,7 @@ var getTypeDataIcon = function (type) {
|
|
|
785
793
|
return SvgCampaignFunctional;
|
|
786
794
|
}
|
|
787
795
|
};
|
|
788
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
796
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
789
797
|
var theme = _a.theme;
|
|
790
798
|
return theme.palette.grey["700"];
|
|
791
799
|
});
|
|
@@ -812,9 +820,9 @@ var CampaignCard = function (_a) {
|
|
|
812
820
|
var PillIcon = getTypeDataIcon(type);
|
|
813
821
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
814
822
|
};
|
|
815
|
-
var templateObject_1$
|
|
823
|
+
var templateObject_1$Y, templateObject_2$m, templateObject_3$e;
|
|
816
824
|
|
|
817
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
825
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$X || (templateObject_1$X = __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) {
|
|
818
826
|
var theme = _a.theme;
|
|
819
827
|
return theme.space.base * 6;
|
|
820
828
|
}, function (_a) {
|
|
@@ -831,9 +839,9 @@ var ProductCard = function (props) {
|
|
|
831
839
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
832
840
|
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 })) }))] })));
|
|
833
841
|
};
|
|
834
|
-
var templateObject_1$
|
|
842
|
+
var templateObject_1$X;
|
|
835
843
|
|
|
836
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
844
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
837
845
|
var theme = _a.theme;
|
|
838
846
|
return theme.palette.grey[500];
|
|
839
847
|
}, function (_a) {
|
|
@@ -858,7 +866,7 @@ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$d || (templat
|
|
|
858
866
|
return theme.space.xs;
|
|
859
867
|
});
|
|
860
868
|
var CardContent = styled__default["default"].div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
861
|
-
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$
|
|
869
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$4 || (templateObject_5$4 = __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) {
|
|
862
870
|
var theme = _a.theme;
|
|
863
871
|
return theme.space.base;
|
|
864
872
|
}, function (_a) {
|
|
@@ -876,24 +884,24 @@ var HoverBody = styled__default["default"].div(templateObject_6$1 || (templateOb
|
|
|
876
884
|
return theme.palette.white;
|
|
877
885
|
});
|
|
878
886
|
var HoverMetaContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
879
|
-
var StyledCard = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
887
|
+
var StyledCard$1 = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
880
888
|
var isHoverable = _a.isHoverable;
|
|
881
889
|
return isHoverable &&
|
|
882
890
|
"\n &:hover {\n ".concat(HoverBody, " {\n top: 0;\n transition: all 0.3s ease-in-out;\n }\n\n ").concat(CardContent, " {\n opacity: 0;\n transition: all 0.3s ease-in-out;\n }\n }\n ");
|
|
883
891
|
});
|
|
884
892
|
var ServiceCard = function (props) {
|
|
885
893
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
886
|
-
return (jsxRuntime.jsxs(StyledCard, __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)); }) })))] })] })));
|
|
894
|
+
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)); }) })))] })] })));
|
|
887
895
|
};
|
|
888
|
-
var templateObject_1$
|
|
896
|
+
var templateObject_1$W, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
|
|
889
897
|
|
|
890
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
898
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
891
899
|
var InfoCard = function (props) {
|
|
892
900
|
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; }) }) })))] })));
|
|
893
901
|
};
|
|
894
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$V;
|
|
895
903
|
|
|
896
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
904
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$U || (templateObject_1$U = __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) {
|
|
897
905
|
var theme = _a.theme;
|
|
898
906
|
return theme.space.xl;
|
|
899
907
|
}, function (_a) {
|
|
@@ -904,7 +912,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
904
912
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
905
913
|
*/
|
|
906
914
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
907
|
-
var templateObject_1$
|
|
915
|
+
var templateObject_1$U;
|
|
908
916
|
|
|
909
917
|
/**
|
|
910
918
|
* Use Span to style and format inline text elements.
|
|
@@ -944,7 +952,7 @@ function useWindowSize() {
|
|
|
944
952
|
return size;
|
|
945
953
|
}
|
|
946
954
|
|
|
947
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
955
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
948
956
|
var StyledTag = styled__default["default"](Tag)(templateObject_2$k || (templateObject_2$k = __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) {
|
|
949
957
|
var status = _a.status, theme = _a.theme;
|
|
950
958
|
switch (status) {
|
|
@@ -979,9 +987,9 @@ var Counter = function (props) {
|
|
|
979
987
|
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() })] })));
|
|
980
988
|
};
|
|
981
989
|
Counter.Avatar = StyledTag.Avatar;
|
|
982
|
-
var templateObject_1$
|
|
990
|
+
var templateObject_1$T, templateObject_2$k;
|
|
983
991
|
|
|
984
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
992
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
985
993
|
var theme = _a.theme;
|
|
986
994
|
return theme.breakpoints.sm;
|
|
987
995
|
});
|
|
@@ -998,22 +1006,22 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
998
1006
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
999
1007
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1000
1008
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1001
|
-
var templateObject_1$
|
|
1009
|
+
var templateObject_1$S;
|
|
1002
1010
|
|
|
1003
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1004
|
-
var templateObject_1$
|
|
1011
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1012
|
+
var templateObject_1$R;
|
|
1005
1013
|
|
|
1006
1014
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1007
1015
|
__proto__: null,
|
|
1008
1016
|
Field: Field$1
|
|
1009
1017
|
});
|
|
1010
1018
|
|
|
1011
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1019
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"], ["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
1012
1020
|
var theme = _a.theme;
|
|
1013
1021
|
return theme.palette.blue[100];
|
|
1014
1022
|
});
|
|
1015
1023
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1016
|
-
var templateObject_1$
|
|
1024
|
+
var templateObject_1$Q;
|
|
1017
1025
|
|
|
1018
1026
|
/**
|
|
1019
1027
|
* A Menu is a wrapper for items elements
|
|
@@ -1037,7 +1045,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1037
1045
|
*/
|
|
1038
1046
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1039
1047
|
|
|
1040
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1048
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1041
1049
|
return props.isPrimary &&
|
|
1042
1050
|
"\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 ");
|
|
1043
1051
|
});
|
|
@@ -1054,7 +1062,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1054
1062
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1055
1063
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1056
1064
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1057
|
-
var templateObject_1$
|
|
1065
|
+
var templateObject_1$P;
|
|
1058
1066
|
|
|
1059
1067
|
/**
|
|
1060
1068
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1069,7 +1077,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1069
1077
|
|
|
1070
1078
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1071
1079
|
|
|
1072
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1080
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1073
1081
|
/**
|
|
1074
1082
|
* A Checkbox lets users select and unselect options from a list.
|
|
1075
1083
|
* <hr>
|
|
@@ -1081,17 +1089,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1081
1089
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1082
1090
|
**/
|
|
1083
1091
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1084
|
-
var templateObject_1$
|
|
1092
|
+
var templateObject_1$O;
|
|
1085
1093
|
|
|
1086
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1094
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1087
1095
|
/**
|
|
1088
1096
|
* A Label is used to specify a title for an input.
|
|
1089
1097
|
* <hr>
|
|
1090
1098
|
**/
|
|
1091
1099
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1092
|
-
var templateObject_1$
|
|
1100
|
+
var templateObject_1$N;
|
|
1093
1101
|
|
|
1094
|
-
var flexCenter = styled.css(templateObject_1$
|
|
1102
|
+
var flexCenter = styled.css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1095
1103
|
var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1096
1104
|
var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
1097
1105
|
var theme = _a.theme;
|
|
@@ -1110,9 +1118,9 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
1110
1118
|
var theme = _a.theme;
|
|
1111
1119
|
return theme.shadows.boxShadow(theme);
|
|
1112
1120
|
});
|
|
1113
|
-
var templateObject_1$
|
|
1121
|
+
var templateObject_1$M, templateObject_2$j, templateObject_3$c, templateObject_4$8;
|
|
1114
1122
|
|
|
1115
|
-
styled__default["default"](Card)(templateObject_1$
|
|
1123
|
+
styled__default["default"](Card)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"], ["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"])), cardStyle, function (_a) {
|
|
1116
1124
|
var theme = _a.theme;
|
|
1117
1125
|
return theme.palette.blue[300];
|
|
1118
1126
|
});
|
|
@@ -1140,14 +1148,14 @@ var CheckboxCard = function (props) {
|
|
|
1140
1148
|
};
|
|
1141
1149
|
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, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1142
1150
|
};
|
|
1143
|
-
var templateObject_1$
|
|
1151
|
+
var templateObject_1$L, templateObject_2$i, templateObject_3$b, templateObject_4$7;
|
|
1144
1152
|
|
|
1145
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1153
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1146
1154
|
/**
|
|
1147
1155
|
* A Field is a wrapper for input elements
|
|
1148
1156
|
**/
|
|
1149
1157
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1150
|
-
var templateObject_1$
|
|
1158
|
+
var templateObject_1$K;
|
|
1151
1159
|
|
|
1152
1160
|
var index = /*#__PURE__*/Object.freeze({
|
|
1153
1161
|
__proto__: null,
|
|
@@ -1155,7 +1163,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1155
1163
|
Hint: reactForms.Hint
|
|
1156
1164
|
});
|
|
1157
1165
|
|
|
1158
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1166
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1159
1167
|
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject([""], [""])));
|
|
1160
1168
|
/**
|
|
1161
1169
|
* An Input lets users enter text into a field.
|
|
@@ -1165,9 +1173,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (te
|
|
|
1165
1173
|
* - To enter multiline text, use a Textarea
|
|
1166
1174
|
**/
|
|
1167
1175
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1168
|
-
var templateObject_1$
|
|
1176
|
+
var templateObject_1$J, templateObject_2$h;
|
|
1169
1177
|
|
|
1170
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1178
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1171
1179
|
/**
|
|
1172
1180
|
* Media elements add even more context to an input.
|
|
1173
1181
|
* <hr>
|
|
@@ -1176,9 +1184,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1176
1184
|
* - To enter multiline text, use a Textarea
|
|
1177
1185
|
**/
|
|
1178
1186
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1179
|
-
var templateObject_1$
|
|
1187
|
+
var templateObject_1$I;
|
|
1180
1188
|
|
|
1181
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1189
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1182
1190
|
/**
|
|
1183
1191
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1184
1192
|
* <hr>
|
|
@@ -1190,7 +1198,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$F ||
|
|
|
1190
1198
|
* - To select from a long list of options, use Select instead
|
|
1191
1199
|
**/
|
|
1192
1200
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1193
|
-
var templateObject_1$
|
|
1201
|
+
var templateObject_1$H;
|
|
1194
1202
|
|
|
1195
1203
|
var _path$i;
|
|
1196
1204
|
|
|
@@ -1210,7 +1218,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1210
1218
|
})));
|
|
1211
1219
|
};
|
|
1212
1220
|
|
|
1213
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1221
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$G || (templateObject_1$G = __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) {
|
|
1214
1222
|
var theme = _a.theme;
|
|
1215
1223
|
return theme.space.base;
|
|
1216
1224
|
}, function (_a) {
|
|
@@ -1244,9 +1252,9 @@ var RadioCard = function (_a) {
|
|
|
1244
1252
|
props.onChecked && props.onChecked(props.value);
|
|
1245
1253
|
} }, { 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 })) }))] })));
|
|
1246
1254
|
};
|
|
1247
|
-
var templateObject_1$
|
|
1255
|
+
var templateObject_1$G, templateObject_2$g;
|
|
1248
1256
|
|
|
1249
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1257
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1250
1258
|
/**
|
|
1251
1259
|
* A Textarea is a form control for multi-line text.
|
|
1252
1260
|
* <hr>
|
|
@@ -1254,9 +1262,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1254
1262
|
* - To enter multi-line text
|
|
1255
1263
|
**/
|
|
1256
1264
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1257
|
-
var templateObject_1$
|
|
1265
|
+
var templateObject_1$F;
|
|
1258
1266
|
|
|
1259
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1267
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1260
1268
|
/**
|
|
1261
1269
|
* 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.
|
|
1262
1270
|
* <hr>
|
|
@@ -1267,9 +1275,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$C
|
|
|
1267
1275
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1268
1276
|
**/
|
|
1269
1277
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1270
|
-
var templateObject_1$
|
|
1278
|
+
var templateObject_1$E;
|
|
1271
1279
|
|
|
1272
|
-
var Col =
|
|
1280
|
+
var StyledCol = styled__default["default"](reactGrid.Col)(templateObject_1$D || (templateObject_1$D = __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);
|
|
1281
|
+
var Col = function (props) { return jsxRuntime.jsx(StyledCol, __assign({}, props)); };
|
|
1282
|
+
var templateObject_1$D;
|
|
1273
1283
|
|
|
1274
1284
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1275
1285
|
|
|
@@ -1332,15 +1342,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1332
1342
|
})));
|
|
1333
1343
|
};
|
|
1334
1344
|
|
|
1335
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1345
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1336
1346
|
var Icon = function (props) {
|
|
1337
1347
|
var type = props.type, size = props.size;
|
|
1338
1348
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1339
1349
|
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 })] }));
|
|
1340
1350
|
};
|
|
1341
|
-
var templateObject_1$
|
|
1351
|
+
var templateObject_1$C;
|
|
1342
1352
|
|
|
1343
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1353
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
|
|
1344
1354
|
/**
|
|
1345
1355
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1346
1356
|
* <hr>
|
|
@@ -1352,9 +1362,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1352
1362
|
- When loading page content, use a Skeleton loader instead
|
|
1353
1363
|
*/
|
|
1354
1364
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1355
|
-
var templateObject_1$
|
|
1365
|
+
var templateObject_1$B;
|
|
1356
1366
|
|
|
1357
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1367
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
|
|
1358
1368
|
/**
|
|
1359
1369
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1360
1370
|
* <hr>
|
|
@@ -1363,9 +1373,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1363
1373
|
- To provide a quick way to navigate to ancestor pages
|
|
1364
1374
|
*/
|
|
1365
1375
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1366
|
-
var templateObject_1$
|
|
1376
|
+
var templateObject_1$A;
|
|
1367
1377
|
|
|
1368
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1378
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1369
1379
|
var theme = _a.theme;
|
|
1370
1380
|
return theme.palette.white;
|
|
1371
1381
|
});
|
|
@@ -1373,7 +1383,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$y ||
|
|
|
1373
1383
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1374
1384
|
*/
|
|
1375
1385
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1376
|
-
var templateObject_1$
|
|
1386
|
+
var templateObject_1$z;
|
|
1377
1387
|
|
|
1378
1388
|
/**
|
|
1379
1389
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1397,7 +1407,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1397
1407
|
})));
|
|
1398
1408
|
};
|
|
1399
1409
|
|
|
1400
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1410
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1401
1411
|
var theme = _a.theme;
|
|
1402
1412
|
return theme.fonts.system;
|
|
1403
1413
|
});
|
|
@@ -1406,14 +1416,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$f ||
|
|
|
1406
1416
|
return theme.fonts.system;
|
|
1407
1417
|
});
|
|
1408
1418
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1409
|
-
var templateObject_1$
|
|
1419
|
+
var templateObject_1$y, templateObject_2$f;
|
|
1410
1420
|
|
|
1411
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1421
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1412
1422
|
var theme = _a.theme;
|
|
1413
1423
|
return theme.fonts.system;
|
|
1414
1424
|
});
|
|
1415
1425
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1416
|
-
var templateObject_1$
|
|
1426
|
+
var templateObject_1$x;
|
|
1417
1427
|
|
|
1418
1428
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1419
1429
|
|
|
@@ -1462,7 +1472,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1462
1472
|
})));
|
|
1463
1473
|
};
|
|
1464
1474
|
|
|
1465
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1475
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1466
1476
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1467
1477
|
return isCompact &&
|
|
1468
1478
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1478,11 +1488,11 @@ var WorkspacesDropdown = function (props) {
|
|
|
1478
1488
|
? selectedWorkspace.company + "'s workspace"
|
|
1479
1489
|
: "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 }))); })] })] })));
|
|
1480
1490
|
};
|
|
1481
|
-
var templateObject_1$
|
|
1491
|
+
var templateObject_1$w;
|
|
1482
1492
|
|
|
1483
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1493
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$v || (templateObject_1$v = __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) {
|
|
1484
1494
|
var theme = _a.theme;
|
|
1485
|
-
return theme.breakpoints.
|
|
1495
|
+
return theme.breakpoints.md;
|
|
1486
1496
|
});
|
|
1487
1497
|
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$e || (templateObject_2$e = __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) {
|
|
1488
1498
|
var theme = _a.theme;
|
|
@@ -1492,7 +1502,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1492
1502
|
return theme.fonts.system;
|
|
1493
1503
|
}, function (_a) {
|
|
1494
1504
|
var theme = _a.theme;
|
|
1495
|
-
return theme.breakpoints.
|
|
1505
|
+
return theme.breakpoints.md;
|
|
1496
1506
|
});
|
|
1497
1507
|
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$a || (templateObject_3$a = __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) {
|
|
1498
1508
|
var theme = _a.theme;
|
|
@@ -1502,21 +1512,21 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1502
1512
|
return theme.fonts.system;
|
|
1503
1513
|
}, function (_a) {
|
|
1504
1514
|
var theme = _a.theme;
|
|
1505
|
-
return theme.breakpoints.
|
|
1515
|
+
return theme.breakpoints.md;
|
|
1506
1516
|
});
|
|
1507
1517
|
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
1508
1518
|
var theme = _a.theme;
|
|
1509
1519
|
return theme.palette.blue["600"];
|
|
1510
1520
|
}, function (_a) {
|
|
1511
1521
|
var theme = _a.theme;
|
|
1512
|
-
return theme.breakpoints.
|
|
1522
|
+
return theme.breakpoints.md;
|
|
1513
1523
|
});
|
|
1514
1524
|
var BrandItem = function (props) {
|
|
1515
1525
|
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 }) }))) }))] }));
|
|
1516
1526
|
};
|
|
1517
|
-
var templateObject_1$
|
|
1527
|
+
var templateObject_1$v, templateObject_2$e, templateObject_3$a, templateObject_4$6;
|
|
1518
1528
|
|
|
1519
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1529
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1520
1530
|
/**
|
|
1521
1531
|
* An Header is a visual way to display general information.
|
|
1522
1532
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1525,13 +1535,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1525
1535
|
Header.HeaderItem = HeaderItem;
|
|
1526
1536
|
Header.HeaderItemText = HeaderItemText;
|
|
1527
1537
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1528
|
-
var templateObject_1$
|
|
1538
|
+
var templateObject_1$u;
|
|
1529
1539
|
|
|
1530
1540
|
var HeaderSkeleton = function () {
|
|
1531
1541
|
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%" } }) }) }) }))] })));
|
|
1532
1542
|
};
|
|
1533
1543
|
|
|
1534
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1544
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1535
1545
|
var theme = _a.theme;
|
|
1536
1546
|
return theme.breakpoints.sm;
|
|
1537
1547
|
});
|
|
@@ -1543,9 +1553,9 @@ var AppHeader = function (_a) {
|
|
|
1543
1553
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1544
1554
|
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, {}) }))] }) }) }))] })));
|
|
1545
1555
|
};
|
|
1546
|
-
var templateObject_1$
|
|
1556
|
+
var templateObject_1$t;
|
|
1547
1557
|
|
|
1548
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1558
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\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 ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
|
|
1549
1559
|
var theme = _a.theme;
|
|
1550
1560
|
return theme.borders.sm;
|
|
1551
1561
|
}, function (_a) {
|
|
@@ -1572,9 +1582,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$r || (t
|
|
|
1572
1582
|
- To give a consistent dashboard and navigation experience
|
|
1573
1583
|
*/
|
|
1574
1584
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1575
|
-
var templateObject_1$
|
|
1585
|
+
var templateObject_1$s;
|
|
1576
1586
|
|
|
1577
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1587
|
+
var SelectedItemStyle = styled.css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1578
1588
|
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
1579
1589
|
var theme = _a.theme;
|
|
1580
1590
|
return theme.fonts.system;
|
|
@@ -1586,11 +1596,11 @@ var NavItem = function (props) {
|
|
|
1586
1596
|
// const { isExpanded } = props;
|
|
1587
1597
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1588
1598
|
};
|
|
1589
|
-
var templateObject_1$
|
|
1599
|
+
var templateObject_1$r, templateObject_2$d;
|
|
1590
1600
|
|
|
1591
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1601
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
|
|
1592
1602
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1593
|
-
var templateObject_1$
|
|
1603
|
+
var templateObject_1$q;
|
|
1594
1604
|
|
|
1595
1605
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1596
1606
|
|
|
@@ -1628,7 +1638,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1628
1638
|
})));
|
|
1629
1639
|
};
|
|
1630
1640
|
|
|
1631
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1641
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$p || (templateObject_1$p = __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) {
|
|
1632
1642
|
var theme = _a.theme;
|
|
1633
1643
|
return theme.space.base * 6;
|
|
1634
1644
|
}, function (_a) {
|
|
@@ -1653,18 +1663,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$o ||
|
|
|
1653
1663
|
var NavToggle = function (props) {
|
|
1654
1664
|
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%" } })) })));
|
|
1655
1665
|
};
|
|
1656
|
-
var templateObject_1$
|
|
1666
|
+
var templateObject_1$p;
|
|
1657
1667
|
|
|
1658
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1668
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n min-height: ", ";\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: ", ";\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.lg; }, 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;"; });
|
|
1659
1669
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1660
|
-
var templateObject_1$
|
|
1670
|
+
var templateObject_1$o;
|
|
1661
1671
|
|
|
1662
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1672
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$n || (templateObject_1$n = __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; });
|
|
1663
1673
|
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
1664
1674
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1665
1675
|
NavItemProject.Title = NavItemText;
|
|
1666
1676
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1667
|
-
var templateObject_1$
|
|
1677
|
+
var templateObject_1$n, templateObject_2$c;
|
|
1668
1678
|
|
|
1669
1679
|
var _path$a;
|
|
1670
1680
|
|
|
@@ -1833,7 +1843,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
1833
1843
|
})))));
|
|
1834
1844
|
};
|
|
1835
1845
|
|
|
1836
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
1846
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
1837
1847
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
1838
1848
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
1839
1849
|
});
|
|
@@ -1841,11 +1851,11 @@ var LoadingSidebar = function (props) {
|
|
|
1841
1851
|
var isExpanded = props.isExpanded;
|
|
1842
1852
|
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" })] }))] })));
|
|
1843
1853
|
};
|
|
1844
|
-
var templateObject_1$
|
|
1854
|
+
var templateObject_1$m;
|
|
1845
1855
|
|
|
1846
1856
|
var FEATURE_FLAG_CATALOG = 'catalog-pages';
|
|
1847
1857
|
|
|
1848
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1858
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
1849
1859
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
|
|
1850
1860
|
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$9 || (templateObject_3$9 = __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) {
|
|
1851
1861
|
var isExpanded = _a.isExpanded;
|
|
@@ -1884,9 +1894,9 @@ var Sidebar = function (props) {
|
|
|
1884
1894
|
features.find(function (feature) { return feature.slug === FEATURE_FLAG_CATALOG; }) && (jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? (jsxRuntime.jsx(SvgTemplatesActive, {})) : (jsxRuntime.jsx(SvgTemplates, {})) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] }))), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
1885
1895
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ 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.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" })] }))] })));
|
|
1886
1896
|
};
|
|
1887
|
-
var templateObject_1$
|
|
1897
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$9;
|
|
1888
1898
|
|
|
1889
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
1899
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
|
|
1890
1900
|
var theme = _a.theme;
|
|
1891
1901
|
return theme.breakpoints.sm;
|
|
1892
1902
|
}, function (_a) {
|
|
@@ -1897,46 +1907,52 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$j ||
|
|
|
1897
1907
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1898
1908
|
*/
|
|
1899
1909
|
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1900
|
-
var templateObject_1$
|
|
1910
|
+
var templateObject_1$k;
|
|
1901
1911
|
|
|
1902
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
1912
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
|
|
1903
1913
|
var PageLoader = function () {
|
|
1904
1914
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
1905
1915
|
return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
|
|
1906
1916
|
};
|
|
1907
|
-
var templateObject_1$
|
|
1917
|
+
var templateObject_1$j;
|
|
1908
1918
|
|
|
1909
1919
|
/**
|
|
1910
1920
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1911
1921
|
*/
|
|
1912
1922
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1913
1923
|
|
|
1924
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"], ["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"])), theme.breakpoints.sm);
|
|
1914
1925
|
/**
|
|
1915
1926
|
* Login Form
|
|
1916
1927
|
* <hr>
|
|
1917
1928
|
* Used for this:
|
|
1918
1929
|
- Login user to the application
|
|
1919
1930
|
*/
|
|
1920
|
-
var LoginForm = function (props) {
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1931
|
+
var LoginForm = function (props) {
|
|
1932
|
+
var width = useWindowSize().width;
|
|
1933
|
+
var breakpointMd = parseInt(theme.breakpoints.md, 10);
|
|
1934
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, __assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
|
|
1935
|
+
textAlign: "center",
|
|
1936
|
+
marginTop: theme.space.sm,
|
|
1937
|
+
marginBottom: theme.space.lg,
|
|
1938
|
+
} }, { children: jsxRuntime.jsx(XL, __assign({ style: { color: theme.palette.blue[600] } }, { children: props.title })) })), jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
|
|
1939
|
+
var values = _a.values, status = _a.status, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
|
|
1940
|
+
return (jsxRuntime.jsxs(formik.Form, __assign({ onSubmit: handleSubmit }, { children: [jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, (errors && errors.email
|
|
1941
|
+
? { validation: "error" }
|
|
1942
|
+
: touched.email
|
|
1943
|
+
? { validation: "success" }
|
|
1944
|
+
: ""))), errors.email ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ("")] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, (errors && errors.password
|
|
1945
|
+
? { validation: "error" }
|
|
1946
|
+
: touched.password
|
|
1947
|
+
? { validation: "success" }
|
|
1948
|
+
: ""))), errors.password && (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))), props.passwordForgotLink && (jsxRuntime.jsx(reactForms.Hint, __assign({ style: { textAlign: "right" } }, { children: jsxRuntime.jsx(Anchor, __assign({ href: props.passwordForgotLink, style: { color: theme.palette.grey[500] } }, { children: props.passwordForgotLabel || "Forgot Password?" })) })))] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length
|
|
1937
1949
|
? true
|
|
1938
|
-
:
|
|
1939
|
-
|
|
1950
|
+
: isSubmitting
|
|
1951
|
+
? true
|
|
1952
|
+
: false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
|
|
1953
|
+
} }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] }));
|
|
1954
|
+
};
|
|
1955
|
+
var templateObject_1$i;
|
|
1940
1956
|
|
|
1941
1957
|
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1942
1958
|
var theme = _a.theme;
|
|
@@ -1968,14 +1984,14 @@ var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$5 |
|
|
|
1968
1984
|
var theme = _a.theme;
|
|
1969
1985
|
return theme.space.base * 6;
|
|
1970
1986
|
});
|
|
1971
|
-
var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$
|
|
1987
|
+
var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: relative;\n top: unset;\n right: unset;\n"], ["\n position: relative;\n top: unset;\n right: unset;\n"])));
|
|
1972
1988
|
var ModalFullScreen = function (props) { return jsxRuntime.jsx(StyledModal$1, __assign({}, props)); };
|
|
1973
1989
|
ModalFullScreen.Header = StyledHeader;
|
|
1974
1990
|
ModalFullScreen.Body = StyledBody$4;
|
|
1975
1991
|
ModalFullScreen.Footer = StyledFooter;
|
|
1976
1992
|
ModalFullScreen.Close = StyledModalClose;
|
|
1977
1993
|
ModalFullScreen.FooterItem = FooterItem;
|
|
1978
|
-
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5, templateObject_5$
|
|
1994
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5, templateObject_5$3;
|
|
1979
1995
|
|
|
1980
1996
|
/**
|
|
1981
1997
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2159,7 +2175,7 @@ var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$3 |
|
|
|
2159
2175
|
var theme = _a.theme;
|
|
2160
2176
|
return theme.space.base * 4;
|
|
2161
2177
|
});
|
|
2162
|
-
var Footer = styled__default["default"].div(templateObject_5$
|
|
2178
|
+
var Footer = styled__default["default"].div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
|
|
2163
2179
|
var Description = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"], ["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"])), flexCenter, theme.fontWeights.regular, theme.fontSizes.sm, theme.palette.grey["600"]);
|
|
2164
2180
|
var HelpItem = function (props) {
|
|
2165
2181
|
var _a, _b, _c;
|
|
@@ -2175,7 +2191,7 @@ var HelpItem = function (props) {
|
|
|
2175
2191
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
2176
2192
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
|
|
2177
2193
|
};
|
|
2178
|
-
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$
|
|
2194
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
2179
2195
|
|
|
2180
2196
|
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
2181
2197
|
|
|
@@ -2325,6 +2341,10 @@ var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(temp
|
|
|
2325
2341
|
var theme = _a.theme;
|
|
2326
2342
|
return theme.palette.grey[600];
|
|
2327
2343
|
});
|
|
2344
|
+
var StyledAccordionHeader = styled__default["default"](Accordion.Header)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n button, svg {\n padding: ", ";\n }\n"], ["\n button, svg {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2345
|
+
var theme = _a.theme;
|
|
2346
|
+
return "".concat(theme.space.xs, " ").concat(theme.space.md);
|
|
2347
|
+
});
|
|
2328
2348
|
/**
|
|
2329
2349
|
* A Stepper guides users through steps of a task in sequential order.
|
|
2330
2350
|
|
|
@@ -2334,12 +2354,12 @@ var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(temp
|
|
|
2334
2354
|
var Stepper = function (props) {
|
|
2335
2355
|
var width = useWindowSize().width;
|
|
2336
2356
|
var smBreakpoint = parseInt(theme.breakpoints.sm);
|
|
2337
|
-
return width <= smBreakpoint ? (jsxRuntime.jsx(Accordion, __assign({ level: 1, isBare: true, isExpandable: true, isAnimated: true }, { children: jsxRuntime.jsxs(Accordion.Section, { children: [jsxRuntime.jsx(
|
|
2357
|
+
return width <= smBreakpoint ? (jsxRuntime.jsx(Accordion, __assign({ level: 1, isBare: true, isExpandable: true, isAnimated: true, isCompact: true }, { children: jsxRuntime.jsxs(Accordion.Section, { children: [jsxRuntime.jsx(StyledAccordionHeader, { children: jsxRuntime.jsx(Accordion.Label, { children: props.accordionTitle }) }), jsxRuntime.jsx(Accordion.Panel, { children: jsxRuntime.jsx(UgStepper, __assign({}, props)) })] }) }))) : (jsxRuntime.jsx(UgStepper, __assign({}, props)));
|
|
2338
2358
|
};
|
|
2339
2359
|
Stepper.Step = UgStep;
|
|
2340
2360
|
Stepper.Label = UgLabel;
|
|
2341
2361
|
Stepper.Content = UgContent;
|
|
2342
|
-
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2;
|
|
2362
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
2343
2363
|
|
|
2344
2364
|
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"], ["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"])), function (_a) {
|
|
2345
2365
|
var theme = _a.theme;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
}
|
|
4
|
+
export interface PageHeaderMainProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
infoTitle: string;
|
|
6
|
+
infoOverline?: string;
|
|
7
|
+
infoDescription?: string;
|
|
8
|
+
infoCounters?: Array<React.ReactNode>;
|
|
9
|
+
metaImage?: string;
|
|
10
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { PageHeaderProps } from "./_types";
|
|
2
|
+
import { BreadcrumbArgs } from "../../breadcrumbs/_types";
|
|
3
|
+
import { PropsWithChildren } from "react";
|
|
4
|
+
/**
|
|
5
|
+
* A PageHeader is a modular container used for pages with an opinionated set of default spaces and subcomponents order.
|
|
6
|
+
* <hr>
|
|
7
|
+
* Used for this:
|
|
8
|
+
- Display page informations and meta data
|
|
9
|
+
- As a container for the top part of the page
|
|
10
|
+
*/
|
|
11
|
+
declare const PageHeader: {
|
|
12
|
+
(props: PageHeaderProps): JSX.Element;
|
|
13
|
+
Breadcrumb: (props: BreadcrumbArgs) => JSX.Element;
|
|
14
|
+
Main: (props: import("./_types").PageHeaderMainProps) => JSX.Element;
|
|
15
|
+
Buttons: (props: PropsWithChildren<{}>) => JSX.Element;
|
|
16
|
+
};
|
|
17
|
+
export { PageHeader };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ComponentMeta, Story } from "@storybook/react";
|
|
2
|
+
import { PageHeaderMainProps } from "./_types";
|
|
3
|
+
import React from "react";
|
|
4
|
+
interface PageHeaderStoryProps {
|
|
5
|
+
pageHeaderArgs: {
|
|
6
|
+
buttons: Array<React.ReactNode>;
|
|
7
|
+
};
|
|
8
|
+
pageHeaderMainArgs: PageHeaderMainProps;
|
|
9
|
+
}
|
|
10
|
+
export declare const Default: Story<PageHeaderStoryProps>;
|
|
11
|
+
declare const _default: ComponentMeta<{
|
|
12
|
+
(props: import("./_types").PageHeaderProps): JSX.Element;
|
|
13
|
+
Breadcrumb: (props: import("../../breadcrumbs/_types").BreadcrumbArgs) => JSX.Element;
|
|
14
|
+
Main: (props: PageHeaderMainProps) => JSX.Element;
|
|
15
|
+
Buttons: (props: {
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
}) => JSX.Element;
|
|
18
|
+
}>;
|
|
19
|
+
export default _default;
|