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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-layout",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -37,7 +37,11 @@
     "npm": "7.x || 8.x"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/",
+    "browser.js",
+    "component.js",
+    "styles.scss"
   ],
   "repository": {
     "type": "git",

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/Layout.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import {
+  Header as HeaderSimple,
+  Header as HeaderLarge,
+  LogoOnly,
+  NoOutboundLinksHeader,
+  Drawer,
+  THeaderOptions
+} from '@financial-times/dotcom-ui-header/component'
+import { TNavigationData } from '@financial-times/dotcom-types-navigation'
+import { Footer, LegalFooter, TFooterOptions } from '@financial-times/dotcom-ui-footer/component'
+import Template from './Template'
+
+enum Headers {
+  simple = HeaderSimple,
+  'large-logo' = HeaderLarge,
+  'logo-only' = LogoOnly,
+  'no-outbound-links' = NoOutboundLinksHeader
+}
+
+enum Footers {
+  simple = Footer,
+  legal = LegalFooter
+}
+
+export type TLayoutProps = {
+  navigationData?: TNavigationData
+  headerOptions?: THeaderOptions
+  headerBefore?: string | React.ReactNode
+  headerVariant?: Headers | false
+  headerComponent?: React.ReactNode
+  headerAfter?: string | React.ReactNode
+  footerOptions?: TFooterOptions
+  footerBefore?: string | React.ReactNode
+  footerVariant?: Footers | false
+  footerComponent?: React.ReactNode
+  footerAfter?: string | React.ReactNode
+  children?: React.ReactNode
+  contents?: string
+}
+
+export function Layout({
+  navigationData,
+  headerOptions,
+  headerBefore,
+  headerVariant,
+  headerComponent,
+  headerAfter,
+  footerOptions,
+  footerBefore,
+  footerVariant,
+  footerComponent,
+  footerAfter,
+  children,
+  contents
+}: TLayoutProps) {
+  let header = null
+  let drawer = null
+
+  if (headerVariant && Headers[headerVariant] && !headerComponent) {
+    const Header = Headers[headerVariant]
+    header = <Header {...headerOptions} data={navigationData} variant={headerVariant} />
+
+    if (Header === HeaderSimple || Header === HeaderLarge) {
+      drawer = <Drawer {...headerOptions} data={navigationData} />
+    }
+  }
+
+  let footer = null
+
+  if (footerVariant && Footers[footerVariant] && !footerComponent) {
+    const Footer = Footers[footerVariant]
+    footer = <Footer {...footerOptions} data={navigationData} variant={footerVariant} />
+  }
+
+  return (
+    <div className="n-layout">
+      <a
+        data-trackable="a11y-skip-to-help"
+        className="n-layout__skip-link"
+        href="https://www.ft.com/accessibility">
+        Accessibility help
+      </a>
+
+      {drawer ? (
+        <a data-trackable="a11y-skip-to-navigation" className="n-layout__skip-link" href="#site-navigation">
+          Skip to navigation
+        </a>
+      ) : null}
+
+      <a data-trackable="a11y-skip-to-content" className="n-layout__skip-link" href="#site-content">
+        Skip to content
+      </a>
+
+      {footer ? (
+        <a data-trackable="a11y-skip-to-footer" className="n-layout__skip-link" href="#site-footer">
+          Skip to footer
+        </a>
+      ) : null}
+
+      <div className="n-layout__row n-layout__row--header">
+        <Template className="n-layout__header-before">{headerBefore}</Template>
+        {headerComponent || header || null}
+        <Template className="n-layout__header-after">{headerAfter}</Template>
+      </div>
+      <div className="n-layout__row n-layout__row--content">
+        <Template>{contents || children}</Template>
+      </div>
+      <div className="n-layout__row n-layout__row--footer">
+        <Template className="n-layout__footer-before">{footerBefore}</Template>
+        {footerComponent || footer || null}
+        <Template className="n-layout__footer-after">{footerAfter}</Template>
+      </div>
+
+      {drawer}
+    </div>
+  )
+}
+
+Layout.defaultProps = {
+  headerVariant: 'simple',
+  footerVariant: 'simple',
+  headerOptions: {},
+  footerOptions: {}
+}

package/src/components/Template.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+type TTemplateProps = {
+  children?: string | React.ReactNode
+  [rest: string]: any
+}
+
+export default function Template(props: TTemplateProps) {
+  const { children, ...rest } = props
+
+  if (!children) return null
+
+  if (typeof children === 'string') {
+    return <div {...rest} dangerouslySetInnerHTML={{ __html: children }} />
+  } else {
+    return <div {...rest}>{children}</div>
+  }
+}

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>')
+  })
+})

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/Layout'

package/styles.scss

@@ -0,0 +1,50 @@
+// This is needed by Origami components that speak to the image service. Setting
+// it here means it'll be the same no matter which app generates it and it will
+// be reused from the CDN
+$system-code: 'page-kit-layout' !default;
+
+@import '@financial-times/dotcom-ui-base-styles/styles';
+
+.n-layout {
+  display: table;
+  width: 100%;
+  height: 100vh;
+  table-layout: fixed;
+}
+
+.n-layout__row {
+  display: table-row;
+}
+
+.n-layout__row--content {
+  height: 100%;
+}
+
+.n-layout__header-before {
+  background-color: oColorsByName('black-20')
+}
+
+.n-layout__skip-link {
+  @include nUiZIndexFor('notification');
+  position: absolute;
+  top: 1em;
+  left: -9999px;
+  padding: 0.5em 1em;
+  background: oColorsByName('velvet');
+  color: oColorsByName('white');
+
+  &:focus {
+    left: 0;
+    color: oColorsByName('white');
+  }
+}
+
+@media print {
+  .n-layout,
+  .n-layout__row {
+    display: block;
+  }
+}
+
+@import '@financial-times/dotcom-ui-header/styles';
+@import '@financial-times/dotcom-ui-footer/styles';