refactor: code refactoring

openedx · Jun 29, 2023 · e873c97 · e873c97
1 parent f518e5d
commit e873c97
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 36 deletions.
diff --git a/www/src/components/LeaveFeedback.scss b/www/src/components/LeaveFeedback.scss
diff --git 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})&amp;labels=docs&template=feedback_template.md`;
+  const leaveFeedbackLinkTitle = 'Leave feedback';
 
   const handleLinkFeedbackClick = () => {
     global.analytics.track('openedx.paragon.docs.leave_feedback.clicked');
   };
 
+  if (isLink) {
+    return (
+      <Hyperlink
+        className="muted-link nav-link"
+        destination={FEEDBACK_URL}
+        showLaunchIcon={false}
+        onClick={handleLinkFeedbackClick}
+        target="_blank"
+        {...props}
+      >
+        {leaveFeedbackLinkTitle}
+      </Hyperlink>
+    );
+  }
+
   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,
-  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
@@ -15,6 +15,7 @@ import {
   Row,
   Col,
   Sticky,
+  Hyperlink,
   useMediaQuery,
   breakpoints,
 } from '~paragon-react';
@@ -83,7 +84,7 @@ function Layout({
               {children}
               <Container size="md">
                 <hr />
-                <LeaveFeedback className="pgn__docs-page-feedback-link" />
+                <LeaveFeedback />
               </Container>
             </Col>
             <Col
@@ -114,28 +115,40 @@ function Layout({
             </Link>
           </Nav.Item>
           <Nav.Item>
-            <Nav.Link
-              className="muted-link"
-              href="https://github.com/openedx/.github/blob/master/CODE_OF_CONDUCT.md"
+            <Hyperlink
+              className="muted-link nav-link"
+              destination="https://github.com/openedx/.github/blob/master/CODE_OF_CONDUCT.md"
+              showLaunchIcon={false}
+              target="_blank"
             >
               Code of Conduct
-            </Nav.Link>
+            </Hyperlink>
           </Nav.Item>
           <Nav.Item>
-            <Nav.Link className="muted-link" href="https://open.edx.org/">
+            <Hyperlink
+              className="muted-link nav-link"
+              destination="https://open.edx.org/"
+              showLaunchIcon={false}
+              target="_blank"
+            >
               Open edX
-            </Nav.Link>
+            </Hyperlink>
           </Nav.Item>
           <Nav.Item>
-            <LeaveFeedback />
+            <LeaveFeedback isLink />
           </Nav.Item>
           <div className="flex-grow-1" />
-          <a href="https://www.netlify.com">
+          <Hyperlink
+            className="muted-link nav-link"
+            destination="https://www.netlify.com"
+            showLaunchIcon={false}
+            target="_blank"
+          >
             <img
               src="https://www.netlify.com/img/global/badges/netlify-light.svg"
               alt="Deploys by Netlify"
             />
-          </a>
+          </Hyperlink>
         </Nav>
       </Container>
     </div>

diff --git 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({
             <p className="small mb-0">{mdx.frontmatter.notes}</p>
           </Alert>
         )}
-        <div className="d-flex justify-content-between">
+        <div className="d-flex justify-content-between align-items-start">
           <h1 className="mb-4">{mdx.frontmatter.title}</h1>
-          <LeaveFeedback as={Hyperlink} />
+          <LeaveFeedback />
         </div>
         <MDXProvider components={shortcodes}>
           <MDXRenderer>{mdx.body}</MDXRenderer>