refactor: refactorng after review

src/Breadcrumb/README.md

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

www/src/components/PageEditBtn/index.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Hyperlink } from '~paragon-react';
-import { PATH_TO_EDIT_PAGE, componentsNamesMap } from './constants';
 
-function PageEditBtn({ componentTitle, ...props }) {
-  const pageEditUrl = componentsNamesMap[componentTitle]
-    ? `${PATH_TO_EDIT_PAGE}/${componentsNamesMap[componentTitle]}`
-    : `${PATH_TO_EDIT_PAGE}/${componentTitle}/README.md`;
+function PageEditBtn({ githubEditPath, ...props }) {
+  const pageEditUrl = `https://github.com/openedx/paragon/edit/master/src${githubEditPath}`;
 
   const handlePageEditBtnClick = () => {
     global.analytics.track('openedx.paragon.docs.page_edit.clicked');
@@ -29,7 +26,7 @@ function PageEditBtn({ componentTitle, ...props }) {
 }
 
 PageEditBtn.propTypes = {
-  componentTitle: PropTypes.string.isRequired,
+  githubEditPath: PropTypes.string.isRequired,
 };
 
 export default PageEditBtn;

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));
 
@@ -140,13 +140,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 && 'horizontal'}
+        >
+          <h1 className={isMobile ? 'mb-2' : 'mb-4'}>
+            {mdx.frontmatter.title}
+          </h1>
+          <Stack
+            className="mb-4"
+            direction={!isMobile && 'horizontal'}
+            gap={3}
+          >
+            <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,
       },
     });
   }