import React from 'react' ; import styled from 'styled-components' ; import Icon from '../Icon' ; import { space , color } from 'design/system' ; const sizeMap = { 0 : { fontSize : '12px' , height : '24px' , width : '24px' , } , 1 : { fontSize : '16px' , height : '32px' , width : '32px' , } , 2 : { fontSize : '24px' , height : '48px' , width : '48px' , } , } ; const defaultSize = sizeMap [ 1 ] ; const size = props => { return sizeMap [ props . size ] || defaultSize ; } ; const fromProps = props => { const { theme } = props ; return { '&:disabled' : { color : theme . colors . action . disabled , } , '&:hover, &:focus' : { background : theme . colors . action . hover , } , } ; } ; const ButtonIcon = props => { const { children , setRef , ... rest } = props ; return ( < StyledButtonIcon ref = { setRef } { ... rest } > { children } < /StyledButtonIcon>); } ; const StyledButtonIcon = styled . button `
  align-items: center;
  border: none;
  cursor: pointer;
  display: flex;
  outline: none;
  border-radius: 50%;
  overflow: visible;
  justify-content: center;
  text-align: center;
  flex: 0 0 auto;
  background: transparent;
  color: inherit;
  transition: all .3s;
  -webkit-font-smoothing: antialiased;

  ${ Icon }{
    color: inherit;
  }

  &:disabled {
    color: ${ ( { theme } ) => theme . colors . action . disabled };
  }

  ${ fromProps }
  ${ size }
  ${ space }
  ${ color }
` ; export default ButtonIcon ;