@appquality/unguess-design-system 2.10.48 → 2.10.49

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/build/index.js +49 -40
  3. package/build/stories/stepper/_types.d.ts +2 -0
  4. package/build/stories/stepper/index.stories.d.ts +1 -0
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v2.10.49 (Mon Jun 13 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Cup 634 mobile view [#68](https://github.com/AppQuality/unguess-design-system/pull/68) ([@marcbon](https://github.com/marcbon))
6
+
7
+ #### Authors: 1
8
+
9
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
10
+
11
+ ---
12
+
1
13
  # v2.10.48 (Thu Jun 09 2022)
2
14
 
3
15
  #### ⚠️ Pushed to `master`
package/build/index.js CHANGED
@@ -243,8 +243,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
243
243
 
244
244
  var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400], 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$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;
246
+ var GlobalStyle = styled.createGlobalStyle(templateObject_1$15 || (templateObject_1$15 = __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$15;
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$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) {
262
+ var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"])), function (_a) {
263
263
  var theme = _a.theme;
264
264
  return theme.palette.grey[700];
265
265
  }, function (_a) {
@@ -280,9 +280,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
280
280
  var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
281
281
  Alert.Title = UgAlertTitle;
282
282
  Alert.Close = reactNotifications.Close;
283
- var templateObject_1$13, templateObject_2$q;
283
+ var templateObject_1$14, templateObject_2$q;
284
284
 
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) {
285
+ var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
286
286
  return props.avatarType &&
287
287
  props.avatarType !== "image" &&
288
288
  "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -306,7 +306,7 @@ var Avatar = function (props) {
306
306
  return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
307
307
  };
308
308
  Avatar.Text = UgAvatar.Text;
309
- var templateObject_1$12;
309
+ var templateObject_1$13;
310
310
 
311
311
  /**
312
312
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -337,7 +337,7 @@ var getThemeStyle = function (props) {
337
337
  }
338
338
  return theme;
339
339
  };
340
- var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""])));
340
+ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject([""], [""])));
341
341
  /**
342
342
  * Buttons let users take action quickly.
343
343
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -355,7 +355,7 @@ var Button = function (props) {
355
355
  };
356
356
  Button.StartIcon = UgButton.StartIcon;
357
357
  Button.EndIcon = UgButton.EndIcon;
358
- var templateObject_1$11;
358
+ var templateObject_1$12;
359
359
 
360
360
  /**
361
361
  A Button group lets users make a selection from a set of options.
@@ -385,7 +385,7 @@ Used for this:
385
385
  **/
386
386
  var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
387
387
 
388
- var UgContentCard$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) {
388
+ var UgContentCard$1 = styled__default["default"](reactNotifications.Well)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
389
389
  var theme = _a.theme;
390
390
  return theme.borderRadii.lg;
391
391
  }, function (_a) {
@@ -417,7 +417,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
417
417
  return theme.palette.grey["200"];
418
418
  });
419
419
  var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
420
- var templateObject_1$10, templateObject_2$p;
420
+ var templateObject_1$11, templateObject_2$p;
421
421
 
422
422
  /**
423
423
  * Tags let users categorize content using a keyword.
@@ -632,7 +632,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
632
632
  })));
633
633
  };
634
634
 
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) {
635
+ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
636
636
  return props.isLight ?
637
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 ");
638
638
  });
@@ -650,22 +650,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
650
650
  - To communicate a typing status, use Inline instead
651
651
  */
652
652
  var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
653
- var templateObject_1$$;
653
+ var templateObject_1$10;
654
654
 
655
- var CardMeta = styled__default["default"].div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
655
+ var CardMeta = styled__default["default"].div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
656
656
  var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
657
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
658
  });
659
- var templateObject_1$_;
659
+ var templateObject_1$$;
660
660
 
661
- var CardThumbnail = styled__default["default"].div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
661
+ var CardThumbnail = styled__default["default"].div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
662
662
  var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
663
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
664
  });
665
665
  CardThumbnail.defaultProps = {
666
666
  align: "left"
667
667
  };
668
- var templateObject_1$Z;
668
+ var templateObject_1$_;
669
669
 
