Link component for Atlas.

packages/components/src/components/Link/Link.style.ts

@@ -0,0 +1,24 @@
+import { css } from "@emotion/core"
+import { typography, colors } from "../../theme"
+
+export type CustomLinkStyleProps = {}
+
+export let makeStyles = ({}: CustomLinkStyleProps) => {
+
+  return {
+    regular: css`
+      font-family: ${typography.fonts.base};
+      font-size: ${typography.sizes.overhead};
+      color: ${colors.blue[400]};
+      text-decoration: none;
+      cursor: pointer;
+    `,
+    disabled: css`
+      font-family: ${typography.fonts.base};
+      font-size: ${typography.sizes.overhead};
+      color: ${colors.gray[200]};
+      text-decoration: none;
+      cursor: not-allowed;
+    `
+  }
+}

packages/components/src/components/Link/Link.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode, ReactChild } from "react"
+import { Link } from "@reach/router"
+import { makeStyles, CustomLinkStyleProps } from "./Link.style"
+
+type CustomLinkProps = {
+  children: ReactChild
+  to: string
+  disabled?: boolean
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+} & CustomLinkStyleProps
+
+export default function CustomLink({
+  children,
+  to = "",
+  disabled = false,
+  onClick,
+  ...styleProps
+}: CustomLinkProps) {
+
+  let styles = makeStyles(styleProps)
+
+  if (disabled) return <label css={styles.disabled}>{children}</label>
+  return <Link to={to} css={styles.regular}>{children}</Link>
+}

packages/components/src/components/Link/index.ts

@@ -0,0 +1,3 @@
+import { memo } from "react"
+import Link from "./Link"
+export default memo(Link)

packages/components/src/index.ts

@@ -2,6 +2,7 @@ export { default as Button } from "./components/Button"
 export { default as Dropdown } from "./components/Dropdown"
 export { default as Grid } from "./components/Grid"
 export { default as Header } from "./components/Header"
+export { default as Link } from "./components/Link"
 export { default as NavButton } from "./components/NavButton"
 export { default as TagButton } from "./components/TagButton"
 export { default as Tag } from "./components/Tag"

packages/components/stories/12-Link.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import { Link } from "./../src"
+
+export default {
+  title: "Link",
+  component: Link
+}
+
+export const Default = () =>
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <Link to="www.google.com">Go to Google</Link>
+  </div>
+
+export const Disabled = () =>
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <Link to="www.google.com" disabled={true}>Go to Google</Link>
+  </div>