docs: expand menu nav section with currently viewed page highlighted (#…

…2791) * docs: added keep the menu nav section of viewed page expanded * refactor: some refactoring * feat: added logic for non components pages * refactor: fixed categories of some components * refactor: refactoring after reviw * refactor: foundationLinks refactoring * fix: fixed CSS Utilities and Brand icons labels
openedx · Nov 17, 2023 · 583ea20 · 583ea20
1 parent c373ab9
commit 583ea20
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 41 deletions.
diff --git a/src/Avatar/README.md b/src/Avatar/README.md
@@ -5,7 +5,6 @@ components:
 - Avatar
 categories:
 - Imagery & Iconography
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

diff --git a/src/CheckBox/README.md b/src/CheckBox/README.md
@@ -7,7 +7,7 @@ categories:
 - Forms (deprecated)
 status: 'Deprecate Soon'
 designStatus: 'TBD'
-devStatus: 'To Do'
+devStatus: 'Done'
 notes: |
   Replaced by Form.Checkbox
 ---

diff --git a/src/Image/README.md b/src/Image/README.md
@@ -3,7 +3,6 @@ title: 'Image'
 type: 'component'
 categories:
 - Imagery & Iconography
-- Content
 components:
 - Image
 status: 'Stable'

diff --git a/src/SearchField/README.md b/src/SearchField/README.md
@@ -10,7 +10,6 @@ components:
 - SearchFieldSubmitButton
 categories:
 - Forms
-- Navigation
 status: 'Stable'
 designStatus: 'Needs Review'
 devStatus: 'Done'

diff --git a/src/SelectableBox/README.md b/src/SelectableBox/README.md
@@ -6,7 +6,6 @@ components:
 - SelectableBoxSet
 categories:
 - Forms
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'In progress'

diff --git a/src/Spinner/README.md b/src/Spinner/README.md
@@ -6,7 +6,6 @@ components:
 - Spinner
 categories:
 - Status & metadata
-- Choreography
 designStatus: 'Done'
 devStatus: 'Done'
 notes: |

diff --git a/src/Stepper/README.md b/src/Stepper/README.md
@@ -10,7 +10,6 @@ components:
 - StepperHeaderStep
 categories:
 - Navigation
-- Content
 designStatus: 'Done'
 devStatus: 'Done'
 notes: |

diff --git a/src/Table/README.md b/src/Table/README.md
@@ -1,5 +1,5 @@
 ---
-title: 'Table (Deprecated)'
+title: 'Table'
 type: 'component'
 components:
 - TableDeprecated

diff --git a/src/Truncate/README.md b/src/Truncate/README.md
@@ -3,6 +3,8 @@ title: 'Truncate'
 type: 'component'
 components:
 - Truncate
+categories:
+- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

diff --git a/src/hooks/useIndexOfLastVisibleChild.mdx b/src/hooks/useIndexOfLastVisibleChild.mdx
@@ -3,7 +3,6 @@ title: 'useIndexOfLastVisibleChild'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIndexOfLastVisibleChild
 status: 'New'

diff --git a/src/hooks/useIsVisible.mdx b/src/hooks/useIsVisible.mdx
@@ -3,7 +3,6 @@ title: 'useIsVisible'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIsVisible
 status: 'Stable'

diff --git a/src/hooks/useWindowSize.mdx b/src/hooks/useWindowSize.mdx
@@ -3,7 +3,6 @@ title: 'useWindowSize'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useWindowSize
 status: 'New'

diff --git a/www/src/components/Menu.scss b/www/src/components/Menu.scss
@@ -6,14 +6,14 @@
   padding: $spacer .625rem 2rem;
   border-right: $border-width solid $light-400;
 
