Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Add prop isOpen to Navigation #2769

Merged
merged 13 commits into from
Dec 5, 2019
Merged

Add prop isOpen to Navigation #2769

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
673c204
Add changeBackground prop to <Navigation />.
Dec 4, 2019
f2c4e80
Update CHANGELOG.md, package.json, package-lock.json.
Dec 4, 2019
f3443ef
Update README.
Dec 4, 2019
895d965
Update PR number.
Dec 4, 2019
5bff0e3
Merge branch 'latest' of github.com:bbc/psammead into change-nav-colo…
Dec 4, 2019
3862e41
Change prop name to isOpen
Dec 4, 2019
d8fec33
Update README.md
Dec 4, 2019
e6cd7c3
Make suggested change.
Dec 4, 2019
17cb49c
Merge branch 'change-nav-colour-on-menu-opening' of github.com:bbc/ps…
Dec 4, 2019
9bc5d44
Add test.
Dec 4, 2019
bfc5522
Rename test component.
Dec 5, 2019
136b6a3
Merge branch 'latest' into change-nav-colour-on-menu-opening
Dec 5, 2019
e2fe24e
Merge branch 'latest' into change-nav-colour-on-menu-opening
Dec 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/psammead-navigation/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
|---------|-------------|
| 6.0.0-alpha.6 | [PR#2769](https://github.com/bbc/psammead/pull/2769) Add `changeBackground` prop to `Navigation` |
Bopchy marked this conversation as resolved.
Show resolved Hide resolved
| 6.0.0-alpha.5 | [PR#2759](https://github.com/bbc/psammead/pull/2759) Change size of menu button depending on script |
| 6.0.0-alpha.4 | [PR#2747](https://github.com/bbc/psammead/pull/2747) Fix MenuButton not acting as a block element |
| 6.0.0-alpha.3 | [PR#2745](https://github.com/bbc/psammead/pull/2745) Add dir prop to Amp and Canonical MenuButton |
Expand Down
5 changes: 3 additions & 2 deletions packages/components/psammead-navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,9 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
<!-- prettier-ignore -->
| Argument | Type | Required | Default | Example |
| -------- | ---- | -------- | ------- | ------- |
| children | node | Yes | N/A | `<ScrollableNavigation dir={dir}><NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl><ScrollableNavigation/>` |
| dir | string | No | `'ltr'` | `'rtl'` |
| children | node | Yes | N/A | `<ScrollableNavigation dir={dir}><NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl><ScrollableNavigation/>` |
| dir | string | No | `'ltr'` | `'rtl'` |
| changeBackground | boolean | No | `false` | `true` |
Bopchy marked this conversation as resolved.
Show resolved Hide resolved

### NavigationUl

Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-navigation/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/psammead-navigation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-navigation",
"version": "6.0.0-alpha.5",
"version": "6.0.0-alpha.6",
"description": "A navigation bar to use on index pages",
"main": "dist/index.js",
"module": "esm/index.js",
Expand Down
20 changes: 15 additions & 5 deletions packages/components/psammead-navigation/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ 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 { C_WHITE, C_POSTBOX, C_GHOST } from '@bbc/psammead-styles/colours';
import {
C_WHITE,
C_POSTBOX,
C_EBON,
C_GHOST,
} from '@bbc/psammead-styles/colours';
import {
GEL_SPACING_HLF,
GEL_SPACING,
Expand Down Expand Up @@ -214,7 +219,8 @@ NavigationLi.defaultProps = {

const StyledNav = styled.nav`
position: relative;
background-color: ${C_POSTBOX};
${({ isOpen }) =>
isOpen ? `background-color: ${C_EBON};` : `background-color: ${C_POSTBOX};`}
This conversation was marked as resolved.
Show resolved Hide resolved
border-top: 0.0625rem solid ${C_WHITE};

${StyledListItem} {
Expand All @@ -226,9 +232,9 @@ const StyledNav = styled.nav`
}
`;

const Navigation = ({ children, dir }) => {
const Navigation = ({ children, dir, isOpen }) => {
return (
<StyledNav role="navigation" dir={dir}>
<StyledNav role="navigation" dir={dir} isOpen={isOpen}>
<NavWrapper>{children}</NavWrapper>
</StyledNav>
);
Expand All @@ -237,8 +243,12 @@ const Navigation = ({ children, dir }) => {
Navigation.propTypes = {
children: node.isRequired,
dir: oneOf(['ltr', 'rtl']),
isOpen: bool,
};

Navigation.defaultProps = { dir: 'ltr' };
Navigation.defaultProps = {
dir: 'ltr',
isOpen: false,
};

export default Navigation;