670
670
  /**
671
671
  * Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
@@ -677,7 +677,7 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
677
677
  var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
678
678
  var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
679
679
 
680
- var Label$1 = styled__default["default"](SM)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
680
+ var Label$1 = styled__default["default"](SM)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
681
681
  var theme = _a.theme;
682
682
  return theme.palette.grey[500];
683
683
  });
@@ -706,9 +706,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign(
706
706
  CardHeader.Label = Label$1;
707
707
  CardHeader.Title = Title$1;
708
708
  CardHeader.Text = Description$1;
709
- var templateObject_1$Y, templateObject_2$o, templateObject_3$g, templateObject_4$a;
709
+ var templateObject_1$Z, templateObject_2$o, templateObject_3$g, templateObject_4$a;
710
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) {
711
+ var Divider = styled__default["default"].div(templateObject_1$Y || (templateObject_1$Y = __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
712
  var theme = _a.theme;
713
713
  return theme.space.base * 3;
714
714
  }, function (_a) {
@@ -724,9 +724,9 @@ var Container = styled__default["default"].div(templateObject_3$f || (templateOb
724
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 ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
725
725
  });
726
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;
727
+ var templateObject_1$Y, templateObject_2$n, templateObject_3$f;
728
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) {
729
+ var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$X || (templateObject_1$X = __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) {
730
730
  var theme = _a.theme;
731
731
  return theme.borderRadii.lg;
732
732
  }, function (_a) {
@@ -752,7 +752,7 @@ SpecialCard.Meta = CardMeta;
752
752
  SpecialCard.Thumb = CardThumbnail;
753
753
  SpecialCard.Header = CardHeader;
754
754
  SpecialCard.Footer = CardFooter;
755
- var templateObject_1$W;
755
+ var templateObject_1$X;
756
756
 
757
757
  var CampaignCardSkeleton = function () {
758
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%" } })] })] }));
@@ -785,7 +785,7 @@ var getTypeDataIcon = function (type) {
785
785
  return SvgCampaignFunctional;
786
786
  }
787
787
  };
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) {
788
+ var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
789
789
  var theme = _a.theme;
790
790
  return theme.palette.grey["700"];
791
791
  });
@@ -812,9 +812,9 @@ var CampaignCard = function (_a) {
812
812
  var PillIcon = getTypeDataIcon(type);
813
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, {})] })] })));
814
814
  };
815
- var templateObject_1$V, templateObject_2$m, templateObject_3$e;
815
+ var templateObject_1$W, templateObject_2$m, templateObject_3$e;
816
816
 
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) {
817
+ var StyledTagNew = styled__default["default"](Tag)(templateObject_1$V || (templateObject_1$V = __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) {
818
818
  var theme = _a.theme;
819
819
  return theme.space.base * 6;
820
820
  }, function (_a) {
@@ -831,9 +831,9 @@ var ProductCard = function (props) {
831
831
  var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
832
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 })) }))] })));
833
833
  };
834
- var templateObject_1$U;
834
+ var templateObject_1$V;
835
835
 
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) {
836
+ var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
837
837
  var theme = _a.theme;
838
838
  return theme.palette.grey[500];
839
839
  }, function (_a) {
@@ -885,15 +885,15 @@ var ServiceCard = function (props) {
885
885
  var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
886
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", wrap: true }, { 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)); }) })))] })] })));
887
887
  };
888
- var templateObject_1$T, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
888
+ var templateObject_1$U, templateObject_2$l, templateObject_3$d, templateObject_4$9, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
889
889
 
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"])));
890
+ var ButtonsWrap = styled__default["default"].div(templateObject_1$T || (templateObject_1$T = __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"])));
891
891
  var InfoCard = function (props) {
892
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; }) }) })))] })));
893
893
  };
894
- var templateObject_1$S;
894
+ var templateObject_1$T;
895
895
 
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) {
896
+ var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$S || (templateObject_1$S = __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) {
897
897
  var theme = _a.theme;
898
898
  return theme.space.xl;
899
899
  }, function (_a) {
@@ -904,7 +904,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
904
904
  * Title is a basic component used to display a title. Often used in card headers.
905
905
  */
906
906
  var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
907
- var templateObject_1$R;
907
+ var templateObject_1$S;
908
908
 
909
909
  /**
910
910
  * Use Span to style and format inline text elements.
@@ -944,7 +944,7 @@ function useWindowSize() {
944
944
  return size;
945
945
  }
946
946
 
947
- var StyledSpan = styled__default["default"](Span)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
947
+ var StyledSpan = styled__default["default"](Span)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
948
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) {
949
949
  var status = _a.status, theme = _a.theme;
950
950
  switch (status) {
@@ -979,8 +979,12 @@ var Counter = function (props) {
979
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() })] })));
980
980
  };
981
981
  Counter.Avatar = StyledTag.Avatar;
982
- var templateObject_1$Q, templateObject_2$k;
982
+ var templateObject_1$R, templateObject_2$k;
983
983
 
984
+ var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
985
+ var theme = _a.theme;
986
+ return theme.breakpoints.sm;
987
+ });
984
988
  /**
985
989
  * A Drawer is a container for supplementary content that is anchored to the edge of a page.
986
990
  * <hr>
@@ -988,12 +992,13 @@ var templateObject_1$Q, templateObject_2$k;
988
992
  - To display information or actions that are supplementary to the screen’s primary content
989
993
  - To display a list of actions that affect the screen’s content, such as filtering data
990
994
  */
991
- var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
995
+ var Drawer = function (props) { return jsxRuntime.jsx(UgDrawer, __assign({}, props)); };
992
996
  Drawer.Header = reactModals.DrawerModal.Header;
