feature/ads-776 Automated secondary nav items

src/App.tsx

@@ -23,6 +23,7 @@ interface Collection {
     };
     name: string;
     group?: string;
+    groupName?: string;
     leadParagraph?: string;
   }[];
 }
@@ -70,6 +71,7 @@ const App = (): JSX.Element => {
           id: item?.sys.id,
           name: item?.name,
           group: item?.group ? slugify(item.group) : null,
+          groupName: item?.group ? item.group : null,
           leadParagraph: item?.leadParagraph
         })
     );

src/pages/codeStandards/CodeStandards.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useContext } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-import { NavItemSecondary } from '@boston-scientific/anatomy-react';
+import { useParams } from 'react-router-dom';
 import { NavItemTertiary } from '@boston-scientific/anatomy-react';
 import { IdLookupContext } from 'App';
 import Markdown from 'shared/components/Markdown';
@@ -11,11 +10,10 @@ import useHashScroll from 'shared/hooks/useHashScroll';
 import useHeadings from 'shared/hooks/useHeadings';
 import PageTemplate from 'shared/components/PageTemplate';
 import Layout from 'shared/components/Layout';
+import useNavItems from 'shared/hooks/useNavItems';
 
 const CodeStandards = (): JSX.Element => {
-  const location = useLocation();
   const params = useParams();
-  const [navItems, setNavItems] = useState<NavItemSecondary[]>([] as NavItemSecondary[]);
   const [codeStandardData, setCodeStandardData] = useState<GetCodeStandardQuery['codeStandard']>(
     {} as GetCodeStandardQuery['codeStandard']
   );
@@ -34,44 +32,13 @@ const CodeStandards = (): JSX.Element => {
     console.error(error);
   }
 
+  const navItems = useNavItems(idLookup.codeStandards, 'code-standards');
+
   useEffect(() => {
     if (data?.codeStandard) {
       setCodeStandardData(data.codeStandard);
     }
-    const basePath = location.pathname.slice(0, location.pathname.lastIndexOf('/'));
-    const pathPrefix = basePath + '/';
-    const navItems = [
-      {
-        text: 'General',
-        to: pathPrefix + 'general'
-      },
-      {
-        text: 'Accessibility',
-        to: pathPrefix + 'accessibility'
-      },
-      {
-        text: 'HTML',
-        to: pathPrefix + 'html'
-      },
-      {
-        text: 'CSS',
-        to: pathPrefix + 'css'
-      },
-      {
-        text: 'JavaScript',
-        to: pathPrefix + 'javascript'
-      },
-      {
-        text: 'DevOps',
-        to: pathPrefix + 'devops'
-      },
-      {
-        text: 'Automated code quality tools',
-        to: pathPrefix + 'automated-code-quality-tools'
-      }
-    ];
-    setNavItems(navItems);
-  }, [data, idLookup, location]);
+  }, [data]);
 
   useTitle({ titlePrefix: `${codeStandardData?.name} - Code Standards` });
   useHashScroll(!!codeStandardData?.content);

src/pages/components/Components.tsx

@@ -1,6 +1,4 @@
 import { useState, useEffect, useContext, Fragment } from 'react';
-import { useLocation } from 'react-router-dom';
-import { NavItemSecondary } from '@boston-scientific/anatomy-react';
 import { NavItemTertiary } from '@boston-scientific/anatomy-react';
 import Markdown from 'shared/components/Markdown';
 import { GetComponentQuery } from 'shared/types/contentful';
@@ -11,170 +9,26 @@ import PageTemplate from 'shared/components/PageTemplate';
 import Layout from 'shared/components/Layout';
 import { ComponentContext } from './ComponentsController';
 import Preview from 'pages/components/variants/Preview';
