Merge pull request #2889 from bbc/shrink-brand-before-wrap

Shrink brand before wrap
BBC-archive · Jan 16, 2020 · 2bff091 · 2bff091
2 parents 48287c0 + e00ba1c
commit 2bff091
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
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.3 | [PR#2889](https://github.com/bbc/psammead/pull/2889) Shrink brand svg before wrapping the script link |
 | 5.1.2 | [PR#2928](https://github.com/bbc/psammead/pull/2928) Talos - Bump Dependencies - @bbc/psammead-script-link |
 | 5.1.1 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations, @bbc/psammead-script-link |
 | 5.1.0 | [PR#2917](https://github.com/bbc/psammead/pull/2917) Remove alpha tag from Brand component |

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.2",
+  "version": "5.1.3",
   "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
@@ -51,6 +51,10 @@ exports[`Brand should render correctly with link not provided 1`] = `
   width: 100%;
   max-width: 17.5rem;
   min-width: 11.25rem;
+  -webkit-flex: 1 1 11.25rem;
+  -ms-flex: 1 1 11.25rem;
+  flex: 1 1 11.25rem;
+  -ms-flex-preferred-size: 17.5rem;
 }
 
 .c4:hover .c2,
@@ -178,6 +182,10 @@ exports[`Brand should render correctly with link provided 1`] = `
   width: 100%;
   max-width: 17.5rem;
   min-width: 11.25rem;
+  -webkit-flex: 1 1 11.25rem;
+  -ms-flex: 1 1 11.25rem;
+  flex: 1 1 11.25rem;
+  -ms-flex-preferred-size: 17.5rem;
 }
 
 .c4 {
@@ -190,6 +198,10 @@ exports[`Brand should render correctly with link provided 1`] = `
   width: 100%;
   max-width: 17.5rem;
   min-width: 11.25rem;
+  -webkit-flex: 1 1 11.25rem;
+  -ms-flex: 1 1 11.25rem;
+  flex: 1 1 11.25rem;
+  -ms-flex-preferred-size: 17.5rem;
 }
 
 .c2:hover .c4,
@@ -333,6 +345,10 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
   width: 100%;
   max-width: 17.5rem;
   min-width: 11.25rem;
+  -webkit-flex: 1 1 11.25rem;
+  -ms-flex: 1 1 11.25rem;
+  flex: 1 1 11.25rem;
+  -ms-flex-preferred-size: 17.5rem;
 }
 
 .c4:hover .c2,
@@ -460,6 +476,10 @@ exports[`Brand should render correctly with transparent borders 1`] = `
   width: 100%;
   max-width: 17.5rem;
   min-width: 11.25rem;
+  -webkit-flex: 1 1 11.25rem;
+  -ms-flex: 1 1 11.25rem;
+  flex: 1 1 11.25rem;
+  -ms-flex-preferred-size: 17.5rem;
 }
 
 .c4:hover .c2,

diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
@@ -71,6 +71,8 @@ const brandWidth = (minWidth, maxWidth) => `
   width: 100%;
   max-width: ${maxWidth / 16}rem;
   min-width: ${minWidth / 16}rem;
+  flex: 1 1 ${minWidth / 16}rem;
+  -ms-flex-preferred-size: ${maxWidth / 16}rem;
 `;
 
 const StyledLink = styled.a`