@appquality/unguess-design-system 2.10.42 → 2.10.45
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 -269
- 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.45 (Tue Jun 07 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(card-footer): update space between divider [#67](https://github.com/AppQuality/unguess-design-system/pull/67) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.44 (Mon Jun 06 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Cup 720 refactor card component [#66](https://github.com/AppQuality/unguess-design-system/pull/66) ([@cannarocks](https://github.com/cannarocks))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v2.10.43 (Wed Jun 01 2022)
|
|
26
|
+
|
|
27
|
+
#### 🐛 Bug Fix
|
|
28
|
+
|
|
29
|
+
- fix(avatar): set text uppercase + cleanings [#65](https://github.com/AppQuality/unguess-design-system/pull/65) ([@marcbon](https://github.com/marcbon))
|
|
30
|
+
|
|
31
|
+
#### Authors: 1
|
|
32
|
+
|
|
33
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
1
37
|
# v2.10.42 (Mon May 30 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,10 +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
|
-
|
|
286
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
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) {
|
|
287
286
|
return props.avatarType &&
|
|
288
287
|
props.avatarType !== "image" &&
|
|
289
288
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -304,11 +303,10 @@ var Avatar = function (props) {
|
|
|
304
303
|
if (type === "text")
|
|
305
304
|
return jsxRuntime.jsx(Avatar.Text, { children: props.children });
|
|
306
305
|
};
|
|
307
|
-
// const { width } = useWindowSize();
|
|
308
306
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
309
307
|
};
|
|
310
308
|
Avatar.Text = UgAvatar.Text;
|
|
311
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$12;
|
|
312
310
|
|
|
313
311
|
/**
|
|
314
312
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -339,7 +337,7 @@ var getThemeStyle = function (props) {
|
|
|
339
337
|
}
|
|
340
338
|
return theme;
|
|
341
339
|
};
|
|
342
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
340
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""])));
|
|
343
341
|
/**
|
|
344
342
|
* Buttons let users take action quickly.
|
|
345
343
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -357,7 +355,7 @@ var Button = function (props) {
|
|
|
357
355
|
};
|
|
358
356
|
Button.StartIcon = UgButton.StartIcon;
|
|
359
357
|
Button.EndIcon = UgButton.EndIcon;
|
|
360
|
-
var templateObject_1$
|
|
358
|
+
var templateObject_1$11;
|
|
361
359
|
|
|
362
360
|
/**
|
|
363
361
|
A Button group lets users make a selection from a set of options.
|
|
@@ -387,7 +385,7 @@ Used for this:
|
|
|
387
385
|
**/
|
|
388
386
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
389
387
|
|
|
390
|
-
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) {
|
|
391
389
|
var theme = _a.theme;
|
|
392
390
|
return theme.borderRadii.lg;
|
|
393
391
|
}, function (_a) {
|
|
@@ -407,7 +405,7 @@ var UgContentCard = styled__default["default"](reactNotifications.Well)(template
|
|
|
407
405
|
* Used for this:
|
|
408
406
|
- To group related content
|
|
409
407
|
*/
|
|
410
|
-
var Card = function (props) { return jsxRuntime.jsx(UgContentCard, __assign({}, props)); };
|
|
408
|
+
var Card = function (props) { return jsxRuntime.jsx(UgContentCard$1, __assign({}, props)); };
|
|
411
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) {
|
|
412
410
|
var theme = _a.theme;
|
|
413
411
|
return theme.borderRadii.xl;
|
|
@@ -419,7 +417,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
419
417
|
return theme.palette.grey["200"];
|
|
420
418
|
});
|
|
421
419
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
422
|
-
var templateObject_1$
|
|
420
|
+
var templateObject_1$10, templateObject_2$p;
|
|
423
421
|
|
|
424
422
|
/**
|
|
425
423
|
* Tags let users categorize content using a keyword.
|
|
@@ -436,14 +434,6 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
436
434
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
437
435
|
Tag.Close = reactTags.Tag.Close;
|
|
438
436
|
|
|
439
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject([""], [""])));
|
|
440
|
-
/**
|
|
441
|
-
* A Label is used to specify a title for an input.
|
|
442
|
-
* <hr>
|
|
443
|
-
**/
|
|
444
|
-
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
445
|
-
var templateObject_1$W;
|
|
446
|
-
|
|
447
437
|
var _g$2, _path$n;
|
|
448
438
|
|
|
449
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); }
|
|
@@ -642,7 +632,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
642
632
|
})));
|
|
643
633
|
};
|
|
644
634
|
|
|
645
|
-
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) {
|
|
646
636
|
return props.isLight ?
|
|
647
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 ");
|
|
648
638
|
});
|
|
@@ -660,32 +650,118 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
660
650
|
- To communicate a typing status, use Inline instead
|
|
661
651
|
*/
|
|
662
652
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
663
|
-
var templateObject_1
|
|
653
|
+
var templateObject_1$$;
|
|
664
654
|
|
|
665
|
-
var
|
|
666
|
-
|
|
667
|
-
|
|
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$_;
|
|
668
660
|
|
|
669
|
-
var
|
|
670
|
-
var
|
|
671
|
-
|
|
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) {
|
|
672
681
|
var theme = _a.theme;
|
|
673
|
-
return
|
|
682
|
+
return theme.palette.grey[500];
|
|
674
683
|
});
|
|
675
|
-
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) {
|
|
676
730
|
var theme = _a.theme;
|
|
677
731
|
return theme.borderRadii.lg;
|
|
678
732
|
}, function (_a) {
|
|
679
733
|
var theme = _a.theme;
|
|
680
|
-
return theme.
|
|
734
|
+
return "".concat(theme.space.base * 4, "px ").concat(theme.space.sm);
|
|
681
735
|
}, function (_a) {
|
|
682
736
|
var theme = _a.theme;
|
|
683
737
|
return theme.palette.grey["200"];
|
|
684
738
|
}, function (_a) {
|
|
685
|
-
var theme = _a.theme;
|
|
686
|
-
return
|
|
739
|
+
var isFloating = _a.isFloating, theme = _a.theme;
|
|
740
|
+
return !isFloating &&
|
|
741
|
+
"\n &:hover {\n box-shadow: ".concat(theme.shadows.boxShadow(theme), ";\n }");
|
|
687
742
|
});
|
|
688
|
-
|
|
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)); };
|
|
689
765
|
|
|
690
766
|
var getStatusIcon = function (status) {
|
|
691
767
|
switch (status) {
|
|
@@ -709,12 +785,11 @@ var getTypeDataIcon = function (type) {
|
|
|
709
785
|
return SvgCampaignFunctional;
|
|
710
786
|
}
|
|
711
787
|
};
|
|
712
|
-
var
|
|
713
|
-
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) {
|
|
714
789
|
var theme = _a.theme;
|
|
715
790
|
return theme.palette.grey["700"];
|
|
716
791
|
});
|
|
717
|
-
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) {
|
|
718
793
|
var theme = _a.theme;
|
|
719
794
|
return theme.space.base * 6;
|
|
720
795
|
}, function (_a) {
|
|
@@ -727,66 +802,19 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$g || (temp
|
|
|
727
802
|
var theme = _a.theme;
|
|
728
803
|
return theme.palette.white;
|
|
729
804
|
});
|
|
730
|
-
var StyledLabel$
|
|
731
|
-
var theme = _a.theme;
|
|
732
|
-
return theme.fontSizes.sm;
|
|
733
|
-
}, 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) {
|
|
734
806
|
var theme = _a.theme;
|
|
735
807
|
return theme.palette.grey["500"];
|
|
736
808
|
});
|
|
737
|
-
var
|
|
738
|
-
var
|
|
739
|
-
return theme.palette.blue["600"];
|
|
740
|
-
}, function (_a) {
|
|
741
|
-
var theme = _a.theme;
|
|
742
|
-
return theme.fontSizes.lg;
|
|
743
|
-
});
|
|
744
|
-
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) {
|
|
745
|
-
var theme = _a.theme;
|
|
746
|
-
return theme.space.lg;
|
|
747
|
-
}, function (_a) {
|
|
748
|
-
var theme = _a.theme;
|
|
749
|
-
return theme.palette.grey["300"];
|
|
750
|
-
});
|
|
751
|
-
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) {
|
|
752
|
-
var theme = _a.theme;
|
|
753
|
-
return theme.space.base * 6;
|
|
754
|
-
});
|
|
755
|
-
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) {
|
|
756
|
-
var theme = _a.theme;
|
|
757
|
-
return theme.space.xxl;
|
|
758
|
-
});
|
|
759
|
-
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"])));
|
|
760
|
-
var CampaignCard = function (props) {
|
|
761
|
-
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"]);
|
|
762
811
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
763
812
|
var PillIcon = getTypeDataIcon(type);
|
|
764
|
-
|
|
765
|
-
if (projectTitle.length > 42) {
|
|
766
|
-
projectTitleCut = "".concat(projectTitle.substring(0, 39), "...");
|
|
767
|
-
}
|
|
768
|
-
var campaignTitleCut = campaignTitle;
|
|
769
|
-
if (campaignTitle.length > 29) {
|
|
770
|
-
campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
|
|
771
|
-
}
|
|
772
|
-
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, {})] })] })));
|
|
773
814
|
};
|
|
774
|
-
var templateObject_1$
|
|
815
|
+
var templateObject_1$V, templateObject_2$m, templateObject_3$e;
|
|
775
816
|
|
|
776
|
-
var
|
|
777
|
-
var theme = _a.theme;
|
|
778
|
-
return theme.borderRadii.lg;
|
|
779
|
-
}, function (_a) {
|
|
780
|
-
var theme = _a.theme;
|
|
781
|
-
return theme.components.notification.card.padding;
|
|
782
|
-
}, function (_a) {
|
|
783
|
-
var theme = _a.theme;
|
|
784
|
-
return theme.palette.grey["200"];
|
|
785
|
-
}, function (_a) {
|
|
786
|
-
var theme = _a.theme;
|
|
787
|
-
return theme.shadows.boxShadow(theme);
|
|
788
|
-
});
|
|
789
|
-
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) {
|
|
790
818
|
var theme = _a.theme;
|
|
791
819
|
return theme.space.base * 6;
|
|
792
820
|
}, function (_a) {
|
|
@@ -799,61 +827,20 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$m || (templa
|
|
|
799
827
|
var theme = _a.theme;
|
|
800
828
|
return theme.palette.white;
|
|
801
829
|
});
|
|
802
|
-
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) {
|
|
803
|
-
var theme = _a.theme;
|
|
804
|
-
return theme.fontSizes.sm;
|
|
805
|
-
}, function (_a) {
|
|
806
|
-
var theme = _a.theme;
|
|
807
|
-
return theme.palette.grey["500"];
|
|
808
|
-
});
|
|
809
|
-
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) {
|
|
810
|
-
var theme = _a.theme;
|
|
811
|
-
return theme.palette.blue["600"];
|
|
812
|
-
}, function (_a) {
|
|
813
|
-
var theme = _a.theme;
|
|
814
|
-
return theme.fontSizes.lg;
|
|
815
|
-
});
|
|
816
|
-
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) {
|
|
817
|
-
var theme = _a.theme;
|
|
818
|
-
return theme.space.sm;
|
|
819
|
-
}, function (_a) {
|
|
820
|
-
var theme = _a.theme;
|
|
821
|
-
return theme.palette.grey["300"];
|
|
822
|
-
});
|
|
823
|
-
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) {
|
|
824
|
-
var theme = _a.theme;
|
|
825
|
-
return theme.components.notification.card.padding;
|
|
826
|
-
});
|
|
827
|
-
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"])));
|
|
828
|
-
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"])));
|
|
829
830
|
var ProductCard = function (props) {
|
|
830
831
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
831
|
-
|
|
832
|
-
if (productTitle.length > 42) {
|
|
833
|
-
productTitleCut = "".concat(productTitle.substring(0, 39), "...");
|
|
834
|
-
}
|
|
835
|
-
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 })) }))] })));
|
|
836
833
|
};
|
|
837
|
-
var templateObject_1$
|
|
834
|
+
var templateObject_1$U;
|
|
838
835
|
|
|
839
|
-
|
|
840
|
-
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
841
|
-
*/
|
|
842
|
-
var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
|
|
843
|
-
var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
|
|
844
|
-
var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
|
|
845
|
-
var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
|
|
846
|
-
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
847
|
-
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
848
|
-
|
|
849
|
-
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) {
|
|
850
837
|
var theme = _a.theme;
|
|
851
838
|
return theme.palette.grey[500];
|
|
852
839
|
}, function (_a) {
|
|
853
840
|
var theme = _a.theme;
|
|
854
841
|
return theme.space.base;
|
|
855
842
|
});
|
|
856
|
-
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) {
|
|
857
844
|
var theme = _a.theme;
|
|
858
845
|
return theme.palette.blue[600];
|
|
859
846
|
}, function (_a) {
|
|
@@ -863,115 +850,50 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templat
|
|
|
863
850
|
var theme = _a.theme;
|
|
864
851
|
return theme.fontWeights.semibold;
|
|
865
852
|
});
|
|
866
|
-
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) {
|
|
867
854
|
var theme = _a.theme;
|
|
868
855
|
return theme.space.xs;
|
|
869
856
|
}, function (_a) {
|
|
870
857
|
var theme = _a.theme;
|
|
871
858
|
return theme.space.xs;
|
|
872
859
|
});
|
|
873
|
-
var
|
|
874
|
-
var
|
|
875
|
-
var theme = _a.theme;
|
|
876
|
-
return theme.space.base * 16;
|
|
877
|
-
}, function (_a) {
|
|
878
|
-
var theme = _a.theme;
|
|
879
|
-
return theme.space.base * 16;
|
|
880
|
-
});
|
|
881
|
-
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) {
|
|
882
|
-
var theme = _a.theme;
|
|
883
|
-
return theme.space.sm;
|
|
884
|
-
});
|
|
885
|
-
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) {
|
|
886
|
-
var theme = _a.theme;
|
|
887
|
-
return theme.space.sm;
|
|
888
|
-
});
|
|
889
|
-
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) {
|
|
890
862
|
var theme = _a.theme;
|
|
891
863
|
return theme.space.base;
|
|
892
864
|
}, function (_a) {
|
|
893
865
|
var theme = _a.theme;
|
|
894
|
-
return theme.
|
|
895
|
-
});
|
|
896
|
-
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"])));
|
|
897
|
-
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) {
|
|
898
|
-
var theme = _a.theme;
|
|
899
|
-
return theme.space.sm;
|
|
900
|
-
});
|
|
901
|
-
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) {
|
|
902
|
-
var theme = _a.theme;
|
|
903
|
-
return theme.space.base;
|
|
866
|
+
return theme.space.xxs;
|
|
904
867
|
}, function (_a) {
|
|
905
868
|
var theme = _a.theme;
|
|
906
|
-
return theme.space.
|
|
869
|
+
return theme.space.base * 4;
|
|
907
870
|
});
|
|
908
|
-
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) {
|
|
909
872
|
var theme = _a.theme;
|
|
910
873
|
return theme.components.notification.card.padding;
|
|
911
874
|
}, function (_a) {
|
|
912
875
|
var theme = _a.theme;
|
|
913
876
|
return theme.palette.white;
|
|
914
877
|
});
|
|
915
|
-
var HoverMetaContainer = styled__default["default"].div(
|
|
916
|
-
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) {
|
|
917
880
|
var isHoverable = _a.isHoverable;
|
|
918
|
-
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 ");
|
|
919
883
|
});
|
|
920
884
|
var ServiceCard = function (props) {
|
|
921
|
-
|
|
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)); }) })))] })] })));
|
|
922
887
|
};
|
|
923
|
-
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;
|
|
924
889
|
|
|
925
|
-
var
|
|
926
|
-
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"])));
|
|
927
|
-
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) {
|
|
928
|
-
var theme = _a.theme;
|
|
929
|
-
return theme.space.sm;
|
|
930
|
-
});
|
|
931
|
-
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) {
|
|
932
|
-
var theme = _a.theme;
|
|
933
|
-
return theme.space.sm;
|
|
934
|
-
});
|
|
935
|
-
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"])));
|
|
936
|
-
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"])));
|
|
937
|
-
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) {
|
|
938
|
-
var theme = _a.theme;
|
|
939
|
-
return theme.space.sm;
|
|
940
|
-
});
|
|
941
|
-
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) {
|
|
942
|
-
var theme = _a.theme;
|
|
943
|
-
return theme.space.sm;
|
|
944
|
-
});
|
|
945
|
-
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) {
|
|
946
|
-
var theme = _a.theme;
|
|
947
|
-
return theme.space.base;
|
|
948
|
-
}, function (_a) {
|
|
949
|
-
var theme = _a.theme;
|
|
950
|
-
return theme.palette.grey["300"];
|
|
951
|
-
});
|
|
952
|
-
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) {
|
|
953
|
-
var theme = _a.theme;
|
|
954
|
-
return theme.palette.grey[500];
|
|
955
|
-
}, function (_a) {
|
|
956
|
-
var theme = _a.theme;
|
|
957
|
-
return theme.space.base;
|
|
958
|
-
});
|
|
959
|
-
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) {
|
|
960
|
-
var theme = _a.theme;
|
|
961
|
-
return theme.palette.blue[600];
|
|
962
|
-
}, function (_a) {
|
|
963
|
-
var theme = _a.theme;
|
|
964
|
-
return theme.space.base;
|
|
965
|
-
}, function (_a) {
|
|
966
|
-
var theme = _a.theme;
|
|
967
|
-
return theme.fontWeights.semibold;
|
|
968
|
-
});
|
|
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"])));
|
|
969
891
|
var InfoCard = function (props) {
|
|
970
|
-
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; }) }) })))] })));
|
|
971
893
|
};
|
|
972
|
-
var templateObject_1$
|
|
894
|
+
var templateObject_1$S;
|
|
973
895
|
|
|
974
|
-
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) {
|
|
975
897
|
var theme = _a.theme;
|
|
976
898
|
return theme.space.xl;
|
|
977
899
|
}, function (_a) {
|
|
@@ -982,7 +904,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
982
904
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
983
905
|
*/
|
|
984
906
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
985
|
-
var templateObject_1$
|
|
907
|
+
var templateObject_1$R;
|
|
986
908
|
|
|
987
909
|
/**
|
|
988
910
|
* Use Span to style and format inline text elements.
|
|
@@ -1022,8 +944,8 @@ function useWindowSize() {
|
|
|
1022
944
|
return size;
|
|
1023
945
|
}
|
|
1024
946
|
|
|
1025
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1026
|
-
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) {
|
|
1027
949
|
var status = _a.status, theme = _a.theme;
|
|
1028
950
|
switch (status) {
|
|
1029
951
|
case "completed":
|
|
@@ -1057,7 +979,7 @@ var Counter = function (props) {
|
|
|
1057
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() })] })));
|
|
1058
980
|
};
|
|
1059
981
|
Counter.Avatar = StyledTag.Avatar;
|
|
1060
|
-
var templateObject_1$
|
|
982
|
+
var templateObject_1$Q, templateObject_2$k;
|
|
1061
983
|
|
|
1062
984
|
/**
|
|
1063
985
|
* A Drawer is a container for supplementary content that is anchored to the edge of a page.
|
|
@@ -1073,20 +995,20 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
|
1073
995
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1074
996
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1075
997
|
|
|
1076
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1077
|
-
var templateObject_1$
|
|
998
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
999
|
+
var templateObject_1$P;
|
|
1078
1000
|
|
|
1079
1001
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1080
1002
|
__proto__: null,
|
|
1081
1003
|
Field: Field$1
|
|
1082
1004
|
});
|
|
1083
1005
|
|
|
1084
|
-
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) {
|
|
1085
1007
|
var theme = _a.theme;
|
|
1086
1008
|
return theme.palette.blue[100];
|
|
1087
1009
|
});
|
|
1088
1010
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1089
|
-
var templateObject_1$
|
|
1011
|
+
var templateObject_1$O;
|
|
1090
1012
|
|
|
1091
1013
|
/**
|
|
1092
1014
|
* A Menu is a wrapper for items elements
|
|
@@ -1110,7 +1032,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1110
1032
|
*/
|
|
1111
1033
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1112
1034
|
|
|
1113
|
-
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) {
|
|
1114
1036
|
return props.isPrimary &&
|
|
1115
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 ");
|
|
1116
1038
|
});
|
|
@@ -1127,7 +1049,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1127
1049
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1128
1050
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1129
1051
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1130
|
-
var templateObject_1$
|
|
1052
|
+
var templateObject_1$N;
|
|
1131
1053
|
|
|
1132
1054
|
/**
|
|
1133
1055
|
* Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
|
|
@@ -1142,7 +1064,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1142
1064
|
|
|
1143
1065
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1144
1066
|
|
|
1145
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1067
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1146
1068
|
/**
|
|
1147
1069
|
* A Checkbox lets users select and unselect options from a list.
|
|
1148
1070
|
* <hr>
|
|
@@ -1154,36 +1076,66 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1154
1076
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1155
1077
|
**/
|
|
1156
1078
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1157
|
-
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;
|
|
1158
1109
|
|
|
1159
|
-
|
|
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) {
|
|
1160
1111
|
var theme = _a.theme;
|
|
1161
1112
|
return theme.palette.blue[300];
|
|
1162
1113
|
});
|
|
1163
|
-
|
|
1114
|
+
styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1164
1115
|
var theme = _a.theme;
|
|
1165
1116
|
return theme.space.base;
|
|
1166
1117
|
});
|
|
1167
|
-
|
|
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) {
|
|
1168
1119
|
var theme = _a.theme;
|
|
1169
1120
|
return theme.space.base;
|
|
1170
1121
|
}, function (_a) {
|
|
1171
1122
|
var theme = _a.theme;
|
|
1172
1123
|
return theme.palette.grey[700];
|
|
1173
1124
|
});
|
|
1174
|
-
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) {
|
|
1175
1126
|
var theme = _a.theme;
|
|
1176
1127
|
return theme.space.base;
|
|
1177
1128
|
});
|
|
1178
1129
|
var CheckboxCard = function (props) {
|
|
1130
|
+
var cardArgs = props.card;
|
|
1179
1131
|
var _a = React.useState(props.defaultChecked || false), checked = _a[0], setChecked = _a[1];
|
|
1180
1132
|
var handleToggle = function () {
|
|
1181
1133
|
setChecked(!checked);
|
|
1182
1134
|
props.onToggle && props.onToggle(!checked);
|
|
1183
1135
|
};
|
|
1184
|
-
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 })) })) }))] })));
|
|
1185
1137
|
};
|
|
1186
|
-
var templateObject_1$J, templateObject_2$i, templateObject_3$
|
|
1138
|
+
var templateObject_1$J, templateObject_2$i, templateObject_3$b, templateObject_4$7;
|
|
1187
1139
|
|
|
1188
1140
|
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1189
1141
|
/**
|
|
@@ -1253,15 +1205,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1253
1205
|
})));
|
|
1254
1206
|
};
|
|
1255
1207
|
|
|
1256
|
-
var
|
|
1257
|
-
var theme = _a.theme;
|
|
1258
|
-
return theme.palette.blue[300];
|
|
1259
|
-
});
|
|
1260
|
-
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) {
|
|
1261
|
-
var theme = _a.theme;
|
|
1262
|
-
return theme.space.base;
|
|
1263
|
-
});
|
|
1264
|
-
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) {
|
|
1265
1209
|
var theme = _a.theme;
|
|
1266
1210
|
return theme.space.base;
|
|
1267
1211
|
}, function (_a) {
|
|
@@ -1271,7 +1215,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
|
|
|
1271
1215
|
var theme = _a.theme;
|
|
1272
1216
|
return theme.fontWeights.medium;
|
|
1273
1217
|
});
|
|
1274
|
-
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) {
|
|
1275
1219
|
var theme = _a.theme;
|
|
1276
1220
|
return theme.space.base * 6;
|
|
1277
1221
|
}, function (_a) {
|
|
@@ -1285,21 +1229,17 @@ var Circle = styled__default["default"].div(templateObject_4$7 || (templateObjec
|
|
|
1285
1229
|
return theme.colors.primaryHue;
|
|
1286
1230
|
}, function (_a) {
|
|
1287
1231
|
var checked = _a.checked;
|
|
1288
|
-
return !checked &&
|
|
1289
|
-
|
|
1290
|
-
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) {
|
|
1291
|
-
var theme = _a.theme;
|
|
1292
|
-
return theme.palette.blue[100];
|
|
1293
|
-
}, function (_a) {
|
|
1294
|
-
var theme = _a.theme;
|
|
1295
|
-
return theme.space.base * 4;
|
|
1232
|
+
return !checked &&
|
|
1233
|
+
"\n opacity: 0;\n visibility: hidden;\n ";
|
|
1296
1234
|
});
|
|
1297
1235
|
var RadioCard = function (_a) {
|
|
1298
1236
|
var _b;
|
|
1299
1237
|
var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
|
|
1300
|
-
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 })) }))] })));
|
|
1301
1241
|
};
|
|
1302
|
-
var templateObject_1$E, templateObject_2$g
|
|
1242
|
+
var templateObject_1$E, templateObject_2$g;
|
|
1303
1243
|
|
|
1304
1244
|
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1305
1245
|
/**
|
|
@@ -1517,11 +1457,6 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1517
1457
|
})));
|
|
1518
1458
|
};
|
|
1519
1459
|
|
|
1520
|
-
/**
|
|
1521
|
-
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
1522
|
-
*/
|
|
1523
|
-
var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
|
|
1524
|
-
|
|
1525
1460
|
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1526
1461
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1527
1462
|
return isCompact &&
|
|
@@ -1995,7 +1930,7 @@ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment,
|
|
|
1995
1930
|
? true
|
|
1996
1931
|
: isSubmitting
|
|
1997
1932
|
? true
|
|
1998
|
-
: 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 })) })))] })));
|
|
1999
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"] })))] })); };
|
|
2000
1935
|
|
|
2001
1936
|
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
@@ -2558,9 +2493,6 @@ exports.ButtonGroup = ButtonGroup;
|
|
|
2558
2493
|
exports.CampaignCard = CampaignCard;
|
|
2559
2494
|
exports.Caption = Caption;
|
|
2560
2495
|
exports.Card = Card;
|
|
2561
|
-
exports.CardBody = CardBody$3;
|
|
2562
|
-
exports.CardFooter = CardFooter$3;
|
|
2563
|
-
exports.CardHeader = CardHeader$2;
|
|
2564
2496
|
exports.Checkbox = Checkbox;
|
|
2565
2497
|
exports.CheckboxCard = CheckboxCard;
|
|
2566
2498
|
exports.Chrome = Chrome;
|
|
@@ -2571,7 +2503,6 @@ exports.ContainerCard = ContainerCard;
|
|
|
2571
2503
|
exports.Content = Content;
|
|
2572
2504
|
exports.Counter = Counter;
|
|
2573
2505
|
exports.CursorPagination = CursorPagination;
|
|
2574
|
-
exports.Divider = Divider$3;
|
|
2575
2506
|
exports.Drawer = Drawer;
|
|
2576
2507
|
exports.Dropdown = Dropdown;
|
|
2577
2508
|
exports.DropdownField = index$1;
|
|
@@ -2655,7 +2586,6 @@ exports.ToastProvider = ToastProvider;
|
|
|
2655
2586
|
exports.Toggle = Toggle;
|
|
2656
2587
|
exports.Trigger = Trigger;
|
|
2657
2588
|
exports.UnorderedList = UnorderedList;
|
|
2658
|
-
exports.Wrapper = Wrapper$1;
|
|
2659
2589
|
exports.XL = XL;
|
|
2660
2590
|
exports.XXL = XXL;
|
|
2661
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 };
|