@financial-times/cp-content-pipeline-ui 2.0.6 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/lib/components/ImageSet/index.js +1 -1
- package/lib/components/ImageSet/index.js.map +1 -1
- package/lib/components/Topper/Tags.js +2 -2
- package/lib/components/Topper/Tags.js.map +1 -1
- package/lib/components/Topper/Wrapper.d.ts +1 -1
- package/lib/components/Topper/Wrapper.js +1 -2
- package/lib/components/Topper/Wrapper.js.map +1 -1
- package/lib/components/Topper/index.js +14 -8
- package/lib/components/Topper/index.js.map +1 -1
- package/lib/index.d.ts +15 -10
- package/lib/index.js +31 -21
- package/lib/index.js.map +1 -1
- package/package.json +6 -6
- package/src/components/ImageSet/index.tsx +1 -1
- package/src/components/Topper/Tags.tsx +25 -23
- package/src/components/Topper/Wrapper.tsx +0 -2
- package/src/components/Topper/index.tsx +15 -11
- package/src/index.ts +15 -10
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -363,6 +363,42 @@
|
|
|
363
363
|
* @financial-times/cp-content-pipeline-client bumped from ^1.3.11 to ^1.3.12
|
|
364
364
|
* @financial-times/cp-content-pipeline-schema bumped from ^1.3.8 to ^1.3.9
|
|
365
365
|
|
|
366
|
+
## [3.0.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v2.0.6...cp-content-pipeline-ui-v3.0.0) (2023-09-28)
|
|
367
|
+
|
|
368
|
+
|
|
369
|
+
### ⚠ BREAKING CHANGES
|
|
370
|
+
|
|
371
|
+
* **ui:** drop Node 16 and update to Node 18
|
|
372
|
+
|
|
373
|
+
### Features
|
|
374
|
+
|
|
375
|
+
* **ui:** drop Node 16 and update to Node 18 ([d9faa2d](https://github.com/Financial-Times/cp-content-pipeline/commit/d9faa2ddaa2781996b5e24807b0db26225fca28f))
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
### Bug Fixes
|
|
379
|
+
|
|
380
|
+
* Add Video, YoutubeVideo and BigNumber to component index exports ([524b8d1](https://github.com/Financial-Times/cp-content-pipeline/commit/524b8d1e2c14e4f8f8fce0603b6ea9756ff28c76))
|
|
381
|
+
* defend against an undefined image ([f8d8ab4](https://github.com/Financial-Times/cp-content-pipeline/commit/f8d8ab445f43ee69867a6fe37f3b985949a05589))
|
|
382
|
+
* split text topper classes ([0dc270c](https://github.com/Financial-Times/cp-content-pipeline/commit/0dc270ca632d2609cb5cbeace9ea118f99685511))
|
|
383
|
+
|
|
384
|
+
|
|
385
|
+
### Dependencies
|
|
386
|
+
|
|
387
|
+
* The following workspace dependencies were updated
|
|
388
|
+
* devDependencies
|
|
389
|
+
* @financial-times/cp-content-pipeline-client bumped from ^1.3.13 to ^2.0.0
|
|
390
|
+
* @financial-times/cp-content-pipeline-schema bumped from ^1.3.10 to ^1.4.0
|
|
391
|
+
|
|
392
|
+
## [2.0.6](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v2.0.5...cp-content-pipeline-ui-v2.0.6) (2023-09-26)
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
### Bug Fixes
|
|
396
|
+
|
|
397
|
+
* align time to the center of the cursor and aligned to the icons ([9bc626a](https://github.com/Financial-Times/cp-content-pipeline/commit/9bc626a32aa8b976660a4e9c0fa35b1f334ab71e))
|
|
398
|
+
* fit the video to its best ratio without pass the screen size ([6c15593](https://github.com/Financial-Times/cp-content-pipeline/commit/6c15593dbcd225c1ee5c297c6c7b07fd82733d39))
|
|
399
|
+
* remove unnecessary fade transition ([9afae7c](https://github.com/Financial-Times/cp-content-pipeline/commit/9afae7ce8f8aeac6145e3ebdc02bafb556e07f5b))
|
|
400
|
+
* temporary make all prop optional so to match used empty object ([82bb2cb](https://github.com/Financial-Times/cp-content-pipeline/commit/82bb2cb16cff4ea31a5105522eb16f80fab719d3))
|
|
401
|
+
|
|
366
402
|
## [2.0.5](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v2.0.4...cp-content-pipeline-ui-v2.0.5) (2023-09-25)
|
|
367
403
|
|
|
368
404
|
|
|
@@ -56,7 +56,7 @@ function Sources({ images, getBreakpoints }) {
|
|
|
56
56
|
exports.Sources = Sources;
|
|
57
57
|
// TODO should `fallback` be added to content-tree imageset?
|
|
58
58
|
function FallbackImage({ image, imageType = 'image', picture, className, }) {
|
|
59
|
-
return (react_1.default.createElement("img", { src: hasSourceSet(image) ? image.sourceSet[0].url : image
|
|
59
|
+
return (react_1.default.createElement("img", { src: hasSourceSet(image) ? image.sourceSet[0].url : image?.url ?? undefined, srcSet: hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined, alt: picture?.alt ?? '', "data-image-type": imageType, width: image.width ?? undefined, height: image.height ?? undefined, className: className }));
|
|
60
60
|
}
|
|
61
61
|
exports.FallbackImage = FallbackImage;
|
|
62
62
|
function ImageSet(imageSet) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageSet/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageSet/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,12 +10,12 @@ function Tags({ __typename, isPackage, displayConcept, genreConcept, brandConcep
|
|
|
10
10
|
const baseFollowButtonCondition = FollowButtonSlot && concept?.id;
|
|
11
11
|
const additionalFollowButtonCondition = (isOpinion && !headshot) || !isOpinion;
|
|
12
12
|
const followButtonCondition = baseFollowButtonCondition && additionalFollowButtonCondition;
|
|
13
|
-
return (react_1.default.createElement("div", { className: "o-topper__tags" }, isPackage && brandConcept?.id ? (react_1.default.createElement(ConceptLabel, { ...brandConcept })) : (react_1.default.createElement("div", { className: "topper__primary-theme" },
|
|
13
|
+
return (react_1.default.createElement("div", { className: "o-topper__tags" }, isPackage && brandConcept?.id ? (react_1.default.createElement(ConceptLabel, { ...brandConcept })) : (!isPackage && (react_1.default.createElement("div", { className: "topper__primary-theme" },
|
|
14
14
|
isOpinion && (react_1.default.createElement("span", { className: "o-topper__opinion-genre", "aria-label": "opinion article" }, `Opinion `)),
|
|
15
15
|
brandConcept && react_1.default.createElement(BrandConcept, { ...brandConcept }),
|
|
16
16
|
concept && (react_1.default.createElement("span", null,
|
|
17
17
|
react_1.default.createElement(ConceptLabel, { ...concept }))),
|
|
18
|
-
followButtonCondition && (react_1.default.createElement(FollowButtonSlot, { conceptId: concept.id, conceptName: concept.prefLabel, variant: followButtonVariant ?? 'standard' }))))));
|
|
18
|
+
followButtonCondition && (react_1.default.createElement(FollowButtonSlot, { conceptId: concept.id, conceptName: concept.prefLabel, variant: followButtonVariant ?? 'standard' })))))));
|
|
19
19
|
}
|
|
20
20
|
exports.default = Tags;
|
|
21
21
|
function getConcept(displayConcept, genreConcept) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Topper/Tags.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAmBzB,SAAwB,IAAI,CAAC,EAC3B,UAAU,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,QAAQ,EACR,gBAAgB,GACN;IACV,MAAM,SAAS,GAAG,UAAU,KAAK,eAAe,CAAA;IAChD,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,EAAE,YAAY,CAAC,CAAA;IACxD,MAAM,yBAAyB,GAAG,gBAAgB,IAAI,OAAO,EAAE,EAAE,CAAA;IACjE,MAAM,+BAA+B,GAAG,CAAC,SAAS,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAA;IAC9E,MAAM,qBAAqB,GACzB,yBAAyB,IAAI,+BAA+B,CAAA;IAE9D,OAAO,CACL,uCAAK,SAAS,EAAC,gBAAgB,IAC5B,SAAS,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC,CAC/B,8BAAC,YAAY,OAAK,YAAY,GAAI,CACnC,CAAC,CAAC,CAAC,CACF,uCAAK,SAAS,EAAC,uBAAuB;QACnC,SAAS,IAAI,CACZ,wCACE,SAAS,EAAC,yBAAyB,gBACxB,iBAAiB,IAE3B,UAAU,CACN,CACR;QAEA,YAAY,IAAI,8BAAC,YAAY,OAAK,YAAY,GAAI;QAElD,OAAO,IAAI,CACV;YACE,8BAAC,YAAY,OAAK,OAAO,GAAI,CACxB,CACR;QACA,qBAAqB,IAAI,CACxB,8BAAC,gBAAgB,IACf,SAAS,EAAE,OAAO,CAAC,EAAE,EACrB,WAAW,EAAE,OAAO,CAAC,SAAS,EAC9B,OAAO,EAAE,mBAAmB,IAAI,UAAU,GAC1C,CACH,CACG,CACP,CACG,CACP,CAAA;AACH,CAAC;
|
|
1
|
+
{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Topper/Tags.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAmBzB,SAAwB,IAAI,CAAC,EAC3B,UAAU,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,QAAQ,EACR,gBAAgB,GACN;IACV,MAAM,SAAS,GAAG,UAAU,KAAK,eAAe,CAAA;IAChD,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,EAAE,YAAY,CAAC,CAAA;IACxD,MAAM,yBAAyB,GAAG,gBAAgB,IAAI,OAAO,EAAE,EAAE,CAAA;IACjE,MAAM,+BAA+B,GAAG,CAAC,SAAS,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAA;IAC9E,MAAM,qBAAqB,GACzB,yBAAyB,IAAI,+BAA+B,CAAA;IAE9D,OAAO,CACL,uCAAK,SAAS,EAAC,gBAAgB,IAC5B,SAAS,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC,CAC/B,8BAAC,YAAY,OAAK,YAAY,GAAI,CACnC,CAAC,CAAC,CAAC,CACF,CAAC,SAAS,IAAI,CACZ,uCAAK,SAAS,EAAC,uBAAuB;QACnC,SAAS,IAAI,CACZ,wCACE,SAAS,EAAC,yBAAyB,gBACxB,iBAAiB,IAE3B,UAAU,CACN,CACR;QAEA,YAAY,IAAI,8BAAC,YAAY,OAAK,YAAY,GAAI;QAElD,OAAO,IAAI,CACV;YACE,8BAAC,YAAY,OAAK,OAAO,GAAI,CACxB,CACR;QACA,qBAAqB,IAAI,CACxB,8BAAC,gBAAgB,IACf,SAAS,EAAE,OAAO,CAAC,EAAE,EACrB,WAAW,EAAE,OAAO,CAAC,SAAS,EAC9B,OAAO,EAAE,mBAAmB,IAAI,UAAU,GAC1C,CACH,CACG,CACP,CACF,CACG,CACP,CAAA;AACH,CAAC;AApDD,uBAoDC;AAED,SAAS,UAAU,CACjB,cAA2C,EAC3C,YAAyC;IAEzC,IAAI,cAAc,EAAE,EAAE,EAAE;QACtB,OAAO,cAAc,CAAA;KACtB;SAAM,IAAI,YAAY,EAAE,EAAE,EAAE;QAC3B,OAAO,YAAY,CAAA;KACpB;IAED,OAAO,IAAI,CAAA;AACb,CAAC;AAED,SAAS,YAAY,CAAC,OAAwB;IAC5C,OAAO,CACL,qCACE,IAAI,EAAE,OAAO,CAAC,WAAW,IAAI,SAAS,EACtC,SAAS,EAAC,iBAAiB,oBACZ,eAAe,gBAClB,eAAe,OAAO,CAAC,SAAS,SAAS;QAEpD,OAAO,CAAC,SAAS;kBAChB,CACL,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,OAAwB;IAC5C,OAAO,CACL,qCACE,IAAI,EAAE,OAAO,CAAC,WAAW,EACzB,SAAS,EAAC,6DAA6D,oBACxD,eAAe,gBAClB,sBAAsB,OAAO,CAAC,SAAS,EAAE,qBACpC,OAAO,CAAC,EAAE,IAE1B,OAAO,CAAC,SAAS,CAChB,CACL,CAAA;AACH,CAAC"}
|
|
@@ -6,5 +6,5 @@ type WrapperProps = {
|
|
|
6
6
|
modifiers: string[];
|
|
7
7
|
backgroundColor?: string;
|
|
8
8
|
};
|
|
9
|
-
export default function Wrapper({ children,
|
|
9
|
+
export default function Wrapper({ children, isBasic, modifiers, backgroundColor, }: WrapperProps): React.JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -5,13 +5,12 @@ 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 classnames_1 = __importDefault(require("classnames"));
|
|
8
|
-
function Wrapper({ children,
|
|
8
|
+
function Wrapper({ children, isBasic, modifiers = [], backgroundColor, }) {
|
|
9
9
|
const modifierClasses = modifiers.map((modifier) => `o-topper--${modifier}`);
|
|
10
10
|
const modifierClassesString = modifierClasses.toString().replace(/,/g, ' ');
|
|
11
11
|
const wrapperClassnames = (0, classnames_1.default)({
|
|
12
12
|
'o-topper': true,
|
|
13
13
|
'article-topper': true,
|
|
14
|
-
'o-topper--package': isPackage,
|
|
15
14
|
[`o-topper--color-${backgroundColor}`]: Boolean(backgroundColor),
|
|
16
15
|
[`${modifierClassesString}`]: Boolean(modifierClassesString),
|
|
17
16
|
'o-topper--basic': isBasic,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../src/components/Topper/Wrapper.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AACxC,4DAAmC;AAUnC,SAAwB,OAAO,CAAC,EAC9B,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../src/components/Topper/Wrapper.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AACxC,4DAAmC;AAUnC,SAAwB,OAAO,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,EAAE,EACd,eAAe,GACF;IACb,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAA;IAC5E,MAAM,qBAAqB,GAAG,eAAe,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IAE3E,MAAM,iBAAiB,GAAG,IAAA,oBAAU,EAAC;QACnC,UAAU,EAAE,IAAI;QAChB,gBAAgB,EAAE,IAAI;QACtB,CAAC,mBAAmB,eAAe,EAAE,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;QAChE,CAAC,GAAG,qBAAqB,EAAE,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC;QAC5D,iBAAiB,EAAE,OAAO;KAC3B,CAAC,CAAA;IAEF,OAAO,uCAAK,SAAS,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAA;AAC5D,CAAC;AAlBD,0BAkBC"}
|
|
@@ -18,13 +18,19 @@ function Topper({ content, followButtonSlot }) {
|
|
|
18
18
|
if (!topper) {
|
|
19
19
|
return null;
|
|
20
20
|
}
|
|
21
|
-
const modifiers = [];
|
|
22
|
-
'layout' in topper && topper.layout && modifiers.push(topper.layout);
|
|
23
|
-
'headshot' in topper && topper.headshot && modifiers.push('has-headshot');
|
|
24
|
-
topper.__typename === 'OpinionTopper' && modifiers.push('opinion');
|
|
25
21
|
const isPackage = content.__typename === 'ContentPackage';
|
|
26
22
|
const isLiveBlog = content.__typename === 'LiveBlogPackage';
|
|
27
23
|
const isBasic = topper.__typename === 'BasicTopper';
|
|
24
|
+
const isOpinion = topper.__typename === 'OpinionTopper';
|
|
25
|
+
const hasLayout = 'layout' in topper && topper.layout;
|
|
26
|
+
const hasDesign = 'design' in topper && topper.design;
|
|
27
|
+
const hasHeadshot = 'headshot' in topper && topper.headshot;
|
|
28
|
+
const modifiers = [];
|
|
29
|
+
isPackage && modifiers.push('package');
|
|
30
|
+
isPackage && hasDesign && modifiers.push(`package-${topper.design}`);
|
|
31
|
+
isOpinion && modifiers.push('opinion');
|
|
32
|
+
hasLayout && modifiers.push(topper.layout);
|
|
33
|
+
hasHeadshot && modifiers.push('has-headshot');
|
|
28
34
|
const getMostRecentPostPublishedDate = () => {
|
|
29
35
|
const defaultPublishDate = content.publishedDate;
|
|
30
36
|
if (isLiveBlog) {
|
|
@@ -38,18 +44,18 @@ function Topper({ content, followButtonSlot }) {
|
|
|
38
44
|
'article-topper': true,
|
|
39
45
|
'pinned-post__topper--no-image': isLiveBlog,
|
|
40
46
|
}) },
|
|
41
|
-
react_1.default.createElement(Wrapper_1.default, { backgroundColor: topper.backgroundColour ?? undefined,
|
|
47
|
+
react_1.default.createElement(Wrapper_1.default, { backgroundColor: topper.backgroundColour ?? undefined, isBasic: isBasic, modifiers: modifiers },
|
|
42
48
|
react_1.default.createElement("div", { className: (0, classnames_1.default)('o-topper__content', {
|
|
43
49
|
'o-topper__content--text-shadow': topper.textShadow,
|
|
44
50
|
'o-topper__content--background-box': topper.backgroundBox,
|
|
45
51
|
}), id: "o-topper" },
|
|
46
52
|
isLiveBlog ? (react_1.default.createElement("div", { className: "o-topper__tags" },
|
|
47
|
-
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:
|
|
53
|
+
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 })),
|
|
48
54
|
react_1.default.createElement(Headline_1.default, { headline: topper.headline, isLargeHeadline: ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
|
|
49
55
|
undefined }),
|
|
50
56
|
topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source })),
|
|
51
|
-
|
|
52
|
-
|
|
57
|
+
hasHeadshot && react_1.default.createElement(Headshot_1.default, { url: topper.headshot }),
|
|
58
|
+
isOpinion && topper.columnist && (react_1.default.createElement(Columnist_1.default, { authorConcept: topper.columnist, followButtonVariant: topper.followButtonVariant, followButtonSlot: followButtonSlot }))),
|
|
53
59
|
react_1.default.createElement("div", { className: "o-topper__background" }),
|
|
54
60
|
'images' in topper && react_1.default.createElement(Picture_1.default, { topper: topper }))));
|
|
55
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,wDAA+B;AAC/B,kDAAyB;AACzB,0DAAiC;AACjC,oDAA2B;AAC3B,wDAA+B;AAC/B,0DAAiC;AACjC,4DAAmC;AACnC,4EAAmD;AAEnD,4DAAmC;AAQnC,SAAwB,MAAM,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAe;IACvE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAA;IAE1B,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,19 +1,24 @@
|
|
|
1
|
-
export { default as Body } from './components/Body';
|
|
2
1
|
export { default as ArticleBody } from './components/ArticleBody';
|
|
3
|
-
export { default as LiveBlogBody } from './components/LiveBlogBody';
|
|
4
|
-
export { default as Topper } from './components/Topper';
|
|
5
2
|
export { default as ArticleInfo } from './components/ArticleInfo';
|
|
3
|
+
export { default as BigNumber } from './components/BigNumber';
|
|
4
|
+
export { default as Body } from './components/Body';
|
|
6
5
|
export { default as Byline } from './components/Byline';
|
|
7
|
-
export { default as
|
|
6
|
+
export { default as Clip } from './components/Clip/template/component';
|
|
7
|
+
export { default as Flourish } from './components/Flourish';
|
|
8
|
+
export { default as Heading } from './components/Heading';
|
|
8
9
|
export { default as ImageSet } from './components/ImageSet';
|
|
9
10
|
export { Layout, LayoutContainer, LayoutSlot } from './components/Layout';
|
|
11
|
+
export { default as LiveBlogBody } from './components/LiveBlogBody';
|
|
12
|
+
export { default as MainImage } from './components/MainImage';
|
|
13
|
+
export { default as Paragraph } from './components/Paragraph';
|
|
14
|
+
export { default as PodcastBody } from './components/PodcastBody';
|
|
15
|
+
export { default as Pullquote } from './components/Pullquote/index';
|
|
10
16
|
export { default as Recommended } from './components/Recommended';
|
|
11
17
|
export { default as RichText } from './components/RichText';
|
|
12
|
-
export {
|
|
13
|
-
export { default as Pullquote } from './components/Pullquote/index';
|
|
14
|
-
export { default as Tweet } from './components/Tweet';
|
|
15
|
-
export { default as Heading } from './components/Heading';
|
|
18
|
+
export { ScrollyBlock } from './components/Scrollytelling';
|
|
16
19
|
export { default as Table } from './components/Table';
|
|
17
|
-
export { default as
|
|
20
|
+
export { default as Topper } from './components/Topper';
|
|
21
|
+
export { default as Tweet } from './components/Tweet';
|
|
22
|
+
export { default as Video } from './components/Video';
|
|
23
|
+
export { default as YoutubeVideo } from './components/YoutubeVideo';
|
|
18
24
|
export { List, ListItem, Link, Blockquote, LineBreak, HorizontalRule, Emphasis, Strong, Strikethrough, } from './components/RichText/BasicComponents';
|
|
19
|
-
export { default as Clip } from './components/Clip/template/component';
|
package/lib/index.js
CHANGED
|
@@ -3,43 +3,55 @@ 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.
|
|
7
|
-
var Body_1 = require("./components/Body");
|
|
8
|
-
Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
|
|
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.LiveBlogBody = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.ImageSet = exports.Heading = exports.Flourish = exports.Clip = exports.Byline = exports.Body = exports.BigNumber = exports.ArticleInfo = exports.ArticleBody = void 0;
|
|
9
7
|
var ArticleBody_1 = require("./components/ArticleBody");
|
|
10
8
|
Object.defineProperty(exports, "ArticleBody", { enumerable: true, get: function () { return __importDefault(ArticleBody_1).default; } });
|
|
11
|
-
var LiveBlogBody_1 = require("./components/LiveBlogBody");
|
|
12
|
-
Object.defineProperty(exports, "LiveBlogBody", { enumerable: true, get: function () { return __importDefault(LiveBlogBody_1).default; } });
|
|
13
|
-
var Topper_1 = require("./components/Topper");
|
|
14
|
-
Object.defineProperty(exports, "Topper", { enumerable: true, get: function () { return __importDefault(Topper_1).default; } });
|
|
15
9
|
var ArticleInfo_1 = require("./components/ArticleInfo");
|
|
16
10
|
Object.defineProperty(exports, "ArticleInfo", { enumerable: true, get: function () { return __importDefault(ArticleInfo_1).default; } });
|
|
11
|
+
var BigNumber_1 = require("./components/BigNumber");
|
|
12
|
+
Object.defineProperty(exports, "BigNumber", { enumerable: true, get: function () { return __importDefault(BigNumber_1).default; } });
|
|
13
|
+
var Body_1 = require("./components/Body");
|
|
14
|
+
Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
|
|
17
15
|
var Byline_1 = require("./components/Byline");
|
|
18
16
|
Object.defineProperty(exports, "Byline", { enumerable: true, get: function () { return __importDefault(Byline_1).default; } });
|
|
19
|
-
var
|
|
20
|
-
Object.defineProperty(exports, "
|
|
17
|
+
var component_1 = require("./components/Clip/template/component");
|
|
18
|
+
Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
|
|
19
|
+
var Flourish_1 = require("./components/Flourish");
|
|
20
|
+
Object.defineProperty(exports, "Flourish", { enumerable: true, get: function () { return __importDefault(Flourish_1).default; } });
|
|
21
|
+
var Heading_1 = require("./components/Heading");
|
|
22
|
+
Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(Heading_1).default; } });
|
|
21
23
|
var ImageSet_1 = require("./components/ImageSet");
|
|
22
24
|
Object.defineProperty(exports, "ImageSet", { enumerable: true, get: function () { return __importDefault(ImageSet_1).default; } });
|
|
23
25
|
var Layout_1 = require("./components/Layout");
|
|
24
26
|
Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });
|
|
25
27
|
Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return Layout_1.LayoutContainer; } });
|
|
26
28
|
Object.defineProperty(exports, "LayoutSlot", { enumerable: true, get: function () { return Layout_1.LayoutSlot; } });
|
|
29
|
+
var LiveBlogBody_1 = require("./components/LiveBlogBody");
|
|
30
|
+
Object.defineProperty(exports, "LiveBlogBody", { enumerable: true, get: function () { return __importDefault(LiveBlogBody_1).default; } });
|
|
31
|
+
var MainImage_1 = require("./components/MainImage");
|
|
32
|
+
Object.defineProperty(exports, "MainImage", { enumerable: true, get: function () { return __importDefault(MainImage_1).default; } });
|
|
33
|
+
var Paragraph_1 = require("./components/Paragraph");
|
|
34
|
+
Object.defineProperty(exports, "Paragraph", { enumerable: true, get: function () { return __importDefault(Paragraph_1).default; } });
|
|
35
|
+
var PodcastBody_1 = require("./components/PodcastBody");
|
|
36
|
+
Object.defineProperty(exports, "PodcastBody", { enumerable: true, get: function () { return __importDefault(PodcastBody_1).default; } });
|
|
37
|
+
var index_1 = require("./components/Pullquote/index");
|
|
38
|
+
Object.defineProperty(exports, "Pullquote", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
|
|
27
39
|
var Recommended_1 = require("./components/Recommended");
|
|
28
40
|
Object.defineProperty(exports, "Recommended", { enumerable: true, get: function () { return __importDefault(Recommended_1).default; } });
|
|
29
41
|
var RichText_1 = require("./components/RichText");
|
|
30
42
|
Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return __importDefault(RichText_1).default; } });
|
|
31
|
-
var
|
|
32
|
-
Object.defineProperty(exports, "
|
|
33
|
-
var index_1 = require("./components/Pullquote/index");
|
|
34
|
-
Object.defineProperty(exports, "Pullquote", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
|
|
35
|
-
var Tweet_1 = require("./components/Tweet");
|
|
36
|
-
Object.defineProperty(exports, "Tweet", { enumerable: true, get: function () { return __importDefault(Tweet_1).default; } });
|
|
37
|
-
var Heading_1 = require("./components/Heading");
|
|
38
|
-
Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(Heading_1).default; } });
|
|
43
|
+
var Scrollytelling_1 = require("./components/Scrollytelling");
|
|
44
|
+
Object.defineProperty(exports, "ScrollyBlock", { enumerable: true, get: function () { return Scrollytelling_1.ScrollyBlock; } });
|
|
39
45
|
var Table_1 = require("./components/Table");
|
|
40
46
|
Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
|
|
41
|
-
var
|
|
42
|
-
Object.defineProperty(exports, "
|
|
47
|
+
var Topper_1 = require("./components/Topper");
|
|
48
|
+
Object.defineProperty(exports, "Topper", { enumerable: true, get: function () { return __importDefault(Topper_1).default; } });
|
|
49
|
+
var Tweet_1 = require("./components/Tweet");
|
|
50
|
+
Object.defineProperty(exports, "Tweet", { enumerable: true, get: function () { return __importDefault(Tweet_1).default; } });
|
|
51
|
+
var Video_1 = require("./components/Video");
|
|
52
|
+
Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });
|
|
53
|
+
var YoutubeVideo_1 = require("./components/YoutubeVideo");
|
|
54
|
+
Object.defineProperty(exports, "YoutubeVideo", { enumerable: true, get: function () { return __importDefault(YoutubeVideo_1).default; } });
|
|
43
55
|
var BasicComponents_1 = require("./components/RichText/BasicComponents");
|
|
44
56
|
Object.defineProperty(exports, "List", { enumerable: true, get: function () { return BasicComponents_1.List; } });
|
|
45
57
|
Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return BasicComponents_1.ListItem; } });
|
|
@@ -50,6 +62,4 @@ Object.defineProperty(exports, "HorizontalRule", { enumerable: true, get: functi
|
|
|
50
62
|
Object.defineProperty(exports, "Emphasis", { enumerable: true, get: function () { return BasicComponents_1.Emphasis; } });
|
|
51
63
|
Object.defineProperty(exports, "Strong", { enumerable: true, get: function () { return BasicComponents_1.Strong; } });
|
|
52
64
|
Object.defineProperty(exports, "Strikethrough", { enumerable: true, get: function () { return BasicComponents_1.Strikethrough; } });
|
|
53
|
-
var component_1 = require("./components/Clip/template/component");
|
|
54
|
-
Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
|
|
55
65
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,
|
|
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,kEAAsE;AAA7D,kHAAA,OAAO,OAAQ;AACxB,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,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;AAChC,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/cp-content-pipeline-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@babel/preset-env": "^7.22.5",
|
|
17
17
|
"@babel/preset-react": "^7.22.5",
|
|
18
|
-
"@dotcom-tool-kit/npm": "^3.1.
|
|
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": "^
|
|
21
|
-
"@financial-times/cp-content-pipeline-schema": "^1.
|
|
20
|
+
"@financial-times/cp-content-pipeline-client": "^2.0.0",
|
|
21
|
+
"@financial-times/cp-content-pipeline-schema": "^1.4.0",
|
|
22
22
|
"@financial-times/n-scrollytelling-image": "^1.1.0",
|
|
23
23
|
"@financial-times/o-colors": "^6.6.2",
|
|
24
24
|
"@financial-times/o-expander": "^6.2.6",
|
|
@@ -64,6 +64,6 @@
|
|
|
64
64
|
"react": "16 || 17 || 18"
|
|
65
65
|
},
|
|
66
66
|
"engines": {
|
|
67
|
-
"node": "
|
|
67
|
+
"node": "18.x"
|
|
68
68
|
}
|
|
69
|
-
}
|
|
69
|
+
}
|
|
@@ -142,7 +142,7 @@ export function FallbackImage({
|
|
|
142
142
|
return (
|
|
143
143
|
<img
|
|
144
144
|
src={
|
|
145
|
-
hasSourceSet(image) ? image.sourceSet[0].url : image
|
|
145
|
+
hasSourceSet(image) ? image.sourceSet[0].url : image?.url ?? undefined
|
|
146
146
|
}
|
|
147
147
|
srcSet={
|
|
148
148
|
hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined
|
|
@@ -39,31 +39,33 @@ export default function Tags({
|
|
|
39
39
|
{isPackage && brandConcept?.id ? (
|
|
40
40
|
<ConceptLabel {...brandConcept} />
|
|
41
41
|
) : (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
!isPackage && (
|
|
43
|
+
<div className="topper__primary-theme">
|
|
44
|
+
{isOpinion && (
|
|
45
|
+
<span
|
|
46
|
+
className="o-topper__opinion-genre"
|
|
47
|
+
aria-label="opinion article"
|
|
48
|
+
>
|
|
49
|
+
{`Opinion `}
|
|
50
|
+
</span>
|
|
51
|
+
)}
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
{brandConcept && <BrandConcept {...brandConcept} />}
|
|
53
54
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
55
|
+
{concept && (
|
|
56
|
+
<span>
|
|
57
|
+
<ConceptLabel {...concept} />
|
|
58
|
+
</span>
|
|
59
|
+
)}
|
|
60
|
+
{followButtonCondition && (
|
|
61
|
+
<FollowButtonSlot
|
|
62
|
+
conceptId={concept.id}
|
|
63
|
+
conceptName={concept.prefLabel}
|
|
64
|
+
variant={followButtonVariant ?? 'standard'}
|
|
65
|
+
/>
|
|
66
|
+
)}
|
|
67
|
+
</div>
|
|
68
|
+
)
|
|
67
69
|
)}
|
|
68
70
|
</div>
|
|
69
71
|
)
|
|
@@ -11,7 +11,6 @@ type WrapperProps = {
|
|
|
11
11
|
|
|
12
12
|
export default function Wrapper({
|
|
13
13
|
children,
|
|
14
|
-
isPackage,
|
|
15
14
|
isBasic,
|
|
16
15
|
modifiers = [],
|
|
17
16
|
backgroundColor,
|
|
@@ -22,7 +21,6 @@ export default function Wrapper({
|
|
|
22
21
|
const wrapperClassnames = classnames({
|
|
23
22
|
'o-topper': true,
|
|
24
23
|
'article-topper': true,
|
|
25
|
-
'o-topper--package': isPackage,
|
|
26
24
|
[`o-topper--color-${backgroundColor}`]: Boolean(backgroundColor),
|
|
27
25
|
[`${modifierClassesString}`]: Boolean(modifierClassesString),
|
|
28
26
|
'o-topper--basic': isBasic,
|
|
@@ -23,14 +23,21 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
|
|
|
23
23
|
return null
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
const modifiers: string[] = []
|
|
27
|
-
|
|
28
|
-
'layout' in topper && topper.layout && modifiers.push(topper.layout)
|
|
29
|
-
'headshot' in topper && topper.headshot && modifiers.push('has-headshot')
|
|
30
|
-
topper.__typename === 'OpinionTopper' && modifiers.push('opinion')
|
|
31
26
|
const isPackage = content.__typename === 'ContentPackage'
|
|
32
27
|
const isLiveBlog = content.__typename === 'LiveBlogPackage'
|
|
33
28
|
const isBasic = topper.__typename === 'BasicTopper'
|
|
29
|
+
const isOpinion = topper.__typename === 'OpinionTopper'
|
|
30
|
+
const hasLayout = 'layout' in topper && topper.layout
|
|
31
|
+
const hasDesign = 'design' in topper && topper.design
|
|
32
|
+
const hasHeadshot = 'headshot' in topper && topper.headshot
|
|
33
|
+
|
|
34
|
+
const modifiers: string[] = []
|
|
35
|
+
|
|
36
|
+
isPackage && modifiers.push('package')
|
|
37
|
+
isPackage && hasDesign && modifiers.push(`package-${topper.design}`)
|
|
38
|
+
isOpinion && modifiers.push('opinion')
|
|
39
|
+
hasLayout && modifiers.push(topper.layout)
|
|
40
|
+
hasHeadshot && modifiers.push('has-headshot')
|
|
34
41
|
|
|
35
42
|
const getMostRecentPostPublishedDate = () => {
|
|
36
43
|
const defaultPublishDate = content.publishedDate
|
|
@@ -53,7 +60,6 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
|
|
|
53
60
|
>
|
|
54
61
|
<Wrapper
|
|
55
62
|
backgroundColor={topper.backgroundColour ?? undefined}
|
|
56
|
-
isPackage={isPackage}
|
|
57
63
|
isBasic={isBasic}
|
|
58
64
|
modifiers={modifiers}
|
|
59
65
|
>
|
|
@@ -82,7 +88,7 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
|
|
|
82
88
|
genreConcept={
|
|
83
89
|
('genreConcept' in topper && topper.genreConcept) || undefined
|
|
84
90
|
}
|
|
85
|
-
headshot={
|
|
91
|
+
headshot={hasHeadshot || undefined}
|
|
86
92
|
followButtonVariant={topper.followButtonVariant}
|
|
87
93
|
FollowButtonSlot={followButtonSlot}
|
|
88
94
|
/>
|
|
@@ -101,10 +107,8 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
|
|
|
101
107
|
/>
|
|
102
108
|
)}
|
|
103
109
|
|
|
104
|
-
{
|
|
105
|
-
|
|
106
|
-
)}
|
|
107
|
-
{topper.__typename === 'OpinionTopper' && topper.columnist && (
|
|
110
|
+
{hasHeadshot && <Headshot url={topper.headshot} />}
|
|
111
|
+
{isOpinion && topper.columnist && (
|
|
108
112
|
<Columnist
|
|
109
113
|
authorConcept={topper.columnist}
|
|
110
114
|
followButtonVariant={topper.followButtonVariant}
|
package/src/index.ts
CHANGED
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
export { default as Body } from './components/Body'
|
|
2
1
|
export { default as ArticleBody } from './components/ArticleBody'
|
|
3
|
-
export { default as LiveBlogBody } from './components/LiveBlogBody'
|
|
4
|
-
export { default as Topper } from './components/Topper'
|
|
5
2
|
export { default as ArticleInfo } from './components/ArticleInfo'
|
|
3
|
+
export { default as BigNumber } from './components/BigNumber'
|
|
4
|
+
export { default as Body } from './components/Body'
|
|
6
5
|
export { default as Byline } from './components/Byline'
|
|
7
|
-
export { default as
|
|
6
|
+
export { default as Clip } from './components/Clip/template/component'
|
|
7
|
+
export { default as Flourish } from './components/Flourish'
|
|
8
|
+
export { default as Heading } from './components/Heading'
|
|
8
9
|
export { default as ImageSet } from './components/ImageSet'
|
|
9
10
|
export { Layout, LayoutContainer, LayoutSlot } from './components/Layout'
|
|
11
|
+
export { default as LiveBlogBody } from './components/LiveBlogBody'
|
|
12
|
+
export { default as MainImage } from './components/MainImage'
|
|
13
|
+
export { default as Paragraph } from './components/Paragraph'
|
|
14
|
+
export { default as PodcastBody } from './components/PodcastBody'
|
|
15
|
+
export { default as Pullquote } from './components/Pullquote/index'
|
|
10
16
|
export { default as Recommended } from './components/Recommended'
|
|
11
17
|
export { default as RichText } from './components/RichText'
|
|
12
|
-
export {
|
|
13
|
-
export { default as Pullquote } from './components/Pullquote/index'
|
|
14
|
-
export { default as Tweet } from './components/Tweet'
|
|
15
|
-
export { default as Heading } from './components/Heading'
|
|
18
|
+
export { ScrollyBlock } from './components/Scrollytelling'
|
|
16
19
|
export { default as Table } from './components/Table'
|
|
17
|
-
export { default as
|
|
20
|
+
export { default as Topper } from './components/Topper'
|
|
21
|
+
export { default as Tweet } from './components/Tweet'
|
|
22
|
+
export { default as Video } from './components/Video'
|
|
23
|
+
export { default as YoutubeVideo } from './components/YoutubeVideo'
|
|
18
24
|
export {
|
|
19
25
|
List,
|
|
20
26
|
ListItem,
|
|
@@ -26,4 +32,3 @@ export {
|
|
|
26
32
|
Strong,
|
|
27
33
|
Strikethrough,
|
|
28
34
|
} from './components/RichText/BasicComponents'
|
|
29
|
-
export { default as Clip } from './components/Clip/template/component'
|