@financial-times/dotcom-ui-footer 2.5.1 → 2.6.2

package/bower.json

@@ -1,7 +1,10 @@
 {
   "name": "dotcom-ui-footer",
   "dependencies": {
-    "o-footer": "^7.0.0"
+    "o-footer": "9.0.1-bower"
   },
-  "main": ["browser.js", "styles.scss"]
+  "main": [
+    "browser.js",
+    "styles.scss"
+  ]
 }

package/dist/node/components/partials.js

@@ -3,36 +3,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NikkeiBrandLogo = exports.CopyrightNotice = exports.CompressedLegal = exports.MoreFromFT = exports.FooterContents = exports.SectionTitle = exports.SectionLinks = void 0;
+exports.NikkeiBrandLogo = exports.CopyrightNotice = exports.CompressedLegal = exports.FooterContents = exports.SectionTitle = exports.SectionLinks = void 0;
 const react_1 = __importDefault(require("react"));
 const Link = ({ item, ...props }) => {
     const disableTracking = { 'data-o-tracking-do-not-track': item.disableTracking ? true : null };
-    return (react_1.default.createElement("a", Object.assign({}, props, { href: item.url, "data-trackable": item.label }, disableTracking), item.label));
+    return (react_1.default.createElement("a", Object.assign({}, props, { href: item.url, "data-trackable": item.label }, disableTracking),
+        react_1.default.createElement("span", { className: "o-footer__matrix-link__copy" }, item.label)));
 };
 const SectionLinks = ({ submenu, index }) => {
     return (react_1.default.createElement("div", { className: "o-footer__matrix-content", id: `o-footer-section-${index}` }, submenu.map((submenuItems, index) => (react_1.default.createElement("div", { className: "o-footer__matrix-column", key: `column-${index}` }, submenuItems.map((item, index) => (react_1.default.createElement(Link, { className: "o-footer__matrix-link", item: item, key: `link-${index}` }))))))));
 };
 exports.SectionLinks = SectionLinks;
-const SectionTitle = ({ label, submenu, index }) => {
-    // On smaller viewports, submenus which span two columns are collapsed behind toggles
-    const ariaControls = { 'aria-controls': submenu.length === 2 ? `o-footer-section-${index}` : null };
+const SectionTitle = ({ label, index }) => {
+    // On smaller viewports, submenu which span one column is collapsed behind toggles
+    const ariaControls = { 'aria-controls': `o-footer-section-${index}` };
     return (react_1.default.createElement("h3", Object.assign({ className: "o-footer__matrix-title" }, ariaControls), label));
 };
 exports.SectionTitle = SectionTitle;
 const FooterContents = ({ footerData }) => (react_1.default.createElement("div", { className: "o-footer__row" },
     react_1.default.createElement("h2", { className: "o-normalise-visually-hidden" }, "Useful links"),
-    react_1.default.createElement("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;
-        return (react_1.default.createElement("div", { key: `group-${index}`, className: `o-footer__matrix-group o-footer__matrix-group--${submenu.length}` },
-            react_1.default.createElement(SectionTitle, { label: item.label, submenu: submenu, index: index }),
-            react_1.default.createElement(SectionLinks, { submenu: submenu, index: index })));
-    }))));
+    react_1.default.createElement("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;
+            return (react_1.default.createElement("div", { key: `group-${index}`, className: `o-footer__matrix-group o-footer__matrix-group--${submenu.length}` },
+                react_1.default.createElement(SectionTitle, { label: item.label, index: index }),
+                react_1.default.createElement(SectionLinks, { submenu: submenu, index: index })));
+        }),
+        react_1.default.createElement("div", { className: "o-footer__matrix-group o-footer__matrix-group--1" },
+            react_1.default.createElement("h3", { className: "o-footer__matrix-title o-footer__matrix-title--link" },
+                react_1.default.createElement("a", { className: "o-footer__matrix-link o-footer__matrix-link--more", id: `o-footer-${footerData.length}`, href: "https://ft.com/more-from-ft-group" },
+                    react_1.default.createElement("span", { className: "o-footer__matrix-link__copy" }, "More from the FT Group")))))));
 exports.FooterContents = FooterContents;
