export function Banner()

in src/banner/banner.tsx [32:90]

• 55 lines of code
• 7 McCabe index (conditional complexity)

export function Banner(props: BannerProps) {
  const {
    title,
    children,
    mode = 'info',
    withIcon = false,
    inline = false,
    onClose,
    closeButtonTitle,
    className,
    translations = {
      close: 'Close',
    },
  } = props;
  const dataTest = props['data-test'];

  let icon = infoIcon;
  if (mode === 'error') {
    icon = exceptionIcon;
  } else if (mode === 'success') {
    icon = successIcon;
  } else if (mode === 'warning') {
    icon = warningIcon;
  }

  return (
    <div
      className={classnames(
        {
          [styles.banner]: true,
          [styles.inline]: inline,
          [styles.info]: mode === 'info',
          [styles.error]: mode === 'error',
          [styles.success]: mode === 'success',
          [styles.warning]: mode === 'warning',
          [styles.purple]: mode === 'purple',
          [styles.grey]: mode === 'grey',
        },
        className,
      )}
      data-test={dataTest}
    >
      {withIcon && <Icon glyph={icon} className={styles.icon} />}

      <div>
        {title && <div className={styles.title}>{title}</div>}
        <div className={styles.description}>{children}</div>
      </div>

      {onClose && (
        <Tooltip title={closeButtonTitle ?? translations.close} className={styles.closeButtonWrapper}>
          <Link className={styles.closeButton} pseudo onClick={onClose} aria-label='Close'>
            <Icon glyph={closeIcon} />
          </Link>
        </Tooltip>
      )}
    </div>
  );
}