@appquality/unguess-design-system 2.10.37 → 2.10.38

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.10.38 (Mon May 23 2022)
+
+#### 🐛 Bug Fix
+
+- feat(sidebar): add features flag to sidebar item [#61](https://github.com/AppQuality/unguess-design-system/pull/61) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.37 (Thu May 19 2022)
 
 #### 🐛 Bug Fix

package/build/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const FEATURE_FLAG_EXPRESS = "exploratory-express";
+export declare const FEATURE_FLAG_SKY_JOTFORM = "sky-custom-jotform";
+export declare const FEATURE_FLAG_CATALOG = "catalog-pages";

package/build/index.js

@@ -2081,6 +2081,8 @@ var LoadingSidebar = function (props) {
 };
 var templateObject_1$l;
 
+var FEATURE_FLAG_CATALOG = 'catalog-pages';
+
 var TokenContainer = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var ScrollingContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"])));
 var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  ", ";\n\n  &:hover,\n  &:focus {\n    background-color: white;\n  }\n"], ["\n  ", ";\n\n  &:hover,\n  &:focus {\n    background-color: white;\n  }\n"])), function (_a) {
@@ -2096,6 +2098,7 @@ var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$9 || (t
  */
 var Sidebar = function (props) {
     var _a = React.useState(props.currentRoute || "home"), nav = _a[0], setNav = _a[1];
+    var features = props.features;
     var showWorkspacesDropdown = window.matchMedia("only screen and (max-width: ".concat(theme.breakpoints.sm, ")")).matches;
     var toggleNav = function () {
         props.onToggleMenu && props.onToggleMenu();
@@ -2105,10 +2108,18 @@ var Sidebar = function (props) {
         props.onNavToggle && props.onNavToggle(route, parameter);
         setNav(fullRoute);
     };
-    var padding = props.tokens ? {
-        paddingBottom: 0
-    } : {};
-    return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown && props.workspaces && props.workspaces.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledNavItem, __assign({ 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(NavDivider, { isExpanded: props.isExpanded, style: { order: 0 } }))] })), props.tokens && (jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, 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, 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" })] })), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "templates", onClick: function () { return navigate("templates"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "templates" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Templates" })] })), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
+    var padding = props.tokens
+        ? {
+            paddingBottom: 0,
+        }
+        : {};
+    return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown &&
+                props.workspaces &&
+                props.workspaces.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledNavItem, __assign({ 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(NavDivider, { isExpanded: props.isExpanded, style: { order: 0 } }))] })), props.tokens && (jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, 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, 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" })] })), features &&
+                features.find(function (feature) { return feature.slug === FEATURE_FLAG_CATALOG; }) && (jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "templates", onClick: function () { return navigate("templates"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "templates" ? (jsxRuntime.jsx(SvgTemplatesActive, {})) : (jsxRuntime.jsx(SvgTemplates, {})) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Templates" })] }))), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
                     props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ 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)); }) }), 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" })] }))] })));
 };
 var templateObject_1$k, templateObject_2$b, templateObject_3$9;

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

@@ -1,5 +1,14 @@
 import { WorkspaceDropdownArgs } from "../header/header-item/_types";
 import { NavArgs } from "../nav/_types";
+export interface ProjectItem {
+    id: string;
+    title: string;
+    campaigns: string;
+}
+export interface FeatureItem {
+    slug: string;
+    name: string;
+}
 export interface SidebarArgs extends NavArgs, WorkspaceDropdownArgs {
     projects?: Array<ProjectItem>;
     currentRoute?: string;
@@ -12,9 +21,5 @@ export interface SidebarArgs extends NavArgs, WorkspaceDropdownArgs {
     onToggleMenu?: () => void;
     onNavToggle?: (route: string, parameter?: string) => void;
     isLoading?: boolean;
-}
-export interface ProjectItem {
-    id: string;
-    title: string;
-    campaigns: string;
+    features?: Array<FeatureItem>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.37",
+  "version": "2.10.38",
   "dependencies": {
     "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",