-  &-title {
+  .pgn-doc__menu-title {
     font-size: $h4-font-size;
     line-height: $line-height-base;
     font-weight: $font-weight-normal;
     color: $gray-700;
   }
 
-  &-btn--group {
+  .pgn-doc__menu-btn--group {
     padding-bottom: $spacer;
     border-bottom: $border-width solid $light-400;
     margin-bottom: $spacer;
@@ -33,13 +33,13 @@
     }
   }
 
-  &-component--list-category {
+  .pgn-doc__menu-component--list-category {
     -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
     break-inside: avoid;
   }
 
-  &-items {
+  .pgn-doc__menu-items {
     margin-bottom: $spacer;
 
     .pgn_collapsible {
@@ -68,8 +68,13 @@
         font-weight: $font-weight-normal;
         color: $gray-700;
 
+        &.active {
+          font-weight: $font-weight-bold;
+          text-decoration: $inline-link-decoration;
+        }
+
         &:hover {
-          text-decoration: underline;
+          text-decoration: $inline-link-decoration;
         }
       }
     }
@@ -103,8 +108,8 @@
     }
   }
 
-  &-playground {
-    &--title {
+  .pgn-doc__menu-playground {
+    .pgn-doc__menu-playground--title {
       font-size: $font-size-base;
       line-height: $line-height-base;
       font-weight: $font-weight-bold;
@@ -120,7 +125,7 @@
 
     .pgn__hyperlink {
       color: $info-500;
-      text-decoration: underline;
+      text-decoration: $inline-link-decoration;
       margin-left: .125rem;
     }
   }

diff --git a/www/src/components/Menu.tsx b/www/src/components/Menu.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useLocation } from '@reach/router';
 import PropTypes from 'prop-types';
 import { Link, graphql, useStaticQuery } from 'gatsby';
 import {
@@ -9,10 +10,13 @@ import {
   Collapsible,
   Hyperlink,
   ButtonGroup,
+  Image,
 } from '~paragon-react';
+import classNames from 'classnames';
 import Search from './Search';
 import { SettingsContext } from '../context/SettingsContext';
 import { THEMES } from '../../theme-config';
+import { FOUNDATION_PAGES } from '../config';
 
 // MDX transforms markdown generated by gatsby-transformer-react-docgen
 // This query filters out all of those markdown nodes and assumes all others
@@ -66,21 +70,32 @@ export interface IComponentNavItem {
     type: string,
     status?: string,
   },
+  isActive: boolean,
 }
 
 export function ComponentNavItem({
-  id, fields, frontmatter, ...props
+  id, fields, frontmatter, isActive, ...props
 }: IComponentNavItem) {
   const isDeprecated = frontmatter?.status?.toLowerCase().includes('deprecate') || false;
   const linkNode = isDeprecated ? (
     <OverlayTrigger
       placement="right"
       overlay={<Tooltip id={`tooltip-deprecated-${id}`}>Deprecated</Tooltip>}
     >
-      <Link className="text-muted" to={fields.slug}>{frontmatter.title}</Link>
+      <Link
+        className={classNames('text-muted', { active: isActive })}
+        to={fields.slug}
+      >
+        {frontmatter.title}
+      </Link>
     </OverlayTrigger>
   ) : (
-    <Link to={fields.slug}>{frontmatter.title}</Link>
+    <Link
+      className={classNames({ active: isActive })}
+      to={fields.slug}
+    >
+      {frontmatter.title}
+    </Link>
   );
 
   return (
@@ -99,6 +114,7 @@ ComponentNavItem.propTypes = {
     title: PropTypes.string.isRequired,
     status: PropTypes.string,
   }).isRequired,
+  isActive: PropTypes.bool.isRequired,
 };
 
 export type MenuComponentListTypes = {
@@ -150,15 +166,12 @@ interface IMenuQueryComponents {
   all: Array<IComponentNavItem>
 }
 
-const foundationLinks = [
-  'Colors', 'Elevation', 'Typography', 'Layout', 'Spacing', 'Icons', 'CSS-Utilities', 'Responsive', 'Brand-icons',
-];
-
 function Menu() {
   const {
     settings,
     handleSettingsChange,
   } = useContext(SettingsContext);
+  const { pathname } = useLocation();
   const { components } = useStaticQuery(menuQuery);
   const { categories }: IMenuQueryComponents = components;
 
@@ -185,43 +198,58 @@ function Menu() {
         <Collapsible
           styling="basic"
           title="Guides"
+          defaultOpen={pathname.startsWith('/guides')}
         >
           <ul className="list-unstyled">
             <li>
-              <Link to="/guides/installation-and-usage">
+              <Link
+                className={classNames({ active: pathname.endsWith('getting-started') })}
+                to="/guides/getting-started"
+              >
                 Getting started
               </Link>
             </li>
             <li>
-              <a
+              <Hyperlink
+                destination="https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process"
                 target="_blank"
-                rel="noopener noreferrer"
-                href="https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process"
               >
                 Contributing
-              </a>
+              </Hyperlink>
             </li>
           </ul>
         </Collapsible>
         <Collapsible
           styling="basic"
           title="Foundations"
+          defaultOpen={pathname.startsWith('/foundations')}
         >
           <ul className="list-unstyled foundations-list">
-            {foundationLinks.map(link => (
-              <li key={link}>
-                <Link to={`/foundations/${link.toLowerCase().trim()}`}>{link.replace(/-/g, ' ')}</Link>
+            {FOUNDATION_PAGES.map(({ label, path }) => (
+              <li key={path}>
+                <Link
+                  className={classNames({ active: pathname.endsWith(path) })}
+                  to={path}
+                >
+                  {label}
+                </Link>
               </li>
             ))}
           </ul>
         </Collapsible>
         <Collapsible
           styling="basic"
           title="Tools"
+          defaultOpen={pathname.startsWith('/tools') || pathname.startsWith('/insights')}
         >
           <ul className="list-unstyled foundations-list">
             <li>
-              <Link to="/insights">Usage Insights</Link>
+              <Link
+                className={classNames({ active: pathname.endsWith('insights') })}
+                to="/insights"
+              >
+                Usage Insights
+              </Link>
             </li>
             <li>
               <Link to="/playground" onClick={handlePlaygroundClick}>
@@ -230,7 +258,12 @@ function Menu() {
               </Link>
             </li>
             <li>
-              <Link to="/tools/component-generator">Component Generator</Link>
+              <Link
+                className={classNames({ active: pathname.endsWith('component-generator') })}
+                to="/tools/component-generator"
+              >
+                Component Generator
+              </Link>
             </li>
             <li>
               <Hyperlink
@@ -252,9 +285,16 @@ function Menu() {
               key={fieldValue}
               styling="basic"
               title={fieldValue}
+              defaultOpen={nodes.some(({ fields }) => fields.slug === pathname)}
             >
               <ul className="list-unstyled">
-                {nodes.map((node) => <ComponentNavItem key={node.id} {...node} />)}
+                {nodes.map((node) => (
+                  <ComponentNavItem
+                    key={node.id}
+                    {...node}
+                    isActive={pathname === node.fields.slug}
+                  />
+                ))}
               </ul>
             </Collapsible>
           ))}
@@ -266,8 +306,8 @@ function Menu() {
         externalLinkTitle="Paragon npm"
         target="_blank"
       >
-        <img
-          className="d-inline-block mr-2"
+        <Image
+          className="mr-2"
           src="https://img.shields.io/npm/v/@edx/paragon.svg"
           alt="npm_version"
           width={94}