From 00dd998bfbca95c17defceb8392b8f800bc8f65a Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Fri, 14 Jul 2023 15:46:16 +0300
Subject: [PATCH] docs: added 'Leave feedback' button to the top of the
 component page (#2395)

---
 www/src/components/LeaveFeedback.scss         | 13 ------
 www/src/components/LeaveFeedback.tsx          | 43 +++++++++++++++----
 www/src/components/PageLayout.tsx             | 22 +++++++---
 www/src/scss/base.scss                        |  1 -
 www/src/templates/component-page-template.tsx |  6 ++-
 5 files changed, 57 insertions(+), 28 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 138c9589e5..aa08e0cff4 100644
--- a/www/src/components/LeaveFeedback.tsx
+++ b/www/src/components/LeaveFeedback.tsx
@@ -1,29 +1,56 @@
-import React from 'react';
+import React, { AnchorHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { Nav } from '~paragon-react';
+import { Nav, Button, Hyperlink } from '~paragon-react';
 import { useLocation } from '@reach/router';
 
-function LeaveFeedback(props) {
+export interface LeaveFeedbackProps extends Partial<AnchorHTMLAttributes<HTMLAnchorElement>> {
+  isNavLink?: boolean;
+}
+
+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})&amp;labels=docs&template=feedback_template.md`;
+  const leaveFeedbackLinkTitle = 'Leave feedback';
 
   const handleLinkFeedbackClick = () => {
     global.analytics.track('openedx.paragon.docs.leave_feedback.clicked');
   };
 
+  if (isNavLink) {
+    return (
+      <Nav.Link
+        onClick={handleLinkFeedbackClick}
+        href={FEEDBACK_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...props}
+      >
+        {leaveFeedbackLinkTitle}
+      </Nav.Link>
+    );
+  }
+
   return (
-    <Nav.Link onClick={handleLinkFeedbackClick} href={FEEDBACK_URL} target="_blank" {...props}>
-      Leave feedback
-    </Nav.Link>
+    <Button
+      as={Hyperlink}
+      destination={FEEDBACK_URL}
+      size="sm"
+      variant="outline-primary"
+      onClick={handleLinkFeedbackClick}
+      target="_blank"
+      {...props}
+    >
+      {leaveFeedbackLinkTitle}
+    </Button>
   );
 }
 
 LeaveFeedback.propTypes = {
-  className: PropTypes.string,
+  isNavLink: PropTypes.bool,
 };
 
 LeaveFeedback.defaultProps = {
-  className: 'muted-link',
+  isNavLink: false,
 };
 
 export default LeaveFeedback;
diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx
index 45dd7c61c1..3b5cf02ffe 100644
--- a/www/src/components/PageLayout.tsx
+++ b/www/src/components/PageLayout.tsx
@@ -83,7 +83,7 @@ function Layout({
               {children}
               <Container size="md">
                 <hr />
-                <LeaveFeedback className="pgn__docs-page-feedback-link" />
+                <LeaveFeedback className="mb-5" />
               </Container>
             </Col>
             <Col
@@ -117,25 +117,37 @@ function Layout({
             <Nav.Link
               className="muted-link"
               href="https://github.com/openedx/.github/blob/master/CODE_OF_CONDUCT.md"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Code of Conduct
             </Nav.Link>
           </Nav.Item>
           <Nav.Item>
-            <Nav.Link className="muted-link" href="https://open.edx.org/">
+            <Nav.Link
+              className="muted-link"
+              href="https://open.edx.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               Open edX
             </Nav.Link>
           </Nav.Item>
           <Nav.Item>
-            <LeaveFeedback />
+            <LeaveFeedback className="muted-link" isNavLink />
           </Nav.Item>
           <div className="flex-grow-1" />
-          <a href="https://www.netlify.com">
+          <Nav.Link
+            className="muted-link"
+            href="https://www.netlify.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <img
               src="https://www.netlify.com/img/global/badges/netlify-light.svg"
               alt="Deploys by Netlify"
             />
-          </a>
+          </Nav.Link>
         </Nav>
       </Container>
     </div>
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 8758f28568..a665942699 100644
--- a/www/src/templates/component-page-template.tsx
+++ b/www/src/templates/component-page-template.tsx
@@ -18,6 +18,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 +137,10 @@ export default function PageTemplate({
             <p className="small mb-0">{mdx.frontmatter.notes}</p>
           </Alert>
         )}
-        <h1 className="mb-4">{mdx.frontmatter.title}</h1>
+        <div className="d-flex justify-content-between align-items-start">
+          <h1 className="mb-4">{mdx.frontmatter.title}</h1>
+          <LeaveFeedback />
+        </div>
         <MDXProvider components={shortcodes}>
           <MDXRenderer>{mdx.body}</MDXRenderer>
         </MDXProvider>