From 583ea2084268377a52c92c2a7bca90be7ae74de1 Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Fri, 17 Nov 2023 13:47:30 +0200
Subject: [PATCH] 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
---
 src/Avatar/README.md                          |  1 -
 src/CheckBox/README.md                        |  2 +-
 src/Image/README.md                           |  1 -
 src/SearchField/README.md                     |  1 -
 src/SelectableBox/README.md                   |  1 -
 src/Spinner/README.md                         |  1 -
 src/Stepper/README.md                         |  1 -
 src/Table/README.md                           |  2 +-
 src/Truncate/README.md                        |  2 +
 src/hooks/useIndexOfLastVisibleChild.mdx      |  1 -
 src/hooks/useIsVisible.mdx                    |  1 -
 src/hooks/useWindowSize.mdx                   |  1 -
 www/src/components/Menu.scss                  | 21 +++--
 www/src/components/Menu.tsx                   | 80 ++++++++++++++-----
 www/src/config.js                             | 40 ++++++++++
 ...tion-and-usage.mdx => getting-started.mdx} |  6 +-
 16 files changed, 121 insertions(+), 41 deletions(-)
 rename www/src/pages/guides/{installation-and-usage.mdx => getting-started.mdx} (94%)

diff --git a/src/Avatar/README.md b/src/Avatar/README.md
index 667360becb..b2262509bb 100644
--- 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
index f1181eff34..f225fe431c 100644
--- 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
index f98c79a5c0..4fc65aab20 100644
--- 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
index aa07a1505e..a5bc9f381b 100644
--- 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
index 4ab1f417da..c1c82d2f5d 100644
--- 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
index 1c5c50ac06..3187de4b2e 100644
--- 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
index b8600e6c58..ba2e9df47f 100644
--- 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
index 8f63cdf2f7..6976156db0 100644
--- 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
index cf8553120c..2e36a562cc 100644
--- 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
index 48eb98726f..59a9fc417c 100644
--- 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
index 80f61a389d..dd933e399c 100644
--- 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
index 4bbd1c92be..c7e4807701 100644
--- 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
index 1b7830e834..3b3af48bc2 100644
--- 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
index 1a31287ae6..74afa7a0b3 100644
--- 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,10 +70,11 @@ 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 ? (
@@ -77,10 +82,20 @@ export function ComponentNavItem({
       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,32 +198,41 @@ 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>
@@ -218,10 +240,16 @@ function Menu() {
         <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}
diff --git a/www/src/config.js b/www/src/config.js
index 015eb4cf8f..e01fccae3e 100644
--- a/www/src/config.js
+++ b/www/src/config.js
@@ -130,9 +130,49 @@ const INSIGHTS_PAGES = [
   },
 ];
 
+const FOUNDATION_PAGES = [
+  {
+    label: 'Colors',
+    path: '/foundations/colors/',
+  },
+  {
+    label: 'Elevation',
+    path: '/foundations/elevation/',
+  },
+  {
+    label: 'Typography',
+    path: '/foundations/typography/',
+  },
+  {
+    label: 'Layout',
+    path: '/foundations/layout/',
+  },
+  {
+    label: 'Spacing',
+    path: '/foundations/spacing/',
+  },
+  {
+    label: 'Icons',
+    path: '/foundations/icons/',
+  },
+  {
+    label: 'CSS Utilities',
+    path: '/foundations/css-utilities/',
+  },
+  {
+    label: 'Responsive',
+    path: '/foundations/responsive/',
+  },
+  {
+    label: 'Brand icons',
+    path: '/foundations/brand-icons/',
+  },
+];
+
 module.exports = {
   INSIGHTS_TABS,
   INSIGHTS_PAGES,
   FEATURES,
   LANGUAGES,
+  FOUNDATION_PAGES,
 };
diff --git a/www/src/pages/guides/installation-and-usage.mdx b/www/src/pages/guides/getting-started.mdx
similarity index 94%
rename from www/src/pages/guides/installation-and-usage.mdx
rename to www/src/pages/guides/getting-started.mdx
index d2ccfb4847..719c29ebe0 100644
--- a/www/src/pages/guides/installation-and-usage.mdx
+++ b/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: