@financial-times/cp-content-pipeline-ui 5.6.4 → 6.1.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/CHANGELOG.md +40 -0
- package/README.md +1 -1
- package/lib/components/ArticleBody/index.d.ts +1 -1
- package/lib/components/ArticleBody/index.js +3 -3
- package/lib/components/ArticleBody/index.js.map +1 -1
- package/lib/components/Body/index.d.ts +6 -4
- package/lib/components/Body/index.js +9 -9
- package/lib/components/Body/index.js.map +1 -1
- package/lib/components/ContentPackageBody/index.d.ts +1 -1
- package/lib/components/ContentPackageBody/index.js +2 -2
- package/lib/components/ContentPackageBody/index.js.map +1 -1
- package/lib/components/LiveBlogBody/index.d.ts +1 -1
- package/lib/components/LiveBlogBody/index.js +2 -2
- package/lib/components/LiveBlogBody/index.js.map +1 -1
- package/lib/components/PodcastBody/index.d.ts +1 -1
- package/lib/components/PodcastBody/index.js +2 -2
- package/lib/components/PodcastBody/index.js.map +1 -1
- package/lib/components/Recommended/index.d.ts +1 -1
- package/lib/components/Recommended/index.js +7 -4
- package/lib/components/Recommended/index.js.map +1 -1
- package/lib/components/RichText/index.d.ts +3 -3
- package/lib/components/RichText/index.js.map +1 -1
- package/lib/components/Topper/Intro.d.ts +3 -1
- package/lib/components/Topper/Intro.js +2 -2
- package/lib/components/Topper/Intro.js.map +1 -1
- package/lib/components/Topper/index.d.ts +2 -1
- package/lib/components/Topper/index.js +2 -2
- package/lib/components/Topper/index.js.map +1 -1
- package/package.json +6 -6
- package/src/components/ArticleBody/index.tsx +6 -3
- package/src/components/Body/index.tsx +23 -12
- package/src/components/ContentPackageBody/index.tsx +2 -2
- package/src/components/LiveBlogBody/index.tsx +2 -2
- package/src/components/PodcastBody/index.tsx +2 -2
- package/src/components/Recommended/index.tsx +13 -4
- package/src/components/RichText/index.tsx +8 -13
- package/src/components/Topper/Intro.tsx +8 -1
- package/src/components/Topper/index.tsx +3 -0
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -540,6 +540,46 @@
|
|
|
540
540
|
* @financial-times/cp-content-pipeline-schema bumped from ^2.6.0 to ^2.6.1
|
|
541
541
|
* @financial-times/cp-content-pipeline-styles bumped from ^2.2.3 to ^2.2.4
|
|
542
542
|
|
|
543
|
+
## [6.1.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v6.0.0...cp-content-pipeline-ui-v6.1.0) (2024-04-26)
|
|
544
|
+
|
|
545
|
+
|
|
546
|
+
### Features
|
|
547
|
+
|
|
548
|
+
* further reading in live blogs - productionisation ([e5ecfe1](https://github.com/Financial-Times/cp-content-pipeline/commit/e5ecfe1ff81389d660d8ed9caa4623f5e4122d03))
|
|
549
|
+
|
|
550
|
+
|
|
551
|
+
### Dependencies
|
|
552
|
+
|
|
553
|
+
* The following workspace dependencies were updated
|
|
554
|
+
* devDependencies
|
|
555
|
+
* @financial-times/cp-content-pipeline-client bumped from ^3.4.2 to ^3.5.0
|
|
556
|
+
* @financial-times/cp-content-pipeline-schema bumped from ^2.6.2 to ^2.7.0
|
|
557
|
+
* @financial-times/cp-content-pipeline-styles bumped from ^2.2.4 to ^2.3.0
|
|
558
|
+
|
|
559
|
+
## [6.0.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v5.6.4...cp-content-pipeline-ui-v6.0.0) (2024-04-24)
|
|
560
|
+
|
|
561
|
+
|
|
562
|
+
### ⚠ BREAKING CHANGES
|
|
563
|
+
|
|
564
|
+
* split components map into body and rich text components
|
|
565
|
+
|
|
566
|
+
### Features
|
|
567
|
+
|
|
568
|
+
* split components map into body and rich text components ([75ee6dd](https://github.com/Financial-Times/cp-content-pipeline/commit/75ee6ddef02d33f77aed746a7d64c3eb29a9be19))
|
|
569
|
+
|
|
570
|
+
|
|
571
|
+
### Bug Fixes
|
|
572
|
+
|
|
573
|
+
* handle summary link clicks in topper intros ([16dd3ec](https://github.com/Financial-Times/cp-content-pipeline/commit/16dd3ec740b70e32ebb11c68bf874aad5abcfa38))
|
|
574
|
+
|
|
575
|
+
|
|
576
|
+
### Dependencies
|
|
577
|
+
|
|
578
|
+
* The following workspace dependencies were updated
|
|
579
|
+
* devDependencies
|
|
580
|
+
* @financial-times/cp-content-pipeline-client bumped from ^3.4.1 to ^3.4.2
|
|
581
|
+
* @financial-times/cp-content-pipeline-schema bumped from ^2.6.1 to ^2.6.2
|
|
582
|
+
|
|
543
583
|
## [5.6.3](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v5.6.2...cp-content-pipeline-ui-v5.6.3) (2024-04-23)
|
|
544
584
|
|
|
545
585
|
|
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ const articleData = // obtain data by use of cp-content-pipeline-api directly or
|
|
|
48
48
|
const componentOverrides = {
|
|
49
49
|
Link: removeOutboundLinks,
|
|
50
50
|
};
|
|
51
|
-
<Body content={articleData}
|
|
51
|
+
<Body content={articleData} richTextComponents={componentOverrides}>
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
### Top-Level Components
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BodyProps } from '../Body';
|
|
3
|
-
export default function ArticleBody({ content,
|
|
3
|
+
export default function ArticleBody({ content, richTextComponents, }: BodyProps): React.JSX.Element | null;
|
|
@@ -28,13 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
const react_1 = __importDefault(require("react"));
|
|
30
30
|
const RichText_1 = __importStar(require("../RichText"));
|
|
31
|
-
function ArticleBody({ content,
|
|
31
|
+
function ArticleBody({ content, richTextComponents, }) {
|
|
32
32
|
if (!content?.body?.structured) {
|
|
33
33
|
return null;
|
|
34
34
|
}
|
|
35
|
-
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value:
|
|
35
|
+
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: richTextComponents },
|
|
36
36
|
react_1.default.createElement("article", { className: "n-content-body" },
|
|
37
|
-
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components:
|
|
37
|
+
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components: richTextComponents }))));
|
|
38
38
|
}
|
|
39
39
|
exports.default = ArticleBody;
|
|
40
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleBody/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,wDAAyD;AAGzD,SAAwB,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleBody/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,wDAAyD;AAGzD,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,kBAAkB,GACR;IACV,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB;QACnD,2CAAS,SAAS,EAAC,gBAAgB;YACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,kBAAkB,GAC9B,CACM,CACiB,CAC9B,CAAA;AACH,CAAC;AAlBD,8BAkBC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { JSXElementConstructor } from 'react';
|
|
2
2
|
import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
|
|
3
|
-
import type {
|
|
3
|
+
import type { RichTextComponentMapRecord } from '../RichText';
|
|
4
4
|
import type { Serialiser } from '@financial-times/x-interaction';
|
|
5
5
|
type PostTrackerConfig = {
|
|
6
6
|
usePostTracker: boolean;
|
|
@@ -8,14 +8,16 @@ type PostTrackerConfig = {
|
|
|
8
8
|
onRead: () => void;
|
|
9
9
|
onError: () => void;
|
|
10
10
|
};
|
|
11
|
+
type BodyComponentMapRecord = Partial<Record<'live-blog-body' | 'article-body' | 'podcast-body' | 'content-package-body', JSXElementConstructor<any>>>;
|
|
11
12
|
export type BodyProps = {
|
|
12
13
|
content: ArticleQuery['content'];
|
|
13
|
-
|
|
14
|
+
richTextComponents?: RichTextComponentMapRecord;
|
|
15
|
+
bodyComponents?: BodyComponentMapRecord;
|
|
14
16
|
showShareButtons?: boolean;
|
|
15
17
|
showBackToTop?: boolean;
|
|
16
18
|
xInteractionSerialiser?: Serialiser;
|
|
17
19
|
postTrackerConfig?: PostTrackerConfig;
|
|
18
20
|
AdSlot?: React.FC;
|
|
19
21
|
};
|
|
20
|
-
export default function Body({ content,
|
|
22
|
+
export default function Body({ content, richTextComponents, bodyComponents, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, AdSlot, }: BodyProps): React.JSX.Element | null;
|
|
21
23
|
export {};
|
|
@@ -8,24 +8,24 @@ const ArticleBody_1 = __importDefault(require("../ArticleBody"));
|
|
|
8
8
|
const LiveBlogBody_1 = __importDefault(require("../LiveBlogBody"));
|
|
9
9
|
const PodcastBody_1 = __importDefault(require("../PodcastBody"));
|
|
10
10
|
const ContentPackageBody_1 = __importDefault(require("../ContentPackageBody"));
|
|
11
|
-
function Body({ content,
|
|
11
|
+
function Body({ content, richTextComponents, bodyComponents, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, AdSlot, }) {
|
|
12
12
|
if (!content?.body?.structured) {
|
|
13
13
|
return null;
|
|
14
14
|
}
|
|
15
|
-
const LiveBlog =
|
|
16
|
-
const Article =
|
|
17
|
-
const Podcast =
|
|
18
|
-
const ContentPackage =
|
|
15
|
+
const LiveBlog = bodyComponents?.['live-blog-body'] ?? LiveBlogBody_1.default;
|
|
16
|
+
const Article = bodyComponents?.['article-body'] ?? ArticleBody_1.default;
|
|
17
|
+
const Podcast = bodyComponents?.['podcast-body'] ?? PodcastBody_1.default;
|
|
18
|
+
const ContentPackage = bodyComponents?.['content-package-body'] ?? ContentPackageBody_1.default;
|
|
19
19
|
if (content.__typename === 'LiveBlogPackage') {
|
|
20
|
-
return (react_1.default.createElement(LiveBlog, { content: content,
|
|
20
|
+
return (react_1.default.createElement(LiveBlog, { content: content, richTextComponents: richTextComponents, showShareButtons: showShareButtons, showBackToTop: showBackToTop, xInteractionSerialiser: xInteractionSerialiser, postTrackerConfig: postTrackerConfig }));
|
|
21
21
|
}
|
|
22
22
|
else if (content.__typename === 'Audio') {
|
|
23
|
-
return react_1.default.createElement(Podcast, { content: content,
|
|
23
|
+
return react_1.default.createElement(Podcast, { content: content, richTextComponents: richTextComponents });
|
|
24
24
|
}
|
|
25
25
|
else if (content.__typename === 'ContentPackage') {
|
|
26
|
-
return (react_1.default.createElement(ContentPackage, { content: content,
|
|
26
|
+
return (react_1.default.createElement(ContentPackage, { content: content, richTextComponents: richTextComponents, AdSlot: AdSlot }));
|
|
27
27
|
}
|
|
28
|
-
return react_1.default.createElement(Article, { content: content,
|
|
28
|
+
return react_1.default.createElement(Article, { content: content, richTextComponents: richTextComponents });
|
|
29
29
|
}
|
|
30
30
|
exports.default = Body;
|
|
31
31
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAoD;AACpD,iEAAwC;AACxC,mEAA0C;AAC1C,iEAAwC;AACxC,+EAAsD;AAgCtD,SAAwB,IAAI,CAAC,EAC3B,OAAO,EACP,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,MAAM,GACI;IACV,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,QAAQ,GAAG,cAAc,EAAE,CAAC,gBAAgB,CAAC,IAAI,sBAAY,CAAA;IACnE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC/D,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC/D,MAAM,cAAc,GAClB,cAAc,EAAE,CAAC,sBAAsB,CAAC,IAAI,4BAAkB,CAAA;IAEhE,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB,EAAE;QAC5C,OAAO,CACL,8BAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAA;KACF;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE;QACzC,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CAAA;KAC7E;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,gBAAgB,EAAE;QAClD,OAAO,CACL,8BAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,MAAM,EAAE,MAAM,GACd,CACH,CAAA;KACF;IAED,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CAAA;AAC9E,CAAC;AA5CD,uBA4CC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BodyProps } from '../Body';
|
|
3
|
-
export default function ContentPackageBody({ content,
|
|
3
|
+
export default function ContentPackageBody({ content, richTextComponents, AdSlot, }: BodyProps): React.JSX.Element | null;
|
|
@@ -10,7 +10,7 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
10
10
|
function validTeasers(teasers) {
|
|
11
11
|
return teasers.filter((teaser) => !!teaser);
|
|
12
12
|
}
|
|
13
|
-
function ContentPackageBody({ content,
|
|
13
|
+
function ContentPackageBody({ content, richTextComponents, AdSlot, }) {
|
|
14
14
|
if (content.__typename !== 'ContentPackage') {
|
|
15
15
|
return null;
|
|
16
16
|
}
|
|
@@ -24,7 +24,7 @@ function ContentPackageBody({ content, components, AdSlot, }) {
|
|
|
24
24
|
? 'More from this Special Report'
|
|
25
25
|
: 'More from this Series';
|
|
26
26
|
const secondaryTeaserMods = design?.theme === 'extra' ? ['inverse'] : [];
|
|
27
|
-
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value:
|
|
27
|
+
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: richTextComponents },
|
|
28
28
|
react_1.default.createElement("article", { id: "site-content", role: "main", "data-attribute": "article-content-body", "data-content-id": content.id, "data-syndicatable": content.canBeSyndicated, className: design && design.theme
|
|
29
29
|
? `design-theme--${design.theme} article`
|
|
30
30
|
: 'article n-content-body js-article__content-body n-content-body' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ContentPackageBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,0CAA+C;AAE/C,0EAGkD;AAElD,4DAAmC;AAInC,SAAS,YAAY,CAAC,OAAkC;IACtD,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAA4B,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,CAAC;AAqBD,SAAwB,kBAAkB,CAAC,EACzC,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ContentPackageBody/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,5 +3,5 @@ import type { BodyProps } from '../Body';
|
|
|
3
3
|
type LiveBlogBodyProps = BodyProps & {
|
|
4
4
|
xInteractionSerialiser?: any;
|
|
5
5
|
};
|
|
6
|
-
export default function LiveBlogBody({ content,
|
|
6
|
+
export default function LiveBlogBody({ content, richTextComponents, xInteractionSerialiser, showShareButtons, showBackToTop, postTrackerConfig, }: LiveBlogBodyProps): React.JSX.Element | null;
|
|
7
7
|
export {};
|
|
@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const RichText_1 = require("../RichText");
|
|
8
8
|
const LiveBlogWrapper_1 = require("../LiveBlogWrapper");
|
|
9
|
-
function LiveBlogBody({ content,
|
|
9
|
+
function LiveBlogBody({ content, richTextComponents, xInteractionSerialiser, showShareButtons, showBackToTop = true, postTrackerConfig, }) {
|
|
10
10
|
if (content.__typename !== 'LiveBlogPackage')
|
|
11
11
|
return null;
|
|
12
12
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
13
13
|
const posts = content.liveBlogPosts || [];
|
|
14
|
-
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value:
|
|
14
|
+
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: richTextComponents },
|
|
15
15
|
react_1.default.createElement(LiveBlogWrapper_1.LiveBlogWrapper, { articleUrl: `https://www.ft.com/content/${content.id}`, id: "live-blog-wrapper", posts: posts, serialiser: xInteractionSerialiser, showShareButtons: showShareButtons ?? true, backToTop: showBackToTop ? 'o-topper' : undefined, postTrackerConfig: postTrackerConfig })));
|
|
16
16
|
}
|
|
17
17
|
exports.default = LiveBlogBody;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,0CAA+C;AAC/C,wDAAoD;AASpD,SAAwB,YAAY,CAAC,EACnC,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,0CAA+C;AAC/C,wDAAoD;AASpD,SAAwB,YAAY,CAAC,EACnC,OAAO,EACP,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,aAAa,GAAG,IAAI,EACpB,iBAAiB,GACC;IAClB,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IAEzD,8DAA8D;IAC9D,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAA;IAEzC,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB;QACnD,8BAAC,iCAAe,IACd,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,sBAAsB,EAClC,gBAAgB,EAAE,gBAAgB,IAAI,IAAI,EAC1C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACjD,iBAAiB,EAAE,iBAAiB,GACpC,CACyB,CAC9B,CAAA;AACH,CAAC;AA1BD,+BA0BC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BodyProps } from '../Body';
|
|
3
|
-
export default function PodcastBody({ content,
|
|
3
|
+
export default function PodcastBody({ content, richTextComponents, showPlayer, showAccessbilityGuide, }: BodyProps & {
|
|
4
4
|
showPlayer?: boolean;
|
|
5
5
|
showAccessbilityGuide?: boolean;
|
|
6
6
|
}): React.JSX.Element | null;
|
|
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const RichText_1 = __importDefault(require("../RichText"));
|
|
8
|
-
function PodcastBody({ content,
|
|
8
|
+
function PodcastBody({ content, richTextComponents, showPlayer = true, showAccessbilityGuide = true, }) {
|
|
9
9
|
if (content.__typename !== 'Audio') {
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
@@ -23,7 +23,7 @@ function PodcastBody({ content, components, showPlayer = true, showAccessbilityG
|
|
|
23
23
|
react_1.default.createElement("a", { href: podcast.url }, "download the MP3 file"),
|
|
24
24
|
" to play locally.")))),
|
|
25
25
|
content.body?.structured && (react_1.default.createElement("article", { className: "n-content-body" },
|
|
26
|
-
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components:
|
|
26
|
+
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components: richTextComponents }),
|
|
27
27
|
showAccessbilityGuide && (react_1.default.createElement("p", null,
|
|
28
28
|
react_1.default.createElement("a", { href: "/accessibility#podcast-transcriptions" }, "View our accessibility guide"),
|
|
29
29
|
"."))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PodcastBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAGlC,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PodcastBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAGlC,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,kBAAkB,EAClB,UAAU,GAAG,IAAI,EACjB,qBAAqB,GAAG,IAAI,GAC0C;IACtE,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE;QAClC,OAAO,IAAI,CAAA;KACZ;IACD,MAAM,gBAAgB,GAAG,YAAY,CAAA;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,IAAI,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,gBAAgB,CACjD,CAAA;IAED,OAAO,CACL;QACE,yEAAyE;QACzE,SAAS,EAAC,+DAA+D,oBAC1D,cAAc,oBACd,sBAAsB;QAEpC,UAAU,IAAI,OAAO,EAAE,GAAG,IAAI,CAC7B,uCAAK,SAAS,EAAC,gBAAgB;YAC7B,yCACE,QAAQ,4BACS,SAAS,wBACP,SAAS,qBACX,OAAO,CAAC,EAAE;gBAG3B,0CAAQ,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,gBAAgB,GAAI;gBACpD;;oBACoE,GAAG;oBACrE,qCAAG,IAAI,EAAE,OAAO,CAAC,GAAG,4BAA2B;wCAC7C,CACE,CACJ,CACP;QAEA,OAAO,CAAC,IAAI,EAAE,UAAU,IAAI,CAC3B,2CAAS,SAAS,EAAC,gBAAgB;YACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,kBAAkB,GAC9B;YACD,qBAAqB,IAAI,CACxB;gBACE,qCAAG,IAAI,EAAC,uCAAuC,mCAE3C;oBAEF,CACL,CACO,CACX,CACG,CACP,CAAA;AACH,CAAC;AAzDD,8BAyDC"}
|
|
@@ -6,4 +6,4 @@ import type { RecommendedFragment } from '@financial-times/cp-content-pipeline-c
|
|
|
6
6
|
* `<Teaser>` is imported from x-dash
|
|
7
7
|
* https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
|
|
8
8
|
*/
|
|
9
|
-
export default function Recommended({ heading, teaser, }: ContentTree.Recommended & RecommendedFragment): React.JSX.Element | null;
|
|
9
|
+
export default function Recommended({ heading, teaser, isInLiveBlog, }: ContentTree.Recommended & RecommendedFragment): React.JSX.Element | null;
|
|
@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
//HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
|
|
8
8
|
const Teaser_cjs_1 = require("@financial-times/x-teaser/dist/Teaser.cjs");
|
|
9
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
10
|
/**
|
|
10
11
|
* Renders a Recommended teaser component
|
|
11
12
|
* `<Teaser>` is imported from x-dash
|
|
12
13
|
* https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
|
|
13
14
|
*/
|
|
14
|
-
function Recommended({ heading, teaser, }) {
|
|
15
|
+
function Recommended({ heading, teaser, isInLiveBlog, }) {
|
|
15
16
|
if (!teaser) {
|
|
16
17
|
return null;
|
|
17
18
|
}
|
|
18
|
-
return (react_1.default.createElement("aside", { "aria-labelledby": "aside-label", className:
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
return (react_1.default.createElement("aside", { "aria-labelledby": "aside-label", className: (0, classnames_1.default)('n-content-recommended--single-story', {
|
|
20
|
+
'n-content-recommended--inset': !isInLiveBlog,
|
|
21
|
+
}) },
|
|
22
|
+
!isInLiveBlog && (react_1.default.createElement("p", { className: "n-content-recommended__title" }, heading)),
|
|
23
|
+
react_1.default.createElement(Teaser_cjs_1.Teaser, { modifiers: isInLiveBlog ? ['post'] : ['stacked'], ...Teaser_cjs_1.presets.SmallHeavy, ...teaser })));
|
|
21
24
|
}
|
|
22
25
|
exports.default = Recommended;
|
|
23
26
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Recommended/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,0EAA2E;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Recommended/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,0EAA2E;AAG3E,4DAAmC;AACnC;;;;GAIG;AACH,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,YAAY,GACkC;IAC9C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,4DACkB,aAAa,EAC7B,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAqC,EAAE;YAC3D,8BAA8B,EAAE,CAAC,YAAY;SAC9C,CAAC;QAED,CAAC,YAAY,IAAI,CAChB,qCAAG,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAK,CAC1D;QACD,8BAAC,mBAAM,IACL,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAC5C,oBAAO,CAAC,UAAU,KAClB,MAAM,GACV,CACI,CACT,CAAA;AACH,CAAC;AA1BD,8BA0BC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { JSXElementConstructor } from 'react';
|
|
2
2
|
import type { StructuredContentFragment } from '@financial-times/cp-content-pipeline-client';
|
|
3
3
|
import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema';
|
|
4
|
-
export type
|
|
5
|
-
export declare const ComponentsContext: React.Context<Partial<Record<"blockquote" | "body" | "cite" | "link" | "strong" | "table" | "video" | "clip" | "text" | "layout" | "heading" | "flourish" | "
|
|
4
|
+
export type RichTextComponentMapRecord = Partial<Record<ContentTreeWorkarounds.AnyNode['type'] | 'fallback', JSXElementConstructor<any>>>;
|
|
5
|
+
export declare const ComponentsContext: React.Context<Partial<Record<"blockquote" | "body" | "cite" | "link" | "strong" | "table" | "video" | "clip" | "text" | "layout" | "heading" | "flourish" | "image-set" | "paragraph" | "pullquote" | "tweet" | "big-number" | "table-caption" | "table-body" | "table-footer" | "root" | "break" | "thematic-break" | "emphasis" | "strikethrough" | "list" | "list-item" | "clip-set" | "recommended" | "scrolly-block" | "scrolly-section" | "scrolly-copy" | "scrolly-heading" | "scrolly-image" | "layout-slot" | "layout-image" | "table-row" | "table-cell" | "youtube-video" | "main-image" | "raw-image" | "main-image-raw" | "author-link" | "fallback", React.JSXElementConstructor<any>>> | undefined>;
|
|
6
6
|
type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
7
7
|
export type RichTextProps = {
|
|
8
8
|
structuredContent: WithOptionalProperty<StructuredContentFragment, 'references'>;
|
|
9
|
-
components?:
|
|
9
|
+
components?: RichTextComponentMapRecord;
|
|
10
10
|
};
|
|
11
11
|
export default function RichText({ structuredContent, components, }: RichTextProps): React.JSX.Element | null;
|
|
12
12
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAKc;AACd,iEAAwC;AACxC,wDAAqD;AACrD,sCAA8C;AAC9C,6DAAoC;AACpC,qDAA4B;AAC5B,2DAAkC;AAClC,yDAAgC;AAChC,6DAAoC;AACpC,qDAA4B;AAC5B,qDAA4B;AAC5B,mDAA0B;AAC1B,6DAAoC;AAEpC,uDAc0B;AAI1B,mEAA0C;AAC1C,kDAA8C;AAC9C,sDAK0B;AAC1B,iEAA6D;AAC7D,mEAA0C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { IntroFragment } from '@financial-times/cp-content-pipeline-client';
|
|
3
|
-
export default function Intro({ structured, source }: IntroFragment
|
|
3
|
+
export default function Intro({ structured, source, handleSummaryLinkClick, }: IntroFragment & {
|
|
4
|
+
handleSummaryLinkClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
5
|
+
}): React.JSX.Element;
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const RichText_1 = __importDefault(require("../RichText"));
|
|
8
8
|
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
-
function Intro({ structured, source }) {
|
|
10
|
-
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`o-topper__${source}`, {
|
|
9
|
+
function Intro({ structured, source, handleSummaryLinkClick, }) {
|
|
10
|
+
return (react_1.default.createElement("div", { onClick: handleSummaryLinkClick, className: (0, classnames_1.default)(`o-topper__${source}`, {
|
|
11
11
|
'o-topper__summary--body': source === 'summary',
|
|
12
12
|
}) },
|
|
13
13
|
react_1.default.createElement(RichText_1.default, { structuredContent: structured })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Intro.js","sourceRoot":"","sources":["../../../src/components/Topper/Intro.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAElC,4DAAmC;AAEnC,SAAwB,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Intro.js","sourceRoot":"","sources":["../../../src/components/Topper/Intro.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAElC,4DAAmC;AAEnC,SAAwB,KAAK,CAAC,EAC5B,UAAU,EACV,MAAM,EACN,sBAAsB,GAGvB;IACC,OAAO,CACL,uCACE,OAAO,EAAE,sBAAsB,EAC/B,SAAS,EAAE,IAAA,oBAAU,EAAC,aAAa,MAAM,EAAE,EAAE;YAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;SAChD,CAAC;QAEF,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,UAAU,GAAI,CACvC,CACP,CAAA;AACH,CAAC;AAjBD,wBAiBC"}
|
|
@@ -6,6 +6,7 @@ type TopperProps = {
|
|
|
6
6
|
slot?: string;
|
|
7
7
|
followButtonSlot?: FollowButtonSlot;
|
|
8
8
|
readNextSlot?: () => ReactElement;
|
|
9
|
+
handleSummaryLinkClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
9
10
|
};
|
|
10
|
-
export default function Topper({ content, slot, followButtonSlot, readNextSlot, }: TopperProps): React.JSX.Element | null;
|
|
11
|
+
export default function Topper({ content, slot, followButtonSlot, readNextSlot, handleSummaryLinkClick, }: TopperProps): React.JSX.Element | null;
|
|
11
12
|
export {};
|
|
@@ -13,7 +13,7 @@ const Headshot_1 = __importDefault(require("./Headshot"));
|
|
|
13
13
|
const Columnist_1 = __importDefault(require("./Columnist"));
|
|
14
14
|
const LiveBlogIndicator_1 = __importDefault(require("./LiveBlogIndicator"));
|
|
15
15
|
const classnames_1 = __importDefault(require("classnames"));
|
|
16
|
-
function Topper({ content, slot, followButtonSlot, readNextSlot, }) {
|
|
16
|
+
function Topper({ content, slot, followButtonSlot, readNextSlot, handleSummaryLinkClick, }) {
|
|
17
17
|
const { topper } = content;
|
|
18
18
|
if (!topper) {
|
|
19
19
|
return null;
|
|
@@ -60,7 +60,7 @@ function Topper({ content, slot, followButtonSlot, readNextSlot, }) {
|
|
|
60
60
|
react_1.default.createElement(LiveBlogIndicator_1.default, { realtime: content.realtime ?? undefined, lastUpdatedDateTime: getMostRecentPostPublishedDate() }))) : (react_1.default.createElement(Tags_1.default, { __typename: topper.__typename, isPackage: isPackage, displayConcept: topper.displayConcept ?? undefined, brandConcept: ('brandConcept' in topper && topper.brandConcept) || undefined, genreConcept: ('genreConcept' in topper && topper.genreConcept) || undefined, headshot: hasHeadshot || undefined, followButtonVariant: topper.followButtonVariant, FollowButtonSlot: followButtonSlot })),
|
|
61
61
|
react_1.default.createElement(Headline_1.default, { headline: topper.headline, isLargeHeadline: ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
|
|
62
62
|
undefined }),
|
|
63
|
-
topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source })),
|
|
63
|
+
topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source, handleSummaryLinkClick: handleSummaryLinkClick })),
|
|
64
64
|
hasHeadshot && content.__typename !== 'Audio' && (react_1.default.createElement(Headshot_1.default, { url: topper.headshot, altText: headshotAltText })),
|
|
65
65
|
isOpinion && topper.columnist && (react_1.default.createElement(Columnist_1.default, { authorConcept: topper.columnist, followButtonVariant: topper.followButtonVariant, followButtonSlot: followButtonSlot }))),
|
|
66
66
|
readNextSlot && (react_1.default.createElement("div", { className: "o-topper__read-next" }, readNextSlot())),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA2C;AAC3C,wDAA+B;AAC/B,kDAAyB;AACzB,0DAAiC;AACjC,oDAA2B;AAC3B,wDAA+B;AAC/B,0DAAiC;AACjC,4DAAmC;AACnC,4EAAmD;AAEnD,4DAAmC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/cp-content-pipeline-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"@babel/preset-react": "^7.22.5",
|
|
18
18
|
"@dotcom-tool-kit/npm": "^3.1.4",
|
|
19
19
|
"@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
|
|
20
|
-
"@financial-times/cp-content-pipeline-client": "^3.
|
|
21
|
-
"@financial-times/cp-content-pipeline-schema": "^2.
|
|
22
|
-
"@financial-times/cp-content-pipeline-styles": "^2.
|
|
20
|
+
"@financial-times/cp-content-pipeline-client": "^3.5.0",
|
|
21
|
+
"@financial-times/cp-content-pipeline-schema": "^2.7.0",
|
|
22
|
+
"@financial-times/cp-content-pipeline-styles": "^2.3.0",
|
|
23
23
|
"@financial-times/n-scrollytelling-image": "^1.1.0",
|
|
24
24
|
"@financial-times/o-colors": "^6.6.2",
|
|
25
25
|
"@financial-times/o-grid": "^6.1.5",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@financial-times/o-spacing": "^3.2.3",
|
|
29
29
|
"@financial-times/o-tracking": "^4.5.0",
|
|
30
30
|
"@financial-times/o-typography": "^7.4.1",
|
|
31
|
-
"@financial-times/x-engine": "^14.5
|
|
31
|
+
"@financial-times/x-engine": "^14.6.5",
|
|
32
32
|
"@storybook/addon-essentials": "^7.0.24",
|
|
33
33
|
"@storybook/addon-interactions": "^7.0.24",
|
|
34
34
|
"@storybook/addon-links": "^7.0.24",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@financial-times/ft-date-format": "^2.1.0",
|
|
57
57
|
"@financial-times/o-labels": "^6.5.0",
|
|
58
58
|
"@financial-times/o-teaser": "^6.2.2",
|
|
59
|
-
"@financial-times/x-teaser": "^14.
|
|
59
|
+
"@financial-times/x-teaser": "^14.6.5",
|
|
60
60
|
"@financial-times/o-expander": "^6.2.6",
|
|
61
61
|
"classnames": "^2.3.1"
|
|
62
62
|
},
|
|
@@ -2,17 +2,20 @@ import React from 'react'
|
|
|
2
2
|
import RichText, { ComponentsContext } from '../RichText'
|
|
3
3
|
import type { BodyProps } from '../Body'
|
|
4
4
|
|
|
5
|
-
export default function ArticleBody({
|
|
5
|
+
export default function ArticleBody({
|
|
6
|
+
content,
|
|
7
|
+
richTextComponents,
|
|
8
|
+
}: BodyProps) {
|
|
6
9
|
if (!content?.body?.structured) {
|
|
7
10
|
return null
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
return (
|
|
11
|
-
<ComponentsContext.Provider value={
|
|
14
|
+
<ComponentsContext.Provider value={richTextComponents}>
|
|
12
15
|
<article className="n-content-body">
|
|
13
16
|
<RichText
|
|
14
17
|
structuredContent={content.body.structured}
|
|
15
|
-
components={
|
|
18
|
+
components={richTextComponents}
|
|
16
19
|
/>
|
|
17
20
|
</article>
|
|
18
21
|
</ComponentsContext.Provider>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { JSXElementConstructor } from 'react'
|
|
2
2
|
import ArticleBody from '../ArticleBody'
|
|
3
3
|
import LiveBlogBody from '../LiveBlogBody'
|
|
4
4
|
import PodcastBody from '../PodcastBody'
|
|
5
5
|
import ContentPackageBody from '../ContentPackageBody'
|
|
6
6
|
import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
|
|
7
|
-
import type {
|
|
7
|
+
import type { RichTextComponentMapRecord } from '../RichText'
|
|
8
8
|
import type { Serialiser } from '@financial-times/x-interaction'
|
|
9
9
|
|
|
10
10
|
type PostTrackerConfig = {
|
|
@@ -14,9 +14,19 @@ type PostTrackerConfig = {
|
|
|
14
14
|
onError: () => void
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
type BodyComponentMapRecord = Partial<
|
|
18
|
+
Record<
|
|
19
|
+
'live-blog-body' | 'article-body' | 'podcast-body' | 'content-package-body',
|
|
20
|
+
// using any here, no easy way to make a type that works for all the potential renderers
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22
|
+
JSXElementConstructor<any>
|
|
23
|
+
>
|
|
24
|
+
>
|
|
25
|
+
|
|
17
26
|
export type BodyProps = {
|
|
18
27
|
content: ArticleQuery['content']
|
|
19
|
-
|
|
28
|
+
richTextComponents?: RichTextComponentMapRecord
|
|
29
|
+
bodyComponents?: BodyComponentMapRecord
|
|
20
30
|
showShareButtons?: boolean
|
|
21
31
|
showBackToTop?: boolean
|
|
22
32
|
xInteractionSerialiser?: Serialiser
|
|
@@ -26,7 +36,8 @@ export type BodyProps = {
|
|
|
26
36
|
|
|
27
37
|
export default function Body({
|
|
28
38
|
content,
|
|
29
|
-
|
|
39
|
+
richTextComponents,
|
|
40
|
+
bodyComponents,
|
|
30
41
|
showBackToTop,
|
|
31
42
|
showShareButtons,
|
|
32
43
|
xInteractionSerialiser,
|
|
@@ -37,17 +48,17 @@ export default function Body({
|
|
|
37
48
|
return null
|
|
38
49
|
}
|
|
39
50
|
|
|
40
|
-
const LiveBlog =
|
|
41
|
-
const Article =
|
|
42
|
-
const Podcast =
|
|
51
|
+
const LiveBlog = bodyComponents?.['live-blog-body'] ?? LiveBlogBody
|
|
52
|
+
const Article = bodyComponents?.['article-body'] ?? ArticleBody
|
|
53
|
+
const Podcast = bodyComponents?.['podcast-body'] ?? PodcastBody
|
|
43
54
|
const ContentPackage =
|
|
44
|
-
|
|
55
|
+
bodyComponents?.['content-package-body'] ?? ContentPackageBody
|
|
45
56
|
|
|
46
57
|
if (content.__typename === 'LiveBlogPackage') {
|
|
47
58
|
return (
|
|
48
59
|
<LiveBlog
|
|
49
60
|
content={content}
|
|
50
|
-
|
|
61
|
+
richTextComponents={richTextComponents}
|
|
51
62
|
showShareButtons={showShareButtons}
|
|
52
63
|
showBackToTop={showBackToTop}
|
|
53
64
|
xInteractionSerialiser={xInteractionSerialiser}
|
|
@@ -55,16 +66,16 @@ export default function Body({
|
|
|
55
66
|
/>
|
|
56
67
|
)
|
|
57
68
|
} else if (content.__typename === 'Audio') {
|
|
58
|
-
return <Podcast content={content}
|
|
69
|
+
return <Podcast content={content} richTextComponents={richTextComponents} />
|
|
59
70
|
} else if (content.__typename === 'ContentPackage') {
|
|
60
71
|
return (
|
|
61
72
|
<ContentPackage
|
|
62
73
|
content={content}
|
|
63
|
-
|
|
74
|
+
richTextComponents={richTextComponents}
|
|
64
75
|
AdSlot={AdSlot}
|
|
65
76
|
/>
|
|
66
77
|
)
|
|
67
78
|
}
|
|
68
79
|
|
|
69
|
-
return <Article content={content}
|
|
80
|
+
return <Article content={content} richTextComponents={richTextComponents} />
|
|
70
81
|
}
|
|
@@ -35,7 +35,7 @@ type SecondaryTeasersProps = {
|
|
|
35
35
|
|
|
36
36
|
export default function ContentPackageBody({
|
|
37
37
|
content,
|
|
38
|
-
|
|
38
|
+
richTextComponents,
|
|
39
39
|
AdSlot,
|
|
40
40
|
}: BodyProps) {
|
|
41
41
|
if (content.__typename !== 'ContentPackage') {
|
|
@@ -58,7 +58,7 @@ export default function ContentPackageBody({
|
|
|
58
58
|
const secondaryTeaserMods = design?.theme === 'extra' ? ['inverse'] : []
|
|
59
59
|
|
|
60
60
|
return (
|
|
61
|
-
<ComponentsContext.Provider value={
|
|
61
|
+
<ComponentsContext.Provider value={richTextComponents}>
|
|
62
62
|
<article
|
|
63
63
|
id="site-content"
|
|
64
64
|
role="main"
|