@xgovformbuilder/govuk-react-jsx
Version:
> This package is no longer maintained and will not receive updates bringing it beyond govuk-frontend 4.0.1. If you are using this in your project the simplest way forward is to copy and paste the components from here into your project allowing you to kee
138 lines (124 loc) • 8.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "containerClassName", "homepageUrlHref", "homepageUrlTo", "navigation", "navigationClassName", "productName", "serviceName", "serviceUrlHref", "serviceUrlTo", "navigationLabel", "menuButtonLabel", "assetsPath"],
_excluded2 = ["active", "className", "children", "reactListKey"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useRef } from 'react';
import logo from 'govuk-frontend/govuk/assets/images/govuk-logotype-crown.png';
import { Link } from '../../../utils/Link';
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 = _objectWithoutProperties(props, _excluded);
var headerRef = useRef();
var productNameComponent;
var navigationComponent;
useEffect(function () {
_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _yield$import, HeaderJS;
return _regeneratorRuntime.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.createElement("span", {
className: "govuk-header__product-name"
}, productName);
}
if (serviceName || navigation) {
navigationComponent = /*#__PURE__*/React.createElement("div", {
className: "govuk-header__content"
}, serviceName ? /*#__PURE__*/React.createElement(Link, {
href: serviceUrlHref,
to: serviceUrlTo,
className: "govuk-header__link govuk-header__link--service-name"
}, serviceName) : null, navigation ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("nav", {
className: "govuk-header__navigation ".concat(navigationClassName || ''),
"aria-label": navigationLabel
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "govuk-header__menu-button govuk-js-header-toggle",
"aria-controls": "navigation",
"aria-label": menuButtonLabel
}, "Menu"), /*#__PURE__*/React.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 = _objectWithoutProperties(item, _excluded2);
return itemChildren ? /*#__PURE__*/React.createElement("li", {
key: reactListKey || index,
className: "govuk-header__navigation-item".concat(itemActive ? ' govuk-header__navigation-item--active' : '')
}, item.href || item.to ? /*#__PURE__*/React.createElement(Link, _extends({
className: "govuk-header__link ".concat(itemClassName || '')
}, itemAttributes), itemChildren) : itemChildren) : null;
})))) : null);
}
return /*#__PURE__*/React.createElement("header", _extends({
className: "govuk-header ".concat(className || ''),
role: "banner",
"data-module": "govuk-header"
}, attributes, {
ref: headerRef
}), /*#__PURE__*/React.createElement("div", {
className: "govuk-header__container ".concat(containerClassName)
}, /*#__PURE__*/React.createElement("div", {
className: "govuk-header__logo"
}, /*#__PURE__*/React.createElement(Link, {
to: homepageUrlTo,
href: homepageUrlHref,
className: "govuk-header__link govuk-header__link--homepage"
}, /*#__PURE__*/React.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(logo, "\" 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'
};
export { Header };