# All files / src/components external-link.tsx

100% Statements 2/2
100% Branches 13/13
100% Functions 1/1
100% Lines 2/2

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

    8x

    6x

     import { type FC, type AnchorHTMLAttributes } from 'react';
    import cn from 'classnames';

    import { tidyUrlString } from '../utils';

    import ExternalLinkIcon from '../svg/external-link.svg';

    import '../styles/components/external-link.scss';

    export type Props = Exclude<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
      /**
       * The location that is visted when clicked
       */
      url: string | null;
      /**
       * Decides if a new browser tab should be opened or not, defaults to true
       */
      newTab?: boolean;
      tidyUrl?: boolean;
      noIcon?: boolean;
    };

    const ExternalLink: FC<Props> = ({
      children,
      url,
      tidyUrl = false,
      newTab = true,
      className,
      rel,
      noIcon = false,
      ...props
    }) =>
      url ? (
        <a
          {...props}
          className={cn('external-link', className)}
          rel={cn('noopener', rel)}
          href={url}
          {...(newTab ? { target: '_blank' } : {})}
        >
          {children || (tidyUrl ? tidyUrlString(url) : url)}
          {!noIcon && (
            <ExternalLinkIcon data-testid="external-link-icon" width={12.5} />
          )}
        </a>
      ) : (
        <>{children}</>
      );

    export default ExternalLink;