From 2bb2c9a82c5f4bc601bca235193f6dc6fe0eff95 Mon Sep 17 00:00:00 2001 From: RichardPK Date: Thu, 15 Oct 2020 15:06:57 +0100 Subject: [PATCH 1/4] Version bumps --- packages/components/psammead-bulleted-list/CHANGELOG.md | 7 ++++--- .../components/psammead-bulleted-list/package-lock.json | 2 +- packages/components/psammead-bulleted-list/package.json | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md index c47e838580..34689cdde9 100644 --- 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#??](https://github.com/bbc/psammead/pull/???) 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 index cf77490875..6e549f56bb 100644 --- a/packages/components/psammead-bulleted-list/package-lock.json +++ b/packages/components/psammead-bulleted-list/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-bulleted-list", - "version": "2.0.3", + "version": "3.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-bulleted-list/package.json b/packages/components/psammead-bulleted-list/package.json index 9664feba82..b18ab54123 100644 --- 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, From 840bc5633f1ff57dd1ff4f3683026bcf988339ba Mon Sep 17 00:00:00 2001 From: RichardPK Date: Thu, 15 Oct 2020 15:26:44 +0100 Subject: [PATCH 2/4] Migrate attrs --- .../psammead-bulleted-list/CHANGELOG.md | 2 +- .../psammead-bulleted-list/package.json | 2 +- .../psammead-bulleted-list/src/index.jsx | 19 +++++++++++-------- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/components/psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md index 34689cdde9..ef4a57db37 100644 --- a/packages/components/psammead-bulleted-list/CHANGELOG.md +++ b/packages/components/psammead-bulleted-list/CHANGELOG.md @@ -2,7 +2,7 @@ | Version | Description | | ------------- | --------------------------------------------------------------------------------------------------------------------- | -| 3.0.0 | [PR#??](https://github.com/bbc/psammead/pull/???) Migrate to emotion | +| 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-bulleted-list/package.json b/packages/components/psammead-bulleted-list/package.json index b18ab54123..84aa0ab236 100644 --- a/packages/components/psammead-bulleted-list/package.json +++ b/packages/components/psammead-bulleted-list/package.json @@ -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/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index 14d23c0127..4207ba2974 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -1,4 +1,4 @@ -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'; @@ -6,9 +6,7 @@ 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; From f3259b7e51c81254da2b80ed8818bb742b6ad0e2 Mon Sep 17 00:00:00 2001 From: RichardPK Date: Thu, 15 Oct 2020 15:37:27 +0100 Subject: [PATCH 3/4] Heading index migrated --- .../components/psammead-heading-index/CHANGELOG.md | 1 + .../psammead-heading-index/package-lock.json | 2 +- .../components/psammead-heading-index/package.json | 4 ++-- .../components/psammead-heading-index/src/index.jsx | 10 ++++++---- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/components/psammead-heading-index/CHANGELOG.md b/packages/components/psammead-heading-index/CHANGELOG.md index 8955d0602a..a1dee4b5cd 100644 --- a/packages/components/psammead-heading-index/CHANGELOG.md +++ b/packages/components/psammead-heading-index/CHANGELOG.md @@ -3,6 +3,7 @@ | 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 index 26253f1c58..00bc892300 100644 --- a/packages/components/psammead-heading-index/package-lock.json +++ b/packages/components/psammead-heading-index/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-heading-index", - "version": "2.0.3", + "version": "3.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-heading-index/package.json b/packages/components/psammead-heading-index/package.json index a1aeae1d00..d0e4e9de5c 100644 --- 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/index.jsx b/packages/components/psammead-heading-index/src/index.jsx index 95f1aabbb5..00e5bccdb8 100644 --- 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; From 4a85e352d55fae9176779380ab31e20eb8231010 Mon Sep 17 00:00:00 2001 From: RichardPK Date: Thu, 15 Oct 2020 15:45:57 +0100 Subject: [PATCH 4/4] Updated snapshots --- .../src/__snapshots__/index.test.jsx.snap | 102 ++++++++++++++++-- .../src/__snapshots__/index.test.jsx.snap | 52 ++++++++- 2 files changed, 144 insertions(+), 10 deletions(-) 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 index bd53e4a0f8..657856b713 100644 --- 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; +} +
  • First item on the list
  • Second item on the list
  • 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; +} +
    • العنصر الأول في القائمة
    • البند الثاني في القائمة
    • عنصر القائمة النهائية 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 index f804388329..b3ec9bcdc6 100644 --- 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; + } +} +

      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; + } +} +

      هذا عنوان الصفحة