@primer/react/lib-esm/Banner/Banner.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { clsx } from 'clsx';
import React, { forwardRef, useEffect } from 'react';
import { XIcon, AlertIcon, InfoIcon, CheckCircleIcon, StopIcon } from '@primer/octicons-react';
import { IconButton } from '../Button/IconButton.js';
import { ButtonComponent } from '../Button/Button.js';
import { useMergedRefs } from '../internal/hooks/useMergedRefs.js';
import classes from './Banner.module.css.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';

const iconForVariant = {
  critical: /*#__PURE__*/jsx(StopIcon, {}),
  info: /*#__PURE__*/jsx(InfoIcon, {}),
  success: /*#__PURE__*/jsx(CheckCircleIcon, {}),
  upsell: /*#__PURE__*/jsx(InfoIcon, {}),
  warning: /*#__PURE__*/jsx(AlertIcon, {})
};
const labels = {
  critical: 'Critical',
  info: 'Information',
  success: 'Success',
  upsell: 'Recommendation',
  warning: 'Warning'
};
const Banner = /*#__PURE__*/React.forwardRef(function Banner({
  'aria-label': label,
  children,
  className,
  description,
  hideTitle,
  icon,
  onDismiss,
  primaryAction,
  secondaryAction,
  title,
  variant = 'info',
  ...rest
}, forwardRef) {
  const dismissible = !!onDismiss;
  const hasActions = primaryAction || secondaryAction;
  const bannerRef = React.useRef(null);
  const ref = useMergedRefs(forwardRef, bannerRef);
  const supportsCustomIcon = variant === 'info' || variant === 'upsell';
  if (process.env.NODE_ENV !== "production") {
    // This hook is called consistently depending on the environment
    // eslint-disable-next-line react-compiler/react-compiler
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      if (title) {
        return;
      }
      const {
        current: banner
      } = bannerRef;
      if (!banner) {
        return;
      }
      const hasTitle = banner.querySelector('[data-banner-title]');
      if (!hasTitle) {
        throw new Error('Expected a title to be provided to the <Banner> component with the `title` prop or through `<Banner.Title>` but no title was found');
      }
    }, [title]);
  }
  return /*#__PURE__*/jsxs("section", {
    ...rest,
    "aria-label": label !== null && label !== void 0 ? label : labels[variant],
    className: clsx(className, classes.Banner),
    "data-dismissible": onDismiss ? '' : undefined,
    "data-title-hidden": hideTitle ? '' : undefined,
    "data-variant": variant,
    tabIndex: -1,
    ref: ref,
    children: [/*#__PURE__*/jsx("div", {
      className: classes.BannerIcon,
      children: icon && supportsCustomIcon ? icon : iconForVariant[variant]
    }), /*#__PURE__*/jsxs("div", {
      className: classes.BannerContainer,
      children: [/*#__PURE__*/jsxs("div", {
        className: classes.BannerContent,
        children: [title ? hideTitle ? /*#__PURE__*/jsx(VisuallyHidden, {
          children: /*#__PURE__*/jsx(BannerTitle, {
            children: title
          })
        }) : /*#__PURE__*/jsx(BannerTitle, {
          children: title
        }) : null, description ? /*#__PURE__*/jsx(BannerDescription, {
          children: description
        }) : null, children]
      }), hasActions ? /*#__PURE__*/jsx(BannerActions, {
        primaryAction: primaryAction,
        secondaryAction: secondaryAction
      }) : null]
    }), dismissible ? /*#__PURE__*/jsx(IconButton, {
      "aria-label": "Dismiss banner",
      onClick: onDismiss,
      className: classes.BannerDismiss,
      icon: XIcon,
      variant: "invisible"
    }) : null]
  });
});
function BannerTitle(props) {
  const $ = c(12);
  let children;
  let className;
  let rest;
  let t0;
  if ($[0] !== props) {
    ({
      as: t0,
      className,
      children,
      ...rest
    } = props);
    $[0] = props;
    $[1] = children;
    $[2] = className;
    $[3] = rest;
    $[4] = t0;
  } else {
    children = $[1];
    className = $[2];
    rest = $[3];
    t0 = $[4];
  }
  const Heading = t0 === undefined ? "h2" : t0;
  let t1;
  if ($[5] !== className) {
    t1 = clsx(className, classes.BannerTitle);
    $[5] = className;
    $[6] = t1;
  } else {
    t1 = $[6];
  }
  let t2;
  if ($[7] !== Heading || $[8] !== children || $[9] !== rest || $[10] !== t1) {
    t2 = /*#__PURE__*/jsx(Heading, {
      ...rest,
      className: t1,
      "data-banner-title": "",
      children: children
    });
    $[7] = Heading;
    $[8] = children;
    $[9] = rest;
    $[10] = t1;
    $[11] = t2;
  } else {
    t2 = $[11];
  }
  return t2;
}
function BannerDescription(t0) {
  const $ = c(10);
  let children;
  let className;
  let rest;
  if ($[0] !== t0) {
    ({
      children,
      className,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = rest;
  } else {
    children = $[1];
    className = $[2];
    rest = $[3];
  }
  let t1;
  if ($[4] !== className) {
    t1 = clsx("BannerDescription", className);
    $[4] = className;
    $[5] = t1;
  } else {
    t1 = $[5];
  }
  let t2;
  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
    t2 = /*#__PURE__*/jsx("div", {
      ...rest,
      className: t1,
      children: children
    });
    $[6] = children;
    $[7] = rest;
    $[8] = t1;
    $[9] = t2;
  } else {
    t2 = $[9];
  }
  return t2;
}
function BannerActions(t0) {
  const $ = c(9);
  const {
    primaryAction,
    secondaryAction
  } = t0;
  const t1 = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : null;
  const t2 = primaryAction !== null && primaryAction !== void 0 ? primaryAction : null;
  let t3;
  if ($[0] !== t1 || $[1] !== t2) {
    t3 = /*#__PURE__*/jsxs("div", {
      className: classes.BannerActionsContainer,
      "data-primary-action": "trailing",
      children: [t1, t2]
    });
    $[0] = t1;
    $[1] = t2;
    $[2] = t3;
  } else {
    t3 = $[2];
  }
  const t4 = primaryAction !== null && primaryAction !== void 0 ? primaryAction : null;
  const t5 = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : null;
  let t6;
  if ($[3] !== t4 || $[4] !== t5) {
    t6 = /*#__PURE__*/jsxs("div", {
      className: classes.BannerActionsContainer,
      "data-primary-action": "leading",
      children: [t4, t5]
    });
    $[3] = t4;
    $[4] = t5;
    $[5] = t6;
  } else {
    t6 = $[5];
  }
  let t7;
  if ($[6] !== t3 || $[7] !== t6) {
    t7 = /*#__PURE__*/jsxs("div", {
      className: classes.BannerActions,
      children: [t3, t6]
    });
    $[6] = t3;
    $[7] = t6;
    $[8] = t7;
  } else {
    t7 = $[8];
  }
  return t7;
}
const BannerPrimaryAction = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
  const $ = c(11);
  let children;
  let className;
  let rest;
  if ($[0] !== t0) {
    ({
      children,
      className,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = rest;
  } else {
    children = $[1];
    className = $[2];
    rest = $[3];
  }
  let t1;
  if ($[4] !== className) {
    t1 = clsx("BannerPrimaryAction", className);
    $[4] = className;
    $[5] = t1;
  } else {
    t1 = $[5];
  }
  let t2;
  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
    t2 = /*#__PURE__*/jsx(ButtonComponent, {
      ref: forwardedRef,
      className: t1,
      variant: "default",
      ...rest,
      children: children
    });
    $[6] = children;
    $[7] = forwardedRef;
    $[8] = rest;
    $[9] = t1;
    $[10] = t2;
  } else {
    t2 = $[10];
  }
  return t2;
});
BannerPrimaryAction.displayName = 'BannerPrimaryAction';
const BannerSecondaryAction = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
  const $ = c(11);
  let children;
  let className;
  let rest;
  if ($[0] !== t0) {
    ({
      children,
      className,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = rest;
  } else {
    children = $[1];
    className = $[2];
    rest = $[3];
  }
  let t1;
  if ($[4] !== className) {
    t1 = clsx("BannerPrimaryAction", className);
    $[4] = className;
    $[5] = t1;
  } else {
    t1 = $[5];
  }
  let t2;
  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
    t2 = /*#__PURE__*/jsx(ButtonComponent, {
      ref: forwardedRef,
      className: t1,
      variant: "link",
      ...rest,
      children: children
    });
    $[6] = children;
    $[7] = forwardedRef;
    $[8] = rest;
    $[9] = t1;
    $[10] = t2;
  } else {
    t2 = $[10];
  }
  return t2;
});
BannerSecondaryAction.displayName = 'BannerSecondaryAction';

export { Banner, BannerActions, BannerDescription, BannerPrimaryAction, BannerSecondaryAction, BannerTitle };