@appquality/unguess-design-system 2.12.79 → 2.12.80

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v2.12.80 (Wed Mar 01 2023)
+
+#### 🐛 Bug Fix
+
+- New page header [#223](https://github.com/AppQuality/unguess-design-system/pull/223) ([@marcbon](https://github.com/marcbon))
+- Un 524 page header [#222](https://github.com/AppQuality/unguess-design-system/pull/222) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.79 (Tue Feb 28 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -459,7 +459,7 @@ Avatar.Text = UgAvatar.Text;
     - To show the user where they are in a nested navigation
     - To provide a quick way to navigate to ancestor pages
  */
-const StyledBreadcrumb$1 = styled__default["default"](reactBreadcrumbs.Breadcrumb) `
+const StyledBreadcrumb = styled__default["default"](reactBreadcrumbs.Breadcrumb) `
   @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
     > ol {
       display: block;
@@ -487,7 +487,7 @@ const StyledBreadcrumb$1 = styled__default["default"](reactBreadcrumbs.Breadcrum
 `;
 const Breadcrumb = (_a) => {
     var { children, showLastArrow = true } = _a, props = __rest(_a, ["children", "showLastArrow"]);
-    return showLastArrow ? (jsxRuntime.jsxs(StyledBreadcrumb$1, Object.assign({}, props, { showLastArrow: true }, { children: [children, jsxRuntime.jsx("div", {})] }))) : (jsxRuntime.jsx(StyledBreadcrumb$1, Object.assign({}, props, { children: children })));
+    return showLastArrow ? (jsxRuntime.jsxs(StyledBreadcrumb, Object.assign({}, props, { showLastArrow: true }, { children: [children, jsxRuntime.jsx("div", {})] }))) : (jsxRuntime.jsx(StyledBreadcrumb, Object.assign({}, props, { children: children })));
 };
 
 /**
@@ -3746,7 +3746,7 @@ const StyledBody$4 = styled__default["default"](Modal.Body) `
     padding: ${({ theme }) => `${theme.space.lg} ${theme.space.md}`};
   }
 `;
-const StyledFooter = styled__default["default"](Modal.Footer) `
+const StyledFooter$1 = styled__default["default"](Modal.Footer) `
   padding: ${({ theme }) => theme.space.base * 4}px
     ${({ theme }) => theme.space.base * 6}px;
 `;
@@ -3758,7 +3758,7 @@ const StyledModalClose = styled__default["default"](reactModals.Close) `
 const ModalFullScreen = (props) => jsxRuntime.jsx(StyledModal$1, Object.assign({}, props));
 ModalFullScreen.Header = StyledHeader;
 ModalFullScreen.Body = StyledBody$4;
-ModalFullScreen.Footer = StyledFooter;
+ModalFullScreen.Footer = StyledFooter$1;
 ModalFullScreen.Close = StyledModalClose;
 ModalFullScreen.FooterItem = FooterItem;
 
@@ -3819,9 +3819,9 @@ const MetaContainer = styled__default["default"].div `
 `;
 const MainOverline = styled__default["default"](MD) `
   color: ${({ theme }) => theme.palette.grey[600]};
-  margin-bottom: ${({ theme }) => theme.space.md};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   line-height: ${({ theme }) => theme.lineHeights.md};
+  margin-bottom: ${({ theme }) => theme.space.md};
 `;
 const MainTitle = styled__default["default"].h1 `
   color: ${({ theme }) => theme.colors.primaryHue};
@@ -3829,27 +3829,23 @@ const MainTitle = styled__default["default"].h1 `
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   line-height: ${({ theme }) => theme.lineHeights.xxxl};
   width: 100%;
+  margin-bottom: ${({ theme }) => theme.space.sm};
 `;
 const MainDescription = styled__default["default"](LG) `
   color: ${({ theme }) => theme.palette.grey[600]};
-  margin: ${({ theme }) => theme.space.md} 0;
   line-height: ${({ theme }) => theme.lineHeights.lg};
+  margin-bottom: ${({ theme }) => theme.space.md};
 `;
-const MainCounters = styled__default["default"].div `
+const MainMeta = styled__default["default"].div `
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-top: ${({ theme }) => theme.space.md};
-
-  > div {
-    padding: 0;
-    margin-right: ${({ theme }) => theme.space.sm};
-  }
+  width: 100%;
 `;
 const StyledCol = styled__default["default"](Col) `
-  margin: 0;
+  margin-bottom: 0;
 `;
 const Image = styled__default["default"].img `
   width: auto;
@@ -3857,7 +3853,7 @@ const Image = styled__default["default"].img `
   max-height: ${({ theme }) => theme.components.pageHeader.imgMaxHeight};
 `;
 const Main = (props) => {
-    return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, Object.assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(InformationContainer, { children: props.children }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, Object.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 }) }) })))] }) }));
+    return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, Object.assign({ xs: 12, sm: props.mainImageUrl ? 6 : 12 }, { children: jsxRuntime.jsx(InformationContainer, { children: props.children }) })), props.mainImageUrl && (jsxRuntime.jsx(StyledCol, Object.assign({ xs: 12, sm: props.mainImageUrl ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.mainImageUrl, title: props.mainTitle, alt: props.mainTitle }) }) })))] }) }));
 };
 
 const StyledPageHeader = styled__default["default"].div `
@@ -3866,9 +3862,10 @@ const StyledPageHeader = styled__default["default"].div `
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: ${({ theme }) => theme.space.sm} 0;
   box-sizing: border-box;
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[200]};
+  padding-top: ${({ theme }) => theme.space.lg};
+  padding-bottom: ${({ theme }) => theme.space.md};
 `;
 const PullLeft = styled__default["default"].div `
   display: flex;
