From f518e5da371e306f0cd6e2c4237e1995bf58867f Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 21 Jun 2023 23:17:35 +0300 Subject: [PATCH 1/4] docs: added 'Leave feedback' button to the top of the component page template --- www/src/components/LeaveFeedback.tsx | 8 +++++++- www/src/templates/component-page-template.tsx | 7 ++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/www/src/components/LeaveFeedback.tsx b/www/src/components/LeaveFeedback.tsx index 138c9589e5..690283e2a4 100644 --- a/www/src/components/LeaveFeedback.tsx +++ b/www/src/components/LeaveFeedback.tsx @@ -3,7 +3,11 @@ import PropTypes from 'prop-types'; import { Nav } from '~paragon-react'; import { useLocation } from '@reach/router'; -function LeaveFeedback(props) { +export interface LeaveFeedbackProps { + as?: keyof JSX.IntrinsicElements | React.ElementType; +} + +function LeaveFeedback(props: LeaveFeedbackProps) { const location = useLocation(); const FEEDBACK_URL = `https://github.com/openedx/paragon/issues/new?title=%5Bparagon-openedx.netlify.app%5D%20Feedback%20(on%20${location.pathname})&labels=docs&template=feedback_template.md`; @@ -20,10 +24,12 @@ function LeaveFeedback(props) { LeaveFeedback.propTypes = { className: PropTypes.string, + as: PropTypes.elementType, }; LeaveFeedback.defaultProps = { className: 'muted-link', + as: 'a', }; export default LeaveFeedback; diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx index 8758f28568..7a5049af2e 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, + Hyperlink, } from '~paragon-react'; import { SettingsContext } from '../context/SettingsContext'; import { DEFAULT_THEME } from '../../theme-config'; @@ -18,6 +19,7 @@ import Layout from '../components/PageLayout'; import SEO from '../components/SEO'; import LinkedHeading from '../components/LinkedHeading'; import ComponentsUsage from '../components/insights/ComponentsUsage'; +import LeaveFeedback from '../components/LeaveFeedback'; export interface IPageTemplate { data: { @@ -136,7 +138,10 @@ export default function PageTemplate({

{mdx.frontmatter.notes}

)} -

{mdx.frontmatter.title}

+
+

{mdx.frontmatter.title}

+ +
{mdx.body} From 92358d0b6c817a8df9e217609b784b947cb3760e Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 29 Jun 2023 11:23:40 +0300 Subject: [PATCH 2/4] refactor: code refactoring --- www/src/components/LeaveFeedback.scss | 13 ------ www/src/components/LeaveFeedback.tsx | 42 ++++++++++++++----- www/src/components/PageLayout.tsx | 33 ++++++++++----- www/src/scss/base.scss | 1 - www/src/templates/component-page-template.tsx | 5 +-- 5 files changed, 57 insertions(+), 37 deletions(-) delete mode 100644 www/src/components/LeaveFeedback.scss diff --git a/www/src/components/LeaveFeedback.scss b/www/src/components/LeaveFeedback.scss deleted file mode 100644 index 0e466380d0..0000000000 --- a/www/src/components/LeaveFeedback.scss +++ /dev/null @@ -1,13 +0,0 @@ -.pgn__docs-page-feedback-link.nav-link { - color: $gray-400; - font-size: $font-size-sm; - line-height: $micro-line-height; - padding-left: 0; - padding-top: 0; - margin-bottom: map-get($spacers, 5); - display: inline-block; - - &:hover { - text-decoration: $link-hover-decoration; - } -} diff --git a/www/src/components/LeaveFeedback.tsx b/www/src/components/LeaveFeedback.tsx index 690283e2a4..cf0b21a068 100644 --- a/www/src/components/LeaveFeedback.tsx +++ b/www/src/components/LeaveFeedback.tsx @@ -1,35 +1,57 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Nav } from '~paragon-react'; +import { Button, Hyperlink } from '~paragon-react'; import { useLocation } from '@reach/router'; export interface LeaveFeedbackProps { - as?: keyof JSX.IntrinsicElements | React.ElementType; + isLink?: boolean; } -function LeaveFeedback(props: LeaveFeedbackProps) { +function LeaveFeedback({ isLink }, props: LeaveFeedbackProps) { const location = useLocation(); const FEEDBACK_URL = `https://github.com/openedx/paragon/issues/new?title=%5Bparagon-openedx.netlify.app%5D%20Feedback%20(on%20${location.pathname})&labels=docs&template=feedback_template.md`; + const leaveFeedbackLinkTitle = 'Leave feedback'; const handleLinkFeedbackClick = () => { global.analytics.track('openedx.paragon.docs.leave_feedback.clicked'); }; + if (isLink) { + return ( + + {leaveFeedbackLinkTitle} + + ); + } + return ( - - Leave feedback - + ); } LeaveFeedback.propTypes = { - className: PropTypes.string, - as: PropTypes.elementType, + isLink: PropTypes.bool, }; LeaveFeedback.defaultProps = { - className: 'muted-link', - as: 'a', + isLink: false, }; export default LeaveFeedback; diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index 45dd7c61c1..17f960bdf6 100644 --- a/www/src/components/PageLayout.tsx +++ b/www/src/components/PageLayout.tsx @@ -15,6 +15,7 @@ import { Row, Col, Sticky, + Hyperlink, useMediaQuery, breakpoints, } from '~paragon-react'; @@ -83,7 +84,7 @@ function Layout({ {children}
- + - Code of Conduct - + - + Open edX - + - +
- + Deploys by Netlify - +
diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss index d044fd7224..913b13f76d 100644 --- a/www/src/scss/base.scss +++ b/www/src/scss/base.scss @@ -2,7 +2,6 @@ @import "../components/LinkedHeading"; @import "../components/Menu"; @import "../components/doc-elements"; -@import "../components/LeaveFeedback"; @import "../components/Settings"; @import "../components/Toc"; @import "../components/header/Header"; diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx index 7a5049af2e..a665942699 100644 --- a/www/src/templates/component-page-template.tsx +++ b/www/src/templates/component-page-template.tsx @@ -9,7 +9,6 @@ import { Alert, breakpoints, useMediaQuery, - Hyperlink, } from '~paragon-react'; import { SettingsContext } from '../context/SettingsContext'; import { DEFAULT_THEME } from '../../theme-config'; @@ -138,9 +137,9 @@ export default function PageTemplate({

{mdx.frontmatter.notes}

)} -
+

{mdx.frontmatter.title}

- +
{mdx.body} From 7a79fa8e52574acc1f61290cac088323a7dd7f4b Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 6 Jul 2023 22:07:48 +0300 Subject: [PATCH 3/4] refactor: code refactoring --- www/src/components/LeaveFeedback.tsx | 6 +++--- www/src/components/PageLayout.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/www/src/components/LeaveFeedback.tsx b/www/src/components/LeaveFeedback.tsx index cf0b21a068..1c5793b13e 100644 --- a/www/src/components/LeaveFeedback.tsx +++ b/www/src/components/LeaveFeedback.tsx @@ -1,13 +1,13 @@ -import React from 'react'; +import React, { AnchorHTMLAttributes } from 'react'; import PropTypes from 'prop-types'; import { Button, Hyperlink } from '~paragon-react'; import { useLocation } from '@reach/router'; -export interface LeaveFeedbackProps { +export interface LeaveFeedbackProps extends Partial> { isLink?: boolean; } -function LeaveFeedback({ isLink }, props: LeaveFeedbackProps) { +function LeaveFeedback({ isLink, ...props }: LeaveFeedbackProps) { const location = useLocation(); const FEEDBACK_URL = `https://github.com/openedx/paragon/issues/new?title=%5Bparagon-openedx.netlify.app%5D%20Feedback%20(on%20${location.pathname})&labels=docs&template=feedback_template.md`; const leaveFeedbackLinkTitle = 'Leave feedback'; diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index 17f960bdf6..d6dfe00519 100644 --- a/www/src/components/PageLayout.tsx +++ b/www/src/components/PageLayout.tsx @@ -84,7 +84,7 @@ function Layout({ {children}
- + Date: Fri, 14 Jul 2023 13:13:18 +0300 Subject: [PATCH 4/4] refactor: replacing Hyperlink with Nav.Link --- www/src/components/LeaveFeedback.tsx | 21 +++++++++--------- www/src/components/PageLayout.tsx | 33 ++++++++++++++-------------- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/www/src/components/LeaveFeedback.tsx b/www/src/components/LeaveFeedback.tsx index 1c5793b13e..aa08e0cff4 100644 --- a/www/src/components/LeaveFeedback.tsx +++ b/www/src/components/LeaveFeedback.tsx @@ -1,13 +1,13 @@ import React, { AnchorHTMLAttributes } from 'react'; import PropTypes from 'prop-types'; -import { Button, Hyperlink } from '~paragon-react'; +import { Nav, Button, Hyperlink } from '~paragon-react'; import { useLocation } from '@reach/router'; export interface LeaveFeedbackProps extends Partial> { - isLink?: boolean; + isNavLink?: boolean; } -function LeaveFeedback({ isLink, ...props }: LeaveFeedbackProps) { +function LeaveFeedback({ isNavLink, ...props }: LeaveFeedbackProps) { const location = useLocation(); const FEEDBACK_URL = `https://github.com/openedx/paragon/issues/new?title=%5Bparagon-openedx.netlify.app%5D%20Feedback%20(on%20${location.pathname})&labels=docs&template=feedback_template.md`; const leaveFeedbackLinkTitle = 'Leave feedback'; @@ -16,18 +16,17 @@ function LeaveFeedback({ isLink, ...props }: LeaveFeedbackProps) { global.analytics.track('openedx.paragon.docs.leave_feedback.clicked'); }; - if (isLink) { + if (isNavLink) { return ( - {leaveFeedbackLinkTitle} - + ); } @@ -47,11 +46,11 @@ function LeaveFeedback({ isLink, ...props }: LeaveFeedbackProps) { } LeaveFeedback.propTypes = { - isLink: PropTypes.bool, + isNavLink: PropTypes.bool, }; LeaveFeedback.defaultProps = { - isLink: false, + isNavLink: false, }; export default LeaveFeedback; diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index d6dfe00519..3b5cf02ffe 100644 --- a/www/src/components/PageLayout.tsx +++ b/www/src/components/PageLayout.tsx @@ -15,7 +15,6 @@ import { Row, Col, Sticky, - Hyperlink, useMediaQuery, breakpoints, } from '~paragon-react'; @@ -115,40 +114,40 @@ function Layout({ - Code of Conduct - + - Open edX - + - +
- Deploys by Netlify - +