Merge pull request #3888 from bbc/migrate-bulleted-list

[level 2] Migrate bulleted list & heading index
BBC-archive · Oct 16, 2020 · d902df7 · d902df7
2 parents 3f054ac + 4a85e35
commit d902df7
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 31 deletions.
diff --git a/packages/components/psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md
@@ -2,9 +2,10 @@
 
 | Version       | Description                                                                                                           |
 | ------------- | --------------------------------------------------------------------------------------------------------------------- |
-| 2.0.3 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-styles |
-| 2.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations |
-| 2.0.1 | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles |
+| 3.0.0         | [PR#3888](https://github.com/bbc/psammead/pull/3888) Migrate to emotion                                               |
+| 2.0.3         | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-styles                 |
+| 2.0.2         | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations                 |
+| 2.0.1         | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles                 |
 | 2.0.0-alpha.0 | [PR#3843](https://github.com/bbc/psammead/pull/3843) Bump Dependencies - @bbc/psammead-styles alpha version           |
 | 1.0.21        | [PR#3836](https://github.com/bbc/psammead/pull/3836) Talos - Bump Dependencies - @bbc/psammead-styles                 |
 | 1.0.20        | [PR#3816](https://github.com/bbc/psammead/pull/3816) Talos - Bump Dependencies                                        |

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": "2.0.3",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "@bbc/psammead-styles": "^6.0.0"
   },
   "peerDependencies": {
-    "styled-components": "^4.3.2",
+    "@emotion/styled": "^10.0.27",
     "react-dom": "^16.12.0"
   }
 }
diff --git a/packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap
@@ -1,26 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PsammeadBulletedList should render correctly from ltr 1`] = `
+.emotion-6 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  margin-top: 0;
+  list-style-type: none;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-6 {
+    font-size: 1rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-6 {
+    font-size: 1rem;
+    line-height: 1.375rem;
+  }
+}
+
+.emotion-6 > li {
+  position: relative;
+}
+
+.emotion-6 > li::before {
+  top: 0.5rem;
+  content: ' ';
+  position: absolute;
+  border-width: 1rem;
+  border: 0.1875rem solid #3F3F42;
+  background-color: #3F3F42;
+  border-radius: 50%;
+  left: -1rem;
+}
+
+.emotion-0 {
+  margin-bottom: 1rem;
+}
+
 <div>
   <ul
-    class="BulletedList-sc-13z0d8v-0 gZgNRv"
+    class="emotion-6 emotion-7"
     dir="ltr"
     role="list"
   >
     <li
-      class="BulletedListItem-sc-13z0d8v-1 kHsWph"
+      class="emotion-0 emotion-1"
       role="listitem"
     >
       First item on the list
     </li>
     <li
-      class="BulletedListItem-sc-13z0d8v-1 kHsWph"
+      class="emotion-0 emotion-1"
       role="listitem"
     >
       Second item on the list
     </li>
     <li
-      class="BulletedListItem-sc-13z0d8v-1 kHsWph"
+      class="emotion-0 emotion-1"
       role="listitem"
     >
       Final list item
@@ -30,26 +73,69 @@ exports[`PsammeadBulletedList should render correctly from ltr 1`] = `
 `;
 
 exports[`PsammeadBulletedList should render correctly from rtl 1`] = `
+.emotion-0 {
+  margin-bottom: 1rem;
+}
+
+.emotion-6 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-family: "BBC Nassim Arabic",Arial,Verdana,Geneva,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  margin-top: 0;
+  list-style-type: none;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-6 {
+    font-size: 1.375rem;
+    line-height: 2rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-6 {
+    font-size: 1.375rem;
+    line-height: 2rem;
+  }
+}
+
+.emotion-6 > li {
+  position: relative;
+}
+
+.emotion-6 > li::before {
+  top: 0.5rem;
+  content: ' ';
+  position: absolute;
+  border-width: 1rem;
+  border: 0.1875rem solid #3F3F42;
+  background-color: #3F3F42;
+  border-radius: 50%;
+  right: -1rem;
+}
+
 <div>
   <ul
-    class="BulletedList-sc-13z0d8v-0 IxTjr"
+    class="emotion-6 emotion-7"
     dir="rtl"
     role="list"
   >
     <li
-      class="BulletedListItem-sc-13z0d8v-1 kHsWph"
+      class="emotion-0 emotion-1"
       role="listitem"
     >
       العنصر الأول في القائمة
     </li>
     <li
-      class="BulletedListItem-sc-13z0d8v-1 kHsWph"
+      class="emotion-0 emotion-1"
       role="listitem"
     >
       البند الثاني في القائمة
     </li>
     <li
-      class="BulletedListItem-sc-13z0d8v-1 kHsWph"
+      class="emotion-0 emotion-1"
       role="listitem"
     >
       عنصر القائمة النهائية

diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx
@@ -1,14 +1,12 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { string, oneOf, shape } from 'prop-types';
 import { getBodyCopy } from '@bbc/gel-foundations/typography';
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 import { C_SHADOW } from '@bbc/psammead-styles/colours';
 import { GEL_SPACING_DBL } from '@bbc/gel-foundations/spacings';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 
-const BulletedList = styled.ul.attrs(() => ({
-  role: 'list',
-}))`
+const BulletedList = styled.ul`
   ${({ script }) => script && getBodyCopy(script)};
   ${({ service }) => getSansRegular(service)};
   margin-top: 0;
@@ -30,10 +28,6 @@ const BulletedList = styled.ul.attrs(() => ({
   }
 `;
 
-export const BulletedListItem = styled.li.attrs(() => ({ role: 'listitem' }))`
-  margin-bottom: ${GEL_SPACING_DBL};
-`;
-
 BulletedList.propTypes = {
   script: shape(scriptPropType).isRequired,
   dir: oneOf(['ltr', 'rtl']),
@@ -42,6 +36,15 @@ BulletedList.propTypes = {
 
 BulletedList.defaultProps = {
   dir: 'ltr',
+  role: 'list',
+};
+
+export const BulletedListItem = styled.li`
+  margin-bottom: ${GEL_SPACING_DBL};
+`;
+
+BulletedListItem.defaultProps = {
+  role: 'listitem',
 };
 
 export default BulletedList;
diff --git a/packages/components/psammead-heading-index/CHANGELOG.md b/packages/components/psammead-heading-index/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.0 | [PR#3888](https://github.com/bbc/psammead/pull/3888) Migrate to emotion |
 | 2.0.3 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 2.0.1 | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles |

diff --git a/packages/components/psammead-heading-index/package-lock.json b/packages/components/psammead-heading-index/package-lock.json
diff --git a/packages/components/psammead-heading-index/package.json b/packages/components/psammead-heading-index/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-heading-index",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "@bbc/psammead-styles": "^6.0.0"
   },
   "peerDependencies": {
-    "styled-components": "^4.3.2"
+    "@emotion/styled": "^10.0.27"
   },
   "keywords": [
     "bbc",

diff --git a/packages/components/psammead-heading-index/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-heading-index/src/__snapshots__/index.test.jsx.snap
@@ -1,9 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Index Heading should render correctly 1`] = `
+.emotion-0 {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #6E6E73;
+  margin: 0;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-0 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-0 {
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+  }
+}
+
 <div>
   <h1
-    class="HeadingIndex-sc-1155hfb-0 jmOMtQ"
+    class="emotion-0 emotion-1"
     tabindex="-1"
   >
     This is a page heading
@@ -12,9 +36,33 @@ exports[`Index Heading should render correctly 1`] = `
 `;
 
 exports[`Index Heading should render correctly with arabic script typography values 1`] = `
+.emotion-0 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-family: "BBC Nassim Persian",Arial,Verdana,Geneva,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #6E6E73;
+  margin: 0;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-0 {
+    font-size: 1.625rem;
+    line-height: 2.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-0 {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+
 <div>
   <h1
-    class="HeadingIndex-sc-1155hfb-0 YpWGn"
+    class="emotion-0 emotion-1"
     tabindex="-1"
   >
     هذا عنوان الصفحة

diff --git a/packages/components/psammead-heading-index/src/index.jsx b/packages/components/psammead-heading-index/src/index.jsx
@@ -1,13 +1,11 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { shape, string } from 'prop-types';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 import { C_METAL } from '@bbc/psammead-styles/colours';
 import { getDoublePica } from '@bbc/gel-foundations/typography';
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 
-const HeadingIndex = styled.h1.attrs(() => ({
-  tabIndex: '-1',
-}))`
+const HeadingIndex = styled.h1`
   ${({ script }) => script && getDoublePica(script)};
   ${({ service }) => getSansRegular(service)};
   color: ${C_METAL};
@@ -19,4 +17,8 @@ HeadingIndex.propTypes = {
   service: string.isRequired,
 };
 
+HeadingIndex.defaultProps = {
+  tabIndex: '-1',
+};
+
 export default HeadingIndex;