@appquality/unguess-design-system 2.10.43 → 2.10.44
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.js +196 -267
- package/build/stories/campaign-cards/index.d.ts +1 -6
- package/build/stories/campaign-cards/index.stories.d.ts +1 -1
- package/build/stories/special-cards/_types.d.ts +26 -0
- package/build/stories/special-cards/index.d.ts +21 -0
- package/build/stories/special-cards/index.stories.d.ts +20 -0
- package/build/stories/special-cards/styled/footer.d.ts +2 -0
- package/build/stories/special-cards/styled/header.d.ts +8 -0
- package/build/stories/special-cards/styled/meta.d.ts +2 -0
- package/build/stories/special-cards/styled/thumbnail.d.ts +2 -0
- package/build/stories/theme/index.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.10.44 (Mon Jun 06 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Cup 720 refactor card component [#66](https://github.com/AppQuality/unguess-design-system/pull/66) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.10.43 (Wed Jun 01 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/build/index.js
CHANGED
|
@@ -12,12 +12,12 @@ var reactAvatars = require('@zendeskgarden/react-avatars');
|
|
|
12
12
|
var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
|
|
13
13
|
var reactButtons = require('@zendeskgarden/react-buttons');
|
|
14
14
|
var reactTags = require('@zendeskgarden/react-tags');
|
|
15
|
-
var reactForms = require('@zendeskgarden/react-forms');
|
|
16
15
|
var React = require('react');
|
|
17
16
|
var reactLoaders = require('@zendeskgarden/react-loaders');
|
|
18
17
|
var reactTypography = require('@zendeskgarden/react-typography');
|
|
19
18
|
var reactModals = require('@zendeskgarden/react-modals');
|
|
20
19
|
var reactDropdowns = require('@zendeskgarden/react-dropdowns');
|
|
20
|
+
var reactForms = require('@zendeskgarden/react-forms');
|
|
21
21
|
var reactGrid = require('@zendeskgarden/react-grid');
|
|
22
22
|
var reactChrome = require('@zendeskgarden/react-chrome');
|
|
23
23
|
var formik = require('formik');
|
|
@@ -241,10 +241,10 @@ var gradients = {
|
|
|
241
241
|
var _a, _b, _c, _d, _e, _f, _g$3, _h;
|
|
242
242
|
var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) });
|
|
243
243
|
|
|
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 }) });
|
|
244
|
+
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
245
245
|
|
|
246
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1
|
|
247
|
-
var templateObject_1
|
|
246
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$14 || (templateObject_1$14 = __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$14;
|
|
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$13 || (templateObject_1$13 = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"])), function (_a) {
|
|
263
263
|
var theme = _a.theme;
|
|
264
264
|
return theme.palette.grey[700];
|
|
265
265
|
}, function (_a) {
|
|
@@ -280,9 +280,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
280
280
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
281
281
|
Alert.Title = UgAlertTitle;
|
|
282
282
|
Alert.Close = reactNotifications.Close;
|
|
283
|
-
var templateObject_1$
|
|
283
|
+
var templateObject_1$13, templateObject_2$q;
|
|
284
284
|
|
|
285
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
285
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
286
286
|
return props.avatarType &&
|
|
287
287
|
props.avatarType !== "image" &&
|
|
288
288
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -306,7 +306,7 @@ var Avatar = function (props) {
|
|
|
306
306
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
307
307
|
};
|
|
308
308
|
Avatar.Text = UgAvatar.Text;
|
|
309
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$12;
|
|
310
310
|
|
|
311
311
|
/**
|
|
312
312
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -337,7 +337,7 @@ var getThemeStyle = function (props) {
|
|
|
337
337
|
}
|
|
338
338
|
return theme;
|
|
339
339
|
};
|
|
340
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
340
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""])));
|
|
341
341
|
/**
|
|
342
342
|
* Buttons let users take action quickly.
|
|
343
343
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -355,7 +355,7 @@ var Button = function (props) {
|
|
|
355
355
|
};
|
|
356
356
|
Button.StartIcon = UgButton.StartIcon;
|
|
357
357
|
Button.EndIcon = UgButton.EndIcon;
|
|
358
|
-
var templateObject_1$
|
|
358
|
+
var templateObject_1$11;
|
|
359
359
|
|
|
360
360
|
/**
|
|
361
361
|
A Button group lets users make a selection from a set of options.
|
|
@@ -385,7 +385,7 @@ Used for this:
|
|
|
385
385
|
**/
|
|
386
386
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
387
387
|
|
|
388
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
388
|
+
var UgContentCard$1 = styled__default["default"](reactNotifications.Well)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
389
389
|
var theme = _a.theme;
|
|
390
390
|
return theme.borderRadii.lg;
|
|
391
391
|
}, function (_a) {
|
|
@@ -405,7 +405,7 @@ var UgContentCard = styled__default["default"](reactNotifications.Well)(template
|
|
|
405
405
|
* Used for this:
|
|
406
406
|
- To group related content
|
|
407
407
|
*/
|
|
408
|
-
var Card = function (props) { return jsxRuntime.jsx(UgContentCard, __assign({}, props)); };
|
|
408
|
+
var Card = function (props) { return jsxRuntime.jsx(UgContentCard$1, __assign({}, props)); };
|
|
409
409
|
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
410
410
|
var theme = _a.theme;
|
|
411
411
|
return theme.borderRadii.xl;
|
|
@@ -417,7 +417,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
417
417
|
return theme.palette.grey["200"];
|
|
418
418
|
});
|
|
419
419
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
420
|
-
var templateObject_1$
|
|
420
|
+
var templateObject_1$10, templateObject_2$p;
|
|
421
421
|
|
|
422
422
|
/**
|
|
423
423
|
* Tags let users categorize content using a keyword.
|
|
@@ -434,14 +434,6 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
434
434
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
435
435
|
Tag.Close = reactTags.Tag.Close;
|
|
436
436
|
|
|
437
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject([""], [""])));
|
|
438
|
-
/**
|
|
439
|
-
* A Label is used to specify a title for an input.
|
|
440
|
-
* <hr>
|
|
441
|
-
**/
|
|
442
|
-
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
443
|
-
var templateObject_1$W;
|
|
444
|
-
|
|
445
437
|
var _g$2, _path$n;
|
|
446
438
|
|
|
447
439
|
function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
|
|
@@ -640,7 +632,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
640
632
|
})));
|
|
641
633
|
};
|
|
642
634
|
|
|
643
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1
|
|
635
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
644
636
|
return props.isLight ?
|
|
645
637
|
"\n &:before {\n background-image: linear-gradient(45deg, transparent, ".concat(props.theme.palette.grey[200], ", transparent);\n }\n ") : "\n background-color: ".concat(props.theme.palette.grey[200], ";\n ");
|
|
646
638
|
});
|
|
@@ -658,32 +650,115 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
658
650
|
- To communicate a typing status, use Inline instead
|
|
659
651
|
*/
|
|
660
652
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
661
|
-
var templateObject_1
|
|
653
|
+
var templateObject_1$$;
|
|
662
654
|
|
|
663
|
-
var
|
|
664
|
-
|
|
665
|
-
|
|
655
|
+
var CardMeta = styled__default["default"].div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
656
|
+
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
657
|
+
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n height: ").concat(theme.space.base * 6, "px;\n padding: ").concat(theme.space.xxs, " 0;\n margin-bottom: ").concat(theme.space.xs, ";\n ");
|
|
658
|
+
});
|
|
659
|
+
var templateObject_1$_;
|
|
666
660
|
|
|
667
|
-
var
|
|
668
|
-
var
|
|
669
|
-
|
|
661
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
662
|
+
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
663
|
+
return "\n display: flex;\n\n ".concat(!isStretched ? "max-width: ".concat(theme.space.base * 16, "px") : "", ";\n max-height: ").concat(isStretched ? '150px' : "".concat(theme.space.base * 16, "px"), ";\n ").concat(align === "left" ? "margin-right: auto;" : '', "\n ").concat(align === "right" ? "margin-left: auto;" : '', "\n ").concat(align === "center" || isStretched ? "margin: auto;" : '', "\n\n padding: ").concat(theme.space.xxs, " 0;\n\n svg {\n width: 100%;\n height: auto;\n }\n ");
|
|
664
|
+
});
|
|
665
|
+
CardThumbnail.defaultProps = {
|
|
666
|
+
align: "left"
|
|
667
|
+
};
|
|
668
|
+
var templateObject_1$Z;
|
|
669
|
+
|
|
670
|
+
/**
|
|
671
|
+
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
672
|
+
*/
|
|
673
|
+
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
|
|
674
|
+
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
|
|
675
|
+
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
|
|
676
|
+
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
677
|
+
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
678
|
+
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
679
|
+
|
|
680
|
+
var Label$1 = styled__default["default"](SM)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
670
681
|
var theme = _a.theme;
|
|
671
|
-
return
|
|
682
|
+
return theme.palette.grey[500];
|
|
683
|
+
});
|
|
684
|
+
var Title$1 = styled__default["default"](LG)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
685
|
+
var theme = _a.theme;
|
|
686
|
+
return theme.colors.primaryHue;
|
|
687
|
+
}, function (_a) {
|
|
688
|
+
var theme = _a.theme;
|
|
689
|
+
return theme.fontWeights.semibold;
|
|
690
|
+
}, function (_a) {
|
|
691
|
+
var theme = _a.theme;
|
|
692
|
+
return theme.space.xxs;
|
|
693
|
+
});
|
|
694
|
+
var Description$1 = styled__default["default"](MD)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
695
|
+
var theme = _a.theme;
|
|
696
|
+
return theme.palette.grey[700];
|
|
697
|
+
}, function (_a) {
|
|
698
|
+
var theme = _a.theme;
|
|
699
|
+
return theme.space.xxs;
|
|
700
|
+
});
|
|
701
|
+
var Container$1 = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
702
|
+
var theme = _a.theme, align = _a.align;
|
|
703
|
+
return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
672
704
|
});
|
|
673
|
-
var
|
|
705
|
+
var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign({}, props)); };
|
|
706
|
+
CardHeader.Label = Label$1;
|
|
707
|
+
CardHeader.Title = Title$1;
|
|
708
|
+
CardHeader.Text = Description$1;
|
|
709
|
+
var templateObject_1$Y, templateObject_2$o, templateObject_3$g, templateObject_4$a;
|
|
710
|
+
|
|
711
|
+
var Divider = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
712
|
+
var theme = _a.theme;
|
|
713
|
+
return theme.space.xs;
|
|
714
|
+
}, function (_a) {
|
|
715
|
+
var theme = _a.theme;
|
|
716
|
+
return theme.palette.grey["300"];
|
|
717
|
+
});
|
|
718
|
+
var Footer$1 = styled__default["default"].div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n"])));
|
|
719
|
+
var Container = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
720
|
+
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
721
|
+
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
722
|
+
});
|
|
723
|
+
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
724
|
+
var templateObject_1$X, templateObject_2$n, templateObject_3$f;
|
|
725
|
+
|
|
726
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
674
727
|
var theme = _a.theme;
|
|
675
728
|
return theme.borderRadii.lg;
|
|
676
729
|
}, function (_a) {
|
|
677
730
|
var theme = _a.theme;
|
|
678
|
-
return theme.
|
|
731
|
+
return "".concat(theme.space.base * 4, "px ").concat(theme.space.sm);
|
|
679
732
|
}, function (_a) {
|
|
680
733
|
var theme = _a.theme;
|
|
681
734
|
return theme.palette.grey["200"];
|
|
682
735
|
}, function (_a) {
|
|
683
|
-
var theme = _a.theme;
|
|
684
|
-
return
|
|
736
|
+
var isFloating = _a.isFloating, theme = _a.theme;
|
|
737
|
+
return !isFloating &&
|
|
738
|
+
"\n &:hover {\n box-shadow: ".concat(theme.shadows.boxShadow(theme), ";\n }");
|
|
685
739
|
});
|
|
686
|
-
|
|
740
|
+
/**
|
|
741
|
+
* A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
|
|
742
|
+
* <hr>
|
|
743
|
+
* Used for this:
|
|
744
|
+
- Display products and services
|
|
745
|
+
- As container of input (checkboxCard, radioCard)
|
|
746
|
+
*/
|
|
747
|
+
var SpecialCard = function (props) { return jsxRuntime.jsx(UgContentCard, __assign({}, props)); };
|
|
748
|
+
SpecialCard.Meta = CardMeta;
|
|
749
|
+
SpecialCard.Thumb = CardThumbnail;
|
|
750
|
+
SpecialCard.Header = CardHeader;
|
|
751
|
+
SpecialCard.Footer = CardFooter;
|
|
752
|
+
var templateObject_1$W;
|
|
753
|
+
|
|
754
|
+
var CampaignCardSkeleton = function () {
|
|
755
|
+
return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
756
|
+
};
|
|
757
|
+
|
|
758
|
+
/**
|
|
759
|
+
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
760
|
+
*/
|
|
761
|
+
var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
|
|
687
762
|
|
|
688
763
|
var getStatusIcon = function (status) {
|
|
689
764
|
switch (status) {
|
|
@@ -707,12 +782,11 @@ var getTypeDataIcon = function (type) {
|
|
|
707
782
|
return SvgCampaignFunctional;
|
|
708
783
|
}
|
|
709
784
|
};
|
|
710
|
-
var
|
|
711
|
-
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) {
|
|
785
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
712
786
|
var theme = _a.theme;
|
|
713
787
|
return theme.palette.grey["700"];
|
|
714
788
|
});
|
|
715
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(
|
|
789
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$m || (templateObject_2$m = __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) {
|
|
716
790
|
var theme = _a.theme;
|
|
717
791
|
return theme.space.base * 6;
|
|
718
792
|
}, function (_a) {
|
|
@@ -725,66 +799,19 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$g || (temp
|
|
|
725
799
|
var theme = _a.theme;
|
|
726
800
|
return theme.palette.white;
|
|
727
801
|
});
|
|
728
|
-
var StyledLabel$
|
|
729
|
-
var theme = _a.theme;
|
|
730
|
-
return theme.fontSizes.sm;
|
|
731
|
-
}, function (_a) {
|
|
802
|
+
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
732
803
|
var theme = _a.theme;
|
|
733
804
|
return theme.palette.grey["500"];
|
|
734
805
|
});
|
|
735
|
-
var
|
|
736
|
-
var
|
|
737
|
-
return theme.palette.blue["600"];
|
|
738
|
-
}, function (_a) {
|
|
739
|
-
var theme = _a.theme;
|
|
740
|
-
return theme.fontSizes.lg;
|
|
741
|
-
});
|
|
742
|
-
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) {
|
|
743
|
-
var theme = _a.theme;
|
|
744
|
-
return theme.space.lg;
|
|
745
|
-
}, function (_a) {
|
|
746
|
-
var theme = _a.theme;
|
|
747
|
-
return theme.palette.grey["300"];
|
|
748
|
-
});
|
|
749
|
-
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) {
|
|
750
|
-
var theme = _a.theme;
|
|
751
|
-
return theme.space.base * 6;
|
|
752
|
-
});
|
|
753
|
-
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) {
|
|
754
|
-
var theme = _a.theme;
|
|
755
|
-
return theme.space.xxl;
|
|
756
|
-
});
|
|
757
|
-
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"])));
|
|
758
|
-
var CampaignCard = function (props) {
|
|
759
|
-
var isNew = props.isNew, date = props.date, projectTitle = props.projectTitle, campaignTitle = props.campaignTitle, status = props.status, type = props.type, labelNew = props.labelNew;
|
|
806
|
+
var CampaignCard = function (_a) {
|
|
807
|
+
var isNew = _a.isNew, date = _a.date, projectTitle = _a.projectTitle, campaignTitle = _a.campaignTitle, status = _a.status, type = _a.type, labelNew = _a.labelNew, props = __rest(_a, ["isNew", "date", "projectTitle", "campaignTitle", "status", "type", "labelNew"]);
|
|
760
808
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
761
809
|
var PillIcon = getTypeDataIcon(type);
|
|
762
|
-
|
|
763
|
-
if (projectTitle.length > 42) {
|
|
764
|
-
projectTitleCut = "".concat(projectTitle.substring(0, 39), "...");
|
|
765
|
-
}
|
|
766
|
-
var campaignTitleCut = campaignTitle;
|
|
767
|
-
if (campaignTitle.length > 29) {
|
|
768
|
-
campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
|
|
769
|
-
}
|
|
770
|
-
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, {})] })] })));
|
|
810
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
771
811
|
};
|
|
772
|
-
var templateObject_1$
|
|
812
|
+
var templateObject_1$V, templateObject_2$m, templateObject_3$e;
|
|
773
813
|
|
|
774
|
-
var
|
|
775
|
-
var theme = _a.theme;
|
|
776
|
-
return theme.borderRadii.lg;
|
|
777
|
-
}, function (_a) {
|
|
778
|
-
var theme = _a.theme;
|
|
779
|
-
return theme.components.notification.card.padding;
|
|
780
|
-
}, function (_a) {
|
|
781
|
-
var theme = _a.theme;
|
|
782
|
-
return theme.palette.grey["200"];
|
|
783
|
-
}, function (_a) {
|
|
784
|
-
var theme = _a.theme;
|
|
785
|
-
return theme.shadows.boxShadow(theme);
|
|
786
|
-
});
|
|
787
|
-
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) {
|
|
814
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$U || (templateObject_1$U = __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) {
|
|
788
815
|
var theme = _a.theme;
|
|
789
816
|
return theme.space.base * 6;
|
|
790
817
|
}, function (_a) {
|
|
@@ -797,61 +824,20 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$m || (templa
|
|
|
797
824
|
var theme = _a.theme;
|
|
798
825
|
return theme.palette.white;
|
|
799
826
|
});
|
|
800
|
-
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) {
|
|
801
|
-
var theme = _a.theme;
|
|
802
|
-
return theme.fontSizes.sm;
|
|
803
|
-
}, function (_a) {
|
|
804
|
-
var theme = _a.theme;
|
|
805
|
-
return theme.palette.grey["500"];
|
|
806
|
-
});
|
|
807
|
-
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) {
|
|
808
|
-
var theme = _a.theme;
|
|
809
|
-
return theme.palette.blue["600"];
|
|
810
|
-
}, function (_a) {
|
|
811
|
-
var theme = _a.theme;
|
|
812
|
-
return theme.fontSizes.lg;
|
|
813
|
-
});
|
|
814
|
-
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) {
|
|
815
|
-
var theme = _a.theme;
|
|
816
|
-
return theme.space.sm;
|
|
817
|
-
}, function (_a) {
|
|
818
|
-
var theme = _a.theme;
|
|
819
|
-
return theme.palette.grey["300"];
|
|
820
|
-
});
|
|
821
|
-
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) {
|
|
822
|
-
var theme = _a.theme;
|
|
823
|
-
return theme.components.notification.card.padding;
|
|
824
|
-
});
|
|
825
|
-
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"])));
|
|
826
|
-
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"])));
|
|
827
827
|
var ProductCard = function (props) {
|
|
828
828
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
829
|
-
|
|
830
|
-
if (productTitle.length > 42) {
|
|
831
|
-
productTitleCut = "".concat(productTitle.substring(0, 39), "...");
|
|
832
|
-
}
|
|
833
|
-
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 })) })] })));
|
|
829
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
|
|
834
830
|
};
|
|
835
|
-
var templateObject_1$
|
|
836
|
-
|
|
837
|
-
/**
|
|
838
|
-
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
839
|
-
*/
|
|
840
|
-
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
|
|
841
|
-
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
|
|
842
|
-
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
|
|
843
|
-
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
844
|
-
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
845
|
-
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
831
|
+
var templateObject_1$U;
|
|
846
832
|
|
|
847
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
833
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
848
834
|
var theme = _a.theme;
|
|
849
835
|
return theme.palette.grey[500];
|
|
850
836
|
}, function (_a) {
|
|
851
837
|
var theme = _a.theme;
|
|
852
838
|
return theme.space.base;
|
|
853
839
|
});
|
|
854
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n
|
|
840
|
+
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) {
|
|
855
841
|
var theme = _a.theme;
|
|
856
842
|
return theme.palette.blue[600];
|
|
857
843
|
}, function (_a) {
|
|
@@ -861,115 +847,50 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templat
|
|
|
861
847
|
var theme = _a.theme;
|
|
862
848
|
return theme.fontWeights.semibold;
|
|
863
849
|
});
|
|
864
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
850
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
865
851
|
var theme = _a.theme;
|
|
866
852
|
return theme.space.xs;
|
|
867
853
|
}, function (_a) {
|
|
868
854
|
var theme = _a.theme;
|
|
869
855
|
return theme.space.xs;
|
|
870
856
|
});
|
|
871
|
-
var
|
|
872
|
-
var
|
|
873
|
-
var theme = _a.theme;
|
|
874
|
-
return theme.space.base * 16;
|
|
875
|
-
}, function (_a) {
|
|
876
|
-
var theme = _a.theme;
|
|
877
|
-
return theme.space.base * 16;
|
|
878
|
-
});
|
|
879
|
-
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) {
|
|
880
|
-
var theme = _a.theme;
|
|
881
|
-
return theme.space.sm;
|
|
882
|
-
});
|
|
883
|
-
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) {
|
|
884
|
-
var theme = _a.theme;
|
|
885
|
-
return theme.space.sm;
|
|
886
|
-
});
|
|
887
|
-
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) {
|
|
857
|
+
var CardContent = styled__default["default"].div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
858
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", ";\n }\n"])), function (_a) {
|
|
888
859
|
var theme = _a.theme;
|
|
889
860
|
return theme.space.base;
|
|
890
861
|
}, function (_a) {
|
|
891
862
|
var theme = _a.theme;
|
|
892
|
-
return theme.
|
|
893
|
-
});
|
|
894
|
-
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"])));
|
|
895
|
-
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) {
|
|
896
|
-
var theme = _a.theme;
|
|
897
|
-
return theme.space.sm;
|
|
898
|
-
});
|
|
899
|
-
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) {
|
|
900
|
-
var theme = _a.theme;
|
|
901
|
-
return theme.space.base;
|
|
863
|
+
return theme.space.xxs;
|
|
902
864
|
}, function (_a) {
|
|
903
865
|
var theme = _a.theme;
|
|
904
|
-
return theme.space.
|
|
866
|
+
return theme.space.xs;
|
|
905
867
|
});
|
|
906
|
-
var HoverBody = styled__default["default"](
|
|
868
|
+
var HoverBody = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __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) {
|
|
907
869
|
var theme = _a.theme;
|
|
908
870
|
return theme.components.notification.card.padding;
|
|
909
871
|
}, function (_a) {
|
|
910
872
|
var theme = _a.theme;
|
|
911
873
|
return theme.palette.white;
|
|
912
874
|
});
|
|
913
|
-
var HoverMetaContainer = styled__default["default"].div(
|
|
914
|
-
var StyledCard
|
|
875
|
+
var HoverMetaContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
876
|
+
var StyledCard = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
915
877
|
var isHoverable = _a.isHoverable;
|
|
916
|
-
return isHoverable &&
|
|
878
|
+
return isHoverable &&
|
|
879
|
+
"\n &:hover {\n ".concat(HoverBody, " {\n top: 0;\n transition: all 0.3s ease-in-out;\n }\n\n ").concat(CardContent, " {\n opacity: 0;\n transition: all 0.3s ease-in-out;\n }\n }\n ");
|
|
917
880
|
});
|
|
918
881
|
var ServiceCard = function (props) {
|
|
919
|
-
|
|
882
|
+
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
883
|
+
return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, { 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)); }) }))] })] })));
|
|
920
884
|
};
|
|
921
|
-
var templateObject_1$
|
|
885
|
+
var templateObject_1$T, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
922
886
|
|
|
923
|
-
var
|
|
924
|
-
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"])));
|
|
925
|
-
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) {
|
|
926
|
-
var theme = _a.theme;
|
|
927
|
-
return theme.space.sm;
|
|
928
|
-
});
|
|
929
|
-
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) {
|
|
930
|
-
var theme = _a.theme;
|
|
931
|
-
return theme.space.sm;
|
|
932
|
-
});
|
|
933
|
-
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"])));
|
|
934
|
-
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"])));
|
|
935
|
-
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) {
|
|
936
|
-
var theme = _a.theme;
|
|
937
|
-
return theme.space.sm;
|
|
938
|
-
});
|
|
939
|
-
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) {
|
|
940
|
-
var theme = _a.theme;
|
|
941
|
-
return theme.space.sm;
|
|
942
|
-
});
|
|
943
|
-
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) {
|
|
944
|
-
var theme = _a.theme;
|
|
945
|
-
return theme.space.base;
|
|
946
|
-
}, function (_a) {
|
|
947
|
-
var theme = _a.theme;
|
|
948
|
-
return theme.palette.grey["300"];
|
|
949
|
-
});
|
|
950
|
-
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) {
|
|
951
|
-
var theme = _a.theme;
|
|
952
|
-
return theme.palette.grey[500];
|
|
953
|
-
}, function (_a) {
|
|
954
|
-
var theme = _a.theme;
|
|
955
|
-
return theme.space.base;
|
|
956
|
-
});
|
|
957
|
-
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) {
|
|
958
|
-
var theme = _a.theme;
|
|
959
|
-
return theme.palette.blue[600];
|
|
960
|
-
}, function (_a) {
|
|
961
|
-
var theme = _a.theme;
|
|
962
|
-
return theme.space.base;
|
|
963
|
-
}, function (_a) {
|
|
964
|
-
var theme = _a.theme;
|
|
965
|
-
return theme.fontWeights.semibold;
|
|
966
|
-
});
|
|
887
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
967
888
|
var InfoCard = function (props) {
|
|
968
|
-
return (jsxRuntime.
|
|
889
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
|
|
969
890
|
};
|
|
970
|
-
var templateObject_1$
|
|
891
|
+
var templateObject_1$S;
|
|
971
892
|
|
|
972
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
893
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
973
894
|
var theme = _a.theme;
|
|
974
895
|
return theme.space.xl;
|
|
975
896
|
}, function (_a) {
|
|
@@ -980,7 +901,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
980
901
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
981
902
|
*/
|
|
982
903
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
983
|
-
var templateObject_1$
|
|
904
|
+
var templateObject_1$R;
|
|
984
905
|
|
|
985
906
|
/**
|
|
986
907
|
* Use Span to style and format inline text elements.
|
|
@@ -1020,8 +941,8 @@ function useWindowSize() {
|
|
|
1020
941
|
return size;
|
|
1021
942
|
}
|
|
1022
943
|
|
|
1023
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1024
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
944
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
945
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"])), function (_a) {
|
|
1025
946
|
var status = _a.status, theme = _a.theme;
|
|
1026
947
|
switch (status) {
|
|
1027
948
|
case "completed":
|
|
@@ -1055,7 +976,7 @@ var Counter = function (props) {
|
|
|
1055
976
|
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() })] })));
|
|
1056
977
|
};
|
|
1057
978
|
Counter.Avatar = StyledTag.Avatar;
|
|
1058
|
-
var templateObject_1$
|
|
979
|
+
var templateObject_1$Q, templateObject_2$k;
|
|
1059
980
|
|
|
1060
981
|
/**
|
|
1061
982
|
* A Drawer is a container for supplementary content that is anchored to the edge of a page.
|
|
@@ -1071,20 +992,20 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
|
1071
992
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1072
993
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1073
994
|
|
|
1074
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1075
|
-
var templateObject_1$
|
|
995
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
996
|
+
var templateObject_1$P;
|
|
1076
997
|
|
|
1077
998
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1078
999
|
__proto__: null,
|
|
1079
1000
|
Field: Field$1
|
|
1080
1001
|
});
|
|
1081
1002
|
|
|
1082
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1003
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$O || (templateObject_1$O = __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) {
|
|
1083
1004
|
var theme = _a.theme;
|
|
1084
1005
|
return theme.palette.blue[100];
|
|
1085
1006
|
});
|
|
1086
1007
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1087
|
-
var templateObject_1$
|
|
1008
|
+
var templateObject_1$O;
|
|
1088
1009
|
|
|
1089
1010
|
/**
|
|
1090
1011
|
* A Menu is a wrapper for items elements
|
|
@@ -1108,7 +1029,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1108
1029
|
*/
|
|
1109
1030
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1110
1031
|
|
|
1111
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1032
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1112
1033
|
return props.isPrimary &&
|
|
1113
1034
|
"\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 ");
|
|
1114
1035
|
});
|
|
@@ -1125,7 +1046,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1125
1046
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1126
1047
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1127
1048
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1128
|
-
var templateObject_1$
|
|
1049
|
+
var templateObject_1$N;
|
|
1129
1050
|
|
|
1130
1051
|
/**
|
|
1131
1052
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1140,7 +1061,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1140
1061
|
|
|
1141
1062
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1142
1063
|
|
|
1143
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1064
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1144
1065
|
/**
|
|
1145
1066
|
* A Checkbox lets users select and unselect options from a list.
|
|
1146
1067
|
* <hr>
|
|
@@ -1152,36 +1073,66 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1152
1073
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1153
1074
|
**/
|
|
1154
1075
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1155
|
-
var templateObject_1$
|
|
1076
|
+
var templateObject_1$M;
|
|
1156
1077
|
|
|
1157
|
-
var
|
|
1078
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1079
|
+
/**
|
|
1080
|
+
* A Label is used to specify a title for an input.
|
|
1081
|
+
* <hr>
|
|
1082
|
+
**/
|
|
1083
|
+
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1084
|
+
var templateObject_1$L;
|
|
1085
|
+
|
|
1086
|
+
var flexCenter = styled.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1087
|
+
var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1088
|
+
var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
1089
|
+
var theme = _a.theme;
|
|
1090
|
+
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1091
|
+
});
|
|
1092
|
+
var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __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) {
|
|
1093
|
+
var theme = _a.theme;
|
|
1094
|
+
return theme.borderRadii.lg;
|
|
1095
|
+
}, function (_a) {
|
|
1096
|
+
var theme = _a.theme;
|
|
1097
|
+
return theme.components.notification.card.padding;
|
|
1098
|
+
}, function (_a) {
|
|
1099
|
+
var theme = _a.theme;
|
|
1100
|
+
return theme.palette.grey["200"];
|
|
1101
|
+
}, function (_a) {
|
|
1102
|
+
var theme = _a.theme;
|
|
1103
|
+
return theme.shadows.boxShadow(theme);
|
|
1104
|
+
});
|
|
1105
|
+
var templateObject_1$K, templateObject_2$j, templateObject_3$c, templateObject_4$8;
|
|
1106
|
+
|
|
1107
|
+
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) {
|
|
1158
1108
|
var theme = _a.theme;
|
|
1159
1109
|
return theme.palette.blue[300];
|
|
1160
1110
|
});
|
|
1161
|
-
|
|
1111
|
+
styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1162
1112
|
var theme = _a.theme;
|
|
1163
1113
|
return theme.space.base;
|
|
1164
1114
|
});
|
|
1165
|
-
|
|
1115
|
+
styled__default["default"](Label)(templateObject_3$b || (templateObject_3$b = __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) {
|
|
1166
1116
|
var theme = _a.theme;
|
|
1167
1117
|
return theme.space.base;
|
|
1168
1118
|
}, function (_a) {
|
|
1169
1119
|
var theme = _a.theme;
|
|
1170
1120
|
return theme.palette.grey[700];
|
|
1171
1121
|
});
|
|
1172
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_4$
|
|
1122
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1173
1123
|
var theme = _a.theme;
|
|
1174
1124
|
return theme.space.base;
|
|
1175
1125
|
});
|
|
1176
1126
|
var CheckboxCard = function (props) {
|
|
1127
|
+
var cardArgs = props.card;
|
|
1177
1128
|
var _a = React.useState(props.defaultChecked || false), checked = _a[0], setChecked = _a[1];
|
|
1178
1129
|
var handleToggle = function () {
|
|
1179
1130
|
setChecked(!checked);
|
|
1180
1131
|
props.onToggle && props.onToggle(!checked);
|
|
1181
1132
|
};
|
|
1182
|
-
return (jsxRuntime.jsxs(
|
|
1133
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, __assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1183
1134
|
};
|
|
1184
|
-
var templateObject_1$J, templateObject_2$i, templateObject_3$
|
|
1135
|
+
var templateObject_1$J, templateObject_2$i, templateObject_3$b, templateObject_4$7;
|
|
1185
1136
|
|
|
1186
1137
|
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1187
1138
|
/**
|
|
@@ -1251,15 +1202,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1251
1202
|
})));
|
|
1252
1203
|
};
|
|
1253
1204
|
|
|
1254
|
-
var
|
|
1255
|
-
var theme = _a.theme;
|
|
1256
|
-
return theme.palette.blue[300];
|
|
1257
|
-
});
|
|
1258
|
-
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) {
|
|
1259
|
-
var theme = _a.theme;
|
|
1260
|
-
return theme.space.base;
|
|
1261
|
-
});
|
|
1262
|
-
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1205
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1263
1206
|
var theme = _a.theme;
|
|
1264
1207
|
return theme.space.base;
|
|
1265
1208
|
}, function (_a) {
|
|
@@ -1269,7 +1212,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
|
|
|
1269
1212
|
var theme = _a.theme;
|
|
1270
1213
|
return theme.fontWeights.medium;
|
|
1271
1214
|
});
|
|
1272
|
-
var Circle = styled__default["default"].div(
|
|
1215
|
+
var Circle = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
|
|
1273
1216
|
var theme = _a.theme;
|
|
1274
1217
|
return theme.space.base * 6;
|
|
1275
1218
|
}, function (_a) {
|
|
@@ -1283,21 +1226,17 @@ var Circle = styled__default["default"].div(templateObject_4$7 || (templateObjec
|
|
|
1283
1226
|
return theme.colors.primaryHue;
|
|
1284
1227
|
}, function (_a) {
|
|
1285
1228
|
var checked = _a.checked;
|
|
1286
|
-
return !checked &&
|
|
1287
|
-
|
|
1288
|
-
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) {
|
|
1289
|
-
var theme = _a.theme;
|
|
1290
|
-
return theme.palette.blue[100];
|
|
1291
|
-
}, function (_a) {
|
|
1292
|
-
var theme = _a.theme;
|
|
1293
|
-
return theme.space.base * 4;
|
|
1229
|
+
return !checked &&
|
|
1230
|
+
"\n opacity: 0;\n visibility: hidden;\n ";
|
|
1294
1231
|
});
|
|
1295
1232
|
var RadioCard = function (_a) {
|
|
1296
1233
|
var _b;
|
|
1297
1234
|
var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
|
|
1298
|
-
return (jsxRuntime.jsxs(
|
|
1235
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, card, props, { className: props.checked ? "card-active" : "", onClick: function () {
|
|
1236
|
+
props.onChecked && props.onChecked(props.value);
|
|
1237
|
+
} }, { children: [jsxRuntime.jsx(SpecialCard.Meta, __assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, __assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
|
|
1299
1238
|
};
|
|
1300
|
-
var templateObject_1$E, templateObject_2$g
|
|
1239
|
+
var templateObject_1$E, templateObject_2$g;
|
|
1301
1240
|
|
|
1302
1241
|
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1303
1242
|
/**
|
|
@@ -1515,11 +1454,6 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1515
1454
|
})));
|
|
1516
1455
|
};
|
|
1517
1456
|
|
|
1518
|
-
/**
|
|
1519
|
-
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
1520
|
-
*/
|
|
1521
|
-
var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
|
|
1522
|
-
|
|
1523
1457
|
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1524
1458
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1525
1459
|
return isCompact &&
|
|
@@ -1993,7 +1927,7 @@ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment,
|
|
|
1993
1927
|
? true
|
|
1994
1928
|
: isSubmitting
|
|
1995
1929
|
? true
|
|
1996
|
-
: false, isPrimary: true, isPill: true, themeColor: theme.
|
|
1930
|
+
: false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
|
|
1997
1931
|
} }))] })), 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"] })))] })); };
|
|
1998
1932
|
|
|
1999
1933
|
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
@@ -2556,9 +2490,6 @@ exports.ButtonGroup = ButtonGroup;
|
|
|
2556
2490
|
exports.CampaignCard = CampaignCard;
|
|
2557
2491
|
exports.Caption = Caption;
|
|
2558
2492
|
exports.Card = Card;
|
|
2559
|
-
exports.CardBody = CardBody$3;
|
|
2560
|
-
exports.CardFooter = CardFooter$3;
|
|
2561
|
-
exports.CardHeader = CardHeader$2;
|
|
2562
2493
|
exports.Checkbox = Checkbox;
|
|
2563
2494
|
exports.CheckboxCard = CheckboxCard;
|
|
2564
2495
|
exports.Chrome = Chrome;
|
|
@@ -2569,7 +2500,6 @@ exports.ContainerCard = ContainerCard;
|
|
|
2569
2500
|
exports.Content = Content;
|
|
2570
2501
|
exports.Counter = Counter;
|
|
2571
2502
|
exports.CursorPagination = CursorPagination;
|
|
2572
|
-
exports.Divider = Divider$3;
|
|
2573
2503
|
exports.Drawer = Drawer;
|
|
2574
2504
|
exports.Dropdown = Dropdown;
|
|
2575
2505
|
exports.DropdownField = index$1;
|
|
@@ -2653,7 +2583,6 @@ exports.ToastProvider = ToastProvider;
|
|
|
2653
2583
|
exports.Toggle = Toggle;
|
|
2654
2584
|
exports.Trigger = Trigger;
|
|
2655
2585
|
exports.UnorderedList = UnorderedList;
|
|
2656
|
-
exports.Wrapper = Wrapper$1;
|
|
2657
2586
|
exports.XL = XL;
|
|
2658
2587
|
exports.XXL = XXL;
|
|
2659
2588
|
exports.XXXL = XXXL;
|
|
@@ -1,8 +1,3 @@
|
|
|
1
1
|
import { CampaignCardsProps } from "./_types";
|
|
2
|
-
|
|
3
|
-
export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export declare const CardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
-
export declare const CardBody: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const CardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
-
declare const CampaignCard: (props: CampaignCardsProps) => JSX.Element;
|
|
2
|
+
declare const CampaignCard: ({ isNew, date, projectTitle, campaignTitle, status, type, labelNew, ...props }: CampaignCardsProps) => JSX.Element;
|
|
8
3
|
export { CampaignCard };
|
|
@@ -2,5 +2,5 @@ import { CampaignCardsProps } from "./_types";
|
|
|
2
2
|
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
3
|
export declare const SingleCard: Story<CampaignCardsProps>;
|
|
4
4
|
export declare const Grid: Story<CampaignCardsProps>;
|
|
5
|
-
declare const _default: ComponentMeta<(props: CampaignCardsProps) => JSX.Element>;
|
|
5
|
+
declare const _default: ComponentMeta<({ isNew, date, projectTitle, campaignTitle, status, type, labelNew, ...props }: CampaignCardsProps) => JSX.Element>;
|
|
6
6
|
export default _default;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { IWellProps } from "@zendeskgarden/react-notifications";
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
export declare const FLEX_DIRECTION: string[];
|
|
4
|
+
export declare const JUSTIFY_CONTENT: string[];
|
|
5
|
+
export interface CardProps extends IWellProps {
|
|
6
|
+
/** Applies a background color */
|
|
7
|
+
isRecessed?: boolean;
|
|
8
|
+
/** Applies a drop shadow */
|
|
9
|
+
isFloating?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface CardMetaProps extends HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
direction?: typeof FLEX_DIRECTION[number];
|
|
13
|
+
justifyContent?: typeof JUSTIFY_CONTENT[number];
|
|
14
|
+
}
|
|
15
|
+
export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
16
|
+
align?: "left" | "right" | "center";
|
|
17
|
+
}
|
|
18
|
+
export interface CardThumbProps extends HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
align?: "left" | "right" | "center";
|
|
20
|
+
isStretched?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
23
|
+
direction?: typeof FLEX_DIRECTION[number];
|
|
24
|
+
justifyContent?: typeof JUSTIFY_CONTENT[number];
|
|
25
|
+
noDivider?: boolean;
|
|
26
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CardProps } from "./_types";
|
|
2
|
+
/**
|
|
3
|
+
* A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
|
|
4
|
+
* <hr>
|
|
5
|
+
* Used for this:
|
|
6
|
+
- Display products and services
|
|
7
|
+
- As container of input (checkboxCard, radioCard)
|
|
8
|
+
*/
|
|
9
|
+
declare const SpecialCard: {
|
|
10
|
+
(props: CardProps): JSX.Element;
|
|
11
|
+
Meta: import("styled-components").StyledComponent<"div", any, import("./_types").CardMetaProps, never>;
|
|
12
|
+
Thumb: import("styled-components").StyledComponent<"div", any, import("./_types").CardThumbProps, never>;
|
|
13
|
+
Header: {
|
|
14
|
+
(props: import("./_types").CardHeaderProps): JSX.Element;
|
|
15
|
+
Label: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").SMArgs) => JSX.Element, any, {}, never>;
|
|
16
|
+
Title: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
|
|
17
|
+
Text: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
|
|
18
|
+
};
|
|
19
|
+
Footer: (props: import("./_types").CardFooterProps) => JSX.Element;
|
|
20
|
+
};
|
|
21
|
+
export { SpecialCard };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ComponentMeta, Story } from "@storybook/react";
|
|
2
|
+
import { CardProps } from "./_types";
|
|
3
|
+
interface CardStoryProps extends CardProps {
|
|
4
|
+
title: string;
|
|
5
|
+
content: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const Default: Story<CardStoryProps>;
|
|
8
|
+
declare const _default: ComponentMeta<{
|
|
9
|
+
(props: CardProps): JSX.Element;
|
|
10
|
+
Meta: import("styled-components").StyledComponent<"div", any, import("./_types").CardMetaProps, never>;
|
|
11
|
+
Thumb: import("styled-components").StyledComponent<"div", any, import("./_types").CardThumbProps, never>;
|
|
12
|
+
Header: {
|
|
13
|
+
(props: import("./_types").CardHeaderProps): JSX.Element;
|
|
14
|
+
Label: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").SMArgs) => JSX.Element, any, {}, never>;
|
|
15
|
+
Title: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
|
|
16
|
+
Text: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
|
|
17
|
+
};
|
|
18
|
+
Footer: (props: import("./_types").CardFooterProps) => JSX.Element;
|
|
19
|
+
}>;
|
|
20
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CardHeaderProps } from "../_types";
|
|
2
|
+
declare const CardHeader: {
|
|
3
|
+
(props: CardHeaderProps): JSX.Element;
|
|
4
|
+
Label: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").SMArgs) => JSX.Element, any, {}, never>;
|
|
5
|
+
Title: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
|
|
6
|
+
Text: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
|
|
7
|
+
};
|
|
8
|
+
export { CardHeader };
|