Rename Integrations to Addons

- Add Addons nav item

Author: kylegach

src/components/Footer/Footer.stories.tsx

@@ -35,7 +35,7 @@ const links = {
   showcase: { url: 'https://storybook.js.org/showcase' },
   projects: { url: 'https://storybook.js.org/showcase/projects' },
   componentGlossary: { url: 'https://storybook.js.org/showcase/glossary' },
-  integrations: { url: '/integrations', linkWrapper: FakeGatsbyLink },
+  addons: { url: '/addons', linkWrapper: FakeGatsbyLink },
   getInvolved: { url: '/community', linkWrapper: FakeGatsbyLink },
   blog: { url: 'https://storybook.js.org/blog' },
   hiring: { url: 'https://www.chromatic.com/company/jobs' },

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.addons },
     { label: 'Get involved', link: links.getInvolved },
     { label: 'Blog', link: links.blog },
   ],

src/components/Nav/Nav.stories.tsx

@@ -35,7 +35,7 @@ const navLinks = {
   showcase: { url: 'https://storybook.js.org/showcase' },
   projects: { url: 'https://storybook.js.org/showcase/projects' },
   componentGlossary: { url: 'https://storybook.js.org/showcase/glossary' },
-  integrations: { url: '/integrations', linkWrapper: FakeGatsbyLink },
+  addons: { url: '/addons', linkWrapper: FakeGatsbyLink },
   getInvolved: { url: '/community', linkWrapper: FakeGatsbyLink },
   blog: { url: 'https://storybook.js.org/blog' },
   hiring: { url: 'https://www.chromatic.com/company/jobs' },
@@ -50,7 +50,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 
 export const Inverse = Template.bind({});
-Inverse.args = { inverse: true, activeSection: 'integrations' };
+Inverse.args = { inverse: true, activeSection: 'addons' };
 Inverse.parameters = {
   backgrounds: { default: 'dark' },
 };
@@ -91,7 +91,7 @@ export const FullStack = () => (
       <SubNavRight>
         <SubNavCTA href="/back">
           <Icon icon="add" />
-          Add your integration
+          Add your addon
         </SubNavCTA>
       </SubNavRight>
     </SubNav>

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' | 'addons' | '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 === 'addons'}
+              monochrome={monochrome}
+              variant={inverse ? 'inverse' : 'default'}
+              href={navLinks.addons.url}
+              LinkWrapper={navLinks.addons.linkWrapper}
+            >
+              Addons
+            </NavItem>
             <NavItem
               active={activeSection === 'showcase'}
               monochrome={monochrome}

src/components/Nav/menus.tsx

@@ -117,8 +117,8 @@ export const mobileGroups = (links: Links) => [
     label: 'Community',
     items: [
       {
-        label: 'Integrations',
-        link: links.integrations,
+        label: 'Addons',
+        link: links.addons,
         icon: <ColoredIcon icon="grid" color="seafoam" />,
       },
       {

src/components/SubNav/SubNav.stories.tsx

@@ -156,12 +156,12 @@ export const BreadcrumbCTA = () => (
   <SubNav>
     <SubNavBreadcrumb tertiary href="/back">
       <Icon icon="arrowleft" />
-      Back to integrations
+      Back to addons
     </SubNavBreadcrumb>
     <SubNavRight>
       <SubNavCTA href="/back">
         <Icon icon="add" />
-        Add your integration
+        Add your addon
       </SubNavCTA>
     </SubNavRight>
   </SubNav>

src/components/ValuePropCopy.stories.tsx

@@ -24,7 +24,7 @@ WithLinks.args = {
       <Link containsIcon withArrow href="/why-storybook">
         Why build UIs in isolation?
       </Link>
-      <Link containsIcon withArrow href="/integrations">
+      <Link containsIcon withArrow href="/addons">
         How does this fit in my tech stack?
       </Link>
     </>

src/components/links-context.ts

@@ -17,7 +17,7 @@ export interface Links {
   showcase: LinkItem;
   projects: LinkItem;
   componentGlossary: LinkItem;
-  integrations: LinkItem;
+  addons: LinkItem;
   getInvolved: LinkItem;
   blog: LinkItem;
   hiring: LinkItem;
@@ -37,7 +37,7 @@ export const defaultLinks = {
   showcase: { url: 'https://storybook.js.org/showcase' },
   projects: { url: 'https://storybook.js.org/showcase/projects' },
   componentGlossary: { url: 'https://storybook.js.org/showcase/glossary' },
-  integrations: { url: 'https://storybook.js.org/integrations' },
+  addons: { url: 'https://storybook.js.org/addons' },
   getInvolved: { url: 'https://storybook.js.org/community' },
   blog: { url: 'https://storybook.js.org/blog' },
   hiring: { url: 'https://www.chromatic.com/company/jobs' },