@appquality/unguess-design-system 2.10.30 → 2.10.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -0
- package/build/index.d.ts +1 -0
- package/build/index.js +178 -156
- package/build/stories/timeline/_types.d.ts +14 -0
- package/build/stories/timeline/index.d.ts +17 -0
- package/build/stories/timeline/index.stories.d.ts +20 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
# v2.10.33 (Tue May 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Cup 739 timeline component [#56](https://github.com/AppQuality/unguess-design-system/pull/56) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.32 (Tue May 17 2022)
|
|
14
|
+
|
|
15
|
+
#### ⚠️ Pushed to `master`
|
|
16
|
+
|
|
17
|
+
- fix(stepper): remove useless console.log ([@cannarocks](https://github.com/cannarocks))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v2.10.31 (Tue May 17 2022)
|
|
26
|
+
|
|
27
|
+
#### ⚠️ Pushed to `master`
|
|
28
|
+
|
|
29
|
+
- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@marcbon](https://github.com/marcbon))
|
|
30
|
+
- fix(global): remove useless main style + insert html overflow auto in global style ([@marcbon](https://github.com/marcbon))
|
|
31
|
+
|
|
32
|
+
#### Authors: 1
|
|
33
|
+
|
|
34
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
1
38
|
# v2.10.30 (Tue May 17 2022)
|
|
2
39
|
|
|
3
40
|
#### ⚠️ Pushed to `master`
|
package/build/index.d.ts
CHANGED
|
@@ -61,6 +61,7 @@ export { Table, Head as TableHead, HeaderRow, HeaderCell, Body as TableBody, Row
|
|
|
61
61
|
export { GroupRow, GroupedTable, } from "./stories/table/grouped";
|
|
62
62
|
export * from "./stories/tags";
|
|
63
63
|
export * from "./stories/tiles";
|
|
64
|
+
export * from "./stories/timeline";
|
|
64
65
|
export * from "./stories/theme";
|
|
65
66
|
export * from "./stories/title";
|
|
66
67
|
export * from "./stories/trigger";
|
package/build/index.js
CHANGED
|
@@ -243,8 +243,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
243
243
|
|
|
244
244
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
245
245
|
|
|
246
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
247
|
-
var templateObject_1$
|
|
246
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
|
|
247
|
+
var templateObject_1$Y;
|
|
248
248
|
|
|
249
249
|
/**
|
|
250
250
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -259,7 +259,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
259
259
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
260
260
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
261
261
|
|
|
262
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
262
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n"])), function (_a) {
|
|
263
263
|
var theme = _a.theme;
|
|
264
264
|
return theme.palette.grey[700];
|
|
265
265
|
});
|
|
@@ -273,10 +273,10 @@ var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObjec
|
|
|
273
273
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
274
274
|
Alert.Title = reactNotifications.Title;
|
|
275
275
|
Alert.Close = reactNotifications.Close;
|
|
276
|
-
var templateObject_1$
|
|
276
|
+
var templateObject_1$X;
|
|
277
277
|
|
|
278
278
|
// import useWindowSize from "../../hooks/useWindowSize";
|
|
279
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
279
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
280
280
|
return props.avatarType &&
|
|
281
281
|
props.avatarType !== "image" &&
|
|
282
282
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -301,7 +301,7 @@ var Avatar = function (props) {
|
|
|
301
301
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
302
302
|
};
|
|
303
303
|
Avatar.Text = UgAvatar.Text;
|
|
304
|
-
var templateObject_1$
|
|
304
|
+
var templateObject_1$W;
|
|
305
305
|
|
|
306
306
|
/**
|
|
307
307
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -322,7 +322,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
|
|
|
322
322
|
*/
|
|
323
323
|
var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
|
|
324
324
|
|
|
325
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
325
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject([""], [""])));
|
|
326
326
|
/**
|
|
327
327
|
* Buttons let users take action quickly.
|
|
328
328
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -334,7 +334,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
|
334
334
|
var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
|
|
335
335
|
Button.StartIcon = UgButton.StartIcon;
|
|
336
336
|
Button.EndIcon = UgButton.EndIcon;
|
|
337
|
-
var templateObject_1$
|
|
337
|
+
var templateObject_1$V;
|
|
338
338
|
|
|
339
339
|
/**
|
|
340
340
|
A Button group lets users make a selection from a set of options.
|
|
@@ -364,7 +364,7 @@ Used for this:
|
|
|
364
364
|
**/
|
|
365
365
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
366
366
|
|
|
367
|
-
var ContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
367
|
+
var ContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
368
368
|
var theme = _a.theme;
|
|
369
369
|
return theme.borderRadii.lg;
|
|
370
370
|
}, function (_a) {
|
|
@@ -385,11 +385,11 @@ var ContentCard = styled__default["default"](reactNotifications.Well)(templateOb
|
|
|
385
385
|
- To group related content
|
|
386
386
|
*/
|
|
387
387
|
var Card = function (props) { return jsxRuntime.jsx(ContentCard, __assign({}, props)); };
|
|
388
|
-
var ContainerCard = styled__default["default"](Card)(templateObject_2$
|
|
388
|
+
var ContainerCard = styled__default["default"](Card)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
389
389
|
var theme = _a.theme;
|
|
390
390
|
return theme.borderRadii.xl;
|
|
391
391
|
});
|
|
392
|
-
var templateObject_1$
|
|
392
|
+
var templateObject_1$U, templateObject_2$n;
|
|
393
393
|
|
|
394
394
|
/**
|
|
395
395
|
* Tags let users categorize content using a keyword.
|
|
@@ -406,13 +406,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
406
406
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
407
407
|
Tag.Close = reactTags.Tag.Close;
|
|
408
408
|
|
|
409
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
409
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
|
|
410
410
|
/**
|
|
411
411
|
* A Label is used to specify a title for an input.
|
|
412
412
|
* <hr>
|
|
413
413
|
**/
|
|
414
414
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
415
|
-
var templateObject_1$
|
|
415
|
+
var templateObject_1$T;
|
|
416
416
|
|
|
417
417
|
var _g$4, _path$q;
|
|
418
418
|
|
|
@@ -619,7 +619,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
|
|
|
619
619
|
})));
|
|
620
620
|
};
|
|
621
621
|
|
|
622
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
622
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n"], ["\n background-color: ", ";\n border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
|
|
623
623
|
/**
|
|
624
624
|
* A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
|
|
625
625
|
* <hr>
|
|
@@ -634,15 +634,15 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
634
634
|
- To communicate a typing status, use Inline instead
|
|
635
635
|
*/
|
|
636
636
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
637
|
-
var templateObject_1$
|
|
637
|
+
var templateObject_1$S;
|
|
638
638
|
|
|
639
639
|
var CampaignCardSkeleton = function () {
|
|
640
640
|
return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
641
641
|
};
|
|
642
642
|
|
|
643
|
-
var flexCenter = styled.css(templateObject_1$
|
|
644
|
-
var flexColumnCenter = styled.css(templateObject_2$
|
|
645
|
-
var flexStart = styled.css(templateObject_3$
|
|
643
|
+
var flexCenter = styled.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
644
|
+
var flexColumnCenter = styled.css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
645
|
+
var flexStart = styled.css(templateObject_3$f || (templateObject_3$f = __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) {
|
|
646
646
|
var theme = _a.theme;
|
|
647
647
|
return (theme.rtl ? "flex-end" : "flex-start");
|
|
648
648
|
});
|
|
@@ -659,7 +659,7 @@ var cardStyle = styled.css(templateObject_4$b || (templateObject_4$b = __makeTem
|
|
|
659
659
|
var theme = _a.theme;
|
|
660
660
|
return theme.shadows.boxShadow(theme);
|
|
661
661
|
});
|
|
662
|
-
var templateObject_1$
|
|
662
|
+
var templateObject_1$R, templateObject_2$m, templateObject_3$f, templateObject_4$b;
|
|
663
663
|
|
|
664
664
|
var getStatusIcon = function (status) {
|
|
665
665
|
switch (status) {
|
|
@@ -683,12 +683,12 @@ var getTypeDataIcon = function (type) {
|
|
|
683
683
|
return SvgFunctionalTestIcon;
|
|
684
684
|
}
|
|
685
685
|
};
|
|
686
|
-
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$
|
|
687
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$
|
|
686
|
+
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
|
|
687
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), function (_a) {
|
|
688
688
|
var theme = _a.theme;
|
|
689
689
|
return theme.palette.grey["700"];
|
|
690
690
|
});
|
|
691
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$
|
|
691
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$e || (templateObject_3$e = __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) {
|
|
692
692
|
var theme = _a.theme;
|
|
693
693
|
return theme.space.base * 6;
|
|
694
694
|
}, function (_a) {
|
|
@@ -745,9 +745,9 @@ var CampaignCard = function (props) {
|
|
|
745
745
|
}
|
|
746
746
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { 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(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
747
747
|
};
|
|
748
|
-
var templateObject_1$
|
|
748
|
+
var templateObject_1$Q, templateObject_2$l, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
|
|
749
749
|
|
|
750
|
-
var Wrapper = styled__default["default"](Card)(templateObject_1$
|
|
750
|
+
var Wrapper = styled__default["default"](Card)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
751
751
|
var theme = _a.theme;
|
|
752
752
|
return theme.borderRadii.lg;
|
|
753
753
|
}, function (_a) {
|
|
@@ -760,7 +760,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$O || (templateOb
|
|
|
760
760
|
var theme = _a.theme;
|
|
761
761
|
return theme.shadows.boxShadow(theme);
|
|
762
762
|
});
|
|
763
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_2$
|
|
763
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_2$k || (templateObject_2$k = __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) {
|
|
764
764
|
var theme = _a.theme;
|
|
765
765
|
return theme.space.base * 6;
|
|
766
766
|
}, function (_a) {
|
|
@@ -773,7 +773,7 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$j || (templa
|
|
|
773
773
|
var theme = _a.theme;
|
|
774
774
|
return theme.palette.white;
|
|
775
775
|
});
|
|
776
|
-
var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$
|
|
776
|
+
var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
777
777
|
var theme = _a.theme;
|
|
778
778
|
return theme.fontSizes.sm;
|
|
779
779
|
}, function (_a) {
|
|
@@ -808,7 +808,7 @@ var ProductCard = function (props) {
|
|
|
808
808
|
}
|
|
809
809
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, __assign({ onClick: props.onCtaClick }, { children: [isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))), props.icon && jsxRuntime.jsx(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] })), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
|
|
810
810
|
};
|
|
811
|
-
var templateObject_1$
|
|
811
|
+
var templateObject_1$P, templateObject_2$k, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
|
|
812
812
|
|
|
813
813
|
/**
|
|
814
814
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1052,8 +1052,8 @@ function useWindowSize() {
|
|
|
1052
1052
|
return size;
|
|
1053
1053
|
}
|
|
1054
1054
|
|
|
1055
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1056
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
1055
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
|
|
1056
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"])), function (_a) {
|
|
1057
1057
|
var theme = _a.theme;
|
|
1058
1058
|
return theme.fontWeights.regular;
|
|
1059
1059
|
}, function (_a) {
|
|
@@ -1090,7 +1090,7 @@ var Counter = function (props) {
|
|
|
1090
1090
|
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() })] })));
|
|
1091
1091
|
};
|
|
1092
1092
|
Counter.Avatar = StyledTag.Avatar;
|
|
1093
|
-
var templateObject_1$
|
|
1093
|
+
var templateObject_1$O, templateObject_2$j;
|
|
1094
1094
|
|
|
1095
1095
|
/**
|
|
1096
1096
|
* A Drawer is a container for supplementary content that is anchored to the edge of a page.
|
|
@@ -1106,20 +1106,20 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
|
1106
1106
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1107
1107
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1108
1108
|
|
|
1109
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1110
|
-
var templateObject_1$
|
|
1109
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
|
|
1110
|
+
var templateObject_1$N;
|
|
1111
1111
|
|
|
1112
1112
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1113
1113
|
__proto__: null,
|
|
1114
1114
|
Field: Field$1
|
|
1115
1115
|
});
|
|
1116
1116
|
|
|
1117
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1117
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"], ["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
1118
1118
|
var theme = _a.theme;
|
|
1119
1119
|
return theme.palette.blue[100];
|
|
1120
1120
|
});
|
|
1121
1121
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1122
|
-
var templateObject_1$
|
|
1122
|
+
var templateObject_1$M;
|
|
1123
1123
|
|
|
1124
1124
|
/**
|
|
1125
1125
|
* A Menu is a wrapper for items elements
|
|
@@ -1143,7 +1143,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1143
1143
|
*/
|
|
1144
1144
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1145
1145
|
|
|
1146
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1146
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1147
1147
|
return props.isPrimary &&
|
|
1148
1148
|
"\n background-color: ".concat(props.theme.palette.blue[600], ";\n color: white;\n & svg[data-garden-id=\"forms.media_figure\"] {\n color: white;\n }\n ");
|
|
1149
1149
|
});
|
|
@@ -1160,7 +1160,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1160
1160
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1161
1161
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1162
1162
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1163
|
-
var templateObject_1$
|
|
1163
|
+
var templateObject_1$L;
|
|
1164
1164
|
|
|
1165
1165
|
/**
|
|
1166
1166
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1175,7 +1175,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1175
1175
|
|
|
1176
1176
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1177
1177
|
|
|
1178
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1178
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1179
1179
|
/**
|
|
1180
1180
|
* A Checkbox lets users select and unselect options from a list.
|
|
1181
1181
|
* <hr>
|
|
@@ -1187,17 +1187,17 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1187
1187
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1188
1188
|
**/
|
|
1189
1189
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1190
|
-
var templateObject_1$
|
|
1190
|
+
var templateObject_1$K;
|
|
1191
1191
|
|
|
1192
|
-
var StyledCard$1 = styled__default["default"](Card)(templateObject_1$
|
|
1192
|
+
var StyledCard$1 = styled__default["default"](Card)(templateObject_1$J || (templateObject_1$J = __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) {
|
|
1193
1193
|
var theme = _a.theme;
|
|
1194
1194
|
return theme.palette.blue[300];
|
|
1195
1195
|
});
|
|
1196
|
-
var IconWrapper$1 = styled__default["default"].div(templateObject_2$
|
|
1196
|
+
var IconWrapper$1 = styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1197
1197
|
var theme = _a.theme;
|
|
1198
1198
|
return theme.space.base;
|
|
1199
1199
|
});
|
|
1200
|
-
var LabelWrapper = styled__default["default"](Label)(templateObject_3$
|
|
1200
|
+
var LabelWrapper = styled__default["default"](Label)(templateObject_3$c || (templateObject_3$c = __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) {
|
|
1201
1201
|
var theme = _a.theme;
|
|
1202
1202
|
return theme.space.base;
|
|
1203
1203
|
}, function (_a) {
|
|
@@ -1216,14 +1216,14 @@ var CheckboxCard = function (props) {
|
|
|
1216
1216
|
};
|
|
1217
1217
|
return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper$1, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), 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 })) }))] })));
|
|
1218
1218
|
};
|
|
1219
|
-
var templateObject_1$
|
|
1219
|
+
var templateObject_1$J, templateObject_2$i, templateObject_3$c, templateObject_4$8;
|
|
1220
1220
|
|
|
1221
|
-
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$
|
|
1221
|
+
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1222
1222
|
/**
|
|
1223
1223
|
* A Field is a wrapper for input elements
|
|
1224
1224
|
**/
|
|
1225
1225
|
var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
|
|
1226
|
-
var templateObject_1$
|
|
1226
|
+
var templateObject_1$I;
|
|
1227
1227
|
|
|
1228
1228
|
var index = /*#__PURE__*/Object.freeze({
|
|
1229
1229
|
__proto__: null,
|
|
@@ -1231,8 +1231,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
1231
1231
|
Hint: reactForms.Hint
|
|
1232
1232
|
});
|
|
1233
1233
|
|
|
1234
|
-
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$
|
|
1235
|
-
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$
|
|
1234
|
+
var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
|
|
1235
|
+
var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject([""], [""])));
|
|
1236
1236
|
/**
|
|
1237
1237
|
* An Input lets users enter text into a field.
|
|
1238
1238
|
* <hr>
|
|
@@ -1241,9 +1241,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$g || (te
|
|
|
1241
1241
|
* - To enter multiline text, use a Textarea
|
|
1242
1242
|
**/
|
|
1243
1243
|
var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
|
|
1244
|
-
var templateObject_1$
|
|
1244
|
+
var templateObject_1$H, templateObject_2$h;
|
|
1245
1245
|
|
|
1246
|
-
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$
|
|
1246
|
+
var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
|
|
1247
1247
|
/**
|
|
1248
1248
|
* Media elements add even more context to an input.
|
|
1249
1249
|
* <hr>
|
|
@@ -1252,9 +1252,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
|
|
|
1252
1252
|
* - To enter multiline text, use a Textarea
|
|
1253
1253
|
**/
|
|
1254
1254
|
var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
|
|
1255
|
-
var templateObject_1$
|
|
1255
|
+
var templateObject_1$G;
|
|
1256
1256
|
|
|
1257
|
-
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$
|
|
1257
|
+
var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
|
|
1258
1258
|
/**
|
|
1259
1259
|
* Radio buttons let users choose a single option among two or more mutually exclusive options.
|
|
1260
1260
|
* <hr>
|
|
@@ -1266,7 +1266,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$E ||
|
|
|
1266
1266
|
* - To select from a long list of options, use Select instead
|
|
1267
1267
|
**/
|
|
1268
1268
|
var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
|
|
1269
|
-
var templateObject_1$
|
|
1269
|
+
var templateObject_1$F;
|
|
1270
1270
|
|
|
1271
1271
|
var _path$g;
|
|
1272
1272
|
|
|
@@ -1286,15 +1286,15 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1286
1286
|
})));
|
|
1287
1287
|
};
|
|
1288
1288
|
|
|
1289
|
-
var StyledCard = styled__default["default"](Card)(templateObject_1$
|
|
1289
|
+
var StyledCard = styled__default["default"](Card)(templateObject_1$E || (templateObject_1$E = __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) {
|
|
1290
1290
|
var theme = _a.theme;
|
|
1291
1291
|
return theme.palette.blue[300];
|
|
1292
1292
|
});
|
|
1293
|
-
var IconWrapper = styled__default["default"].div(templateObject_2$
|
|
1293
|
+
var IconWrapper = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1294
1294
|
var theme = _a.theme;
|
|
1295
1295
|
return theme.space.base;
|
|
1296
1296
|
});
|
|
1297
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$
|
|
1297
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1298
1298
|
var theme = _a.theme;
|
|
1299
1299
|
return theme.space.base;
|
|
1300
1300
|
}, function (_a) {
|
|
@@ -1335,9 +1335,9 @@ var RadioCard = function (_a) {
|
|
|
1335
1335
|
var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
|
|
1336
1336
|
return (jsxRuntime.jsxs(StyledCard, __assign({}, card, props, { className: props.checked ? "card-active" : "", onClick: function () { props.onChecked && props.onChecked(props.value); } }, { children: [jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })), jsxRuntime.jsx(IconWrapper, { children: (iconActive && props.checked) ? iconActive : icon }), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsx(StyledText, { children: props.label })] })));
|
|
1337
1337
|
};
|
|
1338
|
-
var templateObject_1$
|
|
1338
|
+
var templateObject_1$E, templateObject_2$g, templateObject_3$b, templateObject_4$7, templateObject_5$3;
|
|
1339
1339
|
|
|
1340
|
-
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$
|
|
1340
|
+
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1341
1341
|
/**
|
|
1342
1342
|
* A Textarea is a form control for multi-line text.
|
|
1343
1343
|
* <hr>
|
|
@@ -1345,9 +1345,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
|
|
|
1345
1345
|
* - To enter multi-line text
|
|
1346
1346
|
**/
|
|
1347
1347
|
var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
|
|
1348
|
-
var templateObject_1$
|
|
1348
|
+
var templateObject_1$D;
|
|
1349
1349
|
|
|
1350
|
-
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$
|
|
1350
|
+
var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
|
|
1351
1351
|
/**
|
|
1352
1352
|
* 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.
|
|
1353
1353
|
* <hr>
|
|
@@ -1358,7 +1358,7 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$B
|
|
|
1358
1358
|
* - To let users select from a list of settings, use Checkboxes instead
|
|
1359
1359
|
**/
|
|
1360
1360
|
var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
|
|
1361
|
-
var templateObject_1$
|
|
1361
|
+
var templateObject_1$C;
|
|
1362
1362
|
|
|
1363
1363
|
var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
|
|
1364
1364
|
|
|
@@ -1423,7 +1423,7 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
|
|
|
1423
1423
|
})));
|
|
1424
1424
|
};
|
|
1425
1425
|
|
|
1426
|
-
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$
|
|
1426
|
+
var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
|
|
1427
1427
|
var Icon = function (props) {
|
|
1428
1428
|
var children = function (type, size) {
|
|
1429
1429
|
if (size === void 0) { size = 24; }
|
|
@@ -1436,9 +1436,9 @@ var Icon = function (props) {
|
|
|
1436
1436
|
};
|
|
1437
1437
|
return (jsxRuntime.jsx(StyledUgIcon$1, { children: children(props.type, props.size) }));
|
|
1438
1438
|
};
|
|
1439
|
-
var templateObject_1$
|
|
1439
|
+
var templateObject_1$B;
|
|
1440
1440
|
|
|
1441
|
-
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$
|
|
1441
|
+
var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
|
|
1442
1442
|
/**
|
|
1443
1443
|
* A Progress loader communicates progress when downloading or uploading content.
|
|
1444
1444
|
* <hr>
|
|
@@ -1450,9 +1450,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
|
|
|
1450
1450
|
- When loading page content, use a Skeleton loader instead
|
|
1451
1451
|
*/
|
|
1452
1452
|
var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
|
|
1453
|
-
var templateObject_1$
|
|
1453
|
+
var templateObject_1$A;
|
|
1454
1454
|
|
|
1455
|
-
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$
|
|
1455
|
+
var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
|
|
1456
1456
|
/**
|
|
1457
1457
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
1458
1458
|
* <hr>
|
|
@@ -1461,9 +1461,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
|
|
|
1461
1461
|
- To provide a quick way to navigate to ancestor pages
|
|
1462
1462
|
*/
|
|
1463
1463
|
var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
|
|
1464
|
-
var templateObject_1$
|
|
1464
|
+
var templateObject_1$z;
|
|
1465
1465
|
|
|
1466
|
-
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$
|
|
1466
|
+
var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1467
1467
|
var theme = _a.theme;
|
|
1468
1468
|
return theme.palette.white;
|
|
1469
1469
|
});
|
|
@@ -1471,7 +1471,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$x ||
|
|
|
1471
1471
|
* A Body defines the main content of an HTML document which displays on the browser
|
|
1472
1472
|
*/
|
|
1473
1473
|
var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
|
|
1474
|
-
var templateObject_1$
|
|
1474
|
+
var templateObject_1$y;
|
|
1475
1475
|
|
|
1476
1476
|
/**
|
|
1477
1477
|
* A Content defines the main content of an HTML document which displays on the browser
|
|
@@ -1495,23 +1495,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1495
1495
|
})));
|
|
1496
1496
|
};
|
|
1497
1497
|
|
|
1498
|
-
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1498
|
+
var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
|
|
1499
1499
|
var theme = _a.theme;
|
|
1500
1500
|
return theme.fonts.system;
|
|
1501
1501
|
});
|
|
1502
|
-
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$
|
|
1502
|
+
styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1503
1503
|
var theme = _a.theme;
|
|
1504
1504
|
return theme.fonts.system;
|
|
1505
1505
|
});
|
|
1506
1506
|
var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
|
|
1507
|
-
var templateObject_1$
|
|
1507
|
+
var templateObject_1$x, templateObject_2$f;
|
|
1508
1508
|
|
|
1509
|
-
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$
|
|
1509
|
+
var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
|
|
1510
1510
|
var theme = _a.theme;
|
|
1511
1511
|
return theme.fonts.system;
|
|
1512
1512
|
});
|
|
1513
1513
|
var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
|
|
1514
|
-
var templateObject_1$
|
|
1514
|
+
var templateObject_1$w;
|
|
1515
1515
|
|
|
1516
1516
|
var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
|
|
1517
1517
|
|
|
@@ -1575,7 +1575,7 @@ var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assi
|
|
|
1575
1575
|
*/
|
|
1576
1576
|
var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
|
|
1577
1577
|
|
|
1578
|
-
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$
|
|
1578
|
+
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1579
1579
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1580
1580
|
return isCompact &&
|
|
1581
1581
|
"\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
|
|
@@ -1591,13 +1591,13 @@ var WorkspacesDropdown = function (props) {
|
|
|
1591
1591
|
? selectedWorkspace.company + "'s workspace"
|
|
1592
1592
|
: "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 }))); })] })] })));
|
|
1593
1593
|
};
|
|
1594
|
-
var templateObject_1$
|
|
1594
|
+
var templateObject_1$v;
|
|
1595
1595
|
|
|
1596
|
-
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$
|
|
1596
|
+
var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$u || (templateObject_1$u = __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) {
|
|
1597
1597
|
var theme = _a.theme;
|
|
1598
1598
|
return theme.breakpoints.sm;
|
|
1599
1599
|
});
|
|
1600
|
-
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$
|
|
1600
|
+
var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1601
1601
|
var theme = _a.theme;
|
|
1602
1602
|
return theme.palette.blue["600"];
|
|
1603
1603
|
}, function (_a) {
|
|
@@ -1607,7 +1607,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1607
1607
|
var theme = _a.theme;
|
|
1608
1608
|
return theme.breakpoints.sm;
|
|
1609
1609
|
});
|
|
1610
|
-
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$
|
|
1610
|
+
var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1611
1611
|
var theme = _a.theme;
|
|
1612
1612
|
return theme.palette.blue["600"];
|
|
1613
1613
|
}, function (_a) {
|
|
@@ -1627,9 +1627,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1627
1627
|
var BrandItem = function (props) {
|
|
1628
1628
|
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 }) }))) }))] }));
|
|
1629
1629
|
};
|
|
1630
|
-
var templateObject_1$
|
|
1630
|
+
var templateObject_1$u, templateObject_2$e, templateObject_3$a, templateObject_4$6;
|
|
1631
1631
|
|
|
1632
|
-
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$
|
|
1632
|
+
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
|
|
1633
1633
|
/**
|
|
1634
1634
|
* An Header is a visual way to display general information.
|
|
1635
1635
|
* This can include navList Items, modal, profile settings.
|
|
@@ -1638,13 +1638,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
|
|
|
1638
1638
|
Header.HeaderItem = HeaderItem;
|
|
1639
1639
|
Header.HeaderItemText = HeaderItemText;
|
|
1640
1640
|
Header.HeaderItemIcon = HeaderItemIcon;
|
|
1641
|
-
var templateObject_1$
|
|
1641
|
+
var templateObject_1$t;
|
|
1642
1642
|
|
|
1643
1643
|
var HeaderSkeleton = function () {
|
|
1644
1644
|
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%" } }) }) }) }))] })));
|
|
1645
1645
|
};
|
|
1646
1646
|
|
|
1647
|
-
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$
|
|
1647
|
+
var ChevronButton = styled__default["default"](IconButton)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1648
1648
|
var theme = _a.theme;
|
|
1649
1649
|
return theme.breakpoints.sm;
|
|
1650
1650
|
});
|
|
@@ -1656,9 +1656,9 @@ var AppHeader = function (_a) {
|
|
|
1656
1656
|
var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
|
|
1657
1657
|
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, {}) }))] }) }) }))] })));
|
|
1658
1658
|
};
|
|
1659
|
-
var templateObject_1$
|
|
1659
|
+
var templateObject_1$s;
|
|
1660
1660
|
|
|
1661
|
-
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$
|
|
1661
|
+
var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$r || (templateObject_1$r = __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) {
|
|
1662
1662
|
var theme = _a.theme;
|
|
1663
1663
|
return theme.borders.sm;
|
|
1664
1664
|
}, function (_a) {
|
|
@@ -1685,10 +1685,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$q || (t
|
|
|
1685
1685
|
- To give a consistent dashboard and navigation experience
|
|
1686
1686
|
*/
|
|
1687
1687
|
var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
|
|
1688
|
-
var templateObject_1$
|
|
1688
|
+
var templateObject_1$r;
|
|
1689
1689
|
|
|
1690
|
-
var SelectedItemStyle = styled.css(templateObject_1$
|
|
1691
|
-
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$
|
|
1690
|
+
var SelectedItemStyle = styled.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
|
|
1691
|
+
var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
|
|
1692
1692
|
var theme = _a.theme;
|
|
1693
1693
|
return theme.fonts.system;
|
|
1694
1694
|
}, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
|
|
@@ -1699,11 +1699,11 @@ var NavItem = function (props) {
|
|
|
1699
1699
|
// const { isExpanded } = props;
|
|
1700
1700
|
return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
|
|
1701
1701
|
};
|
|
1702
|
-
var templateObject_1$
|
|
1702
|
+
var templateObject_1$q, templateObject_2$d;
|
|
1703
1703
|
|
|
1704
|
-
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$
|
|
1704
|
+
var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject([""], [""])));
|
|
1705
1705
|
var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
|
|
1706
|
-
var templateObject_1$
|
|
1706
|
+
var templateObject_1$p;
|
|
1707
1707
|
|
|
1708
1708
|
var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
|
|
1709
1709
|
|
|
@@ -1741,7 +1741,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
1741
1741
|
})));
|
|
1742
1742
|
};
|
|
1743
1743
|
|
|
1744
|
-
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$
|
|
1744
|
+
var StyledToggle = styled__default["default"](IconButton)(templateObject_1$o || (templateObject_1$o = __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) {
|
|
1745
1745
|
var theme = _a.theme;
|
|
1746
1746
|
return theme.space.base * 6;
|
|
1747
1747
|
}, function (_a) {
|
|
@@ -1766,18 +1766,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$n ||
|
|
|
1766
1766
|
var NavToggle = function (props) {
|
|
1767
1767
|
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%" } })) })));
|
|
1768
1768
|
};
|
|
1769
|
-
var templateObject_1$
|
|
1769
|
+
var templateObject_1$o;
|
|
1770
1770
|
|
|
1771
|
-
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$
|
|
1771
|
+
var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$n || (templateObject_1$n = __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;"; });
|
|
1772
1772
|
var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
|
|
1773
|
-
var templateObject_1$
|
|
1773
|
+
var templateObject_1$n;
|
|
1774
1774
|
|
|
1775
|
-
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$
|
|
1776
|
-
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$
|
|
1775
|
+
var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$m || (templateObject_1$m = __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; });
|
|
1776
|
+
var UgNavItem = styled__default["default"](NavItem)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
|
|
1777
1777
|
var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
|
|
1778
1778
|
NavItemProject.Title = NavItemText;
|
|
1779
1779
|
NavItemProject.SubTitle = UgProjectSubtitle;
|
|
1780
|
-
var templateObject_1$
|
|
1780
|
+
var templateObject_1$m, templateObject_2$c;
|
|
1781
1781
|
|
|
1782
1782
|
var _path$8;
|
|
1783
1783
|
|
|
@@ -1883,7 +1883,7 @@ var SvgFolderIcon = function SvgFolderIcon(props) {
|
|
|
1883
1883
|
})));
|
|
1884
1884
|
};
|
|
1885
1885
|
|
|
1886
|
-
var StyledNav = styled__default["default"](Nav)(templateObject_1$
|
|
1886
|
+
var StyledNav = styled__default["default"](Nav)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
1887
1887
|
var isExpanded = _a.isExpanded, theme = _a.theme;
|
|
1888
1888
|
return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
|
|
1889
1889
|
});
|
|
@@ -1891,11 +1891,11 @@ var LoadingSidebar = function (props) {
|
|
|
1891
1891
|
var isExpanded = props.isExpanded;
|
|
1892
1892
|
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" })] }))] })));
|
|
1893
1893
|
};
|
|
1894
|
-
var templateObject_1$
|
|
1894
|
+
var templateObject_1$l;
|
|
1895
1895
|
|
|
1896
|
-
var TokenContainer = styled__default["default"].div(templateObject_1$
|
|
1897
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_2$
|
|
1898
|
-
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$
|
|
1896
|
+
var TokenContainer = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
1897
|
+
var ScrollingContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
|
|
1898
|
+
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
1899
1899
|
var isExpanded = _a.isExpanded;
|
|
1900
1900
|
return isExpanded &&
|
|
1901
1901
|
"\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
|
|
@@ -1922,9 +1922,9 @@ var Sidebar = function (props) {
|
|
|
1922
1922
|
return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown && props.workspaces && props.workspaces.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })), props.tokens && (jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded, style: { order: 0 } }))] })), props.tokens && (jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs, color: theme.palette.grey[800] } }, { 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(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
1923
1923
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(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" })] }))] })));
|
|
1924
1924
|
};
|
|
1925
|
-
var templateObject_1$
|
|
1925
|
+
var templateObject_1$k, templateObject_2$b, templateObject_3$9;
|
|
1926
1926
|
|
|
1927
|
-
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$
|
|
1927
|
+
var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$j || (templateObject_1$j = __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) {
|
|
1928
1928
|
var theme = _a.theme;
|
|
1929
1929
|
return theme.breakpoints.sm;
|
|
1930
1930
|
}, function (_a) {
|
|
@@ -1935,14 +1935,14 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$i ||
|
|
|
1935
1935
|
* A Main defines the main content of an HTML document which displays on the browser
|
|
1936
1936
|
*/
|
|
1937
1937
|
var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
|
|
1938
|
-
var templateObject_1$
|
|
1938
|
+
var templateObject_1$j;
|
|
1939
1939
|
|
|
1940
|
-
var StyledHr = styled__default["default"].hr(templateObject_1$
|
|
1940
|
+
var StyledHr = styled__default["default"].hr(templateObject_1$i || (templateObject_1$i = __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]);
|
|
1941
1941
|
var PageLoader = function () {
|
|
1942
1942
|
var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
|
|
1943
1943
|
return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
|
|
1944
1944
|
};
|
|
1945
|
-
var templateObject_1$
|
|
1945
|
+
var templateObject_1$i;
|
|
1946
1946
|
|
|
1947
1947
|
/**
|
|
1948
1948
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1980,7 +1980,7 @@ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment,
|
|
|
1980
1980
|
: false, isPrimary: true, 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 })) })))] })));
|
|
1981
1981
|
} }))] })), 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"] })))] })); };
|
|
1982
1982
|
|
|
1983
|
-
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$
|
|
1983
|
+
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1984
1984
|
var theme = _a.theme;
|
|
1985
1985
|
return theme.palette.grey["800"];
|
|
1986
1986
|
});
|
|
@@ -1989,17 +1989,17 @@ var FooterItem = reactModals.FooterItem;
|
|
|
1989
1989
|
Modal.Header = reactModals.Header;
|
|
1990
1990
|
Modal.Body = ugModalBody;
|
|
1991
1991
|
Modal.Footer = reactModals.Footer;
|
|
1992
|
-
var templateObject_1$
|
|
1992
|
+
var templateObject_1$h;
|
|
1993
1993
|
|
|
1994
|
-
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$
|
|
1995
|
-
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$
|
|
1994
|
+
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
1995
|
+
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"])), function (_a) {
|
|
1996
1996
|
var theme = _a.theme;
|
|
1997
1997
|
return theme.space.base * 3;
|
|
1998
1998
|
}, function (_a) {
|
|
1999
1999
|
var theme = _a.theme;
|
|
2000
2000
|
return theme.space.base * 6;
|
|
2001
2001
|
});
|
|
2002
|
-
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$
|
|
2002
|
+
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
2003
2003
|
var theme = _a.theme;
|
|
2004
2004
|
return theme.palette.grey["100"];
|
|
2005
2005
|
});
|
|
@@ -2017,7 +2017,7 @@ ModalFullScreen.Body = StyledBody$4;
|
|
|
2017
2017
|
ModalFullScreen.Footer = StyledFooter;
|
|
2018
2018
|
ModalFullScreen.Close = StyledModalClose;
|
|
2019
2019
|
ModalFullScreen.FooterItem = FooterItem;
|
|
2020
|
-
var templateObject_1$
|
|
2020
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$5, templateObject_5$2;
|
|
2021
2021
|
|
|
2022
2022
|
/**
|
|
2023
2023
|
* The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
|
|
@@ -2038,7 +2038,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
|
|
|
2038
2038
|
var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
|
|
2039
2039
|
var useToast = reactNotifications.useToast;
|
|
2040
2040
|
|
|
2041
|
-
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$
|
|
2041
|
+
var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
|
|
2042
2042
|
/**
|
|
2043
2043
|
* Pagination separates content into pages and allows users to navigate between those pages.
|
|
2044
2044
|
|
|
@@ -2048,7 +2048,7 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
|
|
|
2048
2048
|
*/
|
|
2049
2049
|
var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
|
|
2050
2050
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2051
|
-
var templateObject_1$
|
|
2051
|
+
var templateObject_1$f;
|
|
2052
2052
|
|
|
2053
2053
|
var _path$5;
|
|
2054
2054
|
|
|
@@ -2087,21 +2087,21 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2087
2087
|
})));
|
|
2088
2088
|
};
|
|
2089
2089
|
|
|
2090
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2090
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __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; });
|
|
2091
2091
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2092
|
-
var templateObject_1$
|
|
2092
|
+
var templateObject_1$e;
|
|
2093
2093
|
|
|
2094
2094
|
/**
|
|
2095
2095
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2096
2096
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2097
2097
|
**/
|
|
2098
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
2098
|
+
var StyledItem = styled__default["default"].li(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
|
|
2099
2099
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2100
2100
|
}, function (props) {
|
|
2101
2101
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
2102
2102
|
});
|
|
2103
|
-
var StyledBody$3 = styled__default["default"].li(templateObject_2$
|
|
2104
|
-
var IconContainer = styled__default["default"].div(templateObject_3$
|
|
2103
|
+
var StyledBody$3 = styled__default["default"].li(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
2104
|
+
var IconContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
|
|
2105
2105
|
var theme = _a.theme;
|
|
2106
2106
|
return theme.space.sm;
|
|
2107
2107
|
});
|
|
@@ -2114,7 +2114,7 @@ var MenuItem = function (_a) {
|
|
|
2114
2114
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2115
2115
|
return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
|
|
2116
2116
|
};
|
|
2117
|
-
var templateObject_1$
|
|
2117
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2118
2118
|
|
|
2119
2119
|
var _path$3;
|
|
2120
2120
|
|
|
@@ -2171,16 +2171,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2171
2171
|
})));
|
|
2172
2172
|
};
|
|
2173
2173
|
|
|
2174
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2174
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2175
2175
|
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
|
|
2176
|
-
var templateObject_1$
|
|
2176
|
+
var templateObject_1$c;
|
|
2177
2177
|
|
|
2178
|
-
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$
|
|
2178
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
|
|
2179
2179
|
/**
|
|
2180
2180
|
* Use Paragraph to render blocks of text with Garden styling.
|
|
2181
2181
|
*/
|
|
2182
2182
|
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2183
|
-
var templateObject_1$
|
|
2183
|
+
var templateObject_1$b;
|
|
2184
2184
|
|
|
2185
2185
|
var getInitials = function (name) {
|
|
2186
2186
|
var names = name.split(" ");
|
|
@@ -2188,9 +2188,9 @@ var getInitials = function (name) {
|
|
|
2188
2188
|
return initials;
|
|
2189
2189
|
};
|
|
2190
2190
|
|
|
2191
|
-
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$
|
|
2192
|
-
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$
|
|
2193
|
-
var StyledBody$2 = styled__default["default"].div(templateObject_3$
|
|
2191
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2192
|
+
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
|
|
2193
|
+
var StyledBody$2 = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
2194
2194
|
var theme = _a.theme;
|
|
2195
2195
|
return theme.space.base * 6;
|
|
2196
2196
|
}, function (_a) {
|
|
@@ -2217,7 +2217,7 @@ var HelpItem = function (props) {
|
|
|
2217
2217
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
2218
2218
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
|
|
2219
2219
|
};
|
|
2220
|
-
var templateObject_1$
|
|
2220
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6;
|
|
2221
2221
|
|
|
2222
2222
|
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
2223
2223
|
|
|
@@ -2249,30 +2249,30 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
|
|
|
2249
2249
|
})));
|
|
2250
2250
|
};
|
|
2251
2251
|
|
|
2252
|
-
var StyledBody$1 = styled__default["default"].div(templateObject_1$
|
|
2252
|
+
var StyledBody$1 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
2253
2253
|
var theme = _a.theme;
|
|
2254
2254
|
return theme.space.base * 6;
|
|
2255
2255
|
}, function (_a) {
|
|
2256
2256
|
var theme = _a.theme;
|
|
2257
2257
|
return theme.space.base * 4;
|
|
2258
2258
|
});
|
|
2259
|
-
var StyledButtonContainer = styled__default["default"].div(templateObject_2$
|
|
2260
|
-
var StyledButton = styled__default["default"](Button)(templateObject_3$
|
|
2259
|
+
var StyledButtonContainer = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
|
|
2260
|
+
var StyledButton = styled__default["default"](Button)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2261
2261
|
var LanguageItem = function (props) {
|
|
2262
2262
|
var _a;
|
|
2263
2263
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
|
|
2264
2264
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
|
|
2265
2265
|
};
|
|
2266
|
-
var templateObject_1$
|
|
2266
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$5;
|
|
2267
2267
|
|
|
2268
|
-
var ProfileContainer = styled__default["default"].div(templateObject_1$
|
|
2268
|
+
var ProfileContainer = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
2269
2269
|
var theme = _a.theme;
|
|
2270
2270
|
return theme.space.base * 2;
|
|
2271
2271
|
}, function (_a) {
|
|
2272
2272
|
var theme = _a.theme;
|
|
2273
2273
|
return theme.space.base * 6;
|
|
2274
2274
|
});
|
|
2275
|
-
var CompanyHolder = styled__default["default"](SM)(templateObject_2$
|
|
2275
|
+
var CompanyHolder = styled__default["default"](SM)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"], ["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"])), function (_a) {
|
|
2276
2276
|
var theme = _a.theme;
|
|
2277
2277
|
return theme.space.base * 2;
|
|
2278
2278
|
}, function (_a) {
|
|
@@ -2282,7 +2282,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$5 || (templa
|
|
|
2282
2282
|
var theme = _a.theme;
|
|
2283
2283
|
return theme.palette.blue["600"];
|
|
2284
2284
|
});
|
|
2285
|
-
var UserDetails = styled__default["default"].div(templateObject_3$
|
|
2285
|
+
var UserDetails = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"])), function (_a) {
|
|
2286
2286
|
var theme = _a.theme;
|
|
2287
2287
|
return theme.space.base * 4;
|
|
2288
2288
|
}, function (_a) {
|
|
@@ -2293,9 +2293,9 @@ var UserContainer = function (props) {
|
|
|
2293
2293
|
var _a;
|
|
2294
2294
|
return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
|
|
2295
2295
|
};
|
|
2296
|
-
var templateObject_1$
|
|
2296
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$4;
|
|
2297
2297
|
|
|
2298
|
-
var StyledList = styled__default["default"].ul(templateObject_1$
|
|
2298
|
+
var StyledList = styled__default["default"].ul(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
|
|
2299
2299
|
var UserMenu = function (props) {
|
|
2300
2300
|
var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
|
|
2301
2301
|
var toggleItem = function (item) {
|
|
@@ -2303,9 +2303,9 @@ var UserMenu = function (props) {
|
|
|
2303
2303
|
};
|
|
2304
2304
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick ? props.onFeedbackClick() : console.log("feedback fired"); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) }))), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat, chatSupportLabel: props === null || props === void 0 ? void 0 : props.chatSupportLabel, copyLabel: props === null || props === void 0 ? void 0 : props.copyLabel }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
|
|
2305
2305
|
};
|
|
2306
|
-
var templateObject_1$
|
|
2306
|
+
var templateObject_1$7;
|
|
2307
2307
|
|
|
2308
|
-
var StyledModal = styled__default["default"](Modal)(templateObject_1$
|
|
2308
|
+
var StyledModal = styled__default["default"](Modal)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"], ["\n margin: 0;\n left: auto;\n right: auto;\n top: auto;\n bottom: auto;\n\n max-height: calc(100vh - ", ");\n\n @media (min-width: ", ") {\n margin-top: calc(\n ", "\n );\n margin-right: ", "px;\n }\n"])), function (_a) {
|
|
2309
2309
|
var theme = _a.theme;
|
|
2310
2310
|
return theme.space.xxl;
|
|
2311
2311
|
}, function (_a) {
|
|
@@ -2318,7 +2318,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$5 || (templ
|
|
|
2318
2318
|
var theme = _a.theme;
|
|
2319
2319
|
return theme.space.base * 3;
|
|
2320
2320
|
});
|
|
2321
|
-
var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$
|
|
2321
|
+
var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n margin: ", ";\n padding: 0;\n"], ["\n margin: ", ";\n padding: 0;\n"])), function (_a) {
|
|
2322
2322
|
var theme = _a.theme;
|
|
2323
2323
|
return theme.space.xxs + " " + theme.space.xs;
|
|
2324
2324
|
});
|
|
@@ -2343,17 +2343,14 @@ var ProfileModal = function (_a) {
|
|
|
2343
2343
|
};
|
|
2344
2344
|
return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
|
|
2345
2345
|
};
|
|
2346
|
-
var templateObject_1$
|
|
2346
|
+
var templateObject_1$6, templateObject_2$5;
|
|
2347
2347
|
|
|
2348
|
-
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$
|
|
2348
|
+
var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
|
|
2349
2349
|
var theme = _a.theme;
|
|
2350
2350
|
return theme.palette.green[700];
|
|
2351
2351
|
});
|
|
2352
|
-
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$
|
|
2353
|
-
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$
|
|
2354
|
-
console.log("Active index: ", props.activeIndex);
|
|
2355
|
-
return "";
|
|
2356
|
-
}, function (_a) {
|
|
2352
|
+
var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject([""], [""])));
|
|
2353
|
+
var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (_a) {
|
|
2357
2354
|
var theme = _a.theme;
|
|
2358
2355
|
return theme.palette.grey[200];
|
|
2359
2356
|
}, function (_a) {
|
|
@@ -2380,17 +2377,17 @@ var Stepper = function (props) { return jsxRuntime.jsx(UgStepper, __assign({}, p
|
|
|
2380
2377
|
Stepper.Step = UgStep;
|
|
2381
2378
|
Stepper.Label = UgLabel;
|
|
2382
2379
|
Stepper.Content = UgContent;
|
|
2383
|
-
var templateObject_1$
|
|
2380
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2;
|
|
2384
2381
|
|
|
2385
|
-
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$
|
|
2382
|
+
var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"], ["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"])), function (_a) {
|
|
2386
2383
|
var theme = _a.theme;
|
|
2387
2384
|
return theme.palette.grey[300];
|
|
2388
2385
|
}, function (_a) {
|
|
2389
2386
|
var theme = _a.theme;
|
|
2390
2387
|
return theme.borderRadii.lg;
|
|
2391
2388
|
});
|
|
2392
|
-
var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$
|
|
2393
|
-
var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$
|
|
2389
|
+
var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n border: 0;\n"], ["\n border: 0;\n"])));
|
|
2390
|
+
var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"], ["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"])), function (_a) {
|
|
2394
2391
|
var theme = _a.theme;
|
|
2395
2392
|
return theme.palette.grey[300];
|
|
2396
2393
|
});
|
|
@@ -2417,11 +2414,11 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
|
|
|
2417
2414
|
var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
|
|
2418
2415
|
var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
|
|
2419
2416
|
var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
|
|
2420
|
-
var templateObject_1$
|
|
2417
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
2421
2418
|
|
|
2422
|
-
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$
|
|
2423
|
-
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$
|
|
2424
|
-
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
|
|
2419
|
+
var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
|
|
2420
|
+
var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
|
|
2421
|
+
var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
|
|
2425
2422
|
var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
|
|
2426
2423
|
var GroupRowComponent = function (props) {
|
|
2427
2424
|
var toggleIconAnimation = reactSpring.useSpring({
|
|
@@ -2450,7 +2447,7 @@ var GroupedTable = function (_a) {
|
|
|
2450
2447
|
return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
|
|
2451
2448
|
}) })] })));
|
|
2452
2449
|
};
|
|
2453
|
-
var templateObject_1$
|
|
2450
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
2454
2451
|
|
|
2455
2452
|
/**
|
|
2456
2453
|
* Tiles are Radio buttons styled with icons or images.
|
|
@@ -2470,6 +2467,30 @@ Tiles.Icon = reactForms.Tiles.Icon;
|
|
|
2470
2467
|
Tiles.Label = reactForms.Tiles.Label;
|
|
2471
2468
|
Tiles.Tile = reactForms.Tiles.Tile;
|
|
2472
2469
|
|
|
2470
|
+
var UgTimeline = styled__default["default"](reactAccordions.Timeline)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
|
|
2471
|
+
var UgTimelineContent = styled__default["default"](reactAccordions.Timeline.Content)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
|
|
2472
|
+
var UgTimelineItem = styled__default["default"](reactAccordions.Timeline.Item)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n ", "\n"], ["\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n ", "\n"])), function (_a) {
|
|
2473
|
+
var theme = _a.theme;
|
|
2474
|
+
return theme.palette.grey[300];
|
|
2475
|
+
}, function (_a) {
|
|
2476
|
+
var hiddenLine = _a.hiddenLine;
|
|
2477
|
+
return hiddenLine &&
|
|
2478
|
+
"\n div[data-garden-id=\"timeline.content.separator\"] {\n &:after {\n border-left-color: transparent;\n }\n }\n ";
|
|
2479
|
+
});
|
|
2480
|
+
/**
|
|
2481
|
+
* A Timeline lists events over a period of time.
|
|
2482
|
+
* <hr>
|
|
2483
|
+
* Used for this:
|
|
2484
|
+
- To track an issue over time
|
|
2485
|
+
- To show events associated with an item
|
|
2486
|
+
* Not for this:
|
|
2487
|
+
- To guide users through a step by step process, use a Stepper instead
|
|
2488
|
+
*/
|
|
2489
|
+
var Timeline = function (props) { return jsxRuntime.jsx(UgTimeline, __assign({}, props)); };
|
|
2490
|
+
Timeline.Item = UgTimelineItem;
|
|
2491
|
+
Timeline.Content = UgTimelineContent;
|
|
2492
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3;
|
|
2493
|
+
|
|
2473
2494
|
/**
|
|
2474
2495
|
* A Trigger is a wrapper for input elements
|
|
2475
2496
|
**/
|
|
@@ -2608,6 +2629,7 @@ exports.TableRow = Row;
|
|
|
2608
2629
|
exports.Tag = Tag;
|
|
2609
2630
|
exports.Textarea = Textarea;
|
|
2610
2631
|
exports.Tiles = Tiles;
|
|
2632
|
+
exports.Timeline = Timeline;
|
|
2611
2633
|
exports.Title = Title;
|
|
2612
2634
|
exports.ToastProvider = ToastProvider;
|
|
2613
2635
|
exports.Toggle = Toggle;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ITimelineProps, ITimelineItemProps } from "@zendeskgarden/react-accordions";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
export interface TimelineArgs extends ITimelineProps {
|
|
4
|
+
/** Applies alternate styling */
|
|
5
|
+
isAlternate?: boolean;
|
|
6
|
+
/** Applies invisibility power to timeline line */
|
|
7
|
+
hiddenLine?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface TimelineItemArgs extends ITimelineItemProps {
|
|
10
|
+
/** Replaces the dot with an icon */
|
|
11
|
+
icon?: ReactNode;
|
|
12
|
+
/** Provides surface color for an icon placed on a non-white background */
|
|
13
|
+
surfaceColor?: string;
|
|
14
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TimelineArgs } from "./_types";
|
|
3
|
+
/**
|
|
4
|
+
* A Timeline lists events over a period of time.
|
|
5
|
+
* <hr>
|
|
6
|
+
* Used for this:
|
|
7
|
+
- To track an issue over time
|
|
8
|
+
- To show events associated with an item
|
|
9
|
+
* Not for this:
|
|
10
|
+
- To guide users through a step by step process, use a Stepper instead
|
|
11
|
+
*/
|
|
12
|
+
declare const Timeline: {
|
|
13
|
+
(props: TimelineArgs): JSX.Element;
|
|
14
|
+
Item: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-accordions").ITimelineItemProps & import("react").RefAttributes<HTMLLIElement>>, any, TimelineArgs, never>;
|
|
15
|
+
Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
16
|
+
};
|
|
17
|
+
export { Timeline };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
|
+
import { TimelineArgs } from "./_types";
|
|
4
|
+
interface TimelineItemArgs {
|
|
5
|
+
title: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
interface TimelineStoryProps extends TimelineArgs {
|
|
10
|
+
items: TimelineItemArgs[];
|
|
11
|
+
}
|
|
12
|
+
export declare const Default: Story<TimelineStoryProps>;
|
|
13
|
+
export declare const InvisibleLine: Story<TimelineStoryProps>;
|
|
14
|
+
export declare const Alternate: Story<TimelineStoryProps>;
|
|
15
|
+
declare const _default: ComponentMeta<{
|
|
16
|
+
(props: TimelineArgs): JSX.Element;
|
|
17
|
+
Item: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-accordions").ITimelineItemProps & import("react").RefAttributes<HTMLLIElement>>, any, TimelineArgs, never>;
|
|
18
|
+
Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
19
|
+
}>;
|
|
20
|
+
export default _default;
|