refactor: fixed categories of some components

src/Avatar/README.md

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

src/Image/README.md

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

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

www/src/components/Menu.tsx

@@ -9,6 +9,7 @@ import {
   Collapsible,
   Hyperlink,
   ButtonGroup,
+  Image,
 } from '~paragon-react';
 import classNames from 'classnames';
 import Search from './Search';
@@ -112,7 +113,11 @@ ComponentNavItem.propTypes = {
     title: PropTypes.string.isRequired,
     status: PropTypes.string,
   }).isRequired,
-  componentName: PropTypes.string.isRequired,
+  componentName: PropTypes.string,
+};
+
+ComponentNavItem.defaultProps = {
+  componentName: undefined,
 };
 
 export type MenuComponentListTypes = {
@@ -287,8 +292,8 @@ function Menu({ componentName, componentCategories }) {
                 {nodes.map((node) => (
                   <ComponentNavItem
                     key={node.id}
-                    componentName={componentName}
                     {...node}
+                    componentName={componentName}
                   />
                 ))}
               </ul>
@@ -302,8 +307,8 @@ function Menu({ componentName, componentCategories }) {
         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}
@@ -315,8 +320,13 @@ function Menu({ componentName, componentCategories }) {
 }
 
 Menu.propTypes = {
-  componentName: PropTypes.string.isRequired,
-  componentCategories: PropTypes.arrayOf(PropTypes.string).isRequired,
+  componentName: PropTypes.string,
+  componentCategories: PropTypes.arrayOf(PropTypes.string),
+};
+
+Menu.defaultProps = {
+  componentName: undefined,
+  componentCategories: undefined,
 };
 
 export default Menu;

www/src/components/PageLayout.tsx

@@ -43,8 +43,8 @@ export interface ILayout {
   tab?: string,
   isAutoToc?: boolean,
   githubEditPath?: string,
-  componentName: string,
-  componentCategories: string[],
+  componentName?: string,
+  componentCategories?: string[],
 }
 
 function Layout({
@@ -79,6 +79,8 @@ function Layout({
       <Header
         siteTitle={data.site.siteMetadata?.title || 'Title'}
         showMinimizedTitle={isMobile || showMinimizedTitle}
+        componentCategories={componentCategories}
+        componentName={componentName}
       />
       <Settings showMinimizedTitle={showMinimizedTitle} />
       {isMdx || !hideFooterComponentMenu ? (
@@ -200,6 +202,8 @@ Layout.propTypes = {
   isMdx: PropTypes.bool,
   tab: PropTypes.string,
   githubEditPath: PropTypes.string,
+  componentName: PropTypes.string,
+  componentCategories: PropTypes.arrayOf(PropTypes.string),
 };
 
 Layout.defaultProps = {
@@ -210,6 +214,8 @@ Layout.defaultProps = {
   tab: undefined,
   isAutoToc: false,
   githubEditPath: undefined,
+  componentName: undefined,
+  componentCategories: undefined,
 };
 
 export default Layout;

www/src/components/header/Header.tsx

@@ -14,9 +14,13 @@ import Menu from '../Menu';
 export interface IHeaderProps {
   siteTitle: string,
   showMinimizedTitle?: boolean,
+  componentName?: string,
+  componentCategories?: string[],
 }
 
-function Header({ siteTitle, showMinimizedTitle }: IHeaderProps) {
+function Header({
+  siteTitle, showMinimizedTitle, componentName, componentCategories,
+}: IHeaderProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isOpen, , close, toggle] = useToggle(false);
   const [target, setTarget] = useState(null);
@@ -48,7 +52,7 @@ function Header({ siteTitle, showMinimizedTitle }: IHeaderProps) {
             isFullscreenOnMobile
           >
             <div className="pgn-doc__header-home--menu">
-              <Menu />
+              <Menu componentName={componentName} componentCategories={componentCategories} />
             </div>
           </ModalDialog>
         ) : (
@@ -61,7 +65,7 @@ function Header({ siteTitle, showMinimizedTitle }: IHeaderProps) {
             onEscapeKey={close}
           >
             <div className="pgn-doc__header-home--menu">
-              <Menu />
+              <Menu componentName={componentName} componentCategories={componentCategories} />
             </div>
           </ModalPopup>
         )}
@@ -73,11 +77,15 @@ function Header({ siteTitle, showMinimizedTitle }: IHeaderProps) {
 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;

www/src/pages/foundations/typography.tsx

@@ -409,5 +409,7 @@ export default function TypographyPage({ pageContext }) {
 TypographyPage.propTypes = {
   pageContext: PropTypes.shape({
     githubEditPath: PropTypes.string,
+    componentCategories: PropTypes.arrayOf(PropTypes.string),
+    componentName: PropTypes.string,
   }).isRequired,
 };