Merge pull request #427 from keep-network/feat/srt-83-link-update

feat(UI)/SRT-83: General Link Review

Author: micahjlucas

src/components/Button.js

@@ -1,20 +1,17 @@
 import React from "react"
 import classNames from "classnames"
 import PropTypes from "prop-types"
+import Link from "./Link"
 
 const Button = ({ className, label, url, onClick }) => {
-  const isEmail = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/.test(
-    url
-  )
-
-  return (
-    <a
-      href={isEmail ? `mailto:${url}` : url}
-      className={classNames(["btn", className])}
-      onClick={(e) => onClick(e)}
-    >
+  return url ? (
+    <Link url={url} className={classNames(["btn", className])}>
+      {label}
+    </Link>
+  ) : (
+    <button className={classNames(["btn", className])} onClick={onClick}>
       {label}
-    </a>
+    </button>
   )
 }
 
@@ -25,4 +22,11 @@ Button.propTypes = {
   onClick: PropTypes.func,
 }
 
+Button.defaultProps = {
+  className: "",
+  label: "",
+  url: "",
+  onClick: null,
+}
+
 export default Button

src/components/FeatureCarousel.js

@@ -11,11 +11,12 @@ import {
   NavbarToggler,
   NavLink,
 } from "reactstrap"
-import { graphql, Link, StaticQuery } from "gatsby"
+import { graphql, StaticQuery } from "gatsby"
 import PropTypes from "prop-types"
 
 import Announcement from "./Announcement"
 import NavScrollItem from "./NavScrollItem"
+import Link from "./Link"
 import * as Icons from "./Icons"
 
 const NavItem = ({ label, url, subitems }) => {
@@ -46,7 +47,7 @@ const NavItem = ({ label, url, subitems }) => {
                     {item.label}
                   </NavLink>
                 ) : (
-                  <Link to={item.url} activeClassName="active">
+                  <Link url={item.url} activeClassName="active">
                     {item.label}
                   </Link>
                 )}
@@ -70,7 +71,7 @@ const NavItem = ({ label, url, subitems }) => {
 
   return (
     <li className="nav-item">
-      <Link to={url} activeClassName="active">
+      <Link url={url} activeClassName="active">
         {label}
       </Link>
     </li>
@@ -152,14 +153,14 @@ export const HeaderTemplate = ({ navItems = [] }) => {
             </Nav>
             <ul className="external_btn">
               <li className="nav-item">
-                <a
-                  href="https://discordapp.com/invite/wYezN7v"
+                <Link
+                  url="https://discordapp.com/invite/wYezN7v"
                   target="_blank"
                   className="discord"
                   rel="noopener noreferrer"
                 >
                   <Icons.Discord />
-                </a>
+                </Link>
                 <div className="hint">
                   <Icons.Dashboard />
                   <span>
@@ -168,13 +169,13 @@ export const HeaderTemplate = ({ navItems = [] }) => {
                 </div>
               </li>
               <li className="nav-item">
-                <a
-                  href="https://dashboard.keep.network/"
+                <Link
+                  url="https://dashboard.keep.network/"
                   className="btn btn-primary btn-small nav-item"
                   rel="noopener noreferrer"
                 >
                   Launch
-                </a>
+                </Link>
               </li>
             </ul>
           </Collapse>

src/components/Header.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import { Row, Col } from "reactstrap"
 
 import Button from "./Button"
+import Link from "./Link"
 import Image from "./Image"
 
 const BlogCard = ({ title, source, excerpt, date, icon, url }) => {
@@ -49,7 +50,7 @@ const KeepBlog = ({ title, body, cards, isMore = false }) => {
         </div>
         {isMore && (
           <div className="keep-blog-footer">
-            <a href="https://blog.keep.network/">Read more articles</a>
+            <Link url="https://blog.keep.network/">Read more articles</Link>
           </div>
         )}
       </Col>

src/components/KeepBlog.js

@@ -14,6 +14,15 @@ const Link = ({ url, children, ...props }) => {
 
   const currentPageIsHome = location.pathname === withPrefix("/")
 
+  // Test if url is an email address
+  if (/^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/.test(url)) {
+    return (
+      <a href={`mailto:${url}`} {...props}>
+        {children}
+      </a>
+    )
+  }
+
   // Test if url is an external link
   if (/^http/.test(url)) {
     return (

src/components/Link.js

@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Row, Col } from "reactstrap"
-import { Link } from "../components"
 import Image from "./Image"
 
 const MiniLogoWall = ({ logos }) => {
@@ -11,13 +10,9 @@ const MiniLogoWall = ({ logos }) => {
         <div className="minilogo-item-text">FEATURED IN</div>
         {logos &&
           logos.map((logo, i) => (
-            <Link
-              url={logo.icon.url}
-              className="minilogo-item"
-              key={`logo-${i}`}
-            >
+            <div className="minilogo-item" key={`logo-${i}`}>
               <Image imageData={logo.icon} />
-            </Link>
+            </div>
           ))}
       </Col>
     </Row>

src/components/MiniLogoWall.js

@@ -55,7 +55,10 @@ const PageSection = ({
 
 PageSection.propTypes = {
   id: PropTypes.string,
-  additionalClassNames: PropTypes.array,
+  additionalClassNames: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string,
+  ]),
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,

src/components/PageSection.js

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import Image from "./Image"
+import Link from "./Link"
 import { GithubSocial, Keybase, LinkedIn, Twitter } from "./Icons"
 
 const getIcon = (url) => {
@@ -22,9 +23,9 @@ const SocialLink = ({ url }) => {
 
   if (!!icon) {
     return (
-      <a href={url} target="_blank" rel="noopener noreferrer">
+      <Link href={url} target="_blank" rel="noopener noreferrer">
         {icon}
-      </a>
+      </Link>
     )
   }
 

src/components/Profile.js

@@ -13,12 +13,7 @@ const Card = ({ index, name, title, icon, url }) => {
         <h4>{title}</h4>
       </div>
       <div className="summary-grid-card-footer">
-        <Button
-          onClick={(e) => {}}
-          url={url}
-          label={name}
-          className="btn-default full-width"
-        />
+        <Button url={url} label={name} className="btn-default full-width" />
       </div>
     </div>
   )

src/components/SummaryGrid.js

@@ -15,7 +15,6 @@ import PageSection from "./PageSection"
 import Profile from "./Profile"
 import SubmitButton from "./SubmitButton"
 import Ticker from "./Ticker"
-import FeatureCarousel from "./FeatureCarousel"
 import SummaryGrid from "./SummaryGrid"
 import MiniLogoWall from "./MiniLogoWall"
 import KeepBlog from "./KeepBlog"
@@ -39,7 +38,6 @@ export {
   Profile,
   SubmitButton,
   Ticker,
-  FeatureCarousel,
   SummaryGrid,
   MiniLogoWall,
   KeepBlog,