Control height of Brand SVG

packages/components/psammead-brand/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.0.0   | [PR#480](https://github.com/bbc/psammead/pull/480) Control height of Brand SVG |
 | 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 |
 | 0.3.4   | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme |

packages/components/psammead-brand/README.md

@@ -2,7 +2,7 @@
 
 ## 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 renders 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`, an `svg`, and an `svgHeight` 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 is always produced by rendering the `svg` prop. The `svg` prop must contain a `group`, `viewbox` values and a `ratio`, which is used within an `svg` element, rendered at a height defined by the `svgHeight` prop. 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 `svgHeight` prop is a mapping between [GEL breakpoint groups A, B and D](http://www.bbc.co.uk/gel/guidelines/typography#type-sizes) and the height (in pixels) to render the SVG at. (These heights are converted to `rem`s internally, and the widths are calculated using the `ratio` defined in the `svg` prop).
 
 ## Installation
 
@@ -14,6 +14,7 @@ The `Brand` component provides the BBC service logo (as SVG), nested inside a st
 | --------- | ------ | -------- | ------- | ------------ |
 | brandName | String | yes      | N/A     | `'BBC News'` |
 | svg | Object | yes | N/A | { group: `(<g fillrule="evenodd"><path d="M84.32" /></g>)`, viewbox: { height: 24, width: 167.95 }, ratio: 6.9979 } |
+| svgHeight | Object | yes | N/A | `{ groupA: 16, groupB: 20, groupD: 24 }` |
 
 ## Usage
 
@@ -23,9 +24,11 @@ The typical use-case of this component is at the top of pages in a [`header` ele
 import Brand from '@bbc/psammead-brand';
 import { igbo } from '@bbc/psammead-assets/svgs';
 
+const svgHeight = { groupA: 16, groupB: 20, groupD: 24 };
+
 const Header = brandName => (
   <header role="banner">
-    <Brand brandName={brandName} svg={igbo} />
+    <Brand brandName={brandName} svg={igbo} svgHeight={svgHeight} />
   </header>
 );
 ```

packages/components/psammead-brand/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "1.0.1",
+  "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": {

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

@@ -14,8 +14,8 @@ exports[`Brand should render correctly 1`] = `
 
 .c0 {
   background-color: #B80000;
-  height: 5rem;
   width: 100%;
+  height: 3.875rem;
 }
 
 .c1 {
@@ -24,7 +24,6 @@ exports[`Brand should render correctly 1`] = `
 }
 
 .c3 {
-  padding-top: 0.5rem;
   display: inline-block;
 }
 
@@ -42,10 +41,10 @@ exports[`Brand should render correctly 1`] = `
 
 .c5 {
   display: block;
-  height: 1.5rem;
-  width: 10.50rem;
-  margin-top: 1.25rem;
   fill: #fff;
+  height: 1rem;
+  width: 7.00rem;
+  margin-top: 1.4375rem;
 }
 
 @media (max-width:25rem) {
@@ -60,6 +59,12 @@ exports[`Brand should render correctly 1`] = `
   }
 }
 
+@media (min-width:37.5rem) {
+  .c0 {
+    height: 5rem;
+  }
+}
+
 @media (min-width:62.9375rem) {
   .c0 {
     padding: 0 1rem;
@@ -72,6 +77,22 @@ exports[`Brand should render correctly 1`] = `
   }
 }
 
+@media (min-width:20rem) {
+  .c5 {
+    height: 1.25rem;
+    width: 8.75rem;
+    margin-top: 1.3125rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c5 {
+    height: 1.5rem;
+    width: 10.50rem;
+    margin-top: 1.75rem;
+  }
+}
+
 <div
   className="c0"
 >
@@ -89,6 +110,13 @@ exports[`Brand should render correctly 1`] = `
           aria-hidden="true"
           className="c5"
           focusable="false"
+          height={
+            Object {
+              "groupA": 16,
+              "groupB": 20,
+              "groupD": 24,
+            }
+          }
           viewBox="0 0 167.95 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -114,8 +142,8 @@ exports[`Brand should render correctly 1`] = `
 exports[`Brand should render correctly with svg not provided 1`] = `
 .c0 {
   background-color: #B80000;
-  height: 5rem;
   width: 100%;
+  height: 3.875rem;
 }
 
 .c1 {
@@ -135,6 +163,12 @@ exports[`Brand should render correctly with svg not provided 1`] = `
   }
 }
 
+@media (min-width:37.5rem) {
+  .c0 {
+    height: 5rem;
+  }
+}
+
 @media (min-width:62.9375rem) {
   .c0 {
     padding: 0 1rem;

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

@@ -7,11 +7,11 @@ import {
   GEL_GROUP_2_SCREEN_WIDTH_MIN,
   GEL_GROUP_3_SCREEN_WIDTH_MAX,
   GEL_GROUP_5_SCREEN_WIDTH_MIN,
+  MEDIA_QUERY_TYPOGRAPHY,
 } from '@bbc/gel-foundations/breakpoints';
 import {
   GEL_MARGIN_BELOW_400PX,
   GEL_MARGIN_ABOVE_400PX,
-  GEL_SPACING,
   GEL_SPACING_DBL,
   GEL_SPACING_HLF,
 } from '@bbc/gel-foundations/spacings';
@@ -25,18 +25,24 @@ const layoutWrapperWithoutGrid = css`
   }
 `;
 
-const SVG_TOP_OFFSET = '1.25rem'; // 20px
 const SVG_BOTTOM_OFFSET = '1.5rem'; // 24px
-const BANNER_HEIGHT = '5rem'; // 80px
 
-const SVG_HEIGHT_PX = 24;
-const SVG_HEIGHT = `${SVG_HEIGHT_PX / 16}rem`;
+const BANNER_HEIGHT_MIN_PX = 62;
+const BANNER_HEIGHT_MIN = `${BANNER_HEIGHT_MIN_PX / 16}rem`;
+const BANNER_HEIGHT_FULL_PX = 80;
+const BANNER_HEIGHT_FULL = `${BANNER_HEIGHT_FULL_PX / 16}rem`;
 
 const StyledWrapper = styled.div`
   ${layoutWrapperWithoutGrid};
   background-color: ${C_POSTBOX};
-  height: ${BANNER_HEIGHT};
   width: 100%;
+
+  height: ${BANNER_HEIGHT_MIN};
+
+  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
+    height: ${BANNER_HEIGHT_FULL};
+  }
+
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) {
     padding: 0 ${GEL_SPACING_DBL};
   }
@@ -48,7 +54,6 @@ const ConstraintWrapper = styled.div`
 `;
 
 const StyledLink = styled.a`
-  padding-top: ${GEL_SPACING};
   display: inline-block;
 `;
 
@@ -62,24 +67,47 @@ const StyledSpan = styled.span`
   }
 `;
 
+const svgWidth = (ratio, heightPx) => `${((heightPx * ratio) / 16).toFixed(2)}`;
+
+const svgMarginTop = (bannerHeightPx, svgHeightPx) =>
+  // Places the SVG vertically centred in the banner.
+  `${(bannerHeightPx - svgHeightPx) / 2 / 16}`;
+
+const svgSizing = (bannerHeightPx, svgHeightPx, ratio) => `
+  height: ${svgHeightPx / 16}rem;
+  width: ${svgWidth(ratio, svgHeightPx)}rem;
+  margin-top: ${svgMarginTop(bannerHeightPx, svgHeightPx)}rem;
+`;
+
 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;
   }
+
+  ${({ height, ratio }) =>
+    svgSizing(BANNER_HEIGHT_MIN_PX, height.groupA, ratio)};
+
+  ${MEDIA_QUERY_TYPOGRAPHY.SMART_PHONE_AND_LARGER} {
+    ${({ height, ratio }) =>
+      svgSizing(BANNER_HEIGHT_MIN_PX, height.groupB, ratio)};
+  }
+
+  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
+    ${({ height, ratio }) =>
+      svgSizing(BANNER_HEIGHT_FULL_PX, height.groupD, ratio)};
+  }
 `;
 
-const Brand = ({ brandName, svg }) => (
+const Brand = ({ brandName, svgHeight, svg }) => (
   <StyledWrapper>
     <ConstraintWrapper>
       {svg && (
         <StyledLink href="https://www.bbc.co.uk/news">
           <StyledSpan>
             <BrandSvg
+              height={svgHeight}
               viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
               xmlns="http://www.w3.org/2000/svg"
               focusable="false"
@@ -98,6 +126,11 @@ const Brand = ({ brandName, svg }) => (
 
 Brand.propTypes = {
   brandName: string.isRequired,
+  svgHeight: shape({
+    groupA: number.isRequired,
+    groupB: number.isRequired,
+    groupD: number.isRequired,
+  }).isRequired,
   svg: shape({
     group: node.isRequired,
     ratio: number.isRequired,

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 notes from '../README.md';
@@ -16,7 +16,18 @@ storiesOf('Brand', module)
         .map(key => key.charAt(0).toUpperCase() + key.slice(1));
 
       const choice = select('Service SVG', options, 'news').toLowerCase();
-      return <Brand brandName="Default Brand Name" svg={svgs[choice]} />;
+      const heights = {
+        groupA: number('svg height min', 16),
+        groupB: number('svg height med', 20),
+        groupD: number('svg height max', 24),
+      };
+      return (
+        <Brand
+          brandName="Default Brand Name"
+          svg={svgs[choice]}
+          svgHeight={heights}
+        />
+      );
     },
     { notes },
   )

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

@@ -15,10 +15,16 @@ const svg = {
   ratio: 6.9979,
 };
 
+const height = {
+  groupA: 16,
+  groupB: 20,
+  groupD: 24,
+};
+
 describe('Brand', () => {
   shouldMatchSnapshot(
     'should render correctly',
-    <Brand brandName="Default Brand Name" svg={svg} />,
+    <Brand brandName="Default Brand Name" svgHeight={height} svg={svg} />,
   );
   shouldMatchSnapshot(
     'should render correctly with svg not provided',