-const MoreFromFT = () => (react_1.default.createElement("div", { className: "o-footer__external-link o-footer__matrix-title" },
-    react_1.default.createElement("a", { className: "o-footer__more-from-ft o-footer__matrix-title", href: "http://ft.com/more-from-ft-group", "data-trackable": "more-from-ft" }, "More from the FT Group")));
-exports.MoreFromFT = MoreFromFT;
 const CopyrightNotice = ({ withoutMarketsData = false }) => {
     const marketsData = withoutMarketsData ? '' : 'Markets data delayed by at least 15 minutes. ';
     return (react_1.default.createElement("div", { className: "o-footer__copyright" },

package/dist/node/index.js

@@ -12,7 +12,6 @@ function Footer(props) {
     return (react_1.default.createElement("footer", { id: "site-footer", className: `o-footer o-footer--theme-${theme}`, "data-o-component": "o-footer" },
         react_1.default.createElement("div", { className: "o-footer__container" },
             react_1.default.createElement(partials_1.FooterContents, { footerData: footerData }),
-            react_1.default.createElement(partials_1.MoreFromFT, null),
             react_1.default.createElement(partials_1.CopyrightNotice, null)),
         react_1.default.createElement(partials_1.NikkeiBrandLogo, null)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-footer",
-  "version": "2.5.1",
+  "version": "2.6.2",
   "description": "",
   "main": "component.js",
   "styles": "styles.scss",
@@ -21,7 +21,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^2.5.1"
+    "@financial-times/dotcom-types-navigation": "^2.6.2"
   },
   "peerDependencies": {
     "react": "^16.8.6"

package/src/components/partials.tsx

@@ -11,7 +11,7 @@ const Link = ({ item, ...props }: TLinkProps) => {
 
   return (
     <a {...props} href={item.url} data-trackable={item.label} {...disableTracking}>
-      {item.label}
+      <span className="o-footer__matrix-link__copy">{item.label}</span>
     </a>
   )
 }
@@ -38,12 +38,11 @@ const SectionLinks = ({ submenu, index }: TSectionLinksProps) => {
 type TSectionTitleProps = {
   index: number
   label: string
-  submenu: TNavMenuItem[][]
 }
 
-const SectionTitle = ({ label, submenu, index }: TSectionTitleProps) => {
-  // On smaller viewports, submenus which span two columns are collapsed behind toggles
-  const ariaControls = { 'aria-controls': submenu.length === 2 ? `o-footer-section-${index}` : null }
+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}
@@ -63,31 +62,29 @@ const FooterContents = ({ footerData }: TFooterContentsProps) => (
         // 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} submenu={submenu} index={index} />
+            <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 MoreFromFT = () => (
-  <div className="o-footer__external-link o-footer__matrix-title">
-    <a
-      className="o-footer__more-from-ft o-footer__matrix-title"
-      href="http://ft.com/more-from-ft-group"
-      data-trackable="more-from-ft">
-      More from the FT Group
-    </a>
-  </div>
-)
-
 const CopyrightNotice = ({ withoutMarketsData = false }) => {
   const marketsData = withoutMarketsData ? '' : 'Markets data delayed by at least 15 minutes. '
   return (
@@ -146,12 +143,4 @@ const NikkeiBrandLogo = () => (
   </div>
 )
 
-export {
-  SectionLinks,
-  SectionTitle,
-  FooterContents,
-  MoreFromFT,
-  CompressedLegal,
-  CopyrightNotice,
-  NikkeiBrandLogo
-}
+export { SectionLinks, SectionTitle, FooterContents, CompressedLegal, CopyrightNotice, NikkeiBrandLogo }

package/src/index.tsx

@@ -1,12 +1,6 @@
 import React from 'react'
 import { TNavigationData } from '@financial-times/dotcom-types-navigation'
-import {
-  FooterContents,
-  MoreFromFT,
-  CopyrightNotice,
-  NikkeiBrandLogo,
-  CompressedLegal
-} from './components/partials'
+import { FooterContents, CopyrightNotice, NikkeiBrandLogo, CompressedLegal } from './components/partials'
 
 export type TFooterOptions = {
   theme?: 'dark' | 'light' | string
@@ -23,7 +17,6 @@ export function Footer(props: TFooterProps) {
     <footer id="site-footer" className={`o-footer o-footer--theme-${theme}`} data-o-component="o-footer">
       <div className="o-footer__container">
         <FooterContents footerData={footerData} />
-        <MoreFromFT />
         <CopyrightNotice />
       </div>
       <NikkeiBrandLogo />