[BD-46] docs: added keep the menu nav section of viewed page expanded

src/Avatar/README.md

@@ -5,7 +5,6 @@ components:
 - Avatar
 categories:
 - Imagery & Iconography
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

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
 ---

src/Image/README.md

@@ -3,7 +3,6 @@ title: 'Image'
 type: 'component'
 categories:
 - Imagery & Iconography
-- Content
 components:
 - Image
 status: 'Stable'

src/SearchField/README.md

@@ -10,7 +10,6 @@ components:
 - SearchFieldSubmitButton
 categories:
 - Forms
-- Navigation
 status: 'Stable'
 designStatus: 'Needs Review'
 devStatus: 'Done'

src/SelectableBox/README.md

@@ -6,7 +6,6 @@ components:
 - SelectableBoxSet
 categories:
 - Forms
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'In progress'

src/Spinner/README.md

@@ -5,7 +5,6 @@ status: 'Stable'
 components:
 - Spinner
 categories:
-- Status & metadata
 - Choreography
 designStatus: 'Done'
 devStatus: 'Done'

src/Stepper/README.md

@@ -10,7 +10,6 @@ components:
 - StepperHeaderStep
 categories:
 - Navigation
-- Content
 designStatus: 'Done'
 devStatus: 'Done'
 notes: |

src/Table/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Table (Deprecated)'
+title: 'Table'
 type: 'component'
 components:
 - TableDeprecated

src/Truncate/README.md

@@ -3,6 +3,8 @@ title: 'Truncate'
 type: 'component'
 components:
 - Truncate
+categories:
+- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

src/hooks/useIndexOfLastVisibleChild.mdx

@@ -3,7 +3,6 @@ title: 'useIndexOfLastVisibleChild'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIndexOfLastVisibleChild
 status: 'New'

src/hooks/useIsVisible.mdx

@@ -3,7 +3,6 @@ title: 'useIsVisible'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIsVisible
 status: 'Stable'

src/hooks/useWindowSize.mdx

@@ -3,7 +3,6 @@ title: 'useWindowSize'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useWindowSize
 status: 'New'

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;
     }
   }

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,7 +10,9 @@ 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';
@@ -66,21 +69,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 +113,7 @@ ComponentNavItem.propTypes = {
     title: PropTypes.string.isRequired,
     status: PropTypes.string,
   }).isRequired,
+  isActive: PropTypes.bool.isRequired,
 };
 
 export type MenuComponentListTypes = {
@@ -159,6 +174,7 @@ function Menu() {
     settings,
     handleSettingsChange,
   } = useContext(SettingsContext);
+  const { pathname } = useLocation();
   const { components } = useStaticQuery(menuQuery);
   const { categories }: IMenuQueryComponents = components;
 
@@ -185,43 +201,61 @@ 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>
-              </li>
-            ))}
+            {foundationLinks.map(link => {
+              const isActive = pathname.endsWith(link.toLowerCase()) && !pathname.endsWith(`brand-${link.toLowerCase()}`);
+              return (
+                <li key={link}>
+                  <Link
+                    className={classNames({ active: isActive })}
+                    to={`/foundations/${link.toLowerCase().trim()}`}
+                  >
+                    {link.replace(/-/g, ' ')}
+                  </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 +264,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 +291,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 +312,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}

www/src/pages/guides/installation-and-usage.mdx → www/src/pages/guides/getting-started.mdx

@@ -1,8 +1,10 @@
 ---
-title: Installation and usage
+title: Getting started
 ---
 
-# Installation and usage
+# Getting started
+
+## Installation and usage
 
 Paragon components require React 16 or higher. To install Paragon into your project: