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

package/package.json

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

package/src/__stories__/footer.ts

@@ -0,0 +1,227 @@
+import { TNavMenu } from '../../../dotcom-types-navigation'
+
+const data: TNavMenu = {
+  label: 'Footer',
+  items: [
+    {
+      label: 'Support',
+      url: null,
+      submenu: {
+        label: null,
+        items: [
+          [
+            {
+              label: 'View Site Tips',
+              url: '/tour',
+              submenu: null
+            },
+            {
+              label: 'Help Centre',
+              url: 'http://help.ft.com',
+              submenu: null
+            },
+            {
+              label: 'About Us',
+              url: 'http://www.ft.com/aboutus',
+              submenu: null
+            },
+            {
+              label: 'Accessibility',
+              url: '/accessibility',
+              submenu: null
+            },
+            {
+              label: 'myFT Tour',
+              url: '/tour/myft',
+              submenu: null
+            }
+          ]
+        ]
+      }
+    },
+    {
+      label: 'Legal & Privacy',
+      url: null,
+      submenu: {
+        label: null,
+        items: [
+          [
+            {
+              label: 'Terms & Conditions',
+              url: 'http://help.ft.com/help/legal-privacy/terms-conditions/',
+              submenu: null
+            },
+            {
+              label: 'Privacy',
+              url: 'http://help.ft.com/help/legal-privacy/privacy/',
+              submenu: null
+            },
+            {
+              label: 'Cookies',
+              url: 'http://help.ft.com/help/legal-privacy/cookies/',
+              submenu: null
+            },
+            {
+              label: 'Copyright',
+              url: 'http://help.ft.com/help/legal-privacy/copyright/copyright-policy/',
+              submenu: null
+            },
+            {
+              label: 'Slavery Statement & Policies',
+              url: 'https://help.ft.com/help/legal/slavery-statement/',
+              submenu: null
+            }
+          ]
+        ]
+      }
+    },
+    {
+      label: 'Services',
+      url: null,
+      submenu: {
+        label: null,
+        items: [
+          [
+            {
+              label: 'FT Live',
+              url: 'http://live.ft.com/',
+              submenu: null
+            },
+            {
+              label: 'Share News Tips Securely',
+              url: '/securedrop',
+              disableTracking: true,
+              submenu: null
+            },
+            {
+              label: 'Individual Subscriptions',
+              url: 'http://www.ft.com/products',
+              submenu: null
+            },
+            {
+              label: 'Group Subscriptions',
+              url: 'https://enterprise.ft.com/en-gb/services/group-subscriptions/group-contact-us/?segmentId=383c7f63-abf4-b62d-cb33-4c278e6fdf61&cpccampaign=B2B_link_ft.com_footer',
+              submenu: null
+            },
+            {
+              label: 'Republishing',
+              url: 'https://enterprise.ft.com/en-gb/services/republishing/',
+              submenu: null
+            },
+            {
+              label: 'Contracts & Tenders',
+              url: 'http://www.businessesforsale.com/ft2/notices',
+              submenu: null
+            },
+            {
+              label: 'Executive Job Search',
+              url: 'https://www.exec-appointments.com/',
+              submenu: null
+            },
+            {
+              label: 'Advertise with the FT',
+              url: 'http://fttoolkit.co.uk/',
+              submenu: null
+            },
+            {
+              label: 'Follow the FT on Twitter',
+              url: 'https://twitter.com/financialtimes',
+              submenu: null
+            },
+            {
+              label: 'FT Transact',
+              url: 'https://transact.ft.com/en-gb/',
+              submenu: null
+            },
+            {
+              label: 'Secondary Schools',
+              url: 'https://enterprise.ft.com/en-gb/services/group-subscriptions/education/',
+              submenu: null
+            }
+          ]
+        ]
+      }
+    },
+    {
+      label: 'Tools',
+      url: null,
+      submenu: {
+        label: null,
+        items: [
+          [
+            {
+              label: 'Portfolio',
+              url: 'https://markets.ft.com/data/portfolio/dashboard',
+              submenu: null
+            },
+            {
+              label: "Today's Newspaper (ePaper)",
+              url: 'https://www.ft.com/todaysnewspaper',
+              submenu: null
+            },
+            {
+              label: 'Alerts Hub',
+              url: 'http://markets.ft.com/data/alerts/',
+              submenu: null
+            },
+            {
+              label: 'Lexicon',
+              url: 'http://lexicon.ft.com/',
+              submenu: null
+            },
+            {
+              label: 'MBA Rankings',
+              url: 'http://rankings.ft.com/businessschoolrankings/global-mba-ranking-2016?ft_site=falcon',
+              submenu: null
+            },
+            {
+              label: 'Economic Calendar',
+              url: 'https://markets.ft.com/data/world/economic-calendar',
+              submenu: null
+            },
+            {
+              label: 'News feed',
+              url: '/news-feed',
+              submenu: null
+            },
+            {
+              label: 'Newsletters',
+              url: '/newsletters',
+              submenu: null
+            },
+            {
+              label: 'Currency Converter',
+              url: 'https://markets.ft.com/research/Markets/Currencies?segid=70113',
+              submenu: null
+            }
+          ]
+        ]
+      }
+    },
+    {
+      label: 'Community & Events',
+      url: null,
+      submenu: {
+        label: null,
+        items: [
+          [
+            { label: 'FT Community', url: 'https://www.ft.com/tour/community', submenu: null },
+            { label: 'FT Live', url: 'http://live.ft.com/', submenu: null },
+            {
+              label: 'FT Forums',
+              url: 'https://forums.ft.com/',
+              submenu: null
+            },
+            {
+              label: 'Board Director Programme',
+              url: 'https://bdp.ft.com/',
+              submenu: null
+            }
+          ]
+        ]
+      }
+    }
+  ]
+}
+
+export default data

