Migrate [level 2] packages to Emotion

packages/components/psammead-brand/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 7.0.0 | [PR#3891](https://github.com/bbc/psammead/pull/3891) Migrate to Emotion. |
 | 6.0.4 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-visually-hidden-text, @bbc/psammead-styles |
 | 6.0.3 | [PR#3862](https://github.com/bbc/psammead/pull/3862) Talos - Bump Dependencies - @bbc/psammead-script-link |
 | 6.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations |

packages/components/psammead-brand/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "6.0.4",
+  "version": "7.0.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -28,7 +28,7 @@
   },
   "peerDependencies": {
     "react": "^16.9.0",
-    "styled-components": "^4.3.2"
+    "@emotion/styled": "^10.0.27"
   },
   "keywords": [
     "bbc",

packages/components/psammead-brand/src/SkipLink/index.jsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
 import { oneOf } from 'prop-types';
 import { C_WHITE } from '@bbc/psammead-styles/colours';
 import {
@@ -34,7 +34,7 @@ const SkipLink = styled.a`
     height: auto;
     width: auto;
     top: 0;
-    ${({ dir }) => css`
+    ${({ dir }) => `
       ${dir === 'ltr' ? 'left' : 'right'}: 0;
     `}