@financial-times/cp-content-pipeline-ui 9.11.0 → 9.12.0

package/CHANGELOG.md

@@ -574,6 +574,26 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
     * @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
 
+## [9.12.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.11.0...cp-content-pipeline-ui-v9.12.0) (2025-11-21)
+
+
+### Features
+
+* anchor links in clips ([f753082](https://github.com/Financial-Times/cp-content-pipeline/commit/f753082b61b1e5aa989cd1db901546eeee71fe83))
+
+
+### Bug Fixes
+
+* avoid fetching teaser data from RecommendedList resolver ([54bc53f](https://github.com/Financial-Times/cp-content-pipeline/commit/54bc53f9a40446667a9f93b85d710cd6a943157d))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^4.20.0 to ^4.20.1
+    * @financial-times/cp-content-pipeline-schema bumped from ^3.19.0 to ^3.20.0
+
 ## [9.11.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.10.0...cp-content-pipeline-ui-v9.11.0) (2025-11-11)
 
 

package/lib/components/content-tree/Clip/components/ClipTag.d.ts

@@ -21,6 +21,7 @@ interface ClipTagProps {
     caption?: string;
     preload?: string;
     systemTitle?: string;
+    fragmentIdentifier?: string;
 }
 export declare const ClipTag: React.FC<ClipTagProps>;
 export {};

package/lib/components/content-tree/Clip/components/ClipTag.js

@@ -7,7 +7,7 @@ exports.ClipTag = void 0;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 const FixedAspectRatio_1 = require("../../../FixedAspectRatio/FixedAspectRatio");
-const ClipTag = ({ id, dataLayout, description, poster, autoplay, noAudio, loop, muted, clip, credits, caption, accessibility, preload, noDescription = false, noInfoBox = false, noCaption = false, maxClipWidth = 0, dataTrackable, systemTitle, }) => {
+const ClipTag = ({ id, dataLayout, description, poster, autoplay, noAudio, loop, muted, clip, credits, caption, accessibility, preload, noDescription = false, noInfoBox = false, noCaption = false, maxClipWidth = 0, dataTrackable, systemTitle, fragmentIdentifier, }) => {
     const { pixelWidth, pixelHeight } = clip?.dataSource?.[0]
         ? clip.dataSource[0]
         : { pixelWidth: 0, pixelHeight: 0 };
@@ -33,7 +33,7 @@ const ClipTag = ({ id, dataLayout, description, poster, autoplay, noAudio, loop,
         return 0;
     };
     const lastVideoIndex = getLastVideoIndex();
-    return (react_1.default.createElement("div", { "data-cp-clip-layout": dataLayout, "data-cp-clip-poster": poster, "data-cp-clip-autoplay": autoplay, "data-cp-clip-no-audio": noAudio, "data-cp-clip-no-description": noDescription, "data-cp-clip-caption": caption, "data-cp-clip-no-info-box": noInfoBox, "data-cp-clip-no-caption": noCaption, "data-cp-clip-closed-caption": Boolean(accessibility?.captions?.[0]?.url), "data-cp-clip-loop": loop, className: "cp-clip", "data-trackable": dataTrackable, "data-o-component": "cp-clip", "data-cp-clip-id": id, "data-cp-clip-system-title": systemTitle },
+    return (react_1.default.createElement("div", { "data-cp-clip-layout": dataLayout, "data-cp-clip-poster": poster, "data-cp-clip-autoplay": autoplay, "data-cp-clip-no-audio": noAudio, "data-cp-clip-no-description": noDescription, "data-cp-clip-caption": caption, "data-cp-clip-no-info-box": noInfoBox, "data-cp-clip-no-caption": noCaption, "data-cp-clip-closed-caption": Boolean(accessibility?.captions?.[0]?.url), "data-cp-clip-loop": loop, className: "cp-clip", "data-trackable": dataTrackable, "data-o-component": "cp-clip", "data-cp-clip-id": id, "data-cp-clip-system-title": systemTitle, id: fragmentIdentifier },
         !noInfoBox && react_1.default.createElement(index_1.VideoInfoBox, null),
         react_1.default.createElement("div", { className: "cp-clip__video-container" },
             react_1.default.createElement(FixedAspectRatio_1.FixedAspectRatio, { width: pixelWidth, height: pixelHeight, element: "video", className: "cp-clip__video", controls: true, controlsList: "nodownload noremoteplayback noplaybackrate", disablePictureInPicture: true, disableRemotePlayback: true, playsInline: true, muted: muted, loop: loop, poster: poster, preload: preload, id: `clip-${id}`, crossOrigin: "anonymous" },

package/lib/components/content-tree/Clip/components/ClipTag.js.map

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

package/lib/components/content-tree/Clip/template/component.js

@@ -40,7 +40,7 @@ const ClipComponent = ({ content, preset = 'full-player', preload = 'auto', maxC
     }
     return (react_1.default.createElement(components_1.ContentLayout, { dataLayout: content.dataLayout },
         react_1.default.createElement(components_1.Container, { dataLayout: content.dataLayout },
-            react_1.default.createElement(components_1.ClipTag, { id: id, dataLayout: content.dataLayout, description: content.description ?? '', poster: posterAttribute, autoplay: content.autoplay, noAudio: noAudio, loop: content.loop, muted: content.muted, clip: clip, credits: content.credits ?? '', caption: content.caption ?? '', systemTitle: systemTitle, accessibility: accessibility, preload: preload, dataTrackable: "next-article-cp-clip", maxClipWidth: maxClipWidth }))));
+            react_1.default.createElement(components_1.ClipTag, { id: id, dataLayout: content.dataLayout, description: content.description ?? '', poster: posterAttribute, autoplay: content.autoplay, noAudio: noAudio, loop: content.loop, muted: content.muted, clip: clip, credits: content.credits ?? '', caption: content.caption ?? '', systemTitle: systemTitle, accessibility: accessibility, preload: preload, dataTrackable: "next-article-cp-clip", maxClipWidth: maxClipWidth, fragmentIdentifier: content.fragmentIdentifier ?? '' }))));
 };
 exports.default = ClipComponent;
 //# sourceMappingURL=component.js.map

package/lib/components/content-tree/Clip/template/component.js.map

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

package/lib/components/content-tree/RecommendedList/index.js

@@ -6,18 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 //HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
 const x_teaser_1 = require("@financial-times/x-teaser");
-const RecommendedList = ({ content: { heading, teasers }, }) => {
-    if (!teasers || teasers.length === 0) {
+const RecommendedList = ({ content }) => {
+    const { heading, children } = content;
+    if (!children || children.length === 0) {
         return null;
     }
     return (react_1.default.createElement("aside", { "aria-labelledby": "aside-label", className: "n-content-recommended-list", "data-component": "recommended-list" },
         react_1.default.createElement("p", { className: "n-content-recommended-list__title o3-type-title-lg" }, heading),
-        react_1.default.createElement("div", { className: "n-content-recommended-list__teasers" }, teasers.map((teaser, index) => (react_1.default.createElement(x_teaser_1.Teaser, { key: teaser?.id || index, modifiers: ['stacked'], ...x_teaser_1.presets.SmallHeavy, ...teaser, metaPrefixText: 'By', metaLink: {
-                prefLabel: teaser?.clientName,
+        react_1.default.createElement("div", { className: "n-content-recommended-list__teasers" }, children.map((child, index) => (react_1.default.createElement(x_teaser_1.Teaser, { key: child?.id || index, modifiers: ['stacked'], ...x_teaser_1.presets.SmallHeavy, ...child.teaser, metaPrefixText: 'By', metaLink: {
+                prefLabel: child.teaser?.clientName,
                 // clientName is a free form text field. Currently, there is no way to map it to an organisation
                 // from the annotations. For now, we're linking it to the article url.
                 // A property like isSponsoredBy could be added in future to support this properly.
-                url: teaser?.url,
+                url: child.teaser?.url,
             } }))))));
 };
 exports.default = RecommendedList;

package/lib/components/content-tree/RecommendedList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/RecommendedList/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,wDAA2D;AAW3D,MAAM,eAAe,GAAmC,CAAC,EACvD,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAC9B,EAAE,EAAE;IACH,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,4DACkB,aAAa,EAC7B,SAAS,EAAC,4BAA4B,oBACvB,kBAAkB;QAEjC,qCAAG,SAAS,EAAC,oDAAoD,IAC9D,OAAO,CACN;QACJ,uCAAK,SAAS,EAAC,qCAAqC,IACjD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,8BAAC,iBAAM,IACL,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,KAAK,EACxB,SAAS,EAAE,CAAC,SAAS,CAAC,KAClB,kBAAO,CAAC,UAAU,KAClB,MAAM,EACV,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE;gBACR,SAAS,EAAE,MAAM,EAAE,UAAU;gBAC7B,gGAAgG;gBAChG,sEAAsE;gBACtE,mFAAmF;gBACnF,GAAG,EAAE,MAAM,EAAE,GAAG;aACjB,GACD,CACH,CAAC,CACE,CACA,CACT,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/RecommendedList/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,wDAA2D;AAW3D,MAAM,eAAe,GAAmC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACtE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IACrC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,4DACkB,aAAa,EAC7B,SAAS,EAAC,4BAA4B,oBACvB,kBAAkB;QAEjC,qCAAG,SAAS,EAAC,oDAAoD,IAC9D,OAAO,CACN;QACJ,uCAAK,SAAS,EAAC,qCAAqC,IACjD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,8BAAC,iBAAM,IACL,GAAG,EAAE,KAAK,EAAE,EAAE,IAAI,KAAK,EACvB,SAAS,EAAE,CAAC,SAAS,CAAC,KAClB,kBAAO,CAAC,UAAU,KAClB,KAAK,CAAC,MAAM,EAChB,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE;gBACR,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU;gBACnC,gGAAgG;gBAChG,sEAAsE;gBACtE,mFAAmF;gBACnF,GAAG,EAAE,KAAK,CAAC,MAAM,EAAE,GAAG;aACvB,GACD,CACH,CAAC,CACE,CACA,CACT,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,eAAe,CAAA"}

package/lib/components/content-tree/Workarounds.d.ts

@@ -83,6 +83,7 @@ interface ClipSetReferences {
     subtitle?: string;
     publishedDate?: string;
     clips?: Clip[];
+    fragmentIdentifier?: string | undefined;
 }
 export type ClipSet = PartialToMaybeDeep<ReadonlyArrays<(ContentTreeWorkarounds.OldClip | ContentTreeWorkarounds.ClipSet) & ClipSetReferences>>;
 export type RawImage = ContentTreeWorkarounds.RawImage & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "9.11.0",
+  "version": "9.12.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -16,8 +16,8 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@financial-times/content-tree": "github:financial-times/content-tree#3f77ec4",
-    "@financial-times/cp-content-pipeline-client": "^4.20.0",
-    "@financial-times/cp-content-pipeline-schema": "^3.19.0",
+    "@financial-times/cp-content-pipeline-client": "^4.20.1",
+    "@financial-times/cp-content-pipeline-schema": "^3.20.0",
     "@financial-times/cp-content-pipeline-styles": "^4.5.0",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",

package/src/components/content-tree/Clip/components/ClipTag.tsx

@@ -29,6 +29,7 @@ interface ClipTagProps {
   caption?: string
   preload?: string
   systemTitle?: string
+  fragmentIdentifier?: string //a unique identifier used to locate the component inside a page for features like scrolling to it
 }
 
 export const ClipTag: React.FC<ClipTagProps> = ({
@@ -51,6 +52,7 @@ export const ClipTag: React.FC<ClipTagProps> = ({
   maxClipWidth = 0,
   dataTrackable,
   systemTitle,
+  fragmentIdentifier,
 }) => {
   const { pixelWidth, pixelHeight } = clip?.dataSource?.[0]
     ? clip.dataSource[0]
@@ -104,6 +106,7 @@ export const ClipTag: React.FC<ClipTagProps> = ({
       data-o-component="cp-clip"
       data-cp-clip-id={id}
       data-cp-clip-system-title={systemTitle}
+      id={fragmentIdentifier}
     >
       {!noInfoBox && <VideoInfoBox />}
       <div className="cp-clip__video-container">

package/src/components/content-tree/Clip/template/component.tsx

@@ -109,6 +109,7 @@ const ClipComponent: React.FC<ClipProps> = ({
           preload={preload}
           dataTrackable="next-article-cp-clip"
           maxClipWidth={maxClipWidth}
+          fragmentIdentifier={content.fragmentIdentifier ?? ''}
         />
       </Container>
     </ContentLayout>

package/src/components/content-tree/Clip/test/__snapshots__/snapshot.spec.tsx.snap

@@ -17,6 +17,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
       data-o-component="cp-clip"
       data-cp-clip-id="localhost:8080/fakevideo.mpg"
       data-cp-clip-system-title=""
+      id=""
     >
       <div
         data-o-component="o-expander"
@@ -87,6 +88,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
       data-o-component="cp-clip"
       data-cp-clip-id="localhost:8080/fakevideo.mpg"
       data-cp-clip-system-title=""
+      id=""
     >
       <div
         data-o-component="o-expander"
@@ -188,6 +190,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
     data-o-component="cp-clip"
     data-cp-clip-id="localhost:8080/fakevideo.mpg"
     data-cp-clip-system-title=""
+    id=""
   >
     <div
       data-o-component="o-expander"
@@ -256,6 +259,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
     data-o-component="cp-clip"
     data-cp-clip-id="localhost:8080/fakevideo.mpg"
     data-cp-clip-system-title=""
+    id=""
   >
     <div
       data-o-component="o-expander"
@@ -361,6 +365,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
         data-o-component="cp-clip"
         data-cp-clip-id="localhost:8080/fakevideo.mpg"
         data-cp-clip-system-title=""
+        id=""
       >
         <div
           data-o-component="o-expander"
@@ -436,6 +441,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
         data-o-component="cp-clip"
         data-cp-clip-id="localhost:8080/fakevideo.mpg"
         data-cp-clip-system-title=""
+        id=""
       >
         <div
           data-o-component="o-expander"
@@ -544,6 +550,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
     data-o-component="cp-clip"
     data-cp-clip-id="84d7e1b0-e8b2-4ffc-a798-306f29dc9d52"
     data-cp-clip-system-title=""
+    id=""
   >
     <div
       data-o-component="o-expander"
@@ -655,6 +662,7 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
       data-o-component="cp-clip"
       data-cp-clip-id="localhost:8080/fakevideo.mpg"
       data-cp-clip-system-title=""
+      id=""
     >
       <div
         data-o-component="o-expander"

package/src/components/content-tree/RecommendedList/index.tsx

@@ -5,17 +5,16 @@ import { presets, Teaser } from '@financial-times/x-teaser'
 import { ContentProps } from '../../types'
 import type * as ComponentWorkarounds from '../Workarounds'
 
-// Renders a Recommended teaser component
+// Renders a Recommended teaser componentx
 // `<Teaser>` is imported from x-dash
 // https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
 
 interface RecommendedListProps
   extends ContentProps<ComponentWorkarounds.RecommendedList> {}
 
-const RecommendedList: React.FC<RecommendedListProps> = ({
-  content: { heading, teasers },
-}) => {
-  if (!teasers || teasers.length === 0) {
+const RecommendedList: React.FC<RecommendedListProps> = ({ content }) => {
+  const { heading, children } = content
+  if (!children || children.length === 0) {
     return null
   }
 
@@ -29,19 +28,19 @@ const RecommendedList: React.FC<RecommendedListProps> = ({
         {heading}
       </p>
       <div className="n-content-recommended-list__teasers">
-        {teasers.map((teaser, index) => (
+        {children.map((child, index) => (
           <Teaser
-            key={teaser?.id || index}
+            key={child?.id || index}
             modifiers={['stacked']}
             {...presets.SmallHeavy}
-            {...teaser}
+            {...child.teaser}
             metaPrefixText={'By'}
             metaLink={{
-              prefLabel: teaser?.clientName,
+              prefLabel: child.teaser?.clientName,
               // clientName is a free form text field. Currently, there is no way to map it to an organisation
               // from the annotations. For now, we're linking it to the article url.
               // A property like isSponsoredBy could be added in future to support this properly.
-              url: teaser?.url,
+              url: child.teaser?.url,
             }}
           />
         ))}

package/src/components/content-tree/Workarounds.ts

@@ -87,7 +87,7 @@ export type Teaser = PartialToMaybeDeep<
 >
 
 export type Recommended = PartialToMaybe<
-ContentTreeWorkarounds.Recommended & {
+  ContentTreeWorkarounds.Recommended & {
     teaser?: Teaser
   }
 >
@@ -95,11 +95,10 @@ ContentTreeWorkarounds.Recommended & {
 export type RecommendedList = PartialToMaybe<
   ReadonlyArrays<
     Omit<ContentTree.RecommendedList, 'children'> & {
-    teasers?: (Teaser | null)[]
-    children: Recommended[]
-  }
+      teasers?: (Teaser | null)[]
+      children: Recommended[]
+    }
   >
-
 >
 
 export type ImageSetPicture = PartialToMaybe<
@@ -181,6 +180,7 @@ interface ClipSetReferences {
   subtitle?: string
   publishedDate?: string
   clips?: Clip[]
+  fragmentIdentifier?: string | undefined
 }
 
 export type ClipSet = PartialToMaybeDeep<