package/src/__stories__/story-data.ts

@@ -0,0 +1,22 @@
+import { TFooterProps } from '..'
+import footer from './footer'
+
+const fixture: TFooterProps = {
+  theme: 'dark',
+  data: {
+    account: null,
+    anon: null,
+    breadcrumb: null,
+    drawer: null,
+    editions: null,
+    footer,
+    navbar: null,
+    'navbar-right': null,
+    'navbar-right-anon': null,
+    'navbar-simple': null,
+    subsections: null,
+    user: null
+  }
+}
+
+export default fixture

package/src/__stories__/story.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { OnReady } from '../../../../.storybook/components/OnReady'
+
+import storyData from './story-data'
+
+import * as footer from '../../browser.js'
+import { Footer, LegalFooter } from '../../src'
+import '../../styles.scss'
+
+export default {
+  title: 'FT / Footer',
+  args: { theme: 'dark' },
+  argTypes: {
+    theme: {
+      control: {
+        type: 'radio',
+        options: ['dark', 'light']
+      }
+    }
+  }
+}
+
+export const _Footer = (args) => {
+  return (
+    <OnReady callback={() => footer.init()}>
+      <Footer {...storyData} {...args} />
+    </OnReady>
+  )
+}
+
+_Footer.story = {
+  name: 'footer'
+}
+
+export const _LegalFooter = (args) => {
+  return (
+    <OnReady callback={() => footer.init()}>
+      <LegalFooter {...storyData} {...args} />
+    </OnReady>
+  )
+}
+
+_LegalFooter.story = {
+  name: 'legal footer'
+}

