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

Core set of Swrve UI Components

import React from 'react'
import { string, bool, func } from 'prop-types'
import classNames from 'classnames'
import { Icon } from '@swrve/icons'

const SquareIconButton = ({
  bgColor,
  className,
  disabled,
  iconName,
  iconColor,
  innerRef,
  selected,
  label,
  onClick,
  ...props
}) => {
  const buttonStyle = classNames([
    'square-icon-btn w-9 h-9 p-2 rounded focus:shadow-outline-blue',
    'group',
    { 'opacity-40 cursor-not-allowed': disabled },
    { 'hover:border-gauloiseBlue-10 hover:bg-gauloiseBlue-10': !disabled && !selected },
    selected ? 'bg-gauloiseBlue-100 hover:bg-gauloiseBlue-120' : bgColor,
    className
  ])
  const iconStyle = [
    { 'group-hover:text-gauloiseBlue-100': !disabled && !selected },
    { 'group-hover:text-cloudWhite': selected },
    selected ? 'text-cloudWhite' : iconColor
  ]

  return (
    <button
      aria-label={label}
      className={buttonStyle}
      disabled={disabled}
      onClick={e => !disabled && onClick(e)}
      ref={innerRef}
      type="button"
      {...props}
    >
      <Icon name={iconName} className={iconStyle} />
    </button>
  )
}

SquareIconButton.displayName = 'SquareIconButton'

SquareIconButton.propTypes = {
  /** Add custom classes */
  className: string,
  /** disable the button */
  disabled: bool,
  /** the icon name */
  iconName: string,
  /** Ref to be passed down to button */
  innerRef: func,
  /** the aria label */
  label: string,
  /** On click handler */
  onClick: func,
  /** Is the button selected */
  selected: bool
}

SquareIconButton.defaultProps = {
  bgColor: 'bg-cloudWhite',
  iconColor: 'text-regentGrey',
  /** On click handler */
  onClick: () => {}
}

export default SquareIconButton