Merge pull request #2127 from bbc/brand-theming

Brand - new backgroundColour & logoColour props

packages/components/psammead-brand/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 5.0.0 | [PR#2127](https://github.com/bbc/psammead/pull/2127) Remove default colours. Add required props backgroundColour & logoColour |
 | 4.3.8 | [PR#2081](https://github.com/bbc/psammead/pull/2081) Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-visually-hidden-text |
 | 4.3.7 | [PR#1993](https://github.com/bbc/psammead/pull/1993) Talos - Bump Dependencies |
 | 4.3.6 | [PR#1960](https://github.com/bbc/psammead/pull/1960) Change <React.Fragment> to <> |

packages/components/psammead-brand/README.md

@@ -4,7 +4,7 @@
 
 The `Brand` component provides the BBC service logo (as SVG), nested inside a styled link and div. The link is currently hardcoded to "https://www.bbc.co.uk/news".
 
-`Brand` takes a `product`, `svgHeight`, `minWidth`, `maxWidth`, `url`, `serviceLocalisedName` and `svg` as props.
+`Brand` takes a `product`, `svgHeight`, `minWidth`, `maxWidth`, `url`, `serviceLocalisedName`, `backgroundColour`, `logoColour` and `svg` as props.
 
 The `product` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand.
 
@@ -16,6 +16,8 @@ The `minWidth` and `maxWidth` values are required to allow the ability for the `
 
 The `svgHeight` value acts as a placeholder for the `svg` element meaning the overall banner height does not change with the dynamic scaling, also the `height` allows the contents of the `svg` element to remain vertically centred within the banner at all times.
 
+The `backgroundColour` is the background colour and `logoColour` is the colour of the SVG and the underline when hovering/focusing on the brand. 
+
 The `url` value is the link that points to the frontpage of the service associated with the `svg`.
 
 ## Installation
@@ -32,6 +34,8 @@ The `url` value is the link that points to the frontpage of the service associat
 | minWidth | Number | yes | N/A | `240` |
 | maxWidth | Number | yes | N/A | `380` |
 | svg | Object | yes | N/A | { group: `(<g fillrule="evenodd"><path d="M84.32" /></g>)`, viewbox: { height: 24, width: 167.95 }, ratio: 6.9979 } |
+| backgroundColour | string | yes | N/A | `${C_POSTBOX}` or relevant string hex code |
+| logoColour | string | yes | N/A | `${C_WHITE}` or relevant string hex code |
 | url | String | no | N/A | `https://www.bbc.co.uk/news` |
 | serviceLocalisedName | String | no | N/A | `'Yoruba'` |
 | borderTop | bool | no | `false` | `true` |
@@ -46,6 +50,7 @@ When using `Brand` in the header, you should ensure that `borderBottom` prop is
 ```jsx
 import Brand from '@bbc/psammead-brand';
 import { igbo } from '@bbc/psammead-assets/svgs';
+import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
 
 const Header = (product, serviceName) => (
   <header role="banner">
@@ -57,6 +62,8 @@ const Header = (product, serviceName) => (
       minWidth={180}
       svg={igbo}
       url="https://www.bbc.co.uk/news"
+      backgroundColour={backgroundColour}
+      logoColour={logoColour}
       borderBottom
     />
   </header>

packages/components/psammead-brand/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "4.3.8",
+  "version": "5.0.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -20,9 +20,11 @@
   "homepage": "https://github.com/bbc/psammead/blob/latest/packages/components/psammead-brand/README.md",
   "dependencies": {
     "@bbc/gel-foundations": "^3.3.3",
-    "@bbc/psammead-styles": "^2.1.4",
     "@bbc/psammead-visually-hidden-text": "^1.2.2"
   },
+  "devDependencies": {
+    "@bbc/psammead-styles": "^2.1.4"
+  },
   "peerDependencies": {
     "react": "^16.9.0",
     "styled-components": "^4.3.2"

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { string, number, node, shape, bool } from 'prop-types';
-import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
 import {
   GEL_GROUP_2_SCREEN_WIDTH_MIN,
@@ -30,7 +29,7 @@ const SvgWrapper = styled.div`
 `;
 
 const Banner = styled.div`
-  background-color: ${C_POSTBOX};
+  background-color: ${props => props.backgroundColour};
   ${({ svgHeight }) =>
     conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_BELOW_400PX)}
   width: 100%;
@@ -59,7 +58,7 @@ const StyledLink = styled.a`
 // `currentColor` has been used to address high contrast mode in Firefox.
 const BrandSvg = styled.svg`
   box-sizing: content-box;
-  color: ${C_WHITE};
+  color: ${props => props.logoColour};
   fill: currentColor;
   padding-top: ${GEL_SPACING_DBL};
   padding-bottom: ${SVG_BOTTOM_OFFSET_BELOW_400PX};
@@ -81,7 +80,7 @@ const BrandSvg = styled.svg`
   ${StyledLink}:hover &,
     ${StyledLink}:focus & {
     text-decoration: none;
-    border-bottom: ${GEL_SPACING_HLF} solid ${C_WHITE};
+    border-bottom: ${GEL_SPACING_HLF} solid ${props => props.logoColour};
   }
   /* stylelint-enable */
 `;
@@ -112,6 +111,8 @@ const StyledBrand = ({
   svg,
   maxWidth,
   minWidth,
+  backgroundColour,
+  logoColour,
 }) => (
   <>
     {svg && (
@@ -125,6 +126,8 @@ const StyledBrand = ({
           ratio={svg.ratio}
           maxWidth={maxWidth}
           minWidth={minWidth}
+          backgroundColour={backgroundColour}
+          logoColour={logoColour}
         >
           {svg.group}
         </BrandSvg>
@@ -151,6 +154,8 @@ const brandProps = {
       width: number.isRequired,
     }).isRequired,
   }).isRequired,
+  backgroundColour: string.isRequired,
+  logoColour: string.isRequired,
 };
 
 StyledBrand.propTypes = brandProps;
@@ -160,13 +165,24 @@ StyledBrand.defaultProps = {
 };
 
 const Brand = props => {
-  const { svgHeight, maxWidth, minWidth, url, borderTop, borderBottom } = props;
+  const {
+    svgHeight,
+    maxWidth,
+    minWidth,
+    url,
+    borderTop,
+    borderBottom,
+    backgroundColour,
+    logoColour,
+  } = props;
 
   return (
     <Banner
       svgHeight={svgHeight}
       borderTop={borderTop}
       borderBottom={borderBottom}
+      backgroundColour={backgroundColour}
+      logoColour={logoColour}
     >
       {url ? (
         <SvgWrapper>

packages/components/psammead-brand/src/index.stories.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  color,
   select,
   number,
   text,
@@ -9,6 +10,7 @@ import {
 import { storiesOf } from '@storybook/react';
 import * as svgs from '@bbc/psammead-assets/svgs';
 import { dirDecorator } from '@bbc/psammead-storybook-helpers';
+import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
 import notes from '../README.md';
 import Brand from './index';
 
@@ -29,6 +31,8 @@ const inputs = () => {
   const svgHeightInput = number('desired height svg', svgMaxHeight);
   const borderBottom = boolean('Border Bottom', false);
   const borderTop = boolean('Border Top', false);
+  const backgroundColour = color('Background colour', `${C_POSTBOX}`);
+  const logoColour = color('Logo colour', `${C_WHITE}`);
 
   return {
     productInput,
@@ -39,6 +43,8 @@ const inputs = () => {
     maxWidthInput,
     borderTop,
     borderBottom,
+    backgroundColour,
+    logoColour,
   };
 };
 
@@ -57,6 +63,8 @@ storiesOf('Components|Brand', module)
         svgChoice,
         borderBottom,
         borderTop,
+        backgroundColour,
+        logoColour,
       } = inputs();
 
       return (
@@ -69,6 +77,8 @@ storiesOf('Components|Brand', module)
           svg={svgs[svgChoice]}
           borderBottom={borderBottom}
           borderTop={borderTop}
+          backgroundColour={backgroundColour}
+          logoColour={logoColour}
         />
       );
     },
@@ -86,6 +96,8 @@ storiesOf('Components|Brand', module)
         svgChoice,
         borderBottom,
         borderTop,
+        backgroundColour,
+        logoColour,
       } = inputs();
 
       return (
@@ -99,6 +111,8 @@ storiesOf('Components|Brand', module)
           url="https://www.bbc.com/news"
           borderBottom={borderBottom}
           borderTop={borderTop}
+          backgroundColour={backgroundColour}
+          logoColour={logoColour}
         />
       );
     },

packages/components/psammead-brand/src/index.test.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import { render } from '@testing-library/react';
-import Brand from './index';
+import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
+import Brand from '.';
 
 const svg = {
   group: (
@@ -27,6 +28,8 @@ describe('Brand', () => {
       minWidth={180}
       svg={svg}
       url="https://www.bbc.co.uk/news"
+      backgroundColour={C_POSTBOX}
+      logoColour={C_WHITE}
     />,
   );
 
@@ -39,6 +42,8 @@ describe('Brand', () => {
       svgHeight={24}
       maxWidth={280}
       minWidth={180}
+      backgroundColour={C_POSTBOX}
+      logoColour={C_WHITE}
     />,
   );
 
@@ -50,6 +55,8 @@ describe('Brand', () => {
       svgHeight={24}
       maxWidth={280}
       minWidth={180}
+      backgroundColour={C_POSTBOX}
+      logoColour={C_WHITE}
     />,
   );
 
@@ -63,6 +70,8 @@ describe('Brand', () => {
       minWidth={180}
       borderTop
       borderBottom
+      backgroundColour={C_POSTBOX}
+      logoColour={C_WHITE}
     />,
   );
 
@@ -77,6 +86,8 @@ describe('Brand', () => {
           minWidth={180}
           svg={svg}
           url="https://www.bbc.co.uk/news"
+          backgroundColour={C_POSTBOX}
+          logoColour={C_WHITE}
         />,
       );
 
@@ -94,6 +105,8 @@ describe('Brand', () => {
           minWidth={180}
           svg={svg}
           url="https://www.bbc.co.uk/news"
+          backgroundColour={C_POSTBOX}
+          logoColour={C_WHITE}
         />,
       );