Merge pull request #80 from storybookjs/integrations-rename-to-addons

Add Addons (Integrations) nav item
storybookjs · Apr 1, 2024 · 3c5abf3 · 3c5abf3
2 parents ec1d5ad + 9ddb05f
commit 3c5abf3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -28,7 +28,7 @@ const footerGroups = (links: Links) => ({
     { label: 'Status', link: links.status },
   ],
   community: [
-    { label: 'Integrations', link: links.integrations },
+    { label: 'Addons', link: links.integrations },
     { label: 'Get involved', link: links.getInvolved },
     { label: 'Blog', link: links.blog },
   ],

diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
@@ -115,7 +115,7 @@ interface NavProps {
   monochrome?: boolean;
   version: string;
   apiKey: string;
-  activeSection?: 'home' | 'docs' | 'showcase' | 'blog';
+  activeSection?: 'home' | 'docs' | 'integrations' | 'showcase' | 'blog';
   githubStarCount: number;
 }
 
@@ -151,7 +151,7 @@ const GithubButtonWrapper = styled.div`
 
   display: none;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 1224px) {
     display: block;
   }
 `;
@@ -191,6 +191,15 @@ export const Nav: FunctionComponent<NavProps> = ({
             >
               Docs
             </NavItem>
+            <NavItem
+              active={activeSection === 'integrations'}
+              monochrome={monochrome}
+              variant={inverse ? 'inverse' : 'default'}
+              href={navLinks.integrations.url}
+              LinkWrapper={navLinks.integrations.linkWrapper}
+            >
+              Addons
+            </NavItem>
             <NavItem
               active={activeSection === 'showcase'}
               monochrome={monochrome}

diff --git a/src/components/Nav/menus.tsx b/src/components/Nav/menus.tsx
@@ -117,7 +117,7 @@ export const mobileGroups = (links: Links) => [
     label: 'Community',
     items: [
       {
-        label: 'Integrations',
+        label: 'Addons',
         link: links.integrations,
         icon: <ColoredIcon icon="grid" color="seafoam" />,
       },