From 54645e5bad6a5925e904b55f5554bdd56832e8ab Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Mon, 29 Apr 2019 12:56:47 +0100
Subject: [PATCH 01/25] Control height of Brand SVG

---
 .../components/psammead-brand/CHANGELOG.md    |  1 +
 packages/components/psammead-brand/README.md  |  7 ++-
 .../psammead-brand/package-lock.json          |  2 +-
 .../components/psammead-brand/package.json    |  2 +-
 .../src/__snapshots__/index.test.jsx.snap     | 38 +++++++++++--
 .../components/psammead-brand/src/index.jsx   | 55 +++++++++++++++----
 .../psammead-brand/src/index.stories.jsx      | 15 ++++-
 .../psammead-brand/src/index.test.jsx         |  8 ++-
 8 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
index 12e9cae57c..197fd47633 100644
--- a/packages/components/psammead-brand/CHANGELOG.md
+++ b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.0.0   | [PR#???](https://github.com/bbc/psammead/pull/???) Control height of Brand SVG |
 | 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 |
 | 0.3.3   | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly |
diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 37f6bb03ad..54492db22f 100644
--- a/packages/components/psammead-brand/README.md
+++ b/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>
 );
 ```
diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json
index 13a3b3efa1..6e345eaeee 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.0",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json
index 44b5515702..ed4f1e8463 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.0",
+  "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": {
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 ab4b922ded..f3265cc7e7 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/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"
         >
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 3d0baf0390..185846bb14 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/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,23 +67,46 @@ 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>
       <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"
@@ -96,6 +124,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,
diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx
index b9751fb3ad..083540d7c1 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 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 },
   );
diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx
index d4eab87af5..d1adf86055 100644
--- a/packages/components/psammead-brand/src/index.test.jsx
+++ b/packages/components/psammead-brand/src/index.test.jsx
@@ -15,9 +15,15 @@ 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} />,
   );
 });

From 97fe851187abcab2d2ba443b0496d2c7cec20ed5 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Mon, 29 Apr 2019 13:14:41 +0100
Subject: [PATCH 02/25] pr 480

---
 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 197fd47633..e21153baf7 100644
--- a/packages/components/psammead-brand/CHANGELOG.md
+++ b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,7 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
-| 2.0.0   | [PR#???](https://github.com/bbc/psammead/pull/???) Control height of Brand SVG |
+| 2.0.0   | [PR#480](https://github.com/bbc/psammead/pull/480) Control height of Brand SVG |
 | 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 |
 | 0.3.3   | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly |

From 64ed955c61d58ecfdaea4d576ac9a0a0076ca31d Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Mon, 29 Apr 2019 16:08:03 +0100
Subject: [PATCH 03/25] Make svgHeight optional; reduce ver bump to minor

---
 packages/components/psammead-brand/README.md         |  2 +-
 packages/components/psammead-brand/package-lock.json |  2 +-
 packages/components/psammead-brand/package.json      |  2 +-
 packages/components/psammead-brand/src/index.jsx     | 10 +++++++++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 54492db22f..9abac92821 100644
--- a/packages/components/psammead-brand/README.md
+++ b/packages/components/psammead-brand/README.md
@@ -14,7 +14,7 @@ The `Brand` component renders the BBC service logo (as SVG), nested inside a sty
 | --------- | ------ | -------- | ------- | ------------ |
 | 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 }` |
+| svgHeight | Object | no | `{ groupA: 22, groupB: 22, groupD: 24 }` | `{ groupA: 16, groupB: 20, groupD: 24 }` |
 
 ## Usage
 
diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json
index 6e345eaeee..b94d1a8404 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": "2.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json
index ed4f1e8463..059b6ca862 100644
--- a/packages/components/psammead-brand/package.json
+++ b/packages/components/psammead-brand/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "2.0.0",
+  "version": "1.1.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": {
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 8fa5263b42..90cfad5e2f 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -124,13 +124,21 @@ const Brand = ({ brandName, svgHeight, svg }) => (
   </StyledWrapper>
 );
 
+Brand.defaultProps = {
+  svgHeight: {
+    groupA: 22,
+    groupB: 22,
+    groupD: 24,
+  },
+};
+
 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,

From d87063fffbebfd11a2c28900d85f8c173cc4da93 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Mon, 29 Apr 2019 16:10:37 +0100
Subject: [PATCH 04/25] rename svgHeight -> svgHeights

stops React rendering the heights object
---
 packages/components/psammead-brand/README.md  |  8 ++++----
 .../src/__snapshots__/index.test.jsx.snap     |  7 -------
 .../components/psammead-brand/src/index.jsx   | 20 +++++++++----------
 .../psammead-brand/src/index.stories.jsx      |  2 +-
 .../psammead-brand/src/index.test.jsx         |  4 ++--
 5 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 9abac92821..48f7535882 100644
--- a/packages/components/psammead-brand/README.md
+++ b/packages/components/psammead-brand/README.md
@@ -2,7 +2,7 @@
 
 ## Description
 
-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).
+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 `svgHeights` 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 `svgHeights` 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 `svgHeights` 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,7 +14,7 @@ The `Brand` component renders the BBC service logo (as SVG), nested inside a sty
 | --------- | ------ | -------- | ------- | ------------ |
 | 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 | no | `{ groupA: 22, groupB: 22, groupD: 24 }` | `{ groupA: 16, groupB: 20, groupD: 24 }` |
+| svgHeights | Object | no | `{ groupA: 22, groupB: 22, groupD: 24 }` | `{ groupA: 16, groupB: 20, groupD: 24 }` |
 
 ## Usage
 
@@ -24,11 +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 svgHeights = { groupA: 16, groupB: 20, groupD: 24 };
 
 const Header = brandName => (
   <header role="banner">
-    <Brand brandName={brandName} svg={igbo} svgHeight={svgHeight} />
+    <Brand brandName={brandName} svg={igbo} svgHeights={svgHeights} />
   </header>
 );
 ```
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 40a02e4253..3f28301e44 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -110,13 +110,6 @@ 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"
         >
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 90cfad5e2f..6463e8c37e 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -86,28 +86,28 @@ const BrandSvg = styled.svg`
     fill: windowText;
   }
 
-  ${({ height, ratio }) =>
-    svgSizing(BANNER_HEIGHT_MIN_PX, height.groupA, ratio)};
+  ${({ svgHeights, ratio }) =>
+    svgSizing(BANNER_HEIGHT_MIN_PX, svgHeights.groupA, ratio)};
 
   ${MEDIA_QUERY_TYPOGRAPHY.SMART_PHONE_AND_LARGER} {
-    ${({ height, ratio }) =>
-      svgSizing(BANNER_HEIGHT_MIN_PX, height.groupB, ratio)};
+    ${({ svgHeights, ratio }) =>
+      svgSizing(BANNER_HEIGHT_MIN_PX, svgHeights.groupB, ratio)};
   }
 
   ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
