@financial-times/dotcom-ui-header 2.6.0

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@financial-times/dotcom-ui-header",
+  "version": "2.6.0",
+  "description": "",
+  "browser": "browser.js",
+  "main": "component.js",
+  "types": "src/index.tsx",
+  "styles": "styles.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "tsc": "../../node_modules/.bin/tsc --incremental",
+    "clean": "npm run clean:dist && npm run clean:node_modules",
+    "clean:dist": "rm -rf dist",
+    "clean:node_modules": "rm -rf node_modules",
+    "clean:install": "npm run clean && npm i",
+    "build": "npm run build:node",
+    "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
+    "build:svg-to-react": "node scripts/convertSvgsToReactComponents.js",
+    "dev": "npm run build:node -- --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@financial-times/dotcom-types-navigation": "^2.6.0"
+  },
+  "devDependencies": {
+    "@financial-times/logo-images": "^1.10.1",
+    "@svgr/core": "^5.0.0",
+    "camelcase": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6"
+  },
+  "engines": {
+    "node": ">= 12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
+    "directory": "packages/dotcom-ui-header"
+  },
+  "homepage": "https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-ui-header"
+}

package/scripts/convertSvgsToReactComponents.js

@@ -0,0 +1,23 @@
+const fs = require('fs')
+
+const camelCase = require('camelcase')
+const svgr = require('@svgr/core').default
+
+const logoNames = ['brand-ft-masthead']
+
+logoNames.forEach((logoName) => {
+  const pathToSvg = require.resolve(`@financial-times/logo-images/src/${logoName}.svg`)
+
+  const svgString = fs.readFileSync(pathToSvg).toString()
+
+  const componentName = camelCase(logoName, { pascalCase: true })
+
+  svgr(svgString, { titleProp: true }, { componentName }).then((jsCode) => {
+    const comment =
+      '// **THIS IS AN AUTO-GENERATED FILE (`npm run build:svg-to-react`) - DO NOT EDIT MANUALLY.**\n\n'
+
+    const fileExtension = 'tsx'
+
+    fs.writeFileSync(`src/components/svg-components/${componentName}.${fileExtension}`, comment + jsCode)
+  })
+})

package/src/components/drawer/additionalPartials.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { ariaSelected } from '../../utils'
+import { TNavMenuItem, TNavEditions } from '@financial-times/dotcom-types-navigation'
+
+export type TDrawerParentItemProps = {
+  item: TNavMenuItem
+  idSuffix: string
+}
+
+export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) => {
+  const selected = item.selected ? 'selected' : 'unselected'
+  return (
+    <React.Fragment>
+      <div key={item.url} className="o-header__drawer-menu-toggle-wrapper">
+        <a
+          className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`}
+          href={item.url}
+          {...ariaSelected(item)}
+          data-trackable={item.label}
+        >
+          {item.label}
+        </a>
+        <button
+          className={`o-header__drawer-menu-toggle o-header__drawer-menu-toggle--${selected}`}
+          aria-controls={`o-header-drawer-child-${idSuffix}`}
+          data-trackable={`sub-level-toggle | ${item.label}`}
+        >
+          {`Show more ${item.label}`}
+        </button>
+      </div>
+      <ul
+        className="o-header__drawer-menu-list o-header__drawer-menu-list--child"
+        id={`o-header-drawer-child-${idSuffix}`}
+        data-trackable="sub-level"
+      >
+        {(item.submenu.items as TNavMenuItem[]).map((item) => {
+          const selected = item.selected ? 'selected' : 'unselected'
+          return (
+            <li key={item.url} className="o-header__drawer-menu-item">
+              <a
+                className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`}
+                href={item.url}
+                data-trackable={item.label}
+                {...ariaSelected(item)}
+              >
+                {item.label}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    </React.Fragment>
+  )
+}
+
+export const DrawerSingleItem = (item: TNavMenuItem) => {
+  const selected = item.selected ? 'selected' : 'unselected'
+  return (
+    <a
+      className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`}
+      href={item.url}
+      data-trackable={item.label}
+      {...ariaSelected(item)}
+    >
+      {item.label}
+    </a>
+  )
+}
+
+export const DrawerSpecialItem = (item: TNavMenuItem) => {
+  const selected = item.selected ? 'selected' : 'unselected'
+  return (
+    <a
+      className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`}
+      href={item.url}
+      data-trackable={item.label}
+      {...ariaSelected(item)}
+    >
+      {item.label}
+    </a>
+  )
+}
+
+export const EditionsSwitcher = (editions: TNavEditions) => (
+  <ul className="o-header__drawer-menu-list">
+    {editions.others.map(({ id, name, url }) => {
+      const href = `${url}?edition=${id}`
+      return (
+        <li key={id} className="o-header__drawer-menu-item" data-trackable="edition-switcher">
+          <a className="o-header__drawer-menu-link" href={href} data-trackable={id}>
+            Switch to {name} Edition
+          </a>
+        </li>
+      )
+    })}
+  </ul>
+)

