docs(PPDSC-2649): more info from routes

newscorp-ghfb · Mar 7, 2023 · 672ddbf · 672ddbf
1 parent 349917d
commit 672ddbf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 55 deletions.
diff --git a/site/pages/patterns/overview.tsx b/site/pages/patterns/overview.tsx
@@ -17,20 +17,6 @@ import {
   ContentSection,
 } from '../../components/content-structure';
 
-const patternsRouteList: Item[] =
-  routes.filter(route => route.title === 'Patterns')[0].subNav || [];
-
-const patternsFormRouteList: Item[] =
-  patternsRouteList.filter(route => route.title === 'Forms')[0].subNav || [];
-
-const patternsOnboardingRouteList: Item[] =
-  patternsRouteList.filter(route => route.title === 'Onboarding')[0].subNav ||
-  [];
-
-const patternsSolutionsRouteList: Item[] =
-  patternsRouteList.filter(route => route.title === 'Solutions')[0].subNav ||
-  [];
-
 const getPatternsCardList = (routeList: Item[]) =>
   routeList
     .filter(route => route.page && route?.illustration)
@@ -44,14 +30,6 @@ const getPatternsCardList = (routeList: Item[]) =>
       description,
     })) as MediaItem[];
 
-const patternsIndexRouteListCards = getPatternsCardList(patternsFormRouteList);
-const patternsIndexOnboardingRouteListCards = getPatternsCardList(
-  patternsOnboardingRouteList,
-);
-const patternsIndexSolutionsRouteListCards = getPatternsCardList(
-  patternsSolutionsRouteList,
-);
-
 const pageDescription = `Design patterns provide a framework for solving a particular user problem in a consistent, considered way.`;
 
 const HeaderImage = () => (
@@ -79,39 +57,22 @@ const Overview = (layoutProps: LayoutProps) => (
 
         <Grid lgMargin="sizing000" xsRowGutter="sizing000">
           <ComponentPageCell>
-            <ContentSection sectionName="solutions">
-              <ContentPrimary
-                headline="Solutions"
-                description="Solutions are multi-tenant products that are designed, developed and ready for your team to use."
-              >
-                <MediaList
-                  cards={patternsIndexSolutionsRouteListCards}
-                  gridProps={{xsRowGutter: 'space050'}}
-                />
-              </ContentPrimary>
-            </ContentSection>
-            <ContentSection sectionName="onboarding">
-              <ContentPrimary
-                headline="Onboarding"
-                description="Practical guidance for onboarding users onto your product or service."
-              >
-                <MediaList
-                  cards={patternsIndexOnboardingRouteListCards}
-                  gridProps={{xsRowGutter: 'space050'}}
-                />
-              </ContentPrimary>
-            </ContentSection>
-            <ContentSection sectionName="forms">
-              <ContentPrimary
-                headline="Forms"
-                description="Best practices to follow when creating form patterns."
-              >
-                <MediaList
-                  cards={patternsIndexRouteListCards}
-                  gridProps={{xsRowGutter: 'space050'}}
-                />
-              </ContentPrimary>
-            </ContentSection>
+            {(routes as Item[])
+              .find(({title}) => title === 'Patterns')!
+              .subNav!.slice(1)
+              .map(({title, description, subNav}) => (
+                <ContentSection sectionName={title as string}>
+                  <ContentPrimary
+                    headline={title as string}
+                    description={description}
+                  >
+                    <MediaList
+                      cards={getPatternsCardList(subNav || [])}
+                      gridProps={{xsRowGutter: 'space050'}}
+                    />
+                  </ContentPrimary>
+                </ContentSection>
+              ))}
           </ComponentPageCell>
         </Grid>
       </ThemeProvider>

diff --git a/site/routes.ts b/site/routes.ts
@@ -1010,6 +1010,8 @@ export const routes = [
       {
         title: 'Solutions',
         id: '/patterns/solutions',
+        description:
+          'Solutions are multi-tenant products that are designed, developed and ready for your team to use.',
         subNav: [
           {
             title: 'NewsKit Account',
@@ -1032,6 +1034,8 @@ export const routes = [
       {
         title: 'Onboarding',
         id: '/patterns/onboarding',
+        description:
+          'Practical guidance for onboarding users onto your product or service.',
         subNav: [
           {
             title: 'Overview',
@@ -1065,6 +1069,7 @@ export const routes = [
       {
         title: 'Forms',
         id: '/patterns/forms',
+        description: 'Best practices to follow when creating form patterns.',
         subNav: [
           {
             title: 'Overview',