@financial-times/dotcom-ui-header 11.2.1 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "11.2.1",
+  "version": "12.0.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -15,33 +15,30 @@
     "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"
+    "dev": "npm run build:node -- --watch"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^11.2.1",
-    "n-topic-search": "^8.0.5"
+    "@financial-times/dotcom-types-navigation": "^12.0.0"
   },
   "devDependencies": {
     "@financial-times/logo-images": "^1.10.1",
     "@svgr/core": "^5.0.0",
-    "camelcase": "^6.0.0",
-    "check-engine": "^1.10.1"
+    "camelcase": "^6.0.0"
   },
   "peerDependencies": {
     "@financial-times/logo-images": "^1.10.1",
     "@financial-times/o-header": "^14.0.4",
+    "n-topic-search": "^8.0.5",
     "n-ui-foundations": "^9.0.0 || ^10.0.0",
     "preact": "^10.23.2",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"
   },
   "engines": {
-    "node": "18.x || 20.x",
-    "npm": "8.x || 9.x || 10.x"
+    "node": "18.x || 20.x || 22.x"
   },
   "files": [
     "dist/",

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import fixture from '../../__stories__/story-data/index'
+import fixture from '../fixtures/index'
 import { Drawer as Subject } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }

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

@@ -1,7 +1,7 @@
 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 fixture from '../fixtures/index'
+import profileFixture from '../fixtures/profile'
 import { MainHeader as Subject } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import fixture from '../../__stories__/story-data/index'
+import fixture from '../fixtures/index'
 import { NoOutboundLinksHeader as Subject } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import fixture from '../../__stories__/story-data/index'
+import fixture from '../fixtures/index'
 import { StickyHeader as Subject } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }

package/src/__test__/components/TypeaheadIntegration.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import fixture from '../../__stories__/story-data/index'
+import fixture from '../fixtures/index'
 import { Drawer, MainHeader } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }

package/src/__test__/output/component.spec.tsx

@@ -4,7 +4,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
-import dataFixture from '../../__stories__/story-data/index'
+import dataFixture from '../fixtures/index'
 import { Header } from '../../index'
 
 // data.currentPath to enable the mobile header

package/src/__test__/output/drawer.spec.tsx

@@ -4,7 +4,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
-import navigationData from '../../__stories__/story-data/index'
+import navigationData from '../fixtures/index'
 import { Drawer as Subject } from '../../'
 
 const fixture = {

package/src/components/navigation/partials.tsx

@@ -22,7 +22,6 @@ const NavMobile = ({ items }: { items: TNavMenuItem[] }) => {
     <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">

package/styles.scss

@@ -1,4 +1,4 @@
-// This will be overridden by dotcom-ui-layout, it's necessary here for storybook builds
+// This will be overridden by dotcom-ui-layout
 $system-code: 'page-kit-header' !default;
 
 @import 'n-ui-foundations/mixins';

package/src/__stories__/demos.scss

@@ -1,28 +0,0 @@
-/* Additional Origami styles */
-/* Demo styles are not included in o-header by default */
-
-.demo-sticky {
-	height: 240px;
-	overflow: auto;
-}
-
-.demo-sticky-message {
-	margin: 50px 0;
-	text-align: center;
-	font-size: 24px;
-
-	&:before,
-	&:after {
-		padding: 0 1em;
-		font-size: 75%;
-	}
-}
-
-.demo-sticky-message--scroll {
-	margin-bottom: 1999px;
-
-	&:before,
-	&:after {
-		content: '▼';
-	}
-}

package/src/__stories__/story.tsx

@@ -1,164 +0,0 @@
-import React from 'react'
-import Header from '@financial-times/o-header'
-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 = () => {
-  Header.init()
-}
-
-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,
-  showAskButton: 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,
-  showAskButton: 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',
-  showAskButton: false
-}
-
-export const _StickyHeader = (args) => (
-  <OnReady callback={onReadyCallback}>
-    <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,
-  showAskButton: 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
-    }
-  }
-}