@appquality/unguess-design-system 2.12.78 → 2.12.80

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# 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
+
+- New version with Tag fixes [#221](https://github.com/AppQuality/unguess-design-system/pull/221) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon))
+- Fix-cards-tags [#220](https://github.com/AppQuality/unguess-design-system/pull/220) ([@iacopolea](https://github.com/iacopolea))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.78 (Mon Feb 27 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 })));
 };
 
 /**
@@ -1124,14 +1124,13 @@ const getTypeDataIcon = (type) => {
     }
 };
 const StyledTag$2 = styled__default["default"](Tag) `
-  color: ${({ theme }) => theme.palette.grey["700"]};
+  max-width: 85%;
   cursor: pointer;
 `;
 const StyledTagNew$1 = styled__default["default"](Tag) `
   height: ${({ theme }) => theme.space.base * 6}px;
   padding: ${({ theme }) => theme.space.base}px
     ${({ theme }) => theme.space.base * 2}px;
-  color: ${({ theme }) => theme.palette.white};
 `;
 const StyledLabel$3 = styled__default["default"](SM) `
   color: ${({ theme }) => theme.palette.grey["500"]};
@@ -1140,7 +1139,7 @@ const CampaignCard = (_a) => {
     var { isNew, date, projectTitle, campaignTitle, status, type, labelNew } = _a, props = __rest(_a, ["isNew", "date", "projectTitle", "campaignTitle", "status", "type", "labelNew"]);
     const StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
     const PillIcon = getTypeDataIcon(type);
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$3, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, Object.assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$3, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], color: theme.palette.white, isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, Object.assign({ size: "large" }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, { children: props.pillText })] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
 
 const StyledTagNew = styled__default["default"](Tag) `
@@ -1233,7 +1232,7 @@ const StyledCard$1 = styled__default["default"](SpecialCard) `
 `;
 const ServiceCard = (props) => {
     const { serviceIcon, serviceTitle, serviceSubtitle } = props;
-    return (jsxRuntime.jsxs(StyledCard$1, Object.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((button) => 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, Object.assign({ justifyContent: "start", wrap: true }, { children: props.tags.map((tag, index) => (jsxRuntime.jsxs(StyledTag$1, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index))) })))] })] })));
+    return (jsxRuntime.jsxs(StyledCard$1, Object.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((button) => 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, Object.assign({ justifyContent: "start", wrap: true }, { children: props.tags.map((tag, index) => (jsxRuntime.jsxs(StyledTag$1, Object.assign({ size: "large" }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index))) })))] })] })));
 };
 
 const ButtonsWrap = styled__default["default"].div `
@@ -3747,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;
 `;
@@ -3759,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;
 
@@ -3820,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};
@@ -3830,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;
@@ -3858,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 `
@@ -3867,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;
@@ -3880,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;
@@ -3888,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>
@@ -3901,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.78",
+  "version": "2.12.80",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",