diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index fa598905ab..38d815aa0f 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 2.0.0 | [PR#480](https://github.com/bbc/psammead/pull/480) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9. Also reduce banner height and left-right padding under 600px. | | 1.0.2 | [PR#515](https://github.com/bbc/psammead/pull/515) Update story to use dirDecorator | | 1.0.1 | [PR#476](https://github.com/bbc/psammead/pull/476) Fail gracefully if brand svg is not provided | | 1.0.0 | [PR#457](https://github.com/bbc/psammead/pull/457) Enable passing of different svgs | diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md index 37f6bb03ad..d450968bea 100644 --- a/packages/components/psammead-brand/README.md +++ b/packages/components/psammead-brand/README.md @@ -2,7 +2,17 @@ ## Description -The `Brand` component provides the BBC service logo (as SVG), nested inside a styled span, link and div. The link is currently hardcoded to "https://www.bbc.co.uk/news". `Brand` takes a `brandName` and an `svg` as props. `brandName` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand. Note that this does not currently affect the branding itself, which always renders as `BBC NEWS`. The `svg` prop must contain a `group`, `viewbox` values and a `ratio`, which is used within an `svg` element, rendered at a height of 24px. Examples of the `svg` object can be found in [@bbc/psammead-assets](https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-assets/README.md#service-svgs) +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 `brandName`, `svgHeight`, `minWidth`, `maxWidth` and `svg` as props. + +The `brandName` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand. + +The `svg` prop must contain a `group`, `viewbox` values and a `ratio`, which is used within an `svg` element. Examples of the `svg` object can be found in [@bbc/psammead-assets](https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-assets/README.md#service-svgs). + +The `minWidth` and `maxWidth` values are required to allow the ability for the `svg` element to dynamically scale as the viewport becomes a very small size EG: feature phones. + +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. ## Installation @@ -13,6 +23,9 @@ The `Brand` component provides the BBC service logo (as SVG), nested inside a st | Argument | Type | Required | Default | Example | | --------- | ------ | -------- | ------- | ------------ | | brandName | String | yes | N/A | `'BBC News'` | +| svgHeight | Number | yes | N/A | `24` | +| 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 } | ## Usage @@ -25,7 +38,13 @@ import { igbo } from '@bbc/psammead-assets/svgs'; const Header = brandName => (
- +
); ``` @@ -44,6 +63,9 @@ The `Brand` component is designed to be used where a BBC logo is required as SVG +### Additional notes +- `width: 100%` is needed on both `` and the `` to allow the brand to dynamically scale on the Firefox browser + ## Contributing Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md). diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index 77b9114207..6185e69487 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": "1.0.2", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -36,9 +36,9 @@ "integrity": "sha512-YWnHJ4b7ejvKX5IvTL5ualBCwrAEc/4yfn3hNp8h8v5URnb2zQ8l7lWjbhcxjmbLbVVRqPNa97mkp75ApyxvwQ==" }, "@bbc/psammead-assets": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/@bbc/psammead-assets/-/psammead-assets-0.1.8.tgz", - "integrity": "sha512-oEGKvOYy3M+ceZVgkdnTxkn35xhLCAvhZN179NSMeChUhPKT8u8ZGertRjFcffasFlm8i+vdstJgAClVO7aNCg==", + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@bbc/psammead-assets/-/psammead-assets-0.1.9.tgz", + "integrity": "sha512-yS8Zp4eknoai+UtIaWjVJiJxQieOYCkH1Mj6QIYON3g0oXVekm9gFDzpB/JNZGa0aavXKBkcuLEj8fz5HT05Fw==", "dev": true }, "@bbc/psammead-storybook-helpers": { diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index 2310a66dd3..8209afbf2e 100644 --- a/packages/components/psammead-brand/package.json +++ b/packages/components/psammead-brand/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-brand", - "version": "1.0.2", + "version": "2.0.0", "main": "dist/index.js", "description": "Provides the BBC News logo (as SVG), nested a hardcoded link to https://www.bbc.co.uk/news", "repository": { @@ -22,7 +22,7 @@ "@bbc/psammead-visually-hidden-text": "^0.1.10" }, "devDependencies": { - "@bbc/psammead-assets": "^0.1.8", + "@bbc/psammead-assets": "^0.1.9", "@bbc/psammead-storybook-helpers": "^2.1.1", "@bbc/psammead-test-helpers": "^0.3.3", "react": "^16.6.3", diff --git a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap index 57fd7eb2e2..0f6519f766 100644 --- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Brand should render correctly 1`] = ` -.c6 { +.c4 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -14,60 +14,49 @@ exports[`Brand should render correctly 1`] = ` .c0 { background-color: #B80000; - height: 5rem; + height: 3.5rem; width: 100%; + padding: 0 0.5rem; } -.c1 { - max-width: 80rem; - margin: 0 auto; -} - -.c3 { - padding-top: 0.5rem; +.c2 { display: inline-block; + width: 100%; + max-width: 17.5rem; + min-width: 11.25rem; } -.c4 { - display: block; - padding-bottom: 1.5rem; +.c3 { + box-sizing: content-box; + fill: #FFFFFF; + padding-top: 1rem; + padding-bottom: 0.75rem; + width: 100%; } -.c2:hover .c4, -.c2:focus .c4 { +.c1:hover .c3, +.c1:focus .c3 { -webkit-text-decoration: none; text-decoration: none; border-bottom: 0.25rem solid #FFFFFF; } -.c5 { - display: block; - height: 1.5rem; - width: 10.50rem; - margin-top: 1.25rem; - fill: #fff; -} - -@media (max-width:25rem) { - .c0 { - padding: 0 0.5rem; - } -} - -@media (min-width:25rem) { +@media (min-width:37.5rem) { .c0 { + height: 5rem; padding: 0 1rem; } } -@media (min-width:62.9375rem) { - .c0 { - padding: 0 1rem; +@media (min-width:37.5rem) { + .c3 { + padding-top: 1.75rem; + padding-bottom: 1.5rem; } } @media screen and (-ms-high-contrast:active),print { - .c5 { + .c3 { fill: windowText; } } @@ -75,67 +64,43 @@ exports[`Brand should render correctly 1`] = `
-
- -
+ + + + + Default Brand Name + +
`; exports[`Brand should render correctly with svg not provided 1`] = ` .c0 { background-color: #B80000; - height: 5rem; width: 100%; + padding: 0 0.5rem; } -.c1 { - max-width: 80rem; - margin: 0 auto; -} - -@media (max-width:25rem) { - .c0 { - padding: 0 0.5rem; - } -} - -@media (min-width:25rem) { - .c0 { - padding: 0 1rem; - } -} - -@media (min-width:62.9375rem) { +@media (min-width:37.5rem) { .c0 { padding: 0 1rem; } @@ -143,9 +108,5 @@ exports[`Brand should render correctly with svg not provided 1`] = `
-
-
+/> `; diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index a4111798f9..def6a32b8b 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/packages/components/psammead-brand/src/index.jsx @@ -1,103 +1,100 @@ import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { string, number, node, shape } from 'prop-types'; import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; +import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; import { - GEL_GROUP_2_SCREEN_WIDTH_MIN, - GEL_GROUP_3_SCREEN_WIDTH_MAX, - GEL_GROUP_5_SCREEN_WIDTH_MIN, -} from '@bbc/gel-foundations/breakpoints'; -import { - GEL_MARGIN_BELOW_400PX, - GEL_MARGIN_ABOVE_400PX, + GEL_SPACING_HLF, GEL_SPACING, GEL_SPACING_DBL, - GEL_SPACING_HLF, + GEL_SPACING_TRPL, } from '@bbc/gel-foundations/spacings'; -const layoutWrapperWithoutGrid = css` - @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { - padding: 0 ${GEL_MARGIN_BELOW_400PX}; - } - @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { - padding: 0 ${GEL_MARGIN_ABOVE_400PX}; - } -`; +const SVG_TOP_OFFSET_ABOVE_600PX = '1.75rem'; // 28px +const SVG_BOTTOM_OFFSET_BELOW_600PX = '0.75rem'; // 12px +const PADDING_AROUND_SVG_ABOVE_600PX = 56; +const PADDING_AROUND_SVG_BELOW_600PX = 32; -const SVG_TOP_OFFSET = '1.25rem'; // 20px -const SVG_BOTTOM_OFFSET = '1.5rem'; // 24px -const BANNER_HEIGHT = '5rem'; // 80px +const conditionallyRenderHeight = (svgHeight, padding) => + svgHeight ? `height: ${(svgHeight + padding) / 16}rem` : ''; -const SVG_HEIGHT_PX = 24; -const SVG_HEIGHT = `${SVG_HEIGHT_PX / 16}rem`; - -const StyledWrapper = styled.div` - ${layoutWrapperWithoutGrid}; +const Banner = styled.div` background-color: ${C_POSTBOX}; - height: ${BANNER_HEIGHT}; + ${({ svgHeight }) => + conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_BELOW_600PX)}; width: 100%; - @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) { + padding: 0 ${GEL_SPACING}; + + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + ${({ svgHeight }) => + conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_ABOVE_600PX)}; padding: 0 ${GEL_SPACING_DBL}; } `; -const ConstraintWrapper = styled.div` - max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}; - margin: 0 auto; -`; - const StyledLink = styled.a` - padding-top: ${GEL_SPACING}; display: inline-block; + width: 100%; + max-width: ${({ maxWidth }) => maxWidth / 16}rem; + min-width: ${({ minWidth }) => minWidth / 16}rem; `; -const StyledSpan = styled.span` - display: block; - padding-bottom: ${SVG_BOTTOM_OFFSET}; - ${/* sc-selector */ StyledLink}:hover &, - ${/* sc-selector */ StyledLink}:focus & { - text-decoration: none; - border-bottom: ${GEL_SPACING_HLF} solid ${C_WHITE}; +const BrandSvg = styled.svg` + box-sizing: content-box; + fill: ${C_WHITE}; + padding-top: ${GEL_SPACING_DBL}; + padding-bottom: ${SVG_BOTTOM_OFFSET_BELOW_600PX}; + width: 100%; + + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + padding-top: ${SVG_TOP_OFFSET_ABOVE_600PX}; + padding-bottom: ${GEL_SPACING_TRPL}; } -`; -const BrandSvg = styled.svg` - display: block; - height: ${SVG_HEIGHT}; - width: ${props => ((SVG_HEIGHT_PX * props.ratio) / 16).toFixed(2)}rem; - margin-top: ${SVG_TOP_OFFSET}; - fill: #fff; @media screen and (-ms-high-contrast: active), print { fill: windowText; } + + /* stylelint-disable */ + /* https://www.styled-components.com/docs/advanced#referring-to-other-components */ + ${StyledLink}:hover &, + ${StyledLink}:focus & { + text-decoration: none; + border-bottom: ${GEL_SPACING_HLF} solid ${C_WHITE}; + } + /* stylelint-enable */ `; -const Brand = ({ brandName, svg }) => ( - - - {svg && ( - - - - {brandName} - - - )} - - +const Brand = ({ brandName, svgHeight, minWidth, maxWidth, svg }) => ( + + {svg && ( + + + {brandName} + + )} + ); Brand.propTypes = { brandName: string.isRequired, + minWidth: number.isRequired, + maxWidth: number.isRequired, + svgHeight: number.isRequired, svg: shape({ group: node.isRequired, ratio: number.isRequired, diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index 47ea4848d3..3c15c1a937 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { select, withKnobs } from '@storybook/addon-knobs'; +import { select, number, withKnobs } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import * as svgs from '@bbc/psammead-assets/svgs'; import { dirDecorator } from '@bbc/psammead-storybook-helpers'; @@ -17,16 +17,29 @@ storiesOf('Brand', module) .filter(key => key !== 'BBC_BLOCKS') .map(key => key.charAt(0).toUpperCase() + key.slice(1)); - const choice = select('Service SVG', options, 'news').toLowerCase(); - return ; + const svgChoice = select('Service SVG', options, 'News').toLowerCase(); + const svgRatio = svgs[svgChoice].ratio; + const svgMaxHeight = 24; + const svgMinHeight = 16; + const minWidthInput = number( + 'minimum svg width', + svgRatio * svgMinHeight, + ); + const maxWidthInput = number( + 'maximum svg width', + svgRatio * svgMaxHeight, + ); + const svgHeightInput = number('desired height svg', svgMaxHeight); + + return ( + + ); }, { notes }, ); - -storiesOf('Brand', module).add( - 'without brand svg', - () => , - { - notes, - }, -); diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx index aa6653bfd1..0cf724501a 100644 --- a/packages/components/psammead-brand/src/index.test.jsx +++ b/packages/components/psammead-brand/src/index.test.jsx @@ -18,7 +18,13 @@ const svg = { describe('Brand', () => { shouldMatchSnapshot( 'should render correctly', - , + , ); shouldMatchSnapshot( 'should render correctly with svg not provided',