From 87fcaa3bc47ee44f098541c2892ffff1f3d7a432 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 5 Nov 2019 15:05:53 +0000 Subject: [PATCH 01/11] Change script link height --- packages/components/psammead-script-link/src/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-script-link/src/index.jsx b/packages/components/psammead-script-link/src/index.jsx index 08d96db3aa..bb88039300 100644 --- 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 }) => ( From 1ceeffd9fb6cd87996ee683753ff0c4edf27ac24 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 5 Nov 2019 15:06:26 +0000 Subject: [PATCH 02/11] Update snapshots --- .../src/__snapshots__/index.test.jsx.snap | 8 ++++++++ 1 file changed, 8 insertions(+) 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 index df91e42d97..d9a7236288 100644 --- 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; + } +} + Date: Tue, 5 Nov 2019 15:07:08 +0000 Subject: [PATCH 03/11] Bump up version --- packages/components/psammead-script-link/CHANGELOG.md | 3 ++- packages/components/psammead-script-link/package-lock.json | 2 +- packages/components/psammead-script-link/package.json | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-script-link/CHANGELOG.md b/packages/components/psammead-script-link/CHANGELOG.md index 804a935b85..51c330b07f 100644 --- a/packages/components/psammead-script-link/CHANGELOG.md +++ b/packages/components/psammead-script-link/CHANGELOG.md @@ -3,10 +3,11 @@ | Version | Description | |---------|-------------| +| 1.0.0-alpha.8 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) 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 index 6dc4842e34..1e4bd945d3 100644 --- a/packages/components/psammead-script-link/package-lock.json +++ b/packages/components/psammead-script-link/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-script-link", - "version": "1.0.0-alpha.7", + "version": "1.0.0-alpha.8", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-script-link/package.json b/packages/components/psammead-script-link/package.json index 4bf30bde52..41a9b2d481 100644 --- 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, From 5ba0c4d2b6e7ca47e4ca657c2ad03f6c09135586 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 5 Nov 2019 15:50:34 +0000 Subject: [PATCH 04/11] Add PR number --- packages/components/psammead-script-link/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-script-link/CHANGELOG.md b/packages/components/psammead-script-link/CHANGELOG.md index 51c330b07f..a7d2b05056 100644 --- a/packages/components/psammead-script-link/CHANGELOG.md +++ b/packages/components/psammead-script-link/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 1.0.0-alpha.8 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Reduce height of Script link for 600px+ breakpoints | +| 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 | From 4768c09bb429fa126e989bd74cdf005c41df9794 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 5 Nov 2019 16:37:36 +0000 Subject: [PATCH 05/11] Bump brand version --- packages/components/psammead-brand/CHANGELOG.md | 1 + packages/components/psammead-brand/package-lock.json | 2 +- packages/components/psammead-brand/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index a4b5bcf1bb..fa3fce93ef 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 5.1.0-alpha.4 | [PR#2569](https://github.com/bbc/psammead/pull/2569) Reduce height of Brand Component | | 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 | | 5.1.0-alpha.1 | [PR#2474](https://github.com/bbc/psammead/pull/2474) Add scriptLink prop to render `ScriptLink` used for linking to service variants | diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index 7001dbcc72..d3219c4a6e 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": "5.1.0-alpha.3", + "version": "5.1.0-alpha.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index a1fd8d6477..a55fe4d0cf 100644 --- 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.3", + "version": "5.1.0-alpha.4", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, From b81b313336a882993caa610d17097028c4270072 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 6 Nov 2019 15:15:03 +0000 Subject: [PATCH 06/11] Change styling for Brand Component --- .../components/psammead-brand/src/index.jsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index 172eea4d5a..197428a3e1 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/packages/components/psammead-brand/src/index.jsx @@ -3,21 +3,23 @@ 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'; -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 PADDING_AROUND_SVG_BELOW_400PX = 16; +const PADDING_AROUND_SVG_ABOVE_400PX = 28; const conditionallyRenderHeight = (svgHeight, padding) => svgHeight ? `min-height: ${(svgHeight + padding) / 16}rem;` : ''; @@ -78,15 +80,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 { From 2fb7140208a7453fc935b43726fc4f6644b9562e Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 6 Nov 2019 15:16:13 +0000 Subject: [PATCH 07/11] Updated snapshots --- .../src/__snapshots__/index.test.jsx.snap | 76 +++++++++++++------ 1 file changed, 52 insertions(+), 24 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 29e0e13ced..c3c800d087 100644 --- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap @@ -35,7 +35,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; } @@ -44,8 +44,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; @@ -68,7 +68,7 @@ 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; } } @@ -81,8 +81,15 @@ exports[`Brand should render correctly with link not provided 1`] = ` @media (min-width:25rem) { .c2 { - padding-top: 1.75rem; - padding-bottom: 1.5rem; + padding-top: 1rem; + padding-bottom: 0.75rem; + } +} + +@media (min-width:37.5rem) { + .c2 { + padding-top: 1.25rem; + padding-bottom: 1rem; } } @@ -165,7 +172,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; } @@ -181,8 +188,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; @@ -205,7 +212,7 @@ exports[`Brand should render correctly with link provided 1`] = ` @media (min-width:25rem) { .c0 { - min-height: 5rem; + min-height: 3.25rem; padding: 0 1rem; } } @@ -224,8 +231,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; } } @@ -313,7 +327,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; } @@ -322,8 +336,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; @@ -346,7 +360,7 @@ 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; } } @@ -359,8 +373,15 @@ exports[`Brand should render correctly with no service Localised Name 1`] = ` @media (min-width:25rem) { .c2 { - padding-top: 1.75rem; - padding-bottom: 1.5rem; + padding-top: 1rem; + padding-bottom: 0.75rem; + } +} + +@media (min-width:37.5rem) { + .c2 { + padding-top: 1.25rem; + padding-bottom: 1rem; } } @@ -436,7 +457,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; @@ -447,8 +468,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; @@ -471,7 +492,7 @@ exports[`Brand should render correctly with transparent borders 1`] = ` @media (min-width:25rem) { .c0 { - min-height: 5rem; + min-height: 3.25rem; padding: 0 1rem; } } @@ -484,8 +505,15 @@ exports[`Brand should render correctly with transparent borders 1`] = ` @media (min-width:25rem) { .c2 { - padding-top: 1.75rem; - padding-bottom: 1.5rem; + padding-top: 1rem; + padding-bottom: 0.75rem; + } +} + +@media (min-width:37.5rem) { + .c2 { + padding-top: 1.25rem; + padding-bottom: 1rem; } } From 697a22e0cc33dec5d2a70a588a34aad3f14a999d Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Thu, 7 Nov 2019 09:38:38 +0000 Subject: [PATCH 08/11] Bump up version --- packages/components/psammead-brand/package-lock.json | 2 +- packages/components/psammead-brand/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index d3219c4a6e..e66c505f0c 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": "5.1.0-alpha.4", + "version": "5.1.0-alpha.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index a55fe4d0cf..cd2dbd74ae 100644 --- 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, From 0270c1d2a1466d744f05a0538487b06e65e4d026 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Thu, 7 Nov 2019 16:15:25 +0000 Subject: [PATCH 09/11] Change styling for nav with script link --- packages/components/psammead-brand/src/index.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index 1d047a23d0..560ffca9e6 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/packages/components/psammead-brand/src/index.jsx @@ -20,6 +20,7 @@ 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; @@ -56,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 !== null && + `min-height: ${(svgHeight + + PADDING_AROUND_SVG_BELOW_400PX + + SCRIPT_LINK_OFFSET_BELOW_240PX) / + 16}rem;`} } border-top: ${({ borderTop }) => borderTop && TRANSPARENT_BORDER}; @@ -243,6 +249,7 @@ const Brand = props => { borderBottom={borderBottom} backgroundColour={backgroundColour} logoColour={logoColour} + scriptLink={scriptLink} {...rest} > From 0af29097c25e1fec1b79d3b73eb0cc0c29c88edf Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Thu, 7 Nov 2019 16:17:15 +0000 Subject: [PATCH 10/11] Update snapshots --- .../src/__snapshots__/index.test.jsx.snap | 24 ------------------- 1 file changed, 24 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 7201dff8ce..8056191b73 100644 --- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap @@ -74,12 +74,6 @@ exports[`Brand should render correctly with link not provided 1`] = ` } } -@media (max-width:14.9375rem) { - .c0 { - min-height: 6.5rem; - } -} - @media (min-width:25rem) { .c2 { padding-top: 1rem; @@ -219,12 +213,6 @@ exports[`Brand should render correctly with link provided 1`] = ` } } -@media (max-width:14.9375rem) { - .c0 { - min-height: 6.5rem; - } -} - @media (max-width:14.9375rem) { .c3 { display: block; @@ -368,12 +356,6 @@ exports[`Brand should render correctly with no service Localised Name 1`] = ` } } -@media (max-width:14.9375rem) { - .c0 { - min-height: 6.5rem; - } -} - @media (min-width:25rem) { .c2 { padding-top: 1rem; @@ -501,12 +483,6 @@ exports[`Brand should render correctly with transparent borders 1`] = ` } } -@media (max-width:14.9375rem) { - .c0 { - min-height: 6.5rem; - } -} - @media (min-width:25rem) { .c2 { padding-top: 1rem; From 25d4ea5c081a0b4888b509a37511ed67f5f0fb0b Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Fri, 8 Nov 2019 09:36:04 +0000 Subject: [PATCH 11/11] Refactoring Co-Authored-By: Denis Hernandez <46446236+DenisHdz@users.noreply.github.com> --- packages/components/psammead-brand/src/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index 560ffca9e6..f16a1ade7d 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/packages/components/psammead-brand/src/index.jsx @@ -58,7 +58,7 @@ const Banner = styled.div` @media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) { ${({ scriptLink, svgHeight }) => - scriptLink !== null && + scriptLink && `min-height: ${(svgHeight + PADDING_AROUND_SVG_BELOW_400PX + SCRIPT_LINK_OFFSET_BELOW_240PX) /