@massds/mayflower-react/dist/BrandBanner/index.mjs

React versions of Mayflower design system UI components

/**
 * BrandBanner module.
 * @module @massds/mayflower-react/BrandBanner
 * @requires module:@massds/mayflower-assets/scss/02-molecules/brand-banner
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import Image from "../Image/index.mjs";
import IconChevron from "../Icon/IconChevron.mjs";
import IconBuilding from "../Icon/IconBuilding.mjs";
import IconLock from "../Icon/IconLock.mjs";

const BrandBanner = (_ref) => {
  var _classNames, _classNames2;

  let _ref$hasSeal = _ref.hasSeal,
      hasSeal = _ref$hasSeal === void 0 ? true : _ref$hasSeal,
      _ref$hasToggle = _ref.hasToggle,
      hasToggle = _ref$hasToggle === void 0 ? true : _ref$hasToggle,
      _ref$bgTheme = _ref.bgTheme,
      bgTheme = _ref$bgTheme === void 0 ? 'light' : _ref$bgTheme,
      _ref$bgColor = _ref.bgColor,
      bgColor = _ref$bgColor === void 0 ? 'c-primary' : _ref$bgColor,
      _ref$seal = _ref.seal,
      seal = _ref$seal === void 0 ? null : _ref$seal,
      _ref$text = _ref.text,
      text = _ref$text === void 0 ? 'An official website of the Commonwealth of Massachusetts' : _ref$text;
  const lightTheme = bgTheme === 'light';
  const brandBannerClasses = classNames('ma__brand-banner', (_classNames = {}, _classNames["ma__brand-banner--" + bgColor + "-bg-" + bgTheme] = bgColor && bgTheme, _classNames));
  const ContainerTag = hasToggle ? 'button' : 'div';
  const containerProps = {
    className: 'ma__brand-banner-container'
  };
  const brandBannerToggleColor = bgTheme === 'light' ? bgColor : 'c-white';

  const _React$useState = React.useState(false),
        hovered = _React$useState[0],
        setHovered = _React$useState[1];

  const _React$useState2 = React.useState(false),
        expanded = _React$useState2[0],
        setExpanded = _React$useState2[1];

  const brandBannerExpansionClasses = classNames('ma__brand-banner-expansion', {
    'ma__brand-banner-expansion--expanded': expanded
  });

  const handleOnToggle = () => {
    setExpanded(prevExpanded => !prevExpanded);
  };

  const brandBannerToggleClasses = classNames('ma__brand-banner-button ma__button-icon ma__icon-small ma__button-icon--quaternary', (_classNames2 = {}, _classNames2["ma__button-icon--" + brandBannerToggleColor] = bgColor && bgTheme, _classNames2.active = hovered, _classNames2));
  const contentId = 'ma__brand-banner-content';

  if (hasToggle) {
    containerProps.onClick = handleOnToggle;

    containerProps.onMouseEnter = () => setHovered(true);

    containerProps.onMouseLeave = () => setHovered(false);

    containerProps['aria-controls'] = contentId;
    containerProps['aria-expanded'] = expanded;
  }

  return /*#__PURE__*/React.createElement("div", {
    className: brandBannerClasses
  }, /*#__PURE__*/React.createElement(ContainerTag, containerProps, hasSeal && /*#__PURE__*/React.createElement(Image, {
    className: "ma__brand-banner-logo",
    src: seal,
    alt: "Massachusetts State Seal"
  }), /*#__PURE__*/React.createElement("span", {
    className: "ma__brand-banner-text"
  }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0\xA0"), hasToggle && /*#__PURE__*/React.createElement("span", {
    className: brandBannerToggleClasses
  }, /*#__PURE__*/React.createElement("span", null, "Here's how you know"), /*#__PURE__*/React.createElement(IconChevron, null)))), hasToggle && /*#__PURE__*/React.createElement("ul", {
    className: brandBannerExpansionClasses,
    id: contentId
  }, /*#__PURE__*/React.createElement("li", {
    className: "ma__brand-banner-expansion-item"
  }, /*#__PURE__*/React.createElement(IconBuilding, {
    width: 30,
    height: 30,
    fill: lightTheme ? '#14558F' : '#fff'
  }), /*#__PURE__*/React.createElement("div", {
    className: "ma__brand-banner-expansion-item-content"
  }, /*#__PURE__*/React.createElement("p", null, "Official websites use .mass.gov"), /*#__PURE__*/React.createElement("p", null, "A .mass.gov website belongs to an official government organization in Massachusetts."))), /*#__PURE__*/React.createElement("li", {
    className: "ma__brand-banner-expansion-item"
  }, /*#__PURE__*/React.createElement(IconLock, {
    width: 30,
    height: 30,
    fill: lightTheme ? '#388557' : '#fff'
  }), /*#__PURE__*/React.createElement("div", {
    className: "ma__brand-banner-expansion-item-content"
  }, /*#__PURE__*/React.createElement("p", null, "Secure websites use HTTPS certificate"), /*#__PURE__*/React.createElement("p", null, "A lock icon (", /*#__PURE__*/React.createElement(IconLock, {
    width: 12,
    height: 12
  }), ") or https:// means you\u2019ve safely connected to the official website. Share sensitive information only on official, secure websites.")))));
};

BrandBanner.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Banner state seal src.
   * To ensure sufficient color contrast, pass in the gray seal for light bgTheme and the white seal for dark bgTheme. */
  seal: PropTypes.string,

  /** Banner text */
  text: PropTypes.string,

  /** Whether to include seal */
  hasSeal: PropTypes.bool,

  /** Whether to render the toggle button and content */
  hasToggle: PropTypes.bool,

  /** Background color option */
  bgColor: PropTypes.oneOf(['', 'c-primary', 'c-primary-alt', 'c-gray']),

  /** Background color theme */
  bgTheme: PropTypes.oneOf(['', 'light', 'dark'])
} : {};
export default BrandBanner;