BBC-archive · DenisHdz · Sep 16, 2019 · Sep 12, 2019 · Sep 12, 2019 · Sep 12, 2019
diff --git a/packages/components/psammead-navigation/CHANGELOG.md b/packages/components/psammead-navigation/CHANGELOG.md
@@ -3,6 +3,8 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.3.0 | [PR#2117](https://github.com/bbc/psammead/pull/2117) Pass `dir` prop to `Navigation` component instead of `NavigationLi` |
+| 2.2.11 | [PR#2092](https://github.com/bbc/psammead/pull/2092) Refactored navigation component |
 | 2.2.12 | [PR#2145](https://github.com/bbc/psammead/pull/2145) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.2.11 | [PR#1963](https://github.com/bbc/psammead/pull/2092) Refactored navigation component
 | 2.2.10 | [PR#2081](https://github.com/bbc/psammead/pull/2081) Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-visually-hidden-text |

diff --git a/packages/components/psammead-navigation/README.md b/packages/components/psammead-navigation/README.md
@@ -19,6 +19,7 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | script   | object  | Yes   | N/A     |  `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
 | skipLinkText | string | Yes | N/A    | `Skip to content` |
 | service | string | Yes | N/A | `'news'` |
+| dir      | string  | No       | `ltr`   | `rtl` |
 
 ### NavigationUl
 
@@ -34,7 +35,6 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | -------- | ------- | -------- | ------- | -------- |
 | url      | string  | Yes      | N/A     | `/sport` |
 | script   | object  | Yes      | N/A     |  `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
-| dir      | string  | No       | `ltr`   | `rtl`    |
 | active   | boolean | No       | `false` | `true`   |
 | currentPageText | string | No | `null`  | `Current page` |
 | service | string | Yes | N/A | `'news'` |

diff --git a/packages/components/psammead-navigation/package-lock.json b/packages/components/psammead-navigation/package-lock.json
diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "2.2.12",
+  "version": "2.3.0",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",

diff --git a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navigation should render correctly 1`] = `
-.c7 {
+.c8 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -13,10 +13,6 @@ exports[`Navigation should render correctly 1`] = `
   margin: 0;
 }
 
-.c0 {
-  background-color: #B80000;
-}
-
 .c1 {
   position: relative;
   max-width: 80rem;
@@ -64,23 +60,22 @@ exports[`Navigation should render correctly 1`] = `
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   display: inline-block;
   position: relative;
   z-index: 2;
 }
 
-.c4::after {
+.c5::after {
   content: '';
   position: absolute;
   bottom: 0;
   width: 80rem;
   border-bottom: 0.0625rem solid #eab3b3;
   z-index: -1;
-  left: 0;
 }
 
-.c5 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -94,7 +89,7 @@ exports[`Navigation should render correctly 1`] = `
   padding: 0.75rem 1rem;
 }
 
-.c5:hover::after {
+.c6:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -104,7 +99,7 @@ exports[`Navigation should render correctly 1`] = `
   border-bottom: 0.3125rem solid #FFFFFF;
 }
 
-.c5:focus::after {
+.c6:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -115,7 +110,7 @@ exports[`Navigation should render correctly 1`] = `
   border: 0.25rem solid #FFFFFF;
 }
 
-.c8 {
+.c9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -129,7 +124,7 @@ exports[`Navigation should render correctly 1`] = `
   padding: 0.75rem 1rem;
 }
 
-.c8:hover::after {
+.c9:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -138,7 +133,7 @@ exports[`Navigation should render correctly 1`] = `
   border-bottom: 0.25rem solid #FFFFFF;
 }
 
-.c8:focus::after {
+.c9:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -149,7 +144,7 @@ exports[`Navigation should render correctly 1`] = `
   border: 0.25rem solid #FFFFFF;
 }
 
-.c6::after {
+.c7::after {
   content: '';
   position: absolute;
   left: 0;
@@ -158,6 +153,14 @@ exports[`Navigation should render correctly 1`] = `
   border-bottom: 0.25rem solid #FFFFFF;
 }
 
+.c0 {
+  background-color: #B80000;
+}
+
+.c0 .c4::after {
+  left: 0;
+}
+
 @media (min-width:20rem) and (max-width:37.4375rem) {
   .c2 {
     font-size: 1rem;
@@ -185,47 +188,48 @@ exports[`Navigation should render correctly 1`] = `
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c5 {
+  .c6 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c5 {
+  .c6 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width:24.9375rem) {
-  .c5 {
+  .c6 {
     padding: 0.75rem 0.5rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c8 {
+  .c9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c8 {
+  .c9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width:24.9375rem) {
-  .c8 {
+  .c9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
 <nav
   class="c0"
+  dir="ltr"
   role="navigation"
 >
   <div
@@ -242,20 +246,19 @@ exports[`Navigation should render correctly 1`] = `
       role="list"
     >
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c5"
+          class="c6"
           href="/igbo"
         >
           <span
-            class="c6"
+            class="c7"
             role="text"
           >
             <span
-              class="c7"
+              class="c8"
             >
               Current page
               , 
@@ -265,36 +268,33 @@ exports[`Navigation should render correctly 1`] = `
         </a>
       </li>
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c8"
+          class="c9"
           href="/igbo/egwuregwu"
         >
           Egwuregwu
         </a>
       </li>
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c8"
+          class="c9"
           href="/igbo/media/video"
         >
           Ihe nkiri
         </a>
       </li>
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c8"
+          class="c9"
           href="/igbo/popular/read"
         >
           Nke ka ewuewu

diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx
@@ -29,10 +29,6 @@ const SKIP_LINK_BORDER = '0.1875rem'; // 3px
 const SKIP_LINK_TOP_POSITION_LARGE = '-4rem'; // -64px
 const SKIP_LINK_TOP_POSITION_SMALL = '-3rem'; // -48px
 
-const StyledNav = styled.nav`
-  background-color: ${C_POSTBOX};
-`;
-
 const NavWrapper = styled.div`
   position: relative;
   max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN};
@@ -93,15 +89,6 @@ const StyledListItem = styled.li`
     width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN};
     border-bottom: 0.0625rem solid ${BORDER_COLOR};
     z-index: -1;
-
-    ${({ dir }) =>
-      dir === 'ltr'
-        ? css`
-            left: 0;
-          `
-        : css`
-            right: 0;
-          `}
   }
 `;
 
@@ -172,12 +159,11 @@ export const NavigationLi = ({
   children: link,
   url,
   script,
-  dir,
   currentPageText,
   active,
   service,
 }) => (
-  <StyledListItem role="listitem" dir={dir}>
+  <StyledListItem role="listitem">
     {active && currentPageText ? (
       <StyledLink
         href={url}
@@ -197,8 +183,20 @@ export const NavigationLi = ({
   </StyledListItem>
 );
 
-const Navigation = ({ children, script, skipLinkText, service }) => (
-  <StyledNav role="navigation">
+const StyledNav = styled.nav`
+  background-color: ${C_POSTBOX};
+
+  ${StyledListItem} {
+    ${({ dir }) => css`
+      &::after {
+        ${dir === 'ltr' ? 'left' : 'right'}: 0;
+      }
+    `}
+  }
+`;
+
+const Navigation = ({ children, script, skipLinkText, service, dir }) => (
+  <StyledNav role="navigation" dir={dir}>
     <NavWrapper>
       <SkipLink href="#content" script={script} service={service}>
         {skipLinkText}
@@ -213,8 +211,11 @@ Navigation.propTypes = {
   script: shape(scriptPropType).isRequired,
   skipLinkText: string.isRequired,
   service: string.isRequired,
+  dir: oneOf(['ltr', 'rtl']),
 };
 
+Navigation.defaultProps = { dir: 'ltr' };
+
 NavigationUl.propTypes = {
   children: node.isRequired,
 };
@@ -223,14 +224,12 @@ NavigationLi.propTypes = {
   children: node.isRequired,
   url: string.isRequired,
   script: shape(scriptPropType).isRequired,
-  dir: oneOf(['ltr', 'rtl']),
   active: bool,
   currentPageText: string,
   service: string.isRequired,
 };
 
 NavigationLi.defaultProps = {
-  dir: 'ltr',
   active: false,
   currentPageText: null,
 };