From e9d67286daf8b1079bce964368ae70df3a65fe6a Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Fri, 16 Oct 2020 15:10:59 +0100 Subject: [PATCH 1/7] Bump major version --- packages/components/psammead-navigation/package-lock.json | 2 +- packages/components/psammead-navigation/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-navigation/package-lock.json b/packages/components/psammead-navigation/package-lock.json index cbd9e90753..960e44ca27 100644 --- a/packages/components/psammead-navigation/package-lock.json +++ b/packages/components/psammead-navigation/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-navigation", - "version": "7.0.3", + "version": "8.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json index a1b9a23cbe..dfc8a09235 100644 --- a/packages/components/psammead-navigation/package.json +++ b/packages/components/psammead-navigation/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-navigation", - "version": "7.0.3", + "version": "8.0.0", "description": "A navigation bar to use on index pages", "main": "dist/index.js", "module": "esm/index.js", From a2a325b3482697a3a5e0d23410061eb0f76ee064 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Fri, 16 Oct 2020 15:11:22 +0100 Subject: [PATCH 2/7] Replace SC peer dependency with Emotion --- packages/components/psammead-navigation/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json index dfc8a09235..3495824015 100644 --- a/packages/components/psammead-navigation/package.json +++ b/packages/components/psammead-navigation/package.json @@ -26,7 +26,7 @@ }, "peerDependencies": { "react": "^16.9.0", - "styled-components": "^4.3.2", + "@emotion/styled": "^10.0.27", "prop-types": "^15.7.2" }, "keywords": [ From edacbbf78336e30b967f130c8e202aeb002f4b99 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Fri, 16 Oct 2020 15:11:40 +0100 Subject: [PATCH 3/7] Add changelog entry --- packages/components/psammead-navigation/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/psammead-navigation/CHANGELOG.md b/packages/components/psammead-navigation/CHANGELOG.md index 65da264c0b..2be3687190 100644 --- a/packages/components/psammead-navigation/CHANGELOG.md +++ b/packages/components/psammead-navigation/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 8.0.0 | [PR#????](https://github.com/bbc/psammead/pull/????) Migrate to Emotion. | | 7.0.3 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-styles, @bbc/psammead-visually-hidden-text | | 7.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations | | 7.0.1 | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles | From 914d9413097b41c6151a223cb3e197888fca3f25 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Fri, 16 Oct 2020 15:27:52 +0100 Subject: [PATCH 4/7] Replace imports --- .../src/DropdownNavigation/index.jsx | 4 ++-- .../src/ScrollableNavigation/index.jsx | 4 ++-- .../components/psammead-navigation/src/index.jsx | 12 ++++++------ .../psammead-navigation/src/index.stories.jsx | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index dce8f509dc..7452b42af4 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -1,5 +1,5 @@ import React, { cloneElement, useRef } from 'react'; -import styled, { css } from 'styled-components'; +import styled from '@emotion/styled'; import { shape, string, bool, func, oneOf, node } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { navigationIcons } from '@bbc/psammead-assets/svgs'; @@ -151,7 +151,7 @@ DropdownLi.defaultProps = { dir: 'ltr', }; -const iconBorder = css` +const iconBorder = ` content: ''; position: absolute; left: 0; diff --git a/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx b/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx index 7f51e7bea3..68a02d14c6 100644 --- a/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from '@emotion/styled'; import { node, oneOf } from 'prop-types'; import { GEL_SPACING_SEXT } from '@bbc/gel-foundations/spacings'; import { @@ -35,7 +35,7 @@ const StyledScrollableNav = styled.div` width: 6rem; } position: absolute; - ${({ dir }) => css` + ${({ dir }) => ` ${dir === 'ltr' ? 'right' : 'left'}: 0; `} bottom: 0; diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx index daa32d99c4..0a0b046ddd 100644 --- a/packages/components/psammead-navigation/src/index.jsx +++ b/packages/components/psammead-navigation/src/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from '@emotion/styled'; import { shape, string, node, bool, oneOf } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { @@ -46,7 +46,7 @@ const StyledUnorderedList = styled.ul` } `; -const ListItemBorder = css` +const ListItemBorder = ` content: ''; position: absolute; left: 0; @@ -72,7 +72,7 @@ const StyledLink = styled.a` ${ListItemBorder} ${({ currentLink }) => currentLink && - css` + ` border-bottom: ${CURRENT_ITEM_HOVER_BORDER} solid ${C_WHITE}; `} } @@ -91,7 +91,7 @@ const StyledListItem = styled.li` @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) { &:last-child { - ${({ dir }) => css` + ${({ dir }) => ` margin-${dir === 'ltr' ? 'right' : 'left'}: ${GEL_SPACING_SEXT}; `} } @@ -206,7 +206,7 @@ const StyledNav = styled.nav` ${({ isOpen }) => `background-color: ${isOpen ? C_EBON : C_POSTBOX};`} ${({ ampOpenClass }) => ampOpenClass && - css` + ` &.${ampOpenClass} { @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) { background-color: ${C_EBON}; @@ -216,7 +216,7 @@ const StyledNav = styled.nav` border-top: 0.0625rem solid ${C_WHITE}; ${StyledListItem} { - ${({ dir }) => css` + ${({ dir }) => ` &::after { ${dir === 'ltr' ? 'left' : 'right'}: 0; } diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 3ff8766e80..115287c082 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/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 { color, select, From ff8ba9679d4408996d278a30a41fb712fd338d1f Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Fri, 16 Oct 2020 15:28:13 +0100 Subject: [PATCH 5/7] Replace .attrs use --- .../src/DropdownNavigation/index.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index 7452b42af4..570c1754f2 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -79,13 +79,17 @@ export const AmpDropdown = styled.div` } `; -export const DropdownUl = styled.ul.attrs({ role: 'list' })` +export const DropdownUl = styled.ul` list-style-type: none; margin: 0; padding: 0 ${GEL_SPACING}; border-bottom: 0.125rem solid ${C_SHADOW}; `; +DropdownUl.defaultProps = { + role: 'list', +}; + const StyledDropdownLi = styled.li` padding: 0.75rem 0; border-bottom: 0.0625rem solid ${C_SHADOW}; @@ -108,10 +112,14 @@ const StyledDropdownLink = styled.a` } `; -const StyledCurrentLink = styled.span.attrs({ role: 'text' })` +const StyledCurrentLink = styled.span` ${({ dir }) => getStyles(dir)} `; +StyledCurrentLink.defaultProps = { + role: 'text', +}; + export const DropdownLi = ({ children, script, From 2560a2879ce36bfa1323bfd7e4948a85b7512441 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Fri, 16 Oct 2020 15:48:17 +0100 Subject: [PATCH 6/7] Update snapshots --- .../__snapshots__/index.test.jsx.snap | 539 ++++++++++-- .../src/__snapshots__/index.test.jsx.snap | 824 ++++++++++++++++-- 2 files changed, 1262 insertions(+), 101 deletions(-) diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap index 00061ae1c7..5575b905c4 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap @@ -1,6 +1,52 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AMP Menu Button should render correctly 1`] = ` +.emotion-2 { + position: relative; + padding: 0; + margin: 0; + background-color: transparent; + border: 0; + float: left; + height: 2.75rem; + width: 2.75rem; +} + +.emotion-2:hover, +.emotion-2:focus { + cursor: pointer; + box-shadow: inset 0 0 0 0.25rem #FFFFFF; +} + +.emotion-2:hover::after, +.emotion-2:focus::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + border: 0.25rem solid #FFFFFF; +} + +@media (min-width:37.5rem) { + .emotion-2 { + display: none; + visibility: hidden; + } +} + +@media (min-width:20rem) { + .emotion-2 { + height: 2.75rem; + width: 2.75rem; + } +} + +.emotion-2 svg { + vertical-align: middle; +} + .emotion-0 { -webkit-clip-path: inset(100%); clip-path: inset(100%); @@ -25,7 +71,7 @@ exports[`AMP Menu Button should render correctly 1`] = `