@financial-times/cp-content-pipeline-ui 2.0.6 → 3.0.1

package/CHANGELOG.md

@@ -363,6 +363,50 @@
     * @financial-times/cp-content-pipeline-client bumped from ^1.3.11 to ^1.3.12
     * @financial-times/cp-content-pipeline-schema bumped from ^1.3.8 to ^1.3.9
 
+## [3.0.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.0.0...cp-content-pipeline-ui-v3.0.1) (2023-09-28)
+
+
+### Bug Fixes
+
+* fix seek styling in clips ([afe8ff7](https://github.com/Financial-Times/cp-content-pipeline/commit/afe8ff7916acdc9e4885ca4e4d7b80b5de21fb34))
+* make progress bar shorter for mobile ([d1d33a7](https://github.com/Financial-Times/cp-content-pipeline/commit/d1d33a73dc8a776c7624bdb9df935eb9f07e012f))
+
+## [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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **ui:** drop Node 16 and update to Node 18
+
+### Features
+
+* **ui:** drop Node 16 and update to Node 18 ([d9faa2d](https://github.com/Financial-Times/cp-content-pipeline/commit/d9faa2ddaa2781996b5e24807b0db26225fca28f))
+
+
+### Bug Fixes
+
+* Add Video, YoutubeVideo and BigNumber to component index exports ([524b8d1](https://github.com/Financial-Times/cp-content-pipeline/commit/524b8d1e2c14e4f8f8fce0603b6ea9756ff28c76))
+* defend against an undefined image ([f8d8ab4](https://github.com/Financial-Times/cp-content-pipeline/commit/f8d8ab445f43ee69867a6fe37f3b985949a05589))
+* split text topper classes ([0dc270c](https://github.com/Financial-Times/cp-content-pipeline/commit/0dc270ca632d2609cb5cbeace9ea118f99685511))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^1.3.13 to ^2.0.0
+    * @financial-times/cp-content-pipeline-schema bumped from ^1.3.10 to ^1.4.0
+
+## [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)
+
+
+### Bug Fixes
+
+* align time to the center of the cursor and aligned to the icons ([9bc626a](https://github.com/Financial-Times/cp-content-pipeline/commit/9bc626a32aa8b976660a4e9c0fa35b1f334ab71e))
+* fit the video to its best ratio without pass the screen size ([6c15593](https://github.com/Financial-Times/cp-content-pipeline/commit/6c15593dbcd225c1ee5c297c6c7b07fd82733d39))
+* remove unnecessary fade transition ([9afae7c](https://github.com/Financial-Times/cp-content-pipeline/commit/9afae7ce8f8aeac6145e3ebdc02bafb556e07f5b))
+* temporary make all prop optional so to match used empty object ([82bb2cb](https://github.com/Financial-Times/cp-content-pipeline/commit/82bb2cb16cff4ea31a5105522eb16f80fab719d3))
+
 ## [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)
 
 

package/lib/components/ImageSet/index.js

@@ -56,7 +56,7 @@ function Sources({ images, getBreakpoints }) {
 exports.Sources = Sources;
 // TODO should `fallback` be added to content-tree imageset?
 function FallbackImage({ image, imageType = 'image', picture, className, }) {
-    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 }));
+    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 }));
 }
 exports.FallbackImage = FallbackImage;
 function ImageSet(imageSet) {

package/lib/components/ImageSet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageSet/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageSet/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/Topper/Tags.js

@@ -10,12 +10,12 @@ function Tags({ __typename, isPackage, displayConcept, genreConcept, brandConcep
     const baseFollowButtonCondition = FollowButtonSlot && concept?.id;
     const additionalFollowButtonCondition = (isOpinion && !headshot) || !isOpinion;
     const followButtonCondition = baseFollowButtonCondition && additionalFollowButtonCondition;
-    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" },
+    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" },
         isOpinion && (react_1.default.createElement("span", { className: "o-topper__opinion-genre", "aria-label": "opinion article" }, `Opinion `)),
         brandConcept && react_1.default.createElement(BrandConcept, { ...brandConcept }),
         concept && (react_1.default.createElement("span", null,
             react_1.default.createElement(ConceptLabel, { ...concept }))),
-        followButtonCondition && (react_1.default.createElement(FollowButtonSlot, { conceptId: concept.id, conceptName: concept.prefLabel, variant: followButtonVariant ?? 'standard' }))))));
+        followButtonCondition && (react_1.default.createElement(FollowButtonSlot, { conceptId: concept.id, conceptName: concept.prefLabel, variant: followButtonVariant ?? 'standard' })))))));
 }
 exports.default = Tags;
 function getConcept(displayConcept, genreConcept) {

package/lib/components/Topper/Tags.js.map

@@ -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;AAlDD,uBAkDC;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"}
+{"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"}

package/lib/components/Topper/Wrapper.d.ts

@@ -6,5 +6,5 @@ type WrapperProps = {
     modifiers: string[];
     backgroundColor?: string;
 };
-export default function Wrapper({ children, isPackage, isBasic, modifiers, backgroundColor, }: WrapperProps): React.JSX.Element;
+export default function Wrapper({ children, isBasic, modifiers, backgroundColor, }: WrapperProps): React.JSX.Element;
 export {};

package/lib/components/Topper/Wrapper.js

@@ -5,13 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-function Wrapper({ children, isPackage, isBasic, modifiers = [], backgroundColor, }) {
+function Wrapper({ children, isBasic, modifiers = [], backgroundColor, }) {
     const modifierClasses = modifiers.map((modifier) => `o-topper--${modifier}`);
     const modifierClassesString = modifierClasses.toString().replace(/,/g, ' ');
     const wrapperClassnames = (0, classnames_1.default)({
         'o-topper': true,
         'article-topper': true,
-        'o-topper--package': isPackage,
         [`o-topper--color-${backgroundColor}`]: Boolean(backgroundColor),
         [`${modifierClassesString}`]: Boolean(modifierClassesString),
         'o-topper--basic': isBasic,

package/lib/components/Topper/Wrapper.js.map

@@ -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,SAAS,EACT,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,mBAAmB,EAAE,SAAS;QAC9B,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;AApBD,0BAoBC"}
+{"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"}

package/lib/components/Topper/index.js

@@ -18,13 +18,19 @@ function Topper({ content, followButtonSlot }) {
     if (!topper) {
         return null;
     }
-    const modifiers = [];
-    'layout' in topper && topper.layout && modifiers.push(topper.layout);
-    'headshot' in topper && topper.headshot && modifiers.push('has-headshot');
-    topper.__typename === 'OpinionTopper' && modifiers.push('opinion');
     const isPackage = content.__typename === 'ContentPackage';
     const isLiveBlog = content.__typename === 'LiveBlogPackage';
     const isBasic = topper.__typename === 'BasicTopper';
+    const isOpinion = topper.__typename === 'OpinionTopper';
+    const hasLayout = 'layout' in topper && topper.layout;
+    const hasDesign = 'design' in topper && topper.design;
+    const hasHeadshot = 'headshot' in topper && topper.headshot;
+    const modifiers = [];
+    isPackage && modifiers.push('package');
+    isPackage && hasDesign && modifiers.push(`package-${topper.design}`);
+    isOpinion && modifiers.push('opinion');
+    hasLayout && modifiers.push(topper.layout);
+    hasHeadshot && modifiers.push('has-headshot');
     const getMostRecentPostPublishedDate = () => {
         const defaultPublishDate = content.publishedDate;
         if (isLiveBlog) {
@@ -38,18 +44,18 @@ function Topper({ content, followButtonSlot }) {
             'article-topper': true,
             'pinned-post__topper--no-image': isLiveBlog,
         }) },
-        react_1.default.createElement(Wrapper_1.default, { backgroundColor: topper.backgroundColour ?? undefined, isPackage: isPackage, isBasic: isBasic, modifiers: modifiers },
+        react_1.default.createElement(Wrapper_1.default, { backgroundColor: topper.backgroundColour ?? undefined, isBasic: isBasic, modifiers: modifiers },
             react_1.default.createElement("div", { className: (0, classnames_1.default)('o-topper__content', {
                     'o-topper__content--text-shadow': topper.textShadow,
                     'o-topper__content--background-box': topper.backgroundBox,
                 }), id: "o-topper" },
                 isLiveBlog ? (react_1.default.createElement("div", { className: "o-topper__tags" },
-                    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: ('headshot' in topper && topper.headshot) || undefined, followButtonVariant: topper.followButtonVariant, FollowButtonSlot: followButtonSlot })),
+                    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 })),
                 react_1.default.createElement(Headline_1.default, { headline: topper.headline, isLargeHeadline: ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
                         undefined }),
                 topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source })),
-                'headshot' in topper && topper.headshot && (react_1.default.createElement(Headshot_1.default, { url: topper.headshot })),
-                topper.__typename === 'OpinionTopper' && topper.columnist && (react_1.default.createElement(Columnist_1.default, { authorConcept: topper.columnist, followButtonVariant: topper.followButtonVariant, followButtonSlot: followButtonSlot }))),
+                hasHeadshot && react_1.default.createElement(Headshot_1.default, { url: topper.headshot }),
+                isOpinion && topper.columnist && (react_1.default.createElement(Columnist_1.default, { authorConcept: topper.columnist, followButtonVariant: topper.followButtonVariant, followButtonSlot: followButtonSlot }))),
             react_1.default.createElement("div", { className: "o-topper__background" }),
             'images' in topper && react_1.default.createElement(Picture_1.default, { topper: topper }))));
 }

package/lib/components/Topper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -1,19 +1,24 @@
-export { default as Body } from './components/Body';
 export { default as ArticleBody } from './components/ArticleBody';
-export { default as LiveBlogBody } from './components/LiveBlogBody';
-export { default as Topper } from './components/Topper';
 export { default as ArticleInfo } from './components/ArticleInfo';
+export { default as BigNumber } from './components/BigNumber';
+export { default as Body } from './components/Body';
 export { default as Byline } from './components/Byline';
-export { default as MainImage } from './components/MainImage';
+export { default as Clip } from './components/Clip/template/component';
+export { default as Flourish } from './components/Flourish';
+export { default as Heading } from './components/Heading';
 export { default as ImageSet } from './components/ImageSet';
 export { Layout, LayoutContainer, LayoutSlot } from './components/Layout';
+export { default as LiveBlogBody } from './components/LiveBlogBody';
+export { default as MainImage } from './components/MainImage';
+export { default as Paragraph } from './components/Paragraph';
+export { default as PodcastBody } from './components/PodcastBody';
+export { default as Pullquote } from './components/Pullquote/index';
 export { default as Recommended } from './components/Recommended';
 export { default as RichText } from './components/RichText';
-export { default as Flourish } from './components/Flourish';
-export { default as Pullquote } from './components/Pullquote/index';
-export { default as Tweet } from './components/Tweet';
-export { default as Heading } from './components/Heading';
+export { ScrollyBlock } from './components/Scrollytelling';
 export { default as Table } from './components/Table';
-export { default as Paragraph } from './components/Paragraph';
+export { default as Topper } from './components/Topper';
+export { default as Tweet } from './components/Tweet';
+export { default as Video } from './components/Video';
+export { default as YoutubeVideo } from './components/YoutubeVideo';
 export { List, ListItem, Link, Blockquote, LineBreak, HorizontalRule, Emphasis, Strong, Strikethrough, } from './components/RichText/BasicComponents';
-export { default as Clip } from './components/Clip/template/component';

package/lib/index.js

@@ -3,43 +3,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clip = exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.Paragraph = exports.Table = exports.Heading = exports.Tweet = exports.Pullquote = exports.Flourish = exports.RichText = exports.Recommended = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.ImageSet = exports.MainImage = exports.Byline = exports.ArticleInfo = exports.Topper = exports.LiveBlogBody = exports.ArticleBody = exports.Body = void 0;
-var Body_1 = require("./components/Body");
-Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
+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;
 var ArticleBody_1 = require("./components/ArticleBody");
 Object.defineProperty(exports, "ArticleBody", { enumerable: true, get: function () { return __importDefault(ArticleBody_1).default; } });
-var LiveBlogBody_1 = require("./components/LiveBlogBody");
-Object.defineProperty(exports, "LiveBlogBody", { enumerable: true, get: function () { return __importDefault(LiveBlogBody_1).default; } });
-var Topper_1 = require("./components/Topper");
-Object.defineProperty(exports, "Topper", { enumerable: true, get: function () { return __importDefault(Topper_1).default; } });
 var ArticleInfo_1 = require("./components/ArticleInfo");
 Object.defineProperty(exports, "ArticleInfo", { enumerable: true, get: function () { return __importDefault(ArticleInfo_1).default; } });
+var BigNumber_1 = require("./components/BigNumber");
+Object.defineProperty(exports, "BigNumber", { enumerable: true, get: function () { return __importDefault(BigNumber_1).default; } });
+var Body_1 = require("./components/Body");
+Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
 var Byline_1 = require("./components/Byline");
 Object.defineProperty(exports, "Byline", { enumerable: true, get: function () { return __importDefault(Byline_1).default; } });
-var MainImage_1 = require("./components/MainImage");
-Object.defineProperty(exports, "MainImage", { enumerable: true, get: function () { return __importDefault(MainImage_1).default; } });
+var component_1 = require("./components/Clip/template/component");
+Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
+var Flourish_1 = require("./components/Flourish");
+Object.defineProperty(exports, "Flourish", { enumerable: true, get: function () { return __importDefault(Flourish_1).default; } });
+var Heading_1 = require("./components/Heading");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(Heading_1).default; } });
 var ImageSet_1 = require("./components/ImageSet");
 Object.defineProperty(exports, "ImageSet", { enumerable: true, get: function () { return __importDefault(ImageSet_1).default; } });
 var Layout_1 = require("./components/Layout");
 Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });
 Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return Layout_1.LayoutContainer; } });
 Object.defineProperty(exports, "LayoutSlot", { enumerable: true, get: function () { return Layout_1.LayoutSlot; } });