993
997
  Drawer.Body = reactModals.DrawerModal.Body;
994
998
  Drawer.Footer = reactModals.DrawerModal.Footer;
995
999
  Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
996
- Drawer.Close = reactModals.DrawerModal.Close;
1000
+ Drawer.Close = reactModals.DrawerModal.Close;
1001
+ var templateObject_1$Q;
997
1002
 
998
1003
  var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
999
1004
  var templateObject_1$P;
@@ -2290,7 +2295,7 @@ var backDropStyle = {
2290
2295
  var ProfileModal = function (_a) {
2291
2296
  var menuArgs = _a.menuArgs, args = __rest(_a, ["menuArgs"]);
2292
2297
  var width = useWindowSize().width;
2293
- var smBreakpoint = Number(theme.breakpoints.sm.replace("px", ""));
2298
+ var smBreakpoint = parseInt(theme.breakpoints.sm);
2294
2299
  var backDrop = {
2295
2300
  style: __assign({}, (width > smBreakpoint && __assign({}, backDropStyle))),
2296
2301
  };
@@ -2303,7 +2308,7 @@ var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateOb
2303
2308
  return theme.palette.green[700];
2304
2309
  });
2305
2310
  var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject([""], [""])));
2306
- var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (_a) {
2311
+ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (_a) {
2307
2312
  var theme = _a.theme;
2308
2313
  return theme.palette.grey[200];
2309
2314
  }, function (_a) {
@@ -2313,7 +2318,7 @@ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObje
2313
2318
  return props.activeIndex !== undefined &&
2314
2319
  "\n ".concat(UgStep, ":nth-child(").concat(props.activeIndex + 1, ") {\n \n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ").concat(props.theme.palette.blue[600], ";\n color: white;\n }\n\n ").concat(UgLabel, " {\n font-weight: 500;\n color: ").concat(props.theme.palette.blue[600], ";\n }\n }\n ");
2315
2320
  });
2316
- var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div { \n color: ", "; \n }\n"], ["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div { \n color: ", "; \n }\n"])), function (_a) {
2321
+ var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div {\n color: ", ";\n }\n"], ["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div {\n color: ", ";\n }\n"])), function (_a) {
2317
2322
  var theme = _a.theme;
2318
2323
  return "".concat(theme.space.sm, " ").concat(theme.space.sm, " ").concat(theme.space.sm, " 24px");
2319
2324
  }, function (_a) {
@@ -2326,7 +2331,11 @@ var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(temp
2326
2331
  * Used for this:
2327
2332
  - For multi-step flows that must be completed in order
2328
2333
  */
2329
- var Stepper = function (props) { return jsxRuntime.jsx(UgStepper, __assign({}, props)); };
2334
+ var Stepper = function (props) {
2335
+ var width = useWindowSize().width;
2336
+ var smBreakpoint = parseInt(theme.breakpoints.sm);
2337
+ return width <= smBreakpoint ? (jsxRuntime.jsx(Accordion, __assign({ level: 1, isBare: true, isExpandable: true, isAnimated: true }, { children: jsxRuntime.jsxs(Accordion.Section, { children: [jsxRuntime.jsx(Accordion.Header, { children: jsxRuntime.jsx(Accordion.Label, { children: props.accordionTitle }) }), jsxRuntime.jsx(Accordion.Panel, { children: jsxRuntime.jsx(UgStepper, __assign({}, props)) })] }) }))) : (jsxRuntime.jsx(UgStepper, __assign({}, props)));
2338
+ };
2330
2339
  Stepper.Step = UgStep;
2331
2340
  Stepper.Label = UgLabel;
2332
2341
  Stepper.Content = UgContent;
package/build/stories/stepper/_types.d.ts CHANGED
@@ -5,6 +5,8 @@ export interface StepperArgs extends IStepperProps {
5
5
  activeIndex?: number;
6
6
  /** Applies horizontal layout styling */
7
7
  isHorizontal?: boolean;
8
+ /** Title used for the accordion shown on mobile */
9
+ accordionTitle?: string;
8
10
  }
9
11
  export interface StepperLabelArgs extends IStepperLabelProps {
10
12
  /** Replaces the label number with an icon */
package/build/stories/stepper/index.stories.d.ts CHANGED
@@ -3,6 +3,7 @@ import { ComponentMeta, Story } from "@storybook/react";
3
3
  import { StepperArgs } from "./_types";
4
4
  interface StepperStoryProps extends StepperArgs {
5
5
  currentStep: number;
6
+ accordionTitle: string;
6
7
  }
7
8
  export declare const Default: Story<StepperStoryProps>;
8
9
  export declare const SeparateContent: Story<StepperStoryProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.10.48",
3
+ "version": "2.10.49",
4
4
  "dependencies": {
5
5
  "@zendeskgarden/css-bedrock": "^9.0.0",
6
6
  "@zendeskgarden/react-accordions": "^8.49.0",