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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/node/components/drawer/additionalPartials.d.ts +1 -1
  2. package/dist/node/components/drawer/additionalPartials.js +4 -4
  3. package/dist/node/components/drawer/topLevelPartials.js +11 -11
  4. package/dist/node/components/navigation/partials.js +7 -7
  5. package/dist/node/components/sticky/partials.d.ts +1 -1
  6. package/dist/node/components/sticky/partials.js +2 -2
  7. package/dist/node/components/sub-navigation/partials.js +2 -2
  8. package/dist/node/components/svg-components/BrandFtMasthead.js +1 -1
  9. package/dist/node/components/top/partials.d.ts +6 -6
  10. package/dist/node/components/top/partials.js +5 -5
  11. package/dist/node/index.d.ts +2 -2
  12. package/dist/node/index.js +26 -27
  13. package/dist/tsconfig.tsbuildinfo +1 -2983
  14. package/package.json +6 -9
  15. package/src/__test__/components/Drawer.spec.tsx +1 -1
  16. package/src/__test__/components/MainHeader.spec.tsx +2 -2
  17. package/src/__test__/components/NoOutboundLinks.spec.tsx +1 -1
  18. package/src/__test__/components/StickyHeader.spec.tsx +1 -1
  19. package/src/__test__/components/TypeaheadIntegration.test.tsx +1 -1
  20. package/src/__test__/output/component.spec.tsx +1 -1
  21. package/src/__test__/output/drawer.spec.tsx +1 -1
  22. package/src/components/navigation/partials.tsx +0 -1
  23. package/styles.scss +1 -1
  24. package/src/__stories__/demos.scss +0 -28
  25. package/src/__stories__/story.tsx +0 -164
  26. /package/src/{__stories__/story-data → __test__/fixtures}/actionsUK.ts +0 -0
  27. /package/src/{__stories__/story-data → __test__/fixtures}/anon.ts +0 -0
  28. /package/src/{__stories__/story-data → __test__/fixtures}/drawerUK.ts +0 -0
  29. /package/src/{__stories__/story-data → __test__/fixtures}/editionsInternational.ts +0 -0
  30. /package/src/{__stories__/story-data → __test__/fixtures}/editionsUK.ts +0 -0
  31. /package/src/{__stories__/story-data → __test__/fixtures}/index.ts +0 -0
  32. /package/src/{__stories__/story-data → __test__/fixtures}/navbarRight.ts +0 -0
  33. /package/src/{__stories__/story-data → __test__/fixtures}/navbarRightAnon.ts +0 -0
  34. /package/src/{__stories__/story-data → __test__/fixtures}/navbarSimple.ts +0 -0
  35. /package/src/{__stories__/story-data → __test__/fixtures}/navbarTopRight.ts +0 -0
  36. /package/src/{__stories__/story-data → __test__/fixtures}/navbarTopRightAnon.ts +0 -0
  37. /package/src/{__stories__/story-data → __test__/fixtures}/navbarUK.ts +0 -0
  38. /package/src/{__stories__/story-data → __test__/fixtures}/profile.ts +0 -0
  39. /package/src/{__stories__/story-data → __test__/fixtures}/subNavigationProfile.ts +0 -0
  40. /package/src/{__stories__/story-data → __test__/fixtures}/subNavigationUK.ts +0 -0
  41. /package/src/{__stories__/story-data → __test__/fixtures}/user.ts +0 -0
package/dist/node/components/drawer/additionalPartials.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { TNavMenuItem, TNavEditions, TNavAction } from '@financial-times/dotcom-types-navigation';
3
- export declare type TDrawerParentItemProps = {
3
+ export type TDrawerParentItemProps = {
4
4
  item: TNavMenuItem;
5
5
  idSuffix: string;
6
6
  };
package/dist/node/components/drawer/additionalPartials.js CHANGED
@@ -11,26 +11,26 @@ const DrawerParentItem = ({ item, idSuffix }) => {
11
11
  const selected = item.selected ? 'selected' : 'unselected';
12
12
  return (react_1.default.createElement(react_1.default.Fragment, null,
13
13
  react_1.default.createElement("div", { key: item.url, className: "o-header__drawer-menu-toggle-wrapper" },
14
- react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label),
14
+ react_1.default.createElement("a", { className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, ...(0, utils_1.ariaSelected)(item), "data-trackable": item.label }, item.label),
15
15
  react_1.default.createElement("button", { className: `o-header__drawer-menu-toggle o-header__drawer-menu-toggle--${selected}`, "aria-controls": `o-header-drawer-child-${idSuffix}`, "data-trackable": `sub-level-toggle | ${item.label}` }, `Show more ${item.label}`)),
16
16
  react_1.default.createElement("ul", { className: "o-header__drawer-menu-list o-header__drawer-menu-list--child", id: `o-header-drawer-child-${idSuffix}`, "data-trackable": "sub-level" }, ((_b = item.submenu) === null || _b === void 0 ? void 0 : _b.items).map((item) => {
17
17
  var _a;
18
18
  const selected = item.selected ? 'selected' : 'unselected';
19
19
  return (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" },
20
- react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label)));
20
+ react_1.default.createElement("a", { className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label, ...(0, utils_1.ariaSelected)(item) }, item.label)));
21
21
  }))));
