@appquality/unguess-design-system 2.8.27 → 2.8.29

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# v2.8.29 (Fri Apr 22 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(main): fix Main component interface ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.8.28 (Fri Apr 22 2022)
+
+#### 🐛 Bug Fix
+
+- Cup 627 new scrollbar design [#41](https://github.com/AppQuality/unguess-design-system/pull/41) ([@cicababba](https://github.com/cicababba) [@cannarocks](https://github.com/cannarocks))
+- Add express card [#42](https://github.com/AppQuality/unguess-design-system/pull/42) ([@cannarocks](https://github.com/cannarocks))
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- fix(mainexport): rename drawer folder ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 2
+
+- cicababba ([@cicababba](https://github.com/cicababba))
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.8.27 (Fri Apr 15 2022)
 
 #### 🐛 Bug Fix

package/build/index.d.ts

@@ -8,7 +8,9 @@ export * from "./stories/buttons/button-group";
 export * from "./stories/buttons/icon-button";
 export * from "./stories/buttons/split-button";
 export * from "./stories/cards";
-export * from "./stories/campaignCards";
+export * from "./stories/campaign-cards";
+export * from "./stories/product-cards";
+export * from "./stories/drawers";
 export * from "./stories/close";
 export * from "./stories/counter";
 export * as DropdownField from "./stories/dropdowns/field";

package/build/index.js

@@ -14,12 +14,12 @@ var reactTags = require('@zendeskgarden/react-tags');
 var reactForms = require('@zendeskgarden/react-forms');
 var React = require('react');
 var reactLoaders = require('@zendeskgarden/react-loaders');
+var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var reactTypography = require('@zendeskgarden/react-typography');
 var formik = require('formik');
-var reactModals = require('@zendeskgarden/react-modals');
 var reactPagination = require('@zendeskgarden/react-pagination');
 var reactTables = require('@zendeskgarden/react-tables');
 var reactSpring = require('react-spring');
@@ -230,10 +230,13 @@ var gradients = {
     dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
 };
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }), shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
+var _a, _b, _c, _d, _e, _f;
+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" }) }), notification: __assign(__assign({}, (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.notification), { card: __assign(__assign({}, (_f = (_e = reactTheming.DEFAULT_THEME.components) === null || _e === void 0 ? void 0 : _e.notification) === null || _f === void 0 ? void 0 : _f.well), { padding: "16px" }) }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
-var templateObject_1$P;
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), 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 }) });
+
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\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  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\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  body {\n    font-family: ", ";\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);
+var templateObject_1$Q;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -249,7 +252,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
 // import useWindowSize from "../../hooks/useWindowSize";
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
 });
 /**
@@ -272,7 +275,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$O;
+var templateObject_1$P;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -293,7 +296,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
  */
 var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
 
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -305,7 +308,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
 var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$N;
+var templateObject_1$O;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -358,13 +361,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
 /**
    * A Label is used to specify a title for an input.
    * <hr>
    **/
 var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
-var templateObject_1$M;
+var templateObject_1$N;
 
 var _g$4, _path$p, _path2$7, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
 
@@ -571,7 +574,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
   })));
 };
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
 /**
  * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
  * <hr>
@@ -586,10 +589,10 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
    - To communicate a typing status, use Inline instead
  */
 var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
-var templateObject_1$L;
+var templateObject_1$M;
 
 var CampaignCardSkeleton = function () {
-    return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
+    return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
 };
 
 var getStatusIcon = function (status) {
@@ -614,21 +617,66 @@ var getTypeData = function (type) {
             };
     }
 };
-var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), theme.palette.grey["700"]);
-var StyledTagNew = styled__default["default"](Tag)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"])), function (_a) {
+var Wrapper$1 = styled__default["default"](Card)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\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\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.borderRadii.lg;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.components.notification.card.padding;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["200"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shadows.boxShadow(theme);
+});
+var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["700"];
+});
+var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$8 || (templateObject_3$8 = __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) {
     var theme = _a.theme;
     return theme.space.base * 6;
-}, theme.space.base, function (_a) {
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base;
+}, function (_a) {
     var theme = _a.theme;
     return theme.space.base * 2;
-}, theme.palette.white);
-var StyledLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
-var StyledTitleLabel = styled__default["default"](Label)(templateObject_5$1 || (templateObject_5$1 = __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"])), theme.palette.blue["600"], theme.fontSizes.lg);
-var Divider = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __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"])), theme.space.lg, theme.palette.grey["300"]);
-var CardHeader = styled__default["default"].div(templateObject_7 || (templateObject_7 = __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"])), theme.space.base * 6);
-var CardBody = styled__default["default"].div(templateObject_8 || (templateObject_8 = __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"])), theme.space.xxl);
-var CardFooter = styled__default["default"].div(templateObject_9 || (templateObject_9 = __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"])));
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.white;
+});
+var StyledLabel$1 = styled__default["default"](Label)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fontSizes.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["500"];
+});
+var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$2 || (templateObject_5$2 = __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) {
+    var theme = _a.theme;
+    return theme.palette.blue["600"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontSizes.lg;
+});
+var Divider$1 = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __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) {
+    var theme = _a.theme;
+    return theme.space.lg;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["300"];
+});
+var CardHeader = 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: 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) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+});
+var CardBody$1 = styled__default["default"].div(templateObject_8$1 || (templateObject_8$1 = __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) {
+    var theme = _a.theme;
+    return theme.space.xxl;
+});
+var CardFooter$1 = styled__default["default"].div(templateObject_9 || (templateObject_9 = __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"])));
 var CampaignCard = function (props) {
     var isNew = props.isNew, date = props.date, projectTitle = props.projectTitle, campaignTitle = props.campaignTitle, status = props.status, type = props.type, labelNew = props.labelNew;
     var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
@@ -642,9 +690,79 @@ var CampaignCard = function (props) {
     if (campaignTitle.length > 29) {
         campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
     }
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData && (jsxRuntime.jsxs(StyledTag$1, __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, {})] })] })));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$1, __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$1, { children: [jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [typeData && (jsxRuntime.jsxs(StyledTag$1, __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, {})] })] })));
 };
