[BD-46] docs: added 'Leave feedback' button to the top of the component page

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;

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>

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";

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>