@swrve/core/src/icon-button/icon-button.jsx

Core set of Swrve UI Components

import React from 'react'
import classNames from 'classnames'
import { string, bool, object, array, func, oneOf, oneOfType } from 'prop-types'

import { Icon } from '@swrve/icons'

const IconButton = ({
  bgColor,
  children,
  disabled,
  label,
  labelIsVisible,
  iconClassName = '',
  iconName,
  iconColor,
  innerRef,
  className,
  selected,
  size,
  onClick,
  ...props
}) => (
  <button
    aria-label={label}
    className={classNames(
      'icon-btn text-pickledBlack border border-porcelain rounded focus:outline-none focus:shadow-outline-blue focus:border-secondary-10 transition-all duration-200 ease-in text-sm',
      `${size}-icon-btn`,
      {
        'px-4 py-2': size === 'small',
        'px-3 py-2 flex items-center h-10': size === 'medium',
        'px-6 py-4': size === 'large',
        'opacity-50 cursor-not-allowed': disabled,
        'selected-icon-btn': selected
      },
      className,
      bgColor
    )}
    disabled={disabled}
    onClick={e => !disabled && onClick(e, label)}
    ref={innerRef}
    type="button"
    {...props}
  >
    {iconName && (
      <Icon
        name={iconName}
        size={size}
        className={[
          selected ? 'text-cloudWhite' : iconColor,
          {
            'block m-auto': size === 'large'
          },
          iconClassName
        ]}
      />
    )}
    {labelIsVisible && (
      <span className={['small', 'medium'].includes(size) ? 'ml-2' : 'inline-block mt-2'}>
        {label}
      </span>
    )}
    {children}
  </button>
)

IconButton.displayName = 'IconButton'

IconButton.propTypes = {
  /** Background color */
  bgColor: string,
  /** Class name */
  className: oneOfType([string, object, array]),
  /** Determines if button is disabled */
  disabled: bool,
  /** Icon class name */
  iconClassName: string,
  /** Icon name */
  iconName: string,
  /** Icon color */
  iconColor: string,
  /** Ref to be passed down to button */
  innerRef: func,
  /** Icon Button Label */
  label: string,
  /** Determines if label is visible */
  labelIsVisible: bool,
  /** Called when button is clicked */
  onClick: func.isRequired,
  /** Determines if selected styles apply to the button */
  selected: bool,
  /** Determines size of IconButton */
  size: oneOf(['small', 'medium', 'large']).isRequired
}

IconButton.defaultProps = {
  bgColor: 'bg-cloudWhite',
  disabled: false,
  iconColor: 'text-gauloiseBlue-100',
  size: 'medium',
  label: '',
  selected: false,
  labelIsVisible: true
}

export default IconButton