feat: added tab filtering for each page

openedx · Dec 6, 2023 · 4cfba57 · 4cfba57
1 parent 2604556
commit 4cfba57
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Modal/alert-modal/accessibility-guidelines.md b/src/Modal/alert-modal/accessibility-guidelines.md
@@ -0,0 +1,16 @@
+---
+title: 'AlertModal'
+type: 'component'
+categories:
+- Imagery & Iconography
+components:
+- Image
+tabName: 'accessibility-guidelines'
+status: 'Stable'
+designStatus: 'Done'
+devStatus: 'Done'
+notes: |
+
+---
+
+<h2>Accessibility - AlertModal</h2>
diff --git a/www/package.json b/www/package.json
@@ -5,10 +5,10 @@
   "dependencies": {
     "@docsearch/react": "^3.1.0",
     "@edx/brand-edx.org": "^2.1.2",
-    "@openedx/brand-openedx": "^1.2.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@openedx/brand-openedx": "^1.2.2",
     "analytics-node": "^6.0.0",
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
@@ -24,6 +24,7 @@
     "gatsby-transformer-react-docgen": "^7.17.0",
     "localforage": "^1.10.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.startcase": "^4.4.0",
     "prism-react-renderer": "^1.3.3",
     "prop-types": "^15.8.1",
     "query-string": "^8.1.0",
@@ -38,8 +39,8 @@
     "rehype-slug": "^4.0.1",
     "sass": "^1.53.0",
     "sass-loader": "12.6.0",
-    "uuid": "^9.0.0",
-    "slugify": "^1.6.5"
+    "slugify": "^1.6.5",
+    "uuid": "^9.0.0"
   },
   "keywords": [
     "paragon",

diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx
@@ -7,6 +7,7 @@ import { graphql, Link, navigate } from 'gatsby';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import classNames from 'classnames';
+import startcase from 'lodash.startcase';
 import {
   Container,
   Alert,
@@ -135,13 +136,13 @@ export default function PageTemplate({
   const isDeprecated = mdx.frontmatter?.status?.toLowerCase().includes('deprecate') || false;
 
   useEffect(() => setShowMinimizedTitle(!!isMobile), [isMobile]);
-  // console.log('currentTab', currentTab);
+
   const handleOnSelect = (value: string) => {
     const isCurrentTab = (value === mdx.frontmatter.tabName);
 
     if (!isCurrentTab) {
       if (markdownFiles.some((item: string | string[]) => item.includes(value))) {
-        return navigate(value);
+        return navigate(`/components/${mdx.frontmatter.title.toLowerCase()}/${value}`);
       }
 
       return navigate(`${componentUrl.split('/').slice(0, -2).join('/')}/`);
@@ -234,22 +235,15 @@ export default function PageTemplate({
               )}
             </div>
           </Tab>
-          {markdownFiles.map((tabTitle) => {
-            const updatedString = tabTitle.split('/')[1]
-              .split('-')
-              .map((title, i) => (i === 0 ? title.charAt(0).toUpperCase() + title.slice(1) : title))
-              .join(' ');
-
-            return (
-              <Tab eventKey={tabTitle.split('/')[1]} title={updatedString}>
-                <div className="mt-4">
-                  <MDXProvider components={shortcodes}>
-                    <MDXRenderer>{mdx.body}</MDXRenderer>
-                  </MDXProvider>
-                </div>
-              </Tab>
-            );
-          })}
+          {markdownFiles.map((tabTitle) => (
+            <Tab eventKey={tabTitle} title={startcase(tabTitle)}>
+              <div className="mt-4">
+                <MDXProvider components={shortcodes}>
+                  <MDXRenderer>{mdx.body}</MDXRenderer>
+                </MDXProvider>
+              </div>
+            </Tab>
+          ))}
         </Tabs>
       </Container>
     </Layout>

diff --git a/www/utils/createPages.js b/www/utils/createPages.js
@@ -40,8 +40,9 @@ async function createPages(graphql, actions, reporter) {
   }
   // Create component detail pages.
   const components = result.data.allMdx.edges;
-  // console.log('components', components);
+
   const themesSCSSVariables = await getThemesSCSSVariables();
+  const componentPages = {};
 
   // you'll call `createPage` for each result
   // eslint-disable-next-line no-restricted-syntax
@@ -56,6 +57,16 @@ async function createPages(graphql, actions, reporter) {
       scssVariablesData = await processComponentSCSSVariables(variablesPath, themesSCSSVariables);
     }
 
+    const subcomponent = node.slug.split('/').slice(1).join('/');
+
+    if (!componentPages[componentDir]) {
+      componentPages[componentDir] = [];
+    }
+
+    if (!subcomponent.includes('README')) {
+      componentPages[componentDir].push(subcomponent);
+    }
+
     createPage({
       // This is the slug you created before
       // (or `node.frontmatter.slug`)
@@ -71,7 +82,7 @@ async function createPages(graphql, actions, reporter) {
         componentsUsageInsights: Object.keys(componentsUsage),
         githubEditPath,
         componentUrl: node.fields.slug,
-        markdownFiles: [`${componentDir}/design-guidelines`],
+        markdownFiles: componentPages[componentDir],
       },
     });
   }