-var templateObject_1$K, templateObject_2$c, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$L, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+
+var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\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\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.borderRadii.lg;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.components.notification.card.padding;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["200"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shadows.boxShadow(theme);
+});
+var StyledTagNew = styled__default["default"](Tag)(templateObject_2$c || (templateObject_2$c = __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) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.white;
+});
+var StyledLabel = styled__default["default"](Label)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fontSizes.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["500"];
+});
+var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __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) {
+    var theme = _a.theme;
+    return theme.palette.blue["600"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontSizes.lg;
+});
+var Divider = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __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) {
+    var theme = _a.theme;
+    return theme.space.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["300"];
+});
+var IconContainer$1 = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __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) {
+    var theme = _a.theme;
+    return theme.components.notification.card.padding;
+});
+var CardBody = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var CardFooter = styled__default["default"].div(templateObject_8 || (templateObject_8 = __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"])));
+var ProductCard = function (props) {
+    var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
+    var productTitleCut = productTitle;
+    if (productTitle.length > 42) {
+        productTitleCut = "".concat(productTitle.substring(0, 39), "...");
+    }
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, { 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$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
+};
+var templateObject_1$K, templateObject_2$c, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
+
+var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
+Drawer.Header = reactModals.DrawerModal.Header;
+Drawer.Body = reactModals.DrawerModal.Body;
+Drawer.Footer = reactModals.DrawerModal.Footer;
+Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
+Drawer.Close = reactModals.DrawerModal.Close;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1254,7 +1372,7 @@ var BrandItem = function (props) {
 };
 var templateObject_1$r, templateObject_2$b, templateObject_3$6;
 
-var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.Headers.height);
+var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.chrome.header.height);
 /**
  * An Header is a visual way to display general information.
  * This can include navList Items, modal, profile settings.
@@ -1950,7 +2068,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$4 || (templ
     return theme.breakpoints.sm;
 }, function (_a) {
     var theme = _a.theme;
-    return "".concat(theme.components.Headers.height, " - ").concat(theme.space.xs);
+    return "".concat(theme.components.chrome.header.height, " - ").concat(theme.space.xs);
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.base * 3;
@@ -2101,8 +2219,8 @@ exports.ButtonGroup = ButtonGroup;
 exports.CampaignCard = CampaignCard;
 exports.Caption = Caption;
 exports.Card = Card;
-exports.CardBody = CardBody;
-exports.CardFooter = CardFooter;
+exports.CardBody = CardBody$1;
+exports.CardFooter = CardFooter$1;
 exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
 exports.Chrome = Chrome;
@@ -2112,7 +2230,8 @@ exports.Col = Col;
 exports.Content = Content;
 exports.Counter = Counter;
 exports.CursorPagination = CursorPagination;
-exports.Divider = Divider;
+exports.Divider = Divider$1;
+exports.Drawer = Drawer;
 exports.Dropdown = Dropdown;
 exports.DropdownField = index$1;
 exports.Ellipsis = Ellipsis;
@@ -2161,6 +2280,7 @@ exports.PageLoader = PageLoader;
 exports.Pagination = Pagination;
 exports.Paragraph = Paragraph;
 exports.PreviousItem = PreviousItem;
+exports.ProductCard = ProductCard;
 exports.ProfileModal = ProfileModal;
 exports.Progress = Progress;
 exports.Radio = Radio;
@@ -2186,7 +2306,7 @@ exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Trigger = Trigger;
 exports.UnorderedList = UnorderedList;
-exports.Wrapper = Wrapper;
+exports.Wrapper = Wrapper$1;
 exports.XL = XL;
 exports.XXL = XXL;
 exports.XXXL = XXXL;

package/build/stories/drawer/_types.d.ts

@@ -0,0 +1,30 @@
+import { IDrawerModalProps } from "@zendeskgarden/react-modals";
+import { KeyboardEvent, MouseEvent } from "react";
+export interface DrawerArgs extends IDrawerModalProps {
+    /**
+     * Opens the modal
+     */
+    isOpen?: boolean;
+    /**
+     * Passes HTML attributes to the backdrop element
+     */
+    backdropProps?: any;
+    /**
+     * Handles close actions. Can be triggered from the backdrop and from the close icon.
+     *
+     * @param {Object} event The DOM event that triggered the close action
+     */
+    onClose?: (event: KeyboardEvent | MouseEvent) => void;
+    /**
+     * Defines the DOM element that the modal will attatch to
+     */
+    appendToNode?: Element;
+    /**
+     * Directs keyboard focus to the modal on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * Returns keyboard focus to the element that triggered the modal
+     */
+    restoreFocus?: boolean;
+}

