Merge pull request #437 from semeano/link-component

Link component

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,47 @@
+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
+  className?: string
+  replace?: boolean
+  ref?: React.Ref<HTMLAnchorElement>
+  innerRef?: React.Ref<HTMLAnchorElement>
+  getProps?: any
+  state?: any
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+} & CustomLinkStyleProps
+
+export default function CustomLink({
+  children,
+  to = "",
+  disabled = false,
+  className = "",
+  replace = false,
+  ref = () => {},
+  innerRef = () => {},
+  getProps = () => {},
+  state = null,
+  onClick,
+  ...props
+}: CustomLinkProps) {
+
+  let styles = makeStyles(props)
+
+  if (disabled) return <label css={styles.disabled}>{children}</label>
+  return <Link
+    to={to}
+    css={styles.regular}
+    className={className}
+    replace={replace}
+    ref={ref}
+    innerRef={innerRef}
+    getProps={getProps}
+    state={state}
+  >
+    {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

@@ -3,6 +3,7 @@ export { default as Carousel } from "./components/Carousel"
 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="path">Go to path</Link>
+  </div>
+
+export const Disabled = () =>
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <Link to="www.google.com" disabled={true}>Go to Google</Link>
+  </div>