kitchen-sink-server/src/modules/option/components/RadioButton/index.tsx

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

export type RadioButtonProps = Omit<React.HTMLProps<HTMLInputElement>, '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,
  /**
   * 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,
  /**
   * Appearance of the component.
   */
  appearance?: CheckControlBase.CheckControlAppearance,
}

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

    const checkIndicatorCommon = (
      <span
        className={CheckControlBase.CheckIndicatorArea(styleProps)}
      >
        <span
          className={CheckControlBase.CheckIndicatorWrapper(styleProps)}
        />
      </span>
    )

    return (
      <div
        className={CheckControlBase.ClickAreaWrapper(styleProps)}
      >
        <label
          className={CheckControlBase.ClickArea()}
        >
          <input
            {...etcProps}
            disabled={disabled}
            type="radio"
            ref={ref}
            className={CheckControlBase.CheckStateContainer(styleProps)}
          />
          {
            appearance === CheckControlBase.CheckControlAppearance.DEFAULT
            && (
              <span>
                <span />
                {checkIndicatorCommon}
                <span>
                  {children}
                  {
                    subtext
                    && (
                      <>
                        <br />
                        <span
                          className={CheckControlBase.Subtext()}
                        >
                          {subtext}
                        </span>
                      </>
                    )
                  }
                </span>
                {
                  badge
                  && (
                    <>
                      {' '}
                      <span
                        className={ButtonBase.BadgeContainer(styleProps)}
                      >
                        {badge}
                      </span>
                    </>
                  )
                }
              </span>
            )
          }
          {
            appearance === CheckControlBase.CheckControlAppearance.BUTTON
            && (
              <span
                className={ButtonBase.Button(styleProps)}
              >
                <span
                  className={ButtonBase.Border(styleProps)}
                />
                {checkIndicatorCommon}
                <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>
                    </>
                  )
                }
              </span>
            )
          }
          {
            appearance === CheckControlBase.CheckControlAppearance.SWITCH
            && (
              <span>
                <span />
                <span
                  className={CheckControlBase.CheckIndicatorArea(styleProps)}
                >
                  <span
                    className={CheckControlBase.CheckIndicatorWrapper(styleProps)}
                  />
                </span>
                <span>
                  {children}
                  {
                    subtext
                    && (
                      <>
                        <br />
                        <span
                          className={CheckControlBase.Subtext()}
                        >
                          {subtext}
                        </span>
                      </>
                    )
                  }
                </span>
                {
                  badge
                  && (
                    <>
                      {' '}
                      <span
                        className={ButtonBase.BadgeContainer(styleProps)}
                      >
                        {badge}
                      </span>
                    </>
                  )
                }
              </span>
            )
          }
        </label>
      </div>
    );
  },
);

RadioButton.displayName = 'ActionButton';