@appquality/unguess-design-system 2.12.11 → 2.12.12

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.12.12 (Tue Sep 27 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(sidebar): add projectAccordion scroll ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.11 (Wed Sep 21 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -2031,10 +2031,7 @@ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject
     var theme = _a.theme;
     return theme.space.xs;
 });
-var NavItem = function (props) {
-    // const { isExpanded } = props;
-    return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
-};
+var NavItem = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem$2, __assign({ ref: ref }, props)); });
 var templateObject_1$w, templateObject_2$h;
 
 var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
@@ -2113,7 +2110,8 @@ var UgNavItem = styled__default["default"](NavItem)(templateObject_2$g || (templ
     var theme = _a.theme;
     return theme.space.xxl;
 });
-var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
+var NavItemComponent = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem, __assign({ ref: ref }, props)); });
+var NavItemProject = NavItemComponent;
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
 var templateObject_1$s, templateObject_2$g;
@@ -2342,6 +2340,7 @@ var SidebarLabel = styled__default["default"](SM)(templateObject_4$9 || (templat
 var Sidebar = function (_a) {
     var projects = _a.projects, _b = _a.defaultAccordionPanels, defaultAccordionPanels = _b === void 0 ? [0] : _b, props = __rest(_a, ["projects", "defaultAccordionPanels"]);
     var _c = React.useState(props.currentRoute || "home"), nav = _c[0], setNav = _c[1];
+    var prjRef = React.useRef(null);
     var showWorkspacesDropdown = window.matchMedia("only screen and (max-width: ".concat(theme.breakpoints.sm, ")")).matches;
     var toggleNav = function () {
         props.onToggleMenu && props.onToggleMenu();
@@ -2356,9 +2355,18 @@ var Sidebar = function (_a) {
             paddingBottom: 0,
         }
         : {};
+    React.useEffect(function () {
+        var _a;
+        if (prjRef && prjRef.current && props.isExpanded) {
+            (_a = prjRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: "auto",
+                block: "end"
+            });
+        }
+    }, [props.isExpanded]);
     return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsxs(ScrollingContainer, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown &&
                         props.workspaces &&
-                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, __assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(AccordionItem, __assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded }, { children: jsxRuntime.jsxs(AccordionItem.Section, { children: [jsxRuntime.jsx(AccordionItem.Header, { children: jsxRuntime.jsxs(AccordionItem.Label, { children: [props.dividerLabel || "", " ", jsxRuntime.jsx(SvgFolderIcon, { style: { marginLeft: theme.space.xs } })] }) }), jsxRuntime.jsx(AccordionItem.Panel, { children: projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) })] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); }, style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, __assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: {
+                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, __assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(AccordionItem, __assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded }, { children: jsxRuntime.jsxs(AccordionItem.Section, { children: [jsxRuntime.jsx(AccordionItem.Header, { children: jsxRuntime.jsxs(AccordionItem.Label, { children: [props.dividerLabel || "", " ", jsxRuntime.jsx(SvgFolderIcon, { style: { marginLeft: theme.space.xs } })] }) }), jsxRuntime.jsx(AccordionItem.Panel, { children: projects.map(function (project, index) { return (jsxRuntime.jsxs(NavItemProject, __assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id) }, (nav === "projects/".concat(project.id) && { ref: prjRef }), { onClick: function () { return navigate("projects", project.id); } }, (index === projects.length - 1 && { style: { marginBottom: 61 } }), { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) })] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); }, style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, __assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: {
                                                     marginLeft: theme.space.xs,
                                                     color: theme.palette.grey[800],
                                                 } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] }))] }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));

package/build/stories/navigation/nav/nav-item/navItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavItemArgs } from "./_types";
-declare const NavItem: (props: NavItemArgs) => JSX.Element;
+declare const NavItem: import("react").ForwardRefExoticComponent<NavItemArgs & import("react").RefAttributes<HTMLButtonElement>>;
 export { NavItem };

package/build/stories/navigation/nav/nav-item/navItemProject.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { NavItemArgs } from "./_types";
-declare const NavItemProject: {
-    (props: NavItemArgs): JSX.Element;
-    Title: (props: import("./_types").NavItemTextArgs) => JSX.Element;
-    SubTitle: import("styled-components").StyledComponent<(props: import("./_types").NavItemTextArgs) => JSX.Element, any, NavItemArgs, never>;
+import { NavItemText } from "./navItemText";
+declare const UgProjectSubtitle: import("styled-components").StyledComponent<(props: import("./_types").NavItemTextArgs) => JSX.Element, any, NavItemArgs, never>;
+declare const NavItemProject: import("react").ForwardRefExoticComponent<NavItemArgs & import("react").RefAttributes<HTMLButtonElement>> & {
+    Title: typeof NavItemText;
+    SubTitle: typeof UgProjectSubtitle;
 };
 export { NavItemProject };

package/build/stories/navigation/sidebar/index.stories.d.ts

@@ -3,6 +3,7 @@ import { SidebarArgs } from "./_types";
 interface SidebarStoryArgs extends SidebarArgs {
 }
 export declare const Default: Story<SidebarStoryArgs>;
+export declare const SingleProject: Story<SidebarStoryArgs>;
 export declare const MultipleWorkspaces: Story<SidebarStoryArgs>;
 export declare const WithTokens: Story<SidebarStoryArgs>;
 export declare const WithAll: Story<SidebarStoryArgs>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.11",
+  "version": "2.12.12",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",