@@ -3879,7 +3876,7 @@ const PullLeft = styled__default["default"].div `
   width: 100%;
   margin-bottom: ${({ theme }) => theme.space.sm};
 `;
-const ButtonContainer = styled__default["default"].div `
+const FooterContainer = styled__default["default"].div `
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3887,11 +3884,12 @@ const ButtonContainer = styled__default["default"].div `
   flex-wrap: wrap;
   width: 100%;
   margin: ${({ theme }) => theme.space.md} 0;
+  padding: ${({ theme }) => theme.space.xxs} 0;
 `;
-const StyledBreadcrumb = (props) => {
+const StyledBreadcrumbs = (props) => {
     return (jsxRuntime.jsx(PullLeft, { children: jsxRuntime.jsx(Breadcrumb, Object.assign({}, props)) }));
 };
-const Buttons = (props) => (jsxRuntime.jsx(ButtonContainer, Object.assign({}, props)));
+const StyledFooter = (props) => (jsxRuntime.jsx(FooterContainer, Object.assign({}, props)));
 /**
  * A PageHeader is a modular container used for pages with an opinionated set of default spaces and subcomponents order.
  * <hr>
@@ -3900,13 +3898,13 @@ const Buttons = (props) => (jsxRuntime.jsx(ButtonContainer, Object.assign({}, pr
     - As a container for the top part of the page
  */
 const PageHeader = (props) => jsxRuntime.jsx(StyledPageHeader, Object.assign({}, props));
-PageHeader.Breadcrumb = StyledBreadcrumb;
+PageHeader.Breadcrumbs = StyledBreadcrumbs;
 PageHeader.Main = Main;
-PageHeader.Buttons = Buttons;
 PageHeader.Overline = MainOverline;
 PageHeader.Title = MainTitle;
 PageHeader.Description = MainDescription;
-PageHeader.Counters = MainCounters;
+PageHeader.Meta = MainMeta;
+PageHeader.Footer = StyledFooter;
 
 const Wrapper = styled__default["default"].div `
   position: absolute;

package/build/stories/navigation/page-header/_types.d.ts

@@ -2,9 +2,9 @@ import React, { HTMLAttributes } from "react";
 export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
 export interface PageHeaderMainProps extends HTMLAttributes<HTMLDivElement> {
-    infoTitle: string;
-    infoOverline?: string;
-    infoDescription?: string;
-    infoCounters?: React.ReactNode;
-    metaImage?: string;
+    mainTitle: string;
+    mainOverline?: string;
+    mainDescription?: string;
+    mainMeta?: React.ReactNode;
+    mainImageUrl?: string;
 }

package/build/stories/navigation/page-header/index.d.ts

@@ -10,12 +10,12 @@ import { PropsWithChildren } from "react";
  */
 declare const PageHeader: {
     (props: PageHeaderProps): JSX.Element;
-    Breadcrumb: (props: BreadcrumbArgs) => JSX.Element;
+    Breadcrumbs: (props: BreadcrumbArgs) => JSX.Element;
     Main: (props: import("./_types").PageHeaderMainProps) => JSX.Element;
-    Buttons: (props: PropsWithChildren<{}>) => JSX.Element;
     Overline: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
     Title: import("styled-components").StyledComponent<"h1", any, {}, never>;
     Description: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
-    Counters: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Meta: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Footer: (props: PropsWithChildren<{}>) => JSX.Element;
 };
 export { PageHeader };

package/build/stories/navigation/page-header/index.stories.d.ts

@@ -7,18 +7,20 @@ interface PageHeaderStoryProps {
     };
     pageHeaderMainArgs: PageHeaderMainProps;
 }
-export declare const Default: Story<PageHeaderStoryProps>;
-export declare const Editable: Story<PageHeaderStoryProps>;
+export declare const Complete: Story<PageHeaderStoryProps>;
+export declare const CompleteEditable: Story<PageHeaderStoryProps>;
+export declare const FirstLevel: Story<PageHeaderStoryProps>;
+export declare const SecondThirdLevel: Story<PageHeaderStoryProps>;
 declare const _default: ComponentMeta<{
     (props: import("./_types").PageHeaderProps): JSX.Element;
-    Breadcrumb: (props: import("../../breadcrumbs/_types").BreadcrumbArgs) => JSX.Element;
+    Breadcrumbs: (props: import("../../breadcrumbs/_types").BreadcrumbArgs) => JSX.Element;
     Main: (props: PageHeaderMainProps) => JSX.Element;
-    Buttons: (props: {
-        children?: React.ReactNode;
-    }) => JSX.Element;
     Overline: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
     Title: import("styled-components").StyledComponent<"h1", any, {}, never>;
     Description: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
-    Counters: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Meta: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Footer: (props: {
+        children?: React.ReactNode;
+    }) => JSX.Element;
 }>;
 export default _default;

package/build/stories/navigation/page-header/styled/main.d.ts

@@ -2,5 +2,5 @@ import { PageHeaderMainProps } from "../_types";
 export declare const MainOverline: import("styled-components").StyledComponent<(props: import("../../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
 export declare const MainTitle: import("styled-components").StyledComponent<"h1", any, {}, never>;
 export declare const MainDescription: import("styled-components").StyledComponent<(props: import("../../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
-export declare const MainCounters: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainMeta: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Main: (props: PageHeaderMainProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.79",
+  "version": "2.12.80",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",