@financial-times/dotcom-ui-header 10.1.0 → 10.3.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.
- package/dist/node/components/ask-ft/askFtButton.js +3 -2
- package/dist/node/components/drawer/additionalPartials.js +8 -8
- package/dist/node/components/drawer/topLevelPartials.js +14 -14
- package/dist/node/components/search/partials.js +10 -7
- package/dist/tsconfig.tsbuildinfo +16 -4
- package/package.json +4 -4
- package/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap +224 -232
- package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +207 -159
- package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +159 -122
- package/src/__test__/output/drawer.spec.tsx +2 -2
- package/src/components/ask-ft/askFtButton.tsx +10 -9
- package/src/components/drawer/additionalPartials.tsx +22 -25
- package/src/components/drawer/topLevelPartials.tsx +37 -41
- package/src/components/search/partials.tsx +34 -26
- package/src/header.scss +9 -1
- package/styles.scss +5 -0
|
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.AskFtButton = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const AskFtButton = ({ id, className, dataTrackable }) => (react_1.default.createElement("
|
|
9
|
-
react_1.default.createElement("
|
|
8
|
+
const AskFtButton = ({ id, className, dataTrackable }) => (react_1.default.createElement("div", { className: "o-header__drawer-actions" },
|
|
9
|
+
react_1.default.createElement("a", { id: id, className: `ft-header__ask-ft-button ${className}`, "data-trackable": dataTrackable, href: "https://ask.ft.com", title: "ASK FT" },
|
|
10
|
+
react_1.default.createElement("span", { className: "ft-header__ask-ft-button-label" }, "Ask FT"))));
|
|
10
11
|
exports.AskFtButton = AskFtButton;
|
|
@@ -33,14 +33,14 @@ const DrawerSpecialItem = (item) => {
|
|
|
33
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));
|
|
34
34
|
};
|
|
35
35
|
exports.DrawerSpecialItem = DrawerSpecialItem;
|
|
36
|
-
const EditionsSwitcher = (editions) =>
|
|
37
|
-
|
|
38
|
-
return (react_1.default.createElement("
|
|
39
|
-
react_1.default.createElement("
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
36
|
+
const EditionsSwitcher = (editions) => {
|
|
37
|
+
var _a, _b;
|
|
38
|
+
return (react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-edition-switcher", "aria-label": "Edition switcher" },
|
|
39
|
+
react_1.default.createElement("span", { className: "o-header__drawer-menu-item" }, "Edition:"),
|
|
40
|
+
react_1.default.createElement("span", { className: "o-header__drawer-menu-item o-header__drawer-current-edition" }, (_a = editions.current) === null || _a === void 0 ? void 0 : _a.name),
|
|
41
|
+
react_1.default.createElement("div", { className: "o-header__drawer-divider" }), (_b = editions.others) === null || _b === void 0 ? void 0 :
|
|
42
|
+
_b.map(({ name, id, url }) => (react_1.default.createElement("a", { key: id, className: "o-header__drawer-menu-link", href: `${url}?edition=${id}` }, name)))));
|
|
43
|
+
};
|
|
44
44
|
exports.EditionsSwitcher = EditionsSwitcher;
|
|
45
45
|
const SubscribeButton = (action) => (react_1.default.createElement("div", { className: "o-header__drawer-actions" },
|
|
46
46
|
react_1.default.createElement("a", { className: "o-header__drawer-button", role: "button", href: action.url, "data-trackable": "subscribe-button" }, action.name)));
|
|
@@ -17,30 +17,30 @@ const Drawer = (props) => {
|
|
|
17
17
|
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 },
|
|
18
18
|
react_1.default.createElement("div", { className: "o-header__drawer-inner" },
|
|
19
19
|
react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
|
|
20
|
+
react_1.default.createElement(Search, null),
|
|
21
|
+
props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__drawer-ask-ft-button", id: "ask-ft-button-drawer", dataTrackable: "ask-ft-button-drawer" })),
|
|
20
22
|
!props.userIsSubscribed && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)),
|
|
21
|
-
react_1.default.createElement(Search, Object.assign({}, props)),
|
|
22
|
-
react_1.default.createElement("nav", { className: "o-header__drawer-menu", "aria-label": "Edition switcher" }, editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))),
|
|
23
23
|
react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary" },
|
|
24
24
|
primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
|
|
25
25
|
secondary ? react_1.default.createElement(SectionSecondary, Object.assign({}, secondary)) : null,
|
|
26
26
|
tertiary ? react_1.default.createElement(SectionTertiary, Object.assign({}, tertiary)) : null),
|
|
27
27
|
react_1.default.createElement(UserMenu, Object.assign({}, user)))));
|
|
28
28
|
};
|
|
29
|
-
const DrawerTools = (
|
|
29
|
+
const DrawerTools = (editions) => (react_1.default.createElement("div", { className: "o-header__drawer-tools" },
|
|
30
30
|
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" },
|
|
31
31
|
react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close side navigation menu")),
|
|
32
|
-
react_1.default.createElement(
|
|
33
|
-
|
|
34
|
-
props.current && react_1.default.createElement("p", { className: "o-header__drawer-current-edition" }, `${props.current.name} Edition`)));
|
|
35
|
-
const Search = (props) => (react_1.default.createElement("div", { className: "o-header__drawer-search" },
|
|
32
|
+
editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))));
|
|
33
|
+
const Search = () => (react_1.default.createElement("div", { className: "o-header__drawer-search" },
|
|
36
34
|
react_1.default.createElement("form", { className: "o-header__drawer-search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true, "data-n-topic-search-categories": "concepts,equities", "data-n-topic-search-view-all": true },
|
|
37
|
-
react_1.default.createElement("label", {
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
react_1.default.createElement("span", { className: "o-
|
|
43
|
-
|
|
35
|
+
react_1.default.createElement("label", { htmlFor: "o-header-drawer-search-term", className: "o-forms-field o-forms-field--optional" },
|
|
36
|
+
react_1.default.createElement("span", { className: "o-forms-title o-header__visually-hidden" },
|
|
37
|
+
react_1.default.createElement("span", { className: "o-forms-title__main" },
|
|
38
|
+
"Search the ",
|
|
39
|
+
react_1.default.createElement("abbr", { title: "Financial Times" }, "FT"))),
|
|
40
|
+
react_1.default.createElement("span", { className: "o-forms-input o-forms-input--text o-forms-input--suffix" },
|
|
41
|
+
react_1.default.createElement("input", { id: "o-header-drawer-search-term", name: "q", type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "data-trackable": "search-term", "data-n-topic-search-input": true, placeholder: "Search for stories, topics or securities" }),
|
|
42
|
+
react_1.default.createElement("button", { className: "o-header__drawer-search-submit", type: "submit", "data-trackable": "search-submit" },
|
|
43
|
+
react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")))))));
|
|
44
44
|
const SectionPrimary = (props) => {
|
|
45
45
|
var _a;
|
|
46
46
|
const sectionId = props.label.toLowerCase().replace(' ', '-');
|
|
@@ -9,12 +9,15 @@ const Search = ({ instance }) => {
|
|
|
9
9
|
return (react_1.default.createElement("div", { id: `o-header-search-${instance}`, className: `o-header__row o-header__search o-header__search--${instance}`, "data-trackable": "header-search", "data-o-header-search": true },
|
|
10
10
|
react_1.default.createElement("div", { className: "o-header__container" },
|
|
11
11
|
react_1.default.createElement("form", { className: "o-header__search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true, "data-n-topic-search-categories": "concepts,equities", "data-n-topic-search-view-all": true },
|
|
12
|
-
react_1.default.createElement("label", {
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
react_1.default.createElement("label", { htmlFor: `o-header-search-term-${instance}`, className: "o-header__search-term o-forms-field o-forms-field--optional" },
|
|
13
|
+
react_1.default.createElement("span", { className: "o-forms-title o-header__visually-hidden" },
|
|
14
|
+
react_1.default.createElement("span", { className: "o-forms-title__main" },
|
|
15
|
+
"Search the ",
|
|
16
|
+
react_1.default.createElement("abbr", { title: "Financial Times" }, "FT"))),
|
|
17
|
+
react_1.default.createElement("span", { className: "o-forms-input o-forms-input--text o-forms-input--suffix" },
|
|
18
|
+
react_1.default.createElement("input", { className: "o-header__search-term", id: `o-header-search-term-${instance}`, name: "q", type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "data-trackable": "search-term", "data-n-topic-search-input": true, placeholder: "Search for stories, topics or securities" }),
|
|
19
|
+
react_1.default.createElement("button", { className: "o-header__search-submit", type: "submit" }, "Search"),
|
|
20
|
+
react_1.default.createElement("button", { className: "o-header__search-close o--if-js", type: "button", "aria-controls": `o-header-search-${instance}`, title: "Close search bar", "data-trackable": "close" },
|
|
21
|
+
react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close search bar"))))))));
|
|
19
22
|
};
|
|
20
23
|
exports.Search = Search;
|
|
@@ -182,7 +182,7 @@
|
|
|
182
182
|
"affectsGlobalScope": false
|
|
183
183
|
},
|
|
184
184
|
"../src/components/ask-ft/askFtButton.tsx": {
|
|
185
|
-
"version": "
|
|
185
|
+
"version": "a827235e62e71862d2899c28707befaca960138bafadc50f71a5feac74294f61",
|
|
186
186
|
"signature": "478e79eef989a22fe3dc976337d53a5e3ea146b07304c45620b8b91560dd106b",
|
|
187
187
|
"affectsGlobalScope": false
|
|
188
188
|
},
|
|
@@ -212,17 +212,17 @@
|
|
|
212
212
|
"affectsGlobalScope": false
|
|
213
213
|
},
|
|
214
214
|
"../src/components/drawer/additionalPartials.tsx": {
|
|
215
|
-
"version": "
|
|
215
|
+
"version": "5ea50ec853d68d1f8b7f6067b19d773f71c16409231bf648a1caa0adbb897095",
|
|
216
216
|
"signature": "4d2af22c877fa282f11402da8da4ccabca6e1c6515b03579caa84e44a3a56067",
|
|
217
217
|
"affectsGlobalScope": false
|
|
218
218
|
},
|
|
219
219
|
"../src/components/drawer/topLevelPartials.tsx": {
|
|
220
|
-
"version": "
|
|
220
|
+
"version": "7310d5c055bea7e85677276877bf82cf04d9b472eaf0189c9cae8876ce05c844",
|
|
221
221
|
"signature": "9d1b0a09950f10403acbd59a85db578c3d6d0eec6d4fd6b26deacd7fc69b5bb4",
|
|
222
222
|
"affectsGlobalScope": false
|
|
223
223
|
},
|
|
224
224
|
"../src/components/search/partials.tsx": {
|
|
225
|
-
"version": "
|
|
225
|
+
"version": "f2a8b056d48b25b6211e0975fef8fa78fd4160caeb89b0afe70a1b8339092181",
|
|
226
226
|
"signature": "95cc7b856ca35f4cf26ee51afe536bfedb47e2bf354d9dc0d25e2d57f96d848e",
|
|
227
227
|
"affectsGlobalScope": false
|
|
228
228
|
},
|
|
@@ -716,6 +716,11 @@
|
|
|
716
716
|
"signature": "b82fc740467e59abe3d6170417e461527d2a95610f55915fc59557c4b7be55ba",
|
|
717
717
|
"affectsGlobalScope": false
|
|
718
718
|
},
|
|
719
|
+
"../../../node_modules/@types/lodash.uniqueid/index.d.ts": {
|
|
720
|
+
"version": "f7bc2eb97d6cd2821d4b8cff502655b71bcafd633598d7acc46ef9cfe85b3915",
|
|
721
|
+
"signature": "f7bc2eb97d6cd2821d4b8cff502655b71bcafd633598d7acc46ef9cfe85b3915",
|
|
722
|
+
"affectsGlobalScope": false
|
|
723
|
+
},
|
|
719
724
|
"../../../node_modules/@types/mdast/index.d.ts": {
|
|
720
725
|
"version": "202f8582ee3cd89e06c4a17d8aabb925ff8550370559c771d1cc3ec3934071c2",
|
|
721
726
|
"signature": "202f8582ee3cd89e06c4a17d8aabb925ff8550370559c771d1cc3ec3934071c2",
|
|
@@ -1205,6 +1210,9 @@
|
|
|
1205
1210
|
"../../../node_modules/jest-matcher-utils/build/index.d.ts",
|
|
1206
1211
|
"../../../node_modules/pretty-format/build/index.d.ts"
|
|
1207
1212
|
],
|
|
1213
|
+
"../../../node_modules/@types/lodash.uniqueid/index.d.ts": [
|
|
1214
|
+
"../../../node_modules/@types/lodash/index.d.ts"
|
|
1215
|
+
],
|
|
1208
1216
|
"../../../node_modules/@types/lodash/common/array.d.ts": [
|
|
1209
1217
|
"../../../node_modules/@types/lodash/common/collection.d.ts",
|
|
1210
1218
|
"../../../node_modules/@types/lodash/common/common.d.ts",
|
|
@@ -2016,6 +2024,9 @@
|
|
|
2016
2024
|
"../../../node_modules/jest-matcher-utils/build/index.d.ts",
|
|
2017
2025
|
"../../../node_modules/pretty-format/build/index.d.ts"
|
|
2018
2026
|
],
|
|
2027
|
+
"../../../node_modules/@types/lodash.uniqueid/index.d.ts": [
|
|
2028
|
+
"../../../node_modules/@types/lodash/index.d.ts"
|
|
2029
|
+
],
|
|
2019
2030
|
"../../../node_modules/@types/lodash/common/array.d.ts": [
|
|
2020
2031
|
"../../../node_modules/@types/lodash/common/collection.d.ts",
|
|
2021
2032
|
"../../../node_modules/@types/lodash/common/common.d.ts",
|
|
@@ -2768,6 +2779,7 @@
|
|
|
2768
2779
|
"../../../node_modules/@types/jest/index.d.ts",
|
|
2769
2780
|
"../../../node_modules/@types/json-schema/index.d.ts",
|
|
2770
2781
|
"../../../node_modules/@types/json5/index.d.ts",
|
|
2782
|
+
"../../../node_modules/@types/lodash.uniqueid/index.d.ts",
|
|
2771
2783
|
"../../../node_modules/@types/lodash/common/array.d.ts",
|
|
2772
2784
|
"../../../node_modules/@types/lodash/common/collection.d.ts",
|
|
2773
2785
|
"../../../node_modules/@types/lodash/common/common.d.ts",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/dotcom-ui-header",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.3.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"browser": "browser.js",
|
|
6
6
|
"main": "component.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"author": "",
|
|
23
23
|
"license": "MIT",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@financial-times/dotcom-types-navigation": "^10.
|
|
25
|
+
"@financial-times/dotcom-types-navigation": "^10.3.0",
|
|
26
26
|
"n-topic-search": "^4.0.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"@svgr/core": "^5.0.0",
|
|
31
31
|
"camelcase": "^6.0.0",
|
|
32
32
|
"check-engine": "^1.10.1",
|
|
33
|
-
"@financial-times/o-header": "^
|
|
33
|
+
"@financial-times/o-header": "^13.0.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@financial-times/o-header": "^
|
|
36
|
+
"@financial-times/o-header": "^13.0.0",
|
|
37
37
|
"@financial-times/logo-images": "^1.10.1",
|
|
38
38
|
"react": "17.x || 18.x",
|
|
39
39
|
"react-dom": "17.x || 18.x",
|