@financial-times/cp-content-pipeline-ui 5.4.0 → 5.5.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/lib/components/LiveBlogBody/index.d.ts +1 -2
- package/lib/components/LiveBlogBody/index.js +3 -8
- package/lib/components/LiveBlogBody/index.js.map +1 -1
- package/lib/components/LiveBlogPost/index.d.ts +2 -1
- package/lib/components/LiveBlogPost/index.js +28 -5
- package/lib/components/LiveBlogPost/index.js.map +1 -1
- package/lib/components/LiveBlogWrapper/index.js +8 -1
- package/lib/components/LiveBlogWrapper/index.js.map +1 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -3
- package/lib/index.js.map +1 -1
- package/lib/stories/LiveBlogPost.stories.d.ts +1 -1
- package/lib/stories/LiveBlogPost.stories.js +1 -0
- package/lib/stories/LiveBlogPost.stories.js.map +1 -1
- package/package.json +5 -5
- package/src/components/LiveBlogBody/index.tsx +2 -12
- package/src/components/LiveBlogPost/index.tsx +48 -8
- package/src/components/LiveBlogWrapper/index.tsx +21 -3
- package/src/index.ts +0 -1
- package/src/stories/LiveBlogPost.stories.tsx +1 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/lib/components/PinnedPost/index.d.ts +0 -5
- package/lib/components/PinnedPost/index.js +0 -36
- package/lib/components/PinnedPost/index.js.map +0 -1
- package/src/components/PinnedPost/index.tsx +0 -47
package/CHANGELOG.md
CHANGED
|
@@ -478,6 +478,46 @@
|
|
|
478
478
|
* @financial-times/cp-content-pipeline-client bumped from ^3.1.1 to ^3.1.2
|
|
479
479
|
* @financial-times/cp-content-pipeline-schema bumped from ^2.2.0 to ^2.2.1
|
|
480
480
|
|
|
481
|
+
## [5.5.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v5.4.1...cp-content-pipeline-ui-v5.5.0) (2024-03-20)
|
|
482
|
+
|
|
483
|
+
|
|
484
|
+
### Features
|
|
485
|
+
|
|
486
|
+
* remove variant and enable truncated for all live blog posts ([ce35dce](https://github.com/Financial-Times/cp-content-pipeline/commit/ce35dce727b6a07c036c10915a9d33ef46f3f964))
|
|
487
|
+
* render pinned post through liveblogpost component ([13b4737](https://github.com/Financial-Times/cp-content-pipeline/commit/13b47374ac2f1901693a22a49bdcdaf4133611d7))
|
|
488
|
+
|
|
489
|
+
|
|
490
|
+
### Bug Fixes
|
|
491
|
+
|
|
492
|
+
* address nitpicks ([d57d3c3](https://github.com/Financial-Times/cp-content-pipeline/commit/d57d3c3ef8ce01a8026d5c89e0c63f2b1f6e23c4))
|
|
493
|
+
* more minor styling fixes ([ad5303a](https://github.com/Financial-Times/cp-content-pipeline/commit/ad5303aef67b6213b0fa84f444cbf8602a692992))
|
|
494
|
+
* rollback the reintroduction of truncated posts ([da458cc](https://github.com/Financial-Times/cp-content-pipeline/commit/da458ccb4a66d7ac705ae1061b10933f77425a3b))
|
|
495
|
+
* tracking for pinned posts ([fdd540a](https://github.com/Financial-Times/cp-content-pipeline/commit/fdd540a8b27ba29106fed920502c3b9a010e9a89))
|
|
496
|
+
|
|
497
|
+
|
|
498
|
+
### Dependencies
|
|
499
|
+
|
|
500
|
+
* The following workspace dependencies were updated
|
|
501
|
+
* devDependencies
|
|
502
|
+
* @financial-times/cp-content-pipeline-client bumped from ^3.1.5 to ^3.2.0
|
|
503
|
+
* @financial-times/cp-content-pipeline-schema bumped from ^2.3.1 to ^2.4.0
|
|
504
|
+
* @financial-times/cp-content-pipeline-styles bumped from ^2.1.1 to ^2.2.0
|
|
505
|
+
|
|
506
|
+
## [5.4.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v5.4.0...cp-content-pipeline-ui-v5.4.1) (2024-03-18)
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
### Bug Fixes
|
|
510
|
+
|
|
511
|
+
* move `o-expander` to dependencies ([3559289](https://github.com/Financial-Times/cp-content-pipeline/commit/3559289d85d89ceeb3cf030a03cdafd9b249e4b9))
|
|
512
|
+
|
|
513
|
+
|
|
514
|
+
### Dependencies
|
|
515
|
+
|
|
516
|
+
* The following workspace dependencies were updated
|
|
517
|
+
* devDependencies
|
|
518
|
+
* @financial-times/cp-content-pipeline-client bumped from ^3.1.4 to ^3.1.5
|
|
519
|
+
* @financial-times/cp-content-pipeline-schema bumped from ^2.3.0 to ^2.3.1
|
|
520
|
+
|
|
481
521
|
## [5.4.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v5.3.0...cp-content-pipeline-ui-v5.4.0) (2024-03-18)
|
|
482
522
|
|
|
483
523
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BodyProps } from '../Body';
|
|
3
3
|
export type LiveBlogBodyProps = BodyProps & {
|
|
4
|
-
isPinnedPost?: boolean;
|
|
5
4
|
xInteractionSerialiser?: any;
|
|
6
5
|
};
|
|
7
|
-
export default function LiveBlogBody({ content, components,
|
|
6
|
+
export default function LiveBlogBody({ content, components, xInteractionSerialiser, showShareButtons, showBackToTop, postTrackerConfig, }: LiveBlogBodyProps): React.JSX.Element | null;
|
|
@@ -6,18 +6,13 @@ 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, components,
|
|
9
|
+
function LiveBlogBody({ content, components, xInteractionSerialiser, showShareButtons, showBackToTop = true, postTrackerConfig, }) {
|
|
10
10
|
if (content.__typename !== 'LiveBlogPackage')
|
|
11
11
|
return null;
|
|
12
|
-
let id = 'live-blog-wrapper';
|
|
13
12
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
|
-
|
|
15
|
-
if (isPinnedPost) {
|
|
16
|
-
id = 'pinned-post-live-blog-wrapper';
|
|
17
|
-
posts = [content.pinnedPost];
|
|
18
|
-
}
|
|
13
|
+
const posts = content.liveBlogPosts || [];
|
|
19
14
|
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: components },
|
|
20
|
-
react_1.default.createElement(LiveBlogWrapper_1.LiveBlogWrapper, { articleUrl: `https://www.ft.com/content/${content.id}`, id:
|
|
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 })));
|
|
21
16
|
}
|
|
22
17
|
exports.default = LiveBlogBody;
|
|
23
18
|
//# sourceMappingURL=index.js.map
|
|
@@ -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;
|
|
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,UAAU,EACV,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,UAAU;QAC3C,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"}
|
|
@@ -13,6 +13,7 @@ export type LiveBlogPostProps = {
|
|
|
13
13
|
publishedTimestamp: string;
|
|
14
14
|
publishedDate: string;
|
|
15
15
|
isBreakingNews: boolean;
|
|
16
|
+
isPinned: boolean;
|
|
16
17
|
standout?: {
|
|
17
18
|
breakingNews?: boolean;
|
|
18
19
|
editorsChoice?: boolean;
|
|
@@ -26,5 +27,5 @@ export type LiveBlogPostProps = {
|
|
|
26
27
|
backToTop: string | undefined | ((arg: any) => any);
|
|
27
28
|
indicators?: indicators;
|
|
28
29
|
};
|
|
29
|
-
declare const LiveBlogPost: ({ id, postId, title, content, bodyHTML, body, publishedTimestamp, publishedDate, isBreakingNews, standout, articleUrl, showShareButtons, byline, ad, backToTop, indicators, }: LiveBlogPostProps) => React.JSX.Element;
|
|
30
|
+
declare const LiveBlogPost: ({ id, postId, title, content, bodyHTML, body, publishedTimestamp, publishedDate, isBreakingNews, standout, articleUrl, showShareButtons, byline, ad, backToTop, isPinned, indicators, }: LiveBlogPostProps) => React.JSX.Element;
|
|
30
31
|
export { LiveBlogPost };
|
|
@@ -9,13 +9,29 @@ const ShareButtons_1 = __importDefault(require("./ShareButtons"));
|
|
|
9
9
|
const Timestamp_1 = __importDefault(require("./Timestamp"));
|
|
10
10
|
const RichText_1 = __importDefault(require("../RichText"));
|
|
11
11
|
const classnames_1 = __importDefault(require("classnames"));
|
|
12
|
+
const truncatedSelector = () => {
|
|
13
|
+
const prefix = '.x-live-blog-post__body >';
|
|
14
|
+
const selectors = [
|
|
15
|
+
'p',
|
|
16
|
+
'blockquote',
|
|
17
|
+
'ul',
|
|
18
|
+
'.o-table-container',
|
|
19
|
+
'.n-content-recommended--single-story',
|
|
20
|
+
"[data-layout-name='card']",
|
|
21
|
+
'.n-content-big-number',
|
|
22
|
+
'hr',
|
|
23
|
+
'.n-content-tweet',
|
|
24
|
+
"[data-layout-name='timeline']",
|
|
25
|
+
];
|
|
26
|
+
return selectors.map((item) => `${prefix} ${item}`).join(',');
|
|
27
|
+
};
|
|
12
28
|
const LiveBlogPost = ({ id, postId, // Remove once wordpress is no longer in use
|
|
13
29
|
title, content, // Remove once wordpress is no longer in use
|
|
14
30
|
bodyHTML, //ElasticSearch
|
|
15
31
|
body, // cp-content-pipeline
|
|
16
32
|
publishedTimestamp, // Remove once wordpress is no longer in use
|
|
17
33
|
publishedDate, isBreakingNews, // Remove once wordpress is no longer in use
|
|
18
|
-
standout = {}, articleUrl, showShareButtons = false, byline, ad, backToTop, indicators = {}, }) => {
|
|
34
|
+
standout = {}, articleUrl, showShareButtons = false, byline, ad, backToTop, isPinned, indicators = {}, }) => {
|
|
19
35
|
const showBreakingNewsLabel = standout.breakingNews || isBreakingNews;
|
|
20
36
|
let postBody;
|
|
21
37
|
let postByline;
|
|
@@ -47,18 +63,25 @@ standout = {}, articleUrl, showShareButtons = false, byline, ad, backToTop, indi
|
|
|
47
63
|
}
|
|
48
64
|
return (react_1.default.createElement("article", { className: (0, classnames_1.default)('x-live-blog-post', {
|
|
49
65
|
'x-live-blog-post--opinion': indicators.isOpinion,
|
|
50
|
-
|
|
66
|
+
'x-live-blog-post--pinned': isPinned,
|
|
67
|
+
}), "data-trackable": isPinned ? 'pinned-post' : 'live-post', "data-trackable-context-pinned": isPinned, "data-trackable-context-opinion": indicators.isOpinion, id: `post-${id || postId}`, "data-x-component": "live-blog-post" },
|
|
51
68
|
react_1.default.createElement("div", { className: "x-live-blog-post__standout" },
|
|
52
|
-
|
|
69
|
+
react_1.default.createElement("span", { className: (0, classnames_1.default)('x-live-blog-post__icon', {
|
|
70
|
+
'x-live-blog-post__pin-icon': isPinned,
|
|
71
|
+
'x-live-blog-post__opinion-icon': !isPinned && indicators.isOpinion,
|
|
72
|
+
}) }),
|
|
53
73
|
react_1.default.createElement("div", { className: "x-live-blog-post__meta-container" },
|
|
54
74
|
react_1.default.createElement("div", { className: "x-live-blog-post__meta" },
|
|
55
|
-
indicators.isOpinion ? (react_1.default.createElement("span", { className: "x-live-blog-post__label--opinion" }, "Live Opinion")) : (''),
|
|
75
|
+
indicators.isOpinion ? (react_1.default.createElement("span", { className: "x-live-blog-post__label--opinion x-live-blog-post__label" }, "Live Opinion")) : isPinned ? (react_1.default.createElement("span", { className: "x-live-blog-post__label" }, "Pinned Post")) : (''),
|
|
56
76
|
react_1.default.createElement("span", null,
|
|
57
77
|
react_1.default.createElement(Timestamp_1.default, { publishedTimestamp: publishedDate || publishedTimestamp, textCase: "sentence" }))),
|
|
58
78
|
react_1.default.createElement("div", null, postByline))),
|
|
59
79
|
showBreakingNewsLabel && (react_1.default.createElement("div", { className: "x-live-blog-post__breaking-news" }, "Breaking news")),
|
|
60
80
|
title && react_1.default.createElement("h2", { className: "x-live-blog-post__title" }, title),
|
|
61
|
-
|
|
81
|
+
isPinned ? (react_1.default.createElement("div", { "data-o-component": "o-expander", className: "o-expander", "data-o-expander-shrink-to": "1", "data-o-expander-item-selector": truncatedSelector(), "data-o-expander-collapsed-toggle-text": 'Expand post', "data-o-expander-expanded-toggle-text": 'Collapse post' },
|
|
82
|
+
react_1.default.createElement("div", { className: "o-expander__content" }, postBody),
|
|
83
|
+
react_1.default.createElement("a", { className: "o-expander__toggle o-expander__text--custom" },
|
|
84
|
+
react_1.default.createElement("span", { className: "o-expander__visually-hidden" }, "\u00A0")))) : (postBody),
|
|
62
85
|
react_1.default.createElement("div", { className: "x-live-blog-post__controls" },
|
|
63
86
|
showShareButtons && (react_1.default.createElement(ShareButtons_1.default, { postId: id || postId, articleUrl: articleUrl, title: title })),
|
|
64
87
|
backToTopElem),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogPost/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,kEAAyC;AACzC,4DAAmC;AACnC,2DAAqD;AACrD,4DAAmC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogPost/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -99,7 +99,7 @@ class BaseLiveBlogWrapper extends react_1.Component {
|
|
|
99
99
|
* @type {import('./post-tracker').PostTrackerConfig}
|
|
100
100
|
*/
|
|
101
101
|
const config = {
|
|
102
|
-
query: 'article[data-trackable="live-post"]',
|
|
102
|
+
query: 'article[data-trackable="live-post"],article[data-trackable="pinned-post"]',
|
|
103
103
|
minMillisecondsToReport: 5000,
|
|
104
104
|
returnVisibleElement: true,
|
|
105
105
|
observerUpdateEventString: 'LiveBlogWrapper.INSERT_POST',
|
|
@@ -120,6 +120,13 @@ class BaseLiveBlogWrapper extends react_1.Component {
|
|
|
120
120
|
const { posts = [], ads = {}, articleUrl, showShareButtons, id, liveBlogWrapperElementRef, } = this.props;
|
|
121
121
|
//TODO: CI-1975 these types can move out when we have a posts type properly defined and shared
|
|
122
122
|
posts.sort((a, b) => {
|
|
123
|
+
if (a.isPinned && !b.isPinned) {
|
|
124
|
+
return -1; // A is pinned, B is not, A should come first
|
|
125
|
+
}
|
|
126
|
+
if (b.isPinned && !a.isPinned) {
|
|
127
|
+
return 1; // B is pinned, A is not, B should come first
|
|
128
|
+
}
|
|
129
|
+
// For posts both pinned or both not pinned, sort by date
|
|
123
130
|
const timestampA = a.publishedDate || a.publishedTimestamp;
|
|
124
131
|
const timestampB = b.publishedDate || b.publishedTimestamp;
|
|
125
132
|
// Newer posts on top
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogWrapper/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,kEAA+E;AAC/E,mDAA+C;AAC/C,mDAA+C;AAC/C,iDAA4C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogWrapper/index.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
CHANGED
|
@@ -22,5 +22,4 @@ export { default as Topper } from './components/Topper';
|
|
|
22
22
|
export { default as Tweet } from './components/Tweet';
|
|
23
23
|
export { default as Video } from './components/Video';
|
|
24
24
|
export { default as YoutubeVideo } from './components/YoutubeVideo';
|
|
25
|
-
export { default as PinnedPost } from './components/PinnedPost';
|
|
26
25
|
export { List, ListItem, Link, Blockquote, LineBreak, HorizontalRule, Emphasis, Strong, Strikethrough, } from './components/RichText/BasicComponents';
|
package/lib/index.js
CHANGED
|
@@ -3,7 +3,7 @@ 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.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.
|
|
6
|
+
exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.YoutubeVideo = exports.Video = exports.Tweet = exports.Topper = exports.Table = exports.ScrollyBlock = exports.RichText = exports.Recommended = exports.Pullquote = exports.PodcastBody = exports.Paragraph = exports.MainImage = exports.LiveBlogWrapper = exports.LiveBlogBody = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.Heading = exports.Flourish = exports.Byline = exports.Body = exports.BigNumber = exports.ArticleInfo = exports.ArticleBody = void 0;
|
|
7
7
|
var ArticleBody_1 = require("./components/ArticleBody");
|
|
8
8
|
Object.defineProperty(exports, "ArticleBody", { enumerable: true, get: function () { return __importDefault(ArticleBody_1).default; } });
|
|
9
9
|
var ArticleInfo_1 = require("./components/ArticleInfo");
|
|
@@ -54,8 +54,6 @@ var Video_1 = require("./components/Video");
|
|
|
54
54
|
Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });
|
|
55
55
|
var YoutubeVideo_1 = require("./components/YoutubeVideo");
|
|
56
56
|
Object.defineProperty(exports, "YoutubeVideo", { enumerable: true, get: function () { return __importDefault(YoutubeVideo_1).default; } });
|
|
57
|
-
var PinnedPost_1 = require("./components/PinnedPost");
|
|
58
|
-
Object.defineProperty(exports, "PinnedPost", { enumerable: true, get: function () { return __importDefault(PinnedPost_1).default; } });
|
|
59
57
|
var BasicComponents_1 = require("./components/RichText/BasicComponents");
|
|
60
58
|
Object.defineProperty(exports, "List", { enumerable: true, get: function () { return BasicComponents_1.List; } });
|
|
61
59
|
Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return BasicComponents_1.ListItem; } });
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,kEAAsE;AAA7D,kHAAA,OAAO,OAAQ;AACxB,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,sDAAmE;AAA1D,mHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8DAA0D;AAAjD,8GAAA,YAAY,OAAA;AACrB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,kEAAsE;AAA7D,kHAAA,OAAO,OAAQ;AACxB,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,sDAAmE;AAA1D,mHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8DAA0D;AAAjD,8GAAA,YAAY,OAAA;AACrB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAEhC,yEAU8C;AAT5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA"}
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import './LiveBlogPost.stories.scss';
|
|
4
4
|
declare const _default: {
|
|
5
5
|
title: string;
|
|
6
|
-
component: ({ id, postId, title, content, bodyHTML, body, publishedTimestamp, publishedDate, isBreakingNews, standout, articleUrl, showShareButtons, byline, ad, backToTop, indicators, }: LiveBlogPostProps) => React.JSX.Element;
|
|
6
|
+
component: ({ id, postId, title, content, bodyHTML, body, publishedTimestamp, publishedDate, isBreakingNews, standout, articleUrl, showShareButtons, byline, ad, backToTop, isPinned, indicators, }: LiveBlogPostProps) => React.JSX.Element;
|
|
7
7
|
content: {};
|
|
8
8
|
argTypes: {
|
|
9
9
|
'indicators.isOpinion': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveBlogPost.stories.js","sourceRoot":"","sources":["../../src/stories/LiveBlogPost.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,6DAAyD;AAEzD,kDAAyB;AACzB,uCAAoC;AAEpC,kBAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,2BAAY;IACvB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE;QACR,sBAAsB,EAAE;YACtB,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,YAAY;SACnB;KACF;CACF,CAAA;AAED,MAAM,IAAI,GAAsB;IAC9B,EAAE,EAAE,EAAE;IACN,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,6DAA6D;IACpE,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;IACR,kBAAkB,EAAE,EAAE;IACtB,aAAa,EAAE,qBAAqB;IACpC,cAAc,EAAE,KAAK;IACrB,UAAU,EAAE,EAAE;IACd,gBAAgB,EAAE,IAAI;IACtB,MAAM,EAAE,gBAAgB;IACxB,EAAE,EAAE,EAAE;IACN,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,SAAS,EAAE,IAAI;KAChB;
|
|
1
|
+
{"version":3,"file":"LiveBlogPost.stories.js","sourceRoot":"","sources":["../../src/stories/LiveBlogPost.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,6DAAyD;AAEzD,kDAAyB;AACzB,uCAAoC;AAEpC,kBAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,2BAAY;IACvB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE;QACR,sBAAsB,EAAE;YACtB,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,YAAY;SACnB;KACF;CACF,CAAA;AAED,MAAM,IAAI,GAAsB;IAC9B,EAAE,EAAE,EAAE;IACN,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,6DAA6D;IACpE,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;IACR,kBAAkB,EAAE,EAAE;IACtB,aAAa,EAAE,qBAAqB;IACpC,cAAc,EAAE,KAAK;IACrB,UAAU,EAAE,EAAE;IACd,gBAAgB,EAAE,IAAI;IACtB,MAAM,EAAE,gBAAgB;IACxB,EAAE,EAAE,EAAE;IACN,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,SAAS,EAAE,IAAI;KAChB;IACD,QAAQ,EAAE,KAAK;CAChB,CAAA;AAEM,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,8BAAC,2BAAY,OAAK,IAAI,GAAI,CAAA;AAA1C,QAAA,OAAO,WAAmC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/cp-content-pipeline-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -17,12 +17,11 @@
|
|
|
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.2.0",
|
|
21
|
+
"@financial-times/cp-content-pipeline-schema": "^2.4.0",
|
|
22
|
+
"@financial-times/cp-content-pipeline-styles": "^2.2.0",
|
|
23
23
|
"@financial-times/n-scrollytelling-image": "^1.1.0",
|
|
24
24
|
"@financial-times/o-colors": "^6.6.2",
|
|
25
|
-
"@financial-times/o-expander": "^6.2.6",
|
|
26
25
|
"@financial-times/o-grid": "^6.1.5",
|
|
27
26
|
"@financial-times/o-icons": "^7.7.0",
|
|
28
27
|
"@financial-times/o-share": "^10.0.1",
|
|
@@ -58,6 +57,7 @@
|
|
|
58
57
|
"@financial-times/o-labels": "^6.5.0",
|
|
59
58
|
"@financial-times/o-teaser": "^6.2.2",
|
|
60
59
|
"@financial-times/x-teaser": "^14.0.2",
|
|
60
|
+
"@financial-times/o-expander": "^6.2.6",
|
|
61
61
|
"classnames": "^2.3.1"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
@@ -6,7 +6,6 @@ import { LiveBlogWrapper } from '../LiveBlogWrapper'
|
|
|
6
6
|
//TODO: CI-1975 remove "any" types
|
|
7
7
|
|
|
8
8
|
export type LiveBlogBodyProps = BodyProps & {
|
|
9
|
-
isPinnedPost?: boolean
|
|
10
9
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
10
|
xInteractionSerialiser?: any
|
|
12
11
|
}
|
|
@@ -14,7 +13,6 @@ export type LiveBlogBodyProps = BodyProps & {
|
|
|
14
13
|
export default function LiveBlogBody({
|
|
15
14
|
content,
|
|
16
15
|
components,
|
|
17
|
-
isPinnedPost,
|
|
18
16
|
xInteractionSerialiser,
|
|
19
17
|
showShareButtons,
|
|
20
18
|
showBackToTop = true,
|
|
@@ -22,22 +20,14 @@ export default function LiveBlogBody({
|
|
|
22
20
|
}: LiveBlogBodyProps) {
|
|
23
21
|
if (content.__typename !== 'LiveBlogPackage') return null
|
|
24
22
|
|
|
25
|
-
let id = 'live-blog-wrapper'
|
|
26
23
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
27
|
-
|
|
28
|
-
(post) => post?.id !== content.pinnedPost?.id
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
if (isPinnedPost) {
|
|
32
|
-
id = 'pinned-post-live-blog-wrapper'
|
|
33
|
-
posts = [content.pinnedPost]
|
|
34
|
-
}
|
|
24
|
+
const posts = content.liveBlogPosts || []
|
|
35
25
|
|
|
36
26
|
return (
|
|
37
27
|
<ComponentsContext.Provider value={components}>
|
|
38
28
|
<LiveBlogWrapper
|
|
39
29
|
articleUrl={`https://www.ft.com/content/${content.id}`}
|
|
40
|
-
id=
|
|
30
|
+
id="live-blog-wrapper"
|
|
41
31
|
posts={posts}
|
|
42
32
|
serialiser={xInteractionSerialiser}
|
|
43
33
|
showShareButtons={showShareButtons ?? true}
|
|
@@ -21,6 +21,7 @@ export type LiveBlogPostProps = {
|
|
|
21
21
|
publishedTimestamp: string // Remove once wordpress is no longer in use
|
|
22
22
|
publishedDate: string
|
|
23
23
|
isBreakingNews: boolean // Remove once wordpress is no longer in use
|
|
24
|
+
isPinned: boolean
|
|
24
25
|
standout?: {
|
|
25
26
|
breakingNews?: boolean
|
|
26
27
|
editorsChoice?: boolean
|
|
@@ -35,6 +36,23 @@ export type LiveBlogPostProps = {
|
|
|
35
36
|
indicators?: indicators
|
|
36
37
|
}
|
|
37
38
|
|
|
39
|
+
const truncatedSelector = () => {
|
|
40
|
+
const prefix = '.x-live-blog-post__body >'
|
|
41
|
+
const selectors = [
|
|
42
|
+
'p',
|
|
43
|
+
'blockquote',
|
|
44
|
+
'ul',
|
|
45
|
+
'.o-table-container',
|
|
46
|
+
'.n-content-recommended--single-story',
|
|
47
|
+
"[data-layout-name='card']",
|
|
48
|
+
'.n-content-big-number',
|
|
49
|
+
'hr',
|
|
50
|
+
'.n-content-tweet',
|
|
51
|
+
"[data-layout-name='timeline']",
|
|
52
|
+
]
|
|
53
|
+
return selectors.map((item) => `${prefix} ${item}`).join(',')
|
|
54
|
+
}
|
|
55
|
+
|
|
38
56
|
const LiveBlogPost = ({
|
|
39
57
|
id,
|
|
40
58
|
postId, // Remove once wordpress is no longer in use
|
|
@@ -51,6 +69,7 @@ const LiveBlogPost = ({
|
|
|
51
69
|
byline,
|
|
52
70
|
ad,
|
|
53
71
|
backToTop,
|
|
72
|
+
isPinned,
|
|
54
73
|
indicators = {},
|
|
55
74
|
}: LiveBlogPostProps) => {
|
|
56
75
|
const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
|
|
@@ -112,24 +131,29 @@ const LiveBlogPost = ({
|
|
|
112
131
|
<article
|
|
113
132
|
className={classnames('x-live-blog-post', {
|
|
114
133
|
'x-live-blog-post--opinion': indicators.isOpinion,
|
|
134
|
+
'x-live-blog-post--pinned': isPinned,
|
|
115
135
|
})}
|
|
116
|
-
data-trackable=
|
|
136
|
+
data-trackable={isPinned ? 'pinned-post' : 'live-post'}
|
|
137
|
+
data-trackable-context-pinned={isPinned}
|
|
117
138
|
data-trackable-context-opinion={indicators.isOpinion}
|
|
118
139
|
id={`post-${id || postId}`}
|
|
119
140
|
data-x-component="live-blog-post"
|
|
120
141
|
>
|
|
121
142
|
<div className="x-live-blog-post__standout">
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
143
|
+
<span
|
|
144
|
+
className={classnames('x-live-blog-post__icon', {
|
|
145
|
+
'x-live-blog-post__pin-icon': isPinned,
|
|
146
|
+
'x-live-blog-post__opinion-icon': !isPinned && indicators.isOpinion,
|
|
147
|
+
})}
|
|
148
|
+
></span>
|
|
127
149
|
<div className="x-live-blog-post__meta-container">
|
|
128
150
|
<div className="x-live-blog-post__meta">
|
|
129
151
|
{indicators.isOpinion ? (
|
|
130
|
-
<span className="x-live-blog-post__label--opinion">
|
|
152
|
+
<span className="x-live-blog-post__label--opinion x-live-blog-post__label">
|
|
131
153
|
Live Opinion
|
|
132
154
|
</span>
|
|
155
|
+
) : isPinned ? (
|
|
156
|
+
<span className="x-live-blog-post__label">Pinned Post</span>
|
|
133
157
|
) : (
|
|
134
158
|
''
|
|
135
159
|
)}
|
|
@@ -147,7 +171,23 @@ const LiveBlogPost = ({
|
|
|
147
171
|
<div className="x-live-blog-post__breaking-news">Breaking news</div>
|
|
148
172
|
)}
|
|
149
173
|
{title && <h2 className="x-live-blog-post__title">{title}</h2>}
|
|
150
|
-
{
|
|
174
|
+
{isPinned ? (
|
|
175
|
+
<div
|
|
176
|
+
data-o-component="o-expander"
|
|
177
|
+
className="o-expander"
|
|
178
|
+
data-o-expander-shrink-to="1"
|
|
179
|
+
data-o-expander-item-selector={truncatedSelector()}
|
|
180
|
+
data-o-expander-collapsed-toggle-text={'Expand post'}
|
|
181
|
+
data-o-expander-expanded-toggle-text={'Collapse post'}
|
|
182
|
+
>
|
|
183
|
+
<div className="o-expander__content">{postBody}</div>
|
|
184
|
+
<a className="o-expander__toggle o-expander__text--custom">
|
|
185
|
+
<span className="o-expander__visually-hidden"> </span>
|
|
186
|
+
</a>
|
|
187
|
+
</div>
|
|
188
|
+
) : (
|
|
189
|
+
postBody
|
|
190
|
+
)}
|
|
151
191
|
<div className="x-live-blog-post__controls">
|
|
152
192
|
{showShareButtons && (
|
|
153
193
|
<ShareButtons
|
|
@@ -108,7 +108,8 @@ class BaseLiveBlogWrapper extends Component<LiveBlogWrapperTypes, stateTypes> {
|
|
|
108
108
|
* @type {import('./post-tracker').PostTrackerConfig}
|
|
109
109
|
*/
|
|
110
110
|
const config = {
|
|
111
|
-
query:
|
|
111
|
+
query:
|
|
112
|
+
'article[data-trackable="live-post"],article[data-trackable="pinned-post"]',
|
|
112
113
|
minMillisecondsToReport: 5000,
|
|
113
114
|
returnVisibleElement: true,
|
|
114
115
|
observerUpdateEventString: 'LiveBlogWrapper.INSERT_POST',
|
|
@@ -140,9 +141,26 @@ class BaseLiveBlogWrapper extends Component<LiveBlogWrapperTypes, stateTypes> {
|
|
|
140
141
|
//TODO: CI-1975 these types can move out when we have a posts type properly defined and shared
|
|
141
142
|
posts.sort(
|
|
142
143
|
(
|
|
143
|
-
a: {
|
|
144
|
-
|
|
144
|
+
a: {
|
|
145
|
+
publishedDate: any
|
|
146
|
+
publishedTimestamp: any
|
|
147
|
+
isPinned: boolean
|
|
148
|
+
},
|
|
149
|
+
b: {
|
|
150
|
+
publishedDate: any
|
|
151
|
+
publishedTimestamp: any
|
|
152
|
+
isPinned: boolean
|
|
153
|
+
}
|
|
145
154
|
) => {
|
|
155
|
+
if (a.isPinned && !b.isPinned) {
|
|
156
|
+
return -1 // A is pinned, B is not, A should come first
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
if (b.isPinned && !a.isPinned) {
|
|
160
|
+
return 1 // B is pinned, A is not, B should come first
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// For posts both pinned or both not pinned, sort by date
|
|
146
164
|
const timestampA = a.publishedDate || a.publishedTimestamp
|
|
147
165
|
const timestampB = b.publishedDate || b.publishedTimestamp
|
|
148
166
|
|
package/src/index.ts
CHANGED
|
@@ -22,7 +22,6 @@ export { default as Topper } from './components/Topper'
|
|
|
22
22
|
export { default as Tweet } from './components/Tweet'
|
|
23
23
|
export { default as Video } from './components/Video'
|
|
24
24
|
export { default as YoutubeVideo } from './components/YoutubeVideo'
|
|
25
|
-
export { default as PinnedPost } from './components/PinnedPost'
|
|
26
25
|
|
|
27
26
|
export {
|
|
28
27
|
List,
|