From e962788165b65c47890bc704e6f5935b952145a3 Mon Sep 17 00:00:00 2001 From: Sareh Heidari Date: Fri, 13 Sep 2019 17:24:05 +0100 Subject: [PATCH 1/5] Update brand to take in colour props backgroundColour & logoColour --- .../components/psammead-brand/CHANGELOG.md | 1 + packages/components/psammead-brand/README.md | 2 ++ .../psammead-brand/package-lock.json | 2 +- .../components/psammead-brand/package.json | 2 +- .../components/psammead-brand/src/index.jsx | 26 +++++++++++++++---- .../psammead-brand/src/index.stories.jsx | 13 ++++++++++ .../psammead-brand/src/index.test.jsx | 15 ++++++++++- 7 files changed, 53 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index ef669d61d9..d7c1979f5b 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 5.0.0 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Remove default colours. Add 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 to <> | diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md index 73cdd8c591..70de08ef8e 100644 --- a/packages/components/psammead-brand/README.md +++ b/packages/components/psammead-brand/README.md @@ -32,6 +32,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: `()`, 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` | diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index 43fa3abba1..11edfb7d2b 100644 --- a/packages/components/psammead-brand/package-lock.json +++ b/packages/components/psammead-brand/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-brand", - "version": "4.3.8", + "version": "5.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index a83683469a..ef2d19f7a4 100644 --- a/packages/components/psammead-brand/package.json +++ b/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, diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index bd9e88aadc..ead0408b37 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/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} @@ -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 ( {url ? ( diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index 23970479f5..fc0b2ab0dc 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -9,6 +9,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 +30,8 @@ const inputs = () => { const svgHeightInput = number('desired height svg', svgMaxHeight); const borderBottom = boolean('Border Bottom', false); const borderTop = boolean('Border Top', false); + const backgroundColour = `${C_POSTBOX}`; + const logoColour = `${C_WHITE}`; return { productInput, @@ -39,6 +42,8 @@ const inputs = () => { maxWidthInput, borderTop, borderBottom, + backgroundColour, + logoColour, }; }; @@ -57,6 +62,8 @@ storiesOf('Components|Brand', module) svgChoice, borderBottom, borderTop, + backgroundColour, + logoColour, } = inputs(); return ( @@ -69,6 +76,8 @@ storiesOf('Components|Brand', module) svg={svgs[svgChoice]} borderBottom={borderBottom} borderTop={borderTop} + backgroundColour={backgroundColour} + logoColour={logoColour} /> ); }, @@ -86,6 +95,8 @@ storiesOf('Components|Brand', module) svgChoice, borderBottom, borderTop, + backgroundColour, + logoColour, } = inputs(); return ( @@ -99,6 +110,8 @@ storiesOf('Components|Brand', module) url="https://www.bbc.com/news" borderBottom={borderBottom} borderTop={borderTop} + backgroundColour={backgroundColour} + logoColour={logoColour} /> ); }, diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx index e57d3e112f..900849cfea 100644 --- a/packages/components/psammead-brand/src/index.test.jsx +++ b/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} />, ); From f5bf626f385d1499951f7ac44ef5628ca55c1f32 Mon Sep 17 00:00:00 2001 From: Sareh Date: Fri, 13 Sep 2019 17:34:52 +0100 Subject: [PATCH 2/5] Update CHANGELOG.md --- packages/components/psammead-brand/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index d7c1979f5b..b107c9f9d4 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | | ------- | ----------- | -| 5.0.0 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Remove default colours. Add props backgroundColour & logoColour | +| 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 to <> | From bddc5872fd63e631595d45bafcc73635ad84c86b Mon Sep 17 00:00:00 2001 From: Sareh Date: Fri, 13 Sep 2019 17:38:36 +0100 Subject: [PATCH 3/5] Update README.md --- packages/components/psammead-brand/README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md index 70de08ef8e..68c00ea3ff 100644 --- a/packages/components/psammead-brand/README.md +++ b/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 @@ -48,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) => (
@@ -59,6 +62,8 @@ const Header = (product, serviceName) => ( minWidth={180} svg={igbo} url="https://www.bbc.co.uk/news" + backgroundColour={backgroundColour} + logoColour={logoColour} borderBottom />
From ad2b9a07c1387c348a7b61df1b728a761395c2d7 Mon Sep 17 00:00:00 2001 From: Sareh Heidari Date: Fri, 13 Sep 2019 17:40:48 +0100 Subject: [PATCH 4/5] Move bbc/psammead-styles to devDependencies since is only used in tests & stories --- packages/components/psammead-brand/package-lock.json | 7 ++++--- packages/components/psammead-brand/package.json | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index 11edfb7d2b..b637660470 100644 --- a/packages/components/psammead-brand/package-lock.json +++ b/packages/components/psammead-brand/package-lock.json @@ -10,9 +10,10 @@ "integrity": "sha512-Xq/nrWE0W6s+Q+wBH3600p9K9cCYQAWKT3eLm8eH7+LQO9EgbqOHFrjw8Kd9paa57k3k/YHX1naBPrRMJANrOQ==" }, "@bbc/psammead-styles": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-2.1.4.tgz", - "integrity": "sha512-6qhwrfwQo8XkmfZMs3aexwbgSsvRZczp1CCLXris6y+i/y15lwEDYPFLhrZFXyzVdfDlsrQKk8pvwRxb5EDJCw==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-2.2.0.tgz", + "integrity": "sha512-JID87ZsLB9Q+vkbtB4//C7pJEFO2YKZILJGWRTKwaGahx4GkQ7XIG4lsAYg0SH5iX73j2nMabS2llgcDaHMQnw==", + "dev": true }, "@bbc/psammead-visually-hidden-text": { "version": "1.2.2", diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index ef2d19f7a4..db00a2209e 100644 --- a/packages/components/psammead-brand/package.json +++ b/packages/components/psammead-brand/package.json @@ -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" From 386ef0db6a60ae2fa7308c228a4189c455da7693 Mon Sep 17 00:00:00 2001 From: Sareh Heidari Date: Mon, 16 Sep 2019 09:51:50 +0100 Subject: [PATCH 5/5] Add color knob to change backgroundColour & logoColour props --- packages/components/psammead-brand/src/index.stories.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index fc0b2ab0dc..75cae9453f 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { + color, select, number, text, @@ -30,8 +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 = `${C_POSTBOX}`; - const logoColour = `${C_WHITE}`; + const backgroundColour = color('Background colour', `${C_POSTBOX}`); + const logoColour = color('Logo colour', `${C_WHITE}`); return { productInput,