@appquality/unguess-design-system 2.12.8 → 2.12.10

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v2.12.10 (Tue Sep 20 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- fix(sidebar): move out prj accordion panel setting ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.12.9 (Tue Sep 20 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- add ref to accordion component ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.8 (Tue Sep 20 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -8,11 +8,11 @@ var reactTheming = require('@zendeskgarden/react-theming');
 var UAParser = require('ua-parser-js');
 var jsxRuntime = require('react/jsx-runtime');
 var reactAccordions = require('@zendeskgarden/react-accordions');
+var React = require('react');
 var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactAvatars = require('@zendeskgarden/react-avatars');
 var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
 var reactButtons = require('@zendeskgarden/react-buttons');
-var React = require('react');
 var reactTags = require('@zendeskgarden/react-tags');
 var reactLoaders = require('@zendeskgarden/react-loaders');
 var reactTypography = require('@zendeskgarden/react-typography');
@@ -277,7 +277,8 @@ var templateObject_1$1i;
     - To organize related information into sections
     - To surface information through progressive disclosure
  */
-var Accordion = function (props) { return jsxRuntime.jsx(reactAccordions.Accordion, __assign({}, props)); };
+var AccordionComponent = React.forwardRef(function (props, ref) { return (jsxRuntime.jsx(reactAccordions.Accordion, __assign({ ref: ref }, props))); });
+var Accordion = AccordionComponent;
 Accordion.Section = reactAccordions.Accordion.Section;
 Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
@@ -2333,8 +2334,8 @@ var SidebarLabel = styled__default["default"](SM)(templateObject_4$9 || (templat
     - To give a consistent dashboard and navigation experience
  */
 var Sidebar = function (_a) {
-    var projects = _a.projects, props = __rest(_a, ["projects"]);
-    var _b = React.useState(props.currentRoute || "home"), nav = _b[0], setNav = _b[1];
+    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 showWorkspacesDropdown = window.matchMedia("only screen and (max-width: ".concat(theme.breakpoints.sm, ")")).matches;
     var toggleNav = function () {
         props.onToggleMenu && props.onToggleMenu();
@@ -2351,7 +2352,7 @@ var Sidebar = function (_a) {
         : {};
     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, expandedSections: [0], 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) { 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: {
                                                     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/accordions/index.d.ts

@@ -1,17 +1,9 @@
 /// <reference types="react" />
-import { AccordionArgs } from './_types';
-/**
- * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
- * <hr>
- * Used for this:
-    - To organize related information into sections
-    - To surface information through progressive disclosure
- */
-declare const Accordion: {
-    (props: AccordionArgs): JSX.Element;
-    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 { Accordion as ZendeskAccordion } from "@zendeskgarden/react-accordions";
+import { AccordionArgs } from "./_types";
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
+    Section: typeof ZendeskAccordion.Section;
+    Header: typeof ZendeskAccordion.Header;
+    Label: typeof ZendeskAccordion.Label;
+    Panel: typeof ZendeskAccordion.Panel;
 };
-export { Accordion };

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

@@ -11,8 +11,7 @@ export declare const Default: Story<AccordionStoryArg>;
 export declare const Bare: Story<AccordionStoryArg>;
 export declare const Expandable: Story<AccordionStoryArg>;
 export declare const Compact: Story<AccordionStoryArg>;
-declare const _default: ComponentMeta<{
-    (props: AccordionArgs): JSX.Element;
+declare const _default: ComponentMeta<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>>;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { AccordionArgs } from "../../../accordions/_types";
 import { NavItemArgs } from "./_types";
-declare const AccordionItem: import("styled-components").StyledComponent<{
-    (props: AccordionArgs): JSX.Element;
+declare const AccordionItem: 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>>;

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

@@ -24,4 +24,5 @@ export interface SidebarArgs extends NavArgs, WorkspaceDropdownArgs {
     onNavToggle?: (route: string, parameter?: string) => void;
     isLoading?: boolean;
     features?: Array<FeatureItem>;
+    defaultAccordionPanels?: Array<number>;
 }

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

@@ -5,5 +5,5 @@ import { SidebarArgs } from "./_types";
  * Used for this:
     - To give a consistent dashboard and navigation experience
  */
-declare const Sidebar: ({ projects, ...props }: SidebarArgs) => JSX.Element;
+declare const Sidebar: ({ projects, defaultAccordionPanels, ...props }: SidebarArgs) => JSX.Element;
 export { Sidebar };

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

@@ -6,5 +6,5 @@ export declare const Default: Story<SidebarStoryArgs>;
 export declare const MultipleWorkspaces: Story<SidebarStoryArgs>;
 export declare const WithTokens: Story<SidebarStoryArgs>;
 export declare const WithAll: Story<SidebarStoryArgs>;
-declare const _default: ComponentMeta<({ projects, ...props }: SidebarArgs) => JSX.Element>;
+declare const _default: ComponentMeta<({ projects, defaultAccordionPanels, ...props }: SidebarArgs) => JSX.Element>;
 export default _default;

package/package.json

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