@financial-times/dotcom-ui-header 7.3.0 → 7.3.2

package/src/__stories__/story-data/profile.ts

@@ -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

package/src/__stories__/story-data/subNavigationProfile.ts

@@ -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 }

package/src/__stories__/story-data/subNavigationUK.ts

@@ -0,0 +1,37 @@
+import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
+
+const item: TNavMenuItem = {
+  label: 'UK',
+  url: '/world/uk',
+  selected: true,
+  submenu: null
+}
+
+const siblings: TNavMenuItem[] = []
+
+const children: TNavMenuItem[] = [
+  {
+    label: 'UK Business & Economy',
+    url: '/uk-business-economy',
+    submenu: null
+  },
+  {
+    label: 'UK Politics & Policy',
+    url: '/world/uk/politics',
+    submenu: null
+  },
+  {
+    label: 'UK Companies',
+    url: '/companies/uk',
+    submenu: null
+  }
+]
+
+const ancestors: TNavMenuItem[] = [
+  {
+    label: 'World',
+    url: '/world'
+  }
+]
+
+export default { item, siblings, children, ancestors }

package/src/__stories__/story-data/user.ts

@@ -0,0 +1,13 @@
+import { TNavMenu } from '@financial-times/dotcom-types-navigation'
+
+const data: TNavMenu = {
+  label: 'User',
+  items: [
+    { label: 'Help Centre', url: 'http://help.ft.com', submenu: null },
+    { label: 'Settings & Account', url: 'https://www.ft.com/myaccount', submenu: null },
+    { label: 'Contact Preferences', url: '/myft/alerts', submenu: null },
+    { label: 'Sign Out', url: '/logout', submenu: null }
+  ]
+}
+
+export default data

package/src/__stories__/story.tsx

