@appquality/unguess-design-system 2.12.73 → 2.12.74

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# v2.12.74 (Wed Feb 22 2023)
+
+#### 🐛 Bug Fix
+
+- Tag colors & Page Header layout [#210](https://github.com/AppQuality/unguess-design-system/pull/210) ([@marcbon](https://github.com/marcbon) [@iacopolea](https://github.com/iacopolea))
+- Un 532 page layout [#209](https://github.com/AppQuality/unguess-design-system/pull/209) ([@marcbon](https://github.com/marcbon))
+- feat(Tag): add color prop and some default style [#208](https://github.com/AppQuality/unguess-design-system/pull/208) ([@iacopolea](https://github.com/iacopolea))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.73 (Thu Feb 09 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -600,9 +600,32 @@ const ContainerCard = (props) => jsxRuntime.jsx(UgContainerCard, Object.assign({
  * Not for this:
     - To prompt an action by the user, use a Button instead
  */
-const Tag = (props) => jsxRuntime.jsx(reactTags.Tag, Object.assign({}, props));
-Tag.Avatar = reactTags.Tag.Avatar;
-Tag.Close = reactTags.Tag.Close;
+const StyledAvatar = styled__default["default"](reactTags.Tag.Avatar) ``;
+const StyledClose = styled__default["default"](reactTags.Tag.Close) ``;
+const StyledTag$4 = styled__default["default"](reactTags.Tag) `
+      ${(p) => p.color &&
+    `
+          color: ${p.color};
+          ${StyledClose} {
+             color: ${p.color};
+          }
+          &:hover {
+            color: ${p.color};
+             ${StyledClose} {
+                color: ${p.color};
+             }
+          }
+       `}
+      ${StyledAvatar} {
+        border-radius: 0%;
+      }
+    `;
+const Tag = (_a) => {
+    var { isPill = true, hue = theme.palette.grey[200], color = theme.palette.grey[700] } = _a, props = __rest(_a, ["isPill", "hue", "color"]);
+    return (jsxRuntime.jsx(StyledTag$4, Object.assign({ isPill: props.isRound ? false : isPill, hue: hue, color: color }, props)));
+};
+Tag.Avatar = StyledAvatar;
+Tag.Close = StyledClose;
 
 var _g$7, _path$z;
 function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
@@ -3750,7 +3773,6 @@ const MainContainer = styled__default["default"].div `
   width: 100%;
 `;
 const InformationContainer = styled__default["default"].div `
-  padding: ${({ theme }) => theme.space.xs}; 0;
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -3815,28 +3837,15 @@ 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 }) }) })))] }) }));
 };
 
-const PageContainer = styled__default["default"].div `
-  background-color: ${({ theme }) => theme.palette.white};
-`;
 const StyledPageHeader = styled__default["default"].div `
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: ${({ theme }) => `${theme.space.xxl} ${theme.space.xxl} ${theme.space.md}`};
+  padding: ${({ theme }) => theme.space.sm} 0;
   box-sizing: border-box;
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[200]};
-
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    padding: ${({ theme }) => `${theme.space.md} ${theme.space.md} ${theme.space.xs}`};
-  }
-
-  max-width: ${({ theme }) => theme.breakpoints.xxl};
-
-  @media (min-width: ${({ theme }) => theme.breakpoints.xxl}) {
-    margin: 0 auto;
-  }
 `;
 const PullLeft = styled__default["default"].div `
   display: flex;
@@ -3845,8 +3854,7 @@ const PullLeft = styled__default["default"].div `
   justify-content: flex-start;
   flex-wrap: wrap;
   width: 100%;
-  padding: ${({ theme }) => `${theme.space.xs} 10px`};
-  margin-bottom: ${({ theme }) => theme.space.xs};
+  margin-bottom: ${({ theme }) => theme.space.sm};
 `;
 const ButtonContainer = styled__default["default"].div `
   display: flex;
@@ -3868,9 +3876,7 @@ const Buttons = (props) => (jsxRuntime.jsx(ButtonContainer, Object.assign({}, pr
     - Display page informations and meta data
     - As a container for the top part of the page
  */
-const PageHeader = (props) => {
-    return (jsxRuntime.jsx(PageContainer, { children: jsxRuntime.jsx(StyledPageHeader, Object.assign({}, props)) }));
-};
+const PageHeader = (props) => jsxRuntime.jsx(StyledPageHeader, Object.assign({}, props));
 PageHeader.Breadcrumb = StyledBreadcrumb;
 PageHeader.Main = Main;
 PageHeader.Buttons = Buttons;

package/build/stories/counter/index.d.ts

@@ -5,9 +5,9 @@ import { CounterArgs } from "./_types";
  */
 declare const Counter: {
     (props: CounterArgs): JSX.Element;
-    Avatar: {
+    Avatar: import("styled-components").StyledComponent<{
         (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
         displayName: string;
-    };
+    }, any, {}, never>;
 };
 export { Counter };

package/build/stories/counter/index.stories.d.ts

@@ -7,9 +7,9 @@ interface TagStoryProps extends CounterArgs {
 export declare const Default: Story<TagStoryProps>;
 declare const _default: ComponentMeta<{
     (props: CounterArgs): JSX.Element;
-    Avatar: {
+    Avatar: import("styled-components").StyledComponent<{
         (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
         displayName: string;
-    };
+    }, any, {}, never>;
 }>;
 export default _default;

package/build/stories/tags/_types.d.ts

@@ -3,11 +3,17 @@ export interface TagArgs extends ITagProps {
     /** Adjusts font size and padding */
     size?: 'small' | 'medium' | 'large';
     /**
-     * Sets the color of the tag. Refer to
-     * [PALETTE](/components/palette#palette)
-     * for available colors. Accepts any hex value.
-     */
+   * Sets the color of the tag. Refer to
+   * [PALETTE](/components/palette#palette)
+   * for available colors. Accepts any hex value.
+   */
     hue?: string;
+    /**
+   * Sets the color of the tag. Refer to
+   * [PALETTE](/components/palette#palette)
+   * for available colors. Accepts any hex value.
+   */
+    color?: string;
     /** Applies pill styling */
     isPill?: boolean;
     /** Applies styles to round the tag */

package/build/stories/tags/index.d.ts

@@ -1,22 +1,11 @@
 /// <reference types="react" />
 import { TagArgs } from "./_types";
-/**
- * Tags let users categorize content using a keyword.
-
- * Used for this:
-    - To add metadata to an element such as category, attribute, or property
-    - To communicate status
-    - To represent parameters of a filter
-
- * Not for this:
-    - To prompt an action by the user, use a Button instead
- */
 declare const Tag: {
-    (props: TagArgs): JSX.Element;
-    Avatar: {
+    ({ isPill, hue, color, ...props }: TagArgs): JSX.Element;
+    Avatar: import("styled-components").StyledComponent<{
         (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
         displayName: string;
-    };
-    Close: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    }, any, {}, never>;
+    Close: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 };
 export { Tag };

package/build/stories/tags/index.stories.d.ts

@@ -9,11 +9,11 @@ export declare const Default: Story<TagStoryProps>;
 export declare const Avatar: Story<TagStoryProps>;
 export declare const Close: Story<TagStoryProps>;
 declare const _default: ComponentMeta<{
-    (props: TagArgs): JSX.Element;
-    Avatar: {
+    ({ isPill, hue, color, ...props }: TagArgs): JSX.Element;
+    Avatar: import("styled-components").StyledComponent<{
         (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
         displayName: string;
-    };
-    Close: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    }, any, {}, never>;
+    Close: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 }>;
 export default _default;

package/package.json

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