@tpr/govuk-react-jsx
Version:
[](https://github.com/alphagov/govuk-frontend/releases/tag/v4.0.1) [ • 10.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Header = Header;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _govukLogotypeCrown = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-logotype-crown.png"));
var _Link = require("../../../utils/Link");
var _excluded = ["className", "containerClassName", "homepageUrlHref", "homepageUrlTo", "navigation", "navigationClassName", "productName", "serviceName", "serviceUrlHref", "serviceUrlTo", "navigationLabel", "menuButtonLabel", "assetsPath"],
_excluded2 = ["active", "className", "children", "reactListKey"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function Header(props) {
var className = props.className,
containerClassName = props.containerClassName,
homepageUrlHref = props.homepageUrlHref,
homepageUrlTo = props.homepageUrlTo,
navigation = props.navigation,
navigationClassName = props.navigationClassName,
productName = props.productName,
serviceName = props.serviceName,
serviceUrlHref = props.serviceUrlHref,
serviceUrlTo = props.serviceUrlTo,
navigationLabel = props.navigationLabel,
menuButtonLabel = props.menuButtonLabel,
assetsPath = props.assetsPath,
attributes = (0, _objectWithoutProperties2["default"])(props, _excluded);
var headerRef = (0, _react.useRef)();
var productNameComponent;
var navigationComponent;
(0, _react.useEffect)(function () {
(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var _yield$import, HeaderJS;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!(typeof document !== 'undefined')) {
_context.next = 6;
break;
}
_context.next = 3;
return import(
/* webpackChunkName: "govuk-frontend-header" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
'govuk-frontend/govuk/components/header/header');
case 3:
_yield$import = _context.sent;
HeaderJS = _yield$import["default"];
if (headerRef.current) {
new HeaderJS(headerRef.current).init();
}
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
}, [headerRef]);
if (productName) {
productNameComponent = /*#__PURE__*/_react["default"].createElement("span", {
className: "govuk-header__product-name"
}, productName);
}
if (serviceName || navigation) {
navigationComponent = /*#__PURE__*/_react["default"].createElement("div", {
className: "govuk-header__content"
}, serviceName ? /*#__PURE__*/_react["default"].createElement(_Link.Link, {
href: serviceUrlHref,
to: serviceUrlTo,
className: "govuk-header__link govuk-header__link--service-name"
}, serviceName) : null, navigation ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("nav", {
className: "govuk-header__navigation ".concat(navigationClassName || ''),
"aria-label": navigationLabel
}, /*#__PURE__*/_react["default"].createElement("button", {
type: "button",
className: "govuk-header__menu-button govuk-js-header-toggle",
"aria-controls": "navigation",
"aria-label": menuButtonLabel
}, "Menu"), /*#__PURE__*/_react["default"].createElement("ul", {
id: "navigation",
className: "govuk-header__navigation-list"
}, navigation.map(function (item, index) {
var itemActive = item.active,
itemClassName = item.className,
itemChildren = item.children,
reactListKey = item.reactListKey,
itemAttributes = (0, _objectWithoutProperties2["default"])(item, _excluded2);
return itemChildren ? /*#__PURE__*/_react["default"].createElement("li", {
key: reactListKey || index,
className: "govuk-header__navigation-item".concat(itemActive ? ' govuk-header__navigation-item--active' : '')
}, item.href || item.to ? /*#__PURE__*/_react["default"].createElement(_Link.Link, (0, _extends2["default"])({
className: "govuk-header__link ".concat(itemClassName || '')
}, itemAttributes), itemChildren) : itemChildren) : null;
})))) : null);
}
return /*#__PURE__*/_react["default"].createElement("header", (0, _extends2["default"])({
className: "govuk-header ".concat(className || ''),
role: "banner",
"data-module": "govuk-header"
}, attributes, {
ref: headerRef
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "govuk-header__container ".concat(containerClassName)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "govuk-header__logo"
}, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
to: homepageUrlTo,
href: homepageUrlHref,
className: "govuk-header__link govuk-header__link--homepage"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "govuk-header__logotype" // dangerouslySetInnerHTML required in order to set the conditional comments appropriately
,
dangerouslySetInnerHTML: {
__html: "\n <!--[if gt IE 8]><!-->\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n class=\"govuk-header__logotype-crown\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 132 97\"\n height=\"30\"\n width=\"36\"\n >\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z\"\n />\n </svg>\n <!--<![endif]-->\n <!--[if IE 8]>\n <img src=\"".concat(_govukLogotypeCrown["default"], "\" class=\"govuk-header__logotype-crown-fallback-image\" width=\"36\" height=\"32\" />\n <![endif]-->\n <span class=\"govuk-header__logotype-text\">GOV.UK</span>\n ")
}
}), productNameComponent)), navigationComponent));
}
Header.defaultProps = {
homepageUrlHref: '/',
containerClassName: 'govuk-width-container',
navigationLabel: 'Menu',
menuButtonLabel: 'Show or hide menu'
};