feat: added logic for Edit page button

src/Breadcrumb/README.md

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

src/Button/button-group.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Button Group'
+title: 'ButtonGroup'
 type: 'component'
 components:
 - ButtonGroup

src/DataTable/dataviews.mdx

@@ -2,6 +2,10 @@
 title: 'Data views'
 type: 'component'
 components:
+- DataTable
+- DataTableTable
+- TableControlBar
+- TableFooter
 - Table
 - TableCell
 - TableHeaderCell

src/DataTable/tablefilters.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Table Filters'
+title: 'TableFilters'
 type: 'component'
 components:
 - TextFilter

src/Form/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Forms'
+title: 'Form'
 type: 'component'
 components:
 - Form

src/Form/input-group.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Input Group'
+title: 'InputGroup'
 type: 'component'
 categories:
 - Forms

src/Overlay/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Overlays'
+title: 'Overlay'
 type: 'component'
 components:
 - Overlay

src/PageBanner/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Page Banner'
+title: 'PageBanner'
 type: 'component'
 components:
 - PageBanner

src/ProgressBar/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Progress Bar'
+title: 'ProgressBar'
 type: 'component'
 components:
 - ProgressBar

www/src/components/PageEditBtn/constants.js

@@ -0,0 +1,35 @@
+const BASE_PATH = 'https://github.com/openedx/paragon/edit/master/src';
+
+const componentsNamesMap = {
+  'AlertModal': 'Modal/alert-modal.mdx',
+  'ButtonGroup': 'Button/button-group.mdx',
+  'Data views': 'DataTable/dataviews.mdx',
+  'Form.Autosuggest': 'Form/form-autosuggest.mdx',
+  'Form.Checkbox': 'Form/form-checkbox.mdx',
+  'Form.Control': 'Form/form-control.mdx',
+  'Form.Control.Feedback': 'Form/form-control-feedback.mdx',
+  'Form.Group': 'Form/form-group.mdx',
+  'Form.Label': 'Form/form-label.mdx',
+  'Form.Radio': 'Form/form-radio.mdx',
+  'Form.Switch': 'Form/form-switch.mdx',
+  'FullscreenModal': 'Modal/fullscreen-modal.mdx',
+  'InputGroup': 'Form/input-group.mdx',
+  'MarketingModal': 'Modal/marketing-modal.mdx',
+  'ModalDialog': 'Modal/modal-dialog.mdx',
+  'ModalLayer': 'Modal/modal-layer.mdx',
+  'ModalPopup': 'Modal/modal-popup.mdx',
+  'OverflowScroll': 'OverflowScroll/OverflowScroll.mdx',
+  'SelectMenu': 'Menu/select-menu.md',
+  'StandardModal': 'Modal/standard-modal.mdx',
+  'TableControlBar': 'DataTable/tablecontrolbar.mdx',
+  'TableFilters': 'DataTable/tablefilters.mdx',
+  'TableFooter': 'DataTable/tablefooter.mdx',
+  'useArrowKeyNavigation': 'hooks/useArrowKeyNavigation.mdx',
+  'useIndexOfLastVisibleChild': 'hooks/useIndexOfLastVisibleChild.mdx',
+  'useIsVisible': 'hooks/useIsVisible.mdx',
+  'useOverflowScroll': 'OverflowScroll/useOverflowScroll.mdx',
+  'useToggle': 'hooks/useToggle.mdx',
+  'useWindowSize': 'hooks/useWindowSize.mdx',
+};
+
+export { BASE_PATH, componentsNamesMap };

www/src/components/PageEditBtn/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Hyperlink } from '~paragon-react';
+import { BASE_PATH, componentsNamesMap } from './constants';
+
+function PageEditBtn({ componentTitle, ...props }) {
+  const pageEditUrl = componentsNamesMap[componentTitle]
+    ? `${BASE_PATH}/${componentsNamesMap[componentTitle]}`
+    : `${BASE_PATH}/${componentTitle}/README.md`;
+
+  const handlePageEditBtnClick = () => {
+    global.analytics.track('openedx.paragon.docs.page_edit.clicked');
+  };
+
+  return (
+    <Button
+      size="sm"
+      as={Hyperlink}
+      destination={pageEditUrl}
+      variant="tertiary"
+      onClick={handlePageEditBtnClick}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+    >
+      Edit this page
+    </Button>
+  );
+}
+
+PageEditBtn.propTypes = {
+  componentTitle: PropTypes.string.isRequired,
+};
+
+export default PageEditBtn;

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

@@ -99,6 +99,7 @@ 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));
 
@@ -142,7 +143,7 @@ export default function PageTemplate({
         <div className="d-flex justify-content-between align-items-start">
           <h1 className="mb-4">{mdx.frontmatter.title}</h1>
           <Stack direction="horizontal" gap={3}>
-            <PageEditBtn />
+            <PageEditBtn componentTitle={componentTitle} />
             <LeaveFeedback />
           </Stack>
         </div>