BBC-archive · PriyaKR · Nov 12, 2019 · Nov 5, 2019 · Nov 5, 2019 · Nov 5, 2019
diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 5.1.0-alpha.5 | [PR#2569](https://github.com/bbc/psammead/pull/2569) Reduce height of Brand Component for all breakpoints |
 | 5.1.0-alpha.4 | [PR#2564](https://github.com/bbc/psammead/pull/2564) Add skip to content link |
 | 5.1.0-alpha.3 | [PR#2539](https://github.com/bbc/psammead/pull/2539) Fix overlapping between `ScriptLink` and `Brand` |
 | 5.1.0-alpha.2 | [PR#2519](https://github.com/bbc/psammead/pull/2519) Talos - Bump Dependencies - @bbc/psammead-styles |

diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json
diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "5.1.0-alpha.4",
+  "version": "5.1.0-alpha.5",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -36,7 +36,7 @@ exports[`Brand should render correctly with link not provided 1`] = `
 
 .c0 {
   background-color: #B80000;
-  min-height: 3.5rem;
+  min-height: 2.5rem;
   width: 100%;
   padding: 0 0.5rem;
 }
@@ -45,8 +45,8 @@ exports[`Brand should render correctly with link not provided 1`] = `
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
-  padding-top: 1rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.375rem;
   height: 1.5rem;
   width: 100%;
   max-width: 17.5rem;
@@ -69,21 +69,22 @@ exports[`Brand should render correctly with link not provided 1`] = `
 
 @media (min-width:25rem) {
   .c0 {
-    min-height: 5rem;
+    min-height: 3.25rem;
     padding: 0 1rem;
   }
 }
 
-@media (max-width:14.9375rem) {
-  .c0 {
-    min-height: 6.5rem;
+@media (min-width:25rem) {
+  .c2 {
+    padding-top: 1rem;
+    padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width:25rem) {
+@media (min-width:37.5rem) {
   .c2 {
-    padding-top: 1.75rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
   }
 }
 
@@ -167,7 +168,7 @@ exports[`Brand should render correctly with link provided 1`] = `
 
 .c0 {
   background-color: #B80000;
-  min-height: 3.5rem;
+  min-height: 2.5rem;
   width: 100%;
   padding: 0 0.5rem;
 }
@@ -183,8 +184,8 @@ exports[`Brand should render correctly with link provided 1`] = `
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
-  padding-top: 1rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.375rem;
   height: 1.5rem;
   width: 100%;
   max-width: 17.5rem;
@@ -207,17 +208,11 @@ exports[`Brand should render correctly with link provided 1`] = `
 
 @media (min-width:25rem) {
   .c0 {
-    min-height: 5rem;
+    min-height: 3.25rem;
     padding: 0 1rem;
   }
 }
 
-@media (max-width:14.9375rem) {
-  .c0 {
-    min-height: 6.5rem;
-  }
-}
-
 @media (max-width:14.9375rem) {
   .c3 {
     display: block;
@@ -226,8 +221,15 @@ exports[`Brand should render correctly with link provided 1`] = `
 
 @media (min-width:25rem) {
   .c4 {
-    padding-top: 1.75rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1rem;
+    padding-bottom: 0.75rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c4 {
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
   }
 }
 
@@ -316,7 +318,7 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
 
 .c0 {
   background-color: #B80000;
-  min-height: 3.5rem;
+  min-height: 2.5rem;
   width: 100%;
   padding: 0 0.5rem;
 }
@@ -325,8 +327,8 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
-  padding-top: 1rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.375rem;
   height: 1.5rem;
   width: 100%;
   max-width: 17.5rem;
@@ -349,21 +351,22 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
 
 @media (min-width:25rem) {
   .c0 {
-    min-height: 5rem;
+    min-height: 3.25rem;
     padding: 0 1rem;
   }
 }
 
-@media (max-width:14.9375rem) {
-  .c0 {
-    min-height: 6.5rem;
+@media (min-width:25rem) {
+  .c2 {
+    padding-top: 1rem;
+    padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width:25rem) {
+@media (min-width:37.5rem) {
   .c2 {
-    padding-top: 1.75rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
   }
 }
 
@@ -440,7 +443,7 @@ exports[`Brand should render correctly with transparent borders 1`] = `
 
 .c0 {
   background-color: #B80000;
-  min-height: 3.5rem;
+  min-height: 2.5rem;
   width: 100%;
   padding: 0 0.5rem;
   border-top: 0.0625rem solid transparent;
@@ -451,8 +454,8 @@ exports[`Brand should render correctly with transparent borders 1`] = `
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
-  padding-top: 1rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.375rem;
   height: 1.5rem;
   width: 100%;
   max-width: 17.5rem;
@@ -475,21 +478,22 @@ exports[`Brand should render correctly with transparent borders 1`] = `
 
 @media (min-width:25rem) {
   .c0 {
-    min-height: 5rem;
+    min-height: 3.25rem;
     padding: 0 1rem;
   }
 }
 
-@media (max-width:14.9375rem) {
-  .c0 {
-    min-height: 6.5rem;
+@media (min-width:25rem) {
+  .c2 {
+    padding-top: 1rem;
+    padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width:25rem) {
+@media (min-width:37.5rem) {
   .c2 {
-    padding-top: 1.75rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
   }
 }
 

diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
@@ -3,23 +3,26 @@ import styled from 'styled-components';
 import { string, number, node, shape, bool } from 'prop-types';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
 import {
+  GEL_GROUP_0_SCREEN_WIDTH_MAX,
   GEL_GROUP_2_SCREEN_WIDTH_MIN,
+  GEL_GROUP_3_SCREEN_WIDTH_MIN,
   GEL_GROUP_5_SCREEN_WIDTH_MIN,
-  GEL_GROUP_0_SCREEN_WIDTH_MAX,
 } from '@bbc/gel-foundations/breakpoints';
 import {
   GEL_SPACING_HLF,
   GEL_SPACING,
   GEL_SPACING_DBL,
-  GEL_SPACING_TRPL,
 } from '@bbc/gel-foundations/spacings';
 import { getPica } from '@bbc/gel-foundations/typography';
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 
-const SVG_TOP_OFFSET_ABOVE_400PX = '1.75rem'; // 28px
-const SVG_BOTTOM_OFFSET_BELOW_400PX = '0.75rem'; // 12px
-const PADDING_AROUND_SVG_ABOVE_400PX = 56;
-const PADDING_AROUND_SVG_BELOW_400PX = 32;
+const SVG_TOP_OFFSET_BELOW_400PX = '0.625rem'; // 10px
+const SVG_BOTTOM_OFFSET_BELOW_400PX = '0.375rem'; // 6px
+const SVG_BOTTOM_OFFSET_ABOVE_400PX = '0.75rem'; // 12px
+const SVG_BOTTOM_OFFSET_ABOVE_600PX = '1.25rem'; // 20px
+const SCRIPT_LINK_OFFSET_BELOW_240PX = 52;
+const PADDING_AROUND_SVG_BELOW_400PX = 16;
+const PADDING_AROUND_SVG_ABOVE_400PX = 28;
 
 const conditionallyRenderHeight = (svgHeight, padding) =>
   svgHeight ? `min-height: ${(svgHeight + padding) / 16}rem;` : '';
@@ -54,7 +57,12 @@ const Banner = styled.div`
   }
 
   @media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) {
-    min-height: ${({ svgHeight }) => svgHeight / 16 + 5}rem;
+    ${({ scriptLink, svgHeight }) =>
+      scriptLink &&
+      `min-height: ${(svgHeight +
+        PADDING_AROUND_SVG_BELOW_400PX +
+        SCRIPT_LINK_OFFSET_BELOW_240PX) /
+        16}rem;`}
   }
 
   border-top: ${({ borderTop }) => borderTop && TRANSPARENT_BORDER};
@@ -81,15 +89,20 @@ const BrandSvg = styled.svg`
   box-sizing: content-box;
   color: ${props => props.logoColour};
   fill: currentColor;
-  padding-top: ${GEL_SPACING_DBL};
+  padding-top: ${SVG_TOP_OFFSET_BELOW_400PX};
   padding-bottom: ${SVG_BOTTOM_OFFSET_BELOW_400PX};
   height: ${props => props.height / 16}rem;
 
   ${({ maxWidth, minWidth }) => brandWidth(minWidth, maxWidth)}
 
   @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
-    padding-top: ${SVG_TOP_OFFSET_ABOVE_400PX};
-    padding-bottom: ${GEL_SPACING_TRPL};
+    padding-top: ${GEL_SPACING_DBL};
+    padding-bottom: ${SVG_BOTTOM_OFFSET_ABOVE_400PX};
+  }
+
+  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+    padding-top: ${SVG_BOTTOM_OFFSET_ABOVE_600PX};
+    padding-bottom: ${GEL_SPACING_DBL};
   }
 
   @media screen and (-ms-high-contrast: active), print {
@@ -236,6 +249,7 @@ const Brand = props => {
       borderBottom={borderBottom}
       backgroundColour={backgroundColour}
       logoColour={logoColour}
+      scriptLink={scriptLink}
       {...rest}
     >
       <SvgWrapper>

diff --git a/packages/components/psammead-script-link/CHANGELOG.md b/packages/components/psammead-script-link/CHANGELOG.md
@@ -3,10 +3,11 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.0.0-alpha.8 | [PR#2569](https://github.com/bbc/psammead/pull/2569) Reduce height of Script link for 600px+ breakpoints |
 | 1.0.0-alpha.7 | [PR#2519](https://github.com/bbc/psammead/pull/2519) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.0.0-alpha.6 | [PR#2488](https://github.com/bbc/psammead/pull/2488) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 1.0.0-alpha.5 | [PR#2477](https://github.com/bbc/psammead/pull/2477) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.0.0-alpha.4 | [PR#2440](https://github.com/bbc/psammead/pull/2440) Talos - Bump Dependencies - @bbc/psammead-styles |
-| 1.0.0-alpha.3 | [PR#2404](https://github.com/bbc/psammead/pull/2404) replace inputProvider and dirDecorator with withServicesInput |
+| 1.0.0-alpha.3 | [PR#2404](https://github.com/bbc/psammead/pull/2404) Replace inputProvider and dirDecorator with withServicesInput |
 | 1.0.0-alpha.2 | [PR#2362](https://github.com/bbc/psammead/pull/2362) Update breakpoints |
 | 1.0.0-alpha.1 | [PR#2294](https://github.com/bbc/psammead/pull/2294) Initial creation of package. |
diff --git a/packages/components/psammead-script-link/package-lock.json b/packages/components/psammead-script-link/package-lock.json
diff --git a/packages/components/psammead-script-link/package.json b/packages/components/psammead-script-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-script-link",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap
@@ -63,6 +63,14 @@ exports[`ScriptLink should render correctly 1`] = `
   }
 }
 
+@media (min-width:37.5rem) {
+  .c0 {
+    height: 2.25rem;
+    line-height: 2.25rem;
+    padding: 0 0.625rem;
+  }
+}
+
 <a
   class="c0"
   href="https://www.bbc.co.uk/news"

diff --git a/packages/components/psammead-script-link/src/index.jsx b/packages/components/psammead-script-link/src/index.jsx
@@ -2,8 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { getPica } from '@bbc/gel-foundations/typography';
 import {
-  GEL_GROUP_2_SCREEN_WIDTH_MIN,
   GEL_GROUP_1_SCREEN_WIDTH_MAX,
+  GEL_GROUP_2_SCREEN_WIDTH_MIN,
+  GEL_GROUP_3_SCREEN_WIDTH_MIN,
 } from '@bbc/gel-foundations/breakpoints';
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 import { C_WHITE, C_EBON } from '@bbc/psammead-styles/colours';
@@ -43,6 +44,11 @@ const StyledLink = styled.a`
     height: 2.5rem;
     padding: 0 0.75rem;
   }
+  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+    height: 2.25rem;
+    line-height: 2.25rem;
+    padding: 0 0.625rem;
+  }
 `;
 
 const ScriptLink = ({ children, script, service, href, variant }) => (