Merge pull request #3898 from bbc/emotion-media-indicator

[Emotion L3] Migrate psammead-media-indicator
BBC-archive · Oct 16, 2020 · 1d666f4 · 1d666f4
2 parents 876e7c1 + e002859
commit 1d666f4
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 24 deletions.
diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 6.0.0 | [PR#3898](https://github.com/bbc/psammead/pull/3898) Migrate to Emotion |
 | 5.0.3 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-assets |
 | 5.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 5.0.1 | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles |

diff --git a/packages/components/psammead-media-indicator/README.md b/packages/components/psammead-media-indicator/README.md
@@ -45,7 +45,7 @@ When using this component ensure you add the relevant spacing.
 E.g.
 
 ```jsx
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import MediaIndicator from '@bbc/psammead-media-indicator';
 import { latin } from '@bbc/gel-foundations/scripts';
 

diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json
diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json
@@ -25,7 +25,7 @@
   },
   "peerDependencies": {
     "react": "^16.9.0",
-    "styled-components": "^4.3.2"
+    "@emotion/styled": "^10.0.27"
   },
   "keywords": [
     "bbc",

diff --git a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
@@ -1,14 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MediaIndicator should render audio indicator correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.emotion-2 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: block;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 <div>
   <div
     aria-hidden="true"
-    class="StyledMediaIndicator-sc-1p6h86b-0 bMHUOq"
+    class="emotion-2 emotion-3"
     dir="ltr"
   >
     <div
-      class="FlexWrapper-sc-1p6h86b-1 fQsOMp"
+      class="emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -31,14 +68,51 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
 `;
 
 exports[`MediaIndicator should render photogallery correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.emotion-2 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: block;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 <div>
   <div
     aria-hidden="true"
-    class="StyledMediaIndicator-sc-1p6h86b-0 bMHUOq"
+    class="emotion-2 emotion-3"
     dir="ltr"
   >
     <div
-      class="FlexWrapper-sc-1p6h86b-1 fQsOMp"
+      class="emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -63,14 +137,35 @@ exports[`MediaIndicator should render photogallery correctly 1`] = `
 `;
 
 exports[`MediaIndicator should render video by default 1`] = `
+.emotion-2 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  display: block;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
 <div>
   <div
     aria-hidden="true"
-    class="StyledMediaIndicator-sc-1p6h86b-0 dAhsvX"
+    class="emotion-2 emotion-3"
     dir="ltr"
   >
     <div
-      class="FlexWrapper-sc-1p6h86b-1 fQsOMp"
+      class="emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -90,14 +185,51 @@ exports[`MediaIndicator should render video by default 1`] = `
 `;
 
 exports[`MediaIndicator should render video indicator correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.emotion-2 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: block;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 <div>
   <div
     aria-hidden="true"
-    class="StyledMediaIndicator-sc-1p6h86b-0 bMHUOq"
+    class="emotion-2 emotion-3"
     dir="ltr"
   >
     <div
-      class="FlexWrapper-sc-1p6h86b-1 fQsOMp"
+      class="emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -117,14 +249,53 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
 `;
 
 exports[`MediaIndicator should render video indicator correctly when inline 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.emotion-2 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: inline-block;
+  vertical-align: middle;
+  padding-right: 0.5rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 <div>
   <div
     aria-hidden="true"
-    class="StyledMediaIndicator-sc-1p6h86b-0 fIPcWg"
+    class="emotion-2 emotion-3"
     dir="ltr"
   >
     <div
-      class="FlexWrapper-sc-1p6h86b-1 fQsOMp"
+      class="emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -144,14 +315,53 @@ exports[`MediaIndicator should render video indicator correctly when inline 1`]
 `;
 
 exports[`MediaIndicator should render video indicator correctly when inline on RTL 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.emotion-2 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: "BBC Nassim Persian",Arial,Verdana,Geneva,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 0.5rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 <div>
   <div
     aria-hidden="true"
-    class="StyledMediaIndicator-sc-1p6h86b-0 eDoiLK"
+    class="emotion-2 emotion-3"
     dir="rtl"
   >
     <div
-      class="FlexWrapper-sc-1p6h86b-1 fQsOMp"
+      class="emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"

diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
 import { node, bool, string, oneOf, shape } from 'prop-types';
 import { C_WHITE, C_EBON } from '@bbc/psammead-styles/colours';
 import { GEL_SPACING } from '@bbc/gel-foundations/spacings';
@@ -8,23 +8,20 @@ import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 import { mediaIcons } from '@bbc/psammead-assets/svgs';
 
-const paddingDir = ({ dir }) => `padding-${dir === 'rtl' ? 'left' : 'right'}`;
-
 const StyledMediaIndicator = styled.div`
   color: ${C_EBON};
   background-color: ${C_WHITE};
   ${({ service }) => getSansRegular(service)}
   ${({ script }) => script && getMinion(script)};
 
-  ${({ isInline }) =>
+  ${({ isInline, dir }) =>
     isInline
-      ? css`
+      ? `
           display: inline-block;
           vertical-align: middle;
-          ${paddingDir}: ${GEL_SPACING};
-          /* This is to add spacing between the media indicator and the element sitting next to it*/
+          padding-${dir === 'rtl' ? 'left' : 'right'}: ${GEL_SPACING};
         `
-      : css`
+      : `
           display: block;
         `}
 `;

diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
 import { C_CLOUD_LIGHT } from '@bbc/psammead-styles/colours';