From 604acb743db2d533194caca66fc8f81f1fdbb0c2 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 7 Sep 2023 19:11:20 +0300 Subject: [PATCH 1/5] feat: added Edit this page button --- www/src/components/PageEditBtn.tsx | 22 +++++++++++++++++++ www/src/templates/component-page-template.tsx | 7 +++++- 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 www/src/components/PageEditBtn.tsx diff --git a/www/src/components/PageEditBtn.tsx b/www/src/components/PageEditBtn.tsx new file mode 100644 index 0000000000..3da0e8dc05 --- /dev/null +++ b/www/src/components/PageEditBtn.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Button } from '~paragon-react'; + +function PageEditBtn({ ...props }) { + const handlePageEditBtnClick = () => { + global.analytics.track('openedx.paragon.docs.page_edit.clicked'); + // TODO: further development of the CTA will add functionality. + }; + + return ( + + ); +} + +export default PageEditBtn; diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx index a665942699..5fc2badb5a 100644 --- a/www/src/templates/component-page-template.tsx +++ b/www/src/templates/component-page-template.tsx @@ -9,6 +9,7 @@ import { Alert, breakpoints, useMediaQuery, + Stack, } from '~paragon-react'; import { SettingsContext } from '../context/SettingsContext'; import { DEFAULT_THEME } from '../../theme-config'; @@ -19,6 +20,7 @@ import SEO from '../components/SEO'; import LinkedHeading from '../components/LinkedHeading'; import ComponentsUsage from '../components/insights/ComponentsUsage'; import LeaveFeedback from '../components/LeaveFeedback'; +import PageEditBtn from '../components/PageEditBtn'; export interface IPageTemplate { data: { @@ -139,7 +141,10 @@ export default function PageTemplate({ )}

{mdx.frontmatter.title}

- + + + +
{mdx.body} From 241ebc7aca69924707863264f0166185315ff8c3 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Mon, 11 Sep 2023 13:42:38 +0300 Subject: [PATCH 2/5] feat: added logic for Edit page button --- src/Breadcrumb/README.md | 2 +- src/Button/button-group.mdx | 2 +- src/DataTable/dataviews.mdx | 4 +++ src/DataTable/tablefilters.mdx | 2 +- src/Form/README.md | 2 +- src/Form/input-group.mdx | 2 +- src/Overlay/README.md | 2 +- src/PageBanner/README.md | 2 +- src/ProgressBar/README.md | 2 +- www/src/components/PageEditBtn.tsx | 22 ------------ www/src/components/PageEditBtn/constants.js | 35 +++++++++++++++++++ www/src/components/PageEditBtn/index.tsx | 35 +++++++++++++++++++ www/src/templates/component-page-template.tsx | 3 +- 13 files changed, 84 insertions(+), 31 deletions(-) delete mode 100644 www/src/components/PageEditBtn.tsx create mode 100644 www/src/components/PageEditBtn/constants.js create mode 100644 www/src/components/PageEditBtn/index.tsx diff --git a/src/Breadcrumb/README.md b/src/Breadcrumb/README.md index 8f9665e827..bd063bd2f1 100644 --- a/src/Breadcrumb/README.md +++ b/src/Breadcrumb/README.md @@ -1,5 +1,5 @@ --- -title: 'Breadcrumbs' +title: 'Breadcrumb' type: 'component' components: - Breadcrumb diff --git a/src/Button/button-group.mdx b/src/Button/button-group.mdx index 07c1d88d89..9ea7218d81 100644 --- a/src/Button/button-group.mdx +++ b/src/Button/button-group.mdx @@ -1,5 +1,5 @@ --- -title: 'Button Group' +title: 'ButtonGroup' type: 'component' components: - ButtonGroup diff --git a/src/DataTable/dataviews.mdx b/src/DataTable/dataviews.mdx index ab72712afe..a1cbe98ab7 100644 --- a/src/DataTable/dataviews.mdx +++ b/src/DataTable/dataviews.mdx @@ -2,6 +2,10 @@ title: 'Data views' type: 'component' components: +- DataTable +- DataTableTable +- TableControlBar +- TableFooter - Table - TableCell - TableHeaderCell diff --git a/src/DataTable/tablefilters.mdx b/src/DataTable/tablefilters.mdx index 8e17ea966f..a339c58aa9 100644 --- a/src/DataTable/tablefilters.mdx +++ b/src/DataTable/tablefilters.mdx @@ -1,5 +1,5 @@ --- -title: 'Table Filters' +title: 'TableFilters' type: 'component' components: - TextFilter diff --git a/src/Form/README.md b/src/Form/README.md index 169df227b4..f295d3ef53 100644 --- a/src/Form/README.md +++ b/src/Form/README.md @@ -1,5 +1,5 @@ --- -title: 'Forms' +title: 'Form' type: 'component' components: - Form diff --git a/src/Form/input-group.mdx b/src/Form/input-group.mdx index d4bcf1e9a8..b19fd28b25 100644 --- a/src/Form/input-group.mdx +++ b/src/Form/input-group.mdx @@ -1,5 +1,5 @@ --- -title: 'Input Group' +title: 'InputGroup' type: 'component' categories: - Forms diff --git a/src/Overlay/README.md b/src/Overlay/README.md index 82d2ed8b4d..da86dc330c 100644 --- a/src/Overlay/README.md +++ b/src/Overlay/README.md @@ -1,5 +1,5 @@ --- -title: 'Overlays' +title: 'Overlay' type: 'component' components: - Overlay diff --git a/src/PageBanner/README.md b/src/PageBanner/README.md index a28ca9f185..b73325108e 100644 --- a/src/PageBanner/README.md +++ b/src/PageBanner/README.md @@ -1,5 +1,5 @@ --- -title: 'Page Banner' +title: 'PageBanner' type: 'component' components: - PageBanner diff --git a/src/ProgressBar/README.md b/src/ProgressBar/README.md index 2a0ec266f8..d2697a4c18 100644 --- a/src/ProgressBar/README.md +++ b/src/ProgressBar/README.md @@ -1,5 +1,5 @@ --- -title: 'Progress Bar' +title: 'ProgressBar' type: 'component' components: - ProgressBar diff --git a/www/src/components/PageEditBtn.tsx b/www/src/components/PageEditBtn.tsx deleted file mode 100644 index 3da0e8dc05..0000000000 --- a/www/src/components/PageEditBtn.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { Button } from '~paragon-react'; - -function PageEditBtn({ ...props }) { - const handlePageEditBtnClick = () => { - global.analytics.track('openedx.paragon.docs.page_edit.clicked'); - // TODO: further development of the CTA will add functionality. - }; - - return ( - - ); -} - -export default PageEditBtn; diff --git a/www/src/components/PageEditBtn/constants.js b/www/src/components/PageEditBtn/constants.js new file mode 100644 index 0000000000..7b1b27ff5e --- /dev/null +++ b/www/src/components/PageEditBtn/constants.js @@ -0,0 +1,35 @@ +const PATH_TO_EDIT_PAGE = '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 { PATH_TO_EDIT_PAGE, componentsNamesMap }; diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx new file mode 100644 index 0000000000..8c54595a12 --- /dev/null +++ b/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 { 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`; + + const handlePageEditBtnClick = () => { + global.analytics.track('openedx.paragon.docs.page_edit.clicked'); + }; + + return ( + + ); +} + +PageEditBtn.propTypes = { + componentTitle: PropTypes.string.isRequired, +}; + +export default PageEditBtn; diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx index 5fc2badb5a..b649fc25b9 100644 --- a/www/src/templates/component-page-template.tsx +++ b/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({

{mdx.frontmatter.title}

- +
From 656dfd39040b9a3ba1ea72c1857f937f3e748cf0 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 13 Sep 2023 16:10:06 +0300 Subject: [PATCH 3/5] refactor: refactorng after review --- src/Breadcrumb/README.md | 2 +- www/src/components/LeaveFeedback.tsx | 1 - www/src/components/PageEditBtn/constants.js | 35 ---------------- www/src/components/PageEditBtn/index.tsx | 40 ++++++++++++++----- www/src/components/PageLayout.tsx | 22 +++++++++- www/src/templates/component-page-template.tsx | 24 +++++++---- www/utils/createPages.js | 3 ++ 7 files changed, 72 insertions(+), 55 deletions(-) delete mode 100644 www/src/components/PageEditBtn/constants.js diff --git a/src/Breadcrumb/README.md b/src/Breadcrumb/README.md index bd063bd2f1..8f9665e827 100644 --- a/src/Breadcrumb/README.md +++ b/src/Breadcrumb/README.md @@ -1,5 +1,5 @@ --- -title: 'Breadcrumb' +title: 'Breadcrumbs' type: 'component' components: - Breadcrumb diff --git a/www/src/components/LeaveFeedback.tsx b/www/src/components/LeaveFeedback.tsx index aa08e0cff4..de42cb9133 100644 --- a/www/src/components/LeaveFeedback.tsx +++ b/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} diff --git a/www/src/components/PageEditBtn/constants.js b/www/src/components/PageEditBtn/constants.js deleted file mode 100644 index 7b1b27ff5e..0000000000 --- a/www/src/components/PageEditBtn/constants.js +++ /dev/null @@ -1,35 +0,0 @@ -const PATH_TO_EDIT_PAGE = '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 { PATH_TO_EDIT_PAGE, componentsNamesMap }; diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx index 8c54595a12..ff4459a1c5 100644 --- a/www/src/components/PageEditBtn/index.tsx +++ b/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> { + 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 ( + + {pageEditLinkTitle} + + ); + } + return ( ); } PageEditBtn.propTypes = { - componentTitle: PropTypes.string.isRequired, + githubEditPath: PropTypes.string.isRequired, + isNavLink: PropTypes.bool, +}; + +PageEditBtn.defaultProps = { + isNavLink: false, }; export default PageEditBtn; diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index 06ec4d65df..932eaf4fe2 100644 --- a/www/src/components/PageLayout.tsx +++ b/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, 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}
- + + {isMdx && ( + + )} + + + {isMdx && ( + + + + )}
, 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 */} @@ -140,13 +141,22 @@ export default function PageTemplate({

{mdx.frontmatter.notes}

)} -
-

{mdx.frontmatter.title}

- - + +

+ {mdx.frontmatter.title} +

+ + -
+ {mdx.body} diff --git a/www/utils/createPages.js b/www/utils/createPages.js index e28cf61e57..35f90b0e40 100644 --- a/www/utils/createPages.js +++ b/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, }, }); } From 924262836b970cc8466383687bf8c158db4826e1 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 14 Sep 2023 16:14:59 +0300 Subject: [PATCH 4/5] refactor: moved link variable to file createPage.js --- www/src/components/PageEditBtn/index.tsx | 5 ++--- www/utils/createPages.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx index ff4459a1c5..a158090389 100644 --- a/www/src/components/PageEditBtn/index.tsx +++ b/www/src/components/PageEditBtn/index.tsx @@ -8,7 +8,6 @@ export interface PageEditBtnProps extends Partial { @@ -19,7 +18,7 @@ function PageEditBtn({ githubEditPath, isNavLink, ...props }: PageEditBtnProps) return ( @@ -32,7 +31,7 @@ function PageEditBtn({ githubEditPath, isNavLink, ...props }: PageEditBtnProps)