@appquality/unguess-design-system 2.10.41 → 2.10.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/build/index.js +200 -273
- 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.44 (Mon Jun 06 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Cup 720 refactor card component [#66](https://github.com/AppQuality/unguess-design-system/pull/66) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.43 (Wed Jun 01 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- fix(avatar): set text uppercase + cleanings [#65](https://github.com/AppQuality/unguess-design-system/pull/65) ([@marcbon](https://github.com/marcbon))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v2.10.42 (Mon May 30 2022)
|
|
26
|
+
|
|
27
|
+
#### 🐛 Bug Fix
|
|
28
|
+
|
|
29
|
+
- fix(buttons): fix close positioning + fix login button isPill + fix buttons themeColor [#64](https://github.com/AppQuality/unguess-design-system/pull/64) ([@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.41 (Fri May 27 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.
|
|
@@ -335,9 +333,11 @@ var getThemeStyle = function (props) {
|
|
|
335
333
|
var themeColor = props.themeColor;
|
|
336
334
|
if (themeColor) {
|
|
337
335
|
customTheme = __assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primaryHue: themeColor }) });
|
|
336
|
+
return customTheme;
|
|
338
337
|
}
|
|
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.
|
|
@@ -348,16 +348,14 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
|
348
348
|
*/
|
|
349
349
|
var Button = function (props) {
|
|
350
350
|
if (props.themeColor) {
|
|
351
|
-
getThemeStyle(props);
|
|
352
|
-
UgButton
|
|
353
|
-
theme: customTheme
|
|
354
|
-
};
|
|
351
|
+
var currentTheme = getThemeStyle(props);
|
|
352
|
+
return jsxRuntime.jsx(UgButton, __assign({}, props, { theme: currentTheme }));
|
|
355
353
|
}
|
|
356
354
|
return jsxRuntime.jsx(UgButton, __assign({}, 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,115 @@ 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];
|
|
683
|
+
});
|
|
684
|
+
var Title$1 = styled__default["default"](LG)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
685
|
+
var theme = _a.theme;
|
|
686
|
+
return theme.colors.primaryHue;
|
|
687
|
+
}, function (_a) {
|
|
688
|
+
var theme = _a.theme;
|
|
689
|
+
return theme.fontWeights.semibold;
|
|
690
|
+
}, function (_a) {
|
|
691
|
+
var theme = _a.theme;
|
|
692
|
+
return theme.space.xxs;
|
|
693
|
+
});
|
|
694
|
+
var Description$1 = styled__default["default"](MD)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
695
|
+
var theme = _a.theme;
|
|
696
|
+
return theme.palette.grey[700];
|
|
697
|
+
}, function (_a) {
|
|
698
|
+
var theme = _a.theme;
|
|
699
|
+
return theme.space.xxs;
|
|
700
|
+
});
|
|
701
|
+
var Container$1 = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
702
|
+
var theme = _a.theme, align = _a.align;
|
|
703
|
+
return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
674
704
|
});
|
|
675
|
-
var
|
|
705
|
+
var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign({}, props)); };
|
|
706
|
+
CardHeader.Label = Label$1;
|
|
707
|
+
CardHeader.Title = Title$1;
|
|
708
|
+
CardHeader.Text = Description$1;
|
|
709
|
+
var templateObject_1$Y, templateObject_2$o, templateObject_3$g, templateObject_4$a;
|
|
710
|
+
|
|
711
|
+
var Divider = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
712
|
+
var theme = _a.theme;
|
|
713
|
+
return theme.space.xs;
|
|
714
|
+
}, function (_a) {
|
|
715
|
+
var theme = _a.theme;
|
|
716
|
+
return theme.palette.grey["300"];
|
|
717
|
+
});
|
|
718
|
+
var Footer$1 = styled__default["default"].div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n"])));
|
|
719
|
+
var Container = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
720
|
+
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
721
|
+
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
722
|
+
});
|
|
723
|
+
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
724
|
+
var templateObject_1$X, templateObject_2$n, templateObject_3$f;
|
|
725
|
+
|
|
726
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
676
727
|
var theme = _a.theme;
|
|
677
728
|
return theme.borderRadii.lg;
|
|
678
729
|
}, function (_a) {
|
|
679
730
|
var theme = _a.theme;
|
|
680
|
-
return theme.
|
|
731
|
+
return "".concat(theme.space.base * 4, "px ").concat(theme.space.sm);
|
|
681
732
|
}, function (_a) {
|
|
682
733
|
var theme = _a.theme;
|
|
683
734
|
return theme.palette.grey["200"];
|
|
684
735
|
}, function (_a) {
|
|
685
|
-
var theme = _a.theme;
|
|
686
|
-
return
|
|
736
|
+
var isFloating = _a.isFloating, theme = _a.theme;
|
|
737
|
+
return !isFloating &&
|
|
738
|
+
"\n &:hover {\n box-shadow: ".concat(theme.shadows.boxShadow(theme), ";\n }");
|
|
687
739
|
});
|
|
688
|
-
|
|
740
|
+
/**
|
|
741
|
+
* A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
|
|
742
|
+
* <hr>
|
|
743
|
+
* Used for this:
|
|
744
|
+
- Display products and services
|
|
745
|
+
- As container of input (checkboxCard, radioCard)
|
|
746
|
+
*/
|
|
747
|
+
var SpecialCard = function (props) { return jsxRuntime.jsx(UgContentCard, __assign({}, props)); };
|
|
748
|
+
SpecialCard.Meta = CardMeta;
|
|
749
|
+
SpecialCard.Thumb = CardThumbnail;
|
|
750
|
+
SpecialCard.Header = CardHeader;
|
|
751
|
+
SpecialCard.Footer = CardFooter;
|
|
752
|
+
var templateObject_1$W;
|
|
753
|
+
|
|
754
|
+
var CampaignCardSkeleton = function () {
|
|
755
|
+
return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
756
|
+
};
|
|
757
|
+
|
|
758
|
+
/**
|
|
759
|
+
* Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
|
|
760
|
+
*/
|
|
761
|
+
var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
|
|
689
762
|
|
|
690
763
|
var getStatusIcon = function (status) {
|
|
691
764
|
switch (status) {
|
|
@@ -709,12 +782,11 @@ var getTypeDataIcon = function (type) {
|
|
|
709
782
|
return SvgCampaignFunctional;
|
|
710
783
|
}
|
|
711
784
|
};
|
|
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) {
|
|
785
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
714
786
|
var theme = _a.theme;
|
|
715
787
|
return theme.palette.grey["700"];
|
|
716
788
|
});
|
|
717
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(
|
|
789
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
|
|
718
790
|
var theme = _a.theme;
|
|
719
791
|
return theme.space.base * 6;
|
|
720
792
|
}, function (_a) {
|
|
@@ -727,66 +799,19 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$g || (temp
|
|
|
727
799
|
var theme = _a.theme;
|
|
728
800
|
return theme.palette.white;
|
|
729
801
|
});
|
|
730
|
-
var StyledLabel$
|
|
731
|
-
var theme = _a.theme;
|
|
732
|
-
return theme.fontSizes.sm;
|
|
733
|
-
}, function (_a) {
|
|
802
|
+
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
734
803
|
var theme = _a.theme;
|
|
735
804
|
return theme.palette.grey["500"];
|
|
736
805
|
});
|
|
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;
|
|
806
|
+
var CampaignCard = function (_a) {
|
|
807
|
+
var isNew = _a.isNew, date = _a.date, projectTitle = _a.projectTitle, campaignTitle = _a.campaignTitle, status = _a.status, type = _a.type, labelNew = _a.labelNew, props = __rest(_a, ["isNew", "date", "projectTitle", "campaignTitle", "status", "type", "labelNew"]);
|
|
762
808
|
var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
|
|
763
809
|
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, {})] })] })));
|
|
810
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
773
811
|
};
|
|
774
|
-
var templateObject_1$
|
|
812
|
+
var templateObject_1$V, templateObject_2$m, templateObject_3$e;
|
|
775
813
|
|
|
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) {
|
|
814
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
|
|
790
815
|
var theme = _a.theme;
|
|
791
816
|
return theme.space.base * 6;
|
|
792
817
|
}, function (_a) {
|
|
@@ -799,61 +824,20 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$m || (templa
|
|
|
799
824
|
var theme = _a.theme;
|
|
800
825
|
return theme.palette.white;
|
|
801
826
|
});
|
|
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
827
|
var ProductCard = function (props) {
|
|
830
828
|
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 })) })] })));
|
|
829
|
+
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
|
|
836
830
|
};
|
|
837
|
-
var templateObject_1$
|
|
838
|
-
|
|
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)); };
|
|
831
|
+
var templateObject_1$U;
|
|
848
832
|
|
|
849
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
833
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
850
834
|
var theme = _a.theme;
|
|
851
835
|
return theme.palette.grey[500];
|
|
852
836
|
}, function (_a) {
|
|
853
837
|
var theme = _a.theme;
|
|
854
838
|
return theme.space.base;
|
|
855
839
|
});
|
|
856
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n
|
|
840
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
857
841
|
var theme = _a.theme;
|
|
858
842
|
return theme.palette.blue[600];
|
|
859
843
|
}, function (_a) {
|
|
@@ -863,115 +847,50 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$l || (templat
|
|
|
863
847
|
var theme = _a.theme;
|
|
864
848
|
return theme.fontWeights.semibold;
|
|
865
849
|
});
|
|
866
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
850
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
867
851
|
var theme = _a.theme;
|
|
868
852
|
return theme.space.xs;
|
|
869
853
|
}, function (_a) {
|
|
870
854
|
var theme = _a.theme;
|
|
871
855
|
return theme.space.xs;
|
|
872
856
|
});
|
|
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) {
|
|
857
|
+
var CardContent = styled__default["default"].div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
858
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", ";\n }\n"])), function (_a) {
|
|
890
859
|
var theme = _a.theme;
|
|
891
860
|
return theme.space.base;
|
|
892
861
|
}, function (_a) {
|
|
893
862
|
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;
|
|
863
|
+
return theme.space.xxs;
|
|
904
864
|
}, function (_a) {
|
|
905
865
|
var theme = _a.theme;
|
|
906
|
-
return theme.space.
|
|
866
|
+
return theme.space.xs;
|
|
907
867
|
});
|
|
908
|
-
var HoverBody = styled__default["default"](
|
|
868
|
+
var HoverBody = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"])), function (_a) {
|
|
909
869
|
var theme = _a.theme;
|
|
910
870
|
return theme.components.notification.card.padding;
|
|
911
871
|
}, function (_a) {
|
|
912
872
|
var theme = _a.theme;
|
|
913
873
|
return theme.palette.white;
|
|
914
874
|
});
|
|
915
|
-
var HoverMetaContainer = styled__default["default"].div(
|
|
916
|
-
var StyledCard
|
|
875
|
+
var HoverMetaContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
876
|
+
var StyledCard = styled__default["default"](SpecialCard)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n ", "\n"], ["\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
917
877
|
var isHoverable = _a.isHoverable;
|
|
918
|
-
return isHoverable &&
|
|
878
|
+
return isHoverable &&
|
|
879
|
+
"\n &:hover {\n ".concat(HoverBody, " {\n top: 0;\n transition: all 0.3s ease-in-out;\n }\n\n ").concat(CardContent, " {\n opacity: 0;\n transition: all 0.3s ease-in-out;\n }\n }\n ");
|
|
919
880
|
});
|
|
920
881
|
var ServiceCard = function (props) {
|
|
921
|
-
|
|
882
|
+
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
883
|
+
return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) }))] })] })));
|
|
922
884
|
};
|
|
923
|
-
var templateObject_1$
|
|
885
|
+
var templateObject_1$T, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
924
886
|
|
|
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
|
-
});
|
|
887
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
969
888
|
var InfoCard = function (props) {
|
|
970
|
-
return (jsxRuntime.
|
|
889
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
|
|
971
890
|
};
|
|
972
|
-
var templateObject_1$
|
|
891
|
+
var templateObject_1$S;
|
|
973
892
|
|
|
974
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$
|
|
893
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
975
894
|
var theme = _a.theme;
|
|
976
895
|
return theme.space.xl;
|
|
977
896
|
}, function (_a) {
|
|
@@ -982,7 +901,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
982
901
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
983
902
|
*/
|
|
984
903
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
985
|
-
var templateObject_1$
|
|
904
|
+
var templateObject_1$R;
|
|
986
905
|
|
|
987
906
|
/**
|
|
988
907
|
* Use Span to style and format inline text elements.
|
|
@@ -1022,8 +941,8 @@ function useWindowSize() {
|
|
|
1022
941
|
return size;
|
|
1023
942
|
}
|
|
1024
943
|
|
|
1025
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1$
|
|
1026
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
944
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
945
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"])), function (_a) {
|
|
1027
946
|
var status = _a.status, theme = _a.theme;
|
|
1028
947
|
switch (status) {
|
|
1029
948
|
case "completed":
|
|
@@ -1057,7 +976,7 @@ var Counter = function (props) {
|
|
|
1057
976
|
return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
|
|
1058
977
|
};
|
|
1059
978
|
Counter.Avatar = StyledTag.Avatar;
|
|
1060
|
-
var templateObject_1$
|
|
979
|
+
var templateObject_1$Q, templateObject_2$k;
|
|
1061
980
|
|
|
1062
981
|
/**
|
|
1063
982
|
* A Drawer is a container for supplementary content that is anchored to the edge of a page.
|
|
@@ -1073,20 +992,20 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
|
1073
992
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1074
993
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1075
994
|
|
|
1076
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1077
|
-
var templateObject_1$
|
|
995
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
|
|
996
|
+
var templateObject_1$P;
|
|
1078
997
|
|
|
1079
998
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1080
999
|
__proto__: null,
|
|
1081
1000
|
Field: Field$1
|
|
1082
1001
|
});
|
|
1083
1002
|
|
|
1084
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1003
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"], ["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
1085
1004
|
var theme = _a.theme;
|
|
1086
1005
|
return theme.palette.blue[100];
|
|
1087
1006
|
});
|
|
1088
1007
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1089
|
-
var templateObject_1$
|
|
1008
|
+
var templateObject_1$O;
|
|
1090
1009
|
|
|
1091
1010
|
/**
|
|
1092
1011
|
* A Menu is a wrapper for items elements
|
|
@@ -1110,7 +1029,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
|
|
|
1110
1029
|
*/
|
|
1111
1030
|
var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
|
|
1112
1031
|
|
|
1113
|
-
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$
|
|
1032
|
+
var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
1114
1033
|
return props.isPrimary &&
|
|
1115
1034
|
"\n background-color: ".concat(props.theme.palette.blue[600], ";\n color: white;\n & svg[data-garden-id=\"forms.media_figure\"] {\n color: white;\n }\n ");
|
|
1116
1035
|
});
|
|
@@ -1127,7 +1046,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
|
|
|
1127
1046
|
var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
|
|
1128
1047
|
var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
|
|
1129
1048
|
var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
|
|
1130
|
-
var templateObject_1$
|
|
1049
|
+
var templateObject_1$N;
|
|
1131
1050
|
|
|
1132
1051
|
/**
|
|
1133
1052
|
* 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 +1061,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
|
|
|
1142
1061
|
|
|
1143
1062
|
var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
|
|
1144
1063
|
|
|
1145
|
-
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$
|
|
1064
|
+
var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
|
|
1146
1065
|
/**
|
|
1147
1066
|
* A Checkbox lets users select and unselect options from a list.
|
|
1148
1067
|
* <hr>
|
|
@@ -1154,36 +1073,66 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
|
|
|
1154
1073
|
* - To let users activate an option that takes effect immediately, use a Toggle instead
|
|
1155
1074
|
**/
|
|
1156
1075
|
var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
|
|
1157
|
-
var templateObject_1$
|
|
1076
|
+
var templateObject_1$M;
|
|
1158
1077
|
|
|
1159
|
-
var
|
|
1078
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
|
|
1079
|
+
/**
|
|
1080
|
+
* A Label is used to specify a title for an input.
|
|
1081
|
+
* <hr>
|
|
1082
|
+
**/
|
|
1083
|
+
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
1084
|
+
var templateObject_1$L;
|
|
1085
|
+
|
|
1086
|
+
var flexCenter = styled.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1087
|
+
var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1088
|
+
var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
1089
|
+
var theme = _a.theme;
|
|
1090
|
+
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1091
|
+
});
|
|
1092
|
+
var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
|
|
1093
|
+
var theme = _a.theme;
|
|
1094
|
+
return theme.borderRadii.lg;
|
|
1095
|
+
}, function (_a) {
|
|
1096
|
+
var theme = _a.theme;
|
|
1097
|
+
return theme.components.notification.card.padding;
|
|
1098
|
+
}, function (_a) {
|
|
1099
|
+
var theme = _a.theme;
|
|
1100
|
+
return theme.palette.grey["200"];
|
|
1101
|
+
}, function (_a) {
|
|
1102
|
+
var theme = _a.theme;
|
|
1103
|
+
return theme.shadows.boxShadow(theme);
|
|
1104
|
+
});
|
|
1105
|
+
var templateObject_1$K, templateObject_2$j, templateObject_3$c, templateObject_4$8;
|
|
1106
|
+
|
|
1107
|
+
styled__default["default"](Card)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"], ["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"])), cardStyle, function (_a) {
|
|
1160
1108
|
var theme = _a.theme;
|
|
1161
1109
|
return theme.palette.blue[300];
|
|
1162
1110
|
});
|
|
1163
|
-
|
|
1111
|
+
styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1164
1112
|
var theme = _a.theme;
|
|
1165
1113
|
return theme.space.base;
|
|
1166
1114
|
});
|
|
1167
|
-
|
|
1115
|
+
styled__default["default"](Label)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1168
1116
|
var theme = _a.theme;
|
|
1169
1117
|
return theme.space.base;
|
|
1170
1118
|
}, function (_a) {
|
|
1171
1119
|
var theme = _a.theme;
|
|
1172
1120
|
return theme.palette.grey[700];
|
|
1173
1121
|
});
|
|
1174
|
-
var StyledLabel = styled__default["default"](Label)(templateObject_4$
|
|
1122
|
+
var StyledLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
|
|
1175
1123
|
var theme = _a.theme;
|
|
1176
1124
|
return theme.space.base;
|
|
1177
1125
|
});
|
|
1178
1126
|
var CheckboxCard = function (props) {
|
|
1127
|
+
var cardArgs = props.card;
|
|
1179
1128
|
var _a = React.useState(props.defaultChecked || false), checked = _a[0], setChecked = _a[1];
|
|
1180
1129
|
var handleToggle = function () {
|
|
1181
1130
|
setChecked(!checked);
|
|
1182
1131
|
props.onToggle && props.onToggle(!checked);
|
|
1183
1132
|
};
|
|
1184
|
-
return (jsxRuntime.jsxs(
|
|
1133
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, __assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) })) }))] })));
|
|
1185
1134
|
};
|
|
1186
|
-
var templateObject_1$J, templateObject_2$i, templateObject_3$
|
|
1135
|
+
var templateObject_1$J, templateObject_2$i, templateObject_3$b, templateObject_4$7;
|
|
1187
1136
|
|
|
1188
1137
|
var UgField = styled__default["default"](reactForms.Field)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
|
|
1189
1138
|
/**
|
|
@@ -1253,15 +1202,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
|
|
|
1253
1202
|
})));
|
|
1254
1203
|
};
|
|
1255
1204
|
|
|
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) {
|
|
1205
|
+
var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
|
|
1265
1206
|
var theme = _a.theme;
|
|
1266
1207
|
return theme.space.base;
|
|
1267
1208
|
}, function (_a) {
|
|
@@ -1271,7 +1212,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
|
|
|
1271
1212
|
var theme = _a.theme;
|
|
1272
1213
|
return theme.fontWeights.medium;
|
|
1273
1214
|
});
|
|
1274
|
-
var Circle = styled__default["default"].div(
|
|
1215
|
+
var Circle = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
|
|
1275
1216
|
var theme = _a.theme;
|
|
1276
1217
|
return theme.space.base * 6;
|
|
1277
1218
|
}, function (_a) {
|
|
@@ -1285,21 +1226,17 @@ var Circle = styled__default["default"].div(templateObject_4$7 || (templateObjec
|
|
|
1285
1226
|
return theme.colors.primaryHue;
|
|
1286
1227
|
}, function (_a) {
|
|
1287
1228
|
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;
|
|
1229
|
+
return !checked &&
|
|
1230
|
+
"\n opacity: 0;\n visibility: hidden;\n ";
|
|
1296
1231
|
});
|
|
1297
1232
|
var RadioCard = function (_a) {
|
|
1298
1233
|
var _b;
|
|
1299
1234
|
var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
|
|
1300
|
-
return (jsxRuntime.jsxs(
|
|
1235
|
+
return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, card, props, { className: props.checked ? "card-active" : "", onClick: function () {
|
|
1236
|
+
props.onChecked && props.onChecked(props.value);
|
|
1237
|
+
} }, { children: [jsxRuntime.jsx(SpecialCard.Meta, __assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, __assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
|
|
1301
1238
|
};
|
|
1302
|
-
var templateObject_1$E, templateObject_2$g
|
|
1239
|
+
var templateObject_1$E, templateObject_2$g;
|
|
1303
1240
|
|
|
1304
1241
|
var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
|
|
1305
1242
|
/**
|
|
@@ -1517,11 +1454,6 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
|
|
|
1517
1454
|
})));
|
|
1518
1455
|
};
|
|
1519
1456
|
|
|
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
1457
|
var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1526
1458
|
var theme = _a.theme, isCompact = _a.isCompact;
|
|
1527
1459
|
return isCompact &&
|
|
@@ -1995,7 +1927,7 @@ var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment,
|
|
|
1995
1927
|
? true
|
|
1996
1928
|
: isSubmitting
|
|
1997
1929
|
? true
|
|
1998
|
-
: false, isPrimary: true, themeColor: theme.
|
|
1930
|
+
: false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
|
|
1999
1931
|
} }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] })); };
|
|
2000
1932
|
|
|
2001
1933
|
var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
@@ -2558,9 +2490,6 @@ exports.ButtonGroup = ButtonGroup;
|
|
|
2558
2490
|
exports.CampaignCard = CampaignCard;
|
|
2559
2491
|
exports.Caption = Caption;
|
|
2560
2492
|
exports.Card = Card;
|
|
2561
|
-
exports.CardBody = CardBody$3;
|
|
2562
|
-
exports.CardFooter = CardFooter$3;
|
|
2563
|
-
exports.CardHeader = CardHeader$2;
|
|
2564
2493
|
exports.Checkbox = Checkbox;
|
|
2565
2494
|
exports.CheckboxCard = CheckboxCard;
|
|
2566
2495
|
exports.Chrome = Chrome;
|
|
@@ -2571,7 +2500,6 @@ exports.ContainerCard = ContainerCard;
|
|
|
2571
2500
|
exports.Content = Content;
|
|
2572
2501
|
exports.Counter = Counter;
|
|
2573
2502
|
exports.CursorPagination = CursorPagination;
|
|
2574
|
-
exports.Divider = Divider$3;
|
|
2575
2503
|
exports.Drawer = Drawer;
|
|
2576
2504
|
exports.Dropdown = Dropdown;
|
|
2577
2505
|
exports.DropdownField = index$1;
|
|
@@ -2655,7 +2583,6 @@ exports.ToastProvider = ToastProvider;
|
|
|
2655
2583
|
exports.Toggle = Toggle;
|
|
2656
2584
|
exports.Trigger = Trigger;
|
|
2657
2585
|
exports.UnorderedList = UnorderedList;
|
|
2658
|
-
exports.Wrapper = Wrapper$1;
|
|
2659
2586
|
exports.XL = XL;
|
|
2660
2587
|
exports.XXL = XXL;
|
|
2661
2588
|
exports.XXXL = XXXL;
|
|
@@ -1,8 +1,3 @@
|
|
|
1
1
|
import { CampaignCardsProps } from "./_types";
|
|
2
|
-
|
|
3
|
-
export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export declare const CardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
-
export declare const CardBody: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const CardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
-
declare const CampaignCard: (props: CampaignCardsProps) => JSX.Element;
|
|
2
|
+
declare const CampaignCard: ({ isNew, date, projectTitle, campaignTitle, status, type, labelNew, ...props }: CampaignCardsProps) => JSX.Element;
|
|
8
3
|
export { CampaignCard };
|
|
@@ -2,5 +2,5 @@ import { CampaignCardsProps } from "./_types";
|
|
|
2
2
|
import { ComponentMeta, Story } from "@storybook/react";
|
|
3
3
|
export declare const SingleCard: Story<CampaignCardsProps>;
|
|
4
4
|
export declare const Grid: Story<CampaignCardsProps>;
|
|
5
|
-
declare const _default: ComponentMeta<(props: CampaignCardsProps) => JSX.Element>;
|
|
5
|
+
declare const _default: ComponentMeta<({ isNew, date, projectTitle, campaignTitle, status, type, labelNew, ...props }: CampaignCardsProps) => JSX.Element>;
|
|
6
6
|
export default _default;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { IWellProps } from "@zendeskgarden/react-notifications";
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
export declare const FLEX_DIRECTION: string[];
|
|
4
|
+
export declare const JUSTIFY_CONTENT: string[];
|
|
5
|
+
export interface CardProps extends IWellProps {
|
|
6
|
+
/** Applies a background color */
|
|
7
|
+
isRecessed?: boolean;
|
|
8
|
+
/** Applies a drop shadow */
|
|
9
|
+
isFloating?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface CardMetaProps extends HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
direction?: typeof FLEX_DIRECTION[number];
|
|
13
|
+
justifyContent?: typeof JUSTIFY_CONTENT[number];
|
|
14
|
+
}
|
|
15
|
+
export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
16
|
+
align?: "left" | "right" | "center";
|
|
17
|
+
}
|
|
18
|
+
export interface CardThumbProps extends HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
align?: "left" | "right" | "center";
|
|
20
|
+
isStretched?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
23
|
+
direction?: typeof FLEX_DIRECTION[number];
|
|
24
|
+
justifyContent?: typeof JUSTIFY_CONTENT[number];
|
|
25
|
+
noDivider?: boolean;
|
|
26
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CardProps } from "./_types";
|
|
2
|
+
/**
|
|
3
|
+
* A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
|
|
4
|
+
* <hr>
|
|
5
|
+
* Used for this:
|
|
6
|
+
- Display products and services
|
|
7
|
+
- As container of input (checkboxCard, radioCard)
|
|
8
|
+
*/
|
|
9
|
+
declare const SpecialCard: {
|
|
10
|
+
(props: CardProps): JSX.Element;
|
|
11
|
+
Meta: import("styled-components").StyledComponent<"div", any, import("./_types").CardMetaProps, never>;
|
|
12
|
+
Thumb: import("styled-components").StyledComponent<"div", any, import("./_types").CardThumbProps, never>;
|
|
13
|
+
Header: {
|
|
14
|
+
(props: import("./_types").CardHeaderProps): JSX.Element;
|
|
15
|
+
Label: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").SMArgs) => JSX.Element, any, {}, never>;
|
|
16
|
+
Title: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
|
|
17
|
+
Text: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
|
|
18
|
+
};
|
|
19
|
+
Footer: (props: import("./_types").CardFooterProps) => JSX.Element;
|
|
20
|
+
};
|
|
21
|
+
export { SpecialCard };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ComponentMeta, Story } from "@storybook/react";
|
|
2
|
+
import { CardProps } from "./_types";
|
|
3
|
+
interface CardStoryProps extends CardProps {
|
|
4
|
+
title: string;
|
|
5
|
+
content: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const Default: Story<CardStoryProps>;
|
|
8
|
+
declare const _default: ComponentMeta<{
|
|
9
|
+
(props: CardProps): JSX.Element;
|
|
10
|
+
Meta: import("styled-components").StyledComponent<"div", any, import("./_types").CardMetaProps, never>;
|
|
11
|
+
Thumb: import("styled-components").StyledComponent<"div", any, import("./_types").CardThumbProps, never>;
|
|
12
|
+
Header: {
|
|
13
|
+
(props: import("./_types").CardHeaderProps): JSX.Element;
|
|
14
|
+
Label: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").SMArgs) => JSX.Element, any, {}, never>;
|
|
15
|
+
Title: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
|
|
16
|
+
Text: import("styled-components").StyledComponent<(props: import("../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
|
|
17
|
+
};
|
|
18
|
+
Footer: (props: import("./_types").CardFooterProps) => JSX.Element;
|
|
19
|
+
}>;
|
|
20
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CardHeaderProps } from "../_types";
|
|
2
|
+
declare const CardHeader: {
|
|
3
|
+
(props: CardHeaderProps): JSX.Element;
|
|
4
|
+
Label: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").SMArgs) => JSX.Element, any, {}, never>;
|
|
5
|
+
Title: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
|
|
6
|
+
Text: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
|
|
7
|
+
};
|
|
8
|
+
export { CardHeader };
|