IconButton.js

import React from 'react'
import { Icon } from '@pubsweet/ui'
import styled from 'styled-components'

import { positionHelper, marginHelper, paddingHelper } from './styledHelpers'

const IconButton = styled.div`
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  opacity: ${props => (props.disabled ? 0.7 : 1)};

  &:hover {
    opacity: 0.7;
  }

  &[disabled] {
    cursor: not-allowed;
  }

  ${marginHelper};
  ${paddingHelper};
  ${positionHelper};
`

export default ({ icon, onClick, iconSize = 3, disabled, ...props }) => (
  <IconButton
    disabled={disabled}
    onClick={!disabled ? onClick : null}
    {...props}
  >
    <Icon size={iconSize} {...props}>
      {icon}
    </Icon>
  </IconButton>
)