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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "7.2.7",
+  "version": "7.3.1",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -8,14 +8,13 @@
   "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:node": "tsc",
     "build:svg-to-react": "node scripts/convertSvgsToReactComponents.js",
+    "build": "npm run build:node",
     "dev": "npm run build:node -- --watch",
     "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
   },
@@ -23,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^7.2.7",
+    "@financial-times/dotcom-types-navigation": "file:../dotcom-types-navigation",
     "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },
@@ -32,11 +31,11 @@
     "@svgr/core": "^5.0.0",
     "camelcase": "^6.0.0",
     "check-engine": "^1.10.1",
-    "@financial-times/o-header": "^10.0.0",
+    "@financial-times/o-header": "^11.0.4",
     "react": "^16.8.6"
   },
   "peerDependencies": {
-    "@financial-times/o-header": "^10.0.0",
+    "@financial-times/o-header": "^11.0.4",
     "@financial-times/logo-images": "^1.10.1",
     "react": "16.x || 17.x"
   },
@@ -44,6 +43,9 @@
     "node": ">= 14.0.0",
     "npm": "7.x || 8.x"
   },
+  "files": [
+    "dist/"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
@@ -53,4 +55,4 @@
   "volta": {
     "extends": "../../package.json"
   }
-}
+}

package/scripts/convertSvgsToReactComponents.js

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

@@ -1,105 +0,0 @@
-import React from 'react'
-import { ariaSelected } from '../../utils'
-import { TNavMenuItem, TNavEditions, TNavAction } 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 ?? undefined}
-          {...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 ?? undefined}
-                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 ?? undefined}
-      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 ?? undefined}
-      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>
-)
-
-export const SubscribeButton = (action: TNavAction) => (
-  <div className="o-header__drawer-actions">
-    <a className="o-header__drawer-button" role="button" href={action.url} data-trackable="subscribe-button">
-      {action.name}
-    </a>
-  </div>
-)

package/src/components/drawer/topLevelPartials.tsx

@@ -1,165 +0,0 @@
-import React from 'react'
-import {
-  DrawerParentItem,
-  DrawerSingleItem,
-  DrawerSpecialItem,
-  EditionsSwitcher,
-  SubscribeButton
-} 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 subscribeAction = props.data.subscribeAction
-  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} />
-        {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
-        <Search />
-        <nav className="o-header__drawer-menu o-header__drawer-menu--primary o-header__drawer-menu--border">
-          {editions && <EditionsSwitcher {...editions} />}
-          <ul data-component="drawer-menu--primary__drawer-menu-list" 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
-          data-component={divideItem ? 'drawer-menu-item--divide' : undefined}
-          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 ?? undefined} data-trackable={item.label}>
-            {item.label}
-          </a>
-        </li>
-      ))}
-    </ul>
-  </nav>
-)
-
-export { IncludeDrawer }

package/src/components/navigation/partials.tsx

@@ -1,192 +0,0 @@
-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 props.data.currentPath && 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 ?? undefined}
-              {...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 ?? undefined}
-          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) => {
-  return props.userIsLoggedIn ? <NavListRightLoggedIn items={props.data['navbar-right'].items} /> : null
-}
-
-const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
-  return (
-    <ul
-      data-component="nav-list--right"
-      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 ?? undefined} data-trackable={item.label}>
-            {item.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 ?? undefined}
-                  {...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 ?? undefined}
-                {...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 ?? undefined} data-trackable={item.label}>
-              {item.label}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
-
-export { NavDesktop, NavListLeft, NavListRight, UserActionsNav, MobileNav }

package/src/components/search/partials.tsx

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