+var LiveBlogBody_1 = require("./components/LiveBlogBody");
+Object.defineProperty(exports, "LiveBlogBody", { enumerable: true, get: function () { return __importDefault(LiveBlogBody_1).default; } });
+var MainImage_1 = require("./components/MainImage");
+Object.defineProperty(exports, "MainImage", { enumerable: true, get: function () { return __importDefault(MainImage_1).default; } });
+var Paragraph_1 = require("./components/Paragraph");
+Object.defineProperty(exports, "Paragraph", { enumerable: true, get: function () { return __importDefault(Paragraph_1).default; } });
+var PodcastBody_1 = require("./components/PodcastBody");
+Object.defineProperty(exports, "PodcastBody", { enumerable: true, get: function () { return __importDefault(PodcastBody_1).default; } });
+var index_1 = require("./components/Pullquote/index");
+Object.defineProperty(exports, "Pullquote", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
 var Recommended_1 = require("./components/Recommended");
 Object.defineProperty(exports, "Recommended", { enumerable: true, get: function () { return __importDefault(Recommended_1).default; } });
 var RichText_1 = require("./components/RichText");
 Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return __importDefault(RichText_1).default; } });
-var Flourish_1 = require("./components/Flourish");
-Object.defineProperty(exports, "Flourish", { enumerable: true, get: function () { return __importDefault(Flourish_1).default; } });
-var index_1 = require("./components/Pullquote/index");
-Object.defineProperty(exports, "Pullquote", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
-var Tweet_1 = require("./components/Tweet");
-Object.defineProperty(exports, "Tweet", { enumerable: true, get: function () { return __importDefault(Tweet_1).default; } });
-var Heading_1 = require("./components/Heading");
-Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(Heading_1).default; } });
+var Scrollytelling_1 = require("./components/Scrollytelling");
+Object.defineProperty(exports, "ScrollyBlock", { enumerable: true, get: function () { return Scrollytelling_1.ScrollyBlock; } });
 var Table_1 = require("./components/Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
-var Paragraph_1 = require("./components/Paragraph");
-Object.defineProperty(exports, "Paragraph", { enumerable: true, get: function () { return __importDefault(Paragraph_1).default; } });
+var Topper_1 = require("./components/Topper");
+Object.defineProperty(exports, "Topper", { enumerable: true, get: function () { return __importDefault(Topper_1).default; } });
+var Tweet_1 = require("./components/Tweet");
+Object.defineProperty(exports, "Tweet", { enumerable: true, get: function () { return __importDefault(Tweet_1).default; } });
+var Video_1 = require("./components/Video");
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });
+var YoutubeVideo_1 = require("./components/YoutubeVideo");
+Object.defineProperty(exports, "YoutubeVideo", { enumerable: true, get: function () { return __importDefault(YoutubeVideo_1).default; } });
 var BasicComponents_1 = require("./components/RichText/BasicComponents");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return BasicComponents_1.List; } });
 Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return BasicComponents_1.ListItem; } });
