refactor: migrate footer

.storybook/main.js

@@ -29,7 +29,8 @@ module.exports = {
               // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
               require.resolve('babel-plugin-remove-graphql-queries'),
               // use babel-plugin-react-docgen to ensure PropTables still appear
-              require.resolve('babel-plugin-react-docgen')
+              require.resolve('babel-plugin-react-docgen'),
+              require.resolve('babel-plugin-styled-components')
             ]
           }
         }

.storybook/preview.js

@@ -1,9 +1,8 @@
-import { ThemeProvider } from 'styled-components'
 import { LocationProvider } from '@gatsbyjs/reach-router'
-
+import { ThemeProvider } from 'styled-components'
 import Flex from 'components/elements/Flex'
+import themeSpec, { themeCss } from 'theme'
 import React from 'react'
-import theme from 'theme'
 
 import '@storybook/addon-console'
 
@@ -24,13 +23,15 @@ window.___navigate = pathname => {
 
 export const decorators = [
   Story => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={themeSpec}>
       <LocationProvider>
         <Flex
-          p={3}
-          justiContent='center'
-          alignItems='baseline'
-          flexDirection='column'
+          css={themeCss({
+            p: 3,
+            justifyContent: 'center',
+            alignItems: 'baseline',
+            flexDirection: 'column'
+          })}
         >
           <Story />
         </Flex>

package.json

@@ -112,6 +112,7 @@
     "@techstack/styled-system": "~1.0.341",
     "@tippyjs/react": "~4.2.6",
     "@vercel/analytics": "~1.1.1",
+    "babel-plugin-styled-components": "~2.1.4",
     "beauty-error": "~1.2.18",
     "cssnano": "~6.0.2",
     "cssnano-preset-advanced": "~6.0.2",

src/components/elements/Button/Button.js

@@ -2,15 +2,15 @@ import styled, { css } from 'styled-components'
 import { createCssState } from 'helpers/style'
 import { colors } from 'theme'
 
-import ButtonBase from './ButtonBase'
+import ButtonBase, { getColorVariant } from './ButtonBase'
 
 export const hoverStyle = createCssState({
   selector: '&:hover:not([disabled])',
   state: 'hover',
   css: css`
-    background-color: ${({ color }) => colors[color]};
-    color: ${({ bg }) => colors[bg]};
-    box-shadow: 0 0 0 1px ${({ bg }) => colors[bg]};
+    background: ${getColorVariant('color')};
+    color: ${getColorVariant('background')};
+    box-shadow: 0 0 0 1px ${getColorVariant('background')};
   `
 })
 

src/components/elements/Button/ButtonBase.js

@@ -1,34 +1,47 @@
+import { transition, themeCss } from 'theme'
 import styled from 'styled-components'
-import { transition } from 'theme'
 import Text from '../Text'
 
-const Button = styled(Text)({
-  transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
-  appearance: 'none',
-  display: 'inline-block',
-  textAlign: 'center',
-  lineHeight: 16 / 14,
-  textDecoration: 'none',
-  verticalAlign: 'middle',
-  WebkitFontSmoothing: 'antialiased',
-  whiteSpace: 'nowrap',
-  outline: 0,
-  '&:hover': {
-    cursor: 'pointer'
-  }
-})
+const getColor = ({ theme, variant }, propName) =>
+  theme.colors[theme.variants.button[variant][propName]]
+
+export const getColorVariant = propName => props => getColor(props, propName)
+
+const Button = styled(Text)(
+  props => {
+    return {
+      transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
+      appearance: 'none',
+      display: 'inline-block',
+      textAlign: 'center',
+      lineHeight: 16 / 14,
+      textDecoration: 'none',
+      verticalAlign: 'middle',
+      WebkitFontSmoothing: 'antialiased',
+      whiteSpace: 'nowrap',
+      outline: 0,
+      '&:hover': {
+        cursor: 'pointer'
+      },
+      color: getColorVariant('color'),
+      background: getColorVariant('background'),
+      boxShadow: props.variant === 'white' ? '0 0 0 1px black' : undefined
+    }
+  },
+  themeCss({
+    fontFamily: 'sans',
+    fontSize: 1,
+    fontWeight: 'bold',
+    px: 3,
+    py: 2,
+    border: 0,
+    borderRadius: 2
+  })
+)
 
 Button.defaultProps = {
   as: 'button',
-  fontFamily: 'sans',
-  fontSize: 1,
-  fontWeight: 'bold',
-  px: 3,
-  py: 2,
-  color: 'white',
-  bg: 'link',
-  border: 0,
-  borderRadius: 2
+  variant: 'base'
 }
 
 export default Button

src/components/elements/Button/Buttons.stories.js

@@ -1,12 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { storiesOf } from '@storybook/react'
 import { Caps, Flex, Button } from 'components/elements'
+import { themeCss } from 'theme'
 
 import { Story } from 'story'
 
 const states = [null, 'hover', 'disabled', 'loading']
 
-const text = 'Get it'
+const variants = ['base', 'black', 'white']
+
+const text = 'BUY'
 
 const code = `
 import { Button } from 'components/elements'
@@ -16,21 +19,53 @@ export default () => (
 )
 `
 
+const BuyButton = ({ children, loading: initialLoading, ...props }) => {
+  const [isLoading, setIsLoading] = useState(initialLoading)
+
+  const onClick = async () => {
+    setIsLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    setIsLoading(false)
+  }
+
+  return (
+    <Button
+      loading={isLoading}
+      onClick={onClick}
+      css={themeCss({ mx: 3 })}
+      {...props}
+    >
+      <Caps
+        css={themeCss({
+          fontSize: 1
+        })}
+      >
+        {children}
+      </Caps>
+    </Button>
+  )
+}
+
 storiesOf('Elements', module).add('Button', () => (
   <Story name='Button' code={code}>
-    <Flex>
-      {states.map(state => (
-        <Button
-          mr={3}
-          mb={3}
-          key={state}
-          state={state}
-          disabled={state === 'disabled'}
-          loading={state === 'loading'}
-        >
-          <Caps fontSize={1}>{text}</Caps>
-        </Button>
-      ))}
+    <Flex css={themeCss({ pb: 4 })}>
+      <BuyButton>BUY</BuyButton>
+      <BuyButton variant='black'>BUY NOW</BuyButton>
     </Flex>
+    {variants.map((variant, index) => (
+      <Flex css={themeCss({ pt: index > 0 ? 4 : 0 })} key={variant}>
+        {states.map(state => (
+          <BuyButton
+            key={state}
+            variant={variant}
+            state={state}
+            disabled={state === 'disabled'}
+            loading={state === 'loading'}
+          >
+            BUY
+          </BuyButton>
+        ))}
+      </Flex>
+    ))}
   </Story>
 ))

src/components/elements/Dot/Dot.js

@@ -1,5 +1,6 @@
-import { createElement } from 'react'
 import styled from 'styled-components'
+import { colors } from 'theme'
+import React from 'react'
 
 import Text from '../Text'
 
@@ -14,9 +15,20 @@ Dot.defaultProps = {
   as: 'span'
 }
 
-const DotSuccess = props => createElement(Dot, { bg: 'teal3', ...props })
-const DotError = props => createElement(Dot, { bg: 'red6', ...props })
-const DotWarning = props => createElement(Dot, { bg: 'yellow6', ...props })
+const createDot = color => props =>
+  (
+    <Dot
+      css={{
+        background: color,
+        boxShadow: `0 0 12px 0 ${color}`
+      }}
+      {...props}
+    />
+  )
+
+const DotSuccess = createDot(colors.teal3)
+const DotError = createDot(colors.red6)
+const DotWarning = createDot(colors.yellow6)
 
 Dot.Success = DotSuccess
 Dot.Error = DotError

src/components/elements/Input/Input.js

@@ -1,34 +1,35 @@
-import { transition, colors, borders } from 'theme'
+import { transition, colors, borders, themeCss } from 'theme'
 import React, { useMemo, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import Text from '../Text'
 import Flex from '../Flex'
 
-const InputBase = styled(Text)({
-  maxWidth: '100%',
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  border: 0,
-  appearance: 'none',
-  '&:focus': {
-    outline: '0'
+const InputBase = styled(Text)(
+  {
+    lineHeight: 'inherit',
+    background: 'transparent',
+    maxWidth: '100%',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    appearance: 'none',
+    '&:focus': {
+      outline: '0'
+    },
+    '&:disabled': {
+      opacity: 1 / 4
+    }
   },
-  '&:disabled': {
-    opacity: 1 / 4
-  }
-})
+  themeCss({
+    border: 0,
+    p: 0,
+    mx: 2
+  })
+)
 
 InputBase.defaultProps = {
   as: 'input',
-  type: 'text',
-  lineHeight: 'inherit',
-  width: 1,
-  border: 0,
-  p: 0,
-  mx: 2,
-  color: 'inherit',
-  bg: 'transparent'
+  type: 'text'
 }
 
 const focusStyle = css`
@@ -58,11 +59,10 @@ const Input = ({
   iconComponent: Icon,
   suggestions,
   children,
-  theme,
+  isDark,
   ...props
 }) => {
   const [isFocus, setFocus] = useState(props.autoFocus)
-  const isDark = theme === 'dark'
 
   const list = useMemo(() => {
     if (!suggestions) return undefined
@@ -77,13 +77,15 @@ const Input = ({
   return (
     <InputWrapper
       as='label'
-      alignItems='center'
-      borderRadius={2}
       focus={isFocus}
       isDark={isDark}
-      py='12px'
-      pl={2}
-      pr={suggestions ? 0 : 2}
+      css={themeCss({
+        pr: suggestions ? 0 : 2,
+        py: '12px',
+        pl: 2,
+        alignItems: 'center',
+        borderRadius: 2
+      })}
     >
       {Icon && <Flex>{Icon}</Flex>}
       <InputBase

src/components/elements/Link/solid.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import { createCssState } from 'helpers/style'
-import { textGradient, colors } from 'theme'
+import { textGradient, colors, themeCss } from 'theme'
 import { lighten } from 'polished'
 
 import Box from '../Box'
@@ -56,18 +56,10 @@ LinkSolidWrapper.defaultProps = {
   fontWeight: 'regular'
 }
 
-const LinkSolid = ({ fontWeight, href, children, color, theme, ...props }) => {
+const LinkSolid = props => {
   return (
     <Box display='inline'>
-      <LinkSolidWrapper
-        {...props}
-        color={color}
-        href={href}
-        fontWeight={fontWeight}
-        isDark={theme === 'dark'}
-      >
-        {children}
-      </LinkSolidWrapper>
+      <LinkSolidWrapper css={themeCss({ fontWeight: 'regular' })} {...props} />
     </Box>
   )
 }