src/components/button.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import React from 'react'
import { css } from 'emotion'
import { Link } from 'gatsby'

import { margins, radius, transitions, colours } from './globals'

const makeButtonStyle = p =>
  css(`
  font-size: ${p.fontSize || '1em'};
  font-weight: ${p.fontWeight || '500'}
  margin: ${margins.sm}px;
  padding: ${margins.md}px ${margins.md}px;
  border: 0.5px solid #ffffff;
  border-radius: ${radius.sm}px;
  display: block;
  transition: ${transitions.hover};
  text-decoration: none;
  background: ${p.background || 'none'};
  &:hover {
    background: ${p.hoverBackground || 'none'};
    border-color: ${p.background || 'none'};
    color: ${p.hoverColour || 'initial'};
  }
`)

export const Button = p => {
  const buttonStyle = makeButtonStyle(p)
  return (
    <Link to={p.to} className={buttonStyle} role="button">
      {p.children}
    </Link>
  )
}

export const DefaultButton = p => (
  <Button
    {...p}
    background={colours.background}
    hoverBackground={colours.main}
    hoverColour={colours.background}
  />
)