package/build/stories/drawer/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+declare const Drawer: {
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Drawer };

package/build/stories/drawer/index.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const Default: Story<DrawerArgs>;
+declare const _default: ComponentMeta<{
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;
+export default _default;

package/build/stories/drawer/loremIpsum.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoremIpsum: () => JSX.Element;

package/build/stories/drawers/_types.d.ts

@@ -0,0 +1,30 @@
+import { IDrawerModalProps } from "@zendeskgarden/react-modals";
+import { KeyboardEvent, MouseEvent } from "react";
+export interface DrawerArgs extends IDrawerModalProps {
+    /**
+     * Opens the modal
+     */
+    isOpen?: boolean;
+    /**
+     * Passes HTML attributes to the backdrop element
+     */
+    backdropProps?: any;
+    /**
+     * Handles close actions. Can be triggered from the backdrop and from the close icon.
+     *
+     * @param {Object} event The DOM event that triggered the close action
+     */
+    onClose?: (event: KeyboardEvent | MouseEvent) => void;
+    /**
+     * Defines the DOM element that the modal will attatch to
+     */
+    appendToNode?: Element;
+    /**
+     * Directs keyboard focus to the modal on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * Returns keyboard focus to the element that triggered the modal
+     */
+    restoreFocus?: boolean;
+}

package/build/stories/drawers/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+declare const Drawer: {
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Drawer };

package/build/stories/drawers/index.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DrawerArgs } from "./_types";
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const Default: Story<DrawerArgs>;
+declare const _default: ComponentMeta<{
+    (props: DrawerArgs): JSX.Element;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;
+export default _default;

package/build/stories/drawers/loremIpsum.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoremIpsum: () => JSX.Element;

package/build/stories/navigation/main/_types.d.ts

@@ -1,2 +1,3 @@
-export interface MainArgs {
+/// <reference types="react" />
+export interface MainArgs extends React.HTMLAttributes<HTMLElement> {
 }

package/build/stories/product-cards/_types.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { CardProps } from "../cards/_types";
+export interface ProductCardProps extends CardProps {
+    /**
+     * displays a new tag in the top right
+     */
+    isNew?: boolean;
+    /**
+     * this renders the new flag label
+     */
+    labelNew?: string;
+    /**
+     * displays product icon
+     */
+    icon?: React.ReactElement;
+    /**
+     * Category, pre-header or any other useful information
+     */
+    preTitle?: string;
+    /**
+     * Card Title
+     */
+    productTitle: string;
+    /**
+     * Display the skeleton
+     */
+    isLoading?: boolean;
+    /**
+     * Text inside the cta button
+     */
+    ctaLabel: string;
+    /**
+     * On Cta click
+     */
+    onCtaClick: () => void;
+}

package/build/stories/product-cards/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ProductCardProps } from "./_types";
+declare const ProductCard: (props: ProductCardProps) => JSX.Element;
+export { ProductCard };

package/build/stories/product-cards/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ProductCardProps } from "./_types";
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const SingleCard: Story<ProductCardProps>;
+export declare const Grid: Story<ProductCardProps>;
+declare const _default: ComponentMeta<(props: ProductCardProps) => JSX.Element>;
+export default _default;

package/build/stories/theme/components.d.ts

@@ -0,0 +1,4 @@
+export declare const components: {
+    chrome: any;
+    notification: any;
+};

package/build/stories/theme/index.d.ts

@@ -1,4 +1,15 @@
 declare const theme: {
+    colors: {
+        primaryHue: string;
+        base: "light" | "dark";
+        background: string;
+        foreground: string;
+        dangerHue: string;
+        warningHue: string;
+        successHue: string;
+        neutralHue: string;
+        chromeHue: string;
+    };
     palette: {
         black: string;
         white: string;
@@ -156,7 +167,8 @@ declare const theme: {
         md: string;
     };
     components: {
-        Headers: any;
+        chrome: any;
+        notification: any;
     };
     shadows: {
         boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;
@@ -184,17 +196,6 @@ declare const theme: {
         lg: string;
         xl: string;
     };
-    colors: {
-        base: "light" | "dark";
-        background: string;
-        foreground: string;
-        primaryHue: string;
-        dangerHue: string;
-        warningHue: string;
-        successHue: string;
-        neutralHue: string;
-        chromeHue: string;
-    };
     fontSizes: {
         xs: string;
         sm: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.8.27",
+  "version": "2.8.29",
   "dependencies": {
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",