@massds/mayflower-react/dist/IllustratedHeader/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 _index = _interopRequireDefault(require("../PageHeader/index.js"));

var _index2 = _interopRequireDefault(require("../PageHeaderAddons/index.js"));

var _index3 = _interopRequireDefault(require("../PublishState/index.js"));

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

/**
 * IllustratedHeader module.
 * @module @massds/mayflower-react/IllustratedHeader
 * @requires module:@massds/mayflower-assets/scss/03-organisms/illustrated-header
 * @requires module:@massds/mayflower-assets/scss/03-organisms/page-header
 * * @requires module:@massds/mayflower-assets/scss/03-organisms/page-header-addons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/publish-state
 */
// import child components
var IllustratedHeader = function IllustratedHeader(illustratedHeader) {
  var bgInfo = illustratedHeader.bgInfo,
      bgImage = illustratedHeader.bgImage,
      inverted = illustratedHeader.inverted,
      category = illustratedHeader.category,
      pageHeader = illustratedHeader.pageHeader,
      publishState = illustratedHeader.publishState,
      children = illustratedHeader.children;
  var imageAlt = bgInfo || '';
  var pageHeaderProps = pageHeader;
  var illustratedHeaderClass = inverted ? 'ma__illustrated-header--inverted' : '';
  return /*#__PURE__*/_react["default"].createElement("section", {
    className: "ma__illustrated-header " + illustratedHeaderClass
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__illustrated-header__container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__illustrated-header__content"
  }, publishState && publishState.text && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__page-header__publish-state"
  }, /*#__PURE__*/_react["default"].createElement(_index3["default"], publishState)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__illustrated-header__category",
    "aria-hidden": "true"
  }, category), /*#__PURE__*/_react["default"].createElement(_index["default"], pageHeaderProps), /*#__PURE__*/_react["default"].createElement(_index2["default"], pageHeaderProps), // Allows IllustratedHeader to render custom children component (this feature is used in rideshare report and it's not in Mayflower PatternLab)
  children)), bgImage ? /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      backgroundImage: "url(" + bgImage + ")"
    },
    className: "ma__illustrated-header__image",
    role: "img",
    "aria-label": imageAlt
  }) : /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__illustrated-header__image ma__illustrated-header__image--empty"
  }));
};

IllustratedHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  /** background image aria label */
  bgInfo: _propTypes["default"].string,

  /** background image url */
  bgImage: _propTypes["default"].string,

  /** invert to change style */
  inverted: _propTypes["default"].bool,

  /** category prefix text rendered in all caps above the page header title */
  category: _propTypes["default"].string,

  /** render PageHeader component `@organisms/PageHeader` */
  pageHeader: _propTypes["default"].shape(_index["default"].propTypes),
  children: _propTypes["default"].node
} : {};
var _default = IllustratedHeader;
exports["default"] = _default;
module.exports = exports.default;