@appquality/unguess-design-system 2.12.47 → 2.12.49

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# v2.12.49 (Mon Dec 12 2022)
+
+#### 🐛 Bug Fix
+
+- Update Breadcrumb children type in order to support single children cases [#150](https://github.com/AppQuality/unguess-design-system/pull/150) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.12.48 (Mon Dec 12 2022)
+
+#### 🐛 Bug Fix
+
+- Fix bullet charts and improve responsiveness on breadcrumbs [#149](https://github.com/AppQuality/unguess-design-system/pull/149) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+- feat(app-header): add onclick on header item icon [#148](https://github.com/AppQuality/unguess-design-system/pull/148) ([@marcbon](https://github.com/marcbon))
+- feat(breadcrumbs): add responsive behavior + remove last item from story (new desktop behavior) [#147](https://github.com/AppQuality/unguess-design-system/pull/147) ([@marcbon](https://github.com/marcbon))
+- fix(bullet): UN-209 animate measue component [#146](https://github.com/AppQuality/unguess-design-system/pull/146) ([@iacopolea](https://github.com/iacopolea))
+
+#### Authors: 3
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.47 (Wed Dec 07 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -266,10 +266,10 @@ var isMac = function () {
     var os = parser.getOS().name;
     return os && /Mac OS|iOS/.test(os);
 };
-styled.css(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n  transition: opacity 0.2s ease;\n"], ["\n  transition: opacity 0.2s ease;\n"])));
+styled.css(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n  transition: opacity 0.2s ease;\n"], ["\n  transition: opacity 0.2s ease;\n"])));
 var sidebarNavItemExpanded = styled.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  visibility: visible;\n  opacity: 1;\n  // transition: opacity 0.2s ease;\n"], ["\n  visibility: visible;\n  opacity: 1;\n  // transition: opacity 0.2s ease;\n"])));
 var sidebarNavItemHidden = styled.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  visibility: hidden;\n  pointer-events: none;\n  color: transparent;\n"], ["\n  visibility: hidden;\n  pointer-events: none;\n  color: transparent;\n"])));
-var templateObject_1$1q, templateObject_2$A, templateObject_3$n;
+var templateObject_1$1r, templateObject_2$A, templateObject_3$n;
 
 var gradients = {
     horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
@@ -295,8 +295,8 @@ var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __
         modal: 200,
     } });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
-var templateObject_1$1p;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
+var templateObject_1$1q;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -312,7 +312,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
-var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"])), function (_a) {
+var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 }, function (_a) {
@@ -333,9 +333,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
 var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
 Alert.Title = UgAlertTitle;
 Alert.Close = reactNotifications.Close;
-var templateObject_1$1o, templateObject_2$z;
+var templateObject_1$1p, templateObject_2$z;
 
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  text-transform: uppercase;\n\n  ", "\n"], ["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n  text-transform: uppercase;\n\n  ", "\n"], ["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
     return props.avatarType &&
         props.avatarType !== "image" &&
         "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -359,7 +359,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$1n;
+var templateObject_1$1o;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -368,7 +368,21 @@ var templateObject_1$1n;
     - To show the user where they are in a nested navigation
     - To provide a quick way to navigate to ancestor pages
  */
-var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Breadcrumb, __assign({}, props)); };
+var StyledBreadcrumb$1 = styled__default["default"](reactBreadcrumbs.Breadcrumb)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    > ol {\n      display: block;\n\n      > li {\n        display: none;\n\n        &:nth-last-child(", ") {\n          display: block;\n          width: 100%;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          position: relative;\n          padding-left: ", "px;\n\n          &::before {\n            content: \"<\";\n            position: absolute;\n            left: 0;\n          }\n        }\n      }\n    }\n  }\n"], ["\n  @media (max-width: ", ") {\n    > ol {\n      display: block;\n\n      > li {\n        display: none;\n\n        &:nth-last-child(", ") {\n          display: block;\n          width: 100%;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          position: relative;\n          padding-left: ", "px;\n\n          &::before {\n            content: \"<\";\n            position: absolute;\n            left: 0;\n          }\n        }\n      }\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.md;
+}, function (_a) {
+    var showLastArrow = _a.showLastArrow;
+    return (showLastArrow ? 3 : 1);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 4;
+});
+var Breadcrumb = function (_a) {
+    var children = _a.children, _b = _a.showLastArrow, showLastArrow = _b === void 0 ? true : _b, props = __rest(_a, ["children", "showLastArrow"]);
+    return showLastArrow ? (jsxRuntime.jsxs(StyledBreadcrumb$1, __assign({}, props, { showLastArrow: true }, { children: [children, jsxRuntime.jsx("div", {})] }))) : (jsxRuntime.jsx(StyledBreadcrumb$1, __assign({}, props, { children: children })));
+};
+var templateObject_1$1n;
 
 /**
  * The Anchor is a link that helps users navigate from one location to another.
@@ -1153,7 +1167,7 @@ var CustomBulletChartMarkers = function (_a) {
 
 var CustomMeasure = function (_a) {
     var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
-    return (jsxRuntime.jsx("rect", { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: CHARTS_COLOR_PALETTE.darkGrey }));
+    return (jsxRuntime.jsx(web.animated.rect, { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: CHARTS_COLOR_PALETTE.darkGrey }));
 };
 
 var CustomTooltip = function (_a) {
@@ -2439,7 +2453,7 @@ var WorkspacesDropdown = function (props) {
 };
 var templateObject_1$D;
 
-var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"], ["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"])), function (_a) {
+var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  margin-right: 2px;\n  border-right: none;\n  cursor: pointer;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"], ["\n  margin-right: 2px;\n  border-right: none;\n  cursor: pointer;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.md;
 });
@@ -2471,7 +2485,8 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
     return theme.breakpoints.md;
 });
 var BrandItem = function (props) {
-    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 }) }))) }))] }));
+    var menuLabel = props.menuLabel, toggleMenu = props.toggleMenu, rest = __rest(props, ["menuLabel", "toggleMenu"]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({ onClick: toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), menuLabel && jsxRuntime.jsx(HeaderItemText, { children: menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, rest, { 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 }) }))) }))] }));
 };
 var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
 

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export interface BreadcrumbArgs extends React.HTMLAttributes<HTMLDivElement> {
     /** The breadcrumb items */
-    children: any[];
+    children: React.ReactNode | React.ReactNode[];
+    /** Show/hide last arrow */
+    showLastArrow?: boolean;
 }

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

@@ -1,10 +1,3 @@
-import { BreadcrumbArgs } from './_types';
-/**
- * Breadcrumbs mark and communicate a user’s location in the product.
- * <hr>
- * Used for this:
-    - To show the user where they are in a nested navigation
-    - To provide a quick way to navigate to ancestor pages
- */
-declare const Breadcrumb: (props: BreadcrumbArgs) => JSX.Element;
+import { BreadcrumbArgs } from "./_types";
+declare const Breadcrumb: ({ children, showLastArrow, ...props }: BreadcrumbArgs) => JSX.Element;
 export { Breadcrumb };

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

@@ -1,5 +1,12 @@
 import { ComponentMeta, Story } from "@storybook/react";
+import { AnchorArgs } from "../buttons/anchor/_types";
 import { BreadcrumbArgs } from "./_types";
-export declare const Default: Story<BreadcrumbArgs>;
-declare const _default: ComponentMeta<(props: BreadcrumbArgs) => JSX.Element>;
+interface StoryArgs extends BreadcrumbArgs {
+    items: AnchorArgs & {
+        children: string;
+        onClick: () => void;
+    }[];
+}
+export declare const Default: Story<StoryArgs>;
+declare const _default: ComponentMeta<({ children, showLastArrow, ...props }: BreadcrumbArgs) => JSX.Element>;
 export default _default;

package/package.json

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