refactor: refactoring after reviw

openedx · Nov 15, 2023 · b8e5dfa · b8e5dfa
1 parent 222460e
commit b8e5dfa
Show file tree

Hide file tree

Showing 17 changed files with 50 additions and 160 deletions.
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/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.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 {
@@ -68,29 +69,28 @@ export interface IComponentNavItem {
     type: string,
     status?: string,
   },
-  componentName: string,
+  isActive: boolean,
 }
 
 export function ComponentNavItem({
-  id, fields, frontmatter, componentName, ...props
+  id, fields, frontmatter, isActive, ...props
 }: IComponentNavItem) {
   const isDeprecated = frontmatter?.status?.toLowerCase().includes('deprecate') || false;
-  const isCurrentComponent = frontmatter.title === componentName;
   const linkNode = isDeprecated ? (
     <OverlayTrigger
       placement="right"
       overlay={<Tooltip id={`tooltip-deprecated-${id}`}>Deprecated</Tooltip>}
     >
       <Link
-        className={classNames('text-muted', { active: isCurrentComponent })}
+        className={classNames('text-muted', { active: isActive })}
         to={fields.slug}
       >
         {frontmatter.title}
       </Link>
     </OverlayTrigger>
   ) : (
     <Link
-      className={classNames({ active: isCurrentComponent })}
+      className={classNames({ active: isActive })}
       to={fields.slug}
     >
       {frontmatter.title}
@@ -113,11 +113,7 @@ ComponentNavItem.propTypes = {
     title: PropTypes.string.isRequired,
     status: PropTypes.string,
   }).isRequired,
-  componentName: PropTypes.string,
-};
-
-ComponentNavItem.defaultProps = {
-  componentName: undefined,
+  isActive: PropTypes.bool.isRequired,
 };
 
 export type MenuComponentListTypes = {
@@ -173,11 +169,12 @@ const foundationLinks = [
   'Colors', 'Elevation', 'Typography', 'Layout', 'Spacing', 'Icons', 'CSS-Utilities', 'Responsive', 'Brand-icons',
 ];
 
-function Menu({ componentName, componentCategories }) {
+function Menu() {
   const {
     settings,
     handleSettingsChange,
   } = useContext(SettingsContext);
+  const { pathname } = useLocation();
   const { components } = useStaticQuery(menuQuery);
   const { categories }: IMenuQueryComponents = components;
 
@@ -204,12 +201,12 @@ function Menu({ componentName, componentCategories }) {
         <Collapsible
           styling="basic"
           title="Guides"
-          defaultOpen={componentCategories === 'guides'}
+          defaultOpen={pathname.startsWith('/guides')}
         >
           <ul className="list-unstyled">
             <li>
               <Link
-                className={classNames({ active: componentName === 'getting-started' })}
+                className={classNames({ active: pathname.endsWith('getting-started') })}
                 to="/guides/getting-started"
               >
                 Getting started
@@ -228,29 +225,37 @@ function Menu({ componentName, componentCategories }) {
         <Collapsible
           styling="basic"
           title="Foundations"
-          defaultOpen={componentCategories === 'foundations'}
+          defaultOpen={pathname.startsWith('/foundations')}
         >
           <ul className="list-unstyled foundations-list">
-            {foundationLinks.map(link => (
-              <li key={link}>
-                <Link
-                  className={classNames({ active: componentName === link.toLowerCase().trim() })}
-                  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={componentCategories === 'tools'}
+          defaultOpen={pathname.startsWith('/tools') || pathname.startsWith('/insights')}
         >
           <ul className="list-unstyled foundations-list">
             <li>
-              <Link className={classNames({ active: componentName === 'insights' })} to="/insights">Usage Insights</Link>
+              <Link
+                className={classNames({ active: pathname.endsWith('insights') })}
+                to="/insights"
+              >
+                Usage Insights
+              </Link>
             </li>
             <li>
               <Link to="/playground" onClick={handlePlaygroundClick}>
@@ -260,7 +265,7 @@ function Menu({ componentName, componentCategories }) {
             </li>
             <li>
               <Link
-                className={classNames({ active: componentName === 'component-generator' })}
+                className={classNames({ active: pathname.endsWith('component-generator') })}
                 to="/tools/component-generator"
               >
                 Component Generator
@@ -286,14 +291,14 @@ function Menu({ componentName, componentCategories }) {
               key={fieldValue}
               styling="basic"
               title={fieldValue}
-              defaultOpen={componentCategories?.includes(fieldValue)}
+              defaultOpen={nodes.some(({ fields }) => fields.slug === pathname)}
             >
               <ul className="list-unstyled">
                 {nodes.map((node) => (
                   <ComponentNavItem
                     key={node.id}
                     {...node}
-                    componentName={componentName}
+                    isActive={pathname === node.fields.slug}
                   />
                 ))}
               </ul>
@@ -319,14 +324,4 @@ function Menu({ componentName, componentCategories }) {
   );
 }
 
-Menu.propTypes = {
-  componentName: PropTypes.string,
-  componentCategories: PropTypes.arrayOf(PropTypes.string),
-};
-
-Menu.defaultProps = {
-  componentName: undefined,
-  componentCategories: undefined,
-};
-
 export default Menu;
diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx
@@ -43,8 +43,6 @@ export interface ILayout {
   tab?: string,
   isAutoToc?: boolean,
   githubEditPath?: string,
-  componentName?: string,
-  componentCategories?: string[],
 }
 
 function Layout({
@@ -56,8 +54,6 @@ function Layout({
   isAutoToc,
   tab,
   githubEditPath,
-  componentCategories,
-  componentName,
 }: ILayout) {
   const isMobile = useMediaQuery({ maxWidth: breakpoints.extraLarge.minWidth });
   const { settings } = useContext(SettingsContext);
@@ -76,16 +72,14 @@ function Layout({
       <Header
         siteTitle={data.site.siteMetadata?.title || 'Title'}
         showMinimizedTitle={isMobile || showMinimizedTitle}
-        componentCategories={componentCategories}
-        componentName={componentName}
       />
       <Settings showMinimizedTitle={showMinimizedTitle} />
       {isMdx || !hideFooterComponentMenu ? (
         <Container fluid>
           <Row className="flex-xl-nowrap">
             <Col className="d-none d-xl-block p-0" xl={settings.containerWidth === 'xl' ? 'auto' : 2}>
               <Sticky offset={6} className="pgn-doc__toc p-0 pt-3">
-                <Menu componentName={componentName} componentCategories={componentCategories} />
+                <Menu />
               </Sticky>
             </Col>
             <Col
@@ -199,8 +193,6 @@ Layout.propTypes = {
   isMdx: PropTypes.bool,
   tab: PropTypes.string,
   githubEditPath: PropTypes.string,
-  componentName: PropTypes.string,
-  componentCategories: PropTypes.arrayOf(PropTypes.string),
 };
 
 Layout.defaultProps = {
@@ -211,8 +203,6 @@ Layout.defaultProps = {
   tab: undefined,
   isAutoToc: false,
   githubEditPath: undefined,
-  componentName: undefined,
-  componentCategories: undefined,
 };
 
 export default Layout;
diff --git a/www/src/components/header/Header.tsx b/www/src/components/header/Header.tsx
@@ -14,13 +14,9 @@ import Menu from '../Menu';
 export interface IHeaderProps {
   siteTitle: string,
   showMinimizedTitle?: boolean,
-  componentName?: string,
-  componentCategories?: string[],
 }
 
-function Header({
-  siteTitle, showMinimizedTitle, componentName, componentCategories,
-}: IHeaderProps) {
+function Header({ siteTitle, showMinimizedTitle }: IHeaderProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isOpen, , close, toggle] = useToggle(false);
   const [target, setTarget] = useState(null);
@@ -52,7 +48,7 @@ function Header({
             isFullscreenOnMobile
           >
             <div className="pgn-doc__header-home--menu">
-              <Menu componentName={componentName} componentCategories={componentCategories} />
+              <Menu />
             </div>
           </ModalDialog>
         ) : (
@@ -65,7 +61,7 @@ function Header({
             onEscapeKey={close}
           >
             <div className="pgn-doc__header-home--menu">
-              <Menu componentName={componentName} componentCategories={componentCategories} />
+              <Menu />
             </div>
           </ModalPopup>
         )}
@@ -77,15 +73,11 @@ function Header({
 Header.propTypes = {
   siteTitle: PropTypes.string,
   showMinimizedTitle: PropTypes.bool,
-  componentName: PropTypes.string,
-  componentCategories: PropTypes.arrayOf(PropTypes.string),
 };
 
 Header.defaultProps = {
   siteTitle: '',
   showMinimizedTitle: false,
-  componentName: undefined,
-  componentCategories: undefined,
 };
 
 export default Header;
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
@@ -123,24 +123,16 @@ export interface IColorsPage {
   },
   pageContext: {
     githubEditPath: string,
-    componentName: string,
-    componentCategories: string[],
   }
 }
 
 // eslint-disable-next-line react/prop-types
 export default function ColorsPage({ data, pageContext }: IColorsPage) {
   const { settings } = useContext(SettingsContext);
-  const { githubEditPath, componentCategories, componentName } = pageContext;
   parseColors(data.allCssUtilityClasses.nodes); // eslint-disable-line react/prop-types
 
   return (
-    <Layout
-      isAutoToc
-      githubEditPath={githubEditPath}
-      componentCategories={componentCategories}
-      componentName={componentName}
-    >
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Colors" />
       <Container size={settings.containerWidth} className="py-5">

diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.jsx
@@ -270,7 +270,6 @@ function BoxShadowGenerator() {
 
 export default function ElevationPage({ pageContext }) {
   const { settings } = useContext(SettingsContext);
-  const { githubEditPath, componentCategories, componentName } = pageContext;
 
   const levelTitle = boxShadowLevels.map(level => (
     <p key={level} className="pgn-doc__box-shadow-level-title h3">
@@ -285,12 +284,7 @@ export default function ElevationPage({ pageContext }) {
   ));
 
   return (
-    <Layout
-      isAutoToc
-      githubEditPath={githubEditPath}
-      componentCategories={componentCategories}
-      componentName={componentName}
-    >
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Elevation" />
       <Container size={settings.containerWidth} className="py-5">
@@ -409,7 +403,5 @@ export default function ElevationPage({ pageContext }) {
 ElevationPage.propTypes = {
   pageContext: PropTypes.shape({
     githubEditPath: PropTypes.string,
-    componentName: PropTypes.string,
-    componentCategories: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,
 };
diff --git a/www/src/pages/foundations/responsive.jsx b/www/src/pages/foundations/responsive.jsx
@@ -51,7 +51,6 @@ function MaxWidthCell({ row }) {
 
 function Responsive({ pageContext }) {
   const { settings } = useContext(SettingsContext);
-  const { githubEditPath, componentCategories, componentName } = pageContext;
   const breakpointsData = Object.keys(breakpoints).map(breakpoint => {
     const { minWidth, maxWidth } = breakpoints[breakpoint];
     const breakpointData = getBreakpointDescription(breakpoint);
@@ -61,12 +60,7 @@ function Responsive({ pageContext }) {
   });
 
   return (
-    <Layout
-      isAutoToc
-      githubEditPath={githubEditPath}
-      componentCategories={componentCategories}
-      componentName={componentName}
-    >
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Responsive" />
       <Container size={settings.containerWidth} className="py-5">
@@ -113,8 +107,6 @@ function Responsive({ pageContext }) {
 Responsive.propTypes = {
   pageContext: PropTypes.shape({
     githubEditPath: PropTypes.string,
-    componentName: PropTypes.string,
-    componentCategories: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,
 };