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

React versions of Mayflower design system UI components

/**
 * 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 React from "react";
import PropTypes from "prop-types"; // import child components

import PageHeader from "../PageHeader/index.mjs";
import PageHeaderAddons from "../PageHeaderAddons/index.mjs";
import PublishState from "../PublishState/index.mjs";

const IllustratedHeader = illustratedHeader => {
  const bgInfo = illustratedHeader.bgInfo,
        bgImage = illustratedHeader.bgImage,
        inverted = illustratedHeader.inverted,
        category = illustratedHeader.category,
        pageHeader = illustratedHeader.pageHeader,
        publishState = illustratedHeader.publishState,
        children = illustratedHeader.children;
  const imageAlt = bgInfo || '';
  const pageHeaderProps = pageHeader;
  const illustratedHeaderClass = inverted ? 'ma__illustrated-header--inverted' : '';
  return /*#__PURE__*/React.createElement("section", {
    className: "ma__illustrated-header " + illustratedHeaderClass
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__illustrated-header__container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__illustrated-header__content"
  }, publishState && publishState.text && /*#__PURE__*/React.createElement("div", {
    className: "ma__page-header__publish-state"
  }, /*#__PURE__*/React.createElement(PublishState, publishState)), /*#__PURE__*/React.createElement("div", {
    className: "ma__illustrated-header__category",
    "aria-hidden": "true"
  }, category), /*#__PURE__*/React.createElement(PageHeader, pageHeaderProps), /*#__PURE__*/React.createElement(PageHeaderAddons, 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.createElement("div", {
    style: {
      backgroundImage: "url(" + bgImage + ")"
    },
    className: "ma__illustrated-header__image",
    role: "img",
    "aria-label": imageAlt
  }) : /*#__PURE__*/React.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.string,

  /** background image url */
  bgImage: PropTypes.string,

  /** invert to change style */
  inverted: PropTypes.bool,

  /** category prefix text rendered in all caps above the page header title */
  category: PropTypes.string,

  /** render PageHeader component `@organisms/PageHeader` */
  pageHeader: PropTypes.shape(PageHeader.propTypes),
  children: PropTypes.node
} : {};
export default IllustratedHeader;