orcs-design-system 3.3.47 → 3.3.49

package/README.md

@@ -36,15 +36,7 @@ A new browser window will open with a random localhost port. ORCS runs [Storyboo
 
 All library components and files are located in `/lib`. Static files are located in `/assets`.
 
-### Viewing changes in PM / TD.
-
-As an alternative to `npm link` you can run `npm run dist` and then copy the `es` folder directly into TD or PM:
-
-`cp -R es/ ../../../team-directory/node_modules/orcs-design-system/`
-
-**_This has now been been made easier with using Nodemon and a custom script. Read on for how to set this up._**
-
-### Working with orcs locally (hot reloading).
+### Viewing local orcs changes in other projects (with hot reloading)
 
 1. `cp .env.example .env`
 2. OPTIONAL: Update `WORKING_DIR` in `.env` if orcs resides in a different working directory to your project. Else-wise Orcs will assume the project is one level up from itself.
@@ -63,39 +55,6 @@ snapshot: {
 
 Now you can make any changes in orcs and it will build and then copy the es from the build into your project's node_modules. Run `npm install` in your project dir if you want to revert to the npm installation.
 
-### Symlinking with `npm link`
-
-##### We haven't had much success with this recently
-
-If you need to do `npm link` in your local environment you might encounter the following issues:
-
-- https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
-- https://github.com/styled-components/styled-components/issues/2379
-
-Both react and styled-components cause duplicate instance issue after npm link, to fix that we need to ensure both app project and lib project are sharing the same instance of them.
-
-In `orcs-design-system` folder:
-
-```
-npm link {PATH_APP_REPO}/node_modules/react
-npm link {PATH_APP_REPO}/node_modules/styled-components
-npm link
-```
-
-In `{PATH_APP_REPO}`:
-
-```
-npm i orcs-design-system
-npm link orcs-design-system
-npm start
-```
-
-### Testing
-
-```
-npm run test
-```
-
 ### Publishing changes
 
 In order to publish a new version, you will have to patch and push your changes.
@@ -105,11 +64,11 @@ After your changes have been merged to master, from your master branch:
 npm version patch
 ```
 
-Then create a new pull request to master with the version update.
+This will bump version patch number and make a commit to current branch.
 
 ### Deploying to GitHub Pages
 
-ORCS automatically deploys to GitHub Pages when a new version is published. To manually deploy:
+ORCS automatically deploys to GitHub Pages when a new version is published and merged to master. To manually deploy:
 
 ```
 npm run deploy-storybook
@@ -138,17 +97,11 @@ import { Box } from "orcs-design-system"
 
 The [ORCS Storybook](https://orchestrated-io.github.io/orcs-design-system) contains documentation for each component, including code examples and props tables.
 
-For components with subcomponents, each subcomponent must be imported. For example, to use `Tabs`:
-
-```
-import { TabsContainer, Tab } from "orcs-design-system"
-```
-
 ### Using Styled System props
 
-The design system components are built with [Styled System](https://styled-system.com/) props. Generally, components can access the `space` and `layout` prop categories, with additional prop categories on a per-component basis. Check the _Properties_ section in a component's documentation to see what props it can use. Custom props will be listed in the props table.
+The design system components are built with [Styled System](https://github.com/styled-system/styled-system) props. Generally, components can access the `space` and `layout` prop categories, with additional prop categories on a per-component basis. Check the _Properties_ section in a component's documentation to see what props it can use. Custom props will be listed in the props table.
 
-As a guide to using these props, see the [Styled System reference table](https://styled-system.com/table).
+As a guide to using these props, see the [Styled System reference table](https://github.com/styled-system/styled-system/blob/master/docs/table.md).
 
 The design system's theme scales are contained in [systemtheme](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js).
 

package/es/components/SideNavV2/NavItem.js

@@ -66,6 +66,27 @@ const SideNavItemWrapper = styled.div.withConfig({
     marginTop: props.bottomAligned && "auto"
   }
 }));
+
+/**
+ * NavItem - A navigation item component for the SideNavV2
+ *
+ * Renders either a button or link-based navigation item with support for:
+ * - Icons with optional badges
+ * - Expandable/collapsible states
+ * - Active state styling
+ * - Responsive behavior
+ * - Accessibility features
+ *
+ * @param {Object} props - Component props
+ * @param {Object} props.item - Navigation item data
+ * @param {React.ElementType} [props.Component] - Component to render for link items
+ * @param {boolean} props.isActive - Whether the item is currently active
+ * @param {Function} props.handleItemClick - Click handler function
+ * @param {Object} props.navItemRefs - Ref object for managing item references
+ * @param {boolean} props.isSmallScreen - Whether currently on a small screen
+ * @param {boolean} props.isExpanded - Whether the navigation is expanded
+ * @returns {JSX.Element} Rendered navigation item
+ */
 const NavItem = _ref => {
   let {
     item,
@@ -136,25 +157,98 @@ const NavItem = _ref => {
   });
 };
 NavItem.propTypes = {
-  item: PropTypes.object,
+  item: PropTypes.shape({
+    index: PropTypes.number,
+    iconName: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    actionType: PropTypes.oneOf(["component", "link", "button"]).isRequired,
+    bottomAligned: PropTypes.bool,
+    hide: PropTypes.bool,
+    component: PropTypes.elementType,
+    onClick: PropTypes.func,
+    isActive: PropTypes.bool,
+    badgeNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    badgeDot: PropTypes.bool
+  }).isRequired,
   Component: PropTypes.elementType,
   isActive: PropTypes.bool,
-  handleItemClick: PropTypes.func,
+  handleItemClick: PropTypes.func.isRequired,
   navItemRefs: PropTypes.object,
   isSmallScreen: PropTypes.bool,
   isExpanded: PropTypes.bool
 };
 NavItem.__docgenInfo = {
-  "description": "",
+  "description": "NavItem - A navigation item component for the SideNavV2\n\nRenders either a button or link-based navigation item with support for:\n- Icons with optional badges\n- Expandable/collapsible states\n- Active state styling\n- Responsive behavior\n- Accessibility features\n\n@param {Object} props - Component props\n@param {Object} props.item - Navigation item data\n@param {React.ElementType} [props.Component] - Component to render for link items\n@param {boolean} props.isActive - Whether the item is currently active\n@param {Function} props.handleItemClick - Click handler function\n@param {Object} props.navItemRefs - Ref object for managing item references\n@param {boolean} props.isSmallScreen - Whether currently on a small screen\n@param {boolean} props.isExpanded - Whether the navigation is expanded\n@returns {JSX.Element} Rendered navigation item",
   "methods": [],
   "displayName": "NavItem",
   "props": {
     "item": {
       "description": "",
       "type": {
-        "name": "object"
+        "name": "shape",
+        "value": {
+          "index": {
+            "name": "number",
+            "required": false
+          },
+          "iconName": {
+            "name": "string",
+            "required": true
+          },
+          "name": {
+            "name": "string",
+            "required": true
+          },
+          "actionType": {
+            "name": "enum",
+            "value": [{
+              "value": "\"component\"",
+              "computed": false
+            }, {
+              "value": "\"link\"",
+              "computed": false
+            }, {
+              "value": "\"button\"",
+              "computed": false
+            }],
+            "required": true
+          },
+          "bottomAligned": {
+            "name": "bool",
+            "required": false
+          },
+          "hide": {
+            "name": "bool",
+            "required": false
+          },
+          "component": {
+            "name": "elementType",
+            "required": false
+          },
+          "onClick": {
+            "name": "func",
+            "required": false
+          },
+          "isActive": {
+            "name": "bool",
+            "required": false
+          },
+          "badgeNumber": {
+            "name": "union",
+            "value": [{
+              "name": "string"
+            }, {
+              "name": "number"
+            }],
+            "required": false
+          },
+          "badgeDot": {
+            "name": "bool",
+            "required": false
+          }
+        }
       },
-      "required": false
+      "required": true
     },
     "Component": {
       "description": "",
@@ -175,7 +269,7 @@ NavItem.__docgenInfo = {
       "type": {
         "name": "func"
       },
-      "required": false
+      "required": true
     },
     "navItemRefs": {
       "description": "",

package/es/components/SideNavV2/SideNav.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import SideNavTeamsSection from "./sections/SideNavTeamsSection";
 import SideNavPinnedSection from "./sections/SideNavPinnedSection";
@@ -12,13 +12,31 @@ import useResize from "./hooks/useResize";
 import { categorizeItems } from "./utils/itemUtils";
 
 // Styled Components
-import { SideNavWrapper, SideNavItems } from "./styles/SideNavV2.styles";
+import { SideNavWrapper, SideNavItems, ToggleHandle, ToggleIcon } from "./styles/SideNavV2.styles";
 
 // Components
-import PanelControlComponent from "./components/PanelControl";
 import ExpandedPanel from "./components/ExpandedPanel";
 import ItemSection from "./components/ItemSection";
 import CurrentViewSectionPortalTarget from "./components/CurrentViewSectionPortalTarget";
+import Icon from "../Icon";
+
+/**
+ * SideNavV2 - A responsive side navigation component with expandable panels
+ *
+ * Features:
+ * - Responsive design that adapts to mobile and desktop
+ * - Expandable panels with resizable functionality
+ * - Hover-based auto-expansion (when enabled)
+ * - Team and pinned item sections
+ * - Current view section portal integration
+ *
+ * @param {Object} props - Component props
+ * @param {Array} props.items - Navigation items to display
+ * @param {string} props.sideNavHeight - Height of the side navigation
+ * @param {Array} [props.yourTeams] - Teams to display in the teams section
+ * @param {Array} [props.pinnedItems] - Pinned items to display
+ * @returns {JSX.Element} Rendered side navigation
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavV2 = _ref => {
   let {
@@ -34,45 +52,44 @@ const SideNavV2 = _ref => {
     expandedRef,
     navItemRefs,
     wrapperRef,
-    isLocked,
     handleItemClick,
-    handleBlur,
     handleWidthChange,
-    handleLockToggle
+    handleExpandToggle,
+    isLocked,
+    wasExpandedByHover,
+    hasBeenManuallyCollapsed
   } = useSideNavState(items);
   const {
     isSmallScreen
   } = useResponsive();
 
-  // Get the current expanded item
-  const currentItem = expandedItem !== null ? items[expandedItem] : null;
+  // Memoize expensive calculations to prevent unnecessary re-renders
+  const currentItem = useMemo(() => expandedItem !== null ? items[expandedItem] : null, [expandedItem, items]);
   const {
     handleResizeStart
   } = useResize(expandedRef, isSmallScreen, expandedItem, handleWidthChange, currentItem);
 
-  // Categorize items
+  // Memoize categorized items to prevent recalculation on every render
+  const categorizedItems = useMemo(() => categorizeItems(items), [items]);
   const {
     topAlignedItems,
     pageSpecificItems,
     bottomAlignedItems,
     allItems
-  } = categorizeItems(items);
+  } = categorizedItems;
+
+  // Determine toggle button icon
+  // Show "Keep open" state when expanded by hover OR when collapsed and hover behavior is enabled
+  const shouldShowKeepOpen = useMemo(() => wasExpandedByHover && !isLocked || !isExpanded && hasBeenManuallyCollapsed, [wasExpandedByHover, isLocked, isExpanded, hasBeenManuallyCollapsed]);
+  const toggleIcon = useMemo(() => shouldShowKeepOpen ? "chevron-right" : "chevron-left", [shouldShowKeepOpen]);
   return /*#__PURE__*/_jsxs(SideNavWrapper, {
     ref: wrapperRef,
     sideNavHeight: sideNavHeight,
+    "data-testid": "side-nav-wrapper",
     children: [/*#__PURE__*/_jsxs(SideNavItems, {
       isExpanded: isExpanded,
       "data-testid": "side-nav-items",
-      children: [!isSmallScreen && /*#__PURE__*/_jsx(PanelControlComponent, {
-        isExpanded: isExpanded,
-        isLocked: isLocked,
-        onClick: handleLockToggle,
-        ariaLabel: isLocked ? "unlock navigation" : isExpanded ? "lock navigation" : "open navigation",
-        mt: "10px",
-        mb: "4px",
-        tooltipText: isLocked ? "Collapse" : isExpanded ? "Keep open" : "Expand navigation",
-        mode: "lock"
-      }), /*#__PURE__*/_jsx(ItemSection, {
+      children: [/*#__PURE__*/_jsx(ItemSection, {
         items: topAlignedItems,
         isExpanded: isExpanded,
         isSmallScreen: isSmallScreen,
@@ -102,6 +119,19 @@ const SideNavV2 = _ref => {
         navItemRefs: navItemRefs,
         showDivider: true
       })]
+    }), !isSmallScreen && /*#__PURE__*/_jsx(ToggleHandle, {
+      onClick: handleExpandToggle,
+      isLocked: shouldShowKeepOpen,
+      "data-testid": "toggle-handle",
+      isExpanded: isExpanded,
+      children: /*#__PURE__*/_jsx(ToggleIcon, {
+        className: "toggle-icon",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", toggleIcon],
+          size: "xs",
+          fontSize: "12px"
+        })
+      })
     }), allItems.map((item, index) => {
       if (item.actionType !== "component") return null;
       if (index !== expandedItem || item.hide) return null;
@@ -110,35 +140,33 @@ const SideNavV2 = _ref => {
         expandedItem: expandedItem,
         isExpanded: isExpanded,
         expandedWidth: expandedWidth,
-        sideNavHeight: sideNavHeight,
         isSmallScreen: isSmallScreen,
         expandedRef: expandedRef,
         onResizeStart: handleResizeStart,
-        onItemClick: handleItemClick,
-        onBlur: handleBlur
+        onItemClick: handleItemClick
       }, item.name);
     })]
   });
 };
 SideNavV2.propTypes = {
   sideNavHeight: PropTypes.string.isRequired,
-  initiallyExpandedItemIndex: PropTypes.number,
   items: PropTypes.arrayOf(PropTypes.shape({
     iconName: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    badgeNumber: PropTypes.string,
+    badgeNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     badgeDot: PropTypes.bool,
     hide: PropTypes.bool,
     large: PropTypes.bool,
     bottomAligned: PropTypes.bool,
+    pageSpecific: PropTypes.bool,
+    isExpandedByDefault: PropTypes.bool,
+    isActive: PropTypes.bool,
     actionType: PropTypes.oneOf(["component", "link", "button"]).isRequired,
     component: PropTypes.elementType,
     link: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    index: PropTypes.number
   })).isRequired,
-  LinkComponent: PropTypes.elementType,
-  // viewing prop is now optional since it can come from context
-
   yourTeams: PropTypes.arrayOf(PropTypes.shape({
     avatar: PropTypes.string,
     name: PropTypes.string.isRequired,
@@ -153,7 +181,7 @@ SideNavV2.propTypes = {
   }))
 };
 SideNavV2.__docgenInfo = {
-  "description": "",
+  "description": "SideNavV2 - A responsive side navigation component with expandable panels\n\nFeatures:\n- Responsive design that adapts to mobile and desktop\n- Expandable panels with resizable functionality\n- Hover-based auto-expansion (when enabled)\n- Team and pinned item sections\n- Current view section portal integration\n\n@param {Object} props - Component props\n@param {Array} props.items - Navigation items to display\n@param {string} props.sideNavHeight - Height of the side navigation\n@param {Array} [props.yourTeams] - Teams to display in the teams section\n@param {Array} [props.pinnedItems] - Pinned items to display\n@returns {JSX.Element} Rendered side navigation",
   "methods": [],
   "displayName": "SideNavV2",
   "props": {
@@ -164,13 +192,6 @@ SideNavV2.__docgenInfo = {
       },
       "required": true
     },
-    "initiallyExpandedItemIndex": {
-      "description": "",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
     "items": {
       "description": "",
       "type": {
@@ -187,7 +208,12 @@ SideNavV2.__docgenInfo = {
               "required": true
             },
             "badgeNumber": {
-              "name": "string",
+              "name": "union",
+              "value": [{
+                "name": "string"
+              }, {
+                "name": "number"
+              }],
               "required": false
             },
             "badgeDot": {
@@ -206,6 +232,18 @@ SideNavV2.__docgenInfo = {
               "name": "bool",
               "required": false
             },
+            "pageSpecific": {
+              "name": "bool",
+              "required": false
+            },
+            "isExpandedByDefault": {
+              "name": "bool",
+              "required": false
+            },
+            "isActive": {
+              "name": "bool",
+              "required": false
+            },
             "actionType": {
               "name": "enum",
               "value": [{
@@ -231,19 +269,16 @@ SideNavV2.__docgenInfo = {
             "onClick": {
               "name": "func",
               "required": false
+            },
+            "index": {
+              "name": "number",
+              "required": false
             }
           }
         }
       },
       "required": true
     },
-    "LinkComponent": {
-      "description": "",
-      "type": {
-        "name": "elementType"
-      },
-      "required": false
-    },
     "yourTeams": {
       "description": "",
       "type": {

package/es/components/SideNavV2/SideNavV2.stories.js

@@ -10,7 +10,6 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import Flex from "../Flex";
 import Spacer from "../Spacer/index";
 import Card from "../Card/index";
-import Badge from "../Badge/index";
 import RenderCurrentViewSection from "./components/RenderCurrentViewSection";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 library.add(far);
@@ -79,7 +78,7 @@ const getViewingState = teamId => {
     avatar: teams[teamId].avatar,
     shape: teams[teamId].shape,
     // badge: teams[teamId].type && (
-    //   <Badge variant="success">{teams[teamId].type}</Badge>
+    //   <Badge variant="success">{teams[teamId].type}</Badge> // Badge is optional
     // ),
     subNav: [{
       name: "Overview",
@@ -111,10 +110,7 @@ const getViewingState = teamId => {
 const getPeopleState = personId => {
   return {
     name: "James Merrit",
-    badge: /*#__PURE__*/_jsx(Badge, {
-      variant: "success",
-      children: "Engineer"
-    }),
+    // badge: <Badge variant="success">Engineer</Badge>, // Badge is optional
     avatar: "https://randomuser.me/api/portraits/men/24.jpg",
     shape: "circle",
     subNav: [{
@@ -250,10 +246,10 @@ const SideBarWithConfig = () => {
     component: makePanelComponent("Filter"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: matchPath(location.pathname, {
+    pageSpecific: true,
+    isExpandedByDefault: matchPath(location.pathname, {
       path: "/search"
-    }),
-    isExpandedByDefault: true
+    })
   }, {
     iconName: "sun",
     name: "People",
@@ -264,10 +260,10 @@ const SideBarWithConfig = () => {
     component: makePanelComponent("People"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: matchPath(location.pathname, {
+    pageSpecific: true,
+    isExpandedByDefault: matchPath(location.pathname, {
       path: "/profile"
-    }),
-    isExpandedByDefault: true
+    })
   }, {
     iconName: "bell",
     name: "Notifications",
@@ -287,7 +283,7 @@ const SideBarWithConfig = () => {
         to: `/teams/${team}/overview`,
         children: team
       }, team)), /*#__PURE__*/_jsx(P, {
-        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestias non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
       })]
     })),
     actionType: "component" // Use 'component' for a component
@@ -299,13 +295,6 @@ const SideBarWithConfig = () => {
     bottomAligned: true,
     component: makePanelComponent("Settings"),
     actionType: "component" // Use 'component' for a component
-  }, {
-    iconName: "calendar-alt",
-    name: "Calendar",
-    pageSpecific: true,
-    // Specify pageSpecific if you want this item to appear below a divider line separating common nav items from page/route specific items
-    component: makePanelComponent("Calendar"),
-    actionType: "component" // Use 'component' for a component
   }, {
     iconName: "star",
     name: "Announcements",
@@ -349,6 +338,13 @@ const SideBarWithConfig = () => {
               children: "Profile route"
             })
           })
+        }), /*#__PURE__*/_jsx(Route, {
+          path: "/search",
+          children: /*#__PURE__*/_jsx(PageCard, {
+            children: /*#__PURE__*/_jsx("div", {
+              children: "Search route"
+            })
+          })
         }), /*#__PURE__*/_jsx(Route, {
           path: "/teams/:teamId",
           children: /*#__PURE__*/_jsx(PageCard, {