Skip to content

Commit

Permalink
Merge pull request #854 from Financial-Times/header-right-aligned-sub…
Browse files Browse the repository at this point in the history
…-navigation

Add support for right aligned sub navigation in `dotcom-ui-header`
  • Loading branch information
andygout committed Sep 14, 2020
2 parents 129787b + d0a6670 commit 00cd9fa
Show file tree
Hide file tree
Showing 9 changed files with 1,956 additions and 7 deletions.
1 change: 1 addition & 0 deletions packages/dotcom-types-navigation/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export interface INavMeganavArticles {
export type TNavSubNavigation = {
breadcrumb?: TNavMenuItem[]
subsections?: TNavMenuItem[]
'subsections-right'?: TNavMenuItem[]
}

export type TNavEditions = {
Expand Down
2 changes: 1 addition & 1 deletion packages/dotcom-ui-header/bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "dotcom-ui-header",
"dependencies": {
"o-header": "^8.2.0",
"o-header": "^8.4.0",
"n-topic-search": "^3.0.0",
"n-ui-foundations": "^6.0.0"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const data: THeaderProps = {
'navbar-right-anon': navbarRightAnon,
'navbar-simple': navbarSimple,
subsections,
'subsections-right': [],
user
}
}
Expand Down
44 changes: 44 additions & 0 deletions packages/dotcom-ui-header/src/__stories__/story-data/profile.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import anon from './anon'
import drawerUK from './drawerUK'
import editionsUK from './editionsUK'
import navbarRight from './navbarRight'
import navbarRightAnon from './navbarRightAnon'
import navbarSimple from './navbarSimple'
import navbarUK from './navbarUK'
import subNavigation from './subNavigationProfile'
import user from './user'

import { THeaderProps } from '../../interfaces'

const breadcrumb = subNavigation.ancestors.concat(subNavigation.item)
const subsections = subNavigation.children

const data: THeaderProps = {
userIsAnonymous: false,
userIsLoggedIn: true,
showSubNavigation: true,
showUserNavigation: false,
showStickyHeader: true,
data: {
account: null,
anon,
breadcrumb,
drawer: drawerUK,
editions: editionsUK,
footer: null,
navbar: navbarUK,
'navbar-right': navbarRight,
'navbar-right-anon': navbarRightAnon,
'navbar-simple': navbarSimple,
subsections,
'subsections-right': [
{
label: 'Sign Out',
url: '#'
}
],
user
}
}

export default data
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'

const item: TNavMenuItem = {
label: 'Settings & Account',
url: '/myaccount/personal-details',
selected: true,
submenu: null
}

const siblings: TNavMenuItem[] = []

const children: TNavMenuItem[] = [
{
label: 'Personal Details',
url: '/myaccount/personal-details',
submenu: null
},
{
label: 'Licence',
url: '/myaccount/licence',
submenu: null
}
]

const ancestors: TNavMenuItem[] = []

export default { item, siblings, children, ancestors }
33 changes: 30 additions & 3 deletions packages/dotcom-ui-header/src/__stories__/story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,16 @@ import { storiesOf } from '@storybook/react'
import { withKnobs, radios, boolean } from '@storybook/addon-knobs'
import * as header from '../../browser.js'
import { OnReady } from '../../../../.storybook/components/OnReady'
import { Header as HeaderSimple, Header as HeaderLarge, Drawer, StickyHeader, LogoOnly, NoOutboundLinksHeader } from '../../src'
import {
Header as HeaderSimple,
Header as HeaderLarge,
Drawer,
StickyHeader,
LogoOnly,
NoOutboundLinksHeader
} from '../../src'
import storyData from './story-data'
import profileStoryData from './story-data/profile'
import '../../styles.scss'
import './demos.scss'

Expand All @@ -29,8 +37,8 @@ storiesOf('FT / Header', module)
.add('Default header with drawer', () => {
const knobs = {
showSubNavigation: toggleShowSubNav(),
showUserNavigation: toggleUserStateOptions(),
showMegaNav: toggleShowMegaNav(),
showUserNavigation: toggleUserStateOptions(),
userIsLoggedIn: toggleLoggedIn(),
currentPath: toggleMobileNav(),
showLogoLink: toggleShowLogoLink()
Expand All @@ -44,6 +52,25 @@ storiesOf('FT / Header', module)
</OnReady>
)
})
.add('Default header with right aligned subnav', () => {
const knobs = {
showMegaNav: toggleShowMegaNav(),
currentPath: toggleMobileNav(),
showLogoLink: toggleShowLogoLink(),
showUserNavigation: true,
showSubNavigation: true,
userIsLoggedIn: true
}

profileStoryData.data = { ...profileStoryData.data, currentPath: toggleMobileNav() }

return (
<OnReady callback={onReadyCallback}>
<HeaderSimple {...profileStoryData} {...knobs} />
<Drawer {...profileStoryData} {...knobs} />
</OnReady>
)
})
.add('Large header with drawer', () => {
const knobs = {
showSubNavigation: toggleShowSubNav(),
Expand Down Expand Up @@ -85,7 +112,7 @@ storiesOf('FT / Header', module)
userIsLoggedIn: toggleLoggedIn(),
showLogoLink: toggleShowLogoLink(),
showUserNavigation: toggleUserStateOptions(),
showSubNavigation: toggleShowSubNav(),
showSubNavigation: toggleShowSubNav()
}

return <NoOutboundLinksHeader {...storyData} {...knobs} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React from 'react'
import renderer from 'react-test-renderer'
import fixture from '../../__stories__/story-data/index'
import profileFixture from '../../__stories__/story-data/profile'
import { MainHeader as Subject } from '../../index'

const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
const propsRightAligned = { ...profileFixture }

describe('dotcom-ui-header/src/components/MainHeader', () => {
it('renders as an anonymous user', () => {
Expand All @@ -16,4 +18,9 @@ describe('dotcom-ui-header/src/components/MainHeader', () => {
const tree = renderer.create(<Subject {...propsLoggedIn} />).toJSON()
expect(tree).toMatchSnapshot()
})

it('renders a right aligned subnav', () => {
const tree = renderer.create(<Subject {...propsRightAligned} />).toJSON()
expect(tree).toMatchSnapshot()
})
})

0 comments on commit 00cd9fa

Please sign in to comment.