22
22
  };
23
23
  exports.DrawerParentItem = DrawerParentItem;
24
24
  const DrawerSingleItem = (item) => {
25
25
  var _a;
26
26
  const selected = item.selected ? 'selected' : 'unselected';
27
- return (react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label));
27
+ return (react_1.default.createElement("a", { className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label, ...(0, utils_1.ariaSelected)(item) }, item.label));
28
28
  };
29
29
  exports.DrawerSingleItem = DrawerSingleItem;
30
30
  const DrawerSpecialItem = (item) => {
31
31
  var _a;
32
32
  const selected = item.selected ? 'selected' : 'unselected';
33
- return (react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label));
33
+ return (react_1.default.createElement("a", { className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label, ...(0, utils_1.ariaSelected)(item) }, item.label));
34
34
  };
35
35
  exports.DrawerSpecialItem = DrawerSpecialItem;
36
36
  const EditionsSwitcher = (editions) => {
package/dist/node/components/drawer/topLevelPartials.js CHANGED
@@ -7,7 +7,7 @@ exports.IncludeDrawer = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const additionalPartials_1 = require("./additionalPartials");
9
9
  const askFtButton_1 = require("../ask-ft/askFtButton");
10
- const IncludeDrawer = (props) => react_1.default.createElement(Drawer, Object.assign({}, props));
10
+ const IncludeDrawer = (props) => react_1.default.createElement(Drawer, { ...props });
11
11
  exports.IncludeDrawer = IncludeDrawer;
12
12
  const Drawer = (props) => {
13
13
  const editions = props.data.editions;
@@ -18,21 +18,21 @@ const Drawer = (props) => {
18
18
  const showDrawerActions = props.showAskButton || showSubscribeButton;
19
19
  return (react_1.default.createElement("div", { className: "o-header__drawer", id: "o-header-drawer", role: "modal", "aria-label": "Drawer menu", "aria-modal": "true", "data-o-header-drawer": true, "data-o-header-drawer--no-js": true, "data-trackable": "drawer", "data-trackable-terminate": true },
20
20
  react_1.default.createElement("div", { className: "o-header__drawer-inner" },
21
- react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
21
+ react_1.default.createElement(DrawerTools, { ...editions }),
22
22
  react_1.default.createElement(Search, null),
23
23
  showDrawerActions && (react_1.default.createElement("div", { className: "o-header__drawer-actions" },
24
24
  props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { variant: "drawer", dataTrackable: "ask-ft-button-drawer", id: "ask-ft-button-drawer" })),
25
- showSubscribeButton && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)))),
25
+ showSubscribeButton && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, { ...subscribeAction }))),
26
26
  react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary" },
27
- primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
28
- secondary ? react_1.default.createElement(SectionSecondary, Object.assign({}, secondary)) : null,
29
- tertiary ? react_1.default.createElement(SectionTertiary, Object.assign({}, tertiary)) : null),
30
- react_1.default.createElement(UserMenu, Object.assign({}, user)))));
27
+ primary ? react_1.default.createElement(SectionPrimary, { ...primary }) : null,
28
+ secondary ? react_1.default.createElement(SectionSecondary, { ...secondary }) : null,
29
+ tertiary ? react_1.default.createElement(SectionTertiary, { ...tertiary }) : null),
30
+ react_1.default.createElement(UserMenu, { ...user }))));
31
31
  };
32
32
  const DrawerTools = (editions) => (react_1.default.createElement("div", { className: "o-header__drawer-tools" },
33
33
  react_1.default.createElement("button", { type: "button", className: "o-header__drawer-tools-close", title: "Close side navigation menu", "aria-controls": "o-header-drawer", "data-trackable": "close" },
34
34
  react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close side navigation menu")),
35
- editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))));
35
+ editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, { ...editions })));
36
36
  const Search = () => {
37
37
  const inputId = 'o-header-drawer-search-term';
38
38
  return (react_1.default.createElement("div", { className: "o-header__drawer-search" },
@@ -52,20 +52,20 @@ const SectionPrimary = (props) => {
52
52
  const sectionId = props.label.toLowerCase().replace(' ', '-');
53
53
  return (react_1.default.createElement(react_1.default.Fragment, null,
54
54
  react_1.default.createElement("h2", { id: sectionId, className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
55
- react_1.default.createElement("ul", { "aria-labelledby": sectionId, className: "o-header__drawer-menu-list" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: `${index}` })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item)))))))));
55
+ react_1.default.createElement("ul", { "aria-labelledby": sectionId, className: "o-header__drawer-menu-list" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: `${index}` })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, { ...item }))))))));
56
56
  };