+import { IdLookupContext } from 'App';
+import useNavItems from 'shared/hooks/useNavItems';
 
 const Components = (): JSX.Element => {
-  const location = useLocation();
-
-  const [navItems, setNavItems] = useState<NavItemSecondary[]>([] as NavItemSecondary[]);
   const [componentData, setComponentData] = useState<GetComponentQuery['component']>(
     {} as GetComponentQuery['component']
   );
   const [headings, setHeadings] = useState<NavItemTertiary[]>([]);
 
   const data = useContext(ComponentContext);
+  const idLookup = useContext(IdLookupContext);
+
+  const navItems = useNavItems(idLookup.components, 'components');
 
   useEffect(() => {
     if (data) {
       setComponentData(data);
     }
   }, [data]);
 
-  useEffect(() => {
-    // TODO: ADS-380 get rid of .replace()
-    const basePath = location.pathname
-      .slice(0, location.pathname.lastIndexOf('/'))
-      .replace('/form-controls', '')
-      .replace('/navigation', '')
-      .replace('/cards', '');
-    setNavItems([
-      {
-        text: 'Accordion',
-        to: basePath + '/accordion'
-      },
-      {
-        text: 'Button',
-        to: basePath + '/button'
-      },
-      {
-        text: 'Callout',
-        to: basePath + '/callout'
-      },
-      {
-        text: 'Cards',
-        children: [
-          {
-            text: 'Content card',
-            to: basePath + '/cards/content-card'
-          },
-          {
-            text: 'Card group',
-            to: basePath + '/cards/card-group'
-          },
-          {
-            text: 'Product card',
-            to: basePath + '/cards/product-card'
-          }
-        ]
-      },
-      {
-        text: 'Dropdown menu',
-        to: basePath + '/dropdown-menu'
-      },
-      {
-        text: 'Form controls',
-        children: [
-          {
-            text: 'Form',
-            to: basePath + '/form-controls/form'
-          },
-          {
-            text: 'Fieldset',
-            to: basePath + '/form-controls/fieldset'
-          },
-          {
-            text: 'Checkbox',
-            to: basePath + '/form-controls/checkbox'
-          },
-          {
-            text: 'Radio group',
-            to: basePath + '/form-controls/radio-group'
-          },
-          {
-            text: 'Select',
-            to: basePath + '/form-controls/select'
-          },
-          {
-            text: 'Text input',
-            to: basePath + '/form-controls/text-input'
-          },
-          {
-            text: 'Textarea',
-            to: basePath + '/form-controls/textarea'
-          }
-        ]
-      },
-      {
-        text: 'Image',
-        to: basePath + '/image'
-      },
-      {
-        text: 'Link',
-        to: basePath + '/link'
-      },
-      {
-        text: 'Modal',
-        to: basePath + '/modal'
-      },
-      {
-        text: 'Navigation',
-        children: [
-          {
-            text: 'Breadcrumbs',
-            to: basePath + '/navigation/breadcrumbs'
-          },
-          {
-            text: 'Primary navigation',
-            to: basePath + '/navigation/primary-navigation'
-          },
-          {
-            text: 'Secondary navigation',
-            to: basePath + '/navigation/secondary-navigation'
-          },
-          {
-            text: 'Tertiary navigation',
-            to: basePath + '/navigation/tertiary-navigation'
-          },
-          {
-            text: 'Wizard navigation',
-            to: basePath + '/navigation/wizard-navigation'
-          },
-          {
-            text: 'Footer',
-            to: basePath + '/navigation/footer'
-          },
-          {
-            text: 'Search',
-            to: basePath + '/navigation/search'
-          },
-          {
-            text: 'Skip link',
-            to: basePath + '/navigation/skip-link'
-          }
-        ]
-      },
-      {
-        text: 'Pagination',
-        to: basePath + '/pagination'
-      },
-      {
-        text: 'Ribbon',
-        to: basePath + '/ribbon'
-      },
-      {
-        text: 'Stoplight',
-        to: basePath + '/stoplight'
-      },
-      {
-        text: 'Tabs',
-        to: basePath + '/tabs'
-      },
-      {
-        text: 'Tag',
-        to: basePath + '/tag'
-      }
-    ]);
-  }, [location]);
-
   const nameForTitle = componentData?.name || '';
 
   useTitle({ titlePrefix: `${nameForTitle} - Components` });

src/pages/contentGuidelines/ContentGuidelines.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useContext } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { NavItemSecondary } from '@boston-scientific/anatomy-react';
 import { NavItemTertiary } from '@boston-scientific/anatomy-react';
 import { IdLookupContext } from 'App';
 import Markdown from 'shared/components/Markdown';
