@financial-times/dotcom-ui-layout 7.3.0 → 7.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-layout",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -8,13 +8,12 @@
   "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:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
-    "build:browser": "npm run tsc -- --module es2015 --outDir ./dist/browser",
+    "build:browser": "tsc --module es2015 --outDir ./dist/browser",
+    "build:node": "tsc",
     "build": "npm run build:node && npm run build:browser",
     "dev": "echo -n node browser | parallel -u -d ' ' npm run build:{} -- --watch",
     "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
@@ -23,10 +22,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^7.3.0",
-    "@financial-times/dotcom-ui-base-styles": "^7.3.0",
-    "@financial-times/dotcom-ui-footer": "^7.3.0",
-    "@financial-times/dotcom-ui-header": "^7.3.0",
+    "@financial-times/dotcom-types-navigation": "file:../dotcom-types-navigation",
+    "@financial-times/dotcom-ui-base-styles": "file:../dotcom-ui-base-styles",
+    "@financial-times/dotcom-ui-footer": "file:../dotcom-ui-footer",
+    "@financial-times/dotcom-ui-header": "file:../dotcom-ui-header",
     "focus-visible": "^5.0.0",
     "n-ui-foundations": "^9.0.0"
   },
@@ -37,6 +36,13 @@
     "node": ">= 14.0.0",
     "npm": "7.x || 8.x"
   },
+  "files": [
+    "dist/",
+    "src/",
+    "browser.js",
+    "component.js",
+    "styles.scss"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
@@ -50,4 +56,4 @@
     "check-engine": "^1.10.1",
     "react": "^16.8.6"
   }
-}
+}

package/src/__stories__/demos.scss

@@ -0,0 +1,38 @@
+.demo {
+  text-align: center;
+}
+
+.demo__message {
+  display: inline-block;
+  margin: 50px 0;
+  padding: 1em;
+  border: 1px solid currentColor;
+  border-radius: 0.5em;
+
+  text-align: center;
+  font-size: 24px;
+
+  &:before,
+  &:after {
+    padding: 0 1em;
+    font-size: 75%;
+  }
+}
+
+.demo__message--scroll {
+  margin-bottom: 2000px;
+  border: none;
+
+  &:before,
+  &:after {
+    content: '▼';
+  }
+}
+
+.extra {
+  margin: 0;
+  padding: 0.5em;
+  text-align: center;
+  background: cornflowerblue;
+  color: white;
+}

package/src/__stories__/story.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { OnReady } from '../../../../.storybook/components/OnReady'
+
+import './demos.scss'
+import '../../styles.scss'
+
+import * as layout from '../../browser'
+
+import { navigationProps } from '../../../../__fixtures__/navigation'
+
+import { Layout } from '..'
+
+const Extra = ({ children }) => <p className="extra">{children}</p>
+
+const initUiComponents = () => {
+  layout.init()
+}
+
+export default {
+  title: 'FT / Layout'
+}
+
+export const DefaultComponents = (args) => {
+  return (
+    <OnReady callback={initUiComponents}>
+      <Layout navigationData={navigationProps} {...args}>
+        <main className="demo">
+          <p className="demo__message">Defaults: only passing data</p>
+        </main>
+      </Layout>
+    </OnReady>
+  )
+}
+
+DefaultComponents.story = {
+  name: 'Default components'
+}
+DefaultComponents.args = {
+  headerVariant: 'simple',
+  footerVariant: 'simple'
+}
+DefaultComponents.argTypes = {
+  headerVariant: {
+    control: {
+      type: 'select',
+      options: {
+        Simple: 'simple',
+        'Large Logo': 'large-logo',
+        'Logo Only': 'logo-only',
+        None: ''
+      }
+    }
+  },
+  footerVariant: {
+    control: {
+      type: 'select',
+      options: {
+        Simple: 'simple',
+        Legal: 'legal',
+        None: ''
+      }
+    }
+  }
+}
+
+export const CustomSlots = () => {
+  return (
+    <OnReady callback={initUiComponents}>
+      <Layout
+        navigationData={navigationProps}
+        headerBefore={<Extra>Header before</Extra>}
+        headerAfter={<Extra>Header after</Extra>}
+        footerBefore={<Extra>Footer before</Extra>}
+        footerAfter={<Extra>Footer after</Extra>}>
+        <main className="demo">
+          <p className="demo__message">Custom content slots</p>
+        </main>
+      </Layout>
+    </OnReady>
+  )
+}
+
+CustomSlots.story = {
+  name: 'Custom slots'
+}
+CustomSlots.parameters = {
+  controls: { hideNoControlsWarning: true }
+}
+
+export const CustomComponents = () => {
+  return (
+    <OnReady callback={initUiComponents}>
+      <Layout
+        navigationData={navigationProps}
+        headerComponent={<Extra>Custom header</Extra>}
+        footerComponent={<Extra>Custom footer</Extra>}>
+        <main className="demo">
+          <p className="demo__message">Custom components</p>
+        </main>
+      </Layout>
+    </OnReady>
+  )
+}
+
+CustomComponents.story = {
+  name: 'Custom components'
+}
+CustomComponents.parameters = {
+  controls: { hideNoControlsWarning: true }
+}

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

