Merge pull request #480 from bbc/brand-pass-svg-height

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) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9. Also reduce banner height and left-right padding under 600px. |
 | 1.0.2   | [PR#515](https://github.com/bbc/psammead/pull/515) Update story to use dirDecorator |
 | 1.0.1   | [PR#476](https://github.com/bbc/psammead/pull/476) Fail gracefully if brand svg is not provided |
 | 1.0.0   | [PR#457](https://github.com/bbc/psammead/pull/457) Enable passing of different svgs |

packages/components/psammead-brand/README.md

@@ -2,7 +2,17 @@
 
 ## Description
 
-The `Brand` component provides the BBC service logo (as SVG), nested inside a styled span, link and div. The link is currently hardcoded to "https://www.bbc.co.uk/news". `Brand` takes a `brandName` and an `svg` as props. `brandName` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand. Note that this does not currently affect the branding itself, which always renders as `BBC NEWS`. The `svg` prop must contain a `group`, `viewbox` values and a `ratio`, which is used within an `svg` element, rendered at a height of 24px. Examples of the `svg` object can be found in [@bbc/psammead-assets](https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-assets/README.md#service-svgs)
+The `Brand` component provides the BBC service logo (as SVG), nested inside a styled link and div. The link is currently hardcoded to "https://www.bbc.co.uk/news".
+
+`Brand` takes a `brandName`, `svgHeight`, `minWidth`, `maxWidth` and  `svg` as props. 
+
+The `brandName` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand. 
+
+The `svg` prop must contain a `group`, `viewbox` values and a `ratio`, which is used within an `svg` element. Examples of the `svg` object can be found in [@bbc/psammead-assets](https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-assets/README.md#service-svgs). 
+
+The `minWidth` and `maxWidth` values are required to allow the ability for the `svg` element to dynamically scale as the viewport becomes a very small size EG: feature phones. 
+
+The `svgHeight` value acts as a placeholder for the `svg` element meaning the overall banner height does not change with the dynamic scaling, also the `height` allows the contents of the `svg` element to remain vertically centred within the banner at all times.
 
 ## Installation
 
@@ -13,6 +23,9 @@ The `Brand` component provides the BBC service logo (as SVG), nested inside a st
 | Argument  | Type   | Required | Default | Example      |
 | --------- | ------ | -------- | ------- | ------------ |
 | brandName | String | yes      | N/A     | `'BBC News'` |
+| svgHeight | Number | yes | N/A | `24` |
+| minWidth | Number | yes | N/A | `240` |
+| maxWidth | Number | yes | N/A | `380` |
 | svg | Object | yes | N/A | { group: `(<g fillrule="evenodd"><path d="M84.32" /></g>)`, viewbox: { height: 24, width: 167.95 }, ratio: 6.9979 } |
 
 ## Usage
@@ -25,7 +38,13 @@ import { igbo } from '@bbc/psammead-assets/svgs';
 
 const Header = brandName => (
   <header role="banner">
-    <Brand brandName={brandName} svg={igbo} />
+    <Brand 
+      brandName={brandName} 
+      svgHeight={24}
+      maxWidth={280}
+      minWidth={180}
+      svg={igbo} 
+    />
   </header>
 );
 ```
@@ -44,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).

packages/components/psammead-brand/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "description": "Provides the BBC News logo (as SVG), nested a hardcoded link to https://www.bbc.co.uk/news",
   "repository": {
@@ -22,7 +22,7 @@
     "@bbc/psammead-visually-hidden-text": "^0.1.10"
   },
   "devDependencies": {
-    "@bbc/psammead-assets": "^0.1.8",
+    "@bbc/psammead-assets": "^0.1.9",
     "@bbc/psammead-storybook-helpers": "^2.1.1",
     "@bbc/psammead-test-helpers": "^0.3.3",
     "react": "^16.6.3",

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Brand should render correctly 1`] = `
-.c6 {
+.c4 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -14,138 +14,99 @@ exports[`Brand should render correctly 1`] = `
 
 .c0 {
   background-color: #B80000;
-  height: 5rem;
+  height: 3.5rem;
   width: 100%;
+  padding: 0 0.5rem;
 }
 
-.c1 {
-  max-width: 80rem;
-  margin: 0 auto;
-}
-
-.c3 {
-  padding-top: 0.5rem;
+.c2 {
   display: inline-block;
+  width: 100%;
+  max-width: 17.5rem;
+  min-width: 11.25rem;
 }
 
-.c4 {
-  display: block;
-  padding-bottom: 1.5rem;
+.c3 {
+  box-sizing: content-box;
+  fill: #FFFFFF;
+  padding-top: 1rem;
+  padding-bottom: 0.75rem;
+  width: 100%;
 }
 
-.c2:hover .c4,
-.c2:focus .c4 {
+.c1:hover .c3,
+.c1:focus .c3 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
 }
 
-.c5 {
-  display: block;
-  height: 1.5rem;
-  width: 10.50rem;
-  margin-top: 1.25rem;
-  fill: #fff;
-}
-
-@media (max-width:25rem) {
-  .c0 {
-    padding: 0 0.5rem;
-  }
-}
-
-@media (min-width:25rem) {
+@media (min-width:37.5rem) {
   .c0 {
+    height: 5rem;
     padding: 0 1rem;
   }
 }
 
-@media (min-width:62.9375rem) {
-  .c0 {
-    padding: 0 1rem;
+@media (min-width:37.5rem) {
+  .c3 {
+    padding-top: 1.75rem;
+    padding-bottom: 1.5rem;
   }
 }
 
 @media screen and (-ms-high-contrast:active),print {
-  .c5 {
+  .c3 {
     fill: windowText;
   }
 }
 
 <div
   className="c0"
 >
-  <div
-    className="c1"
+  <a
+    className="c1 c2"
+    href="https://www.bbc.co.uk/news"
   >
-    <a
-      className="c2 c3"
-      href="https://www.bbc.co.uk/news"
+    <svg
+      aria-hidden="true"
+      className="c3"
+      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="c4"
+    >
+      Default Brand Name
+    </span>
+  </a>
 </div>
 `;
 
 exports[`Brand should render correctly with svg not provided 1`] = `
 .c0 {
   background-color: #B80000;
-  height: 5rem;
   width: 100%;
+  padding: 0 0.5rem;
 }
 
-.c1 {
-  max-width: 80rem;
-  margin: 0 auto;
-}
-
-@media (max-width:25rem) {
-  .c0 {
-    padding: 0 0.5rem;
-  }
-}
-
-@media (min-width:25rem) {
-  .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media (min-width:62.9375rem) {
+@media (min-width:37.5rem) {
   .c0 {
     padding: 0 1rem;
   }
 }
 
 <div
   className="c0"
->
-  <div
-    className="c1"
-  />
-</div>
+/>
 `;