import React from 'react' ; import styled from 'styled-components' ; import { space , width } from 'design/system' ; import defaultTheme from 'design/theme' ; const ButtonOutlined = ( { children , setRef , ... props } ) => { return ( < StyledButton { ... props } ref = { setRef } > < span > { children } < /span> < /StyledButton>); } ; const size = props => { switch ( props . size ) { case 'small' : return { fontSize : '10px' , minHeight : '24px' , padding : '0px 16px' , } ; case 'large' : return { minHeight : '40px' , fontSize : '12px' , padding : '0px 40px' , } ; default : return { minHeight : '32px' , fontSize : `12px` , padding : '0px 24px' , } ; } } ; const themedStyles = props => { const { colors } = props . theme ; const style = { color : colors . secondary . contrastText , '&:disabled' : { background : colors . action . disabledBackground , color : colors . action . disabled , } , } ; return { ... kinds ( props ) , ... style , ... size ( props ) , ... space ( props ) , ... width ( props ) , ... block ( props ) , } ; } ; const kinds = props => { const { kind , theme } = props ; switch ( kind ) { case 'primary' : return { borderColor : theme . colors . secondary . main , color : theme . colors . secondary . light , '&:hover, &:focus' : { borderColor : theme . colors . secondary . light , } , '&:active' : { borderColor : theme . colors . secondary . dark , } , } ; default : return { borderColor : theme . colors . text . primary , color : theme . colors . text . primary , '&:hover, &:focus' : { borderColor : theme . colors . light , color : theme . colors . light , } , } ; } } ; const block = props => props . block ? { width : '100%' , } : null ; const StyledButton = styled . button `
  line-height: 1.5;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  box-sizing: border-box;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  outline: none;
  opacity: .56;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .3s;
  -webkit-font-smoothing: antialiased;

  &:hover {
    opacity: 1;
  }

  &:active {
    opacity: .24;
  }

  > span {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ${ themedStyles }
  ${ kinds }
  ${ block }
` ; ButtonOutlined . propTypes = { ... space . propTypes , } ; ButtonOutlined . defaultProps = { size : 'medium' , theme : defaultTheme , } ; ButtonOutlined . displayName = 'ButtonOutlined' ; export default ButtonOutlined ;