@@ -0,0 +1,227 @@
+/**
+ * @jest-environment jsdom
+ */
+import 'jest-enzyme'
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { Layout as Subject } from '../Layout'
+import { Header, Drawer, LogoOnly, NoOutboundLinksHeader } from '@financial-times/dotcom-ui-header'
+import { Footer, LegalFooter } from '@financial-times/dotcom-ui-footer'
+
+describe('dotcom-ui-layout/src/components/Layout', () => {
+  const result = shallow(<Subject />)
+
+  it('renders skip links to page landmarks', () => {
+    expect(result.find('a[href="#site-navigation"]')).toHaveText('Skip to navigation')
+    expect(result.find('a[href="#site-content"]')).toHaveText('Skip to content')
+    expect(result.find('a[href="#site-footer"]')).toHaveText('Skip to footer')
+  })
+
+  it('renders the header and drawer components', () => {
+    expect(result.find(Header)).toExist()
+    expect(result.find(Drawer)).toExist()
+  })
+
+  it('renders the footer component', () => {
+    expect(result.find(Footer)).toExist()
+  })
+
+  describe('header variations', () => {
+    describe('with the simple variant', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject headerVariant={'simple' as any} />)
+      })
+
+      it('renders the header component', () => {
+        expect(result.find(Header)).toExist()
+      })
+
+      it('renders the drawer component', () => {
+        expect(result.find(Drawer)).toExist()
+      })
+
+      it('renders the navigation skip link', () => {
+        expect(result.find('a[href="#site-navigation"]')).toExist()
+      })
+    })
+
+    describe('with the large-logo variant', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject headerVariant={'large-logo' as any} />)
+      })
+
+      it('renders the header component', () => {
+        expect(result.find(Header)).toExist()
+      })
+
+      it('renders the drawer component', () => {
+        expect(result.find(Drawer)).toExist()
+      })
+
+      it('renders the navigation skip link', () => {
+        expect(result.find('a[href="#site-navigation"]')).toExist()
+      })
+    })
+
+    describe('with the logo-only variant', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject headerVariant={'logo-only' as any} />)
+      })
+
+      it('renders the logo only header component', () => {
+        expect(result.find(LogoOnly)).toExist()
+      })
+
+      it('does not render the drawer component', () => {
+        expect(result.find(Drawer)).not.toExist()
+      })
+
+      it('does not render the navigation skip link', () => {
+        expect(result.find('a[href="#site-navigation"]')).not.toExist()
+      })
+    })
+
+    describe('with the no-outbound-links variant', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject headerVariant={'no-outbound-links' as any} />)
+      })
+
+      it('renders the no-outbound-links header component', () => {
+        expect(result.find(NoOutboundLinksHeader)).toExist()
+      })
+
+      it('does not render the drawer component', () => {
+        expect(result.find(Drawer)).not.toExist()
+      })
+
+      it('does not render the navigation skip link', () => {
+        expect(result.find('a[href="#site-navigation"]')).not.toExist()
+      })
+    })
+
+    describe('with the header disabled', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject headerVariant={false} />)
+      })
+
+      it('does not render the header component', () => {
+        expect(result.find(Header)).not.toExist()
+      })
+
+      it('does not render the drawer component', () => {
+        expect(result.find(Drawer)).not.toExist()
+      })
+
+      it('does not render the navigation skip link', () => {
+        expect(result.find('a[href="#site-navigation"]')).not.toExist()
+      })
+    })
+
+    describe('with a custom header component', () => {
+      let result
+
+      beforeAll(() => {
+        const customHeader = <header>My custom header</header>
+        result = shallow(<Subject headerComponent={customHeader} />)
+      })
+
+      it('renders the given component', () => {
+        expect(result.find('header')).toHaveText('My custom header')
+      })
+
+      it('does not render the header component', () => {
+        expect(result.find(Header)).not.toExist()
+      })
+
+      it('does not render the drawer component', () => {
+        expect(result.find(Drawer)).not.toExist()
+      })
+
+      it('does not render the navigation skip link', () => {
+        expect(result.find('a[href="#site-navigation"]')).not.toExist()
+      })
+    })
+  })
+
+  describe('footer variations', () => {
+    describe('with the simple variant', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject footerVariant={'simple' as any} />)
+      })
+
+      it('renders the footer component', () => {
+        expect(result.find(Footer)).toExist()
+      })
+
+      it('renders the footer skip link', () => {
+        expect(result.find('a[href="#site-footer"]')).toExist()
+      })
+    })
+
+    describe('with the legal variant', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject footerVariant={'legal' as any} />)
+      })
+
+      it('renders the legal footer component', () => {
+        expect(result.find(LegalFooter)).toExist()
+      })
+
+      it('renders the footer skip link', () => {
+        expect(result.find('a[href="#site-footer"]')).toExist()
+      })
+    })
+
+    describe('with the footer disabled', () => {
+      let result
+
+      beforeAll(() => {
+        result = shallow(<Subject footerVariant={false} />)
+      })
+
+      it('does not render the footer component', () => {
+        expect(result.find(Footer)).not.toExist()
+      })
+
+      it('does not render the footer skip link', () => {
+        expect(result.find('a[href="#site-footer"]')).not.toExist()
+      })
+    })
+
+    describe('with a custom footer component', () => {
+      let result
+
+      beforeAll(() => {
+        const customFooter = <footer>My custom footer</footer>
+        result = shallow(<Subject footerComponent={customFooter} />)
+      })
+
+      it('renders the given component', () => {
+        expect(result.find('footer')).toHaveText('My custom footer')
+      })
+
+      it('does not render the footer component', () => {
+        expect(result.find(Footer)).not.toExist()
+      })
+
+      it('does not render the footer skip link', () => {
+        expect(result.find('a[href="#site-footer"]')).not.toExist()
+      })
+    })
+  })
+})

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

@@ -0,0 +1,24 @@
+/**
+ * @jest-environment jsdom
+ */
+import 'jest-enzyme'
+import React from 'react'
+import { mount } from 'enzyme'
+
+import Subject from '../Template'
+
+describe('dotcom-ui-layout/src/components/Template', () => {
+  it('can render contents provided as a string', () => {
+    const result = mount(<Subject>{'<p>Hello World</p>'}</Subject>)
+    expect(result.html()).toBe('<div><p>Hello World</p></div>')
+  })
+
+  it('can render contents provided as children', () => {
+    const result = mount(
+      <Subject>
+        <p>Hello World</p>
+      </Subject>
+    )
+    expect(result.html()).toBe('<div><p>Hello World</p></div>')
+  })
+})