57
57
  const SectionSecondary = (props) => {
58
58
  var _a;
59
59
  const sectionId = props.label.toLowerCase().replace(' ', '-');
60
60
  return (react_1.default.createElement(react_1.default.Fragment, null,
61
61
  react_1.default.createElement("h2", { id: sectionId, className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
62
- react_1.default.createElement("ul", { "aria-labelledby": sectionId, className: "o-header__drawer-menu-list" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: 'inner' + index })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item)))))))));
62
+ react_1.default.createElement("ul", { "aria-labelledby": sectionId, className: "o-header__drawer-menu-list" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: 'inner' + index })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, { ...item }))))))));
63
63
  };
64
64
  const SectionTertiary = (props) => {
65
65
  var _a;
66
66
  return (react_1.default.createElement(react_1.default.Fragment, null,
67
67
  react_1.default.createElement("ul", { className: "o-header__drawer-menu-list o-header__drawer-menu-list--divide" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item) => (react_1.default.createElement("li", { key: item.url, className: `o-header__drawer-menu-item` },
68
- react_1.default.createElement(additionalPartials_1.DrawerSpecialItem, Object.assign({}, item))))))));
68
+ react_1.default.createElement(additionalPartials_1.DrawerSpecialItem, { ...item })))))));
69
69
  };
