@financial-times/dotcom-ui-footer 7.2.7 → 7.3.1
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/partials.d.ts +25 -0
- package/dist/node/index.d.ts +10 -0
- package/dist/tsconfig.tsbuildinfo +2002 -0
- package/package.json +7 -5
- package/src/components/partials.tsx +0 -146
- package/src/index.tsx +0 -39
- package/styles.scss +0 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/dotcom-ui-footer",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.3.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "component.js",
|
|
6
6
|
"styles": "styles.scss",
|
|
@@ -8,13 +8,12 @@
|
|
|
8
8
|
"types": "src/index.tsx",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
|
-
"tsc": "../../node_modules/.bin/tsc --incremental",
|
|
12
11
|
"clean": "npm run clean:dist && npm run clean:node_modules",
|
|
13
12
|
"clean:dist": "rm -rf dist",
|
|
14
13
|
"clean:node_modules": "rm -rf node_modules",
|
|
15
14
|
"clean:install": "npm run clean && npm i",
|
|
15
|
+
"build:node": "tsc",
|
|
16
16
|
"build": "npm run build:node",
|
|
17
|
-
"build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
|
|
18
17
|
"dev": "npm run build:node -- --watch",
|
|
19
18
|
"preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
|
|
20
19
|
},
|
|
@@ -22,7 +21,7 @@
|
|
|
22
21
|
"author": "",
|
|
23
22
|
"license": "MIT",
|
|
24
23
|
"dependencies": {
|
|
25
|
-
"@financial-times/dotcom-types-navigation": "
|
|
24
|
+
"@financial-times/dotcom-types-navigation": "file:../dotcom-types-navigation"
|
|
26
25
|
},
|
|
27
26
|
"peerDependencies": {
|
|
28
27
|
"react": "16.x || 17.x",
|
|
@@ -32,6 +31,9 @@
|
|
|
32
31
|
"node": ">= 14.0.0",
|
|
33
32
|
"npm": "7.x || 8.x"
|
|
34
33
|
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist/"
|
|
36
|
+
],
|
|
35
37
|
"repository": {
|
|
36
38
|
"type": "git",
|
|
37
39
|
"repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
|
|
@@ -46,4 +48,4 @@
|
|
|
46
48
|
"@financial-times/o-footer": "^9.2.0",
|
|
47
49
|
"react": "^16.8.6"
|
|
48
50
|
}
|
|
49
|
-
}
|
|
51
|
+
}
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
|
|
3
|
-
|
|
4
|
-
type TLinkProps = {
|
|
5
|
-
item: TNavMenuItem
|
|
6
|
-
[key: string]: any
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const Link = ({ item, ...props }: TLinkProps) => {
|
|
10
|
-
const disableTracking = { 'data-o-tracking-do-not-track': item.disableTracking ? true : null }
|
|
11
|
-
|
|
12
|
-
return (
|
|
13
|
-
<a {...props} href={item.url} data-trackable={item.label} {...disableTracking}>
|
|
14
|
-
<span className="o-footer__matrix-link__copy">{item.label}</span>
|
|
15
|
-
</a>
|
|
16
|
-
)
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
type TSectionLinksProps = {
|
|
20
|
-
index: number
|
|
21
|
-
submenu: TNavMenuItem[][]
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const SectionLinks = ({ submenu, index }: TSectionLinksProps) => {
|
|
25
|
-
return (
|
|
26
|
-
<div className="o-footer__matrix-content" id={`o-footer-section-${index}`}>
|
|
27
|
-
{submenu.map((submenuItems, index) => (
|
|
28
|
-
<div className="o-footer__matrix-column" key={`column-${index}`}>
|
|
29
|
-
{submenuItems.map((item, index) => (
|
|
30
|
-
<Link className="o-footer__matrix-link" item={item} key={`link-${index}`} />
|
|
31
|
-
))}
|
|
32
|
-
</div>
|
|
33
|
-
))}
|
|
34
|
-
</div>
|
|
35
|
-
)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
type TSectionTitleProps = {
|
|
39
|
-
index: number
|
|
40
|
-
label: string
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const SectionTitle = ({ label, index }: TSectionTitleProps) => {
|
|
44
|
-
// On smaller viewports, submenu which span one column is collapsed behind toggles
|
|
45
|
-
const ariaControls = { 'aria-controls': `o-footer-section-${index}` }
|
|
46
|
-
return (
|
|
47
|
-
<h3 className="o-footer__matrix-title" {...ariaControls}>
|
|
48
|
-
{label}
|
|
49
|
-
</h3>
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
type TFooterContentsProps = {
|
|
54
|
-
footerData: TNavMenuItem[]
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
const FooterContents = ({ footerData }: TFooterContentsProps) => (
|
|
58
|
-
<div className="o-footer__row">
|
|
59
|
-
<h2 className="o-normalise-visually-hidden">Useful links</h2>
|
|
60
|
-
<nav className="o-footer__matrix" role="navigation" aria-label="Useful links">
|
|
61
|
-
{footerData.map((item, index) => {
|
|
62
|
-
// The Next navigation API splits footer links data into "columns"
|
|
63
|
-
// <https://github.com/Financial-Times/next-navigation-api/blob/HEAD/server/transforms/footer.js>
|
|
64
|
-
const submenu = item.submenu.items as TNavMenuItem[][]
|
|
65
|
-
return (
|
|
66
|
-
<div
|
|
67
|
-
key={`group-${index}`}
|
|
68
|
-
className={`o-footer__matrix-group o-footer__matrix-group--${submenu.length}`}>
|
|
69
|
-
<SectionTitle label={item.label} index={index} />
|
|
70
|
-
<SectionLinks submenu={submenu} index={index} />
|
|
71
|
-
</div>
|
|
72
|
-
)
|
|
73
|
-
})}
|
|
74
|
-
<div className="o-footer__matrix-group o-footer__matrix-group--1">
|
|
75
|
-
<h3 className="o-footer__matrix-title o-footer__matrix-title--link">
|
|
76
|
-
<a
|
|
77
|
-
className="o-footer__matrix-link o-footer__matrix-link--more"
|
|
78
|
-
id={`o-footer-${footerData.length}`}
|
|
79
|
-
href="https://ft.com/more-from-ft-group">
|
|
80
|
-
<span className="o-footer__matrix-link__copy">More from the FT Group</span>
|
|
81
|
-
</a>
|
|
82
|
-
</h3>
|
|
83
|
-
</div>
|
|
84
|
-
</nav>
|
|
85
|
-
</div>
|
|
86
|
-
)
|
|
87
|
-
|
|
88
|
-
const CopyrightNotice = ({ withoutMarketsData = false }) => {
|
|
89
|
-
const marketsData = withoutMarketsData ? '' : 'Markets data delayed by at least 15 minutes. '
|
|
90
|
-
return (
|
|
91
|
-
<div className="o-footer__copyright">
|
|
92
|
-
<small>
|
|
93
|
-
{`${marketsData}© THE FINANCIAL TIMES LTD ${new Date().getFullYear()}. `}
|
|
94
|
-
<abbr title="Financial Times" aria-label="F T">
|
|
95
|
-
FT
|
|
96
|
-
</abbr>{' '}
|
|
97
|
-
and ‘Financial Times’ are trademarks of The Financial Times Ltd.
|
|
98
|
-
<br />
|
|
99
|
-
The Financial Times and its journalism are subject to a self-regulation regime under the{' '}
|
|
100
|
-
<a href="http://aboutus.ft.com/en-gb/ft-editorial-code/" aria-label="F T Editorial Code of Practice">
|
|
101
|
-
FT Editorial Code of Practice
|
|
102
|
-
</a>
|
|
103
|
-
.
|
|
104
|
-
</small>
|
|
105
|
-
</div>
|
|
106
|
-
)
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
type TCompressedLegalProps = {
|
|
110
|
-
footerData: TNavMenuItem[]
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const CompressedLegal = ({ footerData }: TCompressedLegalProps) => {
|
|
114
|
-
// Find the legal and privacy column
|
|
115
|
-
const data = footerData.filter((item) => item.label === 'Legal & Privacy')
|
|
116
|
-
|
|
117
|
-
return (
|
|
118
|
-
<React.Fragment>
|
|
119
|
-
{data.map((legal, index) => (
|
|
120
|
-
// The Next navigation API splits footer links data into "columns"
|
|
121
|
-
// <https://github.com/Financial-Times/next-navigation-api/blob/HEAD/server/transforms/footer.js>
|
|
122
|
-
<div key={`column-${index}`}>
|
|
123
|
-
{(legal.submenu.items as TNavMenuItem[][]).map((items, index) => (
|
|
124
|
-
<ul className="o-footer__legal-links" key={`list-${index}`}>
|
|
125
|
-
{items.map((item, index) => (
|
|
126
|
-
<li key={`item-${index}`}>
|
|
127
|
-
<Link item={item} key={`link-${index}`} />
|
|
128
|
-
</li>
|
|
129
|
-
))}
|
|
130
|
-
</ul>
|
|
131
|
-
))}
|
|
132
|
-
</div>
|
|
133
|
-
))}
|
|
134
|
-
</React.Fragment>
|
|
135
|
-
)
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
const NikkeiBrandLogo = () => (
|
|
139
|
-
<div className="o-footer__brand">
|
|
140
|
-
<div className="o-footer__container">
|
|
141
|
-
<div className="o-footer__brand-logo" />
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
)
|
|
145
|
-
|
|
146
|
-
export { SectionLinks, SectionTitle, FooterContents, CompressedLegal, CopyrightNotice, NikkeiBrandLogo }
|
package/src/index.tsx
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { TNavigationData } from '@financial-times/dotcom-types-navigation'
|
|
3
|
-
import { FooterContents, CopyrightNotice, NikkeiBrandLogo, CompressedLegal } from './components/partials'
|
|
4
|
-
|
|
5
|
-
export type TFooterOptions = {
|
|
6
|
-
theme?: 'dark' | 'light' | string
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export type TFooterProps = TFooterOptions & {
|
|
10
|
-
data: TNavigationData
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export function Footer(props: TFooterProps) {
|
|
14
|
-
const footerData = props.data.footer.items
|
|
15
|
-
const theme = props.theme ? `${props.theme}` : 'dark'
|
|
16
|
-
return (
|
|
17
|
-
<footer id="site-footer" className={`o-footer o-footer--theme-${theme}`} data-o-component="o-footer">
|
|
18
|
-
<div className="o-footer__container">
|
|
19
|
-
<FooterContents footerData={footerData} />
|
|
20
|
-
<CopyrightNotice />
|
|
21
|
-
</div>
|
|
22
|
-
<NikkeiBrandLogo />
|
|
23
|
-
</footer>
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function LegalFooter(props: TFooterProps) {
|
|
28
|
-
const footerData = props.data.footer.items
|
|
29
|
-
const theme = props.theme ? props.theme : 'dark'
|
|
30
|
-
return (
|
|
31
|
-
<footer id="site-footer" className={`o-footer o-footer--theme-${theme}`} data-o-component="o-footer">
|
|
32
|
-
<div className="o-footer__container">
|
|
33
|
-
<CompressedLegal footerData={footerData} />
|
|
34
|
-
<CopyrightNotice withoutMarketsData={true} />
|
|
35
|
-
</div>
|
|
36
|
-
<NikkeiBrandLogo />
|
|
37
|
-
</footer>
|
|
38
|
-
)
|
|
39
|
-
}
|