Add prop isOpen to Navigation

packages/components/psammead-navigation/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 6.0.0-alpha.6 | [PR#2769](https://github.com/bbc/psammead/pull/2769) Add `isOpen` prop to `Navigation` |
 | 6.0.0-alpha.5 | [PR#2759](https://github.com/bbc/psammead/pull/2759) Change size of menu button depending on script |
 | 6.0.0-alpha.4 | [PR#2747](https://github.com/bbc/psammead/pull/2747) Fix MenuButton not acting as a block element |
 | 6.0.0-alpha.3 | [PR#2745](https://github.com/bbc/psammead/pull/2745) Add dir prop to Amp and Canonical MenuButton |

packages/components/psammead-navigation/README.md

@@ -24,8 +24,9 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 <!-- prettier-ignore -->
 | Argument | Type | Required | Default | Example |
 | -------- | ---- | -------- | ------- | ------- |
-| children | node | Yes      | N/A     | `<ScrollableNavigation dir={dir}><NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl><ScrollableNavigation/>` |
-| dir      | string  | No       | `'ltr'`   | `'rtl'` |
+| children | node | Yes | N/A | `<ScrollableNavigation dir={dir}><NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl><ScrollableNavigation/>` |
+| dir | string | No | `'ltr'` | `'rtl'` |
+| isOpen | boolean | No | `false` | `true` |
 
 ### NavigationUl
 

packages/components/psammead-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.6",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap

@@ -263,6 +263,273 @@ exports[`Navigation should render correctly 1`] = `
 </nav>
 `;
 
+exports[`Navigation should render correctly when isOpen is true 1`] = `
+.c7 {
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+  margin: 0;
+}
+
+.c1 {
+  position: relative;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.c2 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+.c5 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem 1rem;
+}
+
+.c5:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  border-bottom: 0.3125rem solid #FFFFFF;
+}
+
+.c5:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.c8 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem 1rem;
+}
+
+.c8:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
+.c8:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.c4 {
+  display: inline-block;
+  position: relative;
+  z-index: 2;
+}
+
+.c6::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
+.c9 .c3::after {
+  left: 0;
+}
+
+.c0 {
+  position: relative;
+  background-color: #222222;
+  border-top: 0.0625rem solid #FFFFFF;
+}
+
+.c0 .c3::after {
+  left: 0;
+}
+
+@media (min-width:37.5rem) {
+  .c2 {
+    overflow: hidden;
+  }
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:24.9375rem) {
+  .c5 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:24.9375rem) {
+  .c8 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .c4:last-child {
+    margin-right: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c4::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 80rem;
+    border-bottom: 0.0625rem solid #eab3b3;
+    z-index: -1;
+  }
+}
+
+<nav
+  class="c0"
+  dir="ltr"
+  role="navigation"
+>
+  <div
+    class="c1"
+  >
+    <ul
+      class="c2"
+      role="list"
+    >
+      <li
+        class="c3 c4"
+        dir="ltr"
+        role="listitem"
+      >
+        <a
+          class="c5"
+          data-navigation="test_navigation"
+          href="/igbo"
+        >
+          <span
+            class="c6"
+            role="text"
+          >
+            <span
+              class="c7"
+            >
+              Current page
+              , 
+            </span>
+            Akụkọ
+          </span>
+        </a>
+      </li>
+      <li
+        class="c3 c4"
+        dir="ltr"
+        role="listitem"
+      >
+        <a
+          class="c8"
+          data-navigation="test_navigation"
+          href="/igbo/egwuregwu"
+        >
+          Egwuregwu
+        </a>
+      </li>
+      <li
+        class="c3 c4"
+        dir="ltr"
+        role="listitem"
+      >
+        <a
+          class="c8"
+          data-navigation="test_navigation"
+          href="/igbo/media/video"
+        >
+          Ihe nkiri
+        </a>
+      </li>
+      <li
+        class="c3 c4"
+        dir="ltr"
+        role="listitem"
+      >
+        <a
+          class="c8"
+          data-navigation="test_navigation"
+          href="/igbo/popular/read"
+        >
+          Nke ka ewuewu
+        </a>
+      </li>
+    </ul>
+  </div>
+</nav>
+`;
+
 exports[`Scrollable Navigation should render AMP version correctly 1`] = `
 .c8 {
   -webkit-clip-path: inset(100%);
@@ -383,6 +650,10 @@ exports[`Scrollable Navigation should render AMP version correctly 1`] = `
   left: 0;
 }
 
+.c10 .c4::after {
+  left: 0;
+}
+
 @media (max-width:37.4375rem) {
   .c0 {
     white-space: nowrap;
@@ -686,6 +957,10 @@ exports[`Scrollable Navigation should render Canonical version correctly 1`] = `
   left: 0;
 }
 
+.c10 .c4::after {
+  left: 0;
+}
+
 @media (max-width:37.4375rem) {
   .c0 {
     white-space: nowrap;

packages/components/psammead-navigation/src/index.jsx

@@ -2,7 +2,12 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { shape, string, node, bool, oneOf } from 'prop-types';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
-import { C_WHITE, C_POSTBOX, C_GHOST } from '@bbc/psammead-styles/colours';
+import {
+  C_WHITE,
+  C_POSTBOX,
+  C_EBON,
+  C_GHOST,
+} from '@bbc/psammead-styles/colours';
 import {
   GEL_SPACING_HLF,
   GEL_SPACING,
@@ -214,7 +219,7 @@ NavigationLi.defaultProps = {
 
 const StyledNav = styled.nav`
   position: relative;
-  background-color: ${C_POSTBOX};
+  ${({ isOpen }) => `background-color: ${isOpen ? C_EBON : C_POSTBOX};`}
   border-top: 0.0625rem solid ${C_WHITE};
 
   ${StyledListItem} {
@@ -226,9 +231,9 @@ const StyledNav = styled.nav`
   }
 `;
 
-const Navigation = ({ children, dir }) => {
+const Navigation = ({ children, dir, isOpen }) => {
   return (
-    <StyledNav role="navigation" dir={dir}>
+    <StyledNav role="navigation" dir={dir} isOpen={isOpen}>
       <NavWrapper>{children}</NavWrapper>
     </StyledNav>
   );
@@ -237,8 +242,12 @@ const Navigation = ({ children, dir }) => {
 Navigation.propTypes = {
   children: node.isRequired,
   dir: oneOf(['ltr', 'rtl']),
+  isOpen: bool,
 };
 
-Navigation.defaultProps = { dir: 'ltr' };
+Navigation.defaultProps = {
+  dir: 'ltr',
+  isOpen: false,
+};
 
 export default Navigation;