Create dropdown navigation

packages/components/psammead-navigation/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 6.0.0-alpha.1 | [PR#2613](https://github.com/bbc/psammead/pull/2613) Add dropdown menu with a hamburger button |
 | 5.0.0-alpha.1 | [PR#2577](https://github.com/bbc/psammead/pull/2577) Add scrollable navigation |
 | 4.0.0-alpha.2 | [PR#2697](https://github.com/bbc/psammead/pull/2697) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 4.0.0-alpha.1 | [PR#2563](https://github.com/bbc/psammead/pull/2563) Remove skip to content link |

packages/components/psammead-navigation/README.md

@@ -6,7 +6,11 @@ This component is currently tagged as alpha and is not suitable for production u
 
 ## Description
 
-The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl` and `NavigationLi`. They use `ul` and `li` HTML elements respectively.
+The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl` and `NavigationLi`. They use `ul` and `li` HTML elements respectively. The package also includes a Hamburger Menu and a Dropdown Navigation which are visible for breakpoints under 600px.
+
+## Exports
+
+`/dropdown` - adds a dropdown navigation with hamburger menu which is visible for breakpoints under 600px
 
 ## Exports
 
@@ -64,7 +68,54 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | children | node | Yes      | N/A     | `<NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl>` |
 | dir      | string  | No       | `'ltr'`   | `'rtl'` |
 
-## Usage
+### CanonicalDropdown
+
+<!-- prettier-ignore -->
+| Argument | Type | Required | Default | Example |
+| -------- | ---- | -------- | ------- | ------- |
+| children | node | Yes | N/A | `<DropdownUl><DropdownLi script={latin} service='news' key='sport' url='/sport' active="false"> Sport </DropdownLi></DropdownUl>` |
+| announcedText | string | Yes | N/A | `'Menu'` |
+| onClose | function | Yes | N/A | `() => { console.log("Handle close action"); }` |
+
+### AmpDropdown
+
+<!-- prettier-ignore -->
+| Argument | Type | Required | Default | Example |
+| -------- | ---- | -------- | ------- | ------- |
+| children | node | Yes | N/A | `<DropdownUl><DropdownLi script={latin} service='news' key='sport' url='/sport' active="false"> Sport </DropdownLi></DropdownUl>` |
+| announcedText | string | Yes | N/A | `'Menu'` |
+| onClose | string | Yes | N/A | `"tap:menu.toggleVisibility"` |
+
+### DropdownLi
+
+<!-- prettier-ignore -->
+| Argument | Type    | Required | Default | Example  |
+| -------- | ------- | -------- | ------- | -------- |
+| children | string | Yes | N/A | `'Sport'` |
+| url | string | Yes | N/A | `/sport` |
+| script | object | Yes | N/A | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
+| service | string | Yes | N/A | `'news'` |
+| active | boolean | No | `false` | `true` |
+| currentPageText | string | No | `null` | `Current page` |
+| dir | string | No | `ltr` | `rtl` |
+
+### CanonicalHamburgerMenu
+
+<!-- prettier-ignore -->
+| Argument | Type | Required | Default | Example |
+| -------- | ---- | -------- | ------- | ------- |
+| announcedText | string | Yes | N/A | `'Menu'` |
+| onOpen | function | Yes | N/A | `() => { console.log("Handle open action"); }` |
+
+### AmpHamburgerMenu
+
+<!-- prettier-ignore -->
+| Argument | Type | Required | Default | Example |
+| -------- | ---- | -------- | ------- | ------- |
+| announcedText | string | Yes | N/A | `'Menu'` |
+| onOpen | string | Yes | N/A | `"tap:menu.toggleVisibility"` |
+
+## Navigation Usage
 
 ```jsx
 import React from 'react';
@@ -98,6 +149,76 @@ import { latin } from '@bbc/gel-foundations/scripts';
 </Navigation>;
 ```
 
+## Canonical Dropdown Navigation Usage
+
+```jsx
+import React from 'react';
+import { CanonicalDropdown, DropdownUl, DropdownLi } from '@bbc/psammead-navigation/dropdown';
+import { latin } from '@bbc/gel-foundations/scripts';
+
+<CanonicalDropdown announcedText="Menu" onClose={() => {}}>
+  <DropdownUl>
+    <DropdownLi
+        script={latin}
+        service="news"
+        key="Home"
+        url="/"
+        active
+        currentPageText="Current page"
+    >
+      Home
+    </DropdownLi>
+    <DropdownLi script={latin} service="news" key="Sport" url="/sport">
+      Sport
+    </DropdownLi>
+  </DropdownUl>
+</CanonicalDropdown>
+```
+
+## Amp Dropdown Navigation Usage
+
+```jsx
+import React from 'react';
+import { AmpDropdown, DropdownUl, DropdownLi } from '@bbc/psammead-navigation/dropdown';
+import { latin } from '@bbc/gel-foundations/scripts';
+
+<AmpDropdown announcedText="Menu" onClose="tap:menu.toggleVisibility">
+  <DropdownUl>
+    <DropdownLi
+        script={latin}
+        service="news"
+        key="Home"
+        url="/"
+        active
+        currentPageText="Current page"
+    >
+      Home
+    </DropdownLi>
+    <DropdownLi script={latin} service="news" key="Sport" url="/sport">
+      Sport
+    </DropdownLi>
+  </DropdownUl>
+</AmpDropdown>
+```
+
+## Canonical Hamburger Menu Usage
+
+```jsx
+import React from 'react';
+import { CanonicalHamburgerMenu } from '@bbc/psammead-navigation/dropdown';
+
+<CanonicalHamburgerMenu announcedText="Menu" onOpen={() => { console.log("Handle open action"); }} />
+```
+
+## Amp Hamburger Menu Usage
+
+```jsx
+import React from 'react';
+import { AmpHamburgerMenu } from '@bbc/psammead-navigation/dropdown';
+
+<AmpHamburgerMenu announcedText="Menu" onOpen="tap:menu.toggleVisibility" />
+```
+
 ### 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.
@@ -110,7 +231,9 @@ The Navigation has a [`navigation` landmark](https://www.w3.org/TR/wai-aria-prac
 
 We have added the role `list` and `listitem` to the `NavigationUl` and `NavigationList` respectively, due to a VoiceOver bug to reinstate the list semantics.
 
-We have also added visually hidden text to let the user know which item in the Navigation is the current page. Note the use of visually hidden text here is due to lack of support at this time for the aria-current page attribute. Also note the use of `role="text"` to stop splitting in VoiceOver.
+We have also added visually hidden text to let the user know which item in both regular and dropdown Navigation is the current page. Note the use of visually hidden text here is due to lack of support at this time for the aria-current page attribute. Also note the use of `role="text"` to stop text splitting in VoiceOver.
+
+We have added an `aria-expanded` attribute to both Hamburger and Cross menu buttons to indicate whether the menu is collapsed or expanded.
 
 In the screen reader UX only the menu button and its content should be available to assistive technology, meaning the scrollable navigation will be hidden. To achieve this we add `aria-hidden:true` to the exposed scrollable navigation so that this is not visible to these users and also add `tabindex=-1` to the links contained within this to remove them from the tab order.
 

packages/components/psammead-navigation/dropdown/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "@bbc/psammead-navigation/dropdown",
+    "private": true,
+    "main": "../dist/DropdownNavigation",
+    "module": "../esm/DropdownNavigation",
+    "sideEffects": false
+  }

packages/components/psammead-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "5.0.0-alpha.1",
+  "version": "6.0.0-alpha.1",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",
@@ -21,7 +21,8 @@
   "dependencies": {
     "@bbc/gel-foundations": "^3.4.1",
     "@bbc/psammead-styles": "^4.1.1",
-    "@bbc/psammead-visually-hidden-text": "^1.2.3"
+    "@bbc/psammead-visually-hidden-text": "^1.2.3",
+    "@bbc/psammead-assets": "^2.10.1"
   },
   "peerDependencies": {
     "react": "^16.9.0",