Use v11 of emotion babel plugin

.storybook/main.js

@@ -1,8 +1,29 @@
+// Storybook does not currently support emotion 11
+// Much of this config is an adaption of the solution here:
+// https://github.com/storybookjs/storybook/issues/13277#issuecomment-751747964
+const path = require('path');
+
+const toPath = _path => path.join(process.cwd(), _path);
+
 module.exports = {
   stories: ['../packages/*/*/*/*.stories.jsx'],
   addons: [
     '@storybook/addon-knobs',
     '@storybook/addon-a11y',
     '@storybook/addon-viewport',
   ],
+  webpackFinal: async config => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          '@emotion/core': toPath('node_modules/@emotion/react'),
+          '@emotion/styled': toPath('node_modules/@emotion/styled'),
+          'emotion-theming': toPath('node_modules/@emotion/react'),
+        },
+      },
+    };
+  },
 };

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 |

babel.config.js

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

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,

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 |

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,

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 |

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,