@financial-times/dotcom-ui-header 2.6.0

package/src/components/sticky/partials.tsx

@@ -0,0 +1,137 @@
+/* WARN: This file looks similar to ../top/partials */
+/* This is the sticky header variant */
+
+import React from 'react'
+import { NavListRightAnon } from '../navigation/partials'
+import { THeaderProps } from '../../interfaces'
+
+const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }) => (
+  <header
+    className={`o-header o-header--simple o-header--sticky o--if-js`}
+    data-o-component="o-header"
+    data-o-header--sticky
+    aria-hidden="true">
+    {props.children}
+  </header>
+)
+
+const DrawerIconSticky = () => (
+  <a
+    href="#"
+    className="o-header__top-link o-header__top-link--menu"
+    aria-controls="o-header-drawer"
+    data-trackable="drawer-toggle"
+    tabIndex={-1}>
+    <span className="o-header__top-link-label">Menu</span>
+  </a>
+)
+
+const SearchIconSticky = () => (
+  <a
+    href="#"
+    className="o-header__top-link o-header__top-link--search"
+    aria-controls="o-header-search-sticky"
+    data-trackable="search-toggle"
+    tabIndex={-1}>
+    <span className="o-header__top-link-label">Search</span>
+  </a>
+)
+
+const Navigation = (props: THeaderProps) => (
+  <div className="o-header__top-takeover">
+    <div className="o-header__nav">
+      <ul className="o-header__nav-list o-header__nav-list--left" data-trackable="primary-nav">
+        {props.data.navbar.items.map((item, index) => (
+          <li className="o-header__nav-item" key={`link-${index}`}>
+            <a
+              className="o-header__nav-link o-header__nav-link--primary"
+              href={item.url}
+              data-trackable={item.label}
+              tabIndex={-1}>
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+)
+
+const Logo = () => (
+  <a
+    className="o-header__top-logo o-header__hide--L"
+    data-trackable="logo"
+    href="/"
+    title="Go to Financial Times homepage"
+    tabIndex={-1}>
+    <span className="o-header__visually-hidden">Financial Times</span>
+  </a>
+)
+
+const NavListRightAnonSticky = (props: THeaderProps) => {
+  const navbarItems = props.data['navbar-right-anon'].items
+
+  return (
+    <div className="o-header__nav">
+      <NavListRightAnon items={navbarItems} variant="sticky" />
+    </div>
+  )
+}
+
+const MyFtSticky = () => (
+  <a
+    className="o-header__top-link o-header__top-link--myft"
+    href="/myft"
+    data-trackable="my-ft"
+    tabIndex={-1}>
+    <span className="o-header__visually-hidden">myFT</span>
+  </a>
+)
+
+const TopWrapperSticky = (props) => (
+  <div className="o-header__row o-header__top" data-trackable="header-sticky">
+    <div className="o-header__container">
+      <div className="o-header__top-wrapper">{props.children}</div>
+    </div>
+  </div>
+)
+
+const TopColumnLeftSticky = () => {
+  return (
+    <div className="o-header__top-column o-header__top-column--left">
+      <DrawerIconSticky />
+      <SearchIconSticky />
+    </div>
+  )
+}
+const TopColumnCenterSticky = (props: THeaderProps) => {
+  return (
+    <div className="o-header__top-column o-header__top-column--center">
+      <Navigation {...props} />
+      <Logo />
+    </div>
+  )
+}
+
+// This behaviour is similar to `NavListRight` in '../navigation/partials' but:
+// - The sticky header renders either the `navbar-right-anon` data or the myFT component
+// - The normal header renders either the `navbar-right-anon` or the `navbar-right` data
+const TopColumnRightSticky = (props: THeaderProps) => {
+  let children = null
+
+  if (props.userIsLoggedIn) {
+    children = <MyFtSticky />
+  } else if (props.showUserNavigation) {
+    children = <NavListRightAnonSticky {...props} />
+  }
+
+  return <div className="o-header__top-column o-header__top-column--right">{children}</div>
+}
+
+export {
+  StickyHeaderWrapper,
+  TopWrapperSticky,
+  TopColumnLeftSticky,
+  TopColumnCenterSticky,
+  TopColumnRightSticky
+}

package/src/components/sub-navigation/partials.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { ariaSelected } from '../../utils'
+import { THeaderProps } from '../../interfaces'
+import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
+
+const SubNavigation = (props: THeaderProps) => (
+  <SubNavigationWrapper>
+    <BreadCrumb items={props.data.breadcrumb} />
+    <SubSections items={props.data.subsections} />
+    <SubSections items={props.data['subsections-right']} rightAlignment={true} />
+  </SubNavigationWrapper>
+)
+
+const SubNavigationWrapper = (props) => (
+  <div
+    className="o-header__subnav"
+    role="navigation"
+    aria-label="Sub navigation"
+    data-o-header-subnav
+    data-trackable="header-subnav">
+    <div className="o-header__container">
+      <div className="o-header__subnav-wrap-outside">
+        <div className="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
+          <div className="o-header__subnav-content">{props.children}</div>
+        </div>
+        {/* Implements subNavigation scrolling at smaller viewports */}
+        <button
+          className="o-header__subnav-button o-header__subnav-button--left"
+          title="scroll left"
+          aria-label="scroll left"
+          aria-hidden="true"
+          disabled
+        />
+        <button
+          className="o-header__subnav-button o-header__subnav-button--right"
+          title="scroll right"
+          aria-label="scroll right"
+          aria-hidden="true"
+          disabled
+        />
+      </div>
+    </div>
+  </div>
+)
+
+const BreadCrumb = ({ items }: { items: TNavMenuItem[] }) => (
+  <ol
+    className="o-header__subnav-list o-header__subnav-list--breadcrumb"
+    aria-label="Breadcrumb"
+    data-trackable="breadcrumb">
+    {items.map((item, index) => {
+      const selected = item.selected ? 'o-header__subnav-link--highlight' : ''
+
+      return (
+        <li className="o-header__subnav-item" key={`item-${index}`}>
+          <a
+            className={`o-header__subnav-link ${selected}`}
+            href={item.url}
+            {...ariaSelected(item)}
+            data-trackable={item.label}>
+            {item.label}
+          </a>
+        </li>
+      )
+    })}
+  </ol>
+)
+
+const SubSections = ({ items, rightAlignment }: { items: TNavMenuItem[]; rightAlignment?: boolean }) => {
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  return (
+    <ul
+      className={
+        'o-header__subnav-list o-header__subnav-list--children' +
+        (rightAlignment ? ' o-header__subnav-list--right' : '')
+      }
+      aria-label={rightAlignment ? 'Additional Sub Navigation' : 'Subsections'}
+      data-trackable="subsections">
+      {items.map((item, index) => {
+        const selected = item.selected ? 'o-header__subnav-link--highlight' : ''
+
+        return (
+          <li className="o-header__subnav-item" key={`item-${index}`}>
+            <a
+              className={`o-header__subnav-link ${selected}`}
+              href={item.url}
+              {...ariaSelected(item)}
+              data-trackable={item.label}>
+              {item.label}
+            </a>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export { SubNavigation }

package/src/components/svg-components/BrandFtMasthead.tsx

@@ -0,0 +1,16 @@
+// **THIS IS AN AUTO-GENERATED FILE (`npm run build:svg-to-react`) - DO NOT EDIT MANUALLY.**
+
+import React from 'react'
+
+const BrandFtMasthead = ({ title, ...props }) => (
+  <svg viewBox="0 0 1054 86" {...props}>
+    {title === undefined ? <title>{'brand-ft-masthead'}</title> : title ? <title>{title}</title> : null}
+    <path
+      d="M26.177 72.609c0 5.938 1.697 7.295 12.554 7.295v3.732H.9v-3.732c7.464 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.546-7.126-10.01-7.126V1.357h63.448l.34 22.563h-3.054C59.937 6.956 55.696 5.43 39.919 5.43H26.008v33.59h11.196c10.688 0 11.367-1.697 12.215-10.179h3.054v24.599h-3.054c-.848-8.482-1.527-10.01-12.215-10.01H26.008v29.18h.17zm46.314 11.027v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.465 0-10.01.679-10.01 7.126v60.564c0 6.446 2.545 7.125 10.01 7.125v3.732H72.49zm115.36 1.357l-56.323-69.725V72.44c0 6.617 4.58 7.634 12.385 7.634v3.733h-29.858v-3.733c7.803 0 12.045-1.017 12.045-7.634V8.991c-3.563-3.732-6.108-3.902-12.045-3.902V1.357h26.465l43.09 55.475V12.554c0-6.616-4.58-7.634-12.384-7.634V1.357h30.027V5.09c-7.803 0-12.045 1.018-12.045 7.635v72.27h-1.357zm40.207-1.357h-29.689v-3.732c7.804 0 11.367-1.018 13.911-7.804L239.085.509h7.464l28.84 72.1c2.545 6.447 3.732 7.125 9.67 7.125v3.732h-34.438v-3.732c10.518 0 11.536-.848 8.99-7.125l-8.481-21.884h-25.787L217.71 71.93c-2.375 6.447 1.357 7.804 10.518 7.804v3.902h-.17zm-1.188-37.153h22.393l-11.705-29.518-10.688 29.518zm135.548 38.51l-56.153-69.725V72.44c0 6.617 4.58 7.634 12.384 7.634v3.733h-29.18v-3.733c7.126 0 11.367-1.017 11.367-7.634V9.161c-4.071-3.732-7.125-4.072-13.91-4.072V1.357h28.16l43.09 55.475V12.554c0-6.616-4.58-7.634-12.383-7.634V1.357h29.858V5.09c-7.804 0-12.045 1.018-12.045 7.635v72.27h-1.188zm83.297-83.805h2.036l1.187 24.598-3.053.17c-2.036-14.08-9.5-21.545-23.242-21.545-15.268 0-26.804 13.063-26.804 33.081 0 25.617 16.116 40.206 33.08 40.206 7.296 0 13.912-2.035 20.358-8.99l2.376 2.374c-5.26 7.465-15.608 13.742-29.52 13.742-20.696 0-41.732-15.608-41.732-41.734C380.4 17.813 399.57 0 422.813 0c11.027 0 16.795 4.75 19.848 4.75 1.357 0 2.375-1.187 3.054-3.562zm12.723 82.448v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.464 0-10.01.679-10.01 7.126v60.564c0 6.446 2.546 7.125 10.01 7.125v3.732h-35.287zm68.538 0h-27.653v-3.732c6.108 0 9.331-1.018 11.876-7.804L538.003.509h7.464l28.84 72.1c2.545 6.447 3.733 7.125 9.67 7.125v3.732H549.54v-3.732c10.518 0 11.536-.848 8.991-7.125l-8.482-21.884h-25.786l-7.635 21.205c-2.375 6.447 1.358 7.804 10.519 7.804v3.902h-.17zm-1.188-37.153h22.394l-11.536-29.518-10.858 29.518zm63.957 37.153v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.117V5.09c-7.464 0-9.84.679-9.84 7.126v61.073c0 5.428 2.715 6.107 7.126 6.107h4.241c15.947 0 21.036-2.375 25.447-20.527l3.054.339-2.545 24.26h-62.6v.17zM760.75 1.357l.339 23.92h-3.054C756.34 7.634 752.098 5.43 736.32 5.43h-5.089v67.18c0 6.447 2.375 7.295 12.554 7.295v3.732h-40.376v-3.732c10.179 0 12.723-1.018 12.723-7.295V5.429h-5.089c-15.777 0-20.018 2.205-21.715 19.848h-3.053l.339-23.92h74.136zm7.973 82.28v-3.733c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.465 0-10.01.679-10.01 7.126v60.564c0 6.446 2.545 7.125 10.01 7.125v3.732h-35.287zM910.21 1.356V5.09c-7.465 0-10.688.34-10.01 6.956l6.447 61.073c.679 6.277 3.054 6.955 10.518 6.955v3.733h-35.117v-3.733c7.295 0 9.84-.678 9.331-6.955L884.762 8.99l-25.956 76.172h-1.018L832.34 8.822l-6.108 64.126c-.678 6.447 3.733 7.125 11.197 7.125v3.733h-27.483v-3.733c7.465 0 10.01-1.187 10.518-7.125l6.447-61.073c.679-6.446-2.545-6.955-10.01-6.955V1.357h28.84l17.305 56.153 18.661-56.153h28.5zm65.653 52.082h-3.053c-.849-8.482-1.527-10.01-12.215-10.01H948.04v29.859c0 5.428 2.715 6.107 7.125 6.107h6.786c15.947 0 21.036-2.375 25.447-20.527l3.054.339-2.884 24.26h-64.805v-3.733c7.464 0 10.009-.678 10.009-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h62.261l.34 20.527h-3.054c-1.866-14.59-5.598-16.286-21.885-16.286H948.21v33.42h12.554c10.687 0 11.366-1.696 12.214-10.178h3.054v24.599h-.17zm65.484 13.232c0-7.464-4.75-11.196-12.893-15.777l-13.063-6.786c-9.84-5.259-15.607-11.027-15.607-21.375C999.783 9.84 1010.81 0 1025.23 0c9.84 0 14.929 4.75 17.813 4.75 1.866 0 2.714-1.187 3.562-3.562h2.375l1.188 23.072-3.054.17c-1.696-11.198-9.67-19.85-20.866-19.85-8.483 0-14.081 5.09-14.081 12.215 0 7.804 5.937 11.027 12.554 14.59l11.196 5.937c10.519 5.768 17.983 11.536 17.983 22.563 0 14.59-12.554 24.939-28.161 24.939-11.028 0-16.456-5.26-19.34-5.26-1.866 0-2.884 1.697-3.732 4.242h-2.376l-1.696-24.43 3.054-.339c2.375 15.268 12.893 21.545 23.411 21.545 8.822-.17 16.286-4.071 16.286-13.91z"
+      fill="#231F20"
+      fillRule="evenodd"
+    />
+  </svg>
+)
+
+export default BrandFtMasthead

package/src/components/top/partials.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import BrandFtMastheadSvg from '../svg-components/BrandFtMasthead'
+
+const HeaderWrapper = (props) => (
+  <header
+    id="site-navigation"
+    className={`o-header o-header--${props.variant || 'simple'}`}
+    data-o-component="o-header"
+    data-o-header--no-js={true}
+    tabIndex={-1}>
+    {props.children}
+  </header>
+)
+
+const DrawerIcon = () => (
+  <a
+    href="#o-header-drawer"
+    className="o-header__top-link o-header__top-link--menu"
+    aria-controls="o-header-drawer"
+    title="Open side navigation menu"
+    data-trackable="drawer-toggle">
+    <span className="o-header__top-link-label">Open side navigation menu</span>
+  </a>
+)
+
+const SearchIcon = () => (
+  <a
+    href={`#o-header-search-primary`}
+    className="o-header__top-link o-header__top-link--search"
+    aria-controls={`o-header-search-primary`}
+    title="Open search bar"
+    data-trackable="search-toggle">
+    <span className="o-header__top-link-label">Open search bar</span>
+  </a>
+)
+
+const MyFt = () => (
+  <a
+    className="o-header__top-link o-header__top-link--myft"
+    href="/myft"
+    data-trackable="my-ft"
+    data-tour-stage="myFt"
+    aria-label="My F T">
+    <span className="o-header__visually-hidden">myFT</span>
+  </a>
+)
+
+const TopWrapper = (props) => (
+  <div className="o-header__row o-header__top" data-trackable="header-top">
+    <div className="o-header__container">
+      <div className="o-header__top-wrapper">{props.children}</div>
+    </div>
+  </div>
+)
+
+const TopColumnLeft = () => (
+  <div className="o-header__top-column o-header__top-column--left">
+    <DrawerIcon />
+    <SearchIcon />
+  </div>
+)
+
+const TopColumnCenter = () => (
+  <div className="o-header__top-column o-header__top-column--center">
+    <a
+      className="o-header__top-logo"
+      style={{ backgroundImage: 'none' }}
+      data-trackable="logo"
+      href="/"
+      title="Go to Financial Times homepage">
+      <BrandFtMastheadSvg title="Financial Times" />
+    </a>
+  </div>
+)
+
+const TopColumnCenterNoLink = () => (
+  <div className="o-header__top-column o-header__top-column--center">
+    <div className="o-header__top-logo" style={{ backgroundImage: 'none' }}>
+      <BrandFtMastheadSvg title="Financial Times" />
+    </div>
+  </div>
+)
+
+const TopColumnRight = () => (
+  <div className="o-header__top-column o-header__top-column--right">
+    <MyFt />
+  </div>
+)
+
+export { HeaderWrapper, TopWrapper, TopColumnLeft, TopColumnCenter, TopColumnCenterNoLink, TopColumnRight }

package/src/header.scss

@@ -0,0 +1,29 @@
+// Search
+// At the time of writing o-header duplicates search markup.
+// Once for a core experience, once for an enhanced experience.
+// The enhanced version is hidden until toggled with JavaScript.
+// Instead since we can rely on the `core` class we can use the
+// one enhanced experience search block and reveal for the core 
+// experience if needed.
+.core [data-o-header-search] {
+  display: block;
+}
+
+// z-indexes
+.o-header__mega {
+  @include nUiZIndexFor('meganav');
+}
+
+.o-header__drawer {
+  @include nUiZIndexFor('drawer');
+  display: block;
+}
+
+.o-header--sticky {
+  @include nUiZIndexFor('sticky-header');
+}
+
+// Search typeahead
+.n-typeahead {
+  display: none;
+}

package/src/index.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import {
+  HeaderWrapper,
+  TopWrapper,
+  TopColumnLeft,
+  TopColumnCenter,
+  TopColumnCenterNoLink,
+  TopColumnRight
+} from './components/top/partials'
+import {
+  NavListLeft,
+  NavListRight,
+  NavDesktop,
+  UserActionsNav,
+  MobileNav
+} from './components/navigation/partials'
+import {
+  StickyHeaderWrapper,
+  TopWrapperSticky,
+  TopColumnCenterSticky,
+  TopColumnLeftSticky,
+  TopColumnRightSticky
+} from './components/sticky/partials'
+import { SubNavigation } from './components/sub-navigation/partials'
+import { IncludeDrawer } from './components/drawer/topLevelPartials'
+import { Search } from './components/search/partials'
+
+import { THeaderProps, THeaderOptions } from './interfaces'
+
+const defaultProps: Partial<THeaderOptions> = {
+  showSubNavigation: true,
+  showUserNavigation: true,
+  userIsAnonymous: true,
+  userIsLoggedIn: false,
+  showStickyHeader: true,
+  showMegaNav: true
+}
+
+function MainHeader(props: THeaderProps) {
+  const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn
+  const includeSubNavigation = props.showSubNavigation && (props.data.breadcrumb || props.data.subsections)
+
+  return (
+    <HeaderWrapper {...props}>
+      {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
+      <TopWrapper>
+        <TopColumnLeft />
+        {props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}
+        <TopColumnRight />
+      </TopWrapper>
+      <Search instance="primary" />
+      <MobileNav {...props} />
+      <NavDesktop>
+        <NavListLeft {...props} />
+        {props.showUserNavigation ? <NavListRight {...props} /> : null}
+      </NavDesktop>
+      {includeSubNavigation ? <SubNavigation {...props} /> : null}
+    </HeaderWrapper>
+  )
+}
+
+MainHeader.defaultProps = { ...defaultProps, showLogoLink: true }
+
+function StickyHeader(props: THeaderProps) {
+  return props.showStickyHeader ? (
+    <StickyHeaderWrapper {...props}>
+      <TopWrapperSticky>
+        <TopColumnLeftSticky />
+        <TopColumnCenterSticky {...props} />
+        <TopColumnRightSticky {...props} />
+      </TopWrapperSticky>
+      <Search instance="sticky" />
+    </StickyHeaderWrapper>
+  ) : null
+}
+
+StickyHeader.defaultProps = defaultProps
+
+function Header(props: THeaderProps) {
+  return (
+    <React.Fragment>
+      <MainHeader {...props} />
+      <StickyHeader {...props} />
+    </React.Fragment>
+  )
+}
+
+Header.defaultProps = defaultProps
+
+function LogoOnly(props: Pick<THeaderProps, 'variant' | 'showLogoLink'>) {
+  return (
+    <HeaderWrapper {...props}>
+      <TopWrapper>{props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}</TopWrapper>
+    </HeaderWrapper>
+  )
+}
+
+LogoOnly.defaultProps = defaultProps
+
+function Drawer(props: THeaderProps) {
+  return <IncludeDrawer {...props} />
+}
+
+Drawer.defaultProps = defaultProps
+
+function NoOutboundLinksHeader(props: THeaderProps) {
+  const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn
+  const includeSubNavigation = props.showSubNavigation && (props.data.breadcrumb || props.data.subsections)
+
+  return (
+    <HeaderWrapper {...props}>
+      {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
+      <TopWrapper>{props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}</TopWrapper>
+      <NavDesktop>{props.showUserNavigation ? <NavListRight {...props} /> : null}</NavDesktop>
+      {includeSubNavigation ? <SubNavigation {...props} /> : null}
+    </HeaderWrapper>
+  )
+}
+
+NoOutboundLinksHeader.defaultProps = defaultProps
+
+export { Header, MainHeader, StickyHeader, LogoOnly, NoOutboundLinksHeader, Drawer }
+export type { THeaderProps }

package/src/interfaces.d.ts

@@ -0,0 +1,18 @@
+import { TNavigationData } from '@financial-times/dotcom-types-navigation'
+
+export type THeaderOptions = {
+  variant?: THeaderVariant
+  userIsAnonymous?: boolean
+  userIsLoggedIn?: boolean
+  showSubNavigation?: boolean
+  showUserNavigation?: boolean
+  showStickyHeader?: boolean
+  showMegaNav?: boolean
+  showLogoLink?: boolean
+}
+
+export type THeaderProps = THeaderOptions & {
+  data: TNavigationData
+}
+
+export type THeaderVariant = 'simple' | 'large-logo'

package/src/utils.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react'
+
+export const ariaSelected = (item): HTMLAttributes<HTMLElement> | null => {
+  return item.selected ? { 'aria-label': `${item.label}, current page`, 'aria-current': 'page' } : null
+}

package/styles.scss

@@ -0,0 +1,14 @@
+// This will be overridden by dotcom-ui-layout, it's necessary here for storybook builds
+$system-code: 'page-kit-header' !default;
+
+@import "n-ui-foundations/mixins";
+
+// We don't need the sub-brand or transparent header styles so disable them.
+// TODO: move drawer styles into a separate stylesheet which can be lazy loaded?
+@import "o-header/main";
+@include oHeader(('top', 'nav', 'subnav', 'search', 'megamenu', 'drawer', 'anon', 'sticky', 'simple'));
+
+@import "src/header";
+
+@import "n-topic-search/main";
+@include nTopicSearch;