@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
56 lines (55 loc) • 2.5 kB
JavaScript
/**
* 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
*/
import React from "react";
import PropTypes from "prop-types";
import SiteLogo from "../SiteLogo/index.mjs";
import Placeholder from "../Placeholder/index.mjs";
const NarrowTemplate = narrowTemplate => {
const sideClass = narrowTemplate.side ? " ma__narrow-template--" + narrowTemplate.side : '';
const colorClass = narrowTemplate.color ? " ma__narrow-template--" + narrowTemplate.color : '';
const classNames = "ma__narrow-template" + sideClass + colorClass;
let 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.createElement(SiteLogo, narrowTemplate.siteLogoDomain);
}
return /*#__PURE__*/React.createElement("main", {
id: "main-content",
className: classNames,
tabIndex: "-1"
}, /*#__PURE__*/React.createElement("header", {
className: "ma__narrow-template__header"
}, logo), /*#__PURE__*/React.createElement("div", {
className: "ma__narrow-template__container"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__narrow-template__content"
}, narrowTemplate.children ? narrowTemplate.children : /*#__PURE__*/React.createElement(Placeholder, {
text: "Page Content"
}))));
};
NarrowTemplate.propTypes = process.env.NODE_ENV !== "production" ? {
/** Align the template to the right or to the left */
side: PropTypes.oneOf(['right', 'left']),
/** Secondary color is yellow or green */
color: PropTypes.oneOf(['yellow', 'green']),
siteLogo: PropTypes.func,
/** The domain you want to send users to from the site logo icon */
siteLogoDomain: PropTypes.shape(SiteLogo.propTypes),
children: PropTypes.node
} : {};
// Only set defaults for the configuration variables which need to be opted in to activate.
NarrowTemplate.defaultProps = {
side: 'right',
color: 'yellow'
};
export default NarrowTemplate;