kitchen-sink-server/src/modules/action/components/ActionButton/index.tsx

import * as React from 'react';
import * as ButtonBase from '@tesseract-design/web-base-button';

export enum ActionButtonType {
  SUBMIT = 'submit',
  RESET = 'reset',
  BUTTON = 'button',
}

export type ActionButtonProps = Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'style'> & {
  /**
   * Size of the component.
   */
  size?: ButtonBase.ButtonSize,
  /**
   * Variant of the component.
   */
  variant?: ButtonBase.ButtonVariant,
  /**
   * Should the component display a border?
   */
  border?: boolean,
  /**
   * Should the component occupy the whole width of its parent?
   */
  block?: boolean,
  /**
   * Type of the component.
   */
  type?: ActionButtonType,
  /**
   * Style of the component.
   */
  style?: ButtonBase.ButtonStyle,
  /**
   * Does the component need to conserve space?
   */
  compact?: boolean,
  /**
   * Complementary content of the component.
   */
  subtext?: React.ReactNode,
  /**
   * Short complementary content displayed at the edge of the component.
   */
  badge?: React.ReactNode,
  /**
   * Is this component part of a menu?
   */
  menuItem?: boolean,
}

/**
 * Component for performing an action upon activation (e.g. when clicked).
 *
 * This component functions as a regular button.
 */
export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
  (
    {
      size = ButtonBase.ButtonSize.MEDIUM,
      variant = ButtonBase.ButtonVariant.OUTLINE,
      border = false,
      children,
      type = ActionButtonType.BUTTON,
      block = false,
      style = ButtonBase.ButtonStyle.DEFAULT,
      disabled = false,
      compact = false,
      subtext,
      badge,
      menuItem = false,
      className: _className,
      as: _as,
      ...etcProps
    }: ActionButtonProps,
    ref,
  ) => {
    const styleProps = React.useMemo<ButtonBase.ButtonBaseArgs>(() => ({
      size,
      block,
      variant,
      border,
      style,
      compact,
      menuItem,
      disabled,
    }), [size, block, variant, border, style, compact, menuItem]);

    return (
      <button
        {...etcProps}
        disabled={disabled}
        className={ButtonBase.Button(styleProps)}
        ref={ref}
        type={type ?? ActionButtonType.BUTTON}
      >
        <span
          className={ButtonBase.Border(styleProps)}
        />
        <span
          className={ButtonBase.Label(styleProps)}
        >
          <span
            className={ButtonBase.MainText()}
          >
            <span
              className={ButtonBase.OverflowText()}
            >
              {children}
            </span>
          </span>
          {
            subtext
            && (
              <>
                {' '}
                <span className={ButtonBase.Subtext()}>
                  <span
                    className={ButtonBase.OverflowText()}
                  >
                    {subtext}
                  </span>
                </span>
              </>
            )
          }
        </span>
        {
          badge
          && (
            <>
              {' '}
              <span
                className={ButtonBase.BadgeContainer(styleProps)}
              >
                {badge}
              </span>
            </>
          )
        }
        {
          menuItem
          && (
            <>
              {' '}
              <span
                className={ButtonBase.IndicatorWrapper(styleProps)}
              >
                <svg
                  className={ButtonBase.Indicator()}
                  viewBox="0 0 24 24"
                  role="presentation"
                >
                  <polyline points="9 18 15 12 9 6"/>
                </svg>
              </span>
            </>
          )
        }
      </button>
    );
  },
);

ActionButton.displayName = 'ActionButton';