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

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _index = _interopRequireDefault(require("../Image/index.js"));

var _IconChevron = _interopRequireDefault(require("../Icon/IconChevron.js"));

var _IconBuilding = _interopRequireDefault(require("../Icon/IconBuilding.js"));

var _IconLock = _interopRequireDefault(require("../Icon/IconLock.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/**
 * 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
 */
var BrandBanner = function BrandBanner(_ref) {
  var _classNames, _classNames2;

  var _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;
  var lightTheme = bgTheme === 'light';
  var brandBannerClasses = (0, _classnames["default"])('ma__brand-banner', (_classNames = {}, _classNames["ma__brand-banner--" + bgColor + "-bg-" + bgTheme] = bgColor && bgTheme, _classNames));
  var ContainerTag = hasToggle ? 'button' : 'div';
  var containerProps = {
    className: 'ma__brand-banner-container'
  };
  var brandBannerToggleColor = bgTheme === 'light' ? bgColor : 'c-white';

  var _React$useState = _react["default"].useState(false),
      hovered = _React$useState[0],
      setHovered = _React$useState[1];

  var _React$useState2 = _react["default"].useState(false),
      expanded = _React$useState2[0],
      setExpanded = _React$useState2[1];

  var brandBannerExpansionClasses = (0, _classnames["default"])('ma__brand-banner-expansion', {
    'ma__brand-banner-expansion--expanded': expanded
  });

  var handleOnToggle = function handleOnToggle() {
    setExpanded(function (prevExpanded) {
      return !prevExpanded;
    });
  };

  var brandBannerToggleClasses = (0, _classnames["default"])('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));
  var contentId = 'ma__brand-banner-content';

  if (hasToggle) {
    containerProps.onClick = handleOnToggle;

    containerProps.onMouseEnter = function () {
      return setHovered(true);
    };

    containerProps.onMouseLeave = function () {
      return setHovered(false);
    };

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

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: brandBannerClasses
  }, /*#__PURE__*/_react["default"].createElement(ContainerTag, containerProps, hasSeal && /*#__PURE__*/_react["default"].createElement(_index["default"], {
    className: "ma__brand-banner-logo",
    src: seal,
    alt: "Massachusetts State Seal"
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: "ma__brand-banner-text"
  }, /*#__PURE__*/_react["default"].createElement("span", null, text), /*#__PURE__*/_react["default"].createElement("span", null, "\xA0\xA0\xA0"), hasToggle && /*#__PURE__*/_react["default"].createElement("span", {
    className: brandBannerToggleClasses
  }, /*#__PURE__*/_react["default"].createElement("span", null, "Here's how you know"), /*#__PURE__*/_react["default"].createElement(_IconChevron["default"], null)))), hasToggle && /*#__PURE__*/_react["default"].createElement("ul", {
    className: brandBannerExpansionClasses,
    id: contentId
  }, /*#__PURE__*/_react["default"].createElement("li", {
    className: "ma__brand-banner-expansion-item"
  }, /*#__PURE__*/_react["default"].createElement(_IconBuilding["default"], {
    width: 30,
    height: 30,
    fill: lightTheme ? '#14558F' : '#fff'
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__brand-banner-expansion-item-content"
  }, /*#__PURE__*/_react["default"].createElement("p", null, "Official websites use .mass.gov"), /*#__PURE__*/_react["default"].createElement("p", null, "A .mass.gov website belongs to an official government organization in Massachusetts."))), /*#__PURE__*/_react["default"].createElement("li", {
    className: "ma__brand-banner-expansion-item"
  }, /*#__PURE__*/_react["default"].createElement(_IconLock["default"], {
    width: 30,
    height: 30,
    fill: lightTheme ? '#388557' : '#fff'
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__brand-banner-expansion-item-content"
  }, /*#__PURE__*/_react["default"].createElement("p", null, "Secure websites use HTTPS certificate"), /*#__PURE__*/_react["default"].createElement("p", null, "A lock icon (", /*#__PURE__*/_react["default"].createElement(_IconLock["default"], {
    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["default"].string,

  /** Banner text */
  text: _propTypes["default"].string,

  /** Whether to include seal */
  hasSeal: _propTypes["default"].bool,

  /** Whether to render the toggle button and content */
  hasToggle: _propTypes["default"].bool,

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

  /** Background color theme */
  bgTheme: _propTypes["default"].oneOf(['', 'light', 'dark'])
} : {};
var _default = BrandBanner;
exports["default"] = _default;
module.exports = exports.default;