70
70
  const UserMenu = (props) => (react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--user", "data-trackable": "user-nav" },
71
71
  react_1.default.createElement("ul", { className: "o-header__drawer-menu-list" }, props.items.map((item) => {
package/dist/node/components/navigation/partials.js CHANGED
@@ -13,11 +13,11 @@ const MobileNav = (props) => {
13
13
  };
14
14
  exports.MobileNav = MobileNav;
15
15
  const NavMobile = ({ items }) => {
16
- return (react_1.default.createElement("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" },
16
+ return (react_1.default.createElement("nav", { id: "o-header-nav-mobile", className: "o-header__row o-header__nav o-header__nav--mobile", "data-trackable": "header-nav:mobile" },
17
17
  react_1.default.createElement("ul", { className: "o-header__nav-list" }, items.map((item, index) => {
18
18
  var _a;
19
19
  return (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
20
- react_1.default.createElement("a", Object.assign({ className: "o-header__nav-link o-header__nav-link--primary", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
20
+ react_1.default.createElement("a", { className: "o-header__nav-link o-header__nav-link--primary", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, ...(0, utils_1.ariaSelected)(item), "data-trackable": item.label }, item.label)));
21
21
  }))));
22
22
  };
23
23
  const NavDesktop = (props) => (react_1.default.createElement("nav", { id: "o-header-nav-desktop", className: "o-header__row o-header__nav o-header__nav--desktop", role: "navigation", "aria-label": "Primary navigation", "data-trackable": "header-nav:desktop" },
@@ -26,7 +26,7 @@ exports.NavDesktop = NavDesktop;
26
26
  const NavListLeft = (props) => (react_1.default.createElement("ul", { className: "o-header__nav-list o-header__nav-list--left", "data-trackable": "primary-nav" }, props.data.navbar.items.map((item, index) => {
27
27
  var _a;
28
28
  return (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
29
- react_1.default.createElement("a", Object.assign({ className: "o-header__nav-link o-header__nav-link--primary", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, id: `o-header-link-${index}` }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label),
29
+ react_1.default.createElement("a", { className: "o-header__nav-link o-header__nav-link--primary", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, id: `o-header-link-${index}`, ...(0, utils_1.ariaSelected)(item), "data-trackable": item.label }, item.label),
30
30
  props.showMegaNav && Array.isArray(item.meganav) ? (react_1.default.createElement(MegaNav, { meganav: item.meganav, label: item.label, index: index })) : null));
31
31
  })));
32
32
  exports.NavListLeft = NavListLeft;
@@ -47,8 +47,8 @@ const MegaNav = ({ label, meganav, index }) => {
47
47
  return (react_1.default.createElement("div", { className: "o-header__mega", id: `o-header-mega-${index}`, role: "group", "aria-labelledby": `o-header-link-${index}`, "data-o-header-mega": true, "data-trackable": `meganav | ${label}` },
48
48
  react_1.default.createElement("div", { className: "o-header__container" },
49
49
  react_1.default.createElement("div", { className: "o-header__mega-wrapper" },
50
- sections ? react_1.default.createElement(SectionList, Object.assign({}, sections)) : null,
51
- articles ? react_1.default.createElement(ArticleList, Object.assign({}, articles)) : null))));
50
+ sections ? react_1.default.createElement(SectionList, { ...sections }) : null,
51
+ articles ? react_1.default.createElement(ArticleList, { ...articles }) : null))));
52
52
  };
53
53
  const SectionList = ({ title, data }) => {
54
54
  return (react_1.default.createElement("div", { className: "o-header__mega-column o-header__mega-column--subsections", "data-trackable": "sections" },
@@ -57,7 +57,7 @@ const SectionList = ({ title, data }) => {
57
57
  react_1.default.createElement("ul", { className: "o-header__mega-list" }, data === null || data === void 0 ? void 0 : data.map((column) => column.map((item, index) => {
58
58
  var _a;
59
59
  return (react_1.default.createElement("li", { className: "o-header__mega-item", key: `link-${index}` },
60
- react_1.default.createElement("a", Object.assign({ className: "o-header__mega-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": "link" }), item.label)));
60
+ react_1.default.createElement("a", { className: "o-header__mega-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, ...(0, utils_1.ariaSelected)(item), "data-trackable": "link" }, item.label)));
61
61
  }))))));
62
62
  };
63
63
  const ArticleList = ({ title, data }) => {
@@ -67,7 +67,7 @@ const ArticleList = ({ title, data }) => {
67
67
  react_1.default.createElement("ul", { className: "o-header__mega-list" }, data === null || data === void 0 ? void 0 : data.map((item, index) => {
68
68
  var _a;
69
69
  return (react_1.default.createElement("li", { className: "o-header__mega-item", key: `link-${index}` },
70
- react_1.default.createElement("a", Object.assign({ className: "o-header__mega-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": "link" }), item.label)));
70
+ react_1.default.createElement("a", { className: "o-header__mega-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, ...(0, utils_1.ariaSelected)(item), "data-trackable": "link" }, item.label)));
71
71
  })))));
72
72
  };
73
73
  const UserActionsNav = (props) => {
package/dist/node/components/sticky/partials.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const StickyHeaderWrapper: (props: THeaderProps & {
4
4
  children: React.ReactNode;
5
5
  }) => React.JSX.Element;
6
6
  declare const TopWrapperSticky: (props: any) => React.JSX.Element;
7
- declare const TopColumnLeftSticky: (props: Pick<THeaderProps, 'showAskButton'>) => React.JSX.Element;
7
+ declare const TopColumnLeftSticky: (props: Pick<THeaderProps, "showAskButton">) => React.JSX.Element;
8
8
  declare const TopColumnCenterSticky: (props: THeaderProps) => React.JSX.Element;
9
9
  declare const TopColumnRightSticky: (props: THeaderProps) => React.JSX.Element;
10
10
  export { StickyHeaderWrapper, TopWrapperSticky, TopColumnLeftSticky, TopColumnCenterSticky, TopColumnRightSticky };
package/dist/node/components/sticky/partials.js CHANGED
@@ -37,11 +37,11 @@ const TopColumnLeftSticky = (props) => {
37
37
  exports.TopColumnLeftSticky = TopColumnLeftSticky;
38
38
  const TopColumnCenterSticky = (props) => {
39
39
  return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--center" },
40
- react_1.default.createElement(Navigation, Object.assign({}, props)),
40
+ react_1.default.createElement(Navigation, { ...props }),
41
41
  react_1.default.createElement(Logo, null)));
42
42
  };
43
43
  exports.TopColumnCenterSticky = TopColumnCenterSticky;
44
44
  const TopColumnRightSticky = (props) => {
45
- return react_1.default.createElement(partials_1.TopColumnRight, Object.assign({}, props));
45
+ return react_1.default.createElement(partials_1.TopColumnRight, { ...props });
46
46
  };
47
47
  exports.TopColumnRightSticky = TopColumnRightSticky;
package/dist/node/components/sub-navigation/partials.js CHANGED
@@ -22,7 +22,7 @@ const BreadCrumb = ({ items }) => (react_1.default.createElement("ol", { classNa
22
22
  var _a;
23
23
  const selected = item.selected ? 'o-header__subnav-link--highlight' : '';
24
24
  return (react_1.default.createElement("li", { className: "o-header__subnav-item", key: `item-${index}` },
25
- react_1.default.createElement("a", Object.assign({ className: `o-header__subnav-link ${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
25
+ react_1.default.createElement("a", { className: `o-header__subnav-link ${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, ...(0, utils_1.ariaSelected)(item), "data-trackable": item.label }, item.label)));
26
26
  })));
27
27
  const SubSections = ({ items, rightAlignment }) => {
28
28
  if (!items || items.length === 0) {
@@ -33,6 +33,6 @@ const SubSections = ({ items, rightAlignment }) => {
33
33
  var _a;
34
34
  const selected = item.selected ? 'o-header__subnav-link--highlight' : '';
35
35
  return (react_1.default.createElement("li", { className: "o-header__subnav-item", key: `item-${index}` },
36
- react_1.default.createElement("a", Object.assign({ className: `o-header__subnav-link ${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
36
+ react_1.default.createElement("a", { className: `o-header__subnav-link ${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, ...(0, utils_1.ariaSelected)(item), "data-trackable": item.label }, item.label)));
37
37
  })));
38
38
  };
package/dist/node/components/svg-components/BrandFtMasthead.js CHANGED
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  };
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  const react_1 = __importDefault(require("react"));
8
- const BrandFtMasthead = ({ title, ...props }) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 1054 86" }, props),
8
+ const BrandFtMasthead = ({ title, ...props }) => (react_1.default.createElement("svg", { viewBox: "0 0 1054 86", ...props },
9
9
  title === undefined ? react_1.default.createElement("title", null, 'brand-ft-masthead') : title ? react_1.default.createElement("title", null, title) : null,
10
10
  react_1.default.createElement("path", { d: "M26.177 72.609c0 5.938 1.697 7.295 12.554 7.295v3.732H.9v-3.732c7.464 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.546-7.126-10.01-7.126V1.357h63.448l.34 22.563h-3.054C59.937 6.956 55.696 5.43 39.919 5.43H26.008v33.59h11.196c10.688 0 11.367-1.697 12.215-10.179h3.054v24.599h-3.054c-.848-8.482-1.527-10.01-12.215-10.01H26.008v29.18h.17zm46.314 11.027v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.465 0-10.01.679-10.01 7.126v60.564c0 6.446 2.545 7.125 10.01 7.125v3.732H72.49zm115.36 1.357l-56.323-69.725V72.44c0 6.617 4.58 7.634 12.385 7.634v3.733h-29.858v-3.733c7.803 0 12.045-1.017 12.045-7.634V8.991c-3.563-3.732-6.108-3.902-12.045-3.902V1.357h26.465l43.09 55.475V12.554c0-6.616-4.58-7.634-12.384-7.634V1.357h30.027V5.09c-7.803 0-12.045 1.018-12.045 7.635v72.27h-1.357zm40.207-1.357h-29.689v-3.732c7.804 0 11.367-1.018 13.911-7.804L239.085.509h7.464l28.84 72.1c2.545 6.447 3.732 7.125 9.67 7.125v3.732h-34.438v-3.732c10.518 0 11.536-.848 8.99-7.125l-8.481-21.884h-25.787L217.71 71.93c-2.375 6.447 1.357 7.804 10.518 7.804v3.902h-.17zm-1.188-37.153h22.393l-11.705-29.518-10.688 29.518zm135.548 38.51l-56.153-69.725V72.44c0 6.617 4.58 7.634 12.384 7.634v3.733h-29.18v-3.733c7.126 0 11.367-1.017 11.367-7.634V9.161c-4.071-3.732-7.125-4.072-13.91-4.072V1.357h28.16l43.09 55.475V12.554c0-6.616-4.58-7.634-12.383-7.634V1.357h29.858V5.09c-7.804 0-12.045 1.018-12.045 7.635v72.27h-1.188zm83.297-83.805h2.036l1.187 24.598-3.053.17c-2.036-14.08-9.5-21.545-23.242-21.545-15.268 0-26.804 13.063-26.804 33.081 0 25.617 16.116 40.206 33.08 40.206 7.296 0 13.912-2.035 20.358-8.99l2.376 2.374c-5.26 7.465-15.608 13.742-29.52 13.742-20.696 0-41.732-15.608-41.732-41.734C380.4 17.813 399.57 0 422.813 0c11.027 0 16.795 4.75 19.848 4.75 1.357 0 2.375-1.187 3.054-3.562zm12.723 82.448v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.464 0-10.01.679-10.01 7.126v60.564c0 6.446 2.546 7.125 10.01 7.125v3.732h-35.287zm68.538 0h-27.653v-3.732c6.108 0 9.331-1.018 11.876-7.804L538.003.509h7.464l28.84 72.1c2.545 6.447 3.733 7.125 9.67 7.125v3.732H549.54v-3.732c10.518 0 11.536-.848 8.991-7.125l-8.482-21.884h-25.786l-7.635 21.205c-2.375 6.447 1.358 7.804 10.519 7.804v3.902h-.17zm-1.188-37.153h22.394l-11.536-29.518-10.858 29.518zm63.957 37.153v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.117V5.09c-7.464 0-9.84.679-9.84 7.126v61.073c0 5.428 2.715 6.107 7.126 6.107h4.241c15.947 0 21.036-2.375 25.447-20.527l3.054.339-2.545 24.26h-62.6v.17zM760.75 1.357l.339 23.92h-3.054C756.34 7.634 752.098 5.43 736.32 5.43h-5.089v67.18c0 6.447 2.375 7.295 12.554 7.295v3.732h-40.376v-3.732c10.179 0 12.723-1.018 12.723-7.295V5.429h-5.089c-15.777 0-20.018 2.205-21.715 19.848h-3.053l.339-23.92h74.136zm7.973 82.28v-3.733c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.465 0-10.01.679-10.01 7.126v60.564c0 6.446 2.545 7.125 10.01 7.125v3.732h-35.287zM910.21 1.356V5.09c-7.465 0-10.688.34-10.01 6.956l6.447 61.073c.679 6.277 3.054 6.955 10.518 6.955v3.733h-35.117v-3.733c7.295 0 9.84-.678 9.331-6.955L884.762 8.99l-25.956 76.172h-1.018L832.34 8.822l-6.108 64.126c-.678 6.447 3.733 7.125 11.197 7.125v3.733h-27.483v-3.733c7.465 0 10.01-1.187 10.518-7.125l6.447-61.073c.679-6.446-2.545-6.955-10.01-6.955V1.357h28.84l17.305 56.153 18.661-56.153h28.5zm65.653 52.082h-3.053c-.849-8.482-1.527-10.01-12.215-10.01H948.04v29.859c0 5.428 2.715 6.107 7.125 6.107h6.786c15.947 0 21.036-2.375 25.447-20.527l3.054.339-2.884 24.26h-64.805v-3.733c7.464 0 10.009-.678 10.009-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h62.261l.34 20.527h-3.054c-1.866-14.59-5.598-16.286-21.885-16.286H948.21v33.42h12.554c10.687 0 11.366-1.696 12.214-10.178h3.054v24.599h-.17zm65.484 13.232c0-7.464-4.75-11.196-12.893-15.777l-13.063-6.786c-9.84-5.259-15.607-11.027-15.607-21.375C999.783 9.84 1010.81 0 1025.23 0c9.84 0 14.929 4.75 17.813 4.75 1.866 0 2.714-1.187 3.562-3.562h2.375l1.188 23.072-3.054.17c-1.696-11.198-9.67-19.85-20.866-19.85-8.483 0-14.081 5.09-14.081 12.215 0 7.804 5.937 11.027 12.554 14.59l11.196 5.937c10.519 5.768 17.983 11.536 17.983 22.563 0 14.59-12.554 24.939-28.161 24.939-11.028 0-16.456-5.26-19.34-5.26-1.866 0-2.884 1.697-3.732 4.242h-2.376l-1.696-24.43 3.054-.339c2.375 15.268 12.893 21.545 23.411 21.545 8.822-.17 16.286-4.071 16.286-13.91z", fill: "#231F20", fillRule: "evenodd" })));
11
11
  exports.default = BrandFtMasthead;
package/dist/node/components/top/partials.d.ts CHANGED
@@ -3,22 +3,22 @@ import { THeaderProps, THeaderVariant } from '../../interfaces';
3
3
  import { TNavMenuItem } from '@financial-times/dotcom-types-navigation';
4
4
  declare const HeaderWrapper: (props: any) => React.JSX.Element;
5
5
  declare const TopWrapper: (props: any) => React.JSX.Element;
6
- declare const TopColumnLeft: (props: Pick<THeaderProps, 'showAskButton'>) => React.JSX.Element;
6
+ declare const TopColumnLeft: (props: Pick<THeaderProps, "showAskButton">) => React.JSX.Element;
7
7
  declare const TopColumnCenter: () => React.JSX.Element;
8
8
  declare const TopColumnCenterNoLink: () => React.JSX.Element;
9
9
  declare const SignInLink: ({ item, variant, className }: {
10
10
  item: TNavMenuItem;
11
- variant?: "simple" | "large-logo" | "sticky" | undefined;
12
- className?: string | undefined;
11
+ variant?: THeaderVariant;
12
+ className?: string;
13
13
  }) => React.JSX.Element;
14
14
  declare const SubscribeButton: ({ item, variant, className }: {
15
15
  item: TNavMenuItem;
16
- variant?: "simple" | "large-logo" | "sticky" | undefined;
17
- className?: string | undefined;
16
+ variant?: THeaderVariant;
17
+ className?: string;
18
18
  }) => React.JSX.Element;
19
19
  declare const TopColumnRightAnon: ({ items, variant }: {
20
20
  items: TNavMenuItem[];
21
- variant?: "simple" | "large-logo" | "sticky" | undefined;
21
+ variant?: THeaderVariant;
22
22
  }) => React.JSX.Element;
23
23
  declare const TopColumnRight: (props: THeaderProps) => React.JSX.Element;
24
24
  export { HeaderWrapper, TopWrapper, TopColumnLeft, TopColumnCenter, TopColumnCenterNoLink, TopColumnRight, TopColumnRightAnon, SubscribeButton, SignInLink };
package/dist/node/components/top/partials.js CHANGED
@@ -17,7 +17,7 @@ const MyAccountLink = ({ item, signedIn, variant }) => {
17
17
  const classNames = 'o-header__top-myaccount';
18
18
  const id = signedIn ? 'o-header-top-link-myaccount' : 'o-header-top-link-signin';
19
19
  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null;
20
- return (react_1.default.createElement("a", Object.assign({ className: classNames, id: id, href: item.url || undefined, "data-trackable": item.label }, setTabIndex),
20
+ return (react_1.default.createElement("a", { className: classNames, id: id, href: item.url || undefined, "data-trackable": item.label, ...setTabIndex },
21
21
  react_1.default.createElement("span", null, item.label)));
22
22
  };
23
23
  const TopWrapper = (props) => (react_1.default.createElement("div", { className: "o-header__row o-header__top", "data-trackable": "header-top" },
@@ -48,16 +48,16 @@ const TopColumnRightLoggedIn = (props) => {
48
48
  const SignInLink = ({ item, variant, className }) => {
49
49
  var _a;
50
50
  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null;
51
- return (react_1.default.createElement("a", Object.assign({ className: `o-header__top-link ${className}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, setTabIndex), item.label));
51
+ return (react_1.default.createElement("a", { className: `o-header__top-link ${className}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label, ...setTabIndex }, item.label));
52
52
  };
53
53
  exports.SignInLink = SignInLink;
54
54
  const SubscribeButton = ({ item, variant, className }) => {
55
55
  var _a;
56
56
  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null;
57
- return (react_1.default.createElement("a", Object.assign({ className: `o-header__top-button ${className}`,
57
+ return (react_1.default.createElement("a", { className: `o-header__top-button ${className}`,
58
58
  // Added as the result of a DAC audit. This will be confusing for users of voice activation software
59
59
  // as it looks like a button but behaves like a link without this role.
60
- role: "button", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, setTabIndex), item.label));
60
+ role: "button", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label, ...setTabIndex }, item.label));
61
61
  };
62
62
  exports.SubscribeButton = SubscribeButton;
63
63
  const TopColumnRightAnon = ({ items, variant }) => {
@@ -70,7 +70,7 @@ const TopColumnRightAnon = ({ items, variant }) => {
70
70
  exports.TopColumnRightAnon = TopColumnRightAnon;
71
71
  const TopColumnRight = (props) => {
72
72
  if (props.userIsLoggedIn) {
73
- return react_1.default.createElement(TopColumnRightLoggedIn, Object.assign({}, props));
73
+ return react_1.default.createElement(TopColumnRightLoggedIn, { ...props });
74
74
  }
75
75
  else {
76
76
  const userNavAnonItems = props.data['navbar-top-right-anon'].items;
package/dist/node/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { THeaderProps, THeaderOptions } from './interfaces';
2
+ import { THeaderProps, THeaderOptions, THeaderVariant } from './interfaces';
3
3
  declare function MainHeader(props: THeaderProps): React.JSX.Element;
4
4
  declare namespace MainHeader {
5
5
  var defaultProps: {
6
6
  showLogoLink: boolean;
7
- variant?: "simple" | "large-logo" | "sticky" | undefined;
7
+ variant?: THeaderVariant | undefined;
8
8
  userIsAnonymous?: boolean | undefined;
9
9
  userIsLoggedIn?: boolean | undefined;
10
10
  userIsSubscribed?: boolean | undefined;
package/dist/node/index.js CHANGED
@@ -3,7 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Drawer = exports.NoOutboundLinksHeader = exports.LogoOnly = exports.StickyHeader = exports.MainHeader = exports.Header = void 0;
6
+ exports.Header = Header;
7
+ exports.MainHeader = MainHeader;
8
+ exports.StickyHeader = StickyHeader;
9
+ exports.LogoOnly = LogoOnly;
10
+ exports.NoOutboundLinksHeader = NoOutboundLinksHeader;
11
+ exports.Drawer = Drawer;
7
12
  const react_1 = __importDefault(require("react"));
8
13
  const partials_1 = require("./components/top/partials");
9
14
  const partials_2 = require("./components/navigation/partials");
@@ -23,61 +28,55 @@ const defaultProps = {
23
28
  function MainHeader(props) {
24
29
  const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn;
25
30
  const includeSubNavigation = props.showSubNavigation && (props.data.breadcrumb || props.data.subsections);
26
- return (react_1.default.createElement(partials_1.HeaderWrapper, Object.assign({}, props),
27
- includeUserActionsNav ? react_1.default.createElement(partials_2.UserActionsNav, Object.assign({}, props)) : null,
31
+ return (react_1.default.createElement(partials_1.HeaderWrapper, { ...props },
32
+ includeUserActionsNav ? react_1.default.createElement(partials_2.UserActionsNav, { ...props }) : null,
28
33
  react_1.default.createElement(partials_1.TopWrapper, null,
29
- react_1.default.createElement(partials_1.TopColumnLeft, Object.assign({}, props)),
34
+ react_1.default.createElement(partials_1.TopColumnLeft, { ...props }),
30
35
  props.showLogoLink ? react_1.default.createElement(partials_1.TopColumnCenter, null) : react_1.default.createElement(partials_1.TopColumnCenterNoLink, null),
31
- react_1.default.createElement(partials_1.TopColumnRight, Object.assign({}, props))),
36
+ react_1.default.createElement(partials_1.TopColumnRight, { ...props })),
32
37
  react_1.default.createElement(partials_5.Search, { instance: "primary" }),
33
- react_1.default.createElement(partials_2.MobileNav, Object.assign({}, props)),
38
+ react_1.default.createElement(partials_2.MobileNav, { ...props }),
34
39
  react_1.default.createElement(partials_2.NavDesktop, null,
35
- react_1.default.createElement(partials_2.NavListLeft, Object.assign({}, props)),
36
- props.showUserNavigation ? react_1.default.createElement(partials_2.NavListRight, Object.assign({}, props)) : null),
37
- includeSubNavigation ? react_1.default.createElement(partials_4.SubNavigation, Object.assign({}, props)) : null));
40
+ react_1.default.createElement(partials_2.NavListLeft, { ...props }),
41
+ props.showUserNavigation ? react_1.default.createElement(partials_2.NavListRight, { ...props }) : null),
42
+ includeSubNavigation ? react_1.default.createElement(partials_4.SubNavigation, { ...props }) : null));
38
43
  }
39
- exports.MainHeader = MainHeader;
40
44
  MainHeader.defaultProps = { ...defaultProps, showLogoLink: true };
41
45
  function StickyHeader(props) {
42
46
  const stickyProps = {
43
47
  ...props,
44
48
  variant: 'sticky'
45
49
  };
46
- return props.showStickyHeader ? (react_1.default.createElement(partials_3.StickyHeaderWrapper, Object.assign({}, stickyProps),
50
+ return props.showStickyHeader ? (react_1.default.createElement(partials_3.StickyHeaderWrapper, { ...stickyProps },
47
51
  react_1.default.createElement(partials_3.TopWrapperSticky, null,
48
- react_1.default.createElement(partials_3.TopColumnLeftSticky, Object.assign({}, stickyProps)),
49
- react_1.default.createElement(partials_3.TopColumnCenterSticky, Object.assign({}, stickyProps)),
50
- react_1.default.createElement(partials_3.TopColumnRightSticky, Object.assign({}, stickyProps))),
52
+ react_1.default.createElement(partials_3.TopColumnLeftSticky, { ...stickyProps }),
53
+ react_1.default.createElement(partials_3.TopColumnCenterSticky, { ...stickyProps }),
54
+ react_1.default.createElement(partials_3.TopColumnRightSticky, { ...stickyProps })),
51
55
  react_1.default.createElement(partials_5.Search, { instance: "sticky" }))) : null;
52
56
  }
53
- exports.StickyHeader = StickyHeader;
54
57
  StickyHeader.defaultProps = defaultProps;
55
58
  function Header(props) {
56
59
  return (react_1.default.createElement(react_1.default.Fragment, null,
57
- react_1.default.createElement(MainHeader, Object.assign({}, props)),
58
- react_1.default.createElement(StickyHeader, Object.assign({}, props))));
60
+ react_1.default.createElement(MainHeader, { ...props }),
61
+ react_1.default.createElement(StickyHeader, { ...props })));
59
62
  }
60
- exports.Header = Header;
61
63
  Header.defaultProps = defaultProps;
62
64
  function LogoOnly(props) {
63
- return (react_1.default.createElement(partials_1.HeaderWrapper, Object.assign({}, props),
65
+ return (react_1.default.createElement(partials_1.HeaderWrapper, { ...props },
64
66
  react_1.default.createElement(partials_1.TopWrapper, null, props.showLogoLink ? react_1.default.createElement(partials_1.TopColumnCenter, null) : react_1.default.createElement(partials_1.TopColumnCenterNoLink, null))));
65
67
  }
66
- exports.LogoOnly = LogoOnly;
67
68
  LogoOnly.defaultProps = defaultProps;
68
69
  function Drawer(props) {
69
- return react_1.default.createElement(topLevelPartials_1.IncludeDrawer, Object.assign({}, props));
70
+ return react_1.default.createElement(topLevelPartials_1.IncludeDrawer, { ...props });
70
71
  }
71
- exports.Drawer = Drawer;
72
72
  Drawer.defaultProps = defaultProps;
73
73
  function NoOutboundLinksHeader(props) {
74
74
  const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn;
75
75
  const includeSubNavigation = props.showSubNavigation && (props.data.breadcrumb || props.data.subsections);
76
- return (react_1.default.createElement(partials_1.HeaderWrapper, Object.assign({}, props),
77
- includeUserActionsNav ? react_1.default.createElement(partials_2.UserActionsNav, Object.assign({}, props)) : null,
76
+ return (react_1.default.createElement(partials_1.HeaderWrapper, { ...props },
77
+ includeUserActionsNav ? react_1.default.createElement(partials_2.UserActionsNav, { ...props }) : null,
78
78
  react_1.default.createElement(partials_1.TopWrapper, null, props.showLogoLink ? react_1.default.createElement(partials_1.TopColumnCenter, null) : react_1.default.createElement(partials_1.TopColumnCenterNoLink, null)),
79
- react_1.default.createElement(partials_2.NavDesktop, null, props.showUserNavigation ? react_1.default.createElement(partials_2.NavListRight, Object.assign({}, props)) : null),
80
- includeSubNavigation ? react_1.default.createElement(partials_4.SubNavigation, Object.assign({}, props)) : null));
79
+ react_1.default.createElement(partials_2.NavDesktop, null, props.showUserNavigation ? react_1.default.createElement(partials_2.NavListRight, { ...props }) : null),
80
+ includeSubNavigation ? react_1.default.createElement(partials_4.SubNavigation, { ...props }) : null));
81
81
  }
82
- exports.NoOutboundLinksHeader = NoOutboundLinksHeader;
83
82
  NoOutboundLinksHeader.defaultProps = defaultProps;