@@ -11,11 +10,11 @@ import useHashScroll from 'shared/hooks/useHashScroll';
 import useHeadings from 'shared/hooks/useHeadings';
 import PageTemplate from 'shared/components/PageTemplate';
 import Layout from 'shared/components/Layout';
+import useNavItems from 'shared/hooks/useNavItems';
 
 const ContentGuidelines = (): JSX.Element => {
   const params = useParams();
   const location = useLocation();
-  const [navItems, setNavItems] = useState<NavItemSecondary[]>([] as NavItemSecondary[]);
   const [contentGuidelineData, setContentGuidelineData] = useState<GetContentGuidelineQuery['contentGuideline']>(
     {} as GetContentGuidelineQuery['contentGuideline']
   );
@@ -34,16 +33,12 @@ const ContentGuidelines = (): JSX.Element => {
     console.error(error);
   }
 
+  const navItems = useNavItems(idLookup.contentGuidelines, 'content');
+
   useEffect(() => {
     if (data?.contentGuideline) {
       setContentGuidelineData(data.contentGuideline);
     }
-    const basePath = location.pathname.slice(0, location.pathname.lastIndexOf('/'));
-    const navItems = Object.keys(idLookup.contentGuidelines).map((entry) => ({
-      text: idLookup.contentGuidelines[entry].name,
-      to: basePath + '/' + entry
-    }));
-    setNavItems(navItems);
   }, [data, idLookup, location]);
 
   useTitle({ titlePrefix: `${contentGuidelineData?.name} - Content` });

src/pages/foundations/Foundations.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useContext } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-import { NavItemSecondary } from '@boston-scientific/anatomy-react';
+import { useParams } from 'react-router-dom';
 import { NavItemTertiary } from '@boston-scientific/anatomy-react';
 import { IdLookupContext } from 'App';
 import Markdown from 'shared/components/Markdown';
@@ -11,12 +10,11 @@ import useHashScroll from 'shared/hooks/useHashScroll';
 import useHeadings from 'shared/hooks/useHeadings';
 import PageTemplate from 'shared/components/PageTemplate';
 import Layout from 'shared/components/Layout';
+import useNavItems from 'shared/hooks/useNavItems';
 
 const Foundations = (): JSX.Element => {
   const params = useParams();
-  const location = useLocation();
   const idLookup: IdLookup = useContext(IdLookupContext);
-  const [navItems, setNavItems] = useState<NavItemSecondary[]>([] as NavItemSecondary[]);
   const [foundationData, setFoundationData] = useState<GetFoundationQuery['foundation']>(
     {} as GetFoundationQuery['foundation']
   );
@@ -33,64 +31,14 @@ const Foundations = (): JSX.Element => {
     console.error(error);
   }
 
+  const navItems = useNavItems(idLookup.foundations, 'foundations');
+
   useEffect(() => {
     if (data?.foundation) {
       setFoundationData(data.foundation);
     }
   }, [data]);
 
-  useEffect(() => {
-    // TODO: ADS-380 get rid of .replace()
-    const basePath = location.pathname.slice(0, location.pathname.lastIndexOf('/')).replace('/iconography', '');
-    setNavItems([
-      {
-        text: 'Accessibility',
-        to: basePath + '/accessibility'
-      },
-      {
-        text: 'Anti-patterns',
-        to: basePath + '/anti-patterns'
-      },
-      {
-        text: 'Color',
-        to: basePath + '/color'
-      },
-      {
-        text: 'Grid',
-        to: basePath + '/grid'
-      },
-      {
-        text: 'Icons',
-        children: [
-          {
-            text: 'Decorative icons',
-            to: basePath + '/iconography/decorative-icons'
-          },
-          {
-            text: 'System icons',
-            to: basePath + '/iconography/system-icons'
-          }
-        ]
-      },
-      {
-        text: 'Spacing',
-        to: basePath + '/spacing'
-      },
-      {
-        text: 'Tokens',
-        to: basePath + '/tokens'
-      },
-      {
-        text: 'Typography',
-        to: basePath + '/typography'
-      },
-      {
-        text: 'Web sustainability',
-        to: basePath + '/web-sustainability'
-      }
-    ]);
-  }, [location]);
-
   useTitle({ titlePrefix: `${foundationData?.name} - Foundations` });
   useHashScroll(!!foundationData?.content);