{"size": 1389, "ext": "js", "max_stars_repo_path": "src/components/demo/blocks/IconButton/index.js", "max_stars_repo_name": "alanbsmith/component-library-workshop-guide", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/demo/blocks/IconButton/index.js", "max_issues_repo_name": "alanbsmith/component-library-workshop-guide", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/demo/blocks/IconButton/index.js", "max_forks_repo_name": "alanbsmith/component-library-workshop-guide", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 19.5633802817, "max_line_length": 66, "alphanum_fraction": 0.5766738661}
import styled from "styled-components";
import PropTypes from 'prop-types';
import { applyStyleModifiers } from 'styled-components-modifiers';

import { Icon } from "../../elements";
import { fontSizes, statusColors } from "../../utils";

const modifiers = {
  hoverDanger: ({ theme }) => `
    &:hover, &:focus {
      span {
        color: ${statusColors('danger', theme)};
      }
    }
  `,
  hoverInfo: ({ theme }) => `
    &:hover, &:focus {
      span {
        color: ${statusColors('info', theme)};
      }
    }
  `,
  hoverSuccess: ({ theme }) => `
    &:hover, &:focus {
      span {
        color: ${statusColors('success', theme)};
      }
    }
  `,
  hoverWarning: ({ theme }) => `
    &:hover, &:focus {
      span {
        color: ${statusColors('warning', theme)};
      }
    }
  `,
};

const IconButton = styled.button`
  align-items: center;
  background: none;
  border: none;
  display: flex;
  height: ${fontSizes('large')};
  justify-content: center;
  outline: none;
  transition: all 200ms ease;
  width: ${fontSizes('large')};

  &:hover,
  &:focus {
    transform: scale(1.2);

    span {
      color: ${statusColors('default')};
    }
  }

  ${applyStyleModifiers(modifiers)}
`;

IconButton.propTypes = {
  'aria-label': PropTypes.string.isRequired,
};

IconButton.modifiers = modifiers;
IconButton.Icon = Icon;

/** @component */
export default IconButton;
