Update psammead-navigation to require colours as props

packages/components/psammead-navigation/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 9.0.0 | [PR#4187](https://github.com/bbc/psammead/pull/4187) Require colours to be passed in as props |
 | 8.0.9 | [PR#4189](https://github.com/bbc/psammead/pull/4189) Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-styles |
 | 8.0.8 | [PR#4087](https://github.com/bbc/psammead/pull/4087) Talos - Bump Dependencies - @bbc/psammead-assets |
 | 8.0.7 | [PR#4072](https://github.com/bbc/psammead/pull/4072) Talos - Bump Dependencies - @bbc/psammead-styles |

packages/components/psammead-navigation/README.md

@@ -24,6 +24,10 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | dir | string | No | `'ltr'` | `'rtl'` |
 | isOpen | boolean | No | `false` | `true` |
 | ampOpenClass | string | No | `null` | `'open'` |
+| brandBackgroundColour | string | Yes | N/A | `'#B80000'` |
+| brandForegroundColour | string | Yes | N/A | `'#FDFDFD'` |
+| brandBorderColour | string | Yes | N/A | `'#EAB3B3'` |
+| brandHighlightColour | string YesNo | N/A | `'#FFFFFF'` |
 
 ### NavigationUl
 
@@ -43,6 +47,9 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | currentPageText | string | No | `null`  | `Current page` |
 | service | string | Yes | N/A | `'news'` |
 | dir      | string  | No       | `'ltr'`   | `'rtl'` |
+| brandForegroundColour | string | Yes | N/A | `'#FDFDFD'` |
+| brandBorderColour | string | Yes | N/A | `'#EAB3B3'` |
+| brandHighlightColour | string YesNo | N/A | `'#FFFFFF'` |
 
 ### ScrollableNavigation
 
@@ -51,6 +58,8 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | -------- | ---- | -------- | ------- | ------- |
 | children | node | Yes      | N/A     | `<NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl>` |
 | dir      | string  | No       | `'ltr'`   | `'rtl'` |
+| brandBackgroundColour | string | Yes | N/A | `'#B80000'` |
+| brandHighlightColour | string YesNo | N/A | `'#FFFFFF'` |
 
 ### CanonicalDropdown
 
@@ -112,22 +121,47 @@ import Navigation, {
 } from '@bbc/psammead-navigation';
 import { latin } from '@bbc/gel-foundations/scripts';
 
-<Navigation>
-  <ScrollableNavigation>
+<Navigation
+  brandBackgroundColour='#B80000'
+  brandForegroundColour='#FDFDFD'
+  brandBorderColour='#EAB3B3'
+  brandHighlightColour='#FFFFFF'
+>
+  <ScrollableNavigation
+    brandBackgroundColour='#B80000'
+    brandHighlightColour='#FFFFFF'
+  >
     <NavigationUl>
       <NavigationLi
         url="/"
         script={latin}
         active
         currentPageText="Current Page"
         service="news"
+        brandForegroundColour='#FDFDFD'
+        brandBorderColour='#EAB3B3'
+        brandHighlightColour='#FFFFFF'
       >
         Home
       </NavigationLi>
-      <NavigationLi url="/sport" script={latin} service="news">
+      <NavigationLi
+        url="/sport"
+        script={latin}
+        service="news"
+        brandForegroundColour='#FDFDFD'
+        brandBorderColour='#EAB3B3'
+        brandHighlightColour='#FFFFFF'
+      >
         {Sport}
       </NavigationLi>
-      <NavigationLi url="/weather" script={latin} service="news">
+      <NavigationLi
+        url="/weather"
+        script={latin}
+        service="news"
+        brandForegroundColour='#FDFDFD'
+        brandBorderColour='#EAB3B3'
+        brandHighlightColour='#FFFFFF'
+      >
         {Weather}
       </NavigationLi>
     </NavigationUl>

packages/components/psammead-navigation/package.json

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

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

@@ -1,15 +1,20 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { node, oneOf } from 'prop-types';
+import { node, oneOf, string } from 'prop-types';
 import { GEL_SPACING_SEXT } from '@bbc/gel-foundations/spacings';
 import {
   GEL_GROUP_2_SCREEN_WIDTH_MIN,
   GEL_GROUP_2_SCREEN_WIDTH_MAX,
 } from '@bbc/gel-foundations/breakpoints';
 
-/* Convert C_POSTBOX to rgba as IE doesn't like 8 digit hex */
-const C_POSTBOX_TRANSPARENT = `rgba(184, 0, 0, 0)`;
-const C_POSTBOX_OPAQUE = `rgba(184, 0, 0, 1)`;
+// Because IE11 can't handle 8-digit hex, need to convert to rgba
+const convertHexColourToDecimal = (hexColour, opacity = 1) => {
+  const hexChars = hexColour.split('');
+  const red = parseInt(hexChars[1], 16) * 16 + parseInt(hexChars[2], 16);
+  const green = parseInt(hexChars[3], 16) * 16 + parseInt(hexChars[4], 16);
+  const blue = parseInt(hexChars[5], 16) * 16 + parseInt(hexChars[6], 16);
+  return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
+};
 
 const StyledScrollableNav = styled.div`
   @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
@@ -44,22 +49,39 @@ const StyledScrollableNav = styled.div`
       pointer-events: none;
       background: linear-gradient(
         ${({ dir }) => (dir === 'ltr' ? 'to right' : 'to left')},
-        ${C_POSTBOX_TRANSPARENT} 0%,
-        ${C_POSTBOX_OPAQUE} 100%
+        ${({ brandBackgroundColour }) =>
+            convertHexColourToDecimal(brandBackgroundColour, 0)}
+          0%,
+        ${({ brandBackgroundColour }) =>
+            convertHexColourToDecimal(brandBackgroundColour, 1)}
+          100%
       );
     }
   }
 `;
 
-export const ScrollableNavigation = ({ children, dir, ...props }) => (
-  <StyledScrollableNav dir={dir} {...props}>
+export const ScrollableNavigation = ({
+  children,
+  dir,
+  brandBackgroundColour,
+  brandHighlightColour,
+  ...props
+}) => (
+  <StyledScrollableNav
+    dir={dir}
+    brandBackgroundColour={brandBackgroundColour}
+    brandHighlightColour={brandHighlightColour}
+    {...props}
+  >
     {children}
   </StyledScrollableNav>
 );
 
 ScrollableNavigation.propTypes = {
   children: node.isRequired,
   dir: oneOf(['ltr', 'rtl']),
+  brandBackgroundColour: string.isRequired,
+  brandHighlightColour: string.isRequired,
 };
 
 ScrollableNavigation.defaultProps = {

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

@@ -48,7 +48,7 @@ exports[`Navigation should render correctly 1`] = `
     position: absolute;
     bottom: -1px;
     width: 80rem;
-    border-bottom: 0.0625rem solid #eab3b3;
+    border-bottom: 0.0625rem solid #EAB3B3;
     z-index: -1;
   }
 }
@@ -303,7 +303,7 @@ exports[`Navigation should render correctly when ampOpenClass prop is provided 1
     position: absolute;
     bottom: -1px;
     width: 80rem;
-    border-bottom: 0.0625rem solid #eab3b3;
+    border-bottom: 0.0625rem solid #EAB3B3;
     z-index: -1;
   }
 }
@@ -574,7 +574,7 @@ exports[`Navigation should render correctly when isOpen is true 1`] = `
     position: absolute;
     bottom: -1px;
     width: 80rem;
-    border-bottom: 0.0625rem solid #eab3b3;
+    border-bottom: 0.0625rem solid #EAB3B3;
     z-index: -1;
   }
 }
@@ -849,7 +849,7 @@ exports[`Scrollable Navigation should render correctly 1`] = `
     position: absolute;
     bottom: -1px;
     width: 80rem;
-    border-bottom: 0.0625rem solid #eab3b3;
+    border-bottom: 0.0625rem solid #EAB3B3;
     z-index: -1;
   }
 }