Class based styled-components with styled-system

IconButton.js

/* 
  StyledButton

  Example:
  
    import { Icon } from "UI/Icon";
    import { IconButton } from "UI/Button";
    
    const MyIconButton = () => (
      <IconButton primary type="success">
        <Icon.Paperclip/>
      </IconButton>
    );
*/

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import styled from "styled-components";
import { space } from "styled-system";

const TYPES = {
  ERROR: 'error',
  INFO: 'info',
  SUCCESS: 'success',
  WARNING: 'warning'
};

const buttonResets = `
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  outline: none;
  padding: 0;
`;

const IconButton = styled.button.attrs(
  props => {
    const {
      active,
      disabled,
      focused,
      hovered,
      primary,
      type
    } = props;

    return {
      className: classNames("icon-button", {
          "icon-button--is-active": active,
          "icon-button--is-disabled": disabled,
          "icon-button--is-focused": focused,
          "icon-button--is-hovered": hovered,

          "icon-button--primary": primary,

          "icon-button--type-error": type == TYPES.ERROR,
          "icon-button--type-info": type == TYPES.INFO,
          "icon-button--type-success": type == TYPES.SUCCESS,
          "icon-button--type-warning": type == TYPES.WARNING
        })
    };
  }
)`
  ${ buttonResets }

  ${ ({ theme: { colors, space } }) => `
    &.icon-button--is-disabled {
      pointer-events: none;
    }

    &.icon-button--primary {
      border-radius: 50%;
      padding: ${ space[1] }px;
    }

    &.icon-button--type-error {
      color: ${ colors.red500 }

      &:active, &.icon-button--is-active,
      &:focus, &.icon-button--is-focused,
      &:hover, &.icon-button--is-hovered
      {
        color: ${ colors.red700 };
      }

      &.icon-button--primary {
        background: ${ colors.red200 };

        &:active, &.icon-button--is-active,
        &:focus, &.icon-button--is-focused,
        &:hover, &.icon-button--is-hovered
        {
          background: ${ colors.red300 };
        }
      }
    }

    &.icon-button--type-info {
      color: ${ colors.grey500 }

      &:active, &.icon-button--is-active,
      &:focus, &.icon-button--is-focused,
      &:hover, &.icon-button--is-hovered
      {
        color: ${ colors.grey700 };
      }

      &.icon-button--primary {
        background: ${ colors.grey200 };

        &:active, &.icon-button--is-active,
        &:focus, &.icon-button--is-focused,
        &:hover, &.icon-button--is-hovered
        {
          background: ${ colors.grey300 };
        }
      }
    }

    &.icon-button--type-success {
      color: ${ colors.green500 }

      &:active, &.icon-button--is-active,
      &:focus, &.icon-button--is-focused,
      &:hover, &.icon-button--is-hovered
      {
        color: ${ colors.green700 };
      }

      &.icon-button--primary {
        background: ${ colors.green200 };

        &:active, &.icon-button--is-active,
        &:focus, &.icon-button--is-focused,
        &:hover, &.icon-button--is-hovered
        {
          background: ${ colors.green300 };
        }
      }
    }

    &.icon-button--type-warning {
      color: ${ colors.yellow500 }

      &:active, &.icon-button--is-active,
      &:focus, &.icon-button--is-focused,
      &:hover, &.icon-button--is-hovered
      {
        color: ${ colors.yellow700 };
      }

      &.icon-button--primary {
        background: ${ colors.yellow200 };

        &:active, &.icon-button--is-active,
        &:focus, &.icon-button--is-focused,
        &:hover, &.icon-button--is-hovered
        {
          background: ${ colors.yellow300 };
        }
      }
    }
  `}

  > svg {
    display: block;
  }

  && {
    ${ space }
  }
`;

IconButton.defaultProps = {
  active: false,
  disabled: false,
  focused: false,
  hovered: false,
  primary: false,
  type: "info"
};

IconButton.propTypes = {
  active: PropTypes.bool,
  disabled: PropTypes.bool,
  focused: PropTypes.bool,
  hovered: PropTypes.bool,
  primary: PropTypes.bool,
  type: PropTypes.oneOf(
    [
      TYPES.ERROR,
      TYPES.INFO,
      TYPES.SUCCESS,
      TYPES.WARNING
    ]
  ),

  ...space.propTypes
}

export default IconButton;