@@ -0,0 +1,163 @@
+import React from 'react'
+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 storyData from './story-data'
+import profileStoryData from './story-data/profile'
+import '../../styles.scss'
+import './demos.scss'
+
+const onReadyCallback = () => {
+  // Passing a cors-anywhere hostname to n-topic-search
+  // An 'origin' request header will be set on the subsequent fetch request to next-search-api
+  // This satisfies the api's cors rules allowing a response to be sent and rendered on localhost
+  header.init({ hostName: 'cors-anywhere.herokuapp.com/www.ft.com' })
+}
+
+export default {
+  title: 'FT / Header',
+  args: {
+    currentPath: '/'
+  },
+  argTypes: {
+    currentPath: {
+      control: {
+        type: 'radio',
+        options: { show: '/', hide: '/404' }
+      }
+    }
+  }
+}
+
+export const DefaultHeaderWithDrawer = (args) => (
+  <OnReady callback={onReadyCallback}>
+    <HeaderSimple {...storyData} {...args} />
+    <Drawer {...storyData} {...args} />
+  </OnReady>
+)
+
+DefaultHeaderWithDrawer.story = {
+  name: 'Default header with drawer'
+}
+DefaultHeaderWithDrawer.args = {
+  showSubNavigation: true,
+  showMegaNav: true,
+  showUserNavigation: true,
+  userIsLoggedIn: false,
+  userIsSubscribed: false,
+  showLogoLink: false
+}
+
+export const DefaultHeaderWithRightAlignedSubnav = (args) => (
+  <OnReady callback={onReadyCallback}>
+    <HeaderSimple {...profileStoryData} {...args} />
+    <Drawer {...profileStoryData} {...args} />
+  </OnReady>
+)
+
+DefaultHeaderWithRightAlignedSubnav.story = {
+  name: 'Default header with right aligned subnav'
+}
+DefaultHeaderWithRightAlignedSubnav.args = {
+  showSubNavigation: true,
+  showMegaNav: true,
+  showUserNavigation: true,
+  userIsLoggedIn: true,
+  showLogoLink: false
+}
+
+export const LargeHeaderWithDrawer = (args) => (
+  <OnReady callback={onReadyCallback}>
+    <HeaderLarge {...storyData} {...args} />
+    <Drawer {...storyData} {...args} />
+  </OnReady>
+)
+
+LargeHeaderWithDrawer.story = {
+  name: 'Large header with drawer'
+}
+LargeHeaderWithDrawer.story = {
+  name: 'Default header with drawer'
+}
+LargeHeaderWithDrawer.args = {
+  showSubNavigation: true,
+  showMegaNav: true,
+  showUserNavigation: true,
+  userIsLoggedIn: false,
+  variant: 'large-logo'
+}
+
+export const _StickyHeader = (args) => (
+  <OnReady callback={() => header.init()}>
+    <StickyHeader {...storyData} {...args} />
+    <p className="demo-sticky-message demo-sticky-message--scroll">Scroll down</p>
+  </OnReady>
+)
+
+_StickyHeader.story = {
+  name: 'Sticky header'
+}
+_StickyHeader.args = {
+  showUserNavigation: true,
+  userIsLoggedIn: false,
+  userIsSubscribed: false,
+  showStickyHeader: false
+}
+_StickyHeader.argTypes = {
+  currentPath: {
+    table: {
+      disable: true
+    }
+  }
+}
+
+export const _LogoOnly = (args) => {
+  return <LogoOnly {...args} />
+}
+
+_LogoOnly.story = {
+  name: 'Logo only'
+}
+_LogoOnly.args = {
+  variant: 'simple',
+  showLogoLink: false
+}
+_LogoOnly.argTypes = {
+  variant: {
+    control: {
+      type: 'radio',
+      options: { default: 'simple', large: 'large' }
+    }
+  },
+  currentPath: {
+    table: {
+      disable: true
+    }
+  }
+}
+
+export const NoOutboundLinks = (args) => <NoOutboundLinksHeader {...storyData} {...args} />
+
+NoOutboundLinks.story = {
+  name: 'No Outbound links'
+}
+NoOutboundLinks.args = {
+  showSubNavigation: true,
+  showUserNavigation: true,
+  userIsLoggedIn: false,
+  showLogoLink: false
+}
+NoOutboundLinks.argTypes = {
+  currentPath: {
+    table: {
+      disable: true
+    }
+  }
+}

package/src/__test__/components/Drawer.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import fixture from '../../__stories__/story-data/index'
+import { Drawer as Subject } from '../../index'
+
+const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
+const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
+
+describe('dotcom-ui-header/src/components/Drawer', () => {
+  it('renders as an anonymous user', () => {
+    const tree = renderer.create(<Subject {...propsAnonymous} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders as a logged in user', () => {
+    const tree = renderer.create(<Subject {...propsLoggedIn} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/MainHeader.spec.tsx

@@ -0,0 +1,26 @@
+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', () => {
+    const tree = renderer.create(<Subject {...propsAnonymous} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders as a logged in user', () => {
+    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()
+  })
+})

package/src/__test__/components/NoOutboundLinks.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import fixture from '../../__stories__/story-data/index'
+import { NoOutboundLinksHeader as Subject } from '../../index'
+
+const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
+const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
+
+describe('dotcom-ui-header/src/components/NoOutboundLinksHeader', () => {
+  it('renders as an anonymous user', () => {
+    const tree = renderer.create(<Subject {...propsAnonymous} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders as a logged in user', () => {
+    const tree = renderer.create(<Subject {...propsLoggedIn} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/StickyHeader.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import fixture from '../../__stories__/story-data/index'
+import { StickyHeader as Subject } from '../../index'
+
+const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
+const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
+
+describe('dotcom-ui-header/src/components/StickyHeader', () => {
+  it('renders as an anonymous user', () => {
+    const tree = renderer.create(<Subject {...propsAnonymous} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders as a logged in user', () => {
+    const tree = renderer.create(<Subject {...propsLoggedIn} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})