BBC-archive · ryanmccombe · Feb 4, 2021 · Feb 4, 2021 · Feb 4, 2021 · Feb 4, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 4.0.92 | [PR#4303](https://github.com/bbc/psammead/pull/4303) Use Emotion v11 Babel Plugin |
 | 4.0.91 | [PR#4302](https://github.com/bbc/psammead/pull/4302) Talos - Bump Dependencies - @bbc/psammead-consent-banner |
 | 4.0.90 | [PR#4300](https://github.com/bbc/psammead/pull/4300) Talos - Bump Dependencies - @bbc/psammead-consent-banner |
 | 4.0.89 | [PR#4295](https://github.com/bbc/psammead/pull/4295) Talos - Bump Dependencies - @bbc/psammead-consent-banner |

diff --git a/babel.config.js b/babel.config.js
@@ -25,7 +25,7 @@ const presets = [
 
 module.exports = {
   plugins: [
-    'emotion',
+    '@emotion',
     '@babel/plugin-proposal-export-default-from',
     '@loadable/babel-plugin',
   ],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead",
-  "version": "4.0.91",
+  "version": "4.0.92",
   "description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team",
   "main": "index.js",
   "private": true,

diff --git a/packages/components/psammead-amp-geo/CHANGELOG.md b/packages/components/psammead-amp-geo/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.2.2 | [PR#4303](https://github.com/bbc/psammead/pull/4303) Trigger rebuild following babel config update for emotion 11 |
 | 1.2.1 | [PR#4271](https://github.com/bbc/psammead/pull/4271) change react peer dep to >=16.9.0 |
 | 1.2.0 | [PR#3539](https://github.com/bbc/psammead/pull/3539) Add gbOrUnknown group to AMP Geo component |
 | 1.1.2 | [PR#1942](https://github.com/bbc/psammead/pull/1942) Talos - Bump React to 16.9.0 |

diff --git a/packages/components/psammead-amp-geo/package-lock.json b/packages/components/psammead-amp-geo/package-lock.json
diff --git a/packages/components/psammead-amp-geo/package.json b/packages/components/psammead-amp-geo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-amp-geo",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 7.0.28 | [PR#4303](https://github.com/bbc/psammead/pull/4303) Trigger rebuild following babel config update for emotion 11 |
 | 7.0.27 | [PR#4273](https://github.com/bbc/psammead/pull/4273) Talos - Bump Dependencies - @bbc/psammead-script-link |
 | 7.0.26 | [PR#4271](https://github.com/bbc/psammead/pull/4271) change react peer dep to >=16.9.0 |
 | 7.0.25 | [PR#4266](https://github.com/bbc/psammead/pull/4266) Talos - Bump Dependencies - @bbc/psammead-visually-hidden-text |

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": "7.0.27",
+  "version": "7.0.28",
   "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
@@ -8,7 +8,7 @@ exports[`Brand should render correctly with link not provided 1`] = `
   padding: 0 0.5rem;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-0 {
     min-height: 3.25rem;
     padding: 0 1rem;
@@ -23,20 +23,20 @@ exports[`Brand should render correctly with link not provided 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   max-width: 80rem;
   margin: 0 auto;
 }
 
-@media (max-width:14.9375rem) {
+@media (max-width: 14.9375rem) {
   .emotion-2 {
     display: block;
   }
@@ -58,28 +58,28 @@ exports[`Brand should render correctly with link not provided 1`] = `
   -ms-flex-preferred-size: 17.5rem;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-4 {
     padding-top: 1rem;
     padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width:37.5rem) {
+@media (min-width: 37.5rem) {
   .emotion-4 {
     padding-top: 1.25rem;
     padding-bottom: 1rem;
   }
 }
 
-@media screen and (-ms-high-contrast:active),print {
+@media screen and (-ms-high-contrast: active),print {
   .emotion-4 {
     fill: windowText;
   }
 }
 
-.e1wgjeuw2:hover .emotion-4,
-.e1wgjeuw2:focus .emotion-4 {
+.e1wgjeuw1:hover .emotion-4,
+.e1wgjeuw1:focus .emotion-4 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
@@ -146,7 +146,7 @@ exports[`Brand should render correctly with link provided 1`] = `
   padding: 0 0.5rem;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-0 {
     min-height: 3.25rem;
     padding: 0 1rem;
@@ -161,20 +161,20 @@ exports[`Brand should render correctly with link provided 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   max-width: 80rem;
   margin: 0 auto;
 }
 
-@media (max-width:14.9375rem) {
+@media (max-width: 14.9375rem) {
   .emotion-2 {
     display: block;
   }
@@ -191,7 +191,7 @@ exports[`Brand should render correctly with link provided 1`] = `
   -ms-flex-preferred-size: 17.5rem;
 }
 
-@media (max-width:14.9375rem) {
+@media (max-width: 14.9375rem) {
   .emotion-4 {
     display: block;
   }
@@ -213,21 +213,21 @@ exports[`Brand should render correctly with link provided 1`] = `
   -ms-flex-preferred-size: 17.5rem;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-6 {
     padding-top: 1rem;
     padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width:37.5rem) {
+@media (min-width: 37.5rem) {
   .emotion-6 {
     padding-top: 1.25rem;
     padding-bottom: 1rem;
   }
 }
 
-@media screen and (-ms-high-contrast:active),print {
+@media screen and (-ms-high-contrast: active),print {
   .emotion-6 {
     fill: windowText;
   }
@@ -306,7 +306,7 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
   padding: 0 0.5rem;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-0 {
     min-height: 3.25rem;
     padding: 0 1rem;
@@ -321,20 +321,20 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   max-width: 80rem;
   margin: 0 auto;
 }
 
-@media (max-width:14.9375rem) {
+@media (max-width: 14.9375rem) {
   .emotion-2 {
     display: block;
   }
@@ -356,28 +356,28 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
   -ms-flex-preferred-size: 17.5rem;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-4 {
     padding-top: 1rem;
     padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width:37.5rem) {
+@media (min-width: 37.5rem) {
   .emotion-4 {
     padding-top: 1.25rem;
     padding-bottom: 1rem;
   }
 }
 
-@media screen and (-ms-high-contrast:active),print {
+@media screen and (-ms-high-contrast: active),print {
   .emotion-4 {
     fill: windowText;
   }
 }
 
-.e1wgjeuw2:hover .emotion-4,
-.e1wgjeuw2:focus .emotion-4 {
+.e1wgjeuw1:hover .emotion-4,
+.e1wgjeuw1:focus .emotion-4 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
@@ -439,7 +439,7 @@ exports[`Brand should render correctly with transparent borders 1`] = `
   border-bottom: 0.0625rem solid transparent;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-0 {
     min-height: 3.25rem;
     padding: 0 1rem;
@@ -454,20 +454,20 @@ exports[`Brand should render correctly with transparent borders 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   max-width: 80rem;
   margin: 0 auto;
 }
 
-@media (max-width:14.9375rem) {
+@media (max-width: 14.9375rem) {
   .emotion-2 {
     display: block;
   }
@@ -489,28 +489,28 @@ exports[`Brand should render correctly with transparent borders 1`] = `
   -ms-flex-preferred-size: 17.5rem;
 }
 
-@media (min-width:25rem) {
+@media (min-width: 25rem) {
   .emotion-4 {
     padding-top: 1rem;
     padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width:37.5rem) {
+@media (min-width: 37.5rem) {
   .emotion-4 {
     padding-top: 1.25rem;
     padding-bottom: 1rem;
   }
 }
 
-@media screen and (-ms-high-contrast:active),print {
+@media screen and (-ms-high-contrast: active),print {
   .emotion-4 {
     fill: windowText;
   }
 }
 
-.e1wgjeuw2:hover .emotion-4,
-.e1wgjeuw2:focus .emotion-4 {
+.e1wgjeuw1:hover .emotion-4,
+.e1wgjeuw1:focus .emotion-4 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;

diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
@@ -65,8 +65,9 @@ const Banner = styled.div`
       }rem;`}
   }
 
-  border-top: ${({ borderTop }) => borderTop && TRANSPARENT_BORDER};
-  border-bottom: ${({ borderBottom }) => borderBottom && TRANSPARENT_BORDER};
+  ${({ borderTop }) => borderTop && `border-top: ${TRANSPARENT_BORDER}`};
+  ${({ borderBottom }) =>
+    borderBottom && `border-bottom: ${TRANSPARENT_BORDER}`};
 `;
 
 const brandWidth = (minWidth, maxWidth) => `

diff --git a/packages/components/psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 | Version       | Description                                                                                                           |
 | ------------- | --------------------------------------------------------------------------------------------------------------------- |
+| 3.0.11 | [PR#4303](https://github.com/bbc/psammead/pull/4303) Trigger rebuild following babel config update for emotion 11 |
 | 3.0.10 | [PR#4260](https://github.com/bbc/psammead/pull/4260) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 3.0.9 | [PR#4256](https://github.com/bbc/psammead/pull/4256) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 3.0.8         | [PR#4193](https://github.com/bbc/psammead/pull/4193) Upgrade Emotion to v11                                           |

diff --git a/packages/components/psammead-bulleted-list/package-lock.json b/packages/components/psammead-bulleted-list/package-lock.json
diff --git a/packages/components/psammead-bulleted-list/package.json b/packages/components/psammead-bulleted-list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-bulleted-list",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,