Update nav items

storybookjs · Mar 7, 2024 · a5cc6e4 · a5cc6e4
1 parent 6588f3a
commit a5cc6e4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@floating-ui/react-dom-interactions": "^0.6.5",
     "@storybook/api": "^6.5.9",
     "@storybook/design-system": "^7.9.0",
+    "@storybook/icons": "^1.2.8",
     "@storybook/theming": "^6.5.9",
     "formik": "^2.1.5",
     "human-format": "^0.11.0",

diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
@@ -1,10 +1,10 @@
 import React, { FunctionComponent, useContext } from 'react';
 import { styled } from '@storybook/theming';
 import { Logos } from '@storybook/design-system';
+import { ArrowTopRightIcon } from '@storybook/icons';
 import { pageMargins, spacing, color, breakpoints } from '../shared/styles';
 import { NavItem } from './NavItem';
 import { Search } from '../Search';
-import { Community } from './menus';
 import { TabletMenu } from './TabletMenu';
 import { MobileMenu } from './MobileMenu';
 import { LinksContext } from '../links-context';
@@ -107,12 +107,17 @@ const MobileNav = styled(MobileMenu)`
   }
 `;
 
+const Arrow = styled(ArrowTopRightIcon)`
+  margin-bottom: 8px;
+  margin-left: 6px;
+`;
+
 interface NavProps {
   inverse?: boolean;
   monochrome?: boolean;
   version: string;
   apiKey: string;
-  activeSection?: 'home' | 'why' | 'docs' | 'integrations' | 'showcase' | 'community';
+  activeSection?: 'home' | 'docs' | 'showcase' | 'blog';
 }
 
 const NavLinks = styled.div`
@@ -152,15 +157,6 @@ export const Nav: FunctionComponent<NavProps> = ({
           )}
         </LogoNavItem>
         <NavLinks>
-          {/* <NavItem
-            active={activeSection === 'why'}
-            monochrome={monochrome}
-            variant={inverse ? 'inverse' : 'default'}
-            href={navLinks.whyStorybook.url}
-            LinkWrapper={navLinks.whyStorybook.linkWrapper}
-          >
-            Why
-          </NavItem> */}
           <NavItem
             active={activeSection === 'docs'}
             monochrome={monochrome}
@@ -179,28 +175,33 @@ export const Nav: FunctionComponent<NavProps> = ({
           >
             Showcase
           </NavItem>
-          {/* <NavItem
-            active={activeSection === 'integrations'}
+          <NavItem
+            active={activeSection === 'blog'}
             monochrome={monochrome}
             variant={inverse ? 'inverse' : 'default'}
-            href={navLinks.integrations.url}
-            LinkWrapper={navLinks.integrations.linkWrapper}
+            href={navLinks.blog.url}
+            LinkWrapper={navLinks.blog.linkWrapper}
           >
-            Integrations
-          </NavItem> */}
-          {/* <Community
-            inverse={inverse}
+            Blog
+          </NavItem>
+          <NavItem
+            active={activeSection === 'blog'}
             monochrome={monochrome}
-            navLinks={navLinks}
-            active={activeSection === 'community'}
-          /> */}
+            variant={inverse ? 'inverse' : 'default'}
+            href={navLinks.chromatic.url}
+            LinkWrapper={navLinks.chromatic.linkWrapper}
+          >
+            Visual Test
+            <Arrow size={8} />
+          </NavItem>
           <NavItem
             monochrome={monochrome}
             variant={inverse ? 'inverse' : 'default'}
             href={navLinks.enterprise.url}
             LinkWrapper={navLinks.enterprise.linkWrapper}
           >
             Enterprise
+            <Arrow size={8} />
           </NavItem>
         </NavLinks>
         <GlobalSearch monochrome={monochrome} apiKey={apiKey} version={version} inverse={inverse} />

diff --git a/yarn.lock b/yarn.lock
@@ -3133,6 +3133,11 @@
   dependencies:
     "@types/jest" ">=26.0.0"
 
+"@storybook/icons@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.8.tgz#f530688ee000b487783f2d9cf7bced92e2c32915"
+  integrity sha512-YMF5DiBvMiAVH6qd6Cf6WCwZq3D1OZNxsKtZVFBlzJXqlZb1CLEuCHy5MwL4WI5mzb6q8MJsLYpVMoH84OzUpQ==
+
 "@storybook/[email protected]", "@storybook/instrumenter@^6.4.0":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-6.5.9.tgz#885d9dec31b7b7fa6ea29b446105480450e527b8"