@appquality/unguess-design-system 2.10.68 → 2.10.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -0
- package/build/index.js +146 -157
- package/build/stories/campaign-cards/_types.d.ts +2 -2
- package/build/stories/forms/checkbox/cards/_types.d.ts +2 -2
- package/build/stories/forms/radio/cards/_types.d.ts +2 -2
- package/build/stories/product-cards/_types.d.ts +2 -2
- package/build/stories/service-cards/_types.d.ts +2 -2
- package/build/stories/special-cards/_types.d.ts +3 -1
- package/build/stories/special-cards/index.d.ts +2 -2
- package/build/stories/special-cards/index.stories.d.ts +3 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
# v2.10.71 (Mon Aug 08 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Add disabled state to checkbox card [#79](https://github.com/AppQuality/unguess-design-system/pull/79) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.70 (Thu Aug 04 2022)
|
|
14
|
+
|
|
15
|
+
#### ⚠️ Pushed to `master`
|
|
16
|
+
|
|
17
|
+
- fix(item-container): Update label color ([@cannarocks](https://github.com/cannarocks))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v2.10.69 (Tue Aug 02 2022)
|
|
26
|
+
|
|
27
|
+
#### 🐛 Bug Fix
|
|
28
|
+
|
|
29
|
+
- feat(item-with-media): add new item content to handle media [#78](https://github.com/AppQuality/unguess-design-system/pull/78) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
|
|
30
|
+
|
|
31
|
+
#### Authors: 2
|
|
32
|
+
|
|
33
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
34
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
1
38
|
# v2.10.68 (Tue Aug 02 2022)
|
|
2
39
|
|
|
3
40
|
#### 🐛 Bug Fix
|
package/build/index.js
CHANGED
|
@@ -286,7 +286,7 @@ var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObjec
|
|
|
286
286
|
var theme = _a.theme;
|
|
287
287
|
return theme.fontSizes.sm;
|
|
288
288
|
});
|
|
289
|
-
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$
|
|
289
|
+
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (_a) {
|
|
290
290
|
var theme = _a.theme;
|
|
291
291
|
return theme.fontSizes.md;
|
|
292
292
|
});
|
|
@@ -300,7 +300,7 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
300
300
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
301
301
|
Alert.Title = UgAlertTitle;
|
|
302
302
|
Alert.Close = reactNotifications.Close;
|
|
303
|
-
var templateObject_1$1e, templateObject_2$
|
|
303
|
+
var templateObject_1$1e, templateObject_2$u;
|
|
304
304
|
|
|
305
305
|
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
306
306
|
return props.avatarType &&
|
|
@@ -426,7 +426,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
426
426
|
- To group related content
|
|
427
427
|
*/
|
|
428
428
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
429
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$
|
|
429
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$t || (templateObject_2$t = __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) {
|
|
430
430
|
var theme = _a.theme;
|
|
431
431
|
return theme.borderRadii.xl;
|
|
432
432
|
}, function (_a) {
|
|
@@ -443,7 +443,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
443
443
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
444
444
|
});
|
|
445
445
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
446
|
-
var templateObject_1$1b, templateObject_2$
|
|
446
|
+
var templateObject_1$1b, templateObject_2$t;
|
|
447
447
|
|
|
448
448
|
/**
|
|
449
449
|
* Tags let users categorize content using a keyword.
|
|
@@ -707,7 +707,7 @@ var Label$2 = styled__default["default"](SM)(templateObject_1$17 || (templateObj
|
|
|
707
707
|
var theme = _a.theme;
|
|
708
708
|
return theme.palette.grey[500];
|
|
709
709
|
});
|
|
710
|
-
var Title$3 = styled__default["default"](LG)(templateObject_2$
|
|
710
|
+
var Title$3 = styled__default["default"](LG)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
711
711
|
var theme = _a.theme;
|
|
712
712
|
return theme.colors.primaryHue;
|
|
713
713
|
}, function (_a) {
|
|
@@ -717,14 +717,14 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$t || (templateObje
|
|
|
717
717
|
var theme = _a.theme;
|
|
718
718
|
return theme.space.xxs;
|
|
719
719
|
});
|
|
720
|
-
var Description$3 = styled__default["default"](MD)(templateObject_3$
|
|
720
|
+
var Description$3 = styled__default["default"](MD)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
721
721
|
var theme = _a.theme;
|
|
722
722
|
return theme.palette.grey[700];
|
|
723
723
|
}, function (_a) {
|
|
724
724
|
var theme = _a.theme;
|
|
725
725
|
return theme.space.xxs;
|
|
726
726
|
});
|
|
727
|
-
var Container$2 = styled__default["default"].div(templateObject_4$
|
|
727
|
+
var Container$2 = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
728
728
|
var theme = _a.theme, align = _a.align;
|
|
729
729
|
return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
730
730
|
});
|
|
@@ -732,7 +732,7 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
|
|
|
732
732
|
CardHeader.Label = Label$2;
|
|
733
733
|
CardHeader.Title = Title$3;
|
|
734
734
|
CardHeader.Text = Description$3;
|
|
735
|
-
var templateObject_1$17, templateObject_2$
|
|
735
|
+
var templateObject_1$17, templateObject_2$s, templateObject_3$i, templateObject_4$b;
|
|
736
736
|
|
|
737
737
|
var Divider = styled__default["default"].div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
738
738
|
var theme = _a.theme;
|
|
@@ -744,15 +744,15 @@ var Divider = styled__default["default"].div(templateObject_1$16 || (templateObj
|
|
|
744
744
|
var theme = _a.theme;
|
|
745
745
|
return theme.palette.grey["300"];
|
|
746
746
|
});
|
|
747
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
748
|
-
var Container$1 = styled__default["default"].div(templateObject_3$
|
|
747
|
+
var Footer$2 = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
|
|
748
|
+
var Container$1 = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
749
749
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
750
750
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
|
|
751
751
|
});
|
|
752
752
|
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
753
|
-
var templateObject_1$16, templateObject_2$
|
|
753
|
+
var templateObject_1$16, templateObject_2$r, templateObject_3$h;
|
|
754
754
|
|
|
755
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
755
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"])), function (_a) {
|
|
756
756
|
var theme = _a.theme;
|
|
757
757
|
return theme.borderRadii.lg;
|
|
758
758
|
}, function (_a) {
|
|
@@ -765,6 +765,10 @@ var UgContentCard = styled__default["default"](reactNotifications.Well)(template
|
|
|
765
765
|
var isFloating = _a.isFloating, theme = _a.theme;
|
|
766
766
|
return !isFloating &&
|
|
767
767
|
"\n &:hover {\n box-shadow: ".concat(theme.shadows.boxShadow(theme), ";\n }");
|
|
768
|
+
}, function (_a) {
|
|
769
|
+
var isDisabled = _a.isDisabled;
|
|
770
|
+
return isDisabled &&
|
|
771
|
+
"\n pointer-events: none;\n opacity: 0.7;\n ";
|
|
768
772
|
});
|
|
769
773
|
/**
|
|
770
774
|
* A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
|
|
@@ -815,7 +819,7 @@ var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$14 || (templa
|
|
|
815
819
|
var theme = _a.theme;
|
|
816
820
|
return theme.palette.grey["700"];
|
|
817
821
|
});
|
|
818
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$
|
|
822
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
|
|
819
823
|
var theme = _a.theme;
|
|
820
824
|
return theme.space.base * 6;
|
|
821
825
|
}, function (_a) {
|
|
@@ -828,7 +832,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$r || (temp
|
|
|
828
832
|
var theme = _a.theme;
|
|
829
833
|
return theme.palette.white;
|
|
830
834
|
});
|
|
831
|
-
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$
|
|
835
|
+
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
832
836
|
var theme = _a.theme;
|
|
833
837
|
return theme.palette.grey["500"];
|
|
834
838
|
});
|
|
@@ -838,7 +842,7 @@ var CampaignCard = function (_a) {
|
|
|
838
842
|
var PillIcon = getTypeDataIcon(type);
|
|
839
843
|
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, {})] })] })));
|
|
840
844
|
};
|
|
841
|
-
var templateObject_1$14, templateObject_2$
|
|
845
|
+
var templateObject_1$14, templateObject_2$q, templateObject_3$g;
|
|
842
846
|
|
|
843
847
|
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
|
|
844
848
|
var theme = _a.theme;
|
|
@@ -866,7 +870,7 @@ var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$12 || (tem
|
|
|
866
870
|
var theme = _a.theme;
|
|
867
871
|
return theme.space.base;
|
|
868
872
|
});
|
|
869
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$
|
|
873
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
870
874
|
var theme = _a.theme;
|
|
871
875
|
return theme.palette.blue[600];
|
|
872
876
|
}, function (_a) {
|
|
@@ -876,14 +880,14 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$q || (templat
|
|
|
876
880
|
var theme = _a.theme;
|
|
877
881
|
return theme.fontWeights.semibold;
|
|
878
882
|
});
|
|
879
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
883
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
880
884
|
var theme = _a.theme;
|
|
881
885
|
return theme.space.xs;
|
|
882
886
|
}, function (_a) {
|
|
883
887
|
var theme = _a.theme;
|
|
884
888
|
return theme.space.xs;
|
|
885
889
|
});
|
|
886
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
890
|
+
var CardContent = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
887
891
|
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
888
892
|
var theme = _a.theme;
|
|
889
893
|
return theme.space.base;
|
|
@@ -911,7 +915,7 @@ var ServiceCard = function (props) {
|
|
|
911
915
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
912
916
|
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)); }) })))] })] })));
|
|
913
917
|
};
|
|
914
|
-
var templateObject_1$12, templateObject_2$
|
|
918
|
+
var templateObject_1$12, templateObject_2$p, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
915
919
|
|
|
916
920
|
var ButtonsWrap = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
917
921
|
var InfoCard = function (props) {
|
|
@@ -971,7 +975,7 @@ function useWindowSize() {
|
|
|
971
975
|
}
|
|
972
976
|
|
|
973
977
|
var StyledSpan = styled__default["default"](Span)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""])));
|
|
974
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
978
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$o || (templateObject_2$o = __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) {
|
|
975
979
|
var status = _a.status, theme = _a.theme;
|
|
976
980
|
switch (status) {
|
|
977
981
|
case "completed":
|
|
@@ -1005,7 +1009,7 @@ var Counter = function (props) {
|
|
|
1005
1009
|
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() })] })));
|
|
1006
1010
|
};
|
|
1007
1011
|
Counter.Avatar = StyledTag.Avatar;
|
|
1008
|
-
var templateObject_1$$, templateObject_2$
|
|
1012
|
+
var templateObject_1$$, templateObject_2$o;
|
|
1009
1013
|
|
|
1010
1014
|
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1011
1015
|
var theme = _a.theme;
|
|
@@ -1042,20 +1046,20 @@ var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props))
|
|
|
1042
1046
|
var templateObject_1$Y;
|
|
1043
1047
|
|
|
1044
1048
|
var Container = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
1045
|
-
var MetaContainer$1 = styled__default["default"].div(templateObject_2$
|
|
1046
|
-
var ThumbContainer = styled__default["default"].div(templateObject_3$
|
|
1049
|
+
var MetaContainer$1 = styled__default["default"].div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"])));
|
|
1050
|
+
var ThumbContainer = styled__default["default"].div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
|
|
1047
1051
|
var theme = _a.theme;
|
|
1048
1052
|
return theme.space.sm;
|
|
1049
1053
|
}, function (_a) {
|
|
1050
1054
|
var theme = _a.theme;
|
|
1051
1055
|
return theme.components.autocomplete.thumbSize;
|
|
1052
1056
|
});
|
|
1053
|
-
var Label$1 = styled__default["default"](MD)(templateObject_4$
|
|
1057
|
+
var Label$1 = styled__default["default"](MD)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
1054
1058
|
var theme = _a.theme;
|
|
1055
1059
|
return theme.fontWeights.medium;
|
|
1056
1060
|
}, function (_a) {
|
|
1057
1061
|
var theme = _a.theme;
|
|
1058
|
-
return theme.
|
|
1062
|
+
return theme.palette.grey[800];
|
|
1059
1063
|
});
|
|
1060
1064
|
var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1061
1065
|
var theme = _a.theme;
|
|
@@ -1067,9 +1071,9 @@ var Image$1 = React.memo(function (_a) {
|
|
|
1067
1071
|
});
|
|
1068
1072
|
var ItemContent = function (props) {
|
|
1069
1073
|
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1070
|
-
return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, { children: label }), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
|
|
1074
|
+
return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
|
|
1071
1075
|
};
|
|
1072
|
-
var templateObject_1$X, templateObject_2$
|
|
1076
|
+
var templateObject_1$X, templateObject_2$n, templateObject_3$e, templateObject_4$9, templateObject_5$5;
|
|
1073
1077
|
|
|
1074
1078
|
/**
|
|
1075
1079
|
* A Menu is a wrapper for items elements
|
|
@@ -1278,7 +1282,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$T || (templateObj
|
|
|
1278
1282
|
var theme = _a.theme;
|
|
1279
1283
|
return theme.palette.grey[300];
|
|
1280
1284
|
});
|
|
1281
|
-
var Title$2 = styled__default["default"](MD)(templateObject_2$
|
|
1285
|
+
var Title$2 = styled__default["default"](MD)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1282
1286
|
var validation = _a.validation, theme = _a.theme;
|
|
1283
1287
|
if (validation === "success") {
|
|
1284
1288
|
return "color: ".concat(theme.colors.successHue, ";");
|
|
@@ -1297,7 +1301,7 @@ var EditorHeader = function (props) {
|
|
|
1297
1301
|
var title = props.title, validation = props.validation;
|
|
1298
1302
|
return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
|
|
1299
1303
|
};
|
|
1300
|
-
var templateObject_1$T, templateObject_2$
|
|
1304
|
+
var templateObject_1$T, templateObject_2$m;
|
|
1301
1305
|
|
|
1302
1306
|
var Footer$1 = styled__default["default"].div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"])), function (_a) {
|
|
1303
1307
|
var theme = _a.theme;
|
|
@@ -1306,12 +1310,12 @@ var Footer$1 = styled__default["default"].div(templateObject_1$S || (templateObj
|
|
|
1306
1310
|
var theme = _a.theme;
|
|
1307
1311
|
return theme.palette.grey[100];
|
|
1308
1312
|
});
|
|
1309
|
-
var Text = styled__default["default"](SM)(templateObject_2$
|
|
1313
|
+
var Text = styled__default["default"](SM)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n line-height: 1.7;\n"], ["\n line-height: 1.7;\n"])));
|
|
1310
1314
|
var EditorFooter = function (_a) {
|
|
1311
1315
|
var saveText = _a.saveText;
|
|
1312
1316
|
return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
|
|
1313
1317
|
};
|
|
1314
|
-
var templateObject_1$S, templateObject_2$
|
|
1318
|
+
var templateObject_1$S, templateObject_2$l;
|
|
1315
1319
|
|
|
1316
1320
|
var EditorContainer = styled__default["default"].div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"], ["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"])), function (_a) {
|
|
1317
1321
|
var theme = _a.theme;
|
|
@@ -1421,43 +1425,7 @@ var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$P
|
|
|
1421
1425
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1422
1426
|
var templateObject_1$P;
|
|
1423
1427
|
|
|
1424
|
-
var
|
|
1425
|
-
var flexColumnCenter = styled.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1426
|
-
var flexStart = styled.css(templateObject_3$e || (templateObject_3$e = __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) {
|
|
1427
|
-
var theme = _a.theme;
|
|
1428
|
-
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1429
|
-
});
|
|
1430
|
-
var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
|
|
1431
|
-
var theme = _a.theme;
|
|
1432
|
-
return theme.borderRadii.lg;
|
|
1433
|
-
}, function (_a) {
|
|
1434
|
-
var theme = _a.theme;
|
|
1435
|
-
return theme.components.notification.card.padding;
|
|
1436
|
-
}, function (_a) {
|
|
1437
|
-
var theme = _a.theme;
|
|
1438
|
-
return theme.palette.grey["200"];
|
|
1439
|
-
}, function (_a) {
|
|
1440
|
-
var theme = _a.theme;
|
|
1441
|
-
return theme.shadows.boxShadow(theme);
|
|
1442
|
-
});
|
|
1443
|
-
var templateObject_1$O, templateObject_2$l, templateObject_3$e, templateObject_4$9;
|
|
1444
|
-
|
|
1445
|
-
styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __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) {
|
|
1446
|
-
var theme = _a.theme;
|
|
1447
|
-
return theme.palette.blue[300];
|
|
1448
|
-
});
|
|
1449
|
-
styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1450
|
-
var theme = _a.theme;
|
|
1451
|
-
return theme.space.base;
|
|
1452
|
-
});
|
|
1453
|
-
styled__default["default"](Label)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1454
|
-
var theme = _a.theme;
|
|
1455
|
-
return theme.space.base;
|
|
1456
|
-
}, function (_a) {
|
|
1457
|
-
var theme = _a.theme;
|
|
1458
|
-
return theme.palette.grey[700];
|
|
1459
|
-
});
|
|
1460
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1428
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1461
1429
|
var theme = _a.theme;
|
|
1462
1430
|
return theme.space.base;
|
|
1463
1431
|
});
|
|
@@ -1470,14 +1438,14 @@ var CheckboxCard = function (props) {
|
|
|
1470
1438
|
};
|
|
1471
1439
|
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 })) })) }))] })));
|
|
1472
1440
|
};
|
|
1473
|
-
var templateObject_1$
|
|
1441
|
+
var templateObject_1$O;
|
|
1474
1442
|
|
|
1475
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1443
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1476
1444
|
/**
|
|
1477
1445
|
* A Field is a wrapper for input elements
|
|
1478
1446
|
**/
|
|
1479
1447
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1480
|
-
var templateObject_1$
|
|
1448
|
+
var templateObject_1$N;
|
|
1481
1449
|
|
|
1482
1450
|
var index = /*#__PURE__*/Object.freeze({
|
|
1483
1451
|
__proto__: null,
|
|
@@ -1485,8 +1453,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1485
1453
|
Hint: reactForms.Hint
|
|
1486
1454
|
});
|
|
1487
1455
|
|
|
1488
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1489
|
-
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$
|
|
1456
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1457
|
+
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject([""], [""])));
|
|
1490
1458
|
/**
|
|
1491
1459
|
* An Input lets users enter text into a field.
|
|
1492
1460
|
* <hr>
|
|
@@ -1495,9 +1463,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$j || (te
|
|
|
1495
1463
|
* - To enter multiline text, use a Textarea
|
|
1496
1464
|
**/
|
|
1497
1465
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1498
|
-
var templateObject_1$
|
|
1466
|
+
var templateObject_1$M, templateObject_2$k;
|
|
1499
1467
|
|
|
1500
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1468
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1501
1469
|
/**
|
|
1502
1470
|
* Media elements add even more context to an input.
|
|
1503
1471
|
* <hr>
|
|
@@ -1506,9 +1474,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1506
1474
|
* - To enter multiline text, use a Textarea
|
|
1507
1475
|
**/
|
|
1508
1476
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1509
|
-
var templateObject_1$
|
|
1477
|
+
var templateObject_1$L;
|
|
1510
1478
|
|
|
1511
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1479
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1512
1480
|
/**
|
|
1513
1481
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1514
1482
|
* <hr>
|
|
@@ -1520,7 +1488,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$J ||
|
|
|
1520
1488
|
* - To select from a long list of options, use Select instead
|
|
1521
1489
|
**/
|
|
1522
1490
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1523
|
-
var templateObject_1$
|
|
1491
|
+
var templateObject_1$K;
|
|
1524
1492
|
|
|
1525
1493
|
var _path$i;
|
|
1526
1494
|
|
|
@@ -1540,7 +1508,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1540
1508
|
})));
|
|
1541
1509
|
};
|
|
1542
1510
|
|
|
1543
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$
|
|
1511
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$J || (templateObject_1$J = __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) {
|
|
1544
1512
|
var theme = _a.theme;
|
|
1545
1513
|
return theme.space.base;
|
|
1546
1514
|
}, function (_a) {
|
|
@@ -1550,7 +1518,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1
|
|
|
1550
1518
|
var theme = _a.theme;
|
|
1551
1519
|
return theme.fontWeights.medium;
|
|
1552
1520
|
});
|
|
1553
|
-
var Circle = styled__default["default"].div(templateObject_2$
|
|
1521
|
+
var Circle = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
|
|
1554
1522
|
var theme = _a.theme;
|
|
1555
1523
|
return theme.space.base * 6;
|
|
1556
1524
|
}, function (_a) {
|
|
@@ -1574,9 +1542,9 @@ var RadioCard = function (_a) {
|
|
|
1574
1542
|
props.onChecked && props.onChecked(props.value);
|
|
1575
1543
|
} }, { 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 })) }))] })));
|
|
1576
1544
|
};
|
|
1577
|
-
var templateObject_1$
|
|
1545
|
+
var templateObject_1$J, templateObject_2$j;
|
|
1578
1546
|
|
|
1579
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1547
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1580
1548
|
/**
|
|
1581
1549
|
* A Textarea is a form control for multi-line text.
|
|
1582
1550
|
* <hr>
|
|
@@ -1584,9 +1552,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1584
1552
|
* - To enter multi-line text
|
|
1585
1553
|
**/
|
|
1586
1554
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1587
|
-
var templateObject_1$
|
|
1555
|
+
var templateObject_1$I;
|
|
1588
1556
|
|
|
1589
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1557
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1590
1558
|
/**
|
|
1591
1559
|
* 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.
|
|
1592
1560
|
* <hr>
|
|
@@ -1597,11 +1565,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$G
|
|
|
1597
1565
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1598
1566
|
**/
|
|
1599
1567
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1600
|
-
var templateObject_1$
|
|
1568
|
+
var templateObject_1$H;
|
|
1601
1569
|
|
|
1602
|
-
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$
|
|
1570
|
+
var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$G || (templateObject_1$G = __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);
|
|
1603
1571
|
var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
|
|
1604
|
-
var templateObject_1$
|
|
1572
|
+
var templateObject_1$G;
|
|
1605
1573
|
|
|
1606
1574
|
var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
|
|
1607
1575
|
|
|
@@ -1664,15 +1632,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1664
1632
|
})));
|
|
1665
1633
|
};
|
|
1666
1634
|
|
|
1667
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1635
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1668
1636
|
var Icon = function (props) {
|
|
1669
1637
|
var type = props.type, size = props.size;
|
|
1670
1638
|
var dim = size !== null && size !== void 0 ? size : 24;
|
|
1671
1639
|
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 })] }));
|
|
1672
1640
|
};
|
|
1673
|
-
var templateObject_1$
|
|
1641
|
+
var templateObject_1$F;
|
|
1674
1642
|
|
|
1675
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1643
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
|
|
1676
1644
|
/**
|
|
1677
1645
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1678
1646
|
* <hr>
|
|
@@ -1684,9 +1652,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1684
1652
|
- When loading page content, use a Skeleton loader instead
|
|
1685
1653
|
*/
|
|
1686
1654
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1687
|
-
var templateObject_1$
|
|
1655
|
+
var templateObject_1$E;
|
|
1688
1656
|
|
|
1689
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1657
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1690
1658
|
/**
|
|
1691
1659
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1692
1660
|
* <hr>
|
|
@@ -1695,9 +1663,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1695
1663
|
- To provide a quick way to navigate to ancestor pages
|
|
1696
1664
|
*/
|
|
1697
1665
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1698
|
-
var templateObject_1$
|
|
1666
|
+
var templateObject_1$D;
|
|
1699
1667
|
|
|
1700
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1668
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1701
1669
|
var theme = _a.theme;
|
|
1702
1670
|
return theme.palette.white;
|
|
1703
1671
|
});
|
|
@@ -1705,7 +1673,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$B ||
|
|
|
1705
1673
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1706
1674
|
*/
|
|
1707
1675
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1708
|
-
var templateObject_1$
|
|
1676
|
+
var templateObject_1$C;
|
|
1709
1677
|
|
|
1710
1678
|
/**
|
|
1711
1679
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1729,23 +1697,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1729
1697
|
})));
|
|
1730
1698
|
};
|
|
1731
1699
|
|
|
1732
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1700
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1733
1701
|
var theme = _a.theme;
|
|
1734
1702
|
return theme.fonts.system;
|
|
1735
1703
|
});
|
|
1736
|
-
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$
|
|
1704
|
+
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1737
1705
|
var theme = _a.theme;
|
|
1738
1706
|
return theme.fonts.system;
|
|
1739
1707
|
});
|
|
1740
1708
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1741
|
-
var templateObject_1$
|
|
1709
|
+
var templateObject_1$B, templateObject_2$i;
|
|
1742
1710
|
|
|
1743
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1711
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1744
1712
|
var theme = _a.theme;
|
|
1745
1713
|
return theme.fonts.system;
|
|
1746
1714
|
});
|
|
1747
1715
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1748
|
-
var templateObject_1$
|
|
1716
|
+
var templateObject_1$A;
|
|
1749
1717
|
|
|
1750
1718
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1751
1719
|
|
|
@@ -1794,7 +1762,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1794
1762
|
})));
|
|
1795
1763
|
};
|
|
1796
1764
|
|
|
1797
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1765
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1798
1766
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1799
1767
|
return isCompact &&
|
|
1800
1768
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1810,13 +1778,13 @@ var WorkspacesDropdown = function (props) {
|
|
|
1810
1778
|
? selectedWorkspace.company + "'s workspace"
|
|
1811
1779
|
: "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 }))); })] })] })));
|
|
1812
1780
|
};
|
|
1813
|
-
var templateObject_1$
|
|
1781
|
+
var templateObject_1$z;
|
|
1814
1782
|
|
|
1815
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1783
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$y || (templateObject_1$y = __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) {
|
|
1816
1784
|
var theme = _a.theme;
|
|
1817
1785
|
return theme.breakpoints.md;
|
|
1818
1786
|
});
|
|
1819
|
-
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$
|
|
1787
|
+
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$h || (templateObject_2$h = __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) {
|
|
1820
1788
|
var theme = _a.theme;
|
|
1821
1789
|
return theme.colors.primaryHue;
|
|
1822
1790
|
}, function (_a) {
|
|
@@ -1826,7 +1794,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1826
1794
|
var theme = _a.theme;
|
|
1827
1795
|
return theme.breakpoints.md;
|
|
1828
1796
|
});
|
|
1829
|
-
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$
|
|
1797
|
+
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$d || (templateObject_3$d = __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) {
|
|
1830
1798
|
var theme = _a.theme;
|
|
1831
1799
|
return theme.colors.primaryHue;
|
|
1832
1800
|
}, function (_a) {
|
|
@@ -1836,7 +1804,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
|
|
|
1836
1804
|
var theme = _a.theme;
|
|
1837
1805
|
return theme.breakpoints.md;
|
|
1838
1806
|
});
|
|
1839
|
-
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$
|
|
1807
|
+
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$8 || (templateObject_4$8 = __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) {
|
|
1840
1808
|
var theme = _a.theme;
|
|
1841
1809
|
return theme.colors.primaryHue;
|
|
1842
1810
|
}, function (_a) {
|
|
@@ -1846,9 +1814,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1846
1814
|
var BrandItem = function (props) {
|
|
1847
1815
|
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 }) }))) }))] }));
|
|
1848
1816
|
};
|
|
1849
|
-
var templateObject_1$
|
|
1817
|
+
var templateObject_1$y, templateObject_2$h, templateObject_3$d, templateObject_4$8;
|
|
1850
1818
|
|
|
1851
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1819
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1852
1820
|
/**
|
|
1853
1821
|
* An Header is a visual way to display general information.
|
|
1854
1822
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1857,13 +1825,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1857
1825
|
Header.HeaderItem = HeaderItem;
|
|
1858
1826
|
Header.HeaderItemText = HeaderItemText;
|
|
1859
1827
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1860
|
-
var templateObject_1$
|
|
1828
|
+
var templateObject_1$x;
|
|
1861
1829
|
|
|
1862
1830
|
var HeaderSkeleton = function () {
|
|
1863
1831
|
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%" } }) }) }) }))] })));
|
|
1864
1832
|
};
|
|
1865
1833
|
|
|
1866
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1834
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1867
1835
|
var theme = _a.theme;
|
|
1868
1836
|
return theme.breakpoints.sm;
|
|
1869
1837
|
});
|
|
@@ -1875,9 +1843,9 @@ var AppHeader = function (_a) {
|
|
|
1875
1843
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1876
1844
|
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, {}) }))] }) }) }))] })));
|
|
1877
1845
|
};
|
|
1878
|
-
var templateObject_1$
|
|
1846
|
+
var templateObject_1$w;
|
|
1879
1847
|
|
|
1880
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1848
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$v || (templateObject_1$v = __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) {
|
|
1881
1849
|
var theme = _a.theme;
|
|
1882
1850
|
return theme.borders.sm;
|
|
1883
1851
|
}, function (_a) {
|
|
@@ -1904,10 +1872,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$u || (t
|
|
|
1904
1872
|
- To give a consistent dashboard and navigation experience
|
|
1905
1873
|
*/
|
|
1906
1874
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1907
|
-
var templateObject_1$
|
|
1875
|
+
var templateObject_1$v;
|
|
1908
1876
|
|
|
1909
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1910
|
-
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$
|
|
1877
|
+
var SelectedItemStyle = styled.css(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1878
|
+
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$g || (templateObject_2$g = __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) {
|
|
1911
1879
|
var theme = _a.theme;
|
|
1912
1880
|
return theme.fonts.system;
|
|
1913
1881
|
}, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.colors.primaryHue; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
|
|
@@ -1918,11 +1886,11 @@ var NavItem = function (props) {
|
|
|
1918
1886
|
// const { isExpanded } = props;
|
|
1919
1887
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1920
1888
|
};
|
|
1921
|
-
var templateObject_1$
|
|
1889
|
+
var templateObject_1$u, templateObject_2$g;
|
|
1922
1890
|
|
|
1923
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1891
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
|
|
1924
1892
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1925
|
-
var templateObject_1$
|
|
1893
|
+
var templateObject_1$t;
|
|
1926
1894
|
|
|
1927
1895
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1928
1896
|
|
|
@@ -1960,7 +1928,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1960
1928
|
})));
|
|
1961
1929
|
};
|
|
1962
1930
|
|
|
1963
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1931
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$s || (templateObject_1$s = __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) {
|
|
1964
1932
|
var theme = _a.theme;
|
|
1965
1933
|
return theme.space.base * 6;
|
|
1966
1934
|
}, function (_a) {
|
|
@@ -1985,18 +1953,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$r ||
|
|
|
1985
1953
|
var NavToggle = function (props) {
|
|
1986
1954
|
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%" } })) })));
|
|
1987
1955
|
};
|
|
1988
|
-
var templateObject_1$
|
|
1956
|
+
var templateObject_1$s;
|
|
1989
1957
|
|
|
1990
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1958
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$r || (templateObject_1$r = __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;"; });
|
|
1991
1959
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1992
|
-
var templateObject_1$
|
|
1960
|
+
var templateObject_1$r;
|
|
1993
1961
|
|
|
1994
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1995
|
-
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$
|
|
1962
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$q || (templateObject_1$q = __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; });
|
|
1963
|
+
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
1996
1964
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1997
1965
|
NavItemProject.Title = NavItemText;
|
|
1998
1966
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1999
|
-
var templateObject_1$
|
|
1967
|
+
var templateObject_1$q, templateObject_2$f;
|
|
2000
1968
|
|
|
2001
1969
|
var _path$a;
|
|
2002
1970
|
|
|
@@ -2165,7 +2133,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
|
|
|
2165
2133
|
})))));
|
|
2166
2134
|
};
|
|
2167
2135
|
|
|
2168
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
2136
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
2169
2137
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
2170
2138
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
2171
2139
|
});
|
|
@@ -2173,11 +2141,11 @@ var LoadingSidebar = function (props) {
|
|
|
2173
2141
|
var isExpanded = props.isExpanded;
|
|
2174
2142
|
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" })] }))] })));
|
|
2175
2143
|
};
|
|
2176
|
-
var templateObject_1$
|
|
2144
|
+
var templateObject_1$p;
|
|
2177
2145
|
|
|
2178
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
2179
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_2$
|
|
2180
|
-
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$
|
|
2146
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
2147
|
+
var ScrollingContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
2148
|
+
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
2181
2149
|
var isExpanded = _a.isExpanded;
|
|
2182
2150
|
return isExpanded &&
|
|
2183
2151
|
"\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
|
|
@@ -2212,9 +2180,9 @@ var Sidebar = function (props) {
|
|
|
2212
2180
|
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.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 &&
|
|
2213
2181
|
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" })] }))] })));
|
|
2214
2182
|
};
|
|
2215
|
-
var templateObject_1$
|
|
2183
|
+
var templateObject_1$o, templateObject_2$e, templateObject_3$c;
|
|
2216
2184
|
|
|
2217
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
2185
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$n || (templateObject_1$n = __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) {
|
|
2218
2186
|
var theme = _a.theme;
|
|
2219
2187
|
return theme.breakpoints.sm;
|
|
2220
2188
|
}, function (_a) {
|
|
@@ -2225,21 +2193,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$m ||
|
|
|
2225
2193
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
2226
2194
|
*/
|
|
2227
2195
|
var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
2228
|
-
var templateObject_1$
|
|
2196
|
+
var templateObject_1$n;
|
|
2229
2197
|
|
|
2230
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
2198
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$m || (templateObject_1$m = __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]);
|
|
2231
2199
|
var PageLoader = function () {
|
|
2232
2200
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
2233
2201
|
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$1, { 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: "" }) }))] })] })] })] }) })));
|
|
2234
2202
|
};
|
|
2235
|
-
var templateObject_1$
|
|
2203
|
+
var templateObject_1$m;
|
|
2236
2204
|
|
|
2237
2205
|
/**
|
|
2238
2206
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
2239
2207
|
*/
|
|
2240
2208
|
var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
|
|
2241
2209
|
|
|
2242
|
-
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$
|
|
2210
|
+
var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$l || (templateObject_1$l = __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);
|
|
2243
2211
|
/**
|
|
2244
2212
|
* Login Form
|
|
2245
2213
|
* <hr>
|
|
@@ -2270,9 +2238,9 @@ var LoginForm = function (props) {
|
|
|
2270
2238
|
: 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 })) })))] })));
|
|
2271
2239
|
} }))] })), 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"] })))] }));
|
|
2272
2240
|
};
|
|
2273
|
-
var templateObject_1$
|
|
2241
|
+
var templateObject_1$l;
|
|
2274
2242
|
|
|
2275
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
2243
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
2276
2244
|
var theme = _a.theme;
|
|
2277
2245
|
return theme.palette.grey["800"];
|
|
2278
2246
|
});
|
|
@@ -2281,10 +2249,10 @@ var FooterItem = reactModals.FooterItem;
|
|
|
2281
2249
|
Modal.Header = reactModals.Header;
|
|
2282
2250
|
Modal.Body = ugModalBody;
|
|
2283
2251
|
Modal.Footer = reactModals.Footer;
|
|
2284
|
-
var templateObject_1$
|
|
2252
|
+
var templateObject_1$k;
|
|
2285
2253
|
|
|
2286
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
2287
|
-
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$
|
|
2254
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
|
|
2255
|
+
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2288
2256
|
var theme = _a.theme;
|
|
2289
2257
|
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
2290
2258
|
}, function (_a) {
|
|
@@ -2294,7 +2262,7 @@ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c |
|
|
|
2294
2262
|
var theme = _a.theme;
|
|
2295
2263
|
return theme.space.md;
|
|
2296
2264
|
});
|
|
2297
|
-
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$
|
|
2265
|
+
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2298
2266
|
var theme = _a.theme;
|
|
2299
2267
|
return theme.palette.grey["100"];
|
|
2300
2268
|
}, function (_a) {
|
|
@@ -2307,7 +2275,7 @@ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a ||
|
|
|
2307
2275
|
var theme = _a.theme;
|
|
2308
2276
|
return "".concat(theme.space.lg, " ").concat(theme.space.md);
|
|
2309
2277
|
});
|
|
2310
|
-
var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$
|
|
2278
|
+
var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n"], ["\n padding: ", "px\n ", "px;\n"])), function (_a) {
|
|
2311
2279
|
var theme = _a.theme;
|
|
2312
2280
|
return theme.space.base * 4;
|
|
2313
2281
|
}, function (_a) {
|
|
@@ -2321,7 +2289,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2321
2289
|
ModalFullScreen.Footer = StyledFooter;
|
|
2322
2290
|
ModalFullScreen.Close = StyledModalClose;
|
|
2323
2291
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2324
|
-
var templateObject_1$
|
|
2292
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$4;
|
|
2325
2293
|
|
|
2326
2294
|
/**
|
|
2327
2295
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2342,7 +2310,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2342
2310
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2343
2311
|
var useToast = reactNotifications.useToast;
|
|
2344
2312
|
|
|
2345
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2313
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject([""], [""])));
|
|
2346
2314
|
/**
|
|
2347
2315
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2348
2316
|
|
|
@@ -2352,21 +2320,21 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2352
2320
|
*/
|
|
2353
2321
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2354
2322
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2355
|
-
var templateObject_1$
|
|
2323
|
+
var templateObject_1$i;
|
|
2356
2324
|
|
|
2357
|
-
var MainContainer = styled__default["default"].div(templateObject_1$
|
|
2358
|
-
var InformationContainer = styled__default["default"].div(templateObject_2$
|
|
2325
|
+
var MainContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2326
|
+
var InformationContainer = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"], ["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
|
|
2359
2327
|
var theme = _a.theme;
|
|
2360
2328
|
return theme.space.xs;
|
|
2361
2329
|
}, function (_a) {
|
|
2362
2330
|
var theme = _a.theme;
|
|
2363
2331
|
return theme.breakpoints.sm;
|
|
2364
2332
|
});
|
|
2365
|
-
var MetaContainer = styled__default["default"].div(templateObject_3$
|
|
2333
|
+
var MetaContainer = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2366
2334
|
var theme = _a.theme;
|
|
2367
2335
|
return theme.breakpoints.sm;
|
|
2368
2336
|
});
|
|
2369
|
-
var Overline = styled__default["default"](MD)(templateObject_4$
|
|
2337
|
+
var Overline = styled__default["default"](MD)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
2370
2338
|
var theme = _a.theme;
|
|
2371
2339
|
return theme.palette.grey[600];
|
|
2372
2340
|
}, function (_a) {
|
|
@@ -2417,9 +2385,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
|
|
|
2417
2385
|
var Main = function (props) {
|
|
2418
2386
|
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
|
|
2419
2387
|
};
|
|
2420
|
-
var templateObject_1$
|
|
2388
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2421
2389
|
|
|
2422
|
-
var StyledPageHeader = styled__default["default"].div(templateObject_1$
|
|
2390
|
+
var StyledPageHeader = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2423
2391
|
var theme = _a.theme;
|
|
2424
2392
|
return theme.palette.white;
|
|
2425
2393
|
}, function (_a) {
|
|
@@ -2435,14 +2403,14 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$f || (tem
|
|
|
2435
2403
|
var theme = _a.theme;
|
|
2436
2404
|
return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
|
|
2437
2405
|
});
|
|
2438
|
-
var PullLeft = styled__default["default"].div(templateObject_2$
|
|
2406
|
+
var PullLeft = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
|
|
2439
2407
|
var theme = _a.theme;
|
|
2440
2408
|
return "".concat(theme.space.xs, " 10px");
|
|
2441
2409
|
}, function (_a) {
|
|
2442
2410
|
var theme = _a.theme;
|
|
2443
2411
|
return theme.space.xs;
|
|
2444
2412
|
});
|
|
2445
|
-
var ButtonContainer = styled__default["default"].div(templateObject_3$
|
|
2413
|
+
var ButtonContainer = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"])), function (_a) {
|
|
2446
2414
|
var theme = _a.theme;
|
|
2447
2415
|
return theme.space.md;
|
|
2448
2416
|
});
|
|
@@ -2463,7 +2431,7 @@ var PageHeader = function (props) {
|
|
|
2463
2431
|
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2464
2432
|
PageHeader.Main = Main;
|
|
2465
2433
|
PageHeader.Buttons = Buttons;
|
|
2466
|
-
var templateObject_1$
|
|
2434
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9;
|
|
2467
2435
|
|
|
2468
2436
|
var _path$5;
|
|
2469
2437
|
|
|
@@ -2502,9 +2470,30 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2502
2470
|
})));
|
|
2503
2471
|
};
|
|
2504
2472
|
|
|
2505
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2473
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
|
|
2506
2474
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2507
|
-
var templateObject_1$
|
|
2475
|
+
var templateObject_1$f;
|
|
2476
|
+
|
|
2477
|
+
var flexCenter = styled.css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
2478
|
+
var flexColumnCenter = styled.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
2479
|
+
var flexStart = styled.css(templateObject_3$8 || (templateObject_3$8 = __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) {
|
|
2480
|
+
var theme = _a.theme;
|
|
2481
|
+
return (theme.rtl ? "flex-end" : "flex-start");
|
|
2482
|
+
});
|
|
2483
|
+
styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
|
|
2484
|
+
var theme = _a.theme;
|
|
2485
|
+
return theme.borderRadii.lg;
|
|
2486
|
+
}, function (_a) {
|
|
2487
|
+
var theme = _a.theme;
|
|
2488
|
+
return theme.components.notification.card.padding;
|
|
2489
|
+
}, function (_a) {
|
|
2490
|
+
var theme = _a.theme;
|
|
2491
|
+
return theme.palette.grey["200"];
|
|
2492
|
+
}, function (_a) {
|
|
2493
|
+
var theme = _a.theme;
|
|
2494
|
+
return theme.shadows.boxShadow(theme);
|
|
2495
|
+
});
|
|
2496
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$8, templateObject_4$5;
|
|
2508
2497
|
|
|
2509
2498
|
/**
|
|
2510
2499
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface CampaignCardsProps extends
|
|
1
|
+
import { SpecialCardProps } from "../special-cards/_types";
|
|
2
|
+
export interface CampaignCardsProps extends SpecialCardProps {
|
|
3
3
|
/**
|
|
4
4
|
* displays a new tag in the top right
|
|
5
5
|
*/
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { SpecialCardProps } from "../../../special-cards/_types";
|
|
3
3
|
import { CheckboxArgs } from "../_types";
|
|
4
4
|
export interface CheckboxCardArgs extends CheckboxArgs {
|
|
5
|
-
card?:
|
|
5
|
+
card?: SpecialCardProps;
|
|
6
6
|
label: string;
|
|
7
7
|
icon: React.ReactNode;
|
|
8
8
|
iconActive?: React.ReactNode;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { SpecialCardProps } from "../../../special-cards/_types";
|
|
3
3
|
import { RadioArgs } from "../_types";
|
|
4
4
|
export interface RadioCardArgs extends RadioArgs {
|
|
5
|
-
card?:
|
|
5
|
+
card?: SpecialCardProps;
|
|
6
6
|
label: string;
|
|
7
7
|
icon: React.ReactNode;
|
|
8
8
|
iconActive?: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
export interface ProductCardProps extends
|
|
2
|
+
import { SpecialCardProps } from "../special-cards/_types";
|
|
3
|
+
export interface ProductCardProps extends SpecialCardProps {
|
|
4
4
|
/**
|
|
5
5
|
* displays a new tag in the top right
|
|
6
6
|
*/
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { SpecialCardProps } from "../special-cards/_types";
|
|
3
3
|
interface ITag {
|
|
4
4
|
label: string;
|
|
5
5
|
icon: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
-
export interface ServiceCardsProps extends
|
|
7
|
+
export interface ServiceCardsProps extends SpecialCardProps {
|
|
8
8
|
serviceIcon?: React.ReactNode;
|
|
9
9
|
serviceTitle?: string;
|
|
10
10
|
serviceSubtitle?: string;
|
|
@@ -2,11 +2,13 @@ import { IWellProps } from "@zendeskgarden/react-notifications";
|
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
3
|
export declare const FLEX_DIRECTION: string[];
|
|
4
4
|
export declare const JUSTIFY_CONTENT: string[];
|
|
5
|
-
export interface
|
|
5
|
+
export interface SpecialCardProps extends IWellProps {
|
|
6
6
|
/** Applies a background color */
|
|
7
7
|
isRecessed?: boolean;
|
|
8
8
|
/** Applies a drop shadow */
|
|
9
9
|
isFloating?: boolean;
|
|
10
|
+
/** Reduce opacity and disable pointer events*/
|
|
11
|
+
isDisabled?: boolean;
|
|
10
12
|
}
|
|
11
13
|
export interface CardMetaProps extends HTMLAttributes<HTMLDivElement> {
|
|
12
14
|
direction?: typeof FLEX_DIRECTION[number];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SpecialCardProps } from "./_types";
|
|
2
2
|
/**
|
|
3
3
|
* A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
|
|
4
4
|
* <hr>
|
|
@@ -7,7 +7,7 @@ import { CardProps } from "./_types";
|
|
|
7
7
|
- As container of input (checkboxCard, radioCard)
|
|
8
8
|
*/
|
|
9
9
|
declare const SpecialCard: {
|
|
10
|
-
(props:
|
|
10
|
+
(props: SpecialCardProps): JSX.Element;
|
|
11
11
|
Meta: import("styled-components").StyledComponent<"div", any, import("./_types").CardMetaProps, never>;
|
|
12
12
|
Thumb: import("styled-components").StyledComponent<"div", any, import("./_types").CardThumbProps, never>;
|
|
13
13
|
Header: {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { ComponentMeta, Story } from "@storybook/react";
|
|
2
|
-
import {
|
|
3
|
-
interface CardStoryProps extends
|
|
2
|
+
import { SpecialCardProps } from "./_types";
|
|
3
|
+
interface CardStoryProps extends SpecialCardProps {
|
|
4
4
|
title: string;
|
|
5
5
|
content: string;
|
|
6
6
|
}
|
|
7
7
|
export declare const Default: Story<CardStoryProps>;
|
|
8
8
|
declare const _default: ComponentMeta<{
|
|
9
|
-
(props:
|
|
9
|
+
(props: SpecialCardProps): JSX.Element;
|
|
10
10
|
Meta: import("styled-components").StyledComponent<"div", any, import("./_types").CardMetaProps, never>;
|
|
11
11
|
Thumb: import("styled-components").StyledComponent<"div", any, import("./_types").CardThumbProps, never>;
|
|
12
12
|
Header: {
|