@appquality/unguess-design-system 2.10.43 β 2.10.46
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 +36 -0
- package/build/index.js +199 -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,39 @@
|
|
|
1
|
+
# v2.10.46 (Wed Jun 08 2022)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(special-card): update base card padding [#69](https://github.com/AppQuality/unguess-design-system/pull/69) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.45 (Tue Jun 07 2022)
|
|
14
|
+
|
|
15
|
+
#### π Bug Fix
|
|
16
|
+
|
|
17
|
+
- fix(card-footer): update space between divider [#67](https://github.com/AppQuality/unguess-design-system/pull/67) ([@cannarocks](https://github.com/cannarocks))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v2.10.44 (Mon Jun 06 2022)
|
|
26
|
+
|
|
27
|
+
#### π Bug Fix
|
|
28
|
+
|
|
29
|
+
- Cup 720 refactor card component [#66](https://github.com/AppQuality/unguess-design-system/pull/66) ([@cannarocks](https://github.com/cannarocks))
|
|
30
|
+
|
|
31
|
+
#### Authors: 1
|
|
32
|
+
|
|
33
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
1
37
|
# v2.10.43 (Wed Jun 01 2022)
|
|
2
38
|
|
|
3
39
|
#### π 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,118 @@ 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];
|
|
672
683
|
});
|
|
673
|
-
var
|
|
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 ");
|
|
704
|
+
});
|
|
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: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
712
|
+
var theme = _a.theme;
|
|
713
|
+
return theme.space.base * 3;
|
|
714
|
+
}, function (_a) {
|
|
715
|
+
var theme = _a.theme;
|
|
716
|
+
return theme.space.xxs;
|
|
717
|
+
}, function (_a) {
|
|
718
|
+
var theme = _a.theme;
|
|
719
|
+
return theme.palette.grey["300"];
|
|
720
|
+
});
|
|
721
|
+
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 width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
|
|
722
|
+
var Container = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
723
|
+
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
724
|
+
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 ");
|
|
725
|
+
});
|
|
726
|
+
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
727
|
+
var templateObject_1$X, templateObject_2$n, templateObject_3$f;
|
|
728
|
+
|
|
729
|
+
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
730
|
var theme = _a.theme;
|
|
675
731
|
return theme.borderRadii.lg;
|
|
676
732
|
}, function (_a) {
|
|
677
733
|
var theme = _a.theme;
|
|
678
|
-
return theme.
|
|
734
|
+
return "".concat(theme.space.sm, " ").concat(theme.space.base * 4, "px");
|
|
679
735
|
}, function (_a) {
|
|
680
736
|
var theme = _a.theme;
|
|
681
737
|
return theme.palette.grey["200"];
|
|
682
738
|
}, function (_a) {
|
|
683
|
-
var theme = _a.theme;
|
|
684
|
-
return
|
|
739
|
+
var isFloating = _a.isFloating, theme = _a.theme;
|
|
740
|
+
return !isFloating &&
|
|
741
|
+
"\n &:hover {\n box-shadow: ".concat(theme.shadows.boxShadow(theme), ";\n }");
|
|
685
742
|
});
|
|
686
|
-
|
|
743
|
+
/**
|
|
744
|
+
* A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
|
|
745
|
+
* <hr>
|
|
746
|
+
* Used for this:
|
|
747
|
+
- Display products and services
|
|
748
|
+
- As container of input (checkboxCard, radioCard)
|
|
749
|
+
*/
|
|
750
|
+
var SpecialCard = function (props) { return jsxRuntime.jsx(UgContentCard, __assign({}, props)); };
|
|
751
|
+
SpecialCard.Meta = CardMeta;
|
|
752
|
+
SpecialCard.Thumb = CardThumbnail;
|
|
753
|
+
SpecialCard.Header = CardHeader;
|
|
754
|
+
SpecialCard.Footer = CardFooter;
|
|
755
|
+
var templateObject_1$W;
|
|
756
|
+
|
|
757
|
+
var CampaignCardSkeleton = function () {
|
|
758
|
+
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%" } })] })] }));
|
|
759
|
+
};
|
|
760
|
+
|
|
761
|
+
/**
|
|
762
|
+
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
763
|
+
*/
|
|
764
|
+
var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
|
|
687
765
|
|
|
688
766
|
var getStatusIcon = function (status) {
|
|
689
767
|
switch (status) {
|
|
@@ -707,12 +785,11 @@ var getTypeDataIcon = function (type) {
|
|
|
707
785
|
return SvgCampaignFunctional;
|
|
708
786
|
}
|
|
709
787
|
};
|
|
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) {
|
|
788
|
+
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
789
|
var theme = _a.theme;
|
|
713
790
|
return theme.palette.grey["700"];
|
|
714
791
|
});
|
|
715
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(
|
|
792
|
+
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
793
|
var theme = _a.theme;
|
|
717
794
|
return theme.space.base * 6;
|
|
718
795
|
}, function (_a) {
|
|
@@ -725,66 +802,19 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$g || (temp
|
|
|
725
802
|
var theme = _a.theme;
|
|
726
803
|
return theme.palette.white;
|
|
727
804
|
});
|
|
728
|
-
var StyledLabel$
|
|
729
|
-
var theme = _a.theme;
|
|
730
|
-
return theme.fontSizes.sm;
|
|
731
|
-
}, function (_a) {
|
|
805
|
+
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
732
806
|
var theme = _a.theme;
|
|
733
807
|
return theme.palette.grey["500"];
|
|
734
808
|
});
|
|
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;
|
|
809
|
+
var CampaignCard = function (_a) {
|
|
810
|
+
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
811
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
761
812
|
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, {})] })] })));
|
|
813
|
+
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
814
|
};
|
|
772
|
-
var templateObject_1$
|
|
815
|
+
var templateObject_1$V, templateObject_2$m, templateObject_3$e;
|
|
773
816
|
|
|
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) {
|
|
817
|
+
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
818
|
var theme = _a.theme;
|
|
789
819
|
return theme.space.base * 6;
|
|
790
820
|
}, function (_a) {
|
|
@@ -797,61 +827,20 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$m || (templa
|
|
|
797
827
|
var theme = _a.theme;
|
|
798
828
|
return theme.palette.white;
|
|
799
829
|
});
|
|
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
830
|
var ProductCard = function (props) {
|
|
828
831
|
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 })) })] })));
|
|
832
|
+
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
833
|
};
|
|
835
|
-
var templateObject_1$
|
|
834
|
+
var templateObject_1$U;
|
|
836
835
|
|
|
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)); };
|
|
846
|
-
|
|
847
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
836
|
+
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
837
|
var theme = _a.theme;
|
|
849
838
|
return theme.palette.grey[500];
|
|
850
839
|
}, function (_a) {
|
|
851
840
|
var theme = _a.theme;
|
|
852
841
|
return theme.space.base;
|
|
853
842
|
});
|
|
854
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n
|
|
843
|
+
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
844
|
var theme = _a.theme;
|
|
856
845
|
return theme.palette.blue[600];
|
|
857
846
|
}, function (_a) {
|
|
@@ -861,115 +850,50 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templat
|
|
|
861
850
|
var theme = _a.theme;
|
|
862
851
|
return theme.fontWeights.semibold;
|
|
863
852
|
});
|
|
864
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
853
|
+
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
854
|
var theme = _a.theme;
|
|
866
855
|
return theme.space.xs;
|
|
867
856
|
}, function (_a) {
|
|
868
857
|
var theme = _a.theme;
|
|
869
858
|
return theme.space.xs;
|
|
870
859
|
});
|
|
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) {
|
|
860
|
+
var CardContent = styled__default["default"].div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
861
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$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: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
888
862
|
var theme = _a.theme;
|
|
889
863
|
return theme.space.base;
|
|
890
864
|
}, function (_a) {
|
|
891
865
|
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;
|
|
866
|
+
return theme.space.xxs;
|
|
902
867
|
}, function (_a) {
|
|
903
868
|
var theme = _a.theme;
|
|
904
|
-
return theme.space.
|
|
869
|
+
return theme.space.base * 4;
|
|
905
870
|
});
|
|
906
|
-
var HoverBody = styled__default["default"](
|
|
871
|
+
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
872
|
var theme = _a.theme;
|
|
908
873
|
return theme.components.notification.card.padding;
|
|
909
874
|
}, function (_a) {
|
|
910
875
|
var theme = _a.theme;
|
|
911
876
|
return theme.palette.white;
|
|
912
877
|
});
|
|
913
|
-
var HoverMetaContainer = styled__default["default"].div(
|
|
914
|
-
var StyledCard
|
|
878
|
+
var HoverMetaContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
879
|
+
var StyledCard = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
915
880
|
var isHoverable = _a.isHoverable;
|
|
916
|
-
return isHoverable &&
|
|
881
|
+
return isHoverable &&
|
|
882
|
+
"\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
883
|
});
|
|
918
884
|
var ServiceCard = function (props) {
|
|
919
|
-
|
|
885
|
+
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
886
|
+
return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start" }, { 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
887
|
};
|
|
921
|
-
var templateObject_1$
|
|
888
|
+
var templateObject_1$T, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
922
889
|
|
|
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
|
-
});
|
|
890
|
+
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
891
|
var InfoCard = function (props) {
|
|
968
|
-
return (jsxRuntime.
|
|
892
|
+
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
893
|
};
|
|
970
|
-
var templateObject_1$
|
|
894
|
+
var templateObject_1$S;
|
|
971
895
|
|
|
972
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
896
|
+
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
897
|
var theme = _a.theme;
|
|
974
898
|
return theme.space.xl;
|
|
975
899
|
}, function (_a) {
|
|
@@ -980,7 +904,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
980
904
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
981
905
|
*/
|
|
982
906
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
983
|
-
var templateObject_1$
|
|
907
|
+
var templateObject_1$R;
|
|
984
908
|
|
|
985
909
|
/**
|
|
986
910
|
* Use Span to style and format inline text elements.
|
|
@@ -1020,8 +944,8 @@ function useWindowSize() {
|
|
|
1020
944
|
return size;
|
|
1021
945
|
}
|
|
1022
946
|
|
|
1023
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1024
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
947
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
948
|
+
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
949
|
var status = _a.status, theme = _a.theme;
|
|
1026
950
|
switch (status) {
|
|
1027
951
|
case "completed":
|
|
@@ -1055,7 +979,7 @@ var Counter = function (props) {
|
|
|
1055
979
|
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
980
|
};
|
|
1057
981
|
Counter.Avatar = StyledTag.Avatar;
|
|
1058
|
-
var templateObject_1$
|
|
982
|
+
var templateObject_1$Q, templateObject_2$k;
|
|
1059
983
|
|
|
1060
984
|
/**
|
|
1061
985
|
* A Drawer is a container for supplementary content that is anchored to the edge of a page.
|
|
@@ -1071,20 +995,20 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
|
1071
995
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1072
996
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1073
997
|
|
|
1074
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1075
|
-
var templateObject_1$
|
|
998
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
999
|
+
var templateObject_1$P;
|
|
1076
1000
|
|
|
1077
1001
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1078
1002
|
__proto__: null,
|
|
1079
1003
|
Field: Field$1
|
|
1080
1004
|
});
|
|
1081
1005
|
|
|
1082
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1006
|
+
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
1007
|
var theme = _a.theme;
|
|
1084
1008
|
return theme.palette.blue[100];
|
|
1085
1009
|
});
|
|
1086
1010
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1087
|
-
var templateObject_1$
|
|
1011
|
+
var templateObject_1$O;
|
|
1088
1012
|
|
|
1089
1013
|
/**
|
|
1090
1014
|
* A Menu is a wrapper for items elements
|
|
@@ -1108,7 +1032,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1108
1032
|
*/
|
|
1109
1033
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1110
1034
|
|
|
1111
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1035
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1112
1036
|
return props.isPrimary &&
|
|
1113
1037
|
"\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
1038
|
});
|
|
@@ -1125,7 +1049,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1125
1049
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1126
1050
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1127
1051
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1128
|
-
var templateObject_1$
|
|
1052
|
+
var templateObject_1$N;
|
|
1129
1053
|
|
|
1130
1054
|
/**
|
|
1131
1055
|
* 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 +1064,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1140
1064
|
|
|
1141
1065
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1142
1066
|
|
|
1143
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1067
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1144
1068
|
/**
|
|
1145
1069
|
* A Checkbox lets users select and unselect options from a list.
|
|
1146
1070
|
* <hr>
|
|
@@ -1152,36 +1076,66 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1152
1076
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1153
1077
|
**/
|
|
1154
1078
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1155
|
-
var templateObject_1$
|
|
1079
|
+
var templateObject_1$M;
|
|
1080
|
+
|
|
1081
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1082
|
+
/**
|
|
1083
|
+
* A Label is used to specify a title for an input.
|
|
1084
|
+
* <hr>
|
|
1085
|
+
**/
|
|
1086
|
+
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1087
|
+
var templateObject_1$L;
|
|
1088
|
+
|
|
1089
|
+
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"])));
|
|
1090
|
+
var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1091
|
+
var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
1092
|
+
var theme = _a.theme;
|
|
1093
|
+
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1094
|
+
});
|
|
1095
|
+
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) {
|
|
1096
|
+
var theme = _a.theme;
|
|
1097
|
+
return theme.borderRadii.lg;
|
|
1098
|
+
}, function (_a) {
|
|
1099
|
+
var theme = _a.theme;
|
|
1100
|
+
return theme.components.notification.card.padding;
|
|
1101
|
+
}, function (_a) {
|
|
1102
|
+
var theme = _a.theme;
|
|
1103
|
+
return theme.palette.grey["200"];
|
|
1104
|
+
}, function (_a) {
|
|
1105
|
+
var theme = _a.theme;
|
|
1106
|
+
return theme.shadows.boxShadow(theme);
|
|
1107
|
+
});
|
|
1108
|
+
var templateObject_1$K, templateObject_2$j, templateObject_3$c, templateObject_4$8;
|
|
1156
1109
|
|
|
1157
|
-
|
|
1110
|
+
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
1111
|
var theme = _a.theme;
|
|
1159
1112
|
return theme.palette.blue[300];
|
|
1160
1113
|
});
|
|
1161
|
-
|
|
1114
|
+
styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1162
1115
|
var theme = _a.theme;
|
|
1163
1116
|
return theme.space.base;
|
|
1164
1117
|
});
|
|
1165
|
-
|
|
1118
|
+
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
1119
|
var theme = _a.theme;
|
|
1167
1120
|
return theme.space.base;
|
|
1168
1121
|
}, function (_a) {
|
|
1169
1122
|
var theme = _a.theme;
|
|
1170
1123
|
return theme.palette.grey[700];
|
|
1171
1124
|
});
|
|
1172
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_4$
|
|
1125
|
+
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
1126
|
var theme = _a.theme;
|
|
1174
1127
|
return theme.space.base;
|
|
1175
1128
|
});
|
|
1176
1129
|
var CheckboxCard = function (props) {
|
|
1130
|
+
var cardArgs = props.card;
|
|
1177
1131
|
var _a = React.useState(props.defaultChecked || false), checked = _a[0], setChecked = _a[1];
|
|
1178
1132
|
var handleToggle = function () {
|
|
1179
1133
|
setChecked(!checked);
|
|
1180
1134
|
props.onToggle && props.onToggle(!checked);
|
|
1181
1135
|
};
|
|
1182
|
-
return (jsxRuntime.jsxs(
|
|
1136
|
+
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
1137
|
};
|
|
1184
|
-
var templateObject_1$J, templateObject_2$i, templateObject_3$
|
|
1138
|
+
var templateObject_1$J, templateObject_2$i, templateObject_3$b, templateObject_4$7;
|
|
1185
1139
|
|
|
1186
1140
|
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1187
1141
|
/**
|
|
@@ -1251,15 +1205,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1251
1205
|
})));
|
|
1252
1206
|
};
|
|
1253
1207
|
|
|
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) {
|
|
1208
|
+
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
1209
|
var theme = _a.theme;
|
|
1264
1210
|
return theme.space.base;
|
|
1265
1211
|
}, function (_a) {
|
|
@@ -1269,7 +1215,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
|
|
|
1269
1215
|
var theme = _a.theme;
|
|
1270
1216
|
return theme.fontWeights.medium;
|
|
1271
1217
|
});
|
|
1272
|
-
var Circle = styled__default["default"].div(
|
|
1218
|
+
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
1219
|
var theme = _a.theme;
|
|
1274
1220
|
return theme.space.base * 6;
|
|
1275
1221
|
}, function (_a) {
|
|
@@ -1283,21 +1229,17 @@ var Circle = styled__default["default"].div(templateObject_4$7 || (templateObjec
|
|
|
1283
1229
|
return theme.colors.primaryHue;
|
|
1284
1230
|
}, function (_a) {
|
|
1285
1231
|
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;
|
|
1232
|
+
return !checked &&
|
|
1233
|
+
"\n opacity: 0;\n visibility: hidden;\n ";
|
|
1294
1234
|
});
|
|
1295
1235
|
var RadioCard = function (_a) {
|
|
1296
1236
|
var _b;
|
|
1297
1237
|
var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
|
|
1298
|
-
return (jsxRuntime.jsxs(
|
|
1238
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, card, props, { className: props.checked ? "card-active" : "", onClick: function () {
|
|
1239
|
+
props.onChecked && props.onChecked(props.value);
|
|
1240
|
+
} }, { 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
1241
|
};
|
|
1300
|
-
var templateObject_1$E, templateObject_2$g
|
|
1242
|
+
var templateObject_1$E, templateObject_2$g;
|
|
1301
1243
|
|
|
1302
1244
|
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1303
1245
|
/**
|
|
@@ -1515,11 +1457,6 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1515
1457
|
})));
|
|
1516
1458
|
};
|
|
1517
1459
|
|
|
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
1460
|
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1524
1461
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1525
1462
|
return isCompact &&
|
|
@@ -1993,7 +1930,7 @@ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment,
|
|
|
1993
1930
|
? true
|
|
1994
1931
|
: isSubmitting
|
|
1995
1932
|
? true
|
|
1996
|
-
: false, isPrimary: true, isPill: true, themeColor: theme.
|
|
1933
|
+
: 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
1934
|
} }))] })), 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
1935
|
|
|
1999
1936
|
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
@@ -2556,9 +2493,6 @@ exports.ButtonGroup = ButtonGroup;
|
|
|
2556
2493
|
exports.CampaignCard = CampaignCard;
|
|
2557
2494
|
exports.Caption = Caption;
|
|
2558
2495
|
exports.Card = Card;
|
|
2559
|
-
exports.CardBody = CardBody$3;
|
|
2560
|
-
exports.CardFooter = CardFooter$3;
|
|
2561
|
-
exports.CardHeader = CardHeader$2;
|
|
2562
2496
|
exports.Checkbox = Checkbox;
|
|
2563
2497
|
exports.CheckboxCard = CheckboxCard;
|
|
2564
2498
|
exports.Chrome = Chrome;
|
|
@@ -2569,7 +2503,6 @@ exports.ContainerCard = ContainerCard;
|
|
|
2569
2503
|
exports.Content = Content;
|
|
2570
2504
|
exports.Counter = Counter;
|
|
2571
2505
|
exports.CursorPagination = CursorPagination;
|
|
2572
|
-
exports.Divider = Divider$3;
|
|
2573
2506
|
exports.Drawer = Drawer;
|
|
2574
2507
|
exports.Dropdown = Dropdown;
|
|
2575
2508
|
exports.DropdownField = index$1;
|
|
@@ -2653,7 +2586,6 @@ exports.ToastProvider = ToastProvider;
|
|
|
2653
2586
|
exports.Toggle = Toggle;
|
|
2654
2587
|
exports.Trigger = Trigger;
|
|
2655
2588
|
exports.UnorderedList = UnorderedList;
|
|
2656
|
-
exports.Wrapper = Wrapper$1;
|
|
2657
2589
|
exports.XL = XL;
|
|
2658
2590
|
exports.XXL = XXL;
|
|
2659
2591
|
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 };
|