package/src/__test__/component.spec.tsx

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment jsdom
+ */
+import 'jest-enzyme'
+import React from 'react'
+import { mount } from 'enzyme'
+
+import dataFixture from '../__stories__/story-data'
+import { Footer, LegalFooter } from '../index'
+
+describe('dotcom-ui-footer', () => {
+  const footer = mount(<Footer {...dataFixture} />)
+  const legalFooter = mount(<LegalFooter {...dataFixture} />)
+
+  it('renders the available footer variants', () => {
+    expect(footer).not.toBeEmptyRender()
+    expect(legalFooter).not.toBeEmptyRender()
+  })
+
+  it('renders the copyright section', () => {
+    expect(footer.find('.o-footer__copyright')).toExist()
+    expect(legalFooter.find('.o-footer__copyright')).toExist()
+  })
+
+  it('renders the Nikkei banner', () => {
+    expect(footer.find('.o-footer__copyright')).toExist()
+    expect(legalFooter.find('.o-footer__brand-logo')).toExist()
+  })
+
+  describe('standard footer', () => {
+    it('renders the navigation sections', () => {
+      expect(footer).not.toBeEmptyRender()
+      expect(footer.find('.o-footer__matrix')).toIncludeText('Support')
+      expect(footer.find('.o-footer__matrix')).toIncludeText('Legal & Privacy')
+      expect(footer.find('.o-footer__matrix')).toIncludeText('Services')
+      expect(footer.find('.o-footer__matrix')).toIncludeText('Tools')
+    })
+
+    it('does not render the legal links section', () => {
+      expect(footer.find('.o-footer__legal-links')).not.toExist()
+    })
+
+    it('renders the More from FT section', () => {
+      expect(footer.find('.o-footer__matrix-link__copy')).toExist()
+    })
+  })
+
+  describe('legal footer', () => {
+    it('does not render the navigation sections', () => {
+      expect(legalFooter.find('.o-footer__matrix')).not.toExist()
+    })
+
+    it('renders the legal links section', () => {
+      expect(legalFooter.find('.o-footer__legal-links')).toExist()
+    })
+
+    it('does not render the More from FT section', () => {
+      expect(legalFooter.find('.o-footer__more-from-ft')).not.toExist()
+    })
+  })
+})

