@appquality/unguess-design-system 2.10.35 → 2.10.36
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 +12 -0
- package/build/index.d.ts +2 -0
- package/build/index.js +184 -57
- package/build/stories/info-cards/_types.d.ts +8 -0
- package/build/stories/info-cards/index.d.ts +4 -0
- package/build/stories/info-cards/index.stories.d.ts +7 -0
- package/build/stories/service-cards/_types.d.ts +17 -0
- package/build/stories/service-cards/index.d.ts +4 -0
- package/build/stories/service-cards/index.stories.d.ts +7 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.10.36 (Thu May 19 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Cup 721 service cards + info cards [#58](https://github.com/AppQuality/unguess-design-system/pull/58) ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.10.35 (Wed May 18 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/build/index.d.ts
CHANGED
|
@@ -11,6 +11,8 @@ export * from "./stories/buttons/split-button";
|
|
|
11
11
|
export * from "./stories/cards";
|
|
12
12
|
export * from "./stories/campaign-cards";
|
|
13
13
|
export * from "./stories/product-cards";
|
|
14
|
+
export * from "./stories/service-cards";
|
|
15
|
+
export * from "./stories/info-cards";
|
|
14
16
|
export * from "./stories/close";
|
|
15
17
|
export * from "./stories/counter";
|
|
16
18
|
export * from "./stories/drawers";
|
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$_ || (templateObject_1$_ = __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$_;
|
|
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$Z || (templateObject_1$Z = __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$Z;
|
|
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$Y || (templateObject_1$Y = __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$Y;
|
|
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$X || (templateObject_1$X = __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$X;
|
|
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$W || (templateObject_1$W = __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$p || (templateObject_2$p = __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$W, templateObject_2$p;
|
|
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$V || (templateObject_1$V = __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$V;
|
|
416
416
|
|
|
417
417
|
var _g$4, _path$s;
|
|
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$U || (templateObject_1$U = __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,19 +634,19 @@ 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$U;
|
|
638
638
|
|
|
639
639
|
var CampaignCardSkeleton = function () {
|
|
640
|
-
return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$
|
|
640
|
+
return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader$2, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$3, { 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$3, {}), jsxRuntime.jsxs(CardFooter$3, { 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$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
644
|
+
var flexColumnCenter = styled.css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
645
|
+
var flexStart = styled.css(templateObject_3$h || (templateObject_3$h = __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
|
});
|
|
649
|
-
var cardStyle = styled.css(templateObject_4$
|
|
649
|
+
var cardStyle = styled.css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
|
|
650
650
|
var theme = _a.theme;
|
|
651
651
|
return theme.borderRadii.lg;
|
|
652
652
|
}, function (_a) {
|
|
@@ -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$T, templateObject_2$o, templateObject_3$h, templateObject_4$d;
|
|
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$
|
|
686
|
+
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
|
|
687
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_2$n || (templateObject_2$n = __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$g || (templateObject_3$g = __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) {
|
|
@@ -701,36 +701,36 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$e || (temp
|
|
|
701
701
|
var theme = _a.theme;
|
|
702
702
|
return theme.palette.white;
|
|
703
703
|
});
|
|
704
|
-
var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$
|
|
704
|
+
var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
705
705
|
var theme = _a.theme;
|
|
706
706
|
return theme.fontSizes.sm;
|
|
707
707
|
}, function (_a) {
|
|
708
708
|
var theme = _a.theme;
|
|
709
709
|
return theme.palette.grey["500"];
|
|
710
710
|
});
|
|
711
|
-
var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$
|
|
711
|
+
var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
|
|
712
712
|
var theme = _a.theme;
|
|
713
713
|
return theme.palette.blue["600"];
|
|
714
714
|
}, function (_a) {
|
|
715
715
|
var theme = _a.theme;
|
|
716
716
|
return theme.fontSizes.lg;
|
|
717
717
|
});
|
|
718
|
-
var Divider$
|
|
718
|
+
var Divider$3 = styled__default["default"].div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), function (_a) {
|
|
719
719
|
var theme = _a.theme;
|
|
720
720
|
return theme.space.lg;
|
|
721
721
|
}, function (_a) {
|
|
722
722
|
var theme = _a.theme;
|
|
723
723
|
return theme.palette.grey["300"];
|
|
724
724
|
});
|
|
725
|
-
var CardHeader = styled__default["default"].div(templateObject_7$
|
|
725
|
+
var CardHeader$2 = styled__default["default"].div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"])), function (_a) {
|
|
726
726
|
var theme = _a.theme;
|
|
727
727
|
return theme.space.base * 6;
|
|
728
728
|
});
|
|
729
|
-
var CardBody$
|
|
729
|
+
var CardBody$3 = styled__default["default"].div(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n flex: 1;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n flex: 1;\n"])), function (_a) {
|
|
730
730
|
var theme = _a.theme;
|
|
731
731
|
return theme.space.xxl;
|
|
732
732
|
});
|
|
733
|
-
var CardFooter$
|
|
733
|
+
var CardFooter$3 = styled__default["default"].div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
734
734
|
var CampaignCard = function (props) {
|
|
735
735
|
var isNew = props.isNew, date = props.date, projectTitle = props.projectTitle, campaignTitle = props.campaignTitle, status = props.status, type = props.type, labelNew = props.labelNew;
|
|
736
736
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
@@ -743,11 +743,11 @@ var CampaignCard = function (props) {
|
|
|
743
743
|
if (campaignTitle.length > 29) {
|
|
744
744
|
campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
|
|
745
745
|
}
|
|
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$
|
|
746
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader$2, { 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$3, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$3, {}), jsxRuntime.jsxs(CardFooter$3, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
747
747
|
};
|
|
748
|
-
var templateObject_1$
|
|
748
|
+
var templateObject_1$S, templateObject_2$n, templateObject_3$g, templateObject_4$c, templateObject_5$7, templateObject_6$4, templateObject_7$3, templateObject_8$3, templateObject_9$2;
|
|
749
749
|
|
|
750
|
-
var Wrapper = styled__default["default"](Card)(templateObject_1$
|
|
750
|
+
var Wrapper = styled__default["default"](Card)(templateObject_1$R || (templateObject_1$R = __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$P || (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$m || (templateObject_2$m = __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,42 +773,177 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$k || (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$f || (templateObject_3$f = __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) {
|
|
780
780
|
var theme = _a.theme;
|
|
781
781
|
return theme.palette.grey["500"];
|
|
782
782
|
});
|
|
783
|
-
var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$
|
|
783
|
+
var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
|
|
784
784
|
var theme = _a.theme;
|
|
785
785
|
return theme.palette.blue["600"];
|
|
786
786
|
}, function (_a) {
|
|
787
787
|
var theme = _a.theme;
|
|
788
788
|
return theme.fontSizes.lg;
|
|
789
789
|
});
|
|
790
|
-
var Divider = styled__default["default"].div(templateObject_5$
|
|
790
|
+
var Divider$2 = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), function (_a) {
|
|
791
791
|
var theme = _a.theme;
|
|
792
792
|
return theme.space.sm;
|
|
793
793
|
}, function (_a) {
|
|
794
794
|
var theme = _a.theme;
|
|
795
795
|
return theme.palette.grey["300"];
|
|
796
796
|
});
|
|
797
|
-
var IconContainer$
|
|
797
|
+
var IconContainer$2 = styled__default["default"].div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n padding: ", ";\n margin: auto;\n svg {\n max-width: 42px;\n width: 100%;\n height: auto;\n }\n"], ["\n padding: ", ";\n margin: auto;\n svg {\n max-width: 42px;\n width: 100%;\n height: auto;\n }\n"])), function (_a) {
|
|
798
798
|
var theme = _a.theme;
|
|
799
799
|
return theme.components.notification.card.padding;
|
|
800
800
|
});
|
|
801
|
-
var CardBody = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n"])));
|
|
802
|
-
var CardFooter = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
801
|
+
var CardBody$2 = styled__default["default"].div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n"])));
|
|
802
|
+
var CardFooter$2 = styled__default["default"].div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
803
803
|
var ProductCard = function (props) {
|
|
804
804
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
805
805
|
var productTitleCut = productTitle;
|
|
806
806
|
if (productTitle.length > 42) {
|
|
807
807
|
productTitleCut = "".concat(productTitle.substring(0, 39), "...");
|
|
808
808
|
}
|
|
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$
|
|
809
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody$2, __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$2, { 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$2, {}), jsxRuntime.jsx(CardFooter$2, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
|
|
810
|
+
};
|
|
811
|
+
var templateObject_1$R, templateObject_2$m, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$3, templateObject_7$2, templateObject_8$2;
|
|
812
|
+
|
|
813
|
+
/**
|
|
814
|
+
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
815
|
+
*/
|
|
816
|
+
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
|
|
817
|
+
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
|
|
818
|
+
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
|
|
819
|
+
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
820
|
+
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
821
|
+
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
822
|
+
|
|
823
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
824
|
+
var theme = _a.theme;
|
|
825
|
+
return theme.palette.grey[500];
|
|
826
|
+
}, function (_a) {
|
|
827
|
+
var theme = _a.theme;
|
|
828
|
+
return theme.space.base;
|
|
829
|
+
});
|
|
830
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
831
|
+
var theme = _a.theme;
|
|
832
|
+
return theme.palette.blue[600];
|
|
833
|
+
}, function (_a) {
|
|
834
|
+
var theme = _a.theme;
|
|
835
|
+
return theme.space.base;
|
|
836
|
+
}, function (_a) {
|
|
837
|
+
var theme = _a.theme;
|
|
838
|
+
return theme.fontWeights.semibold;
|
|
839
|
+
});
|
|
840
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
841
|
+
var theme = _a.theme;
|
|
842
|
+
return theme.space.xs;
|
|
843
|
+
}, function (_a) {
|
|
844
|
+
var theme = _a.theme;
|
|
845
|
+
return theme.space.xs;
|
|
846
|
+
});
|
|
847
|
+
var CardHeader$1 = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n"])));
|
|
848
|
+
var IconContainer$1 = styled__default["default"].div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n width: 100%;\n max-width: ", "px;\n height: 100%;\n max-height: ", "px;\n\n svg {\n width: 100%;\n }\n"], ["\n width: 100%;\n max-width: ", "px;\n height: 100%;\n max-height: ", "px;\n\n svg {\n width: 100%;\n }\n"])), function (_a) {
|
|
849
|
+
var theme = _a.theme;
|
|
850
|
+
return theme.space.base * 16;
|
|
851
|
+
}, function (_a) {
|
|
852
|
+
var theme = _a.theme;
|
|
853
|
+
return theme.space.base * 16;
|
|
854
|
+
});
|
|
855
|
+
var CardBody$1 = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"])), function (_a) {
|
|
856
|
+
var theme = _a.theme;
|
|
857
|
+
return theme.space.sm;
|
|
858
|
+
});
|
|
859
|
+
var CardFooter$1 = styled__default["default"].div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n margin-top: ", ";\n"])), function (_a) {
|
|
860
|
+
var theme = _a.theme;
|
|
861
|
+
return theme.space.sm;
|
|
862
|
+
});
|
|
863
|
+
var Divider$1 = styled__default["default"].div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", "px 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", "px 0;\n background-color: ", ";\n"])), function (_a) {
|
|
864
|
+
var theme = _a.theme;
|
|
865
|
+
return theme.space.base;
|
|
866
|
+
}, function (_a) {
|
|
867
|
+
var theme = _a.theme;
|
|
868
|
+
return theme.palette.grey["300"];
|
|
869
|
+
});
|
|
870
|
+
var CardContent$1 = styled__default["default"].div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
871
|
+
var FooterContent$1 = styled__default["default"].div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n padding-top: ", ";\n margin-top: auto;\n width: 100%;\n"], ["\n padding-top: ", ";\n margin-top: auto;\n width: 100%;\n"])), function (_a) {
|
|
872
|
+
var theme = _a.theme;
|
|
873
|
+
return theme.space.sm;
|
|
874
|
+
});
|
|
875
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n margin-top: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n margin-top: ", ";\n }\n"])), function (_a) {
|
|
876
|
+
var theme = _a.theme;
|
|
877
|
+
return theme.space.base;
|
|
878
|
+
}, function (_a) {
|
|
879
|
+
var theme = _a.theme;
|
|
880
|
+
return theme.space.sm;
|
|
881
|
+
});
|
|
882
|
+
var HoverBody = styled__default["default"](CardBody$1)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"])), function (_a) {
|
|
883
|
+
var theme = _a.theme;
|
|
884
|
+
return theme.components.notification.card.padding;
|
|
885
|
+
}, function (_a) {
|
|
886
|
+
var theme = _a.theme;
|
|
887
|
+
return theme.palette.white;
|
|
888
|
+
});
|
|
889
|
+
var HoverMetaContainer = styled__default["default"].div(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
|
|
890
|
+
var StyledCard$3 = styled__default["default"](Card)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), cardStyle, function (_a) {
|
|
891
|
+
var isHoverable = _a.isHoverable;
|
|
892
|
+
return isHoverable && "\n &:hover {\n ".concat(HoverBody, " {\n top: 0;\n transition: all 0.3s ease-in-out;\n }\n\n ").concat(CardContent$1, " {\n opacity: 0;\n transition: all 0.3s ease-in-out;\n }\n }\n ");
|
|
893
|
+
});
|
|
894
|
+
var ServiceCard = function (props) {
|
|
895
|
+
return (jsxRuntime.jsxs(StyledCard$3, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button, index) { return (button); }) }))] })), jsxRuntime.jsxs(CardContent$1, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.serviceIcon && (jsxRuntime.jsx(CardHeader$1, { children: jsxRuntime.jsx(IconContainer$1, { children: props.serviceIcon }) })), jsxRuntime.jsxs(CardBody$1, { children: [props.serviceSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.serviceSubtitle })), props.serviceTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.serviceTitle }))] })] }), props.tags && (jsxRuntime.jsxs(FooterContent$1, { children: [jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsx(CardFooter$1, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })] }))] })] })));
|
|
810
896
|
};
|
|
811
|
-
var templateObject_1$
|
|
897
|
+
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$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14;
|
|
898
|
+
|
|
899
|
+
var StyledCard$2 = styled__default["default"](Card)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
|
|
900
|
+
var CardContent = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
901
|
+
var FooterContent = styled__default["default"].div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n padding-top: ", ";\n margin-top: auto;\n width: 100%;\n"], ["\n padding-top: ", ";\n margin-top: auto;\n width: 100%;\n"])), function (_a) {
|
|
902
|
+
var theme = _a.theme;
|
|
903
|
+
return theme.space.sm;
|
|
904
|
+
});
|
|
905
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n\n button {\n margin-top: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n\n button {\n margin-top: ", ";\n }\n"])), function (_a) {
|
|
906
|
+
var theme = _a.theme;
|
|
907
|
+
return theme.space.sm;
|
|
908
|
+
});
|
|
909
|
+
var CardHeader = styled__default["default"].div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n"])));
|
|
910
|
+
var ImgContainer = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 100%;\n\n svg, img {\n width: 100%;\n max-width: 100%;\n }\n"], ["\n width: 100%;\n\n svg, img {\n width: 100%;\n max-width: 100%;\n }\n"])));
|
|
911
|
+
var CardBody = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n"])), function (_a) {
|
|
912
|
+
var theme = _a.theme;
|
|
913
|
+
return theme.space.sm;
|
|
914
|
+
});
|
|
915
|
+
var CardFooter = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-start;\n margin-top: ", ";\n"])), function (_a) {
|
|
916
|
+
var theme = _a.theme;
|
|
917
|
+
return theme.space.sm;
|
|
918
|
+
});
|
|
919
|
+
var Divider = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", "px 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", "px 0;\n background-color: ", ";\n"])), function (_a) {
|
|
920
|
+
var theme = _a.theme;
|
|
921
|
+
return theme.space.base;
|
|
922
|
+
}, function (_a) {
|
|
923
|
+
var theme = _a.theme;
|
|
924
|
+
return theme.palette.grey["300"];
|
|
925
|
+
});
|
|
926
|
+
var InfoSubtitle = styled__default["default"](SM)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
927
|
+
var theme = _a.theme;
|
|
928
|
+
return theme.palette.grey[500];
|
|
929
|
+
}, function (_a) {
|
|
930
|
+
var theme = _a.theme;
|
|
931
|
+
return theme.space.base;
|
|
932
|
+
});
|
|
933
|
+
var InfoTitle = styled__default["default"](LG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
934
|
+
var theme = _a.theme;
|
|
935
|
+
return theme.palette.blue[600];
|
|
936
|
+
}, function (_a) {
|
|
937
|
+
var theme = _a.theme;
|
|
938
|
+
return theme.space.base;
|
|
939
|
+
}, function (_a) {
|
|
940
|
+
var theme = _a.theme;
|
|
941
|
+
return theme.fontWeights.semibold;
|
|
942
|
+
});
|
|
943
|
+
var InfoCard = function (props) {
|
|
944
|
+
return (jsxRuntime.jsx(StyledCard$2, __assign({}, props, { children: jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.infoImg && (jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(ImgContainer, { children: props.infoImg }) })), jsxRuntime.jsxs(CardBody, { children: [props.infoSubtitle && (jsxRuntime.jsx(InfoSubtitle, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(InfoTitle, { children: props.infoTitle }))] })] }), props.infoButtons && (jsxRuntime.jsxs(FooterContent, { children: [jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: props.infoButtons && (jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button, index) { return (button); }) })) })] }))] }) })));
|
|
945
|
+
};
|
|
946
|
+
var templateObject_1$P, templateObject_2$k, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
812
947
|
|
|
813
948
|
/**
|
|
814
949
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1323,7 +1458,7 @@ var Circle = styled__default["default"].div(templateObject_4$7 || (templateObjec
|
|
|
1323
1458
|
var checked = _a.checked;
|
|
1324
1459
|
return !checked && "\n opacity: 0;\n visibility: hidden;\n ";
|
|
1325
1460
|
});
|
|
1326
|
-
var StyledDivider = styled__default["default"](Divider$
|
|
1461
|
+
var StyledDivider = styled__default["default"](Divider$3)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n background-color: ", ";\n margin: ", "px auto;\n"], ["\n background-color: ", ";\n margin: ", "px auto;\n"])), function (_a) {
|
|
1327
1462
|
var theme = _a.theme;
|
|
1328
1463
|
return theme.palette.blue[100];
|
|
1329
1464
|
}, function (_a) {
|
|
@@ -1560,16 +1695,6 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1560
1695
|
})));
|
|
1561
1696
|
};
|
|
1562
1697
|
|
|
1563
|
-
/**
|
|
1564
|
-
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
1565
|
-
*/
|
|
1566
|
-
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
|
|
1567
|
-
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
|
|
1568
|
-
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
|
|
1569
|
-
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
1570
|
-
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
1571
|
-
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
1572
|
-
|
|
1573
1698
|
/**
|
|
1574
1699
|
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
1575
1700
|
*/
|
|
@@ -2603,9 +2728,9 @@ exports.ButtonGroup = ButtonGroup;
|
|
|
2603
2728
|
exports.CampaignCard = CampaignCard;
|
|
2604
2729
|
exports.Caption = Caption;
|
|
2605
2730
|
exports.Card = Card;
|
|
2606
|
-
exports.CardBody = CardBody$
|
|
2607
|
-
exports.CardFooter = CardFooter$
|
|
2608
|
-
exports.CardHeader = CardHeader;
|
|
2731
|
+
exports.CardBody = CardBody$3;
|
|
2732
|
+
exports.CardFooter = CardFooter$3;
|
|
2733
|
+
exports.CardHeader = CardHeader$2;
|
|
2609
2734
|
exports.Checkbox = Checkbox;
|
|
2610
2735
|
exports.CheckboxCard = CheckboxCard;
|
|
2611
2736
|
exports.Chrome = Chrome;
|
|
@@ -2616,7 +2741,7 @@ exports.ContainerCard = ContainerCard;
|
|
|
2616
2741
|
exports.Content = Content;
|
|
2617
2742
|
exports.Counter = Counter;
|
|
2618
2743
|
exports.CursorPagination = CursorPagination;
|
|
2619
|
-
exports.Divider = Divider$
|
|
2744
|
+
exports.Divider = Divider$3;
|
|
2620
2745
|
exports.Drawer = Drawer;
|
|
2621
2746
|
exports.Dropdown = Dropdown;
|
|
2622
2747
|
exports.DropdownField = index$1;
|
|
@@ -2636,6 +2761,7 @@ exports.HeaderRow = HeaderRow;
|
|
|
2636
2761
|
exports.Hint = Hint;
|
|
2637
2762
|
exports.Icon = Icon;
|
|
2638
2763
|
exports.IconButton = IconButton;
|
|
2764
|
+
exports.InfoCard = InfoCard;
|
|
2639
2765
|
exports.Input = Input;
|
|
2640
2766
|
exports.Item = Item;
|
|
2641
2767
|
exports.ItemMeta = ItemMeta;
|
|
@@ -2678,6 +2804,7 @@ exports.Row = Row$1;
|
|
|
2678
2804
|
exports.SM = SM;
|
|
2679
2805
|
exports.Select = Select;
|
|
2680
2806
|
exports.Separator = Separator;
|
|
2807
|
+
exports.ServiceCard = ServiceCard;
|
|
2681
2808
|
exports.Sidebar = Sidebar;
|
|
2682
2809
|
exports.Skeleton = Skeleton;
|
|
2683
2810
|
exports.Span = Span;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { InfoCardProps } from "./_types";
|
|
3
|
+
import { ComponentMeta, Story } from "@storybook/react";
|
|
4
|
+
export declare const SingleCard: Story<InfoCardProps>;
|
|
5
|
+
export declare const Grid: Story<InfoCardProps>;
|
|
6
|
+
declare const _default: ComponentMeta<(props: InfoCardProps) => JSX.Element>;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CardProps } from "../cards/_types";
|
|
3
|
+
interface ITag {
|
|
4
|
+
label: string;
|
|
5
|
+
icon: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export interface ServiceCardsProps extends CardProps {
|
|
8
|
+
serviceIcon?: React.ReactNode;
|
|
9
|
+
serviceTitle?: string;
|
|
10
|
+
serviceSubtitle?: string;
|
|
11
|
+
tags?: Array<ITag>;
|
|
12
|
+
isHoverable?: boolean;
|
|
13
|
+
hoverTitle?: string;
|
|
14
|
+
hoverSubtitle?: string;
|
|
15
|
+
hoverButtons?: Array<React.ReactNode>;
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ServiceCardsProps } from "./_types";
|
|
3
|
+
import { ComponentMeta, Story } from "@storybook/react";
|
|
4
|
+
export declare const SingleCard: Story<ServiceCardsProps>;
|
|
5
|
+
export declare const Grid: Story<ServiceCardsProps>;
|
|
6
|
+
declare const _default: ComponentMeta<(props: ServiceCardsProps) => JSX.Element>;
|
|
7
|
+
export default _default;
|