@appquality/unguess-design-system 2.11.1 → 2.11.2

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 (3) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/build/index.js +19 -18
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v2.11.2 (Wed Aug 17 2022)
2
+
3
+ #### ⚠️ Pushed to `master`
4
+
5
+ - fix(page-header): only the content MUST be boxed,keep the background ([@cannarocks](https://github.com/cannarocks))
6
+
7
+ #### Authors: 1
8
+
9
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
10
+
11
+ ---
12
+
1
13
  # v2.11.1 (Wed Aug 17 2022)
2
14
 
3
15
  #### ⚠️ Pushed to `master`
package/build/index.js CHANGED
@@ -724,7 +724,7 @@ var Description$3 = styled__default["default"](MD)(templateObject_3$i || (templa
724
724
  var theme = _a.theme;
725
725
  return theme.space.xxs;
726
726
  });
727
- var Container$2 = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
727
+ var Container$2 = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
728
728
  var theme = _a.theme, align = _a.align;
729
729
  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 ");
730
730
  });
@@ -732,7 +732,7 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
732
732
  CardHeader.Label = Label$2;
733
733
  CardHeader.Title = Title$3;
734
734
  CardHeader.Text = Description$3;
735
- var templateObject_1$17, templateObject_2$t, templateObject_3$i, templateObject_4$b;
735
+ var templateObject_1$17, templateObject_2$t, templateObject_3$i, templateObject_4$c;
736
736
 
737
737
  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) {
738
738
  var theme = _a.theme;
@@ -887,7 +887,7 @@ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$f || (templat
887
887
  var theme = _a.theme;
888
888
  return theme.space.xs;
889
889
  });
890
- 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"])));
890
+ 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"])));
891
891
  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) {
892
892
  var theme = _a.theme;
893
893
  return theme.space.base;
@@ -915,7 +915,7 @@ var ServiceCard = function (props) {
915
915
  var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
916
916
  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)); }) })))] })] })));
917
917
  };
918
- 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;
918
+ 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;
919
919
 
920
920
  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"])));
921
921
  var InfoCard = function (props) {
@@ -1054,7 +1054,7 @@ var ThumbContainer = styled__default["default"].div(templateObject_3$e || (templ
1054
1054
  var theme = _a.theme;
1055
1055
  return theme.components.autocomplete.thumbSize;
1056
1056
  });
1057
- 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) {
1057
+ 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) {
1058
1058
  var theme = _a.theme;
1059
1059
  return theme.fontWeights.medium;
1060
1060
  }, function (_a) {
@@ -1073,7 +1073,7 @@ var ItemContent = function (props) {
1073
1073
  var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
1074
1074
  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 })] })] }));
1075
1075
  };
1076
- var templateObject_1$X, templateObject_2$o, templateObject_3$e, templateObject_4$9, templateObject_5$5;
1076
+ var templateObject_1$X, templateObject_2$o, templateObject_3$e, templateObject_4$a, templateObject_5$5;
1077
1077
 
1078
1078
  /**
1079
1079
  * A Menu is a wrapper for items elements
@@ -1852,7 +1852,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
1852
1852
  var theme = _a.theme;
1853
1853
  return theme.breakpoints.md;
1854
1854
  });
1855
- 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) {
1855
+ 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) {
1856
1856
  var theme = _a.theme;
1857
1857
  return theme.colors.primaryHue;
1858
1858
  }, function (_a) {
@@ -1862,7 +1862,7 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
1862
1862
  var BrandItem = function (props) {
1863
1863
  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 }) }))) }))] }));
1864
1864
  };
1865
- var templateObject_1$y, templateObject_2$h, templateObject_3$d, templateObject_4$8;
1865
+ var templateObject_1$y, templateObject_2$h, templateObject_3$d, templateObject_4$9;
1866
1866
 
1867
1867
  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);
1868
1868
  /**
@@ -2323,7 +2323,7 @@ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$b ||
2323
2323
  var theme = _a.theme;
2324
2324
  return "".concat(theme.space.lg, " ").concat(theme.space.md);
2325
2325
  });
2326
- 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) {
2326
+ 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) {
2327
2327
  var theme = _a.theme;
2328
2328
  return theme.space.base * 4;
2329
2329
  }, function (_a) {
@@ -2337,7 +2337,7 @@ ModalFullScreen.Body = StyledBody$4;
2337
2337
  ModalFullScreen.Footer = StyledFooter;
2338
2338
  ModalFullScreen.Close = StyledModalClose;
2339
2339
  ModalFullScreen.FooterItem = FooterItem;
2340
- var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$4;
2340
+ var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
2341
2341
 
2342
2342
  /**
2343
2343
  * 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
2382
2382
  var theme = _a.theme;
2383
2383
  return theme.breakpoints.sm;
2384
2384
  });
2385
- 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) {
2385
+ 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) {
2386
2386
  var theme = _a.theme;
2387
2387
  return theme.palette.grey[600];
2388
2388
  }, function (_a) {
@@ -2433,12 +2433,13 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
2433
2433
  var Main = function (props) {
2434
2434
  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 }) }) })))] }) }));
2435
2435
  };
2436
- 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;
2436
+ 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;
2437
2437
 
2438
- 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) {
2438
+ var PageContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
2439
2439
  var theme = _a.theme;
2440
2440
  return theme.palette.white;
2441
- }, function (_a) {
2441
+ });
2442
+ 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) {
2442
2443
  var theme = _a.theme;
2443
2444
  return "".concat(theme.space.xxl, " ").concat(theme.space.xxl, " ").concat(theme.space.md);
2444
2445
  }, function (_a) {
@@ -2457,14 +2458,14 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$g || (tem
2457
2458
  var theme = _a.theme;
2458
2459
  return theme.breakpoints.xl;
2459
2460
  });
2460
- 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) {
2461
+ 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) {
2461
2462
  var theme = _a.theme;
2462
2463
  return "".concat(theme.space.xs, " 10px");
2463
2464
  }, function (_a) {
2464
2465
  var theme = _a.theme;
2465
2466
  return theme.space.xs;
2466
2467
  });
2467
- 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) {
2468
+ 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) {
2468
2469
  var theme = _a.theme;
2469
2470
  return theme.space.md;
2470
2471
  });
@@ -2480,12 +2481,12 @@ var Buttons = function (props) { return (jsxRuntime.jsx(ButtonContainer, __assig
2480
2481
  - As a container for the top part of the page
2481
2482
  */
2482
2483
  var PageHeader = function (props) {
2483
- return jsxRuntime.jsx(StyledPageHeader, __assign({}, props));
2484
+ return (jsxRuntime.jsx(PageContainer, { children: jsxRuntime.jsx(StyledPageHeader, __assign({}, props)) }));
2484
2485
  };
2485
2486
  PageHeader.Breadcrumb = StyledBreadcrumb;
2486
2487
  PageHeader.Main = Main;
2487
2488
  PageHeader.Buttons = Buttons;
2488
- var templateObject_1$g, templateObject_2$b, templateObject_3$9;
2489
+ var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$6;
2489
2490
 
2490
2491
  var _path$5;
2491
2492
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.11.1",
3
+ "version": "2.11.2",
4
4
  "dependencies": {
5
5
  "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
6
6
  "@tiptap/extension-character-count": "^2.0.0-beta.31",