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

An implementation of GitHub's Primer Design System using React

'use strict';

var clsx = require('clsx');
var React = require('react');
var octiconsReact = require('@primer/octicons-react');
var IconButton = require('../Button/IconButton.js');
require('../Button/ButtonBase.js');
require('../utils/defaultSxProp.js');
var Button = require('../Button/Button.js');
var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
var useMergedRefs = require('../internal/hooks/useMergedRefs.js');
var Banner_module = require('./Banner.module.css.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const iconForVariant = {
  critical: /*#__PURE__*/React__default.default.createElement(octiconsReact.StopIcon, null),
  info: /*#__PURE__*/React__default.default.createElement(octiconsReact.InfoIcon, null),
  success: /*#__PURE__*/React__default.default.createElement(octiconsReact.CheckCircleIcon, null),
  upsell: /*#__PURE__*/React__default.default.createElement(octiconsReact.InfoIcon, null),
  warning: /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertIcon, null)
};
const labels = {
  critical: 'Critical',
  info: 'Information',
  success: 'Success',
  upsell: 'Recommendation',
  warning: 'Warning'
};
const Banner = /*#__PURE__*/React__default.default.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__default.default.useRef(null);
  const ref = useMergedRefs.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-hooks/rules-of-hooks
    React.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__*/React__default.default.createElement("section", _extends({}, rest, {
    "aria-label": label !== null && label !== undefined ? label : labels[variant],
    className: clsx.clsx(className, Banner_module.Banner),
    "data-dismissible": onDismiss ? '' : undefined,
    "data-title-hidden": hideTitle ? '' : undefined,
    "data-variant": variant,
    tabIndex: -1,
    ref: ref
  }), /*#__PURE__*/React__default.default.createElement("div", {
    className: Banner_module.BannerIcon
  }, icon && supportsCustomIcon ? icon : iconForVariant[variant]), /*#__PURE__*/React__default.default.createElement("div", {
    className: Banner_module.BannerContainer
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: Banner_module.BannerContent
  }, title ? hideTitle ? /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, /*#__PURE__*/React__default.default.createElement(BannerTitle, null, title)) : /*#__PURE__*/React__default.default.createElement(BannerTitle, null, title) : null, description ? /*#__PURE__*/React__default.default.createElement(BannerDescription, null, description) : null, children), hasActions ? /*#__PURE__*/React__default.default.createElement(BannerActions, {
    primaryAction: primaryAction,
    secondaryAction: secondaryAction
  }) : null), dismissible ? /*#__PURE__*/React__default.default.createElement(IconButton.IconButton, {
    "aria-label": "Dismiss banner",
    onClick: onDismiss,
    className: Banner_module.BannerDismiss,
    icon: octiconsReact.XIcon,
    variant: "invisible"
  }) : null);
});
function BannerTitle(props) {
  const {
    as: Heading = 'h2',
    className,
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React__default.default.createElement(Heading, _extends({}, rest, {
    className: clsx.clsx(className, Banner_module.BannerTitle),
    "data-banner-title": ""
  }), children);
}
BannerTitle.displayName = "BannerTitle";
function BannerDescription({
  children,
  className,
  ...rest
}) {
  return /*#__PURE__*/React__default.default.createElement("div", _extends({}, rest, {
    className: clsx.clsx('BannerDescription', className)
  }), children);
}
BannerDescription.displayName = "BannerDescription";
function BannerActions({
  primaryAction,
  secondaryAction
}) {
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: Banner_module.BannerActions
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: Banner_module.BannerActionsContainer,
    "data-primary-action": "trailing"
  }, secondaryAction !== null && secondaryAction !== undefined ? secondaryAction : null, primaryAction !== null && primaryAction !== undefined ? primaryAction : null), /*#__PURE__*/React__default.default.createElement("div", {
    className: Banner_module.BannerActionsContainer,
    "data-primary-action": "leading"
  }, primaryAction !== null && primaryAction !== undefined ? primaryAction : null, secondaryAction !== null && secondaryAction !== undefined ? secondaryAction : null));
}
BannerActions.displayName = "BannerActions";
const BannerPrimaryAction = /*#__PURE__*/React.forwardRef(({
  children,
  className,
  ...rest
}, forwardedRef) => {
  return /*#__PURE__*/React__default.default.createElement(Button.ButtonComponent, _extends({
    ref: forwardedRef,
    className: clsx.clsx('BannerPrimaryAction', className),
    variant: "default"
  }, rest), children);
});
BannerPrimaryAction.displayName = 'BannerPrimaryAction';
const BannerSecondaryAction = /*#__PURE__*/React.forwardRef(({
  children,
  className,
  ...rest
}, forwardedRef) => {
  return /*#__PURE__*/React__default.default.createElement(Button.ButtonComponent, _extends({
    ref: forwardedRef,
    className: clsx.clsx('BannerPrimaryAction', className),
    variant: "link"
  }, rest), children);
});
BannerSecondaryAction.displayName = 'BannerSecondaryAction';

exports.Banner = Banner;
exports.BannerActions = BannerActions;
exports.BannerDescription = BannerDescription;
exports.BannerPrimaryAction = BannerPrimaryAction;
exports.BannerSecondaryAction = BannerSecondaryAction;
exports.BannerTitle = BannerTitle;