refactor: refactorng after review

src/Breadcrumb/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Breadcrumb'
+title: 'Breadcrumbs'
 type: 'component'
 components:
 - Breadcrumb

www/src/components/LeaveFeedback.tsx

@@ -22,7 +22,6 @@ function LeaveFeedback({ isNavLink, ...props }: LeaveFeedbackProps) {
         onClick={handleLinkFeedbackClick}
         href={FEEDBACK_URL}
         target="_blank"
-        rel="noopener noreferrer"
         {...props}
       >
         {leaveFeedbackLinkTitle}

www/src/components/PageEditBtn/index.tsx

@@ -1,17 +1,33 @@
-import React from 'react';
+import React, { AnchorHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Hyperlink } from '~paragon-react';
-import { PATH_TO_EDIT_PAGE, componentsNamesMap } from './constants';
+import { Button, Hyperlink, Nav } from '~paragon-react';
 
-function PageEditBtn({ componentTitle, ...props }) {
-  const pageEditUrl = componentsNamesMap[componentTitle]
-    ? `${PATH_TO_EDIT_PAGE}/${componentsNamesMap[componentTitle]}`
-    : `${PATH_TO_EDIT_PAGE}/${componentTitle}/README.md`;
+export interface PageEditBtnProps extends Partial<AnchorHTMLAttributes<HTMLAnchorElement>> {
+  githubEditPath: string,
+  isNavLink?: boolean;
+}
+
+function PageEditBtn({ githubEditPath, isNavLink, ...props }: PageEditBtnProps) {
+  const pageEditUrl = `https://github.com/openedx/paragon/edit/master/src${githubEditPath}`;
+  const pageEditLinkTitle = 'Edit this page';
 
   const handlePageEditBtnClick = () => {
     global.analytics.track('openedx.paragon.docs.page_edit.clicked');
   };
 
+  if (isNavLink) {
+    return (
+      <Nav.Link
+        onClick={handlePageEditBtnClick}
+        href={pageEditUrl}
+        target="_blank"
+        {...props}
+      >
+        {pageEditLinkTitle}
+      </Nav.Link>
+    );
+  }
+
   return (
     <Button
       size="sm"
@@ -20,16 +36,20 @@ function PageEditBtn({ componentTitle, ...props }) {
       variant="tertiary"
       onClick={handlePageEditBtnClick}
       target="_blank"
-      rel="noopener noreferrer"
       {...props}
     >
-      Edit this page
+      {pageEditLinkTitle}
     </Button>
   );
 }
 
 PageEditBtn.propTypes = {
-  componentTitle: PropTypes.string.isRequired,
+  githubEditPath: PropTypes.string.isRequired,
+  isNavLink: PropTypes.bool,
+};
+
+PageEditBtn.defaultProps = {
+  isNavLink: false,
 };
 
 export default PageEditBtn;

www/src/components/PageLayout.tsx

@@ -17,6 +17,7 @@ import {
   Sticky,
   useMediaQuery,
   breakpoints,
+  Stack,
 } from '~paragon-react';
 import ComponentsList from './ComponentsList';
 import Header from './header';
@@ -26,6 +27,7 @@ import Toc from './Toc';
 import { SettingsContext } from '../context/SettingsContext';
 import LeaveFeedback from './LeaveFeedback';
 import AutoToc from './AutoToc';
+import PageEditBtn from './PageEditBtn';
 
 if (process.env.NODE_ENV === 'development') {
   /* eslint-disable-next-line global-require */
@@ -40,6 +42,7 @@ export interface ILayout {
   tocData: Array<number>,
   tab?: string,
   isAutoToc?: boolean,
+  githubEditPath: string,
 }
 
 function Layout({
@@ -50,6 +53,7 @@ function Layout({
   tocData,
   isAutoToc,
   tab,
+  githubEditPath,
 }: ILayout) {
   const isMobile = useMediaQuery({ maxWidth: breakpoints.extraLarge.minWidth });
   const { settings } = useContext(SettingsContext);
@@ -88,7 +92,12 @@ function Layout({
               {children}
               <Container size="md">
                 <hr />
-                <LeaveFeedback className="mb-5" />
+                <Stack direction="horizontal" gap={2}>
+                  {isMdx && (
+                    <PageEditBtn className="mb-5" githubEditPath={githubEditPath} />
+                  )}
+                  <LeaveFeedback className="mb-5" />
+                </Stack>
               </Container>
             </Col>
             <Col
@@ -142,6 +151,15 @@ function Layout({
           <Nav.Item>
             <LeaveFeedback className="muted-link" isNavLink />
           </Nav.Item>
+          {isMdx && (
+          <Nav.Item>
+            <PageEditBtn
+              className="muted-link"
+              githubEditPath={githubEditPath}
+              isNavLink
+            />
+          </Nav.Item>
+          )}
           <div className="flex-grow-1" />
           <Nav.Link
             className="muted-link"

www/src/templates/component-page-template.tsx

@@ -43,6 +43,7 @@ export interface IPageTemplate {
   pageContext: {
     scssVariablesData: Record<string, string>,
     componentsUsageInsights: string[],
+    githubEditPath: string,
   }
 }
 
@@ -52,7 +53,7 @@ export type ShortCodesTypes = {
 
 export default function PageTemplate({
   data: { mdx, components: componentNodes },
-  pageContext: { scssVariablesData, componentsUsageInsights },
+  pageContext: { scssVariablesData, componentsUsageInsights, githubEditPath },
 }: IPageTemplate) {
   const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
   const [showMinimizedTitle, setShowMinimizedTitle] = useState(false);
@@ -99,7 +100,6 @@ export default function PageTemplate({
   const usageInsightsUrl = 'usage-insights';
 
   const sortedComponentNames = mdx.frontmatter?.components || [];
-  const componentTitle = mdx.frontmatter.title;
   const filteredComponentsUsageInsights = componentsUsageInsights.map(componentName => componentName.replace(/\./g, ''));
   const isUsageInsights = (sortedComponentNames as []).some(value => filteredComponentsUsageInsights.includes(value));
 
@@ -130,6 +130,7 @@ export default function PageTemplate({
       showMinimizedTitle={showMinimizedTitle}
       isMdx
       tocData={getTocData()}
+      githubEditPath={githubEditPath}
     >
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title={mdx.frontmatter.title} />
@@ -140,13 +141,22 @@ export default function PageTemplate({
             <p className="small mb-0">{mdx.frontmatter.notes}</p>
           </Alert>
         )}
-        <div className="d-flex justify-content-between align-items-start">
-          <h1 className="mb-4">{mdx.frontmatter.title}</h1>
-          <Stack direction="horizontal" gap={3}>
-            <PageEditBtn componentTitle={componentTitle} />
+        <Stack
+          className="justify-content-between"
+          direction={isMobile ? 'vertical' : 'horizontal'}
+        >
+          <h1 className={isMobile ? 'mb-2' : 'mb-4'}>
+            {mdx.frontmatter.title}
+          </h1>
+          <Stack
+            className="mb-4"
+            direction={isMobile ? 'vertical' : 'horizontal'}
+            gap={2}
+          >
+            <PageEditBtn githubEditPath={githubEditPath} />
             <LeaveFeedback />
           </Stack>
-        </div>
+        </Stack>
         <MDXProvider components={shortcodes}>
           <MDXRenderer>{mdx.body}</MDXRenderer>
         </MDXProvider>

www/utils/createPages.js

@@ -29,6 +29,7 @@ async function createPages(graphql, actions, reporter) {
               components
             }
             slug
+            fileAbsolutePath
           }
         }
       }
@@ -47,6 +48,7 @@ async function createPages(graphql, actions, reporter) {
   for (const { node } of components) {
     const componentDir = node.slug.split('/')[0];
     const variablesPath = path.resolve(__dirname, `../../src/${componentDir}/_variables.scss`);
+    const githubEditPath = node.fileAbsolutePath.split('src')[1];
     let scssVariablesData = {};
 
     if (fs.existsSync(variablesPath)) {
@@ -67,6 +69,7 @@ async function createPages(graphql, actions, reporter) {
         components: node.frontmatter.components || [],
         scssVariablesData,
         componentsUsageInsights: Object.keys(componentsUsage),
+        githubEditPath,
       },
     });
   }