@bbc/psammead-navigation - npm Package Compare versions

Comparing version 1.0.0-alpha.0 to 1.0.0-alpha.1

CHANGELOG.md

@@ -6,2 +6,3 @@ # Psammead Navigation Changelog
 |---------|-------------|
+| 1.0.0-alpha.1 | [PR#711](https://github.com/BBC/psammead/pull/711) Update Navigation to have a max-width of 80rem. |
 | 1.0.0-alpha.0 | [PR#637](https://github.com/BBC/psammead/pull/637) Create initial package with Navigation component. |

dist/index.js

@@ -48,3 +48,3 @@ "use strict";
 
-var SKIP_LINK_TOP_POSITION_LARGE = '-3.75rem'; // -60px
+var SKIP_LINK_TOP_POSITION_LARGE = '-4rem'; // -64px
 
@@ -56,14 +56,19 @@ var SKIP_LINK_TOP_POSITION_SMALL = '-3rem'; // -48px
   componentId: "sc-158x7z5-0"
-})(["background-color:", ";position:relative;"], _colours.C_POSTBOX);
+})(["background-color:", ";"], _colours.C_POSTBOX);
 
+var NavWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "NavWrapper",
+  componentId: "sc-158x7z5-1"
+})(["position:relative;max-width:", ";margin:0 auto;"], _breakpoints.GEL_GROUP_5_SCREEN_WIDTH_MIN);
+
 var SkipLink = _styledComponents["default"].a.withConfig({
   displayName: "SkipLink",
-  componentId: "sc-158x7z5-1"
-})(["position:absolute;clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;padding:", " ", ";background-color:#ffffff;border:", " solid #000;color:", ";text-decoration:none;font-family:", ";", ";&:focus{clip-path:none;clip:auto;top:", ";left:", ";height:auto;width:auto;@media (max-width:", "){top:", ";left:", ";}}"], TOP_BOTTOM_SPACING, _spacings.GEL_SPACING, SKIP_LINK_BORDER, SKIP_LINK_COLOR, _typography.GEL_FF_REITH_SANS, function (props) {
+  componentId: "sc-158x7z5-2"
+})(["position:absolute;clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;padding:", " ", ";background-color:#ffffff;border:", " solid #000;color:", ";text-decoration:none;font-family:", ";", ";&:focus{clip-path:none;clip:auto;height:auto;width:auto;top:", ";left:", ";@media (min-width:", "){top:", ";}@media (min-width:", "){left:0;}}"], TOP_BOTTOM_SPACING, _spacings.GEL_SPACING, SKIP_LINK_BORDER, SKIP_LINK_COLOR, _typography.GEL_FF_REITH_SANS, function (props) {
   return props.script ? (0, _typography.getPica)(props.script) : '';
-}, SKIP_LINK_TOP_POSITION_LARGE, _spacings.GEL_SPACING_DBL, _breakpoints.GEL_GROUP_1_SCREEN_WIDTH_MAX, SKIP_LINK_TOP_POSITION_SMALL, _spacings.GEL_SPACING);
+}, SKIP_LINK_TOP_POSITION_SMALL, _spacings.GEL_SPACING, _breakpoints.GEL_GROUP_3_SCREEN_WIDTH_MIN, SKIP_LINK_TOP_POSITION_LARGE, _breakpoints.GEL_GROUP_5_SCREEN_WIDTH_MIN);
 
 var StyledUnorderedList = _styledComponents["default"].ul.withConfig({
   displayName: "StyledUnorderedList",
-  componentId: "sc-158x7z5-2"
+  componentId: "sc-158x7z5-3"
 })(["list-style-type:none;padding:0;margin:0;position:relative;overflow:hidden;"]);
@@ -73,3 +78,3 @@
   displayName: "StyledListItem",