@@ -50,6 +62,4 @@ Object.defineProperty(exports, "HorizontalRule", { enumerable: true, get: functi
 Object.defineProperty(exports, "Emphasis", { enumerable: true, get: function () { return BasicComponents_1.Emphasis; } });
 Object.defineProperty(exports, "Strong", { enumerable: true, get: function () { return BasicComponents_1.Strong; } });
 Object.defineProperty(exports, "Strikethrough", { enumerable: true, get: function () { return BasicComponents_1.Strikethrough; } });
-var component_1 = require("./components/Clip/template/component");
-Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,sDAAmE;AAA1D,mHAAA,OAAO,OAAa;AAC7B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,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;AAEf,kEAAsE;AAA7D,kHAAA,OAAO,OAAQ"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "2.0.5",
+  "version": "3.0.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -15,10 +15,10 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
-    "@dotcom-tool-kit/npm": "^3.1.0",
+    "@dotcom-tool-kit/npm": "^3.1.4",
     "@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
-    "@financial-times/cp-content-pipeline-client": "^1.3.13",
-    "@financial-times/cp-content-pipeline-schema": "^1.3.10",
+    "@financial-times/cp-content-pipeline-client": "^2.0.0",
+    "@financial-times/cp-content-pipeline-schema": "^1.4.0",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-expander": "^6.2.6",
@@ -64,6 +64,6 @@
     "react": "16 || 17 || 18"
   },
   "engines": {
-    "node": "16.x"
+    "node": "18.x"
   }
-}
+}