-    ${({ height, ratio }) =>
-      svgSizing(BANNER_HEIGHT_FULL_PX, height.groupD, ratio)};
+    ${({ svgHeights, ratio }) =>
+      svgSizing(BANNER_HEIGHT_FULL_PX, svgHeights.groupD, ratio)};
   }
 `;
 
-const Brand = ({ brandName, svgHeight, svg }) => (
+const Brand = ({ brandName, svgHeights, svg }) => (
   <StyledWrapper>
     <ConstraintWrapper>
       {svg && (
         <StyledLink href="https://www.bbc.co.uk/news">
           <StyledSpan>
             <BrandSvg
-              height={svgHeight}
+              svgHeights={svgHeights}
               viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
               xmlns="http://www.w3.org/2000/svg"
               focusable="false"
@@ -125,7 +125,7 @@ const Brand = ({ brandName, svgHeight, svg }) => (
 );
 
 Brand.defaultProps = {
-  svgHeight: {
+  svgHeights: {
     groupA: 22,
     groupB: 22,
     groupD: 24,
@@ -134,7 +134,7 @@ Brand.defaultProps = {
 
 Brand.propTypes = {
   brandName: string.isRequired,
-  svgHeight: shape({
+  svgHeights: shape({
     groupA: number.isRequired,
     groupB: number.isRequired,
     groupD: number.isRequired,
diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx
index b0e7695311..95fd7eecf7 100644
--- a/packages/components/psammead-brand/src/index.stories.jsx
+++ b/packages/components/psammead-brand/src/index.stories.jsx
@@ -25,7 +25,7 @@ storiesOf('Brand', module)
         <Brand
           brandName="Default Brand Name"
           svg={svgs[choice]}
-          svgHeight={heights}
+          svgHeights={heights}
         />
       );
     },
diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx
index dcf0957783..c667d4b591 100644
--- a/packages/components/psammead-brand/src/index.test.jsx
+++ b/packages/components/psammead-brand/src/index.test.jsx
@@ -15,7 +15,7 @@ const svg = {
   ratio: 6.9979,
 };
 
-const height = {
+const heights = {
   groupA: 16,
   groupB: 20,
   groupD: 24,
@@ -24,7 +24,7 @@ const height = {
 describe('Brand', () => {
   shouldMatchSnapshot(
     'should render correctly',
-    <Brand brandName="Default Brand Name" svgHeight={height} svg={svg} />,
+    <Brand brandName="Default Brand Name" svgHeights={heights} svg={svg} />,
   );
   shouldMatchSnapshot(
     'should render correctly with svg not provided',

From 899e6db05d4329647759db9074c8c44bc0f07623 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Mon, 29 Apr 2019 16:14:07 +0100
Subject: [PATCH 05/25] Improve README legibility

---
 packages/components/psammead-brand/README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 48f7535882..a39283b384 100644
--- a/packages/components/psammead-brand/README.md
+++ b/packages/components/psammead-brand/README.md
@@ -2,7 +2,13 @@
 
 ## Description
 
-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 `svgHeights` 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 `svgHeights` 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 `svgHeights` 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).
+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 `svgHeights` 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 `svgHeights` 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 `svgHeights` 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
 

From c87ebd7a304a908e13056f34a3b20a1d16c6e626 Mon Sep 17 00:00:00 2001
From: sadickisaac <48688870+sadickisaac@users.noreply.github.com>
Date: Tue, 30 Apr 2019 09:21:07 +0100
Subject: [PATCH 06/25] lower version bump in changelog too

Co-Authored-By: aacn500 <10963046+aacn500@users.noreply.github.com>
---
 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 dabec94930..aa8043c722 100644
--- a/packages/components/psammead-brand/CHANGELOG.md
+++ b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,7 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
-| 2.0.0   | [PR#480](https://github.com/bbc/psammead/pull/480) Control height of Brand SVG |
+| 1.1.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 |

From c7b8ec8fd8ed1fb4e23fe332d82d3b4e15206b08 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Wed, 1 May 2019 11:35:16 +0100
Subject: [PATCH 07/25] WIP trying phils new method

---
 .../components/psammead-brand/src/index.jsx   | 89 +++++++++----------
 .../psammead-brand/src/index.stories.jsx      | 16 +++-
 .../psammead-brand/src/index.test.jsx         |  2 +-
 3 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index a4111798f9..fd1d6de80f 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -1,85 +1,75 @@
 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,
 } 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 = '1.25rem'; // 20px
-const SVG_BOTTOM_OFFSET = '1.5rem'; // 24px
-const BANNER_HEIGHT = '5rem'; // 80px
+const BANNER_HEIGHT_MIN = '3.875rem'; // 62px
+const BANNER_HEIGHT_FULL = '5rem'; // 80px
 
-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};
   width: 100%;
-  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) {
+
+  height: ${BANNER_HEIGHT_MIN};
+  padding: 0 ${GEL_SPACING};
+
+  @media (min-width: /*${GEL_GROUP_3_SCREEN_WIDTH_MIN}*/ 0) { /* TODO uncomment me */
+    height: ${BANNER_HEIGHT_FULL};
     padding: 0 ${GEL_SPACING_DBL};
   }
 `;
 
 const ConstraintWrapper = styled.div`
-  max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN};
-  margin: 0 auto;
+  // Document this and add media query
+  min-height: 76px; /* = desired height - border-bottom (80-4), TODO media query to set to (56-4)px at 0-599px, rems */
+  padding-top: 40px; /* ${28 / 16}rem; */
+  padding-bottom: 0.75rem; /* TODO gel spacings */
 `;
 
 const StyledLink = styled.a`
-  padding-top: ${GEL_SPACING};
   display: inline-block;
+  border-bottom: ${GEL_SPACING_HLF} solid ${C_POSTBOX}; /* Add border to extend click area */
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    border-bottom: ${GEL_SPACING_HLF} solid ${C_WHITE};
+  }
 `;
 
 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};
-  }
+  // position: relative;
+  // top: 50%;
+  transform: translateY(-50%);
 `;
 
 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;
+  max-height: 1.5rem; /* 24px */
+  max-width: 100%;
+  min-width: ${({ minWidth }) => minWidth / 16}rem;
+
   @media screen and (-ms-high-contrast: active), print {
     fill: windowText;
   }
 `;
 
