@govuk-frederic/page-header - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

es/index.js

@@ -0,1 +1,3 @@
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 import React from 'react';
@@ -10,9 +12,11 @@ import PropTypes from 'prop-types';
 /*#__PURE__*/
-styled('div', {
+styled('header', {
   target: "e4u1u2g0",
   label: "StyledPageHeader"
 })({
+  position: 'relative',
   width: '100%',
   color: WHITE,
-  background: BLACK
+  background: BLACK,
+  zIndex: 100
 });
@@ -79,4 +83,6 @@ var InnerContainer =
   var logo = _ref.logo,
-      children = _ref.children;
-  return React.createElement(StyledPageHeader, null, React.createElement(InnerContainer, null, React.createElement(LogoContainer, null, logo), React.createElement(NavigationContainer, null, children)));
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["logo", "children"]);
+
+  return React.createElement(StyledPageHeader, props, React.createElement(InnerContainer, null, React.createElement(LogoContainer, null, logo), React.createElement(NavigationContainer, null, children)));
 };
@@ -83,0 +89,0 @@

lib/index.js

@@ -22,11 +22,15 @@ "use strict";
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 var StyledPageHeader =
 /*#__PURE__*/
-(0, _reactEmotion.default)('div', {
+(0, _reactEmotion.default)('header', {
   target: "e4u1u2g0",
   label: "StyledPageHeader"
 })({
+  position: 'relative',
   width: '100%',
   color: _govukColours.WHITE,
-  background: _govukColours.BLACK
+  background: _govukColours.BLACK,
+  zIndex: 100
 });
@@ -93,4 +97,6 @@ var InnerContainer =
   var logo = _ref.logo,
-      children = _ref.children;
-  return _react.default.createElement(StyledPageHeader, null, _react.default.createElement(InnerContainer, null, _react.default.createElement(LogoContainer, null, logo), _react.default.createElement(NavigationContainer, null, children)));
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["logo", "children"]);
+
+  return _react.default.createElement(StyledPageHeader, props, _react.default.createElement(InnerContainer, null, _react.default.createElement(LogoContainer, null, logo), _react.default.createElement(NavigationContainer, null, children)));
 };
@@ -97,0 +103,0 @@

package.json

 {
   "name": "@govuk-frederic/page-header",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "dependencies": {
@@ -5,0 +5,0 @@ "@govuk-react/constants": "^0.2.7",

README.md

@@ -15,6 +15,8 @@ PageHeader
 ```jsx
-import PageHeader, { asLogoAnchor, asNavAnchor } from '@govuk-frederic/page-header';
+import { Link } from 'react-router-dom';
+import PageHeader from '@govuk-frederic/page-header';
+import asNavLink from 'as-nav-link';
 
-const LogoLink = asLogoAnchor(Link);
-const NavLink = asNavAnchor(Link);
+const LogoLink = asNavLink()(PageHeader.LogoAnchor);
+const NavLink = asNavLink()(PageHeader.NavAnchor);
 const PageLogo = (<LogoLink to="/">Logo text</LogoLink>);
@@ -21,0 +23,0 @@ const PriorityNavigation = (<NavLink to="/">My Account</NavLink>);

src/index.js

@@ -11,6 +11,8 @@ import React from 'react';
 
-const StyledPageHeader = styled('div')({
+const StyledPageHeader = styled('header')({
+  position: 'relative',
   width: '100%',
   color: WHITE,
   background: BLACK,
+  zIndex: 100,
 });
@@ -63,4 +65,4 @@
  */
-const PageHeader = ({ logo, children }) => (
-  <StyledPageHeader>
+const PageHeader = ({ logo, children, ...props }) => (
+  <StyledPageHeader {...props}>
     <InnerContainer>
@@ -67,0 +69,0 @@ <LogoContainer>{ logo }</LogoContainer>

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55639

increased by3.7%

Lines of code

633

increased by2.26%

Number of lines in readme file

43

increased by4.88%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes