Fix component nav links (#910)

Author: camertron

src/layouts/css-component-layout.tsx

@@ -15,6 +15,7 @@ import {ComponentPageNav} from '../components/component-page-nav'
 export const query = graphql`
   query CssComponentPageQuery($parentPath: String!) {
     sitePage(path: {eq: $parentPath}) {
+      id
       path
       context {
         frontmatter {
@@ -36,6 +37,16 @@ export default function CssComponentLayout({data}) {
   const description = data.sitePage?.context.frontmatter.description || ''
   const stories = [{id: `deprecated-${name}--default`}]
 
+  const baseUrl = (() => {
+    const slugMatch = data.sitePage.id.match(/\/components\/(\w+)\//)
+
+    if (slugMatch) {
+      return `/components/${slugMatch[1]}`
+    }
+
+    return data.sitePage.path;
+  })()
+
   return (
     <BaseLayout title={title} description={description}>
       <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
@@ -47,7 +58,7 @@ export default function CssComponentLayout({data}) {
         ) : null}
         <Box sx={{mb: 4}}>
           <ComponentPageNav
-            basePath={data.sitePage.path}
+            basePath={baseUrl}
             includeReact={data.sitePage.context.frontmatter.reactId}
             includeRails={data.sitePage.context.frontmatter.railsIds}
             includeFigma={data.sitePage.context.frontmatter.figmaId}

src/layouts/figma-component-layout.tsx

@@ -15,6 +15,7 @@ import FigmaPropertyPreview from '../components/figma-property-preview'
 export const query = graphql`
   query FigmaComponentPageQuery($figmaId: String!, $parentPath: String!) {
     sitePage(path: {eq: $parentPath}) {
+      id
       path
       context {
         frontmatter {
@@ -52,15 +53,6 @@ export const query = graphql`
   }
 `
 
-const sentenceCase = str => {
-  return str
-    ?.toLowerCase()
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/^./, function (str) {
-      return str.toUpperCase()
-    })
-}
-
 const lastUpdated = date => {
   return `Updated ${new Date(date).toLocaleDateString('en-GB', {year: 'numeric', month: 'short', day: 'numeric'})}`
 }
@@ -77,6 +69,16 @@ export default function FigmaComponentLayout({data}) {
     ],
   }
 
+  const baseUrl = (() => {
+    const slugMatch = data.sitePage.id.match(/\/components\/(\w+)\//)
+
+    if (slugMatch) {
+      return `/components/${slugMatch[1]}`
+    }
+
+    return data.sitePage.path;
+  })()
+
   return (
     <BaseLayout title={title} description={description}>
       <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
@@ -88,7 +90,7 @@ export default function FigmaComponentLayout({data}) {
         ) : null}
         <Box sx={{mb: 4}}>
           <ComponentPageNav
-            basePath={data.sitePage.path}
+            basePath={baseUrl}
             includeReact={data.sitePage.context.frontmatter.reactId}
             includeRails={data.sitePage.context.frontmatter.railsIds}
             includeFigma={data.sitePage.context.frontmatter.figmaId}

src/layouts/rails-component-layout.tsx

@@ -23,6 +23,7 @@ export const query = graphql`
     }
 
     sitePage(path: {eq: $parentPath}) {
+      id
       path
       context {
         frontmatter {
@@ -351,6 +352,16 @@ export default function RailsComponentLayout({data}) {
     }
   }
 
+  const baseUrl = (() => {
+    const slugMatch = data.sitePage.id.match(/\/components\/(\w+)\//)
+
+    if (slugMatch) {
+      return `/components/${slugMatch[1]}`
+    }
+
+    return data.sitePage.path;
+  })()
+
   return (
     <RailsProvider>
       <BaseLayout title={title} description={description}>
@@ -363,7 +374,7 @@ export default function RailsComponentLayout({data}) {
           ) : null}
           <Box sx={{mb: 4}}>
             <ComponentPageNav
-              basePath={data.sitePage.path}
+              basePath={baseUrl}
               includeReact={reactId}
               includeRails={railsIds}
               includeFigma={figmaId}
@@ -393,7 +404,7 @@ export default function RailsComponentLayout({data}) {
                 <StatusLabel status={sentenceCase(status)} />
                 <AccessibilityLabel a11yReviewed={a11y_reviewed} short={false} />
                 {statuses.length > 1 && <Box sx={{marginLeft: 'auto', marginTop: '-4px'}}>
-                  <StatusMenu currentStatus={status} statuses={statuses} parentPath={`${data.sitePage.path}/rails`} />
+                  <StatusMenu currentStatus={status} statuses={statuses} parentPath={`${baseUrl}/rails`} />
                 </Box>}
               </Box>
 

src/layouts/react-component-layout.tsx

@@ -21,6 +21,7 @@ export const query = graphql`
       version
     }
     sitePage(path: {eq: $parentPath}) {
+      id
       path
       context {
         frontmatter {
@@ -111,6 +112,16 @@ export default function ReactComponentLayout({data}) {
   // this component has a dedicated page for its deprecated version
   if (data.deprecatedMdx?.id !== undefined) statuses.push("deprecated")
 
+  const baseUrl = (() => {
+    const slugMatch = data.sitePage.id.match(/\/components\/(\w+)\//)
+
+    if (slugMatch) {
+      return `/components/${slugMatch[1]}`
+    }
+
+    return data.sitePage.path;
+  })()
+
   return (
     <BaseLayout title={title} description={description}>
       <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
@@ -122,7 +133,7 @@ export default function ReactComponentLayout({data}) {
         ) : null}
         <Box sx={{mb: 4}}>
           <ComponentPageNav
-            basePath={data.sitePage.path}
+            basePath={baseUrl}
             includeReact={data.sitePage.context.frontmatter.reactId}
             includeRails={data.sitePage.context.frontmatter.railsIds}
             includeFigma={data.sitePage.context.frontmatter.figmaId}
@@ -200,7 +211,7 @@ export default function ReactComponentLayout({data}) {
                     },
                   }}
                 >
-                  <StatusMenu currentStatus={status} statuses={statuses} parentPath={`${data.sitePage.path}/react`} />
+                  <StatusMenu currentStatus={status} statuses={statuses} parentPath={`${baseUrl}/react`} />
                 </Box>
               }
             </Box>