@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
40 lines • 1.68 kB
JavaScript
/**
* HeaderSlim module.
* @module @massds/mayflower-react/HeaderSlim
* @requires module:@massds/mayflower-assets/scss/03-organisms/header-slim
*/
import React from "react";
import PropTypes from "prop-types";
const HeaderSlim = _ref => {
let skipNav = _ref.skipNav,
siteLogo = _ref.siteLogo,
mainNav = _ref.mainNav,
utilityNav = _ref.utilityNav;
return /*#__PURE__*/React.createElement("div", {
className: "ma__header_slim"
}, skipNav, /*#__PURE__*/React.createElement("div", {
className: "ma__header_slim__utility"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__header_slim__utility-container ma__container"
}, utilityNav)), /*#__PURE__*/React.createElement("header", {
className: "ma__header_slim__header",
id: "header"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__header_slim__header-container ma__container"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__header_slim__logo"
}, siteLogo), mainNav && /*#__PURE__*/React.createElement("div", {
className: "ma__header_slim__nav"
}, mainNav))));
};
HeaderSlim.propTypes = process.env.NODE_ENV !== "production" ? {
/** A render function that renders SiteLogo component. */
siteLogo: PropTypes.node.isRequired,
/** A render function that renders Anchor link to skip to the main content and bypass the header navigations */
skipNav: PropTypes.node,
/** A render function that renders Navigation items in the blue banner, above the header element */
mainNav: PropTypes.node,
/** A render function that renders Navigation items in the header area */
utilityNav: PropTypes.node
} : {};
export default HeaderSlim;