-  componentId: "sc-158x7z5-3"
+  componentId: "sc-158x7z5-4"
 })(["display:inline-block;position:relative;z-index:2;&::after{content:'';position:absolute;bottom:0;width:", ";border-bottom:0.0625rem solid ", ";z-index:-1;", ";}"], _breakpoints.GEL_GROUP_5_SCREEN_WIDTH_MIN, BORDER_COLOR, function (_ref) {
@@ -84,3 +89,3 @@ var dir = _ref.dir;
   displayName: "StyledLink",
-  componentId: "sc-158x7z5-4"
+  componentId: "sc-158x7z5-5"
 })(["", ";font-family:", ";color:", ";cursor:pointer;text-decoration:none;display:inline-block;padding:", " ", ";@media (max-width:", "){padding:", " ", ";}&:hover::after{", " ", "}&:focus::after{", " top:0;border:0.25rem solid ", ";}"], function (props) {
@@ -95,3 +100,3 @@ return props.script ? (0, _typography.getPica)(props.script) : '';
   displayName: "StyledSpan",
-  componentId: "sc-158x7z5-5"
+  componentId: "sc-158x7z5-6"
 })(["&::after{", "}"], ListItemBorder);
@@ -152,6 +157,6 @@
     role: "navigation"
-  }, _react["default"].createElement(SkipLink, {
+  }, _react["default"].createElement(NavWrapper, null, _react["default"].createElement(SkipLink, {
     href: "#content",
     script: script
-  }, skipLinkText), children);
+  }, skipLinkText), children));
 };
@@ -158,0 +163,0 @@

package.json

 {
   "name": "@bbc/psammead-navigation",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "description": "A navigation bar to use on index pages",
@@ -30,3 +30,3 @@ "main": "dist/index.js",
     "styled-components": "^4.1.3",
-    "@bbc/psammead-brand": "^4.1.0"
+    "@bbc/psammead-brand": "^4.1.2"
   },
@@ -33,0 +33,0 @@ "peerDependencies": {

src/index.jsx

@@ -13,2 +13,3 @@ import React, { Fragment } from 'react';
   GEL_GROUP_1_SCREEN_WIDTH_MAX,
+  GEL_GROUP_3_SCREEN_WIDTH_MIN,
   GEL_GROUP_5_SCREEN_WIDTH_MIN,
@@ -28,3 +29,3 @@ } from '@bbc/gel-foundations/breakpoints';
 const SKIP_LINK_BORDER = '0.1875rem'; // 3px
-const SKIP_LINK_TOP_POSITION_LARGE = '-3.75rem'; // -60px
+const SKIP_LINK_TOP_POSITION_LARGE = '-4rem'; // -64px
 const SKIP_LINK_TOP_POSITION_SMALL = '-3rem'; // -48px
@@ -34,3 +35,8 @@
   background-color: ${C_POSTBOX};
+`;
+
+const NavWrapper = styled.div`
   position: relative;
+  max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN};
+  margin: 0 auto;
 `;
@@ -56,11 +62,14 @@
     clip: auto;
-    top: ${SKIP_LINK_TOP_POSITION_LARGE};
-    left: ${GEL_SPACING_DBL};
     height: auto;
     width: auto;
+    top: ${SKIP_LINK_TOP_POSITION_SMALL};
+    left: ${GEL_SPACING};
 
-    @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
-      top: ${SKIP_LINK_TOP_POSITION_SMALL};
-      left: ${GEL_SPACING};
+    @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+      top: ${SKIP_LINK_TOP_POSITION_LARGE};
     }
+
+    @media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {
+      left: 0;
+    }
   }
@@ -190,6 +199,8 @@ `;
   <StyledNav role="navigation">
-    <SkipLink href="#content" script={script}>
-      {skipLinkText}
-    </SkipLink>
-    {children}
+    <NavWrapper>
+      <SkipLink href="#content" script={script}>
+        {skipLinkText}
+      </SkipLink>
+      {children}
+    </NavWrapper>
   </StyledNav>
@@ -196,0 +207,0 @@ );

src/index.stories.jsx

@@ -104,2 +104,3 @@ import React, { Fragment } from 'react';
       svg={svgs[svgChoice]}
+      url="https://www.bbc.com/news"
       borderBottom={borderBottom}
@@ -106,0 +107,0 @@ borderTop={borderTop}

No alert changes

Improved metrics

Total package byte prevSize

33083

increased by2.9%

Lines of code

615

increased by2.33%

No dependency changes