package/src/components/drawer/topLevelPartials.tsx

@@ -0,0 +1,153 @@
+import React from 'react'
+import { DrawerParentItem, DrawerSingleItem, DrawerSpecialItem, EditionsSwitcher } from './additionalPartials'
+import { THeaderProps } from '../../interfaces'
+import { TNavMenuItem, TNavMenu, TNavEditions } from '@financial-times/dotcom-types-navigation'
+
+const IncludeDrawer = (props) => <Drawer {...props} />
+
+const Drawer = (props: THeaderProps) => {
+  const editions = props.data.editions
+  const [primary, secondary, tertiary] = props.data.drawer.items
+  const user = props.userIsLoggedIn ? props.data.user : props.data.anon
+
+  return (
+    <div
+      className="o-header__drawer"
+      id="o-header-drawer"
+      role="navigation"
+      aria-label="Drawer menu"
+      data-o-header-drawer
+      data-o-header-drawer--no-js
+      data-trackable="drawer"
+      data-trackable-terminate
+    >
+      <div className="o-header__drawer-inner">
+        <DrawerTools {...editions} />
+        <Search />
+        <nav className="o-header__drawer-menu o-header__drawer-menu--primary o-header__drawer-menu--border">
+          {editions && <EditionsSwitcher {...editions} />}
+          <ul className="o-header__drawer-menu-list">
+            {primary ? <SectionPrimary {...primary} /> : null}
+            {secondary ? <SectionSecondary {...secondary} /> : null}
+            {tertiary ? <SectionTertiary {...tertiary} /> : null}
+          </ul>
+        </nav>
+        <UserMenu {...user} />
+      </div>
+    </div>
+  )
+}
+
+const DrawerTools = (props: TNavEditions) => (
+  <div className="o-header__drawer-tools">
+    <button
+      type="button"
+      className="o-header__drawer-tools-close"
+      title="Close drawer menu"
+      aria-controls="o-header-drawer"
+      data-trackable="close"
+    >
+      <span className="o-header__visually-hidden">Close drawer menu</span>
+    </button>
+    <a className="o-header__drawer-tools-logo" href="/" data-trackable="logo">
+      <span className="o-header__visually-hidden">Financial Times</span>
+    </a>
+    {props.current && <p className="o-header__drawer-current-edition">{`${props.current.name} Edition`}</p>}
+  </div>
+)
+
+const Search = () => (
+  <div className="o-header__drawer-search">
+    <form
+      className="o-header__drawer-search-form"
+      action="/search"
+      role="search"
+      aria-label="Site search"
+      data-n-topic-search
+      data-n-topic-search-categories="concepts,equities"
+      data-n-topic-search-view-all
+    >
+      <label className="o-header__visually-hidden" htmlFor="o-header-drawer-search-term">
+        Search the <abbr title="Financial Times">FT</abbr>
+      </label>
+      <input
+        className="o-header__drawer-search-term"
+        id="o-header-drawer-search-term"
+        name="q"
+        type="text"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck={false}
+        placeholder="Search the FT"
+        data-trackable="search-term"
+        data-n-topic-search-input
+      />
+      <button className="o-header__drawer-search-submit" type="submit" data-trackable="search-submit">
+        <span className="o-header__visually-hidden">Search</span>
+      </button>
+    </form>
+  </div>
+)
+
+const SectionPrimary = (props: TNavMenuItem) => {
+  return (
+    <React.Fragment>
+      <li className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">{props.label}</li>
+      {(props.submenu.items as TNavMenuItem[]).map((item, index) => (
+        <li key={item.url} className="o-header__drawer-menu-item">
+          {item.submenu ? (
+            <DrawerParentItem item={item} idSuffix={`${index}`} />
+          ) : (
+            <DrawerSingleItem {...item} />
+          )}
+        </li>
+      ))}
+    </React.Fragment>
+  )
+}
+
+const SectionSecondary = (props: TNavMenuItem) => (
+  <React.Fragment>
+    <li className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">{props.label}</li>
+    {(props.submenu.items as TNavMenuItem[]).map((item, index) => (
+      <li key={item.url} className="o-header__drawer-menu-item">
+        {item.submenu ? (
+          <DrawerParentItem item={item} idSuffix={'inner' + index} />
+        ) : (
+          <DrawerSingleItem {...item} />
+        )}
+      </li>
+    ))}
+  </React.Fragment>
+)
+
+const SectionTertiary = (props: TNavMenuItem) => (
+  <React.Fragment>
+    {(props.submenu.items as TNavMenuItem[]).map((item, index) => {
+      const divideItem = index === 0 ? 'o-header__drawer-menu-item--divide' : ''
+
+      return (
+        <li key={item.url} className={`o-header__drawer-menu-item ${divideItem}`}>
+          <DrawerSpecialItem {...item} />
+        </li>
+      )
+    })}
+  </React.Fragment>
+)
+
+const UserMenu = (props: TNavMenu) => (
+  <nav className="o-header__drawer-menu o-header__drawer-menu--user" data-trackable="user-nav">
+    <ul className="o-header__drawer-menu-list">
+      {props.items.map((item) => (
+        <li key={item.url} className="o-header__drawer-menu-item">
+          <a className="o-header__drawer-menu-link" href={item.url} data-trackable={item.label}>
+            {item.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </nav>
+)
+
+export { IncludeDrawer }

package/src/components/navigation/partials.tsx

@@ -0,0 +1,212 @@
+import React from 'react'
+import { THeaderProps } from '../../interfaces'
+import { ariaSelected } from '../../utils'
+import {
+  TNavMenuItem,
+  TNavMeganav,
+  INavMeganavSections,
+  INavMeganavArticles
+} from '@financial-times/dotcom-types-navigation'
+
+const MobileNav = (props: THeaderProps) => {
+  // Only display navigation on pages which are included in this menu
+  const targetUrls = props.data['navbar-simple'].items.map((item) => item.url)
+
+  return targetUrls.includes(props.data.currentPath) ? (
+    <NavMobile items={props.data['navbar-simple'].items} />
+  ) : null
+}
+
+const NavMobile = ({ items }: { items: TNavMenuItem[] }) => {
+  return (
+    <nav
+      id="o-header-nav-mobile"
+      className="o-header__row o-header__nav o-header__nav--mobile"
+      aria-hidden="true"
+      data-trackable="header-nav:mobile">
+      <ul className="o-header__nav-list">
+        {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}
+              {...ariaSelected(item)}
+              data-trackable={item.label}>
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+const NavDesktop = (props) => (
+  <nav
+    id="o-header-nav-desktop"
+    className="o-header__row o-header__nav o-header__nav--desktop"
+    role="navigation"
+    aria-label="Primary navigation"
+    data-trackable="header-nav:desktop">
+    <div className="o-header__container">{props.children}</div>
+  </nav>
+)
+
+const NavListLeft = (props: THeaderProps) => (
+  <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}
+          id={`o-header-link-${index}`}
+          {...ariaSelected(item)}
+          data-trackable={item.label}>
+          {item.label}
+        </a>
+        {props.showMegaNav && Array.isArray(item.meganav) ? (
+          <MegaNav meganav={item.meganav} label={item.label} index={index} />
+        ) : null}
+      </li>
+    ))}
+  </ul>
+)
+
+const NavListRight = (props: THeaderProps) => {
+  if (props.userIsLoggedIn) {
+    return <NavListRightLoggedIn items={props.data['navbar-right'].items} />
+  } else {
+    return <NavListRightAnon items={props.data['navbar-right-anon'].items} />
+  }
+}
+
+const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
+  return (
+    <ul className="o-header__nav-list o-header__nav-list--right" data-trackable="user-nav">
+      {items.map((item, index) => (
+        <li className="o-header__nav-item" key={`link-${index}`}>
+          <a className="o-header__nav-link" href={item.url} data-trackable={item.label}>
+            {item.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+const NavListRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: string }) => {
+  // If user is anonymous the second list item is styled as a button
+  const [first, second] = items
+  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
+  return (
+    <ul className="o-header__nav-list o-header__nav-list--right" data-trackable="user-nav">
+      <li className="o-header__nav-item">
+        <a className="o-header__nav-link" href={first.url} data-trackable={first.label} {...setTabIndex}>
+          {first.label}
+        </a>
+      </li>
+      <li className="o-header__nav-item o-header__nav-item--hide-s">
+        <a
+          className="o-header__nav-button"
+          // 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={second.url}
+          data-trackable={second.label}
+          {...setTabIndex}>
+          {second.label}
+        </a>
+      </li>
+    </ul>
+  )
+}
+
+const MegaNav = ({ label, meganav, index }: { label: string; meganav: TNavMeganav[]; index: number }) => {
+  const sections = meganav.find(({ component }) => component === 'sectionlist')
+  const articles = meganav.find(({ component }) => component === 'articlelist')
+
+  return (
+    <div
+      className="o-header__mega"
+      id={`o-header-mega-${index}`}
+      role="group"
+      aria-labelledby={`o-header-link-${index}`}
+      data-o-header-mega
+      data-trackable={`meganav | ${label}`}>
+      <div className="o-header__container">
+        <div className="o-header__mega-wrapper">
+          {sections ? <SectionList {...(sections as INavMeganavSections)} /> : null}
+          {articles ? <ArticleList {...(articles as INavMeganavArticles)} /> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const SectionList = ({ title, data }: INavMeganavSections) => {
+  return (
+    <div className="o-header__mega-column o-header__mega-column--subsections" data-trackable="sections">
+      <div className="o-header__mega-heading">{title}</div>
+      <div className="o-header__mega-content">
+        <ul className="o-header__mega-list">
+          {data.map((column) =>
+            column.map((item, index) => (
+              <li className="o-header__mega-item" key={`link-${index}`}>
+                <a
+                  className="o-header__mega-link"
+                  href={item.url}
+                  {...ariaSelected(item)}
+                  data-trackable="link">
+                  {item.label}
+                </a>
+              </li>
+            ))
+          )}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+const ArticleList = ({ title, data }: INavMeganavArticles) => {
+  return (
+    <div className="o-header__mega-column o-header__mega-column--articles" data-trackable="popular">
+      <div className="o-header__mega-heading">{title}</div>
+      <div className="o-header__mega-content">
+        <ul className="o-header__mega-list">
+          {data.map((item, index) => (
+            <li className="o-header__mega-item" key={`link-${index}`}>
+              <a
+                className="o-header__mega-link"
+                href={item.url}
+                {...ariaSelected(item)}
+                data-trackable="link">
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+const UserActionsNav = (props: THeaderProps) => {
+  const userNavItems = props.data['navbar-right-anon'].items
+
+  return (
+    <div className="o-header__row o-header__anon" data-trackable="header-anon">
+      <ul className="o-header__anon-list">
+        {userNavItems.map((item, index) => (
+          <li className="o-header__anon-item" key={`link-${index}`}>
+            <a className="o-header__anon-link" href={item.url} data-trackable={item.label}>
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export { NavDesktop, NavListLeft, NavListRight, NavListRightAnon, UserActionsNav, MobileNav }

package/src/components/search/partials.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+const Search = ({ instance }) => {
+  return (
+    <div
+      id={`o-header-search-${instance}`}
+      className={`o-header__row o-header__search o-header__search--${instance}`}
+      data-trackable="header-search"
+      data-o-header-search>
+      <div className="o-header__container">
+        <form
+          className="o-header__search-form"
+          action="/search"
+          role="search"
+          aria-label="Site search"
+          data-n-topic-search
+          data-n-topic-search-categories="concepts,equities"
+          data-n-topic-search-view-all>
+          <label className="o-header__visually-hidden" htmlFor={`o-header-search-term-${instance}`}>
+            Search the <abbr title="Financial Times">FT</abbr>
+          </label>
+          <input
+            className="o-header__search-term"
+            id={`o-header-search-term-${instance}`}
+            name="q"
+            type="text"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck={false}
+            data-trackable="search-term"
+            placeholder="Search the FT"
+            data-n-topic-search-input
+          />
+          <button className="o-header__search-submit" type="submit" data-trackable="search-submit">
+            Search
+          </button>
+          <button
+            className="o-header__search-close o--if-js"
+            type="button"
+            aria-controls={`o-header-search-${instance}`}
+            title="Close search bar"
+            data-trackable="close">
+            <span className="o-header__visually-hidden">Close search bar</span>
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export { Search }