package/src/components/partials.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
+
+type TLinkProps = {
+  item: TNavMenuItem
+  [key: string]: any
+}
+
+const Link = ({ item, ...props }: TLinkProps) => {
+  const disableTracking = { 'data-o-tracking-do-not-track': item.disableTracking ? true : null }
+
+  return (
+    <a {...props} href={item.url} data-trackable={item.label} {...disableTracking}>
+      <span className="o-footer__matrix-link__copy">{item.label}</span>
+    </a>
+  )
+}
+
+type TSectionLinksProps = {
+  index: number
+  submenu: TNavMenuItem[][]
+}
+
+const SectionLinks = ({ submenu, index }: TSectionLinksProps) => {
+  return (
+    <div className="o-footer__matrix-content" id={`o-footer-section-${index}`}>
+      {submenu.map((submenuItems, index) => (
+        <div className="o-footer__matrix-column" key={`column-${index}`}>
+          {submenuItems.map((item, index) => (
+            <Link className="o-footer__matrix-link" item={item} key={`link-${index}`} />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+type TSectionTitleProps = {
+  index: number
+  label: string
+}
+
+const SectionTitle = ({ label, index }: TSectionTitleProps) => {
+  // On smaller viewports, submenu which span one column is collapsed behind toggles
+  const ariaControls = { 'aria-controls': `o-footer-section-${index}` }
+  return (
+    <h3 className="o-footer__matrix-title" {...ariaControls}>
+      {label}
+    </h3>
+  )
+}
+
+type TFooterContentsProps = {
+  footerData: TNavMenuItem[]
+}
+
+const FooterContents = ({ footerData }: TFooterContentsProps) => (
+  <div className="o-footer__row">
+    <h2 className="o-normalise-visually-hidden">Useful links</h2>
+    <nav className="o-footer__matrix" role="navigation" aria-label="Useful links">
+      {footerData.map((item, index) => {
+        // The Next navigation API splits footer links data into "columns"
+        // <https://github.com/Financial-Times/next-navigation-api/blob/HEAD/server/transforms/footer.js>
+        const submenu = item.submenu.items as TNavMenuItem[][]
+        return (
+          <div
+            key={`group-${index}`}
+            className={`o-footer__matrix-group o-footer__matrix-group--${submenu.length}`}>
+            <SectionTitle label={item.label} index={index} />
+            <SectionLinks submenu={submenu} index={index} />
+          </div>
+        )
+      })}
+      <div className="o-footer__matrix-group o-footer__matrix-group--1">
+        <h3 className="o-footer__matrix-title o-footer__matrix-title--link">
+          <a
+            className="o-footer__matrix-link o-footer__matrix-link--more"
+            id={`o-footer-${footerData.length}`}
+            href="https://ft.com/more-from-ft-group">
+            <span className="o-footer__matrix-link__copy">More from the FT Group</span>
+          </a>
+        </h3>
+      </div>
+    </nav>
+  </div>
+)
+
+const CopyrightNotice = ({ withoutMarketsData = false }) => {
+  const marketsData = withoutMarketsData ? '' : 'Markets data delayed by at least 15 minutes. '
+  return (
+    <div className="o-footer__copyright">
+      <small>
+        {`${marketsData}© THE FINANCIAL TIMES LTD ${new Date().getFullYear()}. `}
+        <abbr title="Financial Times" aria-label="F T">
+          FT
+        </abbr>{' '}
+        and ‘Financial Times’ are trademarks of The Financial Times Ltd.
+        <br />
+        The Financial Times and its journalism are subject to a self-regulation regime under the{' '}
+        <a href="http://aboutus.ft.com/en-gb/ft-editorial-code/" aria-label="F T Editorial Code of Practice">
+          FT Editorial Code of Practice
+        </a>
+        .
+      </small>
+    </div>
+  )
+}
+
+type TCompressedLegalProps = {
+  footerData: TNavMenuItem[]
+}
+
+const CompressedLegal = ({ footerData }: TCompressedLegalProps) => {
+  // Find the legal and privacy column
+  const data = footerData.filter((item) => item.label === 'Legal & Privacy')
+
+  return (
+    <React.Fragment>
+      {data.map((legal, index) => (
+        // The Next navigation API splits footer links data into "columns"
+        // <https://github.com/Financial-Times/next-navigation-api/blob/HEAD/server/transforms/footer.js>
+        <div key={`column-${index}`}>
+          {(legal.submenu.items as TNavMenuItem[][]).map((items, index) => (
+            <ul className="o-footer__legal-links" key={`list-${index}`}>
+              {items.map((item, index) => (
+                <li key={`item-${index}`}>
+                  <Link item={item} key={`link-${index}`} />
+                </li>
+              ))}
+            </ul>
+          ))}
+        </div>
+      ))}
+    </React.Fragment>
+  )
+}
+
+const NikkeiBrandLogo = () => (
+  <div className="o-footer__brand">
+    <div className="o-footer__container">
+      <div className="o-footer__brand-logo" />
+    </div>
+  </div>
+)
+
+export { SectionLinks, SectionTitle, FooterContents, CompressedLegal, CopyrightNotice, NikkeiBrandLogo }

package/src/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { TNavigationData } from '@financial-times/dotcom-types-navigation'
+import { FooterContents, CopyrightNotice, NikkeiBrandLogo, CompressedLegal } from './components/partials'
+
+export type TFooterOptions = {
+  theme?: 'dark' | 'light' | string
+}
+
+export type TFooterProps = TFooterOptions & {
+  data: TNavigationData
+}
+
+export function Footer(props: TFooterProps) {
+  const footerData = props.data.footer.items
+  const theme = props.theme ? `${props.theme}` : 'dark'
+  return (
+    <footer id="site-footer" className={`o-footer o-footer--theme-${theme}`} data-o-component="o-footer">
+      <div className="o-footer__container">
+        <FooterContents footerData={footerData} />
+        <CopyrightNotice />
+      </div>
+      <NikkeiBrandLogo />
+    </footer>
+  )
+}
+
+export function LegalFooter(props: TFooterProps) {
+  const footerData = props.data.footer.items
+  const theme = props.theme ? props.theme : 'dark'
+  return (
+    <footer id="site-footer" className={`o-footer o-footer--theme-${theme}`} data-o-component="o-footer">
+      <div className="o-footer__container">
+        <CompressedLegal footerData={footerData} />
+        <CopyrightNotice withoutMarketsData={true} />
+      </div>
+      <NikkeiBrandLogo />
+    </footer>
+  )
+}

package/styles.scss

@@ -0,0 +1,5 @@
+// This will be overridden by dotcom-ui-layout, it's necessary here for storybook builds
+$system-code: 'page-kit-footer' !default;
+
+@import '@financial-times/o-footer/main';
+@include oFooter();