saagie-ui/src/react/core/atoms/button/Button.js

Saagie UI from Saagie Design System

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { modifierCSS } from '../../../helpers';
import { Icon } from '../icon/Icon';

const propTypes = {
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,

  /**
   * The component default class.
   */
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),

  /**
   * The Button content.
   */
  children: PropTypes.node,

  /**
   * The className property allows you to add more classes to the component.
   */
  className: PropTypes.string,

  /**
   * The Button color.
   * NOTE: action-* values add an icon to the Button.
   */
  color: PropTypes.oneOf(['', 'primary', 'secondary', 'success', 'warning', 'danger', 'link', 'link-alt', 'action-play', 'action-stop', 'contextual']),

  /**
   * The Button size.
   */
  size: PropTypes.oneOf(['', 'xs', 'sm', 'lg', 'xl']),

  /**
   * The Button minimum width: to maintain consistency in size when Button components are aligned.
   */
  minWidth: PropTypes.oneOf(['', 'xs', 'sm', 'md', 'lg', 'xl']),

  /**
   * The isSquare property will force the size of the Button so it is a square.
   * Long children content will be truncated.
   */
  isSquare: PropTypes.bool,

  /**
   * The Button will occupy all of the available width.
   */
  isBlock: PropTypes.bool,

  /**
   * The Button is displayed as disabled.
   */
  isDisabled: PropTypes.bool,

  /**
   * The Button is displayed as loading.
   * This will remove the children content to show a loader instead.
   * While loading, a Button is also considered disabled.
   */
  isLoading: PropTypes.bool,

  /**
   * The Button is displayed as contextual. This is useful for using the Button in other components.
   */
  isContextual: PropTypes.bool,
};

const defaultProps = {
  tag: 'button',
  defaultClassName: 'sui-a-button',
  children: '',
  className: '',
  color: '',
  size: '',
  minWidth: '',
  isSquare: false,
  isBlock: false,
  isDisabled: false,
  isLoading: false,
  isContextual: false,
};

export const Button = forwardRef(({
  tag: Tag,
  defaultClassName,
  children,
  className,
  color,
  size,
  minWidth,
  isSquare,
  isBlock,
  isDisabled,
  isLoading,
  isContextual,
  ...props
}, ref) => {
  const classes = classnames(
    defaultClassName,
    modifierCSS(color),
    modifierCSS(size),
    minWidth ? `as--min-width-${minWidth}` : '',
    isSquare ? 'as--square' : '',
    isBlock ? 'as--block' : '',
    isDisabled ? 'as--disabled' : '',
    isLoading ? 'as--loading' : '',
    isContextual ? 'as--contextual' : '',
    className
  );

  const renderIcon = () => {
    switch (color) {
    case 'action-play':
      return <Icon name="play" position={children ? 'start' : null} />;
    case 'action-stop':
      return <Icon name="stop" position={children ? 'start' : null} />;
    default:
      return '';
    }
  };

  return (
    <Tag type={Tag === 'button' ? 'button' : null} {...props} className={classes} ref={ref}>
      {renderIcon()}
      {children}
    </Tag>
  );
});

Button.propTypes = propTypes;
Button.defaultProps = defaultProps;