# All files / src/components/window window-buttons.tsx

100% Statements 8/8
100% Branches 14/14
100% Functions 2/2
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70

    17x

    4x
    4x

    4x

    17x

    2x
    2x

    2x

     import { FC, ReactNode } from 'react';
    import cn from 'classnames';

    import CloseIcon from '../../svg/times.svg';

    type WindowActionButtonProps = {
      icon?: ReactNode;
      text?: string;
      onClick: () => void;
      primary?: boolean;
      className?: string;
    };
    export const WindowActionButton: FC<WindowActionButtonProps> = ({
      icon,
      text,
      onClick,
      primary = false,
      className,
    }) => {
      const baseClassName = 'window__action-button';
      const iconOnly = icon && !text;

      return (
        <button
          className={cn(baseClassName, className, {
            [`${baseClassName}--icon-only`]: !!iconOnly,
            button: !iconOnly,
            secondary: !iconOnly && !primary,
          })}
          onClick={onClick}
          type="button"
        >
          {icon && icon}
          {text && text}
        </button>
      );
    };

    type DefaultCloseButtonProps = {
      iconOnly?: boolean;
      text?: string;
      onClick: () => void;
    };

    export const DefaultCloseButton: FC<DefaultCloseButtonProps> = ({
      iconOnly = false,
      text,
      onClick,
      ...otherProps
    }) => {
      const baseClassName = 'window__default-close-button';
      const iconOnlyClass = `${baseClassName}--icon-only`;

      return (
        <WindowActionButton
          className={cn(baseClassName, { [iconOnlyClass]: !!iconOnly })}
          icon={iconOnly ? <CloseIcon width="10" height="10" /> : null}
          text={iconOnly ? undefined : 'Close'}
          primary={!iconOnly}
          onClick={onClick}
          {...otherProps}
        />
      );
    };

    export default {
      WindowActionButton,
      DefaultCloseButton,
    };