@financial-times/dotcom-ui-header 7.2.7 → 7.3.1

package/src/components/sticky/partials.tsx

@@ -1,164 +0,0 @@
-/* WARN: This file looks similar to ../top/partials */
-/* This is the sticky header variant */
-
-import React from 'react'
-import { SubscribeButton, SignInLink } from '../top/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-icon-link o-header__top-icon-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-icon-link o-header__top-icon-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 ?? undefined}
-              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) => {
-  // If user is anonymous the second list item is styled as a button
-  const [signInAction, subscribeAction] = props.data['navbar-right-anon'].items
-  return (
-    <div className="o-header__nav">
-      <div className="o-header__top-column o-header__top-column--right">
-        {subscribeAction && (
-          <SubscribeButton item={subscribeAction} variant="sticky" className="o-header__top-button--hide-m" />
-        )}
-        {signInAction && <SignInLink item={signInAction} variant="sticky" className="" />}
-      </div>
-    </div>
-  )
-}
-
-const MyFtSticky = ({ className }: { className?: string }) => (
-  <a
-    className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
-    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>
-  )
-}
-
-const NavListRightLoggedInSticky = (props: THeaderProps) => {
-  const subscribeAction = props.data['navbar-right-anon'].items?.[1]
-  return (
-    <React.Fragment>
-      {!props.userIsSubscribed && subscribeAction && (
-        <SubscribeButton
-          item={subscribeAction}
-          variant={props.variant}
-          className="o-header__top-button--hide-m"
-        />
-      )}
-      <MyFtSticky className="" />
-    </React.Fragment>
-  )
-}
-
-// 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: JSX.Element | undefined = undefined
-
-  if (props.userIsLoggedIn) {
-    children = <NavListRightLoggedInSticky {...props} />
-  } 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

@@ -1,106 +0,0 @@
-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 ?? undefined}
-            {...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 ?? undefined}
-              {...ariaSelected(item)}
-              data-trackable={item.label}
-            >
-              {item.label}
-            </a>
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
-
-export { SubNavigation }

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

@@ -1,16 +0,0 @@
-// **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

@@ -1,189 +0,0 @@
-import React from 'react'
-import { THeaderProps } from '../../interfaces'
-import BrandFtMastheadSvg from '../svg-components/BrandFtMasthead'
-import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
-
-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-icon-link o-header__top-icon-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-icon-link o-header__top-icon-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 = ({ className }: { className?: string }) => (
-  <a
-    className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
-    id="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 TopColumnRightLoggedIn = (props: THeaderProps) => {
-  const subscribeAction = props.data['navbar-right-anon']?.items?.[1]
-  return (
-    <div className="o-header__top-column o-header__top-column--right">
-      {!props.userIsSubscribed && subscribeAction && (
-        <SubscribeButton
-          item={subscribeAction}
-          variant={props.variant}
-          className="o-header__top-button--hide-m"
-        />
-      )}
-      <MyFt className="" />
-    </div>
-  )
-}
-
-const SignInLink = ({
-  item,
-  variant,
-  className
-}: {
-  item: TNavMenuItem
-  variant?: string
-  className?: string
-}) => {
-  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
-  return (
-    <a
-      className={`o-header__top-link ${className}`}
-      href={item.url ?? undefined}
-      data-trackable={item.label}
-      {...setTabIndex}
-    >
-      {item.label}
-    </a>
-  )
-}
-const SubscribeButton = ({
-  item,
-  variant,
-  className
-}: {
-  item: TNavMenuItem
-  variant?: string
-  className?: string
-}) => {
-  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
-  return (
-    <a
-      className={`o-header__top-button ${className}`}
-      // Added as the result of a DAC audit. This will be confusing for users of voice activation software
-      // as it looks like a button but behaves like a link without this role.
-      role="button"
-      href={item.url ?? undefined}
-      data-trackable={item.label}
-      {...setTabIndex}
-    >
-      {item.label}
-    </a>
-  )
-}
-
-const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: string }) => {
-  // If user is anonymous the second list item is styled as a button
-  const [signInAction, subscribeAction] = items
-  return (
-    <div className="o-header__top-column o-header__top-column--right">
-      {subscribeAction && (
-        <SubscribeButton item={subscribeAction} variant={variant} className="o-header__top-button--hide-m" />
-      )}
-      {signInAction && (
-        <SignInLink item={signInAction} variant={variant} className="o-header__top-link--hide-m" />
-      )}
-      <MyFt className="o-header__top-icon-link--show-m" />
-    </div>
-  )
-}
-
-const TopColumnRight = (props: THeaderProps) => {
-  if (props.userIsLoggedIn) {
-    return <TopColumnRightLoggedIn {...props} />
-  } else {
-    const userNavAnonItems = props.data['navbar-right-anon'].items
-    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
-  }
-}
-
-export {
-  HeaderWrapper,
-  TopWrapper,
-  TopColumnLeft,
-  TopColumnCenter,
-  TopColumnCenterNoLink,
-  TopColumnRight,
-  TopColumnRightAnon,
-  SubscribeButton,
-  SignInLink
-}

package/src/header.scss

@@ -1,29 +0,0 @@
-// 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

@@ -1,123 +0,0 @@
-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 {...props} />
-      </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

@@ -1,19 +0,0 @@
-import { TNavigationData } from '@financial-times/dotcom-types-navigation'
-
-export type THeaderOptions = {
-  variant?: THeaderVariant
-  userIsAnonymous?: boolean
-  userIsLoggedIn?: boolean
-  userIsSubscribed?: 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

@@ -1,5 +0,0 @@
-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

@@ -1,14 +0,0 @@
-// 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 "@financial-times/o-header/main";
-@include oHeader(('top', 'nav', 'subnav', 'search', 'megamenu', 'drawer', 'anon', 'sticky', 'simple'));
-
-@import "src/header";
-
-@import "n-topic-search/main";
-@include nTopicSearch;