@appquality/unguess-design-system 3.1.1 → 3.1.2-nav-beta

package/CHANGELOG.md

@@ -1,35 +1,3 @@
-# v3.0.5 (Wed May 31 2023)
-
-#### 🐛 Bug Fix
-
-- Colors [#253](https://github.com/AppQuality/unguess-design-system/pull/253) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks) [@iacopolea](https://github.com/iacopolea))
-- Un 616 colors [#236](https://github.com/AppQuality/unguess-design-system/pull/236) ([@iacopolea](https://github.com/iacopolea))
-- Update rollup configuration [#252](https://github.com/AppQuality/unguess-design-system/pull/252) ([@cannarocks](https://github.com/cannarocks))
-- 🎨 style(input-toggle): remove width property from EditIcon component to allow for dynamic sizing [#250](https://github.com/AppQuality/unguess-design-system/pull/250) ([@marcbon](https://github.com/marcbon))
-
-#### Authors: 3
-
-- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
-- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
-- Marco Bonomo ([@marcbon](https://github.com/marcbon))
-
----
-
-# v3.0.4 (Wed May 17 2023)
-
-#### 🐛 Bug Fix
-
-- Fix SVGR issues [#249](https://github.com/AppQuality/unguess-design-system/pull/249) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
-- Fix-svgr-viewbox [#248](https://github.com/AppQuality/unguess-design-system/pull/248) ([@marcbon](https://github.com/marcbon))
-- 🎨 style(tabs/index.tsx): add overflow-x hidden to StyledTabPanel [#247](https://github.com/AppQuality/unguess-design-system/pull/247) ([@marcbon](https://github.com/marcbon))
-
-#### Authors: 2
-
-- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
-- Marco Bonomo ([@marcbon](https://github.com/marcbon))
-
----
-
 # v3.0.3 (Fri May 12 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -3359,6 +3359,48 @@ const NavItemProject = NavItemComponent;
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
 
+const NavAccordionItem = styled__default["default"](Accordion) `
+  opacity: 1;
+  ${sidebarNavItemExpanded}
+  ${(props) => !props.isExpanded && sidebarNavItemHidden}
+  order: 1;
+  margin-top: ${({ theme }) => theme.space.xs}px;
+`;
+const AccordionItemHeader = styled__default["default"](Accordion.Header) `
+  flex-direction: row;
+  border-top-left-radius: ${({ theme }) => theme.space.base * 6}px;
+  border-bottom-left-radius: ${({ theme }) => theme.space.base * 6}px;
+
+  > button {
+    padding-right: 2px;
+  }
+
+  svg {
+    width: 26px;
+  }
+`;
+const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
+  max-height: 180px;
+  padding: 0;
+  padding-left: 5px;
+  overflow-y: hidden;
+  opacity: 1;
+  &:hover {
+    overflow-y: auto;
+  }
+`;
+const AccordionItemLabel = styled__default["default"](Accordion.Label) `
+  padding: 12px 9px;
+  ${({ theme }) => `
+    fill: ${getColor(theme.colors.primaryHue, 600)};
+    font-weight: ${theme.fontWeights.medium};
+  `}
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
+`;
+NavAccordionItem.Panel = AccordionItemPanel;
+NavAccordionItem.Header = AccordionItemHeader;
+NavAccordionItem.Label = AccordionItemLabel;
+
 var _path$j;
 function _extends$m() { _extends$m = 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$m.apply(this, arguments); }
 var SvgHomeFill = function SvgHomeFill(props) {
@@ -3440,17 +3482,19 @@ var SvgToken = function SvgToken(props) {
 
 var _path$h;
 function _extends$j() { _extends$j = 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$j.apply(this, arguments); }
-var SvgFolderIcon = function SvgFolderIcon(props) {
+var SvgProjectsIcon = function SvgProjectsIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
+    width: 22,
+    height: 22,
+    viewBox: "0 0 22 22",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M9.99976 4H6.99976V3.5C6.99976 2.62386 6.3759 2 5.49976 2H2.49976C1.62362 2 0.999758 2.62386 0.999758 3.5V6H0.499758C0.174472 6 -0.0642066 6.30569 0.0146868 6.62127L1.01469 10.6213C1.07033 10.8439 1.27032 11 1.49976 11H10.4998C10.7292 11 10.9292 10.8439 10.9848 10.6213L11.9848 6.62127C12.0637 6.30569 11.825 6 11.4998 6H10.9998V5C10.9998 4.42386 10.5759 4 9.99976 4ZM10.8594 7H1.14015L1.89015 10H10.1094L10.8594 7ZM1.99976 6H9.99976V5H5.99976V3.5C5.99976 3.17614 5.82362 3 5.49976 3H2.49976C2.1759 3 1.99976 3.17614 1.99976 3.5V6Z",
-    fill: "currentColor"
+    d: "M18.5 5H12.25V4.375C12.25 3.34232 11.4077 2.5 10.375 2.5H4.125C3.09232 2.5 2.25 3.34232 2.25 4.375V10.005C1.53426 10.0685 1.01354 10.7329 1.1335 11.4527L2.171 17.7027C2.27098 18.3026 2.79293 18.75 3.4 18.75H18.6C19.2071 18.75 19.729 18.3026 19.829 17.7027L20.8666 11.4523C20.9865 10.7329 20.4657 10.0685 19.75 10.005V6.25C19.75 5.55482 19.1952 5 18.5 5ZM19.633 11.25H2.36695L3.404 17.4973C3.40404 17.4974 18.6 17.5 18.6 17.5C18.5929 17.5 19.633 11.25 19.633 11.25ZM3.5 10H18.5V6.25H11V4.375C11 4.03268 10.7173 3.75 10.375 3.75H4.125C3.78268 3.75 3.5 4.03268 3.5 4.375V10Z",
+    fill: "#336179",
+    stroke: "#336179"
   })));
 };
 
@@ -3521,48 +3565,6 @@ const LoadingSidebar = (props) => {
     return (jsxRuntime.jsxs(StyledNav, Object.assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 4), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
 };
 
-const AccordionItem = styled__default["default"](Accordion) `
-  opacity: 1;
-  ${sidebarNavItemExpanded}
-  ${(props) => !props.isExpanded && sidebarNavItemHidden}
-  order: 1;
-  margin-top: ${({ theme }) => theme.space.xs}px;
-`;
-const AccordionItemHeader = styled__default["default"](Accordion.Header) `
-  flex-direction: row-reverse;
-  border-top-left-radius: ${({ theme }) => theme.space.base * 6}px;
-  border-bottom-left-radius: ${({ theme }) => theme.space.base * 6}px;
-
-  > button {
-    padding-left: 2px;
-  }
-
-  svg {
-    width: 26px;
-  }
-`;
-const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
-  max-height: 180px;
-  padding: 0;
-  padding-left: 5px;
-  overflow-y: hidden;
-  opacity: 1;
-  &:hover {
-    overflow-y: auto;
-  }
-`;
-const AccordionItemLabel = styled__default["default"](Accordion.Label) `
-  padding: 12px 9px;
-  ${({ theme }) => `
-    fill: ${getColor(theme.colors.primaryHue, 600)};
-    font-weight: ${theme.fontWeights.medium};
-  `}
-  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
-`;
-AccordionItem.Panel = AccordionItemPanel;
-AccordionItem.Header = AccordionItemHeader;
-AccordionItem.Label = AccordionItemLabel;
-
 const TokenContainer = styled__default["default"].div `
   display: flex;
   align-items: center;
@@ -3631,7 +3633,7 @@ const Sidebar = (_a) => {
     }, [props.isExpanded]);
     return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, Object.assign({}, props))) : (jsxRuntime.jsxs(Nav, Object.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, Object.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, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.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, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { 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((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => 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, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.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, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
+                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, Object.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, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.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(NavAccordionItem, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { children: jsxRuntime.jsxs(NavAccordionItem.Section, { children: [jsxRuntime.jsxs(NavAccordionItem.Header, { children: [jsxRuntime.jsx(SvgProjectsIcon, { style: { marginLeft: theme.space.xs } }), jsxRuntime.jsxs(NavAccordionItem.Label, { children: [props.dividerLabel || "", " "] })] }), jsxRuntime.jsx(NavAccordionItem.Panel, { children: projects.map((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => 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, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.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, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
                                                     marginLeft: theme.space.xs,
                                                     color: theme.palette.grey[800],
                                                 } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] }))] }), jsxRuntime.jsxs(NavItem, Object.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" })] }))] })));
@@ -5661,6 +5663,7 @@ exports.Modal = Modal;
 exports.ModalFullScreen = ModalFullScreen;
 exports.MultiSelect = MultiSelect;
 exports.Nav = Nav;
+exports.NavAccordionItem = NavAccordionItem;
 exports.NavDivider = NavDivider;
 exports.NavItem = NavItem;
 exports.NavItemIcon = NavItemIcon;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { AccordionArgs } from "../../../accordions/_types";
 import { NavItemArgs } from "./_types";
-declare const AccordionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
+declare const NavAccordionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
     Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
     Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 }, import("styled-components").DefaultTheme, AccordionArgs & NavItemArgs, never>;
-export { AccordionItem };
+export { NavAccordionItem };

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

@@ -4,4 +4,5 @@ import { NavItemText } from "./navItemText";
 import { NavToggle } from "./navToggle";
 import { NavDivider } from "./navDivider";
 import { NavItemProject } from "./navItemProject";
-export { NavItem, NavItemIcon, NavItemText, NavToggle, NavDivider, NavItemProject };
+import { NavAccordionItem } from "./accordionItem";
+export { NavItem, NavItemIcon, NavItemText, NavToggle, NavDivider, NavItemProject, NavAccordionItem, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.1",
+  "version": "3.1.2-nav-beta",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",