package/src/components/Clip/client/main.scss

@@ -183,7 +183,7 @@
 
 	.video-meta-info {
 		display: flex;
-		margin-top: oSpacingByName('s1');
+		margin-top: 6px;
 		width: min-content;
 		min-width: 100%;
 		.cp-clip__credit {

package/src/components/Clip/client/progressBar.scss

@@ -1,7 +1,9 @@
 .cp-clip__video-progress-bar {
   pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  // Affects the clickable area of the progress bar
   padding-top: 20px;
-  margin-top: -20px;
   background: none;
   width: 100%;
   z-index: 2;
@@ -13,10 +15,14 @@
   .cp-clip__progress-main-bar {
     display: block;
     width: 100%;
-    height: 4px;
+    height: 3px;
     transition: margin 0.1s linear, height 0.1s linear;
-
     background-color: oColorsByName('ft-grey');
+    
+    @include oGridRespondTo(L) {
+      height: 4px;
+    }
+
     &.cp-clip__progress-enlarged {
       height: 8px;
       margin-top: -4px;
@@ -31,28 +37,21 @@
 
       }
       .cp-clip__progress-time {
+        $progress-time-left-offset: -12px;
+        $progress-time-height-offset: -33px;
         display: inline-block;
-        transform: translate(-12px, -26px);
+        transform: translate($progress-time-left-offset, calc($progress-time-height-offset - 2px));
         color: oColorsByName('white');
         font-size: 14px;
         font-family: MetricWeb;
+        @include oGridRespondTo(L) {
+          transform: translate($progress-time-left-offset, $progress-time-height-offset);
+        }
         &.cp-clip__time-text-fixed-left {
-          position: absolute;
           left: calc(10% - 20px);
-          top: -15px;
-          transform: none;
-          @include oGridRespondTo(L) {
-            top: -12px;
-          }
         }
         &.cp-clip__time-text-fixed-right {
-          position: absolute;
           right: calc(10% - 15px);
-          top: -15px;
-          transform: none;
-          @include oGridRespondTo(L) {
-            top: -12px;
-          }
         }
       }
     }

package/src/components/ImageSet/index.tsx

@@ -142,7 +142,7 @@ export function FallbackImage({
   return (
     <img
       src={
-        hasSourceSet(image) ? image.sourceSet[0].url : image.url ?? undefined
+        hasSourceSet(image) ? image.sourceSet[0].url : image?.url ?? undefined
       }
       srcSet={
         hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined

package/src/components/Topper/Tags.tsx

@@ -39,31 +39,33 @@ export default function Tags({
       {isPackage && brandConcept?.id ? (
         <ConceptLabel {...brandConcept} />
       ) : (
-        <div className="topper__primary-theme">
-          {isOpinion && (
-            <span
-              className="o-topper__opinion-genre"
-              aria-label="opinion article"
-            >
-              {`Opinion `}
-            </span>
-          )}
+        !isPackage && (
+          <div className="topper__primary-theme">
+            {isOpinion && (
+              <span
+                className="o-topper__opinion-genre"
+                aria-label="opinion article"
+              >
+                {`Opinion `}
+              </span>
+            )}
 
-          {brandConcept && <BrandConcept {...brandConcept} />}
+            {brandConcept && <BrandConcept {...brandConcept} />}
 
-          {concept && (
-            <span>
-              <ConceptLabel {...concept} />
-            </span>
-          )}
-          {followButtonCondition && (
-            <FollowButtonSlot
-              conceptId={concept.id}
-              conceptName={concept.prefLabel}
-              variant={followButtonVariant ?? 'standard'}
-            />
-          )}
-        </div>
+            {concept && (
+              <span>
+                <ConceptLabel {...concept} />
+              </span>
+            )}
+            {followButtonCondition && (
+              <FollowButtonSlot
+                conceptId={concept.id}
+                conceptName={concept.prefLabel}
+                variant={followButtonVariant ?? 'standard'}
+              />
+            )}
+          </div>
+        )
       )}
     </div>
   )

package/src/components/Topper/Wrapper.tsx

@@ -11,7 +11,6 @@ type WrapperProps = {
 
 export default function Wrapper({
   children,
-  isPackage,
   isBasic,
   modifiers = [],
   backgroundColor,
@@ -22,7 +21,6 @@ export default function Wrapper({
   const wrapperClassnames = classnames({
     'o-topper': true,
     'article-topper': true,
-    'o-topper--package': isPackage,
     [`o-topper--color-${backgroundColor}`]: Boolean(backgroundColor),
     [`${modifierClassesString}`]: Boolean(modifierClassesString),
     'o-topper--basic': isBasic,

package/src/components/Topper/index.tsx

@@ -23,14 +23,21 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
     return null
   }
 
-  const modifiers: string[] = []
-
-  'layout' in topper && topper.layout && modifiers.push(topper.layout)
-  'headshot' in topper && topper.headshot && modifiers.push('has-headshot')
-  topper.__typename === 'OpinionTopper' && modifiers.push('opinion')
   const isPackage = content.__typename === 'ContentPackage'
   const isLiveBlog = content.__typename === 'LiveBlogPackage'
   const isBasic = topper.__typename === 'BasicTopper'
+  const isOpinion = topper.__typename === 'OpinionTopper'
+  const hasLayout = 'layout' in topper && topper.layout
+  const hasDesign = 'design' in topper && topper.design
+  const hasHeadshot = 'headshot' in topper && topper.headshot
+
+  const modifiers: string[] = []
+
+  isPackage && modifiers.push('package')
+  isPackage && hasDesign && modifiers.push(`package-${topper.design}`)
+  isOpinion && modifiers.push('opinion')
+  hasLayout && modifiers.push(topper.layout)
+  hasHeadshot && modifiers.push('has-headshot')
 
   const getMostRecentPostPublishedDate = () => {
     const defaultPublishDate = content.publishedDate
@@ -53,7 +60,6 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
     >
       <Wrapper
         backgroundColor={topper.backgroundColour ?? undefined}
-        isPackage={isPackage}
         isBasic={isBasic}
         modifiers={modifiers}
       >
@@ -82,7 +88,7 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
               genreConcept={
                 ('genreConcept' in topper && topper.genreConcept) || undefined
               }
-              headshot={('headshot' in topper && topper.headshot) || undefined}
+              headshot={hasHeadshot || undefined}
               followButtonVariant={topper.followButtonVariant}
               FollowButtonSlot={followButtonSlot}
             />
@@ -101,10 +107,8 @@ export default function Topper({ content, followButtonSlot }: TopperProps) {
             />
           )}
 
-          {'headshot' in topper && topper.headshot && (
-            <Headshot url={topper.headshot} />
-          )}
-          {topper.__typename === 'OpinionTopper' && topper.columnist && (
+          {hasHeadshot && <Headshot url={topper.headshot} />}
+          {isOpinion && topper.columnist && (
             <Columnist
               authorConcept={topper.columnist}
               followButtonVariant={topper.followButtonVariant}