-const Brand = ({ brandName, svg }) => (
-  <StyledWrapper>
-    <ConstraintWrapper>
-      {svg && (
-        <StyledLink href="https://www.bbc.co.uk/news">
+const Brand = ({ brandName, minWidth, svg }) => (
+  <Banner>
+    {svg && (
+      <StyledLink href="https://www.bbc.co.uk/news">
+        <ConstraintWrapper>
           <StyledSpan>
             <BrandSvg
+              minWidth={minWidth} // TODO note that this should be the min of (224, svg.viewbox.width) in README, client code's responsibility to set this right
               viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
               xmlns="http://www.w3.org/2000/svg"
               focusable="false"
@@ -90,14 +80,15 @@ const Brand = ({ brandName, svg }) => (
             </BrandSvg>
             <VisuallyHiddenText>{brandName}</VisuallyHiddenText>
           </StyledSpan>
-        </StyledLink>
-      )}
-    </ConstraintWrapper>
-  </StyledWrapper>
+        </ConstraintWrapper>
+      </StyledLink>
+    )}
+  </Banner>
 );
 
 Brand.propTypes = {
   brandName: string.isRequired,
+  minWidth: 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 5d4c044714..dd5647847f 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 notes from '../README.md';
@@ -15,8 +15,18 @@ 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 <Brand brandName="Default Brand Name" svg={svgs[choice]} />;
+      const choice = select('Service SVG', options, 'News').toLowerCase();
+      const svg = svgs[choice];
+      const defaultMinWidth = number('default min width', 224);
+      const minWidth = Math.min(defaultMinWidth, svg.viewbox.width);
+
+      return (
+        <Brand
+          brandName="Default Brand Name"
+          minWidth={2 /* TODO uncomment this: minWidth*/}
+          svg={svgs[choice]}
+        />
+      );
     },
     { notes },
   )
diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx
index aa6653bfd1..91f6e47f0e 100644
--- a/packages/components/psammead-brand/src/index.test.jsx
+++ b/packages/components/psammead-brand/src/index.test.jsx
@@ -18,7 +18,7 @@ const svg = {
 describe('Brand', () => {
   shouldMatchSnapshot(
     'should render correctly',
-    <Brand brandName="Default Brand Name" svg={svg} />,
+    <Brand brandName="Default Brand Name" svg={svg} minWidth={224} />,
   );
   shouldMatchSnapshot(
     'should render correctly with svg not provided',

From 3027a87718ef6be125f146044e599909adb03832 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 3 May 2019 12:15:25 +0100
Subject: [PATCH 08/25] dynamically scale the SVG between min and max widths

---
 .../components/psammead-brand/src/index.jsx   | 78 ++++++++-----------
 .../psammead-brand/src/index.stories.jsx      | 13 +++-
 2 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index fd1d6de80f..e4f39b2489 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -3,34 +3,23 @@ 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_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
 import {
   GEL_SPACING_HLF,
-  GEL_SPACING,
+  // GEL_SPACING,
   GEL_SPACING_DBL,
+  GEL_SPACING_TRPL,
 } from '@bbc/gel-foundations/spacings';
 
-const BANNER_HEIGHT_MIN = '3.875rem'; // 62px
-const BANNER_HEIGHT_FULL = '5rem'; // 80px
+const BANNER_SVG_TOP_OFFSET = '1.75rem'; // 28px
+// const BANNER_HEIGHT_BELOW_600PX = '3.5rem'; // 56px
+const BANNER_HEIGHT_ABOVE_600PX = '5rem'; // 80px
 
 const Banner = styled.div`
   background-color: ${C_POSTBOX};
   width: 100%;
-
-  height: ${BANNER_HEIGHT_MIN};
-  padding: 0 ${GEL_SPACING};
-
-  @media (min-width: /*${GEL_GROUP_3_SCREEN_WIDTH_MIN}*/ 0) { /* TODO uncomment me */
-    height: ${BANNER_HEIGHT_FULL};
-    padding: 0 ${GEL_SPACING_DBL};
-  }
-`;
-
-const ConstraintWrapper = styled.div`
-  // Document this and add media query
-  min-height: 76px; /* = desired height - border-bottom (80-4), TODO media query to set to (56-4)px at 0-599px, rems */
-  padding-top: 40px; /* ${28 / 16}rem; */
-  padding-bottom: 0.75rem; /* TODO gel spacings */
+  height: ${BANNER_HEIGHT_ABOVE_600PX};
+  padding: 0 ${GEL_SPACING_DBL};
 `;
 
 const StyledLink = styled.a`
@@ -43,44 +32,39 @@ const StyledLink = styled.a`
   }
 `;
 
-const StyledSpan = styled.span`
-  display: block;
-  // position: relative;
-  // top: 50%;
-  transform: translateY(-50%);
-`;
-
 const BrandSvg = styled.svg`
-  display: block;
-  fill: #fff;
-  max-height: 1.5rem; /* 24px */
-  max-width: 100%;
+  box-sizing: content-box;
+  display: block; /* is this actually needed? */
+  fill: ${C_WHITE};
+  height: ${({ height }) => height / 16}rem;
+  max-width: ${({ maxWidth }) => maxWidth / 16}rem;
   min-width: ${({ minWidth }) => minWidth / 16}rem;
+  padding-top: ${BANNER_SVG_TOP_OFFSET};
+  padding-bottom: ${GEL_SPACING_TRPL};
+  width: 100%;
 
   @media screen and (-ms-high-contrast: active), print {
     fill: windowText;
   }
 `;
 
-const Brand = ({ brandName, minWidth, svg }) => (
+const Brand = ({ brandName, height, minWidth, maxWidth, svg }) => (
   <Banner>
     {svg && (
       <StyledLink href="https://www.bbc.co.uk/news">
-        <ConstraintWrapper>
-          <StyledSpan>
-            <BrandSvg
-              minWidth={minWidth} // TODO note that this should be the min of (224, svg.viewbox.width) in README, client code's responsibility to set this right
-              viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
-              xmlns="http://www.w3.org/2000/svg"
-              focusable="false"
-              aria-hidden="true"
-              ratio={svg.ratio}
-            >
-              {svg.group}
-            </BrandSvg>
-            <VisuallyHiddenText>{brandName}</VisuallyHiddenText>
-          </StyledSpan>
-        </ConstraintWrapper>
+        <BrandSvg
+          height={height}
+          maxWidth={maxWidth}
+          minWidth={minWidth}
+          viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
+          xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          aria-hidden="true"
+          ratio={svg.ratio}
+        >
+          {svg.group}
+        </BrandSvg>
+        <VisuallyHiddenText>{brandName}</VisuallyHiddenText>
       </StyledLink>
     )}
   </Banner>
@@ -89,6 +73,8 @@ const Brand = ({ brandName, minWidth, svg }) => (
 Brand.propTypes = {
   brandName: string.isRequired,
   minWidth: number.isRequired,
+  maxWidth: number.isRequired,
+  height: 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 dd5647847f..24b0171b14 100644
--- a/packages/components/psammead-brand/src/index.stories.jsx
+++ b/packages/components/psammead-brand/src/index.stories.jsx
@@ -16,14 +16,19 @@ storiesOf('Brand', module)
         .map(key => key.charAt(0).toUpperCase() + key.slice(1));
 
       const choice = select('Service SVG', options, 'News').toLowerCase();
-      const svg = svgs[choice];
-      const defaultMinWidth = number('default min width', 224);
-      const minWidth = Math.min(defaultMinWidth, svg.viewbox.width);
+      const svgRatio = svgs[choice].ratio;
+      const svgMaxHeight = 24;
+      const svgMinHeight = 16;
+      const minWidth = number('minimum svg width', svgRatio * svgMinHeight);
+      const maxWidth = number('maximum svg width', svgRatio * svgMaxHeight);
+      const height = number('desired height svg', svgMaxHeight);
 
       return (
         <Brand
           brandName="Default Brand Name"
-          minWidth={2 /* TODO uncomment this: minWidth*/}
+          height={height}
+          minWidth={minWidth}
+          maxWidth={maxWidth}
           svg={svgs[choice]}
         />
       );

From 477d55a153907b44a83ee4e3bcd33fce71dcd2ae Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 3 May 2019 12:16:19 +0100
Subject: [PATCH 09/25] bump v1.2.0, also bump psammead-assets in devDeps

---
 packages/components/psammead-brand/CHANGELOG.md      | 1 +
 packages/components/psammead-brand/package-lock.json | 6 +++---
 packages/components/psammead-brand/package.json      | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
index be6a54ab76..c60df686cb 100644
--- a/packages/components/psammead-brand/CHANGELOG.md
+++ b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 1.2.0   | [PR#xxx](https://github.com/bbc/psammead/pull/xxx) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9 |
 | 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 |
diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json
index e0bb624d99..a4fa21bd96 100644
--- a/packages/components/psammead-brand/package-lock.json
+++ b/packages/components/psammead-brand/package-lock.json
@@ -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-styles": {
diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json
index 63d428f4af..047acfddb1 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.1",
+  "version": "1.2.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-test-helpers": "^0.3.3",
     "react": "^16.6.3",
     "styled-components": "^4.1.3"

From 1f7a280612b6098ca325650b4989faf9b31f07ca Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 3 May 2019 12:35:54 +0100
Subject: [PATCH 10/25] add maxWidth minHeight and height props to snapshot
 test

---
 .../src/__snapshots__/index.test.jsx.snap     | 136 ++++++------------
 .../psammead-brand/src/index.test.jsx         |   8 +-
 2 files changed, 47 insertions(+), 97 deletions(-)

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..8b5dda9454 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 {
+.c3 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -14,60 +14,37 @@ exports[`Brand should render correctly 1`] = `
 
 .c0 {
   background-color: #B80000;
-  height: 5rem;
   width: 100%;
+  height: 5rem;
+  padding: 0 1rem;
 }
 
 .c1 {
-  max-width: 80rem;
-  margin: 0 auto;
-}
-
-.c3 {
-  padding-top: 0.5rem;
   display: inline-block;
+  border-bottom: 0.25rem solid #B80000;
 }
 
-.c4 {
-  display: block;
-  padding-bottom: 1.5rem;
-}
-
-.c2:hover .c4,
-.c2:focus .c4 {
+.c1:hover,
+.c1:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
 }
 
-.c5 {
+.c2 {
+  box-sizing: content-box;
   display: block;
+  fill: #FFFFFF;
   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) {
-  .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media (min-width:62.9375rem) {
-  .c0 {
-    padding: 0 1rem;
-  }
+  max-width: 17.5rem;
+  min-width: 11.25rem;
+  padding-top: 1.75rem;
+  padding-bottom: 1.5rem;
+  width: 100%;
 }
 
 @media screen and (-ms-high-contrast:active),print {
-  .c5 {
+  .c2 {
     fill: windowText;
   }
 }
@@ -75,77 +52,44 @@ exports[`Brand should render correctly 1`] = `
 <div
   className="c0"
 >
-  <div
+  <a
     className="c1"
+    href="https://www.bbc.co.uk/news"
   >
-    <a
-      className="c2 c3"
-      href="https://www.bbc.co.uk/news"
+    <svg
+      aria-hidden="true"
+      className="c2"
+      focusable="false"
+      height={24}
+      viewBox="0 0 167.95 24"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <span
-        className="c4"
+      <g
+        fillrule="evenodd"
       >
-        <svg
-          aria-hidden="true"
-          className="c5"
-          focusable="false"
-          viewBox="0 0 167.95 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            fillrule="evenodd"
-          >
-            <path
-              d="M84.32"
-            />
-          </g>
-        </svg>
-        <span
-          className="c6"
-        >
-          Default Brand Name
-        </span>
-      </span>
-    </a>
-  </div>
+        <path
+          d="M84.32"
+        />
+      </g>
+    </svg>
+    <span
+      className="c3"
+    >
+      Default Brand Name
+    </span>
+  </a>
 </div>
 `;
 
 exports[`Brand should render correctly with svg not provided 1`] = `
 .c0 {
   background-color: #B80000;
-  height: 5rem;
   width: 100%;
-}
-
-.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) {
-  .c0 {
-    padding: 0 1rem;
-  }
+  height: 5rem;
+  padding: 0 1rem;
 }
 
 <div
   className="c0"
->
-  <div
-    className="c1"
-  />
-</div>
+/>
 `;
diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx
index 91f6e47f0e..89ad8599ae 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',
-    <Brand brandName="Default Brand Name" svg={svg} minWidth={224} />,
+    <Brand
+      brandName="Default Brand Name"
+      height={24}
+      maxWidth={280}
+      minWidth={180}
+      svg={svg}
+    />,
   );
   shouldMatchSnapshot(
     'should render correctly with svg not provided',

From 84252f53f81bb87e4c406309a1c91cfd839b5fcb Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 3 May 2019 15:58:17 +0100
Subject: [PATCH 11/25] reduce banner height and left-right padding under 600px

---
 .../components/psammead-brand/CHANGELOG.md    |  2 +-
 .../src/__snapshots__/index.test.jsx.snap     | 33 +++++++++++++++----
 .../components/psammead-brand/src/index.jsx   | 27 ++++++++++-----
 3 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
index c60df686cb..97654fc2e4 100644
--- a/packages/components/psammead-brand/CHANGELOG.md
+++ b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,7 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
-| 1.2.0   | [PR#xxx](https://github.com/bbc/psammead/pull/xxx) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9 |
+| 1.2.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.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 |
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 8b5dda9454..4b4a6984bc 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -15,8 +15,8 @@ exports[`Brand should render correctly 1`] = `
 .c0 {
   background-color: #B80000;
   width: 100%;
-  height: 5rem;
-  padding: 0 1rem;
+  height: 3.5rem;
+  padding: 0 0.5rem;
 }
 
 .c1 {
@@ -38,11 +38,25 @@ exports[`Brand should render correctly 1`] = `
   height: 1.5rem;
   max-width: 17.5rem;
   min-width: 11.25rem;
-  padding-top: 1.75rem;
-  padding-bottom: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 0.75rem;
   width: 100%;
 }
 
+@media (min-width:37.5rem) {
+  .c0 {
+    height: 5rem;
+    padding: 0 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c2 {
+    padding-top: 1.75rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
 @media screen and (-ms-high-contrast:active),print {
   .c2 {
     fill: windowText;
@@ -85,8 +99,15 @@ exports[`Brand should render correctly with svg not provided 1`] = `
 .c0 {
   background-color: #B80000;
   width: 100%;
-  height: 5rem;
-  padding: 0 1rem;
+  height: 3.5rem;
+  padding: 0 0.5rem;
+}
+
+@media (min-width:37.5rem) {
+  .c0 {
+    height: 5rem;
+    padding: 0 1rem;
+  }
 }
 
 <div
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index e4f39b2489..67adf767f7 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -3,23 +3,29 @@ 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_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
 import {
   GEL_SPACING_HLF,
-  // GEL_SPACING,
+  GEL_SPACING,
   GEL_SPACING_DBL,
   GEL_SPACING_TRPL,
 } from '@bbc/gel-foundations/spacings';
 
-const BANNER_SVG_TOP_OFFSET = '1.75rem'; // 28px
-// const BANNER_HEIGHT_BELOW_600PX = '3.5rem'; // 56px
+const SVG_TOP_OFFSET_ABOVE_600PX = '1.75rem'; // 28px
+const SVG_BOTTOM_OFFSET_BELOW_600PX = '0.75rem'; // 12px
+const BANNER_HEIGHT_BELOW_600PX = '3.5rem'; // 56px
 const BANNER_HEIGHT_ABOVE_600PX = '5rem'; // 80px
 
 const Banner = styled.div`
   background-color: ${C_POSTBOX};
   width: 100%;
-  height: ${BANNER_HEIGHT_ABOVE_600PX};
-  padding: 0 ${GEL_SPACING_DBL};
+  height: ${BANNER_HEIGHT_BELOW_600PX};
+  padding: 0 ${GEL_SPACING};
+
+  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+    height: ${BANNER_HEIGHT_ABOVE_600PX};
+    padding: 0 ${GEL_SPACING_DBL};
+  }
 `;
 
 const StyledLink = styled.a`
@@ -39,10 +45,15 @@ const BrandSvg = styled.svg`
   height: ${({ height }) => height / 16}rem;
   max-width: ${({ maxWidth }) => maxWidth / 16}rem;
   min-width: ${({ minWidth }) => minWidth / 16}rem;
-  padding-top: ${BANNER_SVG_TOP_OFFSET};
-  padding-bottom: ${GEL_SPACING_TRPL};
+  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};
+  }
+
   @media screen and (-ms-high-contrast: active), print {
     fill: windowText;
   }

From 7c96413bf290de0ce2910c1306c008d693599f94 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 3 May 2019 16:11:13 +0100
Subject: [PATCH 12/25] explain the magically CSS powering this

---
 packages/components/psammead-brand/README.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 37f6bb03ad..1b93640353 100644
--- a/packages/components/psammead-brand/README.md
+++ b/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 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`, `height`, `minWidth`, `maxWidth` and  `svg` as props. `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 a very small size EG: feature phones. The `height` 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 +13,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'` |
+| height | Number | yes | N/A | `24` |
+| 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 } |
 
 ## Usage
@@ -25,7 +28,13 @@ import { igbo } from '@bbc/psammead-assets/svgs';
 
 const Header = brandName => (
   <header role="banner">
-    <Brand brandName={brandName} svg={igbo} />
+    <Brand 
+      brandName={brandName} 
+      height={24}
+      maxWidth={280}
+      minWidth={180}
+      svg={igbo} 
+    />
   </header>
 );
 ```

From f8fad17efa30c4f6b02ee63d04b0300d587e3307 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 3 May 2019 17:52:27 +0100
Subject: [PATCH 13/25] major version change

---
 packages/components/psammead-brand/CHANGELOG.md      | 2 +-
 packages/components/psammead-brand/package-lock.json | 2 +-
 packages/components/psammead-brand/package.json      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
index 97654fc2e4..0cada2f1f4 100644
--- a/packages/components/psammead-brand/CHANGELOG.md
+++ b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,7 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
-| 1.2.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. |
+| 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.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 |
diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json
index 190a82d3f8..b07d7d806c 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.1.0",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json
index 047acfddb1..750081c345 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.2.0",
+  "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": {

From 487b5ce93b0a67ffb43fba57b35c1771e3c1d389 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Tue, 7 May 2019 10:00:43 +0100
Subject: [PATCH 14/25] remove unneeded story

---
 packages/components/psammead-brand/src/index.stories.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx
index 24b0171b14..48d02f5e20 100644
--- a/packages/components/psammead-brand/src/index.stories.jsx
+++ b/packages/components/psammead-brand/src/index.stories.jsx
@@ -34,7 +34,4 @@ storiesOf('Brand', module)
       );
     },
     { notes },
-  )
-  .add('without brand svg', () => <Brand brandName="Default Brand Name" />, {
-    notes,
-  });
+  );

From 3da272de862561afbc8ab5f62f2f84738a576047 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Tue, 7 May 2019 13:19:14 +0100
Subject: [PATCH 15/25] change story input const names

---
 .../psammead-brand/src/index.stories.jsx      | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx
index 48d02f5e20..fc02faa7a7 100644
--- a/packages/components/psammead-brand/src/index.stories.jsx
+++ b/packages/components/psammead-brand/src/index.stories.jsx
@@ -15,21 +15,27 @@ 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();
-      const svgRatio = svgs[choice].ratio;
+      const svgChoice = select('Service SVG', options, 'News').toLowerCase();
+      const svgRatio = svgs[svgChoice].ratio;
       const svgMaxHeight = 24;
       const svgMinHeight = 16;
-      const minWidth = number('minimum svg width', svgRatio * svgMinHeight);
-      const maxWidth = number('maximum svg width', svgRatio * svgMaxHeight);
-      const height = number('desired height svg', svgMaxHeight);
+      const minWidthInput = number(
+        'minimum svg width',
+        svgRatio * svgMinHeight,
+      );
+      const maxWidthInput = number(
+        'maximum svg width',
+        svgRatio * svgMaxHeight,
+      );
+      const heightInput = number('desired height svg', svgMaxHeight);
 
       return (
         <Brand
           brandName="Default Brand Name"
-          height={height}
-          minWidth={minWidth}
-          maxWidth={maxWidth}
-          svg={svgs[choice]}
+          height={heightInput}
+          minWidth={minWidthInput}
+          maxWidth={maxWidthInput}
+          svg={svgs[svgChoice]}
         />
       );
     },

From 176f2c7cbd198fe300a85510cd2309053f10375b Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Tue, 7 May 2019 13:23:05 +0100
Subject: [PATCH 16/25] set the banner height based on the height prop

---
 .../src/__snapshots__/index.test.jsx.snap     | 40 +++++++++----------
 .../components/psammead-brand/src/index.jsx   | 29 ++++++++------
 2 files changed, 35 insertions(+), 34 deletions(-)

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 4b4a6984bc..badf008cfe 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`] = `
-.c3 {
+.c4 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -14,28 +14,18 @@ exports[`Brand should render correctly 1`] = `
 
 .c0 {
   background-color: #B80000;
-  width: 100%;
   height: 3.5rem;
+  width: 100%;
   padding: 0 0.5rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
-  border-bottom: 0.25rem solid #B80000;
-}
-
-.c1:hover,
-.c1:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border-bottom: 0.25rem solid #FFFFFF;
 }
 
-.c2 {
+.c3 {
   box-sizing: content-box;
-  display: block;
   fill: #FFFFFF;
-  height: 1.5rem;
   max-width: 17.5rem;
   min-width: 11.25rem;
   padding-top: 1rem;
@@ -43,6 +33,13 @@ exports[`Brand should render correctly 1`] = `
   width: 100%;
 }
 
+.c1:hover .c3,
+.c1:focus .c3 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
 @media (min-width:37.5rem) {
   .c0 {
     height: 5rem;
@@ -51,28 +48,29 @@ exports[`Brand should render correctly 1`] = `
 }
 
 @media (min-width:37.5rem) {
-  .c2 {
+  .c3 {
     padding-top: 1.75rem;
     padding-bottom: 1.5rem;
   }
 }
 
 @media screen and (-ms-high-contrast:active),print {
-  .c2 {
+  .c3 {
     fill: windowText;
   }
 }
 
 <div
   className="c0"
+  height={24}
 >
   <a
-    className="c1"
+    className="c1 c2"
     href="https://www.bbc.co.uk/news"
   >
     <svg
       aria-hidden="true"
-      className="c2"
+      className="c3"
       focusable="false"
       height={24}
       viewBox="0 0 167.95 24"
@@ -87,7 +85,7 @@ exports[`Brand should render correctly 1`] = `
       </g>
     </svg>
     <span
-      className="c3"
+      className="c4"
     >
       Default Brand Name
     </span>
@@ -98,14 +96,14 @@ exports[`Brand should render correctly 1`] = `
 exports[`Brand should render correctly with svg not provided 1`] = `
 .c0 {
   background-color: #B80000;
+  height: NaNrem;
   width: 100%;
-  height: 3.5rem;
   padding: 0 0.5rem;
 }
 
 @media (min-width:37.5rem) {
   .c0 {
-    height: 5rem;
+    height: NaNrem;
     padding: 0 1rem;
   }
 }
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 67adf767f7..86c6834cec 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -13,36 +13,30 @@ import {
 
 const SVG_TOP_OFFSET_ABOVE_600PX = '1.75rem'; // 28px
 const SVG_BOTTOM_OFFSET_BELOW_600PX = '0.75rem'; // 12px
-const BANNER_HEIGHT_BELOW_600PX = '3.5rem'; // 56px
-const BANNER_HEIGHT_ABOVE_600PX = '5rem'; // 80px
+const PADDING_AROUND_SVG_ABOVE_600PX = 56;
+const PADDING_AROUND_SVG_BELOW_600PX = 32;
 
 const Banner = styled.div`
   background-color: ${C_POSTBOX};
+  height: ${props =>
+    `${(props.height + PADDING_AROUND_SVG_BELOW_600PX) / 16}rem`};
   width: 100%;
-  height: ${BANNER_HEIGHT_BELOW_600PX};
   padding: 0 ${GEL_SPACING};
 
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
-    height: ${BANNER_HEIGHT_ABOVE_600PX};
+    height: ${props =>
+      `${(props.height + PADDING_AROUND_SVG_ABOVE_600PX) / 16}rem`};
     padding: 0 ${GEL_SPACING_DBL};
   }
 `;
 
 const StyledLink = styled.a`
   display: inline-block;
-  border-bottom: ${GEL_SPACING_HLF} solid ${C_POSTBOX}; /* Add border to extend click area */
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    border-bottom: ${GEL_SPACING_HLF} solid ${C_WHITE};
-  }
 `;
 
 const BrandSvg = styled.svg`
   box-sizing: content-box;
-  display: block; /* is this actually needed? */
   fill: ${C_WHITE};
-  height: ${({ height }) => height / 16}rem;
   max-width: ${({ maxWidth }) => maxWidth / 16}rem;
   min-width: ${({ minWidth }) => minWidth / 16}rem;
   padding-top: ${GEL_SPACING_DBL};
@@ -57,10 +51,19 @@ const BrandSvg = styled.svg`
   @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, height, minWidth, maxWidth, svg }) => (
-  <Banner>
+  <Banner height={height}>
     {svg && (
       <StyledLink href="https://www.bbc.co.uk/news">
         <BrandSvg

From 179cca1cfe8701e56556f4e6cdefb76c992d0e89 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Tue, 7 May 2019 13:27:30 +0100
Subject: [PATCH 17/25] rename height input to svgHeight

---
 .../src/__snapshots__/index.test.jsx.snap            |  2 --
 packages/components/psammead-brand/src/index.jsx     | 12 ++++++------
 .../components/psammead-brand/src/index.stories.jsx  |  4 ++--
 .../components/psammead-brand/src/index.test.jsx     |  2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

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 badf008cfe..e906d06f63 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -62,7 +62,6 @@ exports[`Brand should render correctly 1`] = `
 
 <div
   className="c0"
-  height={24}
 >
   <a
     className="c1 c2"
@@ -72,7 +71,6 @@ exports[`Brand should render correctly 1`] = `
       aria-hidden="true"
       className="c3"
       focusable="false"
-      height={24}
       viewBox="0 0 167.95 24"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 86c6834cec..2a96c9f2a4 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -19,13 +19,13 @@ const PADDING_AROUND_SVG_BELOW_600PX = 32;
 const Banner = styled.div`
   background-color: ${C_POSTBOX};
   height: ${props =>
-    `${(props.height + PADDING_AROUND_SVG_BELOW_600PX) / 16}rem`};
+    `${(props.svgHeight + PADDING_AROUND_SVG_BELOW_600PX) / 16}rem`};
   width: 100%;
   padding: 0 ${GEL_SPACING};
 
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
     height: ${props =>
-      `${(props.height + PADDING_AROUND_SVG_ABOVE_600PX) / 16}rem`};
+      `${(props.svgHeight + PADDING_AROUND_SVG_ABOVE_600PX) / 16}rem`};
     padding: 0 ${GEL_SPACING_DBL};
   }
 `;
@@ -62,12 +62,12 @@ const BrandSvg = styled.svg`
   /* stylelint-enable */
 `;
 
-const Brand = ({ brandName, height, minWidth, maxWidth, svg }) => (
-  <Banner height={height}>
+const Brand = ({ brandName, svgHeight, minWidth, maxWidth, svg }) => (
+  <Banner svgHeight={svgHeight}>
     {svg && (
       <StyledLink href="https://www.bbc.co.uk/news">
         <BrandSvg
-          height={height}
+          height={svgHeight}
           maxWidth={maxWidth}
           minWidth={minWidth}
           viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
@@ -88,7 +88,7 @@ Brand.propTypes = {
   brandName: string.isRequired,
   minWidth: number.isRequired,
   maxWidth: number.isRequired,
-  height: 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 fc02faa7a7..a7edb87b51 100644
--- a/packages/components/psammead-brand/src/index.stories.jsx
+++ b/packages/components/psammead-brand/src/index.stories.jsx
@@ -27,12 +27,12 @@ storiesOf('Brand', module)
         'maximum svg width',
         svgRatio * svgMaxHeight,
       );
-      const heightInput = number('desired height svg', svgMaxHeight);
+      const svgHeightInput = number('desired height svg', svgMaxHeight);
 
       return (
         <Brand
           brandName="Default Brand Name"
-          height={heightInput}
+          svgHeight={svgHeightInput}
           minWidth={minWidthInput}
           maxWidth={maxWidthInput}
           svg={svgs[svgChoice]}
diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx
index 89ad8599ae..0cf724501a 100644
--- a/packages/components/psammead-brand/src/index.test.jsx
+++ b/packages/components/psammead-brand/src/index.test.jsx
@@ -20,7 +20,7 @@ describe('Brand', () => {
     'should render correctly',
     <Brand
       brandName="Default Brand Name"
-      height={24}
+      svgHeight={24}
       maxWidth={280}
       minWidth={180}
       svg={svg}

From 4ef04fd2b618f58f7aec0afb3d9be7ba0213c6fc Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Tue, 7 May 2019 13:31:25 +0100
Subject: [PATCH 18/25] snapshotssss

---
 .../psammead-brand/src/__snapshots__/index.test.jsx.snap         | 1 +
 1 file changed, 1 insertion(+)

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 e906d06f63..8a326aa49c 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -71,6 +71,7 @@ exports[`Brand should render correctly 1`] = `
       aria-hidden="true"
       className="c3"
       focusable="false"
+      height={24}
       viewBox="0 0 167.95 24"
       xmlns="http://www.w3.org/2000/svg"
     >

From 99cebf8a158e907f67ce7a4b864a346dd2b78539 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Tue, 7 May 2019 14:05:43 +0100
Subject: [PATCH 19/25] add line breaks and change height to svgHeight

---
 packages/components/psammead-brand/README.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 1b93640353..8a090b1808 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`, `height`, `minWidth`, `maxWidth` and  `svg` as props. `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 a very small size EG: feature phones. The `height` 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 `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 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,7 +23,7 @@ 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'` |
-| height | Number | yes | N/A | `24` |
+| svgHeight | Number | yes | N/A | `24` |
 | 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 } |
@@ -30,7 +40,7 @@ const Header = brandName => (
   <header role="banner">
     <Brand 
       brandName={brandName} 
-      height={24}
+      svgHeight={24}
       maxWidth={280}
       minWidth={180}
       svg={igbo} 

From b1bef6cc4d4ff200717f04f34d5a9f715566e054 Mon Sep 17 00:00:00 2001
From: Rhys Hellyar <rhys.hellyar@gmail.com>
Date: Wed, 8 May 2019 10:54:25 +0100
Subject: [PATCH 20/25] Update packages/components/psammead-brand/README.md

Co-Authored-By: pjlee11 <phil.lee.ext@bbc.co.uk>
---
 packages/components/psammead-brand/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 8a090b1808..4cb205bb0d 100644
--- a/packages/components/psammead-brand/README.md
+++ b/packages/components/psammead-brand/README.md
@@ -10,7 +10,7 @@ The `brandName` is passed to a [VisuallyHiddenText](https://github.com/bbc/psamm
 
 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 a very small size EG: feature phones. 
+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.
 

From e1d7c1e6638ed77606dcef2f0c292f4549318635 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Wed, 8 May 2019 12:07:28 +0100
Subject: [PATCH 21/25] don't add CSS if svgHeight isn't provided

---
 .../src/__snapshots__/index.test.jsx.snap           |  2 --
 packages/components/psammead-brand/src/index.jsx    | 13 +++++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

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 8a326aa49c..cc75083d1e 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -95,14 +95,12 @@ exports[`Brand should render correctly 1`] = `
 exports[`Brand should render correctly with svg not provided 1`] = `
 .c0 {
   background-color: #B80000;
-  height: NaNrem;
   width: 100%;
   padding: 0 0.5rem;
 }
 
 @media (min-width:37.5rem) {
   .c0 {
-    height: NaNrem;
     padding: 0 1rem;
   }
 }
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 2a96c9f2a4..4ea9888905 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -18,14 +18,19 @@ const PADDING_AROUND_SVG_BELOW_600PX = 32;
 
 const Banner = styled.div`
   background-color: ${C_POSTBOX};
-  height: ${props =>
-    `${(props.svgHeight + PADDING_AROUND_SVG_BELOW_600PX) / 16}rem`};
+  ${props =>
+    props.svgHeight
+      ? `height: ${(props.svgHeight + PADDING_AROUND_SVG_BELOW_600PX) / 16}rem`
+      : ''};
   width: 100%;
   padding: 0 ${GEL_SPACING};
 
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
-    height: ${props =>
-      `${(props.svgHeight + PADDING_AROUND_SVG_ABOVE_600PX) / 16}rem`};
+    ${props =>
+      props.svgHeight
+        ? `height: ${(props.svgHeight + PADDING_AROUND_SVG_ABOVE_600PX) /
+            16}rem`
+        : ''};
     padding: 0 ${GEL_SPACING_DBL};
   }
 `;

From b0817924f22f61b52d714fef9159bde6cf3e758e Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Wed, 8 May 2019 13:43:17 +0100
Subject: [PATCH 22/25] explicitly set width: 100% on the <a> for firefox
 support

---
 .../psammead-brand/src/__snapshots__/index.test.jsx.snap         | 1 +
 packages/components/psammead-brand/src/index.jsx                 | 1 +
 2 files changed, 2 insertions(+)

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 cc75083d1e..30dbdd0a5b 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -21,6 +21,7 @@ exports[`Brand should render correctly 1`] = `
 
 .c2 {
   display: inline-block;
+  width: 100%;
 }
 
 .c3 {
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 4ea9888905..4d85e633df 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -37,6 +37,7 @@ const Banner = styled.div`
 
 const StyledLink = styled.a`
   display: inline-block;
+  width: 100%;
 `;
 
 const BrandSvg = styled.svg`

From 561fafde5b18806f3c317a10c03aa864627b2125 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Thu, 9 May 2019 11:17:24 +0100
Subject: [PATCH 23/25] tidy code with ternary in function

---
 packages/components/psammead-brand/src/index.jsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index 4d85e633df..ac12d7a9bc 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -16,21 +16,19 @@ const SVG_BOTTOM_OFFSET_BELOW_600PX = '0.75rem'; // 12px
 const PADDING_AROUND_SVG_ABOVE_600PX = 56;
 const PADDING_AROUND_SVG_BELOW_600PX = 32;
 
+const conditionallyRenderHeight = (svgHeight, padding) =>
+  svgHeight ? `height: ${(svgHeight + padding) / 16}rem` : '';
+
 const Banner = styled.div`
   background-color: ${C_POSTBOX};
-  ${props =>
-    props.svgHeight
-      ? `height: ${(props.svgHeight + PADDING_AROUND_SVG_BELOW_600PX) / 16}rem`
-      : ''};
+  ${({ svgHeight }) =>
+    conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_BELOW_600PX)};
   width: 100%;
   padding: 0 ${GEL_SPACING};
 
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
-    ${props =>
-      props.svgHeight
-        ? `height: ${(props.svgHeight + PADDING_AROUND_SVG_ABOVE_600PX) /
-            16}rem`
-        : ''};
+    ${({ svgHeight }) =>
+      conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_ABOVE_600PX)};
     padding: 0 ${GEL_SPACING_DBL};
   }
 `;

From e8f54e8a1325c2c548b33a349d913a456d3a8bd6 Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 17 May 2019 14:05:00 +0100
Subject: [PATCH 24/25] move min/max width to <a> for click area fix + readme
 FF CSS explainer

---
 packages/components/psammead-brand/README.md          |  3 +++
 .../src/__snapshots__/index.test.jsx.snap             |  5 +++--
 packages/components/psammead-brand/src/index.jsx      | 11 +++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md
index 4cb205bb0d..d450968bea 100644
--- a/packages/components/psammead-brand/README.md
+++ b/packages/components/psammead-brand/README.md
@@ -63,6 +63,9 @@ The `Brand` component is designed to be used where a BBC logo is required as SVG
 
 <!-- ## Roadmap -->
 
+### Additional notes
+- `width: 100%` is needed on both `<a>` and the `<svg>` 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/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
index 30dbdd0a5b..e03713a8f9 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -22,13 +22,14 @@ exports[`Brand should render correctly 1`] = `
 .c2 {
   display: inline-block;
   width: 100%;
+  max-width: 17.5rem;
+  min-width: 11.25rem;
 }
 
 .c3 {
   box-sizing: content-box;
   fill: #FFFFFF;
-  max-width: 17.5rem;
-  min-width: 11.25rem;
+  max-width: NaNrem;
   padding-top: 1rem;
   padding-bottom: 0.75rem;
   width: 100%;
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index ac12d7a9bc..c07b026416 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -36,13 +36,14 @@ const Banner = styled.div`
 const StyledLink = styled.a`
   display: inline-block;
   width: 100%;
+  max-width: ${({ maxWidth }) => maxWidth / 16}rem;
+  min-width: ${({ minWidth }) => minWidth / 16}rem;
 `;
 
 const BrandSvg = styled.svg`
   box-sizing: content-box;
   fill: ${C_WHITE};
   max-width: ${({ maxWidth }) => maxWidth / 16}rem;
-  min-width: ${({ minWidth }) => minWidth / 16}rem;
   padding-top: ${GEL_SPACING_DBL};
   padding-bottom: ${SVG_BOTTOM_OFFSET_BELOW_600PX};
   width: 100%;
@@ -69,11 +70,13 @@ const BrandSvg = styled.svg`
 const Brand = ({ brandName, svgHeight, minWidth, maxWidth, svg }) => (
   <Banner svgHeight={svgHeight}>
     {svg && (
-      <StyledLink href="https://www.bbc.co.uk/news">
+      <StyledLink
+        href="https://www.bbc.co.uk/news"
+        maxWidth={maxWidth}
+        minWidth={minWidth}
+      >
         <BrandSvg
           height={svgHeight}
-          maxWidth={maxWidth}
-          minWidth={minWidth}
           viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
           xmlns="http://www.w3.org/2000/svg"
           focusable="false"

From c6b706c059425d5a0628d00e752b48ee9218058d Mon Sep 17 00:00:00 2001
From: Phil Lee <phil.lee.ext@bbc.co.uk>
Date: Fri, 17 May 2019 14:19:42 +0100
Subject: [PATCH 25/25] remove extraneous max-width style

---
 .../psammead-brand/src/__snapshots__/index.test.jsx.snap         | 1 -
 packages/components/psammead-brand/src/index.jsx                 | 1 -
 2 files changed, 2 deletions(-)

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 e03713a8f9..0f6519f766 100644
--- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -29,7 +29,6 @@ exports[`Brand should render correctly 1`] = `
 .c3 {
   box-sizing: content-box;
   fill: #FFFFFF;
-  max-width: NaNrem;
   padding-top: 1rem;
   padding-bottom: 0.75rem;
   width: 100%;
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
index c07b026416..def6a32b8b 100644
--- a/packages/components/psammead-brand/src/index.jsx
+++ b/packages/components/psammead-brand/src/index.jsx
@@ -43,7 +43,6 @@ const StyledLink = styled.a`
 const BrandSvg = styled.svg`
   box-sizing: content-box;
   fill: ${C_WHITE};
-  max-width: ${({ maxWidth }) => maxWidth / 16}rem;
   padding-top: ${GEL_SPACING_DBL};
   padding-bottom: ${SVG_BOTTOM_OFFSET_BELOW_600PX};
   width: 100%;