From 61e02c35f558f2757e36c387df15c7f3d8986cdc Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Mon, 11 Nov 2019 15:52:54 +0000 Subject: [PATCH 01/77] Import psammead-assets icons --- packages/components/psammead-navigation/package-lock.json | 5 +++++ packages/components/psammead-navigation/package.json | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-navigation/package-lock.json b/packages/components/psammead-navigation/package-lock.json index 61fcc30525..bdbc941505 100644 --- a/packages/components/psammead-navigation/package-lock.json +++ b/packages/components/psammead-navigation/package-lock.json @@ -9,6 +9,11 @@ "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.4.1.tgz", "integrity": "sha512-twwL0UcFrvq9w3O92PvkJRo+wThLqWLrxgFxxn8kwR1pni1wS6lhr3IwUPym4juS2hlTy/5C0/QiycB05IQhLg==" }, + "@bbc/psammead-assets": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-assets/-/psammead-assets-2.8.0.tgz", + "integrity": "sha512-Q2vgdVm4DAc9BPFJzziUJHI+In9285TPvuQrCsFbIgZOfTMLri4QdiQXSgYFEp0mLxD79+wHkRlaYAFL7TZ3VQ==" + }, "@bbc/psammead-styles": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-4.1.0.tgz", diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json index dc7d1754a7..4cd2e2d4ef 100644 --- a/packages/components/psammead-navigation/package.json +++ b/packages/components/psammead-navigation/package.json @@ -21,7 +21,8 @@ "dependencies": { "@bbc/gel-foundations": "^3.4.1", "@bbc/psammead-styles": "^4.1.0", - "@bbc/psammead-visually-hidden-text": "^1.2.3" + "@bbc/psammead-visually-hidden-text": "^1.2.3", + "@bbc/psammead-assets": "^2.8.0" }, "peerDependencies": { "react": "^16.9.0", From 4bcfa4f34b90326ebf514cf99d3e161312962e3d Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Mon, 11 Nov 2019 15:54:20 +0000 Subject: [PATCH 02/77] Add menu open button --- .../psammead-navigation/src/index.jsx | 40 +++++++++++++++++++ .../psammead-navigation/src/index.stories.jsx | 24 ++++++++++- 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx index 919c0eae39..b84a395c7c 100644 --- a/packages/components/psammead-navigation/src/index.jsx +++ b/packages/components/psammead-navigation/src/index.jsx @@ -2,6 +2,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { shape, string, node, bool, oneOf } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; +import { navigationIcons } from '@bbc/psammead-assets/svgs'; import { C_WHITE, C_POSTBOX, C_GHOST } from '@bbc/psammead-styles/colours'; import { GEL_SPACING_HLF, @@ -10,6 +11,7 @@ import { } from '@bbc/gel-foundations/spacings'; import { GEL_GROUP_1_SCREEN_WIDTH_MAX, + GEL_GROUP_3_SCREEN_WIDTH_MIN, GEL_GROUP_5_SCREEN_WIDTH_MIN, } from '@bbc/gel-foundations/breakpoints'; import { getPica } from '@bbc/gel-foundations/typography'; @@ -22,6 +24,44 @@ const CURRENT_ITEM_HOVER_BORDER = '0.3125rem'; // 5px /* White with 30% transparency over #B80000 */ const BORDER_COLOR = '#eab3b3'; +const HamburgerMenu = styled.button` + width: 44px; + height: 44px; + background-color: ${C_POSTBOX}; + padding: 0; + margin: 0; + border: 0; + + &:hover, + &:focus { + box-shadow: inset 0 0 0 0.25rem ${C_WHITE}; + } + + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + visibility: hidden; + } +`; + +export const AmpHamburgerMenu = (announcedText, action, isMenuOpen) => ( + + {navigationIcons.hamburger} + +); + +export const CanonicalHamburgerMenu = (announcedText, onClick, isMenuOpen) => ( + + {navigationIcons.hamburger} + +); + const NavWrapper = styled.div` position: relative; max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}; diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 431985a3d6..2928ced411 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; +import styled from 'styled-components'; import { color, select, @@ -12,7 +13,11 @@ import * as svgs from '@bbc/psammead-assets/svgs'; import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; import Brand from '@bbc/psammead-brand'; import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; -import Navigation, { NavigationUl, NavigationLi } from './index'; +import Navigation, { + NavigationUl, + NavigationLi, + CanonicalHamburgerMenu, +} from './index'; import igboNavData from '../testHelpers/igbo'; import pidginNavData from '../testHelpers/pidgin'; import yorubaNavData from '../testHelpers/yoruba'; @@ -44,6 +49,11 @@ const navStoriesData = [ }, ]; +const BackgroundContainer = styled.div` + background-color: black; + height: 100vh; +`; + const inputs = () => { // capitalization is only for presentation purpose on the knob const options = Object.keys(svgs) @@ -148,6 +158,14 @@ const navigationStory = ( ); +const hamburgerStory = () => { + return ( + + + + ); +}; + const storiesWithoutBrand = storiesOf( 'Components|Navigation/without brand', module, @@ -166,6 +184,10 @@ navStoriesData.map(item => { ); }); +storiesWithoutBrand.add('Hamburger menu', hamburgerStory, { + notes, +}); + const storiesWithBrand = storiesOf('Components|Navigation/with brand', module) .addDecorator(withKnobs) .addDecorator(withServicesKnob()); From 5f09a5d908017f3bfc8ea9642a9734933e7394d6 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Mon, 11 Nov 2019 15:57:52 +0000 Subject: [PATCH 03/77] Bump up component version --- packages/components/psammead-navigation/CHANGELOG.md | 1 + packages/components/psammead-navigation/package-lock.json | 2 +- packages/components/psammead-navigation/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-navigation/CHANGELOG.md b/packages/components/psammead-navigation/CHANGELOG.md index 4e69ce591b..c6f529bedc 100644 --- a/packages/components/psammead-navigation/CHANGELOG.md +++ b/packages/components/psammead-navigation/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 5.0.0-alpha.1 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Add dropdown menu with a hamburger button | | 4.0.0-alpha.1 | [PR#2563](https://github.com/bbc/psammead/pull/2563) Remove skip to content link | | 3.1.0-alpha.1 | [PR#2567](https://github.com/bbc/psammead/pull/2567) Add `C_WHITE` top border to `Navigation` | | 3.0.5 | [PR#2519](https://github.com/bbc/psammead/pull/2519) Talos - Bump Dependencies - @bbc/psammead-styles | diff --git a/packages/components/psammead-navigation/package-lock.json b/packages/components/psammead-navigation/package-lock.json index bdbc941505..86efd9b7ed 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": "4.0.0-alpha.1", + "version": "5.0.0-alpha.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json index 4cd2e2d4ef..ee1cefaf7d 100644 --- a/packages/components/psammead-navigation/package.json +++ b/packages/components/psammead-navigation/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-navigation", - "version": "4.0.0-alpha.1", + "version": "5.0.0-alpha.1", "description": "A navigation bar to use on index pages", "main": "dist/index.js", "module": "esm/index.js", From 0827fabdba84ec8d252029ae6569b0fac66ff0ae Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 12 Nov 2019 12:56:14 +0000 Subject: [PATCH 04/77] Add dropdown navigation --- .../psammead-navigation/src/index.jsx | 170 +++++++++++++++++- 1 file changed, 162 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx index b84a395c7c..d9519e5aa3 100644 --- a/packages/components/psammead-navigation/src/index.jsx +++ b/packages/components/psammead-navigation/src/index.jsx @@ -3,7 +3,13 @@ import styled, { css } from 'styled-components'; import { shape, string, node, bool, oneOf } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { navigationIcons } from '@bbc/psammead-assets/svgs'; -import { C_WHITE, C_POSTBOX, C_GHOST } from '@bbc/psammead-styles/colours'; +import { + C_WHITE, + C_POSTBOX, + C_GHOST, + C_EBON, + C_SHADOW, +} from '@bbc/psammead-styles/colours'; import { GEL_SPACING_HLF, GEL_SPACING, @@ -24,9 +30,156 @@ const CURRENT_ITEM_HOVER_BORDER = '0.3125rem'; // 5px /* White with 30% transparency over #B80000 */ const BORDER_COLOR = '#eab3b3'; -const HamburgerMenu = styled.button` - width: 44px; - height: 44px; +const DropdownWrapper = styled.div` + background-color: ${C_EBON}; + width: 100vw; + + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + visibility: hidden; + } +`; + +const CrossButton = styled.button` + background-color: ${C_EBON}; + width: 2.75rem; + height: 2.75rem; + padding: 0; + margin: 0; + border: 0; + + &:hover, + &:focus { + box-shadow: inset 0 0 0 0.25rem ${C_WHITE}; + cursor: pointer; + } +`; + +const DropdownUl = styled.ul` + list-style-type: none; + margin: 0; + padding-right: ${GEL_SPACING}; + padding-left: ${GEL_SPACING}; + border-bottom: 0.125rem solid ${C_SHADOW}; +`; + +const DropdownLi = styled.li` + padding-top: 0.75rem; + padding-bottom: 0.75rem; + border-bottom: 0.0625rem solid ${C_SHADOW}; + &:last-child { + padding-bottom: ${GEL_SPACING_DBL}; + border: 0; + } +`; + +const StyledDropdownLink = styled.a` + ${({ script }) => script && getPica(script)}; + ${({ service }) => service && getSansRegular(service)} + color: ${C_WHITE}; + + &:hover, + &:focus { + text-decoration: underline; + cursor: pointer; + } +`; + +const StyledCurrentLink = styled.span` + ${({ dir }) => + dir === 'ltr' + ? `border-left: ${GEL_SPACING_HLF} solid ${C_WHITE}; + padding-left: ${GEL_SPACING};` + : `border-right: ${GEL_SPACING_HLF} solid ${C_WHITE}; + padding-right: ${GEL_SPACING};`} +`; + +const CurrentDropdownLink = ({ children, currentPageText, dir }) => ( + <> + + {currentPageText}, + {children} + + +); + +export const DropdownNavigationLi = ({ + children, + script, + currentPageText, + active, + service, + url, + dir, +}) => ( + + {active && currentPageText ? ( + + + {children} + + + ) : ( + + {children} + + )} + +); + +export const AmpDropdown = ({ closeAction, children }) => ( + + {navigationIcons.cross} + {children} + +); + +export const CanonicalDropdown = ({ onClose, children }) => ( + + {navigationIcons.cross} + {children} + +); + +DropdownNavigationLi.propTypes = { + children: node.isRequired, + url: string.isRequired, + script: shape(scriptPropType).isRequired, + active: bool, + currentPageText: string, + service: string.isRequired, + dir: oneOf(['ltr', 'rtl']), +}; + +DropdownNavigationLi.defaultProps = { + active: false, + currentPageText: null, + dir: 'ltr', +}; + +CurrentDropdownLink.propTypes = { + children: string.isRequired, + currentPageText: string, + dir: oneOf(['ltr', 'rtl']), +}; + +CurrentDropdownLink.defaultProps = { + currentPageText: null, + dir: 'ltr', +}; + +AmpDropdown.propTypes = { + children: string.isRequired, + closeAction: node.isRequired, +}; + +CanonicalDropdown.propTypes = { + children: string.isRequired, + onClose: node.isRequired, +}; + +const HamburgerButton = styled.button` + width: 2.75rem; + height: 2.75rem; background-color: ${C_POSTBOX}; padding: 0; margin: 0; @@ -35,6 +188,7 @@ const HamburgerMenu = styled.button` &:hover, &:focus { box-shadow: inset 0 0 0 0.25rem ${C_WHITE}; + cursor: pointer; } @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { @@ -43,23 +197,23 @@ const HamburgerMenu = styled.button` `; export const AmpHamburgerMenu = (announcedText, action, isMenuOpen) => ( - {navigationIcons.hamburger} - + ); export const CanonicalHamburgerMenu = (announcedText, onClick, isMenuOpen) => ( - {navigationIcons.hamburger} - + ); const NavWrapper = styled.div` From 57c54408133bd31dde7b4e6cc58e1aef601f404c Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 12 Nov 2019 12:56:37 +0000 Subject: [PATCH 05/77] Add story for dropdown navigation --- .../psammead-navigation/src/index.stories.jsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 2928ced411..60c1dd8801 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -17,6 +17,8 @@ import Navigation, { NavigationUl, NavigationLi, CanonicalHamburgerMenu, + CanonicalDropdown, + DropdownNavigationLi, } from './index'; import igboNavData from '../testHelpers/igbo'; import pidginNavData from '../testHelpers/pidgin'; @@ -166,6 +168,28 @@ const hamburgerStory = () => { ); }; +const dropdownStory = () => ({ dir, script, service }) => ( + + {pidginNavData.map((item, index) => { + const active = index === 0; + const { title, url } = item; + + return ( + + {title} + + ); + })} + +); + const storiesWithoutBrand = storiesOf( 'Components|Navigation/without brand', module, @@ -188,6 +212,10 @@ storiesWithoutBrand.add('Hamburger menu', hamburgerStory, { notes, }); +storiesWithoutBrand.add('Dropdown menu', dropdownStory(), { + notes, +}); + const storiesWithBrand = storiesOf('Components|Navigation/with brand', module) .addDecorator(withKnobs) .addDecorator(withServicesKnob()); From 60abd2ededbe2fe4a29dc4df01365a236a48d3a9 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 12 Nov 2019 14:23:34 +0000 Subject: [PATCH 06/77] Update PR version in changelog --- packages/components/psammead-navigation/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-navigation/CHANGELOG.md b/packages/components/psammead-navigation/CHANGELOG.md index c6f529bedc..56da663871 100644 --- a/packages/components/psammead-navigation/CHANGELOG.md +++ b/packages/components/psammead-navigation/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 5.0.0-alpha.1 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Add dropdown menu with a hamburger button | +| 5.0.0-alpha.1 | [PR#2613](https://github.com/bbc/psammead/pull/2613) Add dropdown menu with a hamburger button | | 4.0.0-alpha.1 | [PR#2563](https://github.com/bbc/psammead/pull/2563) Remove skip to content link | | 3.1.0-alpha.1 | [PR#2567](https://github.com/bbc/psammead/pull/2567) Add `C_WHITE` top border to `Navigation` | | 3.0.5 | [PR#2519](https://github.com/bbc/psammead/pull/2519) Talos - Bump Dependencies - @bbc/psammead-styles | From c76e77acf469415ab94db29a9923a1074c22234d Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 12 Nov 2019 15:35:38 +0000 Subject: [PATCH 07/77] Small refactoring tweaks --- packages/components/psammead-navigation/src/index.jsx | 5 +++-- .../components/psammead-navigation/src/index.stories.jsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx index d9519e5aa3..e45874c445 100644 --- a/packages/components/psammead-navigation/src/index.jsx +++ b/packages/components/psammead-navigation/src/index.jsx @@ -35,7 +35,7 @@ const DropdownWrapper = styled.div` width: 100vw; @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { - visibility: hidden; + display: none; } `; @@ -66,6 +66,7 @@ const DropdownLi = styled.li` padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom: 0.0625rem solid ${C_SHADOW}; + &:last-child { padding-bottom: ${GEL_SPACING_DBL}; border: 0; @@ -192,7 +193,7 @@ const HamburgerButton = styled.button` } @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { - visibility: hidden; + display: none; } `; diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 60c1dd8801..4279417c10 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -52,7 +52,7 @@ const navStoriesData = [ ]; const BackgroundContainer = styled.div` - background-color: black; + background-color: #000000; height: 100vh; `; From 67ed8514048ba6f929f1e7194fdc1cbdee80a6da Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 12 Nov 2019 16:41:54 +0000 Subject: [PATCH 08/77] Add snapshot testing for dropdown navigation --- .../src/__snapshots__/index.test.jsx.snap | 223 ++++++++++++++++++ .../psammead-navigation/src/index.test.jsx | 32 ++- 2 files changed, 254 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap index 3cc2e1f380..a5ca61303b 100644 --- a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap @@ -1,5 +1,228 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Navigation dropdown should render correctly 1`] = ` +.c7 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.c2 { + color: #fff; + fill: currentColor; +} + +.c0 { + background-color: #222222; + width: 100vw; +} + +.c1 { + background-color: #222222; + width: 2.75rem; + height: 2.75rem; + padding: 0; + margin: 0; + border: 0; +} + +.c1:hover, +.c1:focus { + box-shadow: inset 0 0 0 0.25rem #FFFFFF; + cursor: pointer; +} + +.c3 { + list-style-type: none; + margin: 0; + padding-right: 0.5rem; + padding-left: 0.5rem; + border-bottom: 0.125rem solid #3F3F42; +} + +.c4 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + border-bottom: 0.0625rem solid #3F3F42; +} + +.c4:last-child { + padding-bottom: 1rem; + border: 0; +} + +.c5 { + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + color: #FFFFFF; +} + +.c5:hover, +.c5:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + cursor: pointer; +} + +.c6 { + border-left: 0.25rem solid #FFFFFF; + padding-left: 0.5rem; +} + +@media (min-width:37.5rem) { + .c0 { + display: none; + } +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c5 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:37.5rem) { + .c5 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +
+ + +
+`; + exports[`Navigation should render correctly 1`] = ` .c7 { -webkit-clip-path: inset(100%); diff --git a/packages/components/psammead-navigation/src/index.test.jsx b/packages/components/psammead-navigation/src/index.test.jsx index cd67c5b2cf..78d6ec56eb 100644 --- a/packages/components/psammead-navigation/src/index.test.jsx +++ b/packages/components/psammead-navigation/src/index.test.jsx @@ -2,8 +2,14 @@ import React from 'react'; import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; import { render } from '@testing-library/react'; import { latin } from '@bbc/gel-foundations/scripts'; -import Navigation, { NavigationUl, NavigationLi } from './index'; +import Navigation, { + NavigationUl, + NavigationLi, + CanonicalDropdown, + DropdownNavigationLi, +} from './index'; import igboNavData from '../testHelpers/igbo'; +import pidginNavData from '../testHelpers/pidgin'; describe('Navigation', () => { shouldMatchSnapshot( @@ -33,6 +39,30 @@ describe('Navigation', () => { ); }); +describe('Navigation', () => { + shouldMatchSnapshot( + 'dropdown should render correctly', + + {pidginNavData.map((item, index) => { + const active = index === 0; + const { title, url } = item; + + return ( + + {title} + + ); + })} + , + ); +}); + describe('Assertions', () => { it('should add extra props passed to the NavigationLi link', () => { const { container } = render( From 0bb78fef6f0be529bc52b97b6fb72c35063d6ee1 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 13 Nov 2019 10:09:21 +0000 Subject: [PATCH 09/77] Move dropdown navigation to a subfolder --- .../__snapshots__/index.test.jsx.snap | 224 ++++++++++++++++++ .../src/Dropdown/index.jsx | 207 ++++++++++++++++ .../src/Dropdown/index.test.jsx | 29 +++ .../src/__snapshots__/index.test.jsx.snap | 223 ----------------- .../psammead-navigation/src/index.jsx | 197 +-------------- .../psammead-navigation/src/index.stories.jsx | 8 +- .../psammead-navigation/src/index.test.jsx | 32 +-- 7 files changed, 466 insertions(+), 454 deletions(-) create mode 100644 packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap create mode 100644 packages/components/psammead-navigation/src/Dropdown/index.jsx create mode 100644 packages/components/psammead-navigation/src/Dropdown/index.test.jsx diff --git a/packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap new file mode 100644 index 0000000000..61bb0a937c --- /dev/null +++ b/packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap @@ -0,0 +1,224 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Navigation dropdown should render correctly 1`] = ` +.c7 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.c2 { + color: #fff; + fill: currentColor; +} + +.c0 { + background-color: #222222; + width: 100vw; +} + +.c1 { + background-color: #222222; + width: 2.75rem; + height: 2.75rem; + padding: 0; + margin: 0; + border: 0; +} + +.c1:hover, +.c1:focus { + box-shadow: inset 0 0 0 0.25rem #FFFFFF; + cursor: pointer; +} + +.c3 { + list-style-type: none; + margin: 0; + padding-right: 0.5rem; + padding-left: 0.5rem; + border-bottom: 0.125rem solid #3F3F42; +} + +.c4 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + border-bottom: 0.0625rem solid #3F3F42; +} + +.c4:last-child { + padding-bottom: 1rem; + border: 0; +} + +.c5 { + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + color: #FFFFFF; +} + +.c5:hover, +.c5:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + cursor: pointer; +} + +.c6 { + border-left: 0.25rem solid #FFFFFF; + padding-left: 0.5rem; +} + +@media (min-width:37.5rem) { + .c0 { + display: none; + } +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c5 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:37.5rem) { + .c5 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +
+ + +
+`; diff --git a/packages/components/psammead-navigation/src/Dropdown/index.jsx b/packages/components/psammead-navigation/src/Dropdown/index.jsx new file mode 100644 index 0000000000..580fd6a5b9 --- /dev/null +++ b/packages/components/psammead-navigation/src/Dropdown/index.jsx @@ -0,0 +1,207 @@ +import React from 'react'; +import styled from 'styled-components'; +import { shape, string, node, bool, oneOf } from 'prop-types'; +import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; +import { navigationIcons } from '@bbc/psammead-assets/svgs'; +import { + C_WHITE, + C_POSTBOX, + C_EBON, + C_SHADOW, +} from '@bbc/psammead-styles/colours'; +import { + GEL_SPACING_HLF, + GEL_SPACING, + GEL_SPACING_DBL, +} from '@bbc/gel-foundations/spacings'; +import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; +import { getPica } from '@bbc/gel-foundations/typography'; +import { scriptPropType } from '@bbc/gel-foundations/prop-types'; +import { getSansRegular } from '@bbc/psammead-styles/font-styles'; + +const DropdownWrapper = styled.div` + background-color: ${C_EBON}; + width: 100vw; + + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + display: none; + } +`; + +const CrossButton = styled.button` + background-color: ${C_EBON}; + width: 2.75rem; + height: 2.75rem; + padding: 0; + margin: 0; + border: 0; + + &:hover, + &:focus { + box-shadow: inset 0 0 0 0.25rem ${C_WHITE}; + cursor: pointer; + } +`; + +const DropdownUl = styled.ul` + list-style-type: none; + margin: 0; + padding-right: ${GEL_SPACING}; + padding-left: ${GEL_SPACING}; + border-bottom: 0.125rem solid ${C_SHADOW}; +`; + +const DropdownLi = styled.li` + padding-top: 0.75rem; + padding-bottom: 0.75rem; + border-bottom: 0.0625rem solid ${C_SHADOW}; + + &:last-child { + padding-bottom: ${GEL_SPACING_DBL}; + border: 0; + } +`; + +const StyledDropdownLink = styled.a` + ${({ script }) => script && getPica(script)}; + ${({ service }) => service && getSansRegular(service)} + color: ${C_WHITE}; + + &:hover, + &:focus { + text-decoration: underline; + cursor: pointer; + } +`; + +const StyledCurrentLink = styled.span` + ${({ dir }) => + dir === 'ltr' + ? `border-left: ${GEL_SPACING_HLF} solid ${C_WHITE}; + padding-left: ${GEL_SPACING};` + : `border-right: ${GEL_SPACING_HLF} solid ${C_WHITE}; + padding-right: ${GEL_SPACING};`} +`; + +const CurrentDropdownLink = ({ children, currentPageText, dir }) => ( + <> + + {currentPageText}, + {children} + + +); + +export const DropdownNavigationLi = ({ + children, + script, + currentPageText, + active, + service, + url, + dir, +}) => ( + + {active && currentPageText ? ( + + + {children} + + + ) : ( + + {children} + + )} + +); + +export const AmpDropdown = ({ closeAction, children }) => ( + + {navigationIcons.cross} + {children} + +); + +export const CanonicalDropdown = ({ onClose, children }) => ( + + {navigationIcons.cross} + {children} + +); + +DropdownNavigationLi.propTypes = { + children: node.isRequired, + url: string.isRequired, + script: shape(scriptPropType).isRequired, + active: bool, + currentPageText: string, + service: string.isRequired, + dir: oneOf(['ltr', 'rtl']), +}; + +DropdownNavigationLi.defaultProps = { + active: false, + currentPageText: null, + dir: 'ltr', +}; + +CurrentDropdownLink.propTypes = { + children: string.isRequired, + currentPageText: string, + dir: oneOf(['ltr', 'rtl']), +}; + +CurrentDropdownLink.defaultProps = { + currentPageText: null, + dir: 'ltr', +}; + +AmpDropdown.propTypes = { + children: string.isRequired, + closeAction: node.isRequired, +}; + +CanonicalDropdown.propTypes = { + children: string.isRequired, + onClose: node.isRequired, +}; + +const HamburgerButton = styled.button` + width: 2.75rem; + height: 2.75rem; + background-color: ${C_POSTBOX}; + padding: 0; + margin: 0; + border: 0; + + &:hover, + &:focus { + box-shadow: inset 0 0 0 0.25rem ${C_WHITE}; + cursor: pointer; + } + + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + display: none; + } +`; + +export const AmpHamburgerMenu = (announcedText, action, isMenuOpen) => ( + + {navigationIcons.hamburger} + +); + +export const CanonicalHamburgerMenu = (announcedText, onClick, isMenuOpen) => ( + + {navigationIcons.hamburger} + +); diff --git a/packages/components/psammead-navigation/src/Dropdown/index.test.jsx b/packages/components/psammead-navigation/src/Dropdown/index.test.jsx new file mode 100644 index 0000000000..0cc000c494 --- /dev/null +++ b/packages/components/psammead-navigation/src/Dropdown/index.test.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import { latin } from '@bbc/gel-foundations/scripts'; +import { CanonicalDropdown, DropdownNavigationLi } from './index'; +import pidginNavData from '../../testHelpers/pidgin'; + +describe('Navigation', () => { + shouldMatchSnapshot( + 'dropdown should render correctly', + + {pidginNavData.map((item, index) => { + const active = index === 0; + const { title, url } = item; + + return ( + + {title} + + ); + })} + , + ); +}); diff --git a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap index a5ca61303b..3cc2e1f380 100644 --- a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap @@ -1,228 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Navigation dropdown should render correctly 1`] = ` -.c7 { - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - -webkit-clip: rect(1px,1px,1px,1px); - clip: rect(1px,1px,1px,1px); - height: 1px; - overflow: hidden; - position: absolute; - width: 1px; - margin: 0; -} - -.c2 { - color: #fff; - fill: currentColor; -} - -.c0 { - background-color: #222222; - width: 100vw; -} - -.c1 { - background-color: #222222; - width: 2.75rem; - height: 2.75rem; - padding: 0; - margin: 0; - border: 0; -} - -.c1:hover, -.c1:focus { - box-shadow: inset 0 0 0 0.25rem #FFFFFF; - cursor: pointer; -} - -.c3 { - list-style-type: none; - margin: 0; - padding-right: 0.5rem; - padding-left: 0.5rem; - border-bottom: 0.125rem solid #3F3F42; -} - -.c4 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - border-bottom: 0.0625rem solid #3F3F42; -} - -.c4:last-child { - padding-bottom: 1rem; - border: 0; -} - -.c5 { - font-size: 0.9375rem; - line-height: 1.25rem; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; - color: #FFFFFF; -} - -.c5:hover, -.c5:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - cursor: pointer; -} - -.c6 { - border-left: 0.25rem solid #FFFFFF; - padding-left: 0.5rem; -} - -@media (min-width:37.5rem) { - .c0 { - display: none; - } -} - -@media (min-width:20rem) and (max-width:37.4375rem) { - .c5 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -@media (min-width:37.5rem) { - .c5 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -
- - -
-`; - exports[`Navigation should render correctly 1`] = ` .c7 { -webkit-clip-path: inset(100%); diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx index e45874c445..919c0eae39 100644 --- a/packages/components/psammead-navigation/src/index.jsx +++ b/packages/components/psammead-navigation/src/index.jsx @@ -2,14 +2,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { shape, string, node, bool, oneOf } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; -import { navigationIcons } from '@bbc/psammead-assets/svgs'; -import { - C_WHITE, - C_POSTBOX, - C_GHOST, - C_EBON, - C_SHADOW, -} from '@bbc/psammead-styles/colours'; +import { C_WHITE, C_POSTBOX, C_GHOST } from '@bbc/psammead-styles/colours'; import { GEL_SPACING_HLF, GEL_SPACING, @@ -17,7 +10,6 @@ import { } from '@bbc/gel-foundations/spacings'; import { GEL_GROUP_1_SCREEN_WIDTH_MAX, - GEL_GROUP_3_SCREEN_WIDTH_MIN, GEL_GROUP_5_SCREEN_WIDTH_MIN, } from '@bbc/gel-foundations/breakpoints'; import { getPica } from '@bbc/gel-foundations/typography'; @@ -30,193 +22,6 @@ const CURRENT_ITEM_HOVER_BORDER = '0.3125rem'; // 5px /* White with 30% transparency over #B80000 */ const BORDER_COLOR = '#eab3b3'; -const DropdownWrapper = styled.div` - background-color: ${C_EBON}; - width: 100vw; - - @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { - display: none; - } -`; - -const CrossButton = styled.button` - background-color: ${C_EBON}; - width: 2.75rem; - height: 2.75rem; - padding: 0; - margin: 0; - border: 0; - - &:hover, - &:focus { - box-shadow: inset 0 0 0 0.25rem ${C_WHITE}; - cursor: pointer; - } -`; - -const DropdownUl = styled.ul` - list-style-type: none; - margin: 0; - padding-right: ${GEL_SPACING}; - padding-left: ${GEL_SPACING}; - border-bottom: 0.125rem solid ${C_SHADOW}; -`; - -const DropdownLi = styled.li` - padding-top: 0.75rem; - padding-bottom: 0.75rem; - border-bottom: 0.0625rem solid ${C_SHADOW}; - - &:last-child { - padding-bottom: ${GEL_SPACING_DBL}; - border: 0; - } -`; - -const StyledDropdownLink = styled.a` - ${({ script }) => script && getPica(script)}; - ${({ service }) => service && getSansRegular(service)} - color: ${C_WHITE}; - - &:hover, - &:focus { - text-decoration: underline; - cursor: pointer; - } -`; - -const StyledCurrentLink = styled.span` - ${({ dir }) => - dir === 'ltr' - ? `border-left: ${GEL_SPACING_HLF} solid ${C_WHITE}; - padding-left: ${GEL_SPACING};` - : `border-right: ${GEL_SPACING_HLF} solid ${C_WHITE}; - padding-right: ${GEL_SPACING};`} -`; - -const CurrentDropdownLink = ({ children, currentPageText, dir }) => ( - <> - - {currentPageText}, - {children} - - -); - -export const DropdownNavigationLi = ({ - children, - script, - currentPageText, - active, - service, - url, - dir, -}) => ( - - {active && currentPageText ? ( - - - {children} - - - ) : ( - - {children} - - )} - -); - -export const AmpDropdown = ({ closeAction, children }) => ( - - {navigationIcons.cross} - {children} - -); - -export const CanonicalDropdown = ({ onClose, children }) => ( - - {navigationIcons.cross} - {children} - -); - -DropdownNavigationLi.propTypes = { - children: node.isRequired, - url: string.isRequired, - script: shape(scriptPropType).isRequired, - active: bool, - currentPageText: string, - service: string.isRequired, - dir: oneOf(['ltr', 'rtl']), -}; - -DropdownNavigationLi.defaultProps = { - active: false, - currentPageText: null, - dir: 'ltr', -}; - -CurrentDropdownLink.propTypes = { - children: string.isRequired, - currentPageText: string, - dir: oneOf(['ltr', 'rtl']), -}; - -CurrentDropdownLink.defaultProps = { - currentPageText: null, - dir: 'ltr', -}; - -AmpDropdown.propTypes = { - children: string.isRequired, - closeAction: node.isRequired, -}; - -CanonicalDropdown.propTypes = { - children: string.isRequired, - onClose: node.isRequired, -}; - -const HamburgerButton = styled.button` - width: 2.75rem; - height: 2.75rem; - background-color: ${C_POSTBOX}; - padding: 0; - margin: 0; - border: 0; - - &:hover, - &:focus { - box-shadow: inset 0 0 0 0.25rem ${C_WHITE}; - cursor: pointer; - } - - @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { - display: none; - } -`; - -export const AmpHamburgerMenu = (announcedText, action, isMenuOpen) => ( - - {navigationIcons.hamburger} - -); - -export const CanonicalHamburgerMenu = (announcedText, onClick, isMenuOpen) => ( - - {navigationIcons.hamburger} - -); - const NavWrapper = styled.div` position: relative; max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}; diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 4279417c10..99ca3f5dd1 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -13,13 +13,12 @@ import * as svgs from '@bbc/psammead-assets/svgs'; import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; import Brand from '@bbc/psammead-brand'; import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; -import Navigation, { - NavigationUl, - NavigationLi, +import Navigation, { NavigationUl, NavigationLi } from './index'; +import { CanonicalHamburgerMenu, CanonicalDropdown, DropdownNavigationLi, -} from './index'; +} from './Dropdown'; import igboNavData from '../testHelpers/igbo'; import pidginNavData from '../testHelpers/pidgin'; import yorubaNavData from '../testHelpers/yoruba'; @@ -178,6 +177,7 @@ const dropdownStory = () => ({ dir, script, service }) => ( { shouldMatchSnapshot( @@ -39,30 +33,6 @@ describe('Navigation', () => { ); }); -describe('Navigation', () => { - shouldMatchSnapshot( - 'dropdown should render correctly', - - {pidginNavData.map((item, index) => { - const active = index === 0; - const { title, url } = item; - - return ( - - {title} - - ); - })} - , - ); -}); - describe('Assertions', () => { it('should add extra props passed to the NavigationLi link', () => { const { container } = render( From 764cafe33797e732781ba2f65e10b85a25653442 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 13 Nov 2019 14:42:24 +0000 Subject: [PATCH 10/77] Refactoring for screen readers --- .../src/Dropdown/index.jsx | 134 ++++++++++-------- 1 file changed, 71 insertions(+), 63 deletions(-) diff --git a/packages/components/psammead-navigation/src/Dropdown/index.jsx b/packages/components/psammead-navigation/src/Dropdown/index.jsx index 580fd6a5b9..19a5d16461 100644 --- a/packages/components/psammead-navigation/src/Dropdown/index.jsx +++ b/packages/components/psammead-navigation/src/Dropdown/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { shape, string, node, bool, oneOf } from 'prop-types'; +import { shape, string, node, bool, func, oneOf } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { navigationIcons } from '@bbc/psammead-assets/svgs'; import { @@ -66,6 +66,7 @@ const StyledDropdownLink = styled.a` ${({ script }) => script && getPica(script)}; ${({ service }) => service && getSansRegular(service)} color: ${C_WHITE}; + text-decoration: none; &:hover, &:focus { @@ -83,15 +84,6 @@ const StyledCurrentLink = styled.span` padding-right: ${GEL_SPACING};`} `; -const CurrentDropdownLink = ({ children, currentPageText, dir }) => ( - <> - - {currentPageText}, - {children} - - -); - export const DropdownNavigationLi = ({ children, script, @@ -103,70 +95,48 @@ export const DropdownNavigationLi = ({ }) => ( {active && currentPageText ? ( - - + + + {currentPageText} {children} - + ) : ( - + {children} )} ); -export const AmpDropdown = ({ closeAction, children }) => ( +export const AmpDropdown = ({ announcedText, closeAction, children }) => ( - {navigationIcons.cross} - {children} + + {navigationIcons.cross} + + {children} ); -export const CanonicalDropdown = ({ onClose, children }) => ( +export const CanonicalDropdown = ({ announcedText, closeAction, children }) => ( - {navigationIcons.cross} - {children} + + {navigationIcons.cross} + + {children} ); -DropdownNavigationLi.propTypes = { - children: node.isRequired, - url: string.isRequired, - script: shape(scriptPropType).isRequired, - active: bool, - currentPageText: string, - service: string.isRequired, - dir: oneOf(['ltr', 'rtl']), -}; - -DropdownNavigationLi.defaultProps = { - active: false, - currentPageText: null, - dir: 'ltr', -}; - -CurrentDropdownLink.propTypes = { - children: string.isRequired, - currentPageText: string, - dir: oneOf(['ltr', 'rtl']), -}; - -CurrentDropdownLink.defaultProps = { - currentPageText: null, - dir: 'ltr', -}; - -AmpDropdown.propTypes = { - children: string.isRequired, - closeAction: node.isRequired, -}; - -CanonicalDropdown.propTypes = { - children: string.isRequired, - onClose: node.isRequired, -}; - const HamburgerButton = styled.button` width: 2.75rem; height: 2.75rem; @@ -186,22 +156,60 @@ const HamburgerButton = styled.button` } `; -export const AmpHamburgerMenu = (announcedText, action, isMenuOpen) => ( +export const AmpHamburgerMenu = ({ announcedText, openAction }) => ( {navigationIcons.hamburger} ); -export const CanonicalHamburgerMenu = (announcedText, onClick, isMenuOpen) => ( +export const CanonicalHamburgerMenu = ({ announcedText, openAction }) => ( {navigationIcons.hamburger} ); + +DropdownNavigationLi.propTypes = { + children: node.isRequired, + url: string.isRequired, + script: shape(scriptPropType).isRequired, + service: string.isRequired, + active: bool, + currentPageText: string, + dir: oneOf(['ltr', 'rtl']), +}; + +DropdownNavigationLi.defaultProps = { + active: false, + currentPageText: null, + dir: 'ltr', +}; + +AmpDropdown.propTypes = { + announcedText: string.isRequired, + children: node.isRequired, + closeAction: func.isRequired, +}; + +CanonicalDropdown.propTypes = { + announcedText: string.isRequired, + children: node.isRequired, + closeAction: func.isRequired, +}; + +AmpHamburgerMenu.propTypes = { + announcedText: string.isRequired, + openAction: func.isRequired, +}; + +CanonicalHamburgerMenu.propTypes = { + announcedText: string.isRequired, + openAction: func.isRequired, +}; From 2012b0b6e0844feac10dc06427a7b53e43fdcf47 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 13 Nov 2019 14:43:22 +0000 Subject: [PATCH 11/77] Fix console warnings in stories --- .../components/psammead-navigation/src/index.stories.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 99ca3f5dd1..41558cd5cc 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -162,15 +162,15 @@ const navigationStory = ( const hamburgerStory = () => { return ( - + {}} /> ); }; const dropdownStory = () => ({ dir, script, service }) => ( - + {}}> {pidginNavData.map((item, index) => { - const active = index === 0; + const active = index === 3; const { title, url } = item; return ( From 2d2b6ac350584a037b7e3b2d7c7393a84fb457e2 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 13 Nov 2019 14:43:41 +0000 Subject: [PATCH 12/77] Update tests --- .../src/Dropdown/index.test.jsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-navigation/src/Dropdown/index.test.jsx b/packages/components/psammead-navigation/src/Dropdown/index.test.jsx index 0cc000c494..dfa7e4f36e 100644 --- a/packages/components/psammead-navigation/src/Dropdown/index.test.jsx +++ b/packages/components/psammead-navigation/src/Dropdown/index.test.jsx @@ -1,15 +1,19 @@ import React from 'react'; import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; import { latin } from '@bbc/gel-foundations/scripts'; -import { CanonicalDropdown, DropdownNavigationLi } from './index'; +import { + CanonicalDropdown, + DropdownNavigationLi, + CanonicalHamburgerMenu, +} from './index'; import pidginNavData from '../../testHelpers/pidgin'; describe('Navigation', () => { shouldMatchSnapshot( 'dropdown should render correctly', - + {}}> {pidginNavData.map((item, index) => { - const active = index === 0; + const active = index === 3; const { title, url } = item; return ( @@ -17,6 +21,7 @@ describe('Navigation', () => { script={latin} service="news" url={url} + key={title} active={active} currentPageText="Current page" > @@ -27,3 +32,10 @@ describe('Navigation', () => { , ); }); + +describe('Hamburger menu', () => { + shouldMatchSnapshot( + 'should render correctly', + {}} />, + ); +}); From 36e760194575f6a504c44c46debaa8ab0b7889fd Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 13 Nov 2019 14:44:05 +0000 Subject: [PATCH 13/77] Update snapshots --- .../__snapshots__/index.test.jsx.snap | 83 ++++++++++++++++--- 1 file changed, 70 insertions(+), 13 deletions(-) diff --git a/packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap index 61bb0a937c..60fc957375 100644 --- a/packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-navigation/src/Dropdown/__snapshots__/index.test.jsx.snap @@ -1,5 +1,49 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Hamburger menu should render correctly 1`] = ` +.c1 { + color: #fff; + fill: currentColor; +} + +.c0 { + width: 2.75rem; + height: 2.75rem; + background-color: #B80000; + padding: 0; + margin: 0; + border: 0; +} + +.c0:hover, +.c0:focus { + box-shadow: inset 0 0 0 0.25rem #FFFFFF; + cursor: pointer; +} + +@media (min-width:37.5rem) { + .c0 { + display: none; + } +} + + +`; + exports[`Navigation dropdown should render correctly 1`] = ` .c7 { -webkit-clip-path: inset(100%); @@ -64,6 +108,8 @@ exports[`Navigation dropdown should render correctly 1`] = ` font-weight: 400; font-style: normal; color: #FFFFFF; + -webkit-text-decoration: none; + text-decoration: none; } .c5:hover, @@ -102,6 +148,8 @@ exports[`Navigation dropdown should render correctly 1`] = ` class="c0" > +
+
`; -exports[`Canonical hamburger menu should render correctly 1`] = ` +exports[`Canonical Hamburger menu should render correctly 1`] = ` .c1 { color: #fff; fill: currentColor; diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index 028d663b1c..1d3df675ca 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -24,7 +24,7 @@ const MENU_ICON_SIDE_LENGTH = '2.75rem'; // 44px const getStyles = dir => { const direction = dir === 'ltr' ? 'left' : 'right'; return `border-${direction}: ${GEL_SPACING_HLF} solid ${C_WHITE}; - padding-${direction}: ${GEL_SPACING}`; + padding-${direction}: ${GEL_SPACING};`; }; const DropdownWrapper = styled.div` diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx index d61344c750..dbdea20712 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import { render, fireEvent, getByRole } from '@testing-library/react'; import { latin } from '@bbc/gel-foundations/scripts'; import { CanonicalDropdown, @@ -9,36 +10,69 @@ import { } from './index'; import pidginNavData from '../../testHelpers/pidgin'; -describe('Canonical dropdown navigation', () => { - shouldMatchSnapshot( - 'should render correctly', - {}}> - - {pidginNavData.map((item, index) => { - const active = index === 3; - const { title, url } = item; - - return ( - - {title} - - ); - })} - - , - ); -}); +const dropdownList = ( + + {pidginNavData.map((item, index) => { + const active = index === 3; + const { title, url } = item; + + return ( + + {title} + + ); + })} + +); + +describe('Canonical', () => { + describe('Dropdown navigation', () => { + shouldMatchSnapshot( + 'should render correctly', + {}}> + {dropdownList} + , + ); + + describe('CrossButton', () => { + it('should call onClose handler when clicked', () => { + const mockOnClick = jest.fn(); + const { container } = render( + mockOnClick()}> + {dropdownList} + , + ); + + fireEvent.click(getByRole(container, 'button')); + expect(mockOnClick).toHaveBeenCalledTimes(1); + }); + }); + }); + + describe('Hamburger menu', () => { + shouldMatchSnapshot( + 'should render correctly', + {}} />, + ); + + it('should call onOpen handler when clicked', () => { + const mockOnClick = jest.fn(); + const { container } = render( + mockOnClick()} + />, + ); -describe('Canonical hamburger menu', () => { - shouldMatchSnapshot( - 'should render correctly', - {}} />, - ); + fireEvent.click(getByRole(container, 'button')); + expect(mockOnClick).toHaveBeenCalledTimes(1); + }); + }); }); From 9135564b35387e2cf9a1db91277cc38da0c824f2 Mon Sep 17 00:00:00 2001 From: Ruth Ogendi Date: Mon, 25 Nov 2019 19:41:45 +0300 Subject: [PATCH 58/77] Add nested describe(). --- .../__snapshots__/index.test.jsx.snap | 114 +++++++++--------- .../src/DropdownNavigation/index.test.jsx | 28 +++-- 2 files changed, 72 insertions(+), 70 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 f84376f7ce..57adc21b6a 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,62 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AMP hamburger menu should render correctly 1`] = ` -.c1 { - color: #fff; - fill: currentColor; -} - -.c0 { - width: 2.75rem; - height: 2.75rem; - background-color: #B80000; - padding: 0; - margin: 0; - border: 0; -} - -.c0:focus { - box-shadow: inset 0 0 0 0.25rem #FFFFFF; -} - -.c0:focus::after { - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - height: 2.75rem; - width: 2.75rem; - border: 0.25rem solid #FFFFFF; -} - -@media (min-width:37.5rem) { - .c0 { - display: none; - } -} - - -`; - -exports[`Amp dropdown navigation should render correctly 1`] = ` +exports[`Amp Dropdown navigation should render correctly 1`] = ` .c7 { -webkit-clip-path: inset(100%); clip-path: inset(100%); @@ -300,6 +244,62 @@ exports[`Amp dropdown navigation should render correctly 1`] = ` `; +exports[`Amp Hamburger menu should render correctly 1`] = ` +.c1 { + color: #fff; + fill: currentColor; +} + +.c0 { + width: 2.75rem; + height: 2.75rem; + background-color: #B80000; + padding: 0; + margin: 0; + border: 0; +} + +.c0:focus { + box-shadow: inset 0 0 0 0.25rem #FFFFFF; +} + +.c0:focus::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + height: 2.75rem; + width: 2.75rem; + border: 0.25rem solid #FFFFFF; +} + +@media (min-width:37.5rem) { + .c0 { + display: none; + } +} + + +`; + exports[`Canonical Dropdown navigation should render correctly 1`] = ` .c7 { -webkit-clip-path: inset(100%); diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx index 4af6ec60d4..eb6d5cc03d 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx @@ -79,18 +79,20 @@ describe('Canonical', () => { }); }); -describe('Amp dropdown navigation', () => { - shouldMatchSnapshot( - 'should render correctly', - - {dropdownList} - , - ); -}); +describe('Amp', () => { + describe('Dropdown navigation', () => { + shouldMatchSnapshot( + 'should render correctly', + + {dropdownList} + , + ); + }); -describe('AMP hamburger menu', () => { - shouldMatchSnapshot( - 'should render correctly', - , - ); + describe('Hamburger menu', () => { + shouldMatchSnapshot( + 'should render correctly', + , + ); + }); }); From 9e6294235644caaf6cc69432d96e46ab9f680be9 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 26 Nov 2019 09:59:41 +0000 Subject: [PATCH 59/77] Add AMP stories --- .../psammead-navigation/src/index.stories.jsx | 41 +++++++++++++++---- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 8f573a032e..9109520ea8 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -16,7 +16,9 @@ import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; import Navigation, { NavigationUl, NavigationLi } from './index'; import { CanonicalHamburgerMenu, + AmpHamburgerMenu, CanonicalDropdown, + AmpDropdown, DropdownUl, DropdownLi, } from './DropdownNavigation'; @@ -160,13 +162,12 @@ const navigationStory = ( ); -const dropdownStory = () => ({ dir, script, service }) => ( - {}}> +const dropdownStory = type => ({ dir, script, service }) => { + const dropdownList = ( {pidginNavData.map((item, index) => { const active = index === 3; const { title, url } = item; - return ( ({ dir, script, service }) => ( ); })} - -); + ); + + return type === 'canonical' ? ( + {}}> + {dropdownList} + + ) : ( + + {dropdownList} + + ); +}; const storiesWithoutBrand = storiesOf( 'Components|Navigation/without brand', @@ -204,7 +215,7 @@ navStoriesData.map(item => { }); storiesWithoutBrand.add( - 'Hamburger menu', + 'Canonical Hamburger menu', () => ( {}} /> @@ -215,7 +226,23 @@ storiesWithoutBrand.add( }, ); -storiesWithoutBrand.add('Dropdown menu', dropdownStory(), { +storiesWithoutBrand.add( + 'AMP Hamburger menu', + () => ( + + + + ), + { + notes, + }, +); + +storiesWithoutBrand.add('Canonical Dropdown menu', dropdownStory('canonical'), { + notes, +}); + +storiesWithoutBrand.add('AMP Dropdown menu', dropdownStory('amp'), { notes, }); From 5269f650b3e9530b647ae303cd8f0191177178f2 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 26 Nov 2019 12:10:29 +0000 Subject: [PATCH 60/77] Fix borders for icons --- .../__snapshots__/index.test.jsx.snap | 12 ++++-------- .../src/DropdownNavigation/index.jsx | 4 ++-- 2 files changed, 6 insertions(+), 10 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 57adc21b6a..804045ea3b 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 @@ -26,6 +26,7 @@ exports[`Amp Dropdown navigation should render correctly 1`] = ` background-color: #222222; width: 2.75rem; height: 2.75rem; + position: relative; padding: 0; margin: 0; border: 0; @@ -42,8 +43,6 @@ exports[`Amp Dropdown navigation should render correctly 1`] = ` right: 0; bottom: 0; top: 0; - height: 2.75rem; - width: 2.75rem; border: 0.25rem solid #FFFFFF; } @@ -254,6 +253,7 @@ exports[`Amp Hamburger menu should render correctly 1`] = ` width: 2.75rem; height: 2.75rem; background-color: #B80000; + position: relative; padding: 0; margin: 0; border: 0; @@ -270,8 +270,6 @@ exports[`Amp Hamburger menu should render correctly 1`] = ` right: 0; bottom: 0; top: 0; - height: 2.75rem; - width: 2.75rem; border: 0.25rem solid #FFFFFF; } @@ -326,6 +324,7 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = ` background-color: #222222; width: 2.75rem; height: 2.75rem; + position: relative; padding: 0; margin: 0; border: 0; @@ -342,8 +341,6 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = ` right: 0; bottom: 0; top: 0; - height: 2.75rem; - width: 2.75rem; border: 0.25rem solid #FFFFFF; } @@ -553,6 +550,7 @@ exports[`Canonical Hamburger menu should render correctly 1`] = ` width: 2.75rem; height: 2.75rem; background-color: #B80000; + position: relative; padding: 0; margin: 0; border: 0; @@ -569,8 +567,6 @@ exports[`Canonical Hamburger menu should render correctly 1`] = ` right: 0; bottom: 0; top: 0; - height: 2.75rem; - width: 2.75rem; border: 0.25rem solid #FFFFFF; } diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index 1d3df675ca..1f19784101 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -42,8 +42,6 @@ const iconBorder = css` right: 0; bottom: 0; top: 0; - height: ${MENU_ICON_SIDE_LENGTH}; - width: ${MENU_ICON_SIDE_LENGTH}; border: ${GEL_SPACING_HLF} solid ${C_WHITE}; `; @@ -51,6 +49,7 @@ const CrossButton = styled.button` background-color: ${C_EBON}; width: ${MENU_ICON_SIDE_LENGTH}; height: ${MENU_ICON_SIDE_LENGTH}; + position: relative; padding: 0; margin: 0; border: 0; @@ -185,6 +184,7 @@ const HamburgerButton = styled.button` width: ${MENU_ICON_SIDE_LENGTH}; height: ${MENU_ICON_SIDE_LENGTH}; background-color: ${C_POSTBOX}; + position: relative; padding: 0; margin: 0; border: 0; From d9c057bee3430d6ad6c9e7db1f1f3baa2aba0d18 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 26 Nov 2019 17:15:34 +0000 Subject: [PATCH 61/77] Add hover styling --- .../__snapshots__/index.test.jsx.snap | 10 ++++++++++ .../src/DropdownNavigation/index.jsx | 3 +++ 2 files changed, 13 insertions(+) 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 804045ea3b..1dae9ccbef 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 @@ -32,10 +32,12 @@ exports[`Amp Dropdown navigation should render correctly 1`] = ` border: 0; } +.c1:hover, .c1:focus { box-shadow: inset 0 0 0 0.25rem #FFFFFF; } +.c1:hover::after, .c1:focus::after { content: ''; position: absolute; @@ -74,6 +76,7 @@ exports[`Amp Dropdown navigation should render correctly 1`] = ` text-decoration: none; } +.c5:hover, .c5:focus { -webkit-text-decoration: underline; text-decoration: underline; @@ -259,10 +262,12 @@ exports[`Amp Hamburger menu should render correctly 1`] = ` border: 0; } +.c0:hover, .c0:focus { box-shadow: inset 0 0 0 0.25rem #FFFFFF; } +.c0:hover::after, .c0:focus::after { content: ''; position: absolute; @@ -330,10 +335,12 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = ` border: 0; } +.c1:hover, .c1:focus { box-shadow: inset 0 0 0 0.25rem #FFFFFF; } +.c1:hover::after, .c1:focus::after { content: ''; position: absolute; @@ -372,6 +379,7 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = ` text-decoration: none; } +.c5:hover, .c5:focus { -webkit-text-decoration: underline; text-decoration: underline; @@ -556,10 +564,12 @@ exports[`Canonical Hamburger menu should render correctly 1`] = ` border: 0; } +.c0:hover, .c0:focus { box-shadow: inset 0 0 0 0.25rem #FFFFFF; } +.c0:hover::after, .c0:focus::after { content: ''; position: absolute; diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index 1f19784101..2573aa0516 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -54,6 +54,7 @@ const CrossButton = styled.button` margin: 0; border: 0; + &:hover, &:focus { box-shadow: inset 0 0 0 ${GEL_SPACING_HLF} ${C_WHITE}; ::after { @@ -85,6 +86,7 @@ const StyledDropdownLink = styled.a` color: ${C_WHITE}; text-decoration: none; + &:hover, &:focus { text-decoration: underline; } @@ -189,6 +191,7 @@ const HamburgerButton = styled.button` margin: 0; border: 0; + &:hover, &:focus { box-shadow: inset 0 0 0 ${GEL_SPACING_HLF} ${C_WHITE}; ::after { From 35597e894010bf987f25f5a87262c03429a170c3 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 27 Nov 2019 14:24:46 +0000 Subject: [PATCH 62/77] Make two buttons into one --- .../src/DropdownNavigation/index.jsx | 165 +++++++++--------- 1 file changed, 80 insertions(+), 85 deletions(-) diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index 2573aa0516..1fd780fe7a 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -1,19 +1,15 @@ -import React from 'react'; +import React, { cloneElement } from 'react'; import styled, { css } from 'styled-components'; import { shape, string, node, bool, func, oneOf } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { navigationIcons } from '@bbc/psammead-assets/svgs'; -import { - C_WHITE, - C_POSTBOX, - C_EBON, - C_SHADOW, -} from '@bbc/psammead-styles/colours'; +import { C_WHITE, C_EBON, C_SHADOW } from '@bbc/psammead-styles/colours'; import { GEL_SPACING_HLF, GEL_SPACING, GEL_SPACING_DBL, } from '@bbc/gel-foundations/spacings'; +import Helmet from 'react-helmet'; import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; import { getPica } from '@bbc/gel-foundations/typography'; import { scriptPropType } from '@bbc/gel-foundations/prop-types'; @@ -35,34 +31,6 @@ const DropdownWrapper = styled.div` } `; -const iconBorder = css` - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - border: ${GEL_SPACING_HLF} solid ${C_WHITE}; -`; - -const CrossButton = styled.button` - background-color: ${C_EBON}; - width: ${MENU_ICON_SIDE_LENGTH}; - height: ${MENU_ICON_SIDE_LENGTH}; - position: relative; - padding: 0; - margin: 0; - border: 0; - - &:hover, - &:focus { - box-shadow: inset 0 0 0 ${GEL_SPACING_HLF} ${C_WHITE}; - ::after { - ${iconBorder}; - } - } -`; - export const DropdownUl = styled.ul.attrs({ role: 'list' })` list-style-type: none; margin: 0; @@ -139,57 +107,44 @@ DropdownLi.defaultProps = { dir: 'ltr', }; +export const CanonicalDropdown = ({ children }) => ( + {children} +); + const dropdownProps = { - announcedText: string.isRequired, children: node.isRequired, }; -export const CanonicalDropdown = ({ announcedText, onClose, children }) => ( - - - {navigationIcons.cross} - - {children} - -); - CanonicalDropdown.propTypes = { ...dropdownProps, - onClose: func.isRequired, }; -export const AmpDropdown = ({ announcedText, onClose, children }) => ( - - - {navigationIcons.cross} - - {children} - +export const AmpDropdown = ({ children }) => ( + {children} ); AmpDropdown.propTypes = { ...dropdownProps, - onClose: string.isRequired, }; -const HamburgerButton = styled.button` +const iconBorder = css` + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + border: ${GEL_SPACING_HLF} solid ${C_WHITE}; +`; + +const MenuButton = styled.button` width: ${MENU_ICON_SIDE_LENGTH}; height: ${MENU_ICON_SIDE_LENGTH}; - background-color: ${C_POSTBOX}; position: relative; padding: 0; margin: 0; border: 0; + background-color: transparent; &:hover, &:focus { @@ -204,32 +159,72 @@ const HamburgerButton = styled.button` } `; -const hamburgerProps = { - announcedText: string.isRequired, -}; - -export const CanonicalHamburgerMenu = ({ announcedText, onOpen }) => ( - ( + + {isOpen ? navigationIcons.hamburger : navigationIcons.cross} + ); -CanonicalHamburgerMenu.propTypes = { - ...hamburgerProps, +CanonicalMenuButton.propTypes = { + announcedText: string.isRequired, onOpen: func.isRequired, + onClose: func.isRequired, + isOpen: bool.isRequired, }; -export const AmpHamburgerMenu = ({ announcedText, onOpen }) => ( - +const AmpHead = () => ( + + + + + + ); +}; + +AmpMenuButton.propTypes = { + announcedText: string.isRequired, + onToggle: string.isRequired, }; From dba855576c615f37448b3e39fee0a7a83a928e75 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 27 Nov 2019 14:25:08 +0000 Subject: [PATCH 63/77] Update stories --- .../psammead-navigation/src/index.stories.jsx | 44 ++++++++++++++----- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 9109520ea8..c150eb6a9d 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -14,9 +14,10 @@ import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; import Brand from '@bbc/psammead-brand'; import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; import Navigation, { NavigationUl, NavigationLi } from './index'; +import { ampDecorator } from '../../../../.storybook/config'; import { - CanonicalHamburgerMenu, - AmpHamburgerMenu, + CanonicalMenuButton, + AmpMenuButton, CanonicalDropdown, AmpDropdown, DropdownUl, @@ -186,13 +187,9 @@ const dropdownStory = type => ({ dir, script, service }) => { ); return type === 'canonical' ? ( - {}}> - {dropdownList} - + {dropdownList} ) : ( - - {dropdownList} - + {dropdownList} ); }; @@ -201,6 +198,7 @@ const storiesWithoutBrand = storiesOf( module, ) .addDecorator(withKnobs) + .addDecorator(ampDecorator) .addDecorator(withServicesKnob()); navStoriesData.map(item => { @@ -215,10 +213,15 @@ navStoriesData.map(item => { }); storiesWithoutBrand.add( - 'Canonical Hamburger menu', + 'Canonical Closed Menu', () => ( - {}} /> + {}} + isOpen={false} + onClose={() => {}} + /> ), { @@ -227,10 +230,27 @@ storiesWithoutBrand.add( ); storiesWithoutBrand.add( - 'AMP Hamburger menu', + 'Canonical Open Menu', () => ( - + {}} + isOpen + onClose={() => {}} + /> + + ), + { + notes, + }, +); + +storiesWithoutBrand.add( + 'AMP Menu Button', + () => ( + + ), { From 1045efa4cff04809ba10f1c4b8b5608ed9121b23 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 27 Nov 2019 14:25:26 +0000 Subject: [PATCH 64/77] Update tests --- .../__snapshots__/index.test.jsx.snap | 325 +++++++++--------- .../src/DropdownNavigation/index.test.jsx | 76 ++-- 2 files changed, 209 insertions(+), 192 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 1dae9ccbef..388500405c 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,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Amp Dropdown navigation should render correctly 1`] = ` -.c7 { +.c5 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -13,59 +13,28 @@ exports[`Amp Dropdown navigation should render correctly 1`] = ` margin: 0; } -.c2 { - color: #fff; - fill: currentColor; -} - .c0 { background-color: #222222; } .c1 { - background-color: #222222; - width: 2.75rem; - height: 2.75rem; - position: relative; - padding: 0; - margin: 0; - border: 0; -} - -.c1:hover, -.c1:focus { - box-shadow: inset 0 0 0 0.25rem #FFFFFF; -} - -.c1:hover::after, -.c1:focus::after { - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - border: 0.25rem solid #FFFFFF; -} - -.c3 { list-style-type: none; margin: 0; padding: 0 0.5rem; border-bottom: 0.125rem solid #3F3F42; } -.c4 { +.c2 { padding: 0.75rem 0; border-bottom: 0.0625rem solid #3F3F42; } -.c4:last-child { +.c2:last-child { padding-bottom: 1rem; border: 0; } -.c5 { +.c3 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -76,13 +45,13 @@ exports[`Amp Dropdown navigation should render correctly 1`] = ` text-decoration: none; } -.c5:hover, -.c5:focus { +.c3:hover, +.c3:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.c6 { +.c4 { border-left: 0.25rem solid #FFFFFF; padding-left: 0.5rem; } @@ -94,14 +63,14 @@ exports[`Amp Dropdown navigation should render correctly 1`] = ` } @media (min-width:20rem) and (max-width:37.4375rem) { - .c5 { + .c3 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width:37.5rem) { - .c5 { + .c3 { font-size: 1rem; line-height: 1.25rem; } @@ -110,76 +79,58 @@ exports[`Amp Dropdown navigation should render correctly 1`] = `
-
`; -exports[`Amp Hamburger menu should render correctly 1`] = ` +exports[`Amp Menu Button should render correctly 1`] = ` +.c1 { + color: #fff; + fill: currentColor; +} + +.c0 { + width: 2.75rem; + height: 2.75rem; + position: relative; + padding: 0; + margin: 0; + border: 0; + background-color: transparent; +} + +.c0:hover, +.c0:focus { + box-shadow: inset 0 0 0 0.25rem #FFFFFF; +} + +.c0:hover::after, +.c0:focus::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + border: 0.25rem solid #FFFFFF; +} + +@media (min-width:37.5rem) { + .c0 { + display: none; + } +} + + + + + + + + + +`; + +exports[`Canonical Closed menu button should render correctly 1`] = ` .c1 { color: #fff; fill: currentColor; @@ -255,11 +300,11 @@ exports[`Amp Hamburger menu should render correctly 1`] = ` .c0 { width: 2.75rem; height: 2.75rem; - background-color: #B80000; position: relative; padding: 0; margin: 0; border: 0; + background-color: transparent; } .c0:hover, @@ -288,7 +333,6 @@ exports[`Amp Hamburger menu should render correctly 1`] = ` aria-expanded="false" aria-label="Menu" class="c0" - on="" > `; exports[`Canonical Dropdown navigation should render correctly 1`] = ` -.c7 { +.c5 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -316,59 +361,28 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = ` margin: 0; } -.c2 { - color: #fff; - fill: currentColor; -} - .c0 { background-color: #222222; } .c1 { - background-color: #222222; - width: 2.75rem; - height: 2.75rem; - position: relative; - padding: 0; - margin: 0; - border: 0; -} - -.c1:hover, -.c1:focus { - box-shadow: inset 0 0 0 0.25rem #FFFFFF; -} - -.c1:hover::after, -.c1:focus::after { - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - border: 0.25rem solid #FFFFFF; -} - -.c3 { list-style-type: none; margin: 0; padding: 0 0.5rem; border-bottom: 0.125rem solid #3F3F42; } -.c4 { +.c2 { padding: 0.75rem 0; border-bottom: 0.0625rem solid #3F3F42; } -.c4:last-child { +.c2:last-child { padding-bottom: 1rem; border: 0; } -.c5 { +.c3 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -379,13 +393,13 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = ` text-decoration: none; } -.c5:hover, -.c5:focus { +.c3:hover, +.c3:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.c6 { +.c4 { border-left: 0.25rem solid #FFFFFF; padding-left: 0.5rem; } @@ -397,14 +411,14 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = ` } @media (min-width:20rem) and (max-width:37.4375rem) { - .c5 { + .c3 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width:37.5rem) { - .c5 { + .c3 { font-size: 1rem; line-height: 1.25rem; } @@ -413,75 +427,58 @@ exports[`Canonical Dropdown navigation should render correctly 1`] = `
-
`; -exports[`Canonical Hamburger menu should render correctly 1`] = ` +exports[`Canonical Open menu button should render correctly 1`] = ` .c1 { color: #fff; fill: currentColor; @@ -557,11 +554,11 @@ exports[`Canonical Hamburger menu should render correctly 1`] = ` .c0 { width: 2.75rem; height: 2.75rem; - background-color: #B80000; position: relative; padding: 0; margin: 0; border: 0; + background-color: transparent; } .c0:hover, @@ -587,7 +584,7 @@ exports[`Canonical Hamburger menu should render correctly 1`] = ` } @@ -212,7 +211,8 @@ exports[`Canonical Open menu button should render correctly 1`] = ` width="2.75rem" > diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index 2b2c69f8ba..5bb90ce7a4 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -152,7 +152,7 @@ export const CanonicalMenuButton = ({ onClick={isOpen ? onClose : onOpen} aria-expanded={isOpen ? 'true' : 'false'} > - {isOpen ? navigationIcons.hamburger : navigationIcons.cross} + {isOpen ? navigationIcons.cross : navigationIcons.hamburger} ); diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx index bbddc12dfc..aba68cb92c 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx @@ -46,8 +46,9 @@ describe('Canonical', () => { onClose={mockOnClose} />, ); + const menuButton = getByRole(container, 'button'); - fireEvent.click(getByRole(container, 'button')); + fireEvent.click(menuButton); expect(mockOnClose).toHaveBeenCalledTimes(1); expect(mockOnOpen).not.toHaveBeenCalled(); }); @@ -75,8 +76,9 @@ describe('Canonical', () => { onClose={mockOnClose} />, ); + const menuButton = getByRole(container, 'button'); - fireEvent.click(getByRole(container, 'button')); + fireEvent.click(menuButton); expect(mockOnOpen).toHaveBeenCalledTimes(1); expect(mockOnClose).not.toHaveBeenCalled(); }); diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index 931d60c369..a1b1ec8d1d 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -224,7 +224,7 @@ navStoriesData.map(item => { storiesWithoutBrand.add( 'Canonical Menu Button', () => { - const isOpen = boolean('Open', true); + const isOpen = boolean('Open', false); return ( Date: Thu, 28 Nov 2019 09:54:07 +0000 Subject: [PATCH 73/77] Add comma after Current page text --- .../src/DropdownNavigation/__snapshots__/index.test.jsx.snap | 1 + .../psammead-navigation/src/DropdownNavigation/index.jsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) 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 91a4eddbc3..91018db3d0 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 @@ -352,6 +352,7 @@ exports[`Dropdown navigation should render correctly 1`] = ` class="c5" > Current page + , World diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index 5bb90ce7a4..c11a597b3f 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -82,7 +82,7 @@ export const DropdownLi = ({ // eslint-disable-next-line jsx-a11y/aria-role role="text" > - {currentPageText} + {currentPageText}, {children} ) : ( From 5a94dfb319c0550dfc34017b4010daa49483e029 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Thu, 28 Nov 2019 10:38:49 +0000 Subject: [PATCH 74/77] Add aria-expanded tests --- .../src/DropdownNavigation/index.test.jsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx index aba68cb92c..401b4cd091 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.test.jsx @@ -53,6 +53,19 @@ describe('Canonical', () => { expect(mockOnOpen).not.toHaveBeenCalled(); }); + it('should have aria-expanded set as true', () => { + const { container } = render( + {}} + isOpen + onClose={() => {}} + />, + ); + const menuButton = getByRole(container, 'button'); + expect(menuButton.getAttribute('aria-expanded')).toBe('true'); + }); + shouldMatchSnapshot( 'should render correctly', { expect(mockOnClose).not.toHaveBeenCalled(); }); + it('should have aria-expanded set as false', () => { + const { container } = render( + {}} + isOpen={false} + onClose={() => {}} + />, + ); + const menuButton = getByRole(container, 'button'); + expect(menuButton.getAttribute('aria-expanded')).toBe('false'); + }); + shouldMatchSnapshot( 'should render correctly', Date: Thu, 28 Nov 2019 11:17:18 +0000 Subject: [PATCH 75/77] Add role attribute --- .../psammead-navigation/src/DropdownNavigation/index.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx index c11a597b3f..db85e46184 100644 --- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx +++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx @@ -61,7 +61,7 @@ const StyledDropdownLink = styled.a` } `; -const StyledCurrentLink = styled.span` +const StyledCurrentLink = styled.span.attrs({ role: 'text' })` ${({ dir }) => getStyles(dir)} `; @@ -77,11 +77,7 @@ export const DropdownLi = ({ {active && currentPageText ? ( - + {currentPageText}, {children} From 217941add919ae6b411436abb9406d68124a2824 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Thu, 28 Nov 2019 13:55:23 +0000 Subject: [PATCH 76/77] Separate stories into canonical and AMP --- .../psammead-navigation/src/index.stories.jsx | 45 ++++++++----------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx index a1b1ec8d1d..357ccd9a3c 100644 --- a/packages/components/psammead-navigation/src/index.stories.jsx +++ b/packages/components/psammead-navigation/src/index.stories.jsx @@ -200,19 +200,15 @@ const dropdownStory = () => ({ dir, script, service }) => ( ); -const storiesWithoutBrand = storiesOf( - 'Components|Navigation/without brand', - module, -) +const canonicalStories = storiesOf('Components|Navigation/Canonical', module) .addDecorator(withKnobs) - .addDecorator(ampDecorator) .addDecorator(withServicesKnob()); navStoriesData.map(item => { const { title, skipLinkText, currentPageText, data, dir } = item; const isAmp = false; - return storiesWithoutBrand.add( + return canonicalStories.add( title, navigationStory(skipLinkText, currentPageText, data, dir, false, isAmp), { @@ -221,7 +217,7 @@ navStoriesData.map(item => { ); }); -storiesWithoutBrand.add( +canonicalStories.add( 'Canonical Menu Button', () => { const isOpen = boolean('Open', false); @@ -241,28 +237,12 @@ storiesWithoutBrand.add( }, ); -storiesWithoutBrand.add( - 'AMP Menu Button', - () => ( - - - - ), - { - notes, - }, -); - -storiesWithoutBrand.add('Dropdown menu', dropdownStory(), { +canonicalStories.add('Dropdown menu', dropdownStory(), { notes, }); -const storiesWithBrand = storiesOf('Components|Navigation/with brand', module) - .addDecorator(withKnobs) - .addDecorator(withServicesKnob()); - -storiesWithBrand.add( - navStoriesData[0].title, +canonicalStories.add( + 'Igbo with brand', navigationStory( navStoriesData[0].skipLinkText, navStoriesData[0].currentPageText, @@ -279,6 +259,7 @@ storiesWithBrand.add( const ampStories = storiesOf('Components|Navigation/AMP', module) .addDecorator(ampDecorator) .addDecorator(withKnobs) + .addDecorator(ampDecorator) .addDecorator(withServicesKnob()); navStoriesData.map(item => { @@ -293,3 +274,15 @@ navStoriesData.map(item => { }, ); }); + +ampStories.add( + 'AMP Menu Button', + () => ( + + + + ), + { + notes, + }, +); From 5b2b04580b8266b7789b29d7c62feb05c43cc787 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Fri, 29 Nov 2019 09:37:50 +0000 Subject: [PATCH 77/77] Readme update --- packages/components/psammead-navigation/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-navigation/README.md b/packages/components/psammead-navigation/README.md index ffe986ce04..27510fed12 100644 --- a/packages/components/psammead-navigation/README.md +++ b/packages/components/psammead-navigation/README.md @@ -188,7 +188,7 @@ import { AmpMenuButton } from '@bbc/psammead-navigation/dropdown'; ### When to use this component -The `Navigation` is designed to show a navigation bar on `index` pages, which will show all sections on a site. If there are too many items to fit on one line, the items will wrap to the next lines. +The `Navigation` is designed to show a navigation bar on all pages, which will show all sections on a site. If there are too many items to fit on one line, the items will wrap to the next lines. On the other hand, with `CanonicalScrollableNavigation` or `AmpScrollableNavigation` we can make the list to remain on one line and to be horizontally scrollable to allow access to further links, under 600px.