@appquality/unguess-design-system 2.11.1 → 2.11.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.11.2 (Wed Aug 17 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(page-header): only the content MUST be boxed,keep the background ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.11.1 (Wed Aug 17 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -724,7 +724,7 @@ var Description$3 = styled__default["default"](MD)(templateObject_3$i || (templa
     var theme = _a.theme;
     return theme.space.xxs;
 });
-var Container$2 = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var Container$2 = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, align = _a.align;
     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  ");
 });
@@ -732,7 +732,7 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
 CardHeader.Label = Label$2;
 CardHeader.Title = Title$3;
 CardHeader.Text = Description$3;
-var templateObject_1$17, templateObject_2$t, templateObject_3$i, templateObject_4$b;
+var templateObject_1$17, templateObject_2$t, templateObject_3$i, templateObject_4$c;
 
 var Divider = styled__default["default"].div(templateObject_1$16 || (templateObject_1$16 = __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) {
     var theme = _a.theme;
@@ -887,7 +887,7 @@ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$f || (templat
     var theme = _a.theme;
     return theme.space.xs;
 });
-var CardContent = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __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"])));
+var CardContent = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __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"])));
 var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n  margin-top: ", "px;\n\n  button {\n    padding: ", " 0;\n    \n  }\n\n  button:not(:first-child) {\n    margin-top: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n  margin-top: ", "px;\n\n  button {\n    padding: ", " 0;\n    \n  }\n\n  button:not(:first-child) {\n    margin-top: ", "px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
@@ -915,7 +915,7 @@ var ServiceCard = function (props) {
     var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
     return (jsxRuntime.jsxs(StyledCard$1, __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)); }) })))] })] })));
 };
-var templateObject_1$12, templateObject_2$q, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
+var templateObject_1$12, templateObject_2$q, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
 
 var ButtonsWrap = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __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"])));
 var InfoCard = function (props) {
@@ -1054,7 +1054,7 @@ var ThumbContainer = styled__default["default"].div(templateObject_3$e || (templ
     var theme = _a.theme;
     return theme.components.autocomplete.thumbSize;
 });
-var Label$1 = styled__default["default"](MD)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n"])), function (_a) {
+var Label$1 = styled__default["default"](MD)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.medium;
 }, function (_a) {
@@ -1073,7 +1073,7 @@ var ItemContent = function (props) {
     var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
     return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
 };
-var templateObject_1$X, templateObject_2$o, templateObject_3$e, templateObject_4$9, templateObject_5$5;
+var templateObject_1$X, templateObject_2$o, templateObject_3$e, templateObject_4$a, templateObject_5$5;
 
 /**
    * A Menu is a wrapper for items elements
@@ -1852,7 +1852,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
     var theme = _a.theme;
     return theme.breakpoints.md;
 });
-var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"], ["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"], ["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.primaryHue;
 }, function (_a) {
@@ -1862,7 +1862,7 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
 var BrandItem = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
 };
-var templateObject_1$y, templateObject_2$h, templateObject_3$d, templateObject_4$8;
+var templateObject_1$y, templateObject_2$h, templateObject_3$d, templateObject_4$9;
 
 var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.chrome.header.height);
 /**
@@ -2323,7 +2323,7 @@ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$b ||
     var theme = _a.theme;
     return "".concat(theme.space.lg, " ").concat(theme.space.md);
 });
-var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  padding: ", "px\n    ", "px;\n"], ["\n  padding: ", "px\n    ", "px;\n"])), function (_a) {
+var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  padding: ", "px\n    ", "px;\n"], ["\n  padding: ", "px\n    ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 4;
 }, function (_a) {
@@ -2337,7 +2337,7 @@ ModalFullScreen.Body = StyledBody$4;
 ModalFullScreen.Footer = StyledFooter;
 ModalFullScreen.Close = StyledModalClose;
 ModalFullScreen.FooterItem = FooterItem;
-var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$4;
+var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
 
 /**
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -2382,7 +2382,7 @@ var MetaContainer = styled__default["default"].div(templateObject_3$a || (templa
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
-var Overline = styled__default["default"](MD)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
+var Overline = styled__default["default"](MD)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[600];
 }, function (_a) {
@@ -2433,12 +2433,13 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
 var Main = function (props) {
     return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
 };
-var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
 
-var StyledPageHeader = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  background-color: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  background-color: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"])), function (_a) {
+var PageContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.white;
-}, function (_a) {
+});
+var StyledPageHeader = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return "".concat(theme.space.xxl, " ").concat(theme.space.xxl, " ").concat(theme.space.md);
 }, function (_a) {
@@ -2457,14 +2458,14 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$g || (tem
     var theme = _a.theme;
     return theme.breakpoints.xl;
 });
-var PullLeft = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+var PullLeft = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return "".concat(theme.space.xs, " 10px");
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.xs;
 });
-var ButtonContainer = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: ", " 0;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: ", " 0;\n"])), function (_a) {
+var ButtonContainer = styled__default["default"].div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: ", " 0;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.md;
 });
@@ -2480,12 +2481,12 @@ var Buttons = function (props) { return (jsxRuntime.jsx(ButtonContainer, __assig
     - As a container for the top part of the page
  */
 var PageHeader = function (props) {
-    return jsxRuntime.jsx(StyledPageHeader, __assign({}, props));
+    return (jsxRuntime.jsx(PageContainer, { children: jsxRuntime.jsx(StyledPageHeader, __assign({}, props)) }));
 };
 PageHeader.Breadcrumb = StyledBreadcrumb;
 PageHeader.Main = Main;
 PageHeader.Buttons = Buttons;
-var templateObject_1$g, templateObject_2$b, templateObject_3$9;
+var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$6;
 
 var _path$5;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",