packages/components/containers/themes/ThemeCard.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { Shape } from '@proton/components/components/button/ButtonGroup';
   5 import clsx from '@proton/utils/clsx';
   6
   7 import type { ThemeSvgColors, ThemeSvgSize } from './ThemeSvg';
   8 import ThemeSvg from './ThemeSvg';
   9
  10 import './ThemeCard.scss';
  11
  12 interface Props {
  13     label: string;
  14     id: string;
  15     size?: ThemeSvgSize;
  16     colors: ThemeSvgColors;
  17     selected?: boolean;
  18     onChange?: () => void;
  19     disabled?: boolean;
  20     as?: React.ElementType;
  21     className?: string;
  22     borderRadius?: 'sm' | 'md';
  23     shapeButton?: Shape;
  24     'data-testid'?: string;
  25 }
  26
  27 const ThemeCard = ({
  28     label,
  29     id,
  30     size,
  31     colors,
  32     selected,
  33     onChange,
  34     disabled,
  35     borderRadius = 'md',
  36     as: Component = Button,
  37     shapeButton = 'outline',
  38     className,
  39     'data-testid': dataTestId,
  40 }: Props) => {
  41     return (
  42         <Component
  43             name="themeCard"
  44             shape={shapeButton}
  45             color={selected ? 'norm' : 'weak'}
  46             id={id}
  47             className={clsx(
  48                 'theme-card-button p-0 flex flex-nowrap flex-column gap-1 items-center',
  49                 selected && 'is-active pointer-events-none text-bold',
  50                 Component === Button && 'w-full interactive-pseudo',
  51                 borderRadius === 'sm' && 'rounded-sm',
  52                 borderRadius === 'md' && 'rounded',
  53                 `theme-card-button-${size}`,
  54                 className
  55             )}
  56             aria-pressed={Component === Button ? selected : undefined}
  57             onClick={onChange}
  58             disabled={disabled}
  59             type={Component === Button ? 'button' : undefined}
  60             aria-label={c('Action').t`Use ${label} theme`}
  61             title={c('Action').t`Use ${label} theme`}
  62             data-testid={dataTestId}
  63         >
  64             <ThemeSvg className={clsx('block theme-card-image rtl:mirror')} size={size} colors={colors} />
  65             <span
  66                 className={clsx(
  67                     size === 'small' && 'sr-only',
  68                     size === 'medium' && 'sr-only',
  69                     size === 'medium-wide' && 'text-sm'
  70                 )}
  71             >
  72                 {label}
  73             </span>
  74         </Component>
  75     );
  76 };
  77
  78 export default ThemeCard;