@massds/mayflower-react/dist/NarrowTemplate/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("../SiteLogo/index.js"));
var _index2 = _interopRequireDefault(require("../Placeholder/index.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
 * NarrowTemplate module.
 * @module @massds/mayflower-react/NarrowTemplate
 * @requires module:@massds/mayflower-assets/scss/01-atoms/site-logo
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
 * @requires module:@massds/mayflower-assets/scss/01-atoms/input-typeahead
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */

var NarrowTemplate = function NarrowTemplate(narrowTemplate) {
  var sideClass = narrowTemplate.side ? " ma__narrow-template--" + narrowTemplate.side : '';
  var colorClass = narrowTemplate.color ? " ma__narrow-template--" + narrowTemplate.color : '';
  var classNames = "ma__narrow-template" + sideClass + colorClass;
  var logo = null;
  // Only render a logo if either there's a custom function to render it
  // or props to Sitelogo have been provided.
  if (narrowTemplate.siteLogo && typeof narrowTemplate.siteLogo === 'function') {
    logo = narrowTemplate.siteLogo();
  } else if (narrowTemplate.siteLogoDomain) {
    logo = /*#__PURE__*/_react["default"].createElement(_index["default"], narrowTemplate.siteLogoDomain);
  }
  return /*#__PURE__*/_react["default"].createElement("main", {
    id: "main-content",
    className: classNames,
    tabIndex: "-1"
  }, /*#__PURE__*/_react["default"].createElement("header", {
    className: "ma__narrow-template__header"
  }, logo), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__narrow-template__container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__narrow-template__content"
  }, narrowTemplate.children ? narrowTemplate.children : /*#__PURE__*/_react["default"].createElement(_index2["default"], {
    text: "Page Content"
  }))));
};
NarrowTemplate.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Align the template to the right or to the left */
  side: _propTypes["default"].oneOf(['right', 'left']),
  /** Secondary color is yellow or green */
  color: _propTypes["default"].oneOf(['yellow', 'green']),
  siteLogo: _propTypes["default"].func,
  /** The domain you want to send users to from the site logo icon */
  siteLogoDomain: _propTypes["default"].shape(_index["default"].propTypes),
  children: _propTypes["default"].node
} : {};

// Only set defaults for the configuration variables which need to be opted in to activate.
NarrowTemplate.defaultProps = {
  side: 'right',
  color: 'yellow'
};
var _default = exports["default"] = NarrowTemplate;
module.exports = exports.default;