refactor: replacing Hyperlink with Nav.Link

openedx · Jul 14, 2023 · c7f72f2 · c7f72f2
1 parent 7a79fa8
commit c7f72f2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git 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<AnchorHTMLAttributes<HTMLAnchorElement>> {
-  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})&amp;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 (
-      <Hyperlink
-        className="muted-link nav-link"
-        destination={FEEDBACK_URL}
-        showLaunchIcon={false}
+      <Nav.Link
         onClick={handleLinkFeedbackClick}
+        href={FEEDBACK_URL}
         target="_blank"
+        rel="noopener noreferrer"
         {...props}
       >
         {leaveFeedbackLinkTitle}
-      </Hyperlink>
+      </Nav.Link>
     );
   }
 
@@ -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
@@ -115,40 +115,40 @@ function Layout({
             </Link>
           </Nav.Item>
           <Nav.Item>
-            <Hyperlink
-              className="muted-link nav-link"
-              destination="https://github.com/openedx/.github/blob/master/CODE_OF_CONDUCT.md"
-              showLaunchIcon={false}
+            <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
-            </Hyperlink>
+            </Nav.Link>
           </Nav.Item>
           <Nav.Item>
-            <Hyperlink
-              className="muted-link nav-link"
-              destination="https://open.edx.org/"
-              showLaunchIcon={false}
+            <Nav.Link
+              className="muted-link"
+              href="https://open.edx.org/"
               target="_blank"
+              rel="noopener noreferrer"
             >
               Open edX
-            </Hyperlink>
+            </Nav.Link>
           </Nav.Item>
           <Nav.Item>
-            <LeaveFeedback isLink />
+            <LeaveFeedback className="muted-link" isNavLink />
           </Nav.Item>
           <div className="flex-grow-1" />
-          <Hyperlink
-            className="muted-link nav-link"
-            destination="https://www.netlify.com"
-            showLaunchIcon={false}
+          <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"
             />
-          </Hyperlink>
+          </Nav.Link>
         </Nav>
       </Container>
     </div>