@appquality/unguess-design-system 2.12.79 → 2.12.81

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# v2.12.81 (Thu Mar 09 2023)
+
+#### 🐛 Bug Fix
+
+- Hide sidebar below md breakpoint [#225](https://github.com/AppQuality/unguess-design-system/pull/225) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon))
+- fix(nav): change mobile breakpoint and mobile first [#224](https://github.com/AppQuality/unguess-design-system/pull/224) ([@iacopolea](https://github.com/iacopolea))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# 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 })));
 };
 
 /**
@@ -3119,25 +3119,20 @@ const AppHeader = (_a) => {
 };
 
 const UgNav = styled__default["default"](reactChrome.Nav) `
-  border-right: ${({ theme }) => theme.borders.sm};
-  border-color: ${({ theme }) => reactTheming.getColor(theme.colors.neutralHue, 300)};
+  width: ${p => p.isExpanded ? "100%" : "0"};
+  padding-top: ${({ theme }) => theme.space.sm};
+  margin-left: 0;
+  border-right: none;
   transition: all 0.25s ease;
-  ${(props) => `
-    margin-left: ${props.isExpanded
+  
+  @media (min-width: ${p => p.theme.breakpoints.md}) {
+    border-right: ${({ theme }) => theme.borders.sm};
+    border-color: ${({ theme }) => reactTheming.getColor(theme.colors.neutralHue, 300)};
+    width: ${p => p.theme.components.chrome.nav.openWidth}px;
+    margin-left: ${p => p.isExpanded
     ? 0
-    : -(props.theme.components.chrome.nav.openWidth -
-        props.theme.components.chrome.nav.closedWidth)}px;
-    width: ${props.theme.components.chrome.nav.openWidth}px;
-      
-      @media (max-width: ${props.theme.breakpoints.sm}) {
-         width: ${props.isExpanded ? "100%" : "0"};
-         margin-left: 0;
-         border-right: none;
-      }
-  `}
-  // transition: width 0.25s ease-in-out;
-  padding-top: ${({ theme }) => theme.space.sm};
-  @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+    : -(p.theme.components.chrome.nav.openWidth -
+        p.theme.components.chrome.nav.closedWidth)}px;
     padding-left: ${({ theme }) => theme.space.xs};
   }
 `;
@@ -3212,6 +3207,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 };
 
 const StyledToggle = styled__default["default"](IconButton) `
+  display: none;
   width: ${({ theme }) => theme.space.base * 6}px;
   height: ${({ theme }) => theme.space.base * 6}px;
   min-width: ${({ theme }) => theme.space.md};
@@ -3220,8 +3216,8 @@ const StyledToggle = styled__default["default"](IconButton) `
   right: -${({ theme }) => theme.space.base * 3}px;
   background: ${({ theme }) => theme.gradients.dark}};
   z-index: 1;
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    display: none;
+  @media (min-width: ${({ theme }) => theme.breakpoints.md}) {
+    display: block;
   }
 `;
 const NavToggle = (props) => {
@@ -3746,7 +3742,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 +3754,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 +3815,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 +3825,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 +3849,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 +3858,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 +3872,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 +3880,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 +3894,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.81",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",