Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Brand - new backgroundColour & logoColour props #2127

Merged
merged 9 commits into from
Sep 16, 2019
Merged

Brand - new backgroundColour & logoColour props #2127

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e962788
Update brand to take in colour props backgroundColour & logoColour
sareh Sep 13, 2019
f5bf626
Update CHANGELOG.md
sareh Sep 13, 2019
bddc587
Update README.md
sareh Sep 13, 2019
ad2b9a0
Move bbc/psammead-styles to devDependencies since is only used in tes…
sareh Sep 13, 2019
aa626bb
Merge branch 'brand-theming' of github.com:bbc/psammead into brand-th…
sareh Sep 13, 2019
386ef0d
Add color knob to change backgroundColour & logoColour props
sareh Sep 16, 2019
64c5745
Merge branch 'latest' into brand-theming
sareh Sep 16, 2019
5fea99a
Merge branch 'latest' into brand-theming
EinsteinNjoroge Sep 16, 2019
57dfd82
Merge branch 'latest' into brand-theming
sareh Sep 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/psammead-brand/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <> |
Expand Down
9 changes: 8 additions & 1 deletion packages/components/psammead-brand/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
Expand All @@ -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` |
Expand All @@ -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">
Expand All @@ -57,6 +62,8 @@ const Header = (product, serviceName) => (
minWidth={180}
svg={igbo}
url="https://www.bbc.co.uk/news"
backgroundColour={backgroundColour}
logoColour={logoColour}
Copy link
Contributor

@DenisHdz DenisHdz Sep 16, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, but what about adding the color addon so we can also change the colors from the Storybook?

import {  color } from '@storybook/addon-knobs';
const backgroundColour = color('POSTBOX', `${C_POSTBOX}`);
const logoColour = color('WHITE', `${C_WHITE}`);

color-addon

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Have updated it. I used the labels Background colour and Logo colour to keep them in keeping with the other knob labels that refer to the prop name.

borderBottom
/>
</header>
Expand Down
9 changes: 5 additions & 4 deletions packages/components/psammead-brand/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions packages/components/psammead-brand/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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"
Expand Down
26 changes: 21 additions & 5 deletions packages/components/psammead-brand/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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};
Expand All @@ -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 */
`;
Expand Down Expand Up @@ -112,6 +111,8 @@ const StyledBrand = ({
svg,
maxWidth,
minWidth,
backgroundColour,
logoColour,
}) => (
<>
{svg && (
Expand All @@ -125,6 +126,8 @@ const StyledBrand = ({
ratio={svg.ratio}
maxWidth={maxWidth}
minWidth={minWidth}
backgroundColour={backgroundColour}
logoColour={logoColour}
>
{svg.group}
</BrandSvg>
Expand All @@ -151,6 +154,8 @@ const brandProps = {
width: number.isRequired,
}).isRequired,
}).isRequired,
backgroundColour: string.isRequired,
logoColour: string.isRequired,
};

StyledBrand.propTypes = brandProps;
Expand All @@ -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>
Expand Down
14 changes: 14 additions & 0 deletions packages/components/psammead-brand/src/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import {
color,
select,
number,
text,
Expand All @@ -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';

Expand All @@ -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,
Expand All @@ -39,6 +43,8 @@ const inputs = () => {
maxWidthInput,
borderTop,
borderBottom,
backgroundColour,
logoColour,
};
};

Expand All @@ -57,6 +63,8 @@ storiesOf('Components|Brand', module)
svgChoice,
borderBottom,
borderTop,
backgroundColour,
logoColour,
} = inputs();

return (
Expand All @@ -69,6 +77,8 @@ storiesOf('Components|Brand', module)
svg={svgs[svgChoice]}
borderBottom={borderBottom}
borderTop={borderTop}
backgroundColour={backgroundColour}
logoColour={logoColour}
/>
);
},
Expand All @@ -86,6 +96,8 @@ storiesOf('Components|Brand', module)
svgChoice,
borderBottom,
borderTop,
backgroundColour,
logoColour,
} = inputs();

return (
Expand All @@ -99,6 +111,8 @@ storiesOf('Components|Brand', module)
url="https://www.bbc.com/news"
borderBottom={borderBottom}
borderTop={borderTop}
backgroundColour={backgroundColour}
logoColour={logoColour}
/>
);
},
Expand Down
15 changes: 14 additions & 1 deletion packages/components/psammead-brand/src/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: (
Expand All @@ -27,6 +28,8 @@ describe('Brand', () => {
minWidth={180}
svg={svg}
url="https://www.bbc.co.uk/news"
backgroundColour={C_POSTBOX}
logoColour={C_WHITE}
/>,
);

Expand All @@ -39,6 +42,8 @@ describe('Brand', () => {
svgHeight={24}
maxWidth={280}
minWidth={180}
backgroundColour={C_POSTBOX}
logoColour={C_WHITE}
/>,
);

Expand All @@ -50,6 +55,8 @@ describe('Brand', () => {
svgHeight={24}
maxWidth={280}
minWidth={180}
backgroundColour={C_POSTBOX}
logoColour={C_WHITE}
/>,
);

Expand All @@ -63,6 +70,8 @@ describe('Brand', () => {
minWidth={180}
borderTop
borderBottom
backgroundColour={C_POSTBOX}
logoColour={C_WHITE}
/>,
);

Expand All @@ -77,6 +86,8 @@ describe('Brand', () => {
minWidth={180}
svg={svg}
url="https://www.bbc.co.uk/news"
backgroundColour={C_POSTBOX}
logoColour={C_WHITE}
/>,
);

Expand All @@ -94,6 +105,8 @@ describe('Brand', () => {
minWidth={180}
svg={svg}
url="https://www.bbc.co.uk/news"
backgroundColour={C_POSTBOX}
logoColour={C_WHITE}
/>,
);

Expand Down