tesseract/categories/navigation/react/src/components/LinkButton/index.tsx

import * as React from 'react';
import clsx from 'clsx';
import { Button } from '@tesseract-design/web-base';

export type LinkButtonDerivedElement = HTMLAnchorElement;

export interface LinkButtonProps extends Omit<React.HTMLProps<LinkButtonDerivedElement>, 'size'> {
  block?: boolean;
  variant: Button.Variant;
  subtext?: React.ReactNode;
  badge?: React.ReactNode;
  menuItem?: boolean;
  size?: Button.Size;
  compact?: boolean;
  component?: React.ElementType;
}

export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonProps>(({
  variant,
  subtext,
  badge,
  menuItem = false,
  children,
  size = 'medium' as const,
  compact = false,
  className,
  block = false,
  component: Component = 'a',
  ...etcProps
}, forwardedRef) => (
  <Component
    {...etcProps}
    ref={forwardedRef}
    className={clsx(
      'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none',
      'focus:outline-0 focus:ring-4',
      'active:ring-tertiary/50',
      {
        'flex w-full': block,
        'inline-flex max-w-full align-middle': !block,
      },
      {
        'pl-2 gap-2': compact,
        'pl-4 gap-4': !compact,
        'pr-4': !(compact || menuItem),
        'pr-2': compact || menuItem,
      },
      {
        'border-2 border-primary focus:border-secondary active:border-tertiary' : variant !== 'bare',
        'bg-negative text-primary focus:text-secondary active:text-tertiary': variant !== 'filled',
        'bg-primary text-negative focus:bg-secondary active:bg-tertiary': variant === 'filled',
      },
      {
        'h-10': size === 'small',
        'h-12': size === 'medium',
        'h-16': size === 'large',
      },
      className,
    )}
  >
    <span
      className={clsx(
        'flex-auto min-w-0',
        {
          'text-left': compact || menuItem,
          'text-center': !(compact || menuItem),
        },
      )}
    >
      <span
        className="block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded"
        data-testid="children"
      >
        {children}
      </span>
      {subtext && (
        <>
          <span className="sr-only">
            {' - '}
          </span>
          <span
            className="block h-[1.3em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded font-bold text-xs"
            data-testid="subtext"
          >
            {subtext}
          </span>
        </>
      )}
    </span>
    {badge && (
      <>
        <span className="sr-only">
          {' - '}
        </span>
        <span
          data-testid="badge"
        >
          {badge}
        </span>
      </>
    )}
    {menuItem && (
      <span
        data-testid="menuItemIndicator"
      >
        <svg
          className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
          viewBox="0 0 24 24"
          role="presentation"
        >
          <polyline points="9 18 15 12 9 6"/>
        </svg>
      </span>
    )}
  </Component>
));

LinkButton.displayName = 'LinkButton';