@appquality/unguess-design-system 2.10.48 → 2.10.51
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/.github/dependabot.yml +11 -0
- package/CHANGELOG.md +18 -0
- package/build/index.js +169 -142
- package/build/stories/stepper/_types.d.ts +2 -0
- package/build/stories/stepper/index.stories.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# To get started with Dependabot version updates, you'll need to specify which
|
|
2
|
+
# package ecosystems to update and where the package manifests are located.
|
|
3
|
+
# Please see the documentation for all configuration options:
|
|
4
|
+
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
|
5
|
+
|
|
6
|
+
version: 2
|
|
7
|
+
updates:
|
|
8
|
+
- package-ecosystem: "yarn"
|
|
9
|
+
directory: "/" # Location of package manifests
|
|
10
|
+
schedule:
|
|
11
|
+
interval: "daily"
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
# v2.10.49 (Mon Jun 20 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Cup 634 mobile [#71](https://github.com/AppQuality/unguess-design-system/pull/71) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
- Cup 634 mobile view [#68](https://github.com/AppQuality/unguess-design-system/pull/68) ([@marcbon](https://github.com/marcbon))
|
|
7
|
+
|
|
8
|
+
#### ⚠️ Pushed to `master`
|
|
9
|
+
|
|
10
|
+
- chore(repo): Add dependabot.yml ([@cannarocks](https://github.com/cannarocks))
|
|
11
|
+
|
|
12
|
+
#### Authors: 2
|
|
13
|
+
|
|
14
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
15
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
1
19
|
# v2.10.48 (Thu Jun 09 2022)
|
|
2
20
|
|
|
3
21
|
#### ⚠️ Pushed to `master`
|
package/build/index.js
CHANGED
|
@@ -243,8 +243,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
243
243
|
|
|
244
244
|
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
245
|
|
|
246
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
247
|
-
var templateObject_1$
|
|
246
|
+
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);
|
|
247
|
+
var templateObject_1$17;
|
|
248
248
|
|
|
249
249
|
/**
|
|
250
250
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -259,7 +259,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
259
259
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
260
260
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
261
261
|
|
|
262
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
262
|
+
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
263
|
var theme = _a.theme;
|
|
264
264
|
return theme.palette.grey[700];
|
|
265
265
|
}, function (_a) {
|
|
@@ -280,9 +280,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
280
280
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
281
281
|
Alert.Title = UgAlertTitle;
|
|
282
282
|
Alert.Close = reactNotifications.Close;
|
|
283
|
-
var templateObject_1$
|
|
283
|
+
var templateObject_1$16, templateObject_2$q;
|
|
284
284
|
|
|
285
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
285
|
+
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
286
|
return props.avatarType &&
|
|
287
287
|
props.avatarType !== "image" &&
|
|
288
288
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -306,7 +306,7 @@ var Avatar = function (props) {
|
|
|
306
306
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
307
307
|
};
|
|
308
308
|
Avatar.Text = UgAvatar.Text;
|
|
309
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$15;
|
|
310
310
|
|
|
311
311
|
/**
|
|
312
312
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -337,7 +337,7 @@ var getThemeStyle = function (props) {
|
|
|
337
337
|
}
|
|
338
338
|
return theme;
|
|
339
339
|
};
|
|
340
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
340
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""])));
|
|
341
341
|
/**
|
|
342
342
|
* Buttons let users take action quickly.
|
|
343
343
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -355,7 +355,7 @@ var Button = function (props) {
|
|
|
355
355
|
};
|
|
356
356
|
Button.StartIcon = UgButton.StartIcon;
|
|
357
357
|
Button.EndIcon = UgButton.EndIcon;
|
|
358
|
-
var templateObject_1$
|
|
358
|
+
var templateObject_1$14;
|
|
359
359
|
|
|
360
360
|
/**
|
|
361
361
|
A Button group lets users make a selection from a set of options.
|
|
@@ -385,7 +385,7 @@ Used for this:
|
|
|
385
385
|
**/
|
|
386
386
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
387
387
|
|
|
388
|
-
var
|
|
388
|
+
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
389
|
var theme = _a.theme;
|
|
390
390
|
return theme.borderRadii.lg;
|
|
391
391
|
}, function (_a) {
|
|
@@ -405,8 +405,8 @@ var UgContentCard$1 = styled__default["default"](reactNotifications.Well)(templa
|
|
|
405
405
|
* Used for this:
|
|
406
406
|
- To group related content
|
|
407
407
|
*/
|
|
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) {
|
|
408
|
+
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
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 @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
410
|
var theme = _a.theme;
|
|
411
411
|
return theme.borderRadii.xl;
|
|
412
412
|
}, function (_a) {
|
|
@@ -415,9 +415,15 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
415
415
|
}, function (_a) {
|
|
416
416
|
var theme = _a.theme;
|
|
417
417
|
return theme.palette.grey["200"];
|
|
418
|
+
}, function (_a) {
|
|
419
|
+
var theme = _a.theme;
|
|
420
|
+
return theme.breakpoints.sm;
|
|
421
|
+
}, function (_a) {
|
|
422
|
+
var theme = _a.theme;
|
|
423
|
+
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
418
424
|
});
|
|
419
425
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
420
|
-
var templateObject_1$
|
|
426
|
+
var templateObject_1$13, templateObject_2$p;
|
|
421
427
|
|
|
422
428
|
/**
|
|
423
429
|
* Tags let users categorize content using a keyword.
|
|
@@ -632,7 +638,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
632
638
|
})));
|
|
633
639
|
};
|
|
634
640
|
|
|
635
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1
|
|
641
|
+
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
642
|
return props.isLight ?
|
|
637
643
|
"\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
644
|
});
|
|
@@ -650,22 +656,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
650
656
|
- To communicate a typing status, use Inline instead
|
|
651
657
|
*/
|
|
652
658
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
653
|
-
var templateObject_1
|
|
659
|
+
var templateObject_1$12;
|
|
654
660
|
|
|
655
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
661
|
+
var CardMeta = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
656
662
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
657
663
|
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
664
|
});
|
|
659
|
-
var templateObject_1$
|
|
665
|
+
var templateObject_1$11;
|
|
660
666
|
|
|
661
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
667
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
662
668
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
663
669
|
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
670
|
});
|
|
665
671
|
CardThumbnail.defaultProps = {
|
|
666
672
|
align: "left"
|
|
667
673
|
};
|
|
668
|
-
var templateObject_1$
|
|
674
|
+
var templateObject_1$10;
|
|
669
675
|
|
|
670
676
|
/**
|
|
671
677
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -677,7 +683,7 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
677
683
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
678
684
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
679
685
|
|
|
680
|
-
var Label$1 = styled__default["default"](SM)(templateObject_1
|
|
686
|
+
var Label$1 = styled__default["default"](SM)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
681
687
|
var theme = _a.theme;
|
|
682
688
|
return theme.palette.grey[500];
|
|
683
689
|
});
|
|
@@ -706,9 +712,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign(
|
|
|
706
712
|
CardHeader.Label = Label$1;
|
|
707
713
|
CardHeader.Title = Title$1;
|
|
708
714
|
CardHeader.Text = Description$1;
|
|
709
|
-
var templateObject_1
|
|
715
|
+
var templateObject_1$$, templateObject_2$o, templateObject_3$g, templateObject_4$a;
|
|
710
716
|
|
|
711
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
717
|
+
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
718
|
var theme = _a.theme;
|
|
713
719
|
return theme.space.base * 3;
|
|
714
720
|
}, function (_a) {
|
|
@@ -724,9 +730,9 @@ var Container = styled__default["default"].div(templateObject_3$f || (templateOb
|
|
|
724
730
|
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
731
|
});
|
|
726
732
|
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$
|
|
733
|
+
var templateObject_1$_, templateObject_2$n, templateObject_3$f;
|
|
728
734
|
|
|
729
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
735
|
+
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
736
|
var theme = _a.theme;
|
|
731
737
|
return theme.borderRadii.lg;
|
|
732
738
|
}, function (_a) {
|
|
@@ -752,7 +758,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
752
758
|
SpecialCard.Thumb = CardThumbnail;
|
|
753
759
|
SpecialCard.Header = CardHeader;
|
|
754
760
|
SpecialCard.Footer = CardFooter;
|
|
755
|
-
var templateObject_1$
|
|
761
|
+
var templateObject_1$Z;
|
|
756
762
|
|
|
757
763
|
var CampaignCardSkeleton = function () {
|
|
758
764
|
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 +791,7 @@ var getTypeDataIcon = function (type) {
|
|
|
785
791
|
return SvgCampaignFunctional;
|
|
786
792
|
}
|
|
787
793
|
};
|
|
788
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
794
|
+
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
795
|
var theme = _a.theme;
|
|
790
796
|
return theme.palette.grey["700"];
|
|
791
797
|
});
|
|
@@ -812,9 +818,9 @@ var CampaignCard = function (_a) {
|
|
|
812
818
|
var PillIcon = getTypeDataIcon(type);
|
|
813
819
|
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
820
|
};
|
|
815
|
-
var templateObject_1$
|
|
821
|
+
var templateObject_1$Y, templateObject_2$m, templateObject_3$e;
|
|
816
822
|
|
|
817
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
823
|
+
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
824
|
var theme = _a.theme;
|
|
819
825
|
return theme.space.base * 6;
|
|
820
826
|
}, function (_a) {
|
|
@@ -831,9 +837,9 @@ var ProductCard = function (props) {
|
|
|
831
837
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
832
838
|
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
839
|
};
|
|
834
|
-
var templateObject_1$
|
|
840
|
+
var templateObject_1$X;
|
|
835
841
|
|
|
836
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
842
|
+
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
843
|
var theme = _a.theme;
|
|
838
844
|
return theme.palette.grey[500];
|
|
839
845
|
}, function (_a) {
|
|
@@ -858,7 +864,7 @@ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$d || (templat
|
|
|
858
864
|
return theme.space.xs;
|
|
859
865
|
});
|
|
860
866
|
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$
|
|
867
|
+
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
868
|
var theme = _a.theme;
|
|
863
869
|
return theme.space.base;
|
|
864
870
|
}, function (_a) {
|
|
@@ -876,24 +882,24 @@ var HoverBody = styled__default["default"].div(templateObject_6$1 || (templateOb
|
|
|
876
882
|
return theme.palette.white;
|
|
877
883
|
});
|
|
878
884
|
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) {
|
|
885
|
+
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
886
|
var isHoverable = _a.isHoverable;
|
|
881
887
|
return isHoverable &&
|
|
882
888
|
"\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
889
|
});
|
|
884
890
|
var ServiceCard = function (props) {
|
|
885
891
|
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)); }) })))] })] })));
|
|
892
|
+
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
893
|
};
|
|
888
|
-
var templateObject_1$
|
|
894
|
+
var templateObject_1$W, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
|
|
889
895
|
|
|
890
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
896
|
+
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
897
|
var InfoCard = function (props) {
|
|
892
898
|
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
899
|
};
|
|
894
|
-
var templateObject_1$
|
|
900
|
+
var templateObject_1$V;
|
|
895
901
|
|
|
896
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
902
|
+
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
903
|
var theme = _a.theme;
|
|
898
904
|
return theme.space.xl;
|
|
899
905
|
}, function (_a) {
|
|
@@ -904,7 +910,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
904
910
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
905
911
|
*/
|
|
906
912
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
907
|
-
var templateObject_1$
|
|
913
|
+
var templateObject_1$U;
|
|
908
914
|
|
|
909
915
|
/**
|
|
910
916
|
* Use Span to style and format inline text elements.
|
|
@@ -944,7 +950,7 @@ function useWindowSize() {
|
|
|
944
950
|
return size;
|
|
945
951
|
}
|
|
946
952
|
|
|
947
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
953
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
948
954
|
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
955
|
var status = _a.status, theme = _a.theme;
|
|
950
956
|
switch (status) {
|
|
@@ -979,8 +985,12 @@ var Counter = function (props) {
|
|
|
979
985
|
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
986
|
};
|
|
981
987
|
Counter.Avatar = StyledTag.Avatar;
|
|
982
|
-
var templateObject_1$
|
|
988
|
+
var templateObject_1$T, templateObject_2$k;
|
|
983
989
|
|
|
990
|
+
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) {
|
|
991
|
+
var theme = _a.theme;
|
|
992
|
+
return theme.breakpoints.sm;
|
|
993
|
+
});
|
|
984
994
|
/**
|
|
985
995
|
* A Drawer is a container for supplementary content that is anchored to the edge of a page.
|
|
986
996
|
* <hr>
|
|
@@ -988,27 +998,28 @@ var templateObject_1$Q, templateObject_2$k;
|
|
|
988
998
|
- To display information or actions that are supplementary to the screen’s primary content
|
|
989
999
|
- To display a list of actions that affect the screen’s content, such as filtering data
|
|
990
1000
|
*/
|
|
991
|
-
var Drawer = function (props) { return jsxRuntime.jsx(
|
|
1001
|
+
var Drawer = function (props) { return jsxRuntime.jsx(UgDrawer, __assign({}, props)); };
|
|
992
1002
|
Drawer.Header = reactModals.DrawerModal.Header;
|
|
993
1003
|
Drawer.Body = reactModals.DrawerModal.Body;
|
|
994
1004
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
995
1005
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
996
|
-
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1006
|
+
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1007
|
+
var templateObject_1$S;
|
|
997
1008
|
|
|
998
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
999
|
-
var templateObject_1$
|
|
1009
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
1010
|
+
var templateObject_1$R;
|
|
1000
1011
|
|
|
1001
1012
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1002
1013
|
__proto__: null,
|
|
1003
1014
|
Field: Field$1
|
|
1004
1015
|
});
|
|
1005
1016
|
|
|
1006
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1017
|
+
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) {
|
|
1007
1018
|
var theme = _a.theme;
|
|
1008
1019
|
return theme.palette.blue[100];
|
|
1009
1020
|
});
|
|
1010
1021
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1011
|
-
var templateObject_1$
|
|
1022
|
+
var templateObject_1$Q;
|
|
1012
1023
|
|
|
1013
1024
|
/**
|
|
1014
1025
|
* A Menu is a wrapper for items elements
|
|
@@ -1032,7 +1043,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1032
1043
|
*/
|
|
1033
1044
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1034
1045
|
|
|
1035
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1046
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1036
1047
|
return props.isPrimary &&
|
|
1037
1048
|
"\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 ");
|
|
1038
1049
|
});
|
|
@@ -1049,7 +1060,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1049
1060
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1050
1061
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1051
1062
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1052
|
-
var templateObject_1$
|
|
1063
|
+
var templateObject_1$P;
|
|
1053
1064
|
|
|
1054
1065
|
/**
|
|
1055
1066
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1064,7 +1075,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1064
1075
|
|
|
1065
1076
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1066
1077
|
|
|
1067
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1078
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1068
1079
|
/**
|
|
1069
1080
|
* A Checkbox lets users select and unselect options from a list.
|
|
1070
1081
|
* <hr>
|
|
@@ -1076,17 +1087,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1076
1087
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1077
1088
|
**/
|
|
1078
1089
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1079
|
-
var templateObject_1$
|
|
1090
|
+
var templateObject_1$O;
|
|
1080
1091
|
|
|
1081
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
1092
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1082
1093
|
/**
|
|
1083
1094
|
* A Label is used to specify a title for an input.
|
|
1084
1095
|
* <hr>
|
|
1085
1096
|
**/
|
|
1086
1097
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1087
|
-
var templateObject_1$
|
|
1098
|
+
var templateObject_1$N;
|
|
1088
1099
|
|
|
1089
|
-
var flexCenter = styled.css(templateObject_1$
|
|
1100
|
+
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"])));
|
|
1090
1101
|
var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1091
1102
|
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) {
|
|
1092
1103
|
var theme = _a.theme;
|
|
@@ -1105,9 +1116,9 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
1105
1116
|
var theme = _a.theme;
|
|
1106
1117
|
return theme.shadows.boxShadow(theme);
|
|
1107
1118
|
});
|
|
1108
|
-
var templateObject_1$
|
|
1119
|
+
var templateObject_1$M, templateObject_2$j, templateObject_3$c, templateObject_4$8;
|
|
1109
1120
|
|
|
1110
|
-
styled__default["default"](Card)(templateObject_1$
|
|
1121
|
+
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) {
|
|
1111
1122
|
var theme = _a.theme;
|
|
1112
1123
|
return theme.palette.blue[300];
|
|
1113
1124
|
});
|
|
@@ -1135,14 +1146,14 @@ var CheckboxCard = function (props) {
|
|
|
1135
1146
|
};
|
|
1136
1147
|
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 })) })) }))] })));
|
|
1137
1148
|
};
|
|
1138
|
-
var templateObject_1$
|
|
1149
|
+
var templateObject_1$L, templateObject_2$i, templateObject_3$b, templateObject_4$7;
|
|
1139
1150
|
|
|
1140
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1151
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1141
1152
|
/**
|
|
1142
1153
|
* A Field is a wrapper for input elements
|
|
1143
1154
|
**/
|
|
1144
1155
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1145
|
-
var templateObject_1$
|
|
1156
|
+
var templateObject_1$K;
|
|
1146
1157
|
|
|
1147
1158
|
var index = /*#__PURE__*/Object.freeze({
|
|
1148
1159
|
__proto__: null,
|
|
@@ -1150,7 +1161,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1150
1161
|
Hint: reactForms.Hint
|
|
1151
1162
|
});
|
|
1152
1163
|
|
|
1153
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1164
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
|
|
1154
1165
|
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject([""], [""])));
|
|
1155
1166
|
/**
|
|
1156
1167
|
* An Input lets users enter text into a field.
|
|
@@ -1160,9 +1171,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (te
|
|
|
1160
1171
|
* - To enter multiline text, use a Textarea
|
|
1161
1172
|
**/
|
|
1162
1173
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1163
|
-
var templateObject_1$
|
|
1174
|
+
var templateObject_1$J, templateObject_2$h;
|
|
1164
1175
|
|
|
1165
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1176
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1166
1177
|
/**
|
|
1167
1178
|
* Media elements add even more context to an input.
|
|
1168
1179
|
* <hr>
|
|
@@ -1171,9 +1182,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1171
1182
|
* - To enter multiline text, use a Textarea
|
|
1172
1183
|
**/
|
|
1173
1184
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1174
|
-
var templateObject_1$
|
|
1185
|
+
var templateObject_1$I;
|
|
1175
1186
|
|
|
1176
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1187
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1177
1188
|
/**
|
|
1178
1189
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1179
1190
|
* <hr>
|
|
@@ -1185,7 +1196,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$F ||
|
|
|
1185
1196
|
* - To select from a long list of options, use Select instead
|
|
1186
1197
|
**/
|
|
1187
1198
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1188
|
-
var templateObject_1$
|
|
1199
|
+
var templateObject_1$H;
|
|
1189
1200
|
|
|
1190
1201
|
var _path$i;
|
|
1191
1202
|
|
|
@@ -1205,7 +1216,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1205
1216
|
})));
|
|
1206
1217
|
};
|
|
1207
1218
|
|
|
1208
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1219
|
+
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) {
|
|
1209
1220
|
var theme = _a.theme;
|
|
1210
1221
|
return theme.space.base;
|
|
1211
1222
|
}, function (_a) {
|
|
@@ -1239,9 +1250,9 @@ var RadioCard = function (_a) {
|
|
|
1239
1250
|
props.onChecked && props.onChecked(props.value);
|
|
1240
1251
|
} }, { 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 })) }))] })));
|
|
1241
1252
|
};
|
|
1242
|
-
var templateObject_1$
|
|
1253
|
+
var templateObject_1$G, templateObject_2$g;
|
|
1243
1254
|
|
|
1244
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1255
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1245
1256
|
/**
|
|
1246
1257
|
* A Textarea is a form control for multi-line text.
|
|
1247
1258
|
* <hr>
|
|
@@ -1249,9 +1260,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1249
1260
|
* - To enter multi-line text
|
|
1250
1261
|
**/
|
|
1251
1262
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1252
|
-
var templateObject_1$
|
|
1263
|
+
var templateObject_1$F;
|
|
1253
1264
|
|
|
1254
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1265
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1255
1266
|
/**
|
|
1256
1267
|
* 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.
|
|
1257
1268
|
* <hr>
|
|
@@ -1262,9 +1273,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$C
|
|
|
1262
1273
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1263
1274
|
**/
|
|
1264
1275
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1265
|
-
var templateObject_1$
|
|
1276
|
+
var templateObject_1$E;
|
|
1266
1277
|
|
|
1267
|
-
var Col =
|
|
1278
|
+
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);
|
|
1279
|
+
var Col = function (props) { return jsxRuntime.jsx(StyledCol, __assign({}, props)); };
|
|
1280
|
+
var templateObject_1$D;
|
|
1268
1281
|
|
|
1269
1282
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1270
1283
|
|
|
@@ -1327,15 +1340,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1327
1340
|
})));
|
|
1328
1341
|
};
|
|
1329
1342
|
|
|
1330
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1343
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1331
1344
|
var Icon = function (props) {
|
|
1332
1345
|
var type = props.type, size = props.size;
|
|
1333
1346
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1334
1347
|
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 })] }));
|
|
1335
1348
|
};
|
|
1336
|
-
var templateObject_1$
|
|
1349
|
+
var templateObject_1$C;
|
|
1337
1350
|
|
|
1338
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1351
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
|
|
1339
1352
|
/**
|
|
1340
1353
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1341
1354
|
* <hr>
|
|
@@ -1347,9 +1360,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1347
1360
|
- When loading page content, use a Skeleton loader instead
|
|
1348
1361
|
*/
|
|
1349
1362
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1350
|
-
var templateObject_1$
|
|
1363
|
+
var templateObject_1$B;
|
|
1351
1364
|
|
|
1352
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1365
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
|
|
1353
1366
|
/**
|
|
1354
1367
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1355
1368
|
* <hr>
|
|
@@ -1358,9 +1371,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1358
1371
|
- To provide a quick way to navigate to ancestor pages
|
|
1359
1372
|
*/
|
|
1360
1373
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1361
|
-
var templateObject_1$
|
|
1374
|
+
var templateObject_1$A;
|
|
1362
1375
|
|
|
1363
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1376
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1364
1377
|
var theme = _a.theme;
|
|
1365
1378
|
return theme.palette.white;
|
|
1366
1379
|
});
|
|
@@ -1368,7 +1381,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$y ||
|
|
|
1368
1381
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1369
1382
|
*/
|
|
1370
1383
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1371
|
-
var templateObject_1$
|
|
1384
|
+
var templateObject_1$z;
|
|
1372
1385
|
|
|
1373
1386
|
/**
|
|
1374
1387
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1392,7 +1405,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1392
1405
|
})));
|
|
1393
1406
|
};
|
|
1394
1407
|
|
|
1395
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1408
|
+
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) {
|
|
1396
1409
|
var theme = _a.theme;
|
|
1397
1410
|
return theme.fonts.system;
|
|
1398
1411
|
});
|
|
@@ -1401,14 +1414,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$f ||
|
|
|
1401
1414
|
return theme.fonts.system;
|
|
1402
1415
|
});
|
|
1403
1416
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1404
|
-
var templateObject_1$
|
|
1417
|
+
var templateObject_1$y, templateObject_2$f;
|
|
1405
1418
|
|
|
1406
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1419
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1407
1420
|
var theme = _a.theme;
|
|
1408
1421
|
return theme.fonts.system;
|
|
1409
1422
|
});
|
|
1410
1423
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1411
|
-
var templateObject_1$
|
|
1424
|
+
var templateObject_1$x;
|
|
1412
1425
|
|
|
1413
1426
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1414
1427
|
|
|
@@ -1457,7 +1470,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1457
1470
|
})));
|
|
1458
1471
|
};
|
|
1459
1472
|
|
|
1460
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1473
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1461
1474
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1462
1475
|
return isCompact &&
|
|
1463
1476
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1473,11 +1486,11 @@ var WorkspacesDropdown = function (props) {
|
|
|
1473
1486
|
? selectedWorkspace.company + "'s workspace"
|
|
1474
1487
|
: "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 }))); })] })] })));
|
|
1475
1488
|
};
|
|
1476
|
-
var templateObject_1$
|
|
1489
|
+
var templateObject_1$w;
|
|
1477
1490
|
|
|
1478
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1491
|
+
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) {
|
|
1479
1492
|
var theme = _a.theme;
|
|
1480
|
-
return theme.breakpoints.
|
|
1493
|
+
return theme.breakpoints.md;
|
|
1481
1494
|
});
|
|
1482
1495
|
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) {
|
|
1483
1496
|
var theme = _a.theme;
|
|
@@ -1487,7 +1500,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1487
1500
|
return theme.fonts.system;
|
|
1488
1501
|
}, function (_a) {
|
|
1489
1502
|
var theme = _a.theme;
|
|
1490
|
-
return theme.breakpoints.
|
|
1503
|
+
return theme.breakpoints.md;
|
|
1491
1504
|
});
|
|
1492
1505
|
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) {
|
|
1493
1506
|
var theme = _a.theme;
|
|
@@ -1497,21 +1510,21 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1497
1510
|
return theme.fonts.system;
|
|
1498
1511
|
}, function (_a) {
|
|
1499
1512
|
var theme = _a.theme;
|
|
1500
|
-
return theme.breakpoints.
|
|
1513
|
+
return theme.breakpoints.md;
|
|
1501
1514
|
});
|
|
1502
1515
|
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) {
|
|
1503
1516
|
var theme = _a.theme;
|
|
1504
1517
|
return theme.palette.blue["600"];
|
|
1505
1518
|
}, function (_a) {
|
|
1506
1519
|
var theme = _a.theme;
|
|
1507
|
-
return theme.breakpoints.
|
|
1520
|
+
return theme.breakpoints.md;
|
|
1508
1521
|
});
|
|
1509
1522
|
var BrandItem = function (props) {
|
|
1510
1523
|
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 }) }))) }))] }));
|
|
1511
1524
|
};
|
|
1512
|
-
var templateObject_1$
|
|
1525
|
+
var templateObject_1$v, templateObject_2$e, templateObject_3$a, templateObject_4$6;
|
|
1513
1526
|
|
|
1514
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1527
|
+
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);
|
|
1515
1528
|
/**
|
|
1516
1529
|
* An Header is a visual way to display general information.
|
|
1517
1530
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1520,13 +1533,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1520
1533
|
Header.HeaderItem = HeaderItem;
|
|
1521
1534
|
Header.HeaderItemText = HeaderItemText;
|
|
1522
1535
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1523
|
-
var templateObject_1$
|
|
1536
|
+
var templateObject_1$u;
|
|
1524
1537
|
|
|
1525
1538
|
var HeaderSkeleton = function () {
|
|
1526
1539
|
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%" } }) }) }) }))] })));
|
|
1527
1540
|
};
|
|
1528
1541
|
|
|
1529
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1542
|
+
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) {
|
|
1530
1543
|
var theme = _a.theme;
|
|
1531
1544
|
return theme.breakpoints.sm;
|
|
1532
1545
|
});
|
|
@@ -1538,9 +1551,9 @@ var AppHeader = function (_a) {
|
|
|
1538
1551
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1539
1552
|
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, {}) }))] }) }) }))] })));
|
|
1540
1553
|
};
|
|
1541
|
-
var templateObject_1$
|
|
1554
|
+
var templateObject_1$t;
|
|
1542
1555
|
|
|
1543
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1556
|
+
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) {
|
|
1544
1557
|
var theme = _a.theme;
|
|
1545
1558
|
return theme.borders.sm;
|
|
1546
1559
|
}, function (_a) {
|
|
@@ -1567,9 +1580,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$r || (t
|
|
|
1567
1580
|
- To give a consistent dashboard and navigation experience
|
|
1568
1581
|
*/
|
|
1569
1582
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1570
|
-
var templateObject_1$
|
|
1583
|
+
var templateObject_1$s;
|
|
1571
1584
|
|
|
1572
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1585
|
+
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"]; });
|
|
1573
1586
|
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) {
|
|
1574
1587
|
var theme = _a.theme;
|
|
1575
1588
|
return theme.fonts.system;
|
|
@@ -1581,11 +1594,11 @@ var NavItem = function (props) {
|
|
|
1581
1594
|
// const { isExpanded } = props;
|
|
1582
1595
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1583
1596
|
};
|
|
1584
|
-
var templateObject_1$
|
|
1597
|
+
var templateObject_1$r, templateObject_2$d;
|
|
1585
1598
|
|
|
1586
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1599
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
|
|
1587
1600
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1588
|
-
var templateObject_1$
|
|
1601
|
+
var templateObject_1$q;
|
|
1589
1602
|
|
|
1590
1603
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1591
1604
|
|
|
@@ -1623,7 +1636,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1623
1636
|
})));
|
|
1624
1637
|
};
|
|
1625
1638
|
|
|
1626
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1639
|
+
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) {
|
|
1627
1640
|
var theme = _a.theme;
|
|
1628
1641
|
return theme.space.base * 6;
|
|
1629
1642
|
}, function (_a) {
|
|
@@ -1648,18 +1661,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$o ||
|
|
|
1648
1661
|
var NavToggle = function (props) {
|
|
1649
1662
|
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%" } })) })));
|
|
1650
1663
|
};
|
|
1651
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$p;
|
|
1652
1665
|
|
|
1653
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1666
|
+
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;"; });
|
|
1654
1667
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1655
|
-
var templateObject_1$
|
|
1668
|
+
var templateObject_1$o;
|
|
1656
1669
|
|
|
1657
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1670
|
+
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; });
|
|
1658
1671
|
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"])));
|
|
1659
1672
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1660
1673
|
NavItemProject.Title = NavItemText;
|
|
1661
1674
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1662
|
-
var templateObject_1$
|
|
1675
|
+
var templateObject_1$n, templateObject_2$c;
|
|
1663
1676
|
|
|
1664
1677
|
var _path$a;
|
|
1665
1678
|
|
|
@@ -1828,7 +1841,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
1828
1841
|
})))));
|
|
1829
1842
|
};
|
|
1830
1843
|
|
|
1831
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
1844
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
1832
1845
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
1833
1846
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
1834
1847
|
});
|
|
@@ -1836,11 +1849,11 @@ var LoadingSidebar = function (props) {
|
|
|
1836
1849
|
var isExpanded = props.isExpanded;
|
|
1837
1850
|
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" })] }))] })));
|
|
1838
1851
|
};
|
|
1839
|
-
var templateObject_1$
|
|
1852
|
+
var templateObject_1$m;
|
|
1840
1853
|
|
|
1841
1854
|
var FEATURE_FLAG_CATALOG = 'catalog-pages';
|
|
1842
1855
|
|
|
1843
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1856
|
+
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"])));
|
|
1844
1857
|
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"])));
|
|
1845
1858
|
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) {
|
|
1846
1859
|
var isExpanded = _a.isExpanded;
|
|
@@ -1879,9 +1892,9 @@ var Sidebar = function (props) {
|
|
|
1879
1892
|
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 &&
|
|
1880
1893
|
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" })] }))] })));
|
|
1881
1894
|
};
|
|
1882
|
-
var templateObject_1$
|
|
1895
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$9;
|
|
1883
1896
|
|
|
1884
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
1897
|
+
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) {
|
|
1885
1898
|
var theme = _a.theme;
|
|
1886
1899
|
return theme.breakpoints.sm;
|
|
1887
1900
|
}, function (_a) {
|
|
@@ -1892,46 +1905,52 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$j ||
|
|
|
1892
1905
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1893
1906
|
*/
|
|
1894
1907
|
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1895
|
-
var templateObject_1$
|
|
1908
|
+
var templateObject_1$k;
|
|
1896
1909
|
|
|
1897
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
1910
|
+
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]);
|
|
1898
1911
|
var PageLoader = function () {
|
|
1899
1912
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
1900
1913
|
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: "" }) }))] })] })] })] }) })));
|
|
1901
1914
|
};
|
|
1902
|
-
var templateObject_1$
|
|
1915
|
+
var templateObject_1$j;
|
|
1903
1916
|
|
|
1904
1917
|
/**
|
|
1905
1918
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
1906
1919
|
*/
|
|
1907
1920
|
var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
1908
1921
|
|
|
1922
|
+
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);
|
|
1909
1923
|
/**
|
|
1910
1924
|
* Login Form
|
|
1911
1925
|
* <hr>
|
|
1912
1926
|
* Used for this:
|
|
1913
1927
|
- Login user to the application
|
|
1914
1928
|
*/
|
|
1915
|
-
var LoginForm = function (props) {
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1929
|
+
var LoginForm = function (props) {
|
|
1930
|
+
var width = useWindowSize().width;
|
|
1931
|
+
var breakpointMd = parseInt(theme.breakpoints.md, 10);
|
|
1932
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, __assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
|
|
1933
|
+
textAlign: "center",
|
|
1934
|
+
marginTop: theme.space.sm,
|
|
1935
|
+
marginBottom: theme.space.lg,
|
|
1936
|
+
} }, { 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) {
|
|
1937
|
+
var values = _a.values, status = _a.status, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
|
|
1938
|
+
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
|
|
1939
|
+
? { validation: "error" }
|
|
1940
|
+
: touched.email
|
|
1941
|
+
? { validation: "success" }
|
|
1942
|
+
: ""))), 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
|
|
1943
|
+
? { validation: "error" }
|
|
1944
|
+
: touched.password
|
|
1945
|
+
? { validation: "success" }
|
|
1946
|
+
: ""))), 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
|
|
1932
1947
|
? true
|
|
1933
|
-
:
|
|
1934
|
-
|
|
1948
|
+
: isSubmitting
|
|
1949
|
+
? true
|
|
1950
|
+
: 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 })) })))] })));
|
|
1951
|
+
} }))] })), 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"] })))] }));
|
|
1952
|
+
};
|
|
1953
|
+
var templateObject_1$i;
|
|
1935
1954
|
|
|
1936
1955
|
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1937
1956
|
var theme = _a.theme;
|
|
@@ -1963,14 +1982,14 @@ var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$5 |
|
|
|
1963
1982
|
var theme = _a.theme;
|
|
1964
1983
|
return theme.space.base * 6;
|
|
1965
1984
|
});
|
|
1966
|
-
var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$
|
|
1985
|
+
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"])));
|
|
1967
1986
|
var ModalFullScreen = function (props) { return jsxRuntime.jsx(StyledModal$1, __assign({}, props)); };
|
|
1968
1987
|
ModalFullScreen.Header = StyledHeader;
|
|
1969
1988
|
ModalFullScreen.Body = StyledBody$4;
|
|
1970
1989
|
ModalFullScreen.Footer = StyledFooter;
|
|
1971
1990
|
ModalFullScreen.Close = StyledModalClose;
|
|
1972
1991
|
ModalFullScreen.FooterItem = FooterItem;
|
|
1973
|
-
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5, templateObject_5$
|
|
1992
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5, templateObject_5$3;
|
|
1974
1993
|
|
|
1975
1994
|
/**
|
|
1976
1995
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2154,7 +2173,7 @@ var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$3 |
|
|
|
2154
2173
|
var theme = _a.theme;
|
|
2155
2174
|
return theme.space.base * 4;
|
|
2156
2175
|
});
|
|
2157
|
-
var Footer = styled__default["default"].div(templateObject_5$
|
|
2176
|
+
var Footer = styled__default["default"].div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
|
|
2158
2177
|
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"]);
|
|
2159
2178
|
var HelpItem = function (props) {
|
|
2160
2179
|
var _a, _b, _c;
|
|
@@ -2170,7 +2189,7 @@ var HelpItem = function (props) {
|
|
|
2170
2189
|
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"] }))] })] }));
|
|
2171
2190
|
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 })) }));
|
|
2172
2191
|
};
|
|
2173
|
-
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$
|
|
2192
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
|
|
2174
2193
|
|
|
2175
2194
|
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); }
|
|
2176
2195
|
|
|
@@ -2290,7 +2309,7 @@ var backDropStyle = {
|
|
|
2290
2309
|
var ProfileModal = function (_a) {
|
|
2291
2310
|
var menuArgs = _a.menuArgs, args = __rest(_a, ["menuArgs"]);
|
|
2292
2311
|
var width = useWindowSize().width;
|
|
2293
|
-
var smBreakpoint =
|
|
2312
|
+
var smBreakpoint = parseInt(theme.breakpoints.sm);
|
|
2294
2313
|
var backDrop = {
|
|
2295
2314
|
style: __assign({}, (width > smBreakpoint && __assign({}, backDropStyle))),
|
|
2296
2315
|
};
|
|
@@ -2303,7 +2322,7 @@ var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateOb
|
|
|
2303
2322
|
return theme.palette.green[700];
|
|
2304
2323
|
});
|
|
2305
2324
|
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject([""], [""])));
|
|
2306
|
-
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n
|
|
2325
|
+
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (_a) {
|
|
2307
2326
|
var theme = _a.theme;
|
|
2308
2327
|
return theme.palette.grey[200];
|
|
2309
2328
|
}, function (_a) {
|
|
@@ -2313,24 +2332,32 @@ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObje
|
|
|
2313
2332
|
return props.activeIndex !== undefined &&
|
|
2314
2333
|
"\n ".concat(UgStep, ":nth-child(").concat(props.activeIndex + 1, ") {\n \n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ").concat(props.theme.palette.blue[600], ";\n color: white;\n }\n\n ").concat(UgLabel, " {\n font-weight: 500;\n color: ").concat(props.theme.palette.blue[600], ";\n }\n }\n ");
|
|
2315
2334
|
});
|
|
2316
|
-
var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div {
|
|
2335
|
+
var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div {\n color: ", ";\n }\n"], ["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div {\n color: ", ";\n }\n"])), function (_a) {
|
|
2317
2336
|
var theme = _a.theme;
|
|
2318
2337
|
return "".concat(theme.space.sm, " ").concat(theme.space.sm, " ").concat(theme.space.sm, " 24px");
|
|
2319
2338
|
}, function (_a) {
|
|
2320
2339
|
var theme = _a.theme;
|
|
2321
2340
|
return theme.palette.grey[600];
|
|
2322
2341
|
});
|
|
2342
|
+
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) {
|
|
2343
|
+
var theme = _a.theme;
|
|
2344
|
+
return "".concat(theme.space.xs, " ").concat(theme.space.md);
|
|
2345
|
+
});
|
|
2323
2346
|
/**
|
|
2324
2347
|
* A Stepper guides users through steps of a task in sequential order.
|
|
2325
2348
|
|
|
2326
2349
|
* Used for this:
|
|
2327
2350
|
- For multi-step flows that must be completed in order
|
|
2328
2351
|
*/
|
|
2329
|
-
var Stepper = function (props) {
|
|
2352
|
+
var Stepper = function (props) {
|
|
2353
|
+
var width = useWindowSize().width;
|
|
2354
|
+
var smBreakpoint = parseInt(theme.breakpoints.sm);
|
|
2355
|
+
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)));
|
|
2356
|
+
};
|
|
2330
2357
|
Stepper.Step = UgStep;
|
|
2331
2358
|
Stepper.Label = UgLabel;
|
|
2332
2359
|
Stepper.Content = UgContent;
|
|
2333
|
-
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2;
|
|
2360
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1;
|
|
2334
2361
|
|
|
2335
2362
|
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) {
|
|
2336
2363
|
var theme = _a.theme;
|
|
@@ -5,6 +5,8 @@ export interface StepperArgs extends IStepperProps {
|
|
|
5
5
|
activeIndex?: number;
|
|
6
6
|
/** Applies horizontal layout styling */
|
|
7
7
|
isHorizontal?: boolean;
|
|
8
|
+
/** Title used for the accordion shown on mobile */
|
|
9
|
+
accordionTitle?: string;
|
|
8
10
|
}
|
|
9
11
|
export interface StepperLabelArgs extends IStepperLabelProps {
|
|
10
12
|
/** Replaces the label number with an icon */
|
|
@@ -3,6 +3,7 @@ import { ComponentMeta, Story } from "@storybook/react";
|
|
|
3
3
|
import { StepperArgs } from "./_types";
|
|
4
4
|
interface StepperStoryProps extends StepperArgs {
|
|
5
5
|
currentStep: number;
|
|
6
|
+
accordionTitle: string;
|
|
6
7
|
}
|
|
7
8
|
export declare const Default: Story<StepperStoryProps>;
|
|
8
9
|
export declare const SeparateContent: Story<StepperStoryProps>;
|