@financial-times/cp-content-pipeline-ui 9.8.0 → 9.9.0

package/CHANGELOG.md

@@ -574,6 +574,27 @@
     * @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.9.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.8.0...cp-content-pipeline-ui-v9.9.0) (2025-11-04)
+
+
+### Features
+
+* accommodate new Premium label design ([47f5142](https://github.com/Financial-Times/cp-content-pipeline/commit/47f5142d0e65a5e0869d572f91339cbb40c36782))
+* add data-trackable attribute to link ([f9b97ef](https://github.com/Financial-Times/cp-content-pipeline/commit/f9b97ef653d5e362aa43346857390ce9356e7b1b))
+* bump @financial-times/content-tree ([96232e5](https://github.com/Financial-Times/cp-content-pipeline/commit/96232e58f3b0634032b584766f071a95b9e0d257))
+* bump @financial-times/content-tree ([9090226](https://github.com/Financial-Times/cp-content-pipeline/commit/909022691c1aeccb4e6e70b8a72a492e60f32739))
+* implement client label on recommended list teasers for partner ([ffb809e](https://github.com/Financial-Times/cp-content-pipeline/commit/ffb809e43dc25c664d61f6cbdaf9d74e5b959cc4))
+* implement RecommendedList component ([3b9fc92](https://github.com/Financial-Times/cp-content-pipeline/commit/3b9fc9211cebf182c572abcc8d7e971eeec7e179))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^4.17.0 to ^4.18.0
+    * @financial-times/cp-content-pipeline-schema bumped from ^3.16.0 to ^3.17.0
+    * @financial-times/cp-content-pipeline-styles bumped from ^4.3.0 to ^4.4.0
+
 ## [9.8.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.7.2...cp-content-pipeline-ui-v9.8.0) (2025-10-28)
 
 

package/lib/components/RichText/BasicComponents.js

@@ -9,7 +9,7 @@ const List = (props) => props.content.ordered ? (react_1.default.createElement("
 exports.List = List;
 const ListItem = (props) => react_1.default.createElement("li", null, props.children);
 exports.ListItem = ListItem;
-const Link = (props) => (react_1.default.createElement("a", { href: props.content.url, title: props.content.title, className: props.content.styleType }, props.children));
+const Link = (props) => (react_1.default.createElement("a", { href: props.content.url, title: props.content.title, className: props.content.styleType, "data-trackable": "link" }, props.children));
 exports.Link = Link;
 const Blockquote = (props) => {
     return (react_1.default.createElement("blockquote", { className: "n-content-blockquote o3-editorial-typography-blockquote" }, props.children));

package/lib/components/RichText/BasicComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicComponents.js","sourceRoot":"","sources":["../../../src/components/RichText/BasicComponents.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAKlB,MAAM,IAAI,GAEb,CAAC,KAAK,EAAE,EAAE,CACZ,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CACtB,sCAAI,SAAS,EAAC,sCAAsC,IAAE,KAAK,CAAC,QAAQ,CAAM,CAC3E,CAAC,CAAC,CAAC,CACF,sCAAI,SAAS,EAAC,wCAAwC,IAAE,KAAK,CAAC,QAAQ,CAAM,CAC7E,CAAA;AAPU,QAAA,IAAI,QAOd;AAEI,MAAM,QAAQ,GAEjB,CAAC,KAAK,EAAE,EAAE,CAAC,0CAAK,KAAK,CAAC,QAAQ,CAAM,CAAA;AAF3B,QAAA,QAAQ,YAEmB;AAEjC,MAAM,IAAI,GAEb,CAAC,KAAK,EAAE,EAAE,CAAC,CACb,qCACE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAC1B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,IAEjC,KAAK,CAAC,QAAQ,CACb,CACL,CAAA;AAVY,QAAA,IAAI,QAUhB;AAEM,MAAM,UAAU,GAEnB,CAAC,KAAK,EAAE,EAAE;IACZ,OAAO,CACL,8CAAY,SAAS,EAAC,yDAAyD,IAC5E,KAAK,CAAC,QAAQ,CACJ,CACd,CAAA;AACH,CAAC,CAAA;AARY,QAAA,UAAU,cAQtB;AAEM,MAAM,IAAI,GAEb,CAAC,KAAK,EAAE,EAAE;IACZ,OAAO,CACL,wCAAM,SAAS,EAAC,4CAA4C,IACzD,KAAK,CAAC,QAAQ,CACV,CACR,CAAA;AACH,CAAC,CAAA;AARY,QAAA,IAAI,QAQhB;AAEM,MAAM,SAAS,GAAa,GAAG,EAAE,CAAC,yCAAM,CAAA;AAAlC,QAAA,SAAS,aAAyB;AAExC,MAAM,cAAc,GAAa,GAAG,EAAE,CAAC,yCAAM,CAAA;AAAvC,QAAA,cAAc,kBAAyB;AAE7C,MAAM,QAAQ,GAEjB,CAAC,KAAK,EAAE,EAAE,CAAC,0CAAK,KAAK,CAAC,QAAQ,CAAM,CAAA;AAF3B,QAAA,QAAQ,YAEmB;AAEjC,MAAM,MAAM,GAEf,CAAC,KAAK,EAAE,EAAE,CAAC,8CAAS,KAAK,CAAC,QAAQ,CAAU,CAAA;AAFnC,QAAA,MAAM,UAE6B;AAEzC,MAAM,aAAa,GAEtB,CAAC,KAAK,EAAE,EAAE,CAAC,yCAAI,KAAK,CAAC,QAAQ,CAAK,CAAA;AAFzB,QAAA,aAAa,iBAEY;AAE/B,MAAM,eAAe,GAExB,CAAC,KAAK,EAAE,EAAE,CAAC,2CAAM,KAAK,CAAC,QAAQ,CAAO,CAAA;AAF7B,QAAA,eAAe,mBAEc;AAEnC,MAAM,QAAQ,GAEjB,CAAC,KAAK,EAAE,EAAE,CAAC,0CAAK,KAAK,CAAC,QAAQ,CAAM,CAAA;AAF3B,QAAA,QAAQ,YAEmB;AAEjC,MAAM,WAAW,GAEpB,CAAC,KAAK,EAAE,EAAE,CAAC,CACb;IACE;QACE,sCAAI,OAAO,EAAE,IAAI,EAAE,SAAS,EAAC,kBAAkB,IAC5C,KAAK,CAAC,QAAQ,CACZ,CACF,CACC,CACT,CAAA;AAVY,QAAA,WAAW,eAUvB;AAEM,MAAM,YAAY,GAErB,CAAC,KAAK,EAAE,EAAE,CAAC,CACb,2CAAS,SAAS,EAAC,0FAA0F,IAC1G,KAAK,CAAC,QAAQ,CACP,CACX,CAAA;AANY,QAAA,YAAY,gBAMxB"}
+{"version":3,"file":"BasicComponents.js","sourceRoot":"","sources":["../../../src/components/RichText/BasicComponents.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAKlB,MAAM,IAAI,GAEb,CAAC,KAAK,EAAE,EAAE,CACZ,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CACtB,sCAAI,SAAS,EAAC,sCAAsC,IAAE,KAAK,CAAC,QAAQ,CAAM,CAC3E,CAAC,CAAC,CAAC,CACF,sCAAI,SAAS,EAAC,wCAAwC,IAAE,KAAK,CAAC,QAAQ,CAAM,CAC7E,CAAA;AAPU,QAAA,IAAI,QAOd;AAEI,MAAM,QAAQ,GAEjB,CAAC,KAAK,EAAE,EAAE,CAAC,0CAAK,KAAK,CAAC,QAAQ,CAAM,CAAA;AAF3B,QAAA,QAAQ,YAEmB;AAEjC,MAAM,IAAI,GAEb,CAAC,KAAK,EAAE,EAAE,CAAC,CACb,qCACE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAC1B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,oBACnB,MAAM,IAEpB,KAAK,CAAC,QAAQ,CACb,CACL,CAAA;AAXY,QAAA,IAAI,QAWhB;AAEM,MAAM,UAAU,GAEnB,CAAC,KAAK,EAAE,EAAE;IACZ,OAAO,CACL,8CAAY,SAAS,EAAC,yDAAyD,IAC5E,KAAK,CAAC,QAAQ,CACJ,CACd,CAAA;AACH,CAAC,CAAA;AARY,QAAA,UAAU,cAQtB;AAEM,MAAM,IAAI,GAEb,CAAC,KAAK,EAAE,EAAE;IACZ,OAAO,CACL,wCAAM,SAAS,EAAC,4CAA4C,IACzD,KAAK,CAAC,QAAQ,CACV,CACR,CAAA;AACH,CAAC,CAAA;AARY,QAAA,IAAI,QAQhB;AAEM,MAAM,SAAS,GAAa,GAAG,EAAE,CAAC,yCAAM,CAAA;AAAlC,QAAA,SAAS,aAAyB;AAExC,MAAM,cAAc,GAAa,GAAG,EAAE,CAAC,yCAAM,CAAA;AAAvC,QAAA,cAAc,kBAAyB;AAE7C,MAAM,QAAQ,GAEjB,CAAC,KAAK,EAAE,EAAE,CAAC,0CAAK,KAAK,CAAC,QAAQ,CAAM,CAAA;AAF3B,QAAA,QAAQ,YAEmB;AAEjC,MAAM,MAAM,GAEf,CAAC,KAAK,EAAE,EAAE,CAAC,8CAAS,KAAK,CAAC,QAAQ,CAAU,CAAA;AAFnC,QAAA,MAAM,UAE6B;AAEzC,MAAM,aAAa,GAEtB,CAAC,KAAK,EAAE,EAAE,CAAC,yCAAI,KAAK,CAAC,QAAQ,CAAK,CAAA;AAFzB,QAAA,aAAa,iBAEY;AAE/B,MAAM,eAAe,GAExB,CAAC,KAAK,EAAE,EAAE,CAAC,2CAAM,KAAK,CAAC,QAAQ,CAAO,CAAA;AAF7B,QAAA,eAAe,mBAEc;AAEnC,MAAM,QAAQ,GAEjB,CAAC,KAAK,EAAE,EAAE,CAAC,0CAAK,KAAK,CAAC,QAAQ,CAAM,CAAA;AAF3B,QAAA,QAAQ,YAEmB;AAEjC,MAAM,WAAW,GAEpB,CAAC,KAAK,EAAE,EAAE,CAAC,CACb;IACE;QACE,sCAAI,OAAO,EAAE,IAAI,EAAE,SAAS,EAAC,kBAAkB,IAC5C,KAAK,CAAC,QAAQ,CACZ,CACF,CACC,CACT,CAAA;AAVY,QAAA,WAAW,eAUvB;AAEM,MAAM,YAAY,GAErB,CAAC,KAAK,EAAE,EAAE,CAAC,CACb,2CAAS,SAAS,EAAC,0FAA0F,IAC1G,KAAK,CAAC,QAAQ,CACP,CACX,CAAA;AANY,QAAA,YAAY,gBAMxB"}

package/lib/components/RichText/index.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentsContext = void 0;
 const react_1 = __importStar(require("react"));
 const Recommended_1 = __importDefault(require("../content-tree/Recommended"));
+const RecommendedList_1 = __importDefault(require("../content-tree/RecommendedList"));
 const ImageSet_1 = __importStar(require("../content-tree/ImageSet"));
 const Layout_1 = require("../content-tree/Layout");
 const Pullquote_1 = __importDefault(require("../content-tree/Pullquote"));
@@ -76,6 +77,7 @@ const componentMap = {
     pullquote: Pullquote_1.default,
     'raw-image': ImageSet_1.FallbackImage,
     recommended: Recommended_1.default,
+    'recommended-list': RecommendedList_1.default,
     'scrolly-block': Scrollytelling_1.ScrollyBlock,
     'scrolly-copy': Scrollytelling_1.ScrollyCopy,
     'scrolly-heading': Scrollytelling_1.ScrollyHeading,

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

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

package/lib/components/Topper/Headline.js

@@ -15,7 +15,7 @@ const Headline = ({ headline, showPremiumLabel = false, isLargeHeadline = false,
     });
     return (react_1.default.createElement("h1", { className: headlineClassnames },
         react_1.default.createElement("span", { className: "headline__text" }, headline),
-        showPremiumLabel && (react_1.default.createElement("span", { className: "headline__premium-badge o-labels o-labels--content-premium" }, "Premium"))));
+        showPremiumLabel && (react_1.default.createElement("span", { className: "headline__premium-badge o-labels o-labels--small o-labels--content-premium" }, "Premium"))));
 };
 exports.default = Headline;
 //# sourceMappingURL=Headline.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Topper/Headline.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAQnC,MAAM,QAAQ,GAA4B,CAAC,EACzC,QAAQ,EACR,gBAAgB,GAAG,KAAK,EACxB,eAAe,GAAG,KAAK,GACxB,EAAE,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,6DAAK,CAAA;IACd,CAAC;IAED,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EAAC;QACpC,oBAAoB,EAAE,IAAI;QAC1B,CAAC,2BAA2B,CAAC,EAAE,eAAe;KAC/C,CAAC,CAAA;IAEF,OAAO,CACL,sCAAI,SAAS,EAAE,kBAAkB;QAC/B,wCAAM,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAQ;QACjD,gBAAgB,IAAI,CACnB,wCAAM,SAAS,EAAC,4DAA4D,cAErE,CACR,CACE,CACN,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,QAAQ,CAAA"}
+{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Topper/Headline.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAQnC,MAAM,QAAQ,GAA4B,CAAC,EACzC,QAAQ,EACR,gBAAgB,GAAG,KAAK,EACxB,eAAe,GAAG,KAAK,GACxB,EAAE,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,6DAAK,CAAA;IACd,CAAC;IAED,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EAAC;QACpC,oBAAoB,EAAE,IAAI;QAC1B,CAAC,2BAA2B,CAAC,EAAE,eAAe;KAC/C,CAAC,CAAA;IAEF,OAAO,CACL,sCAAI,SAAS,EAAE,kBAAkB;QAC/B,wCAAM,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAQ;QACjD,gBAAgB,IAAI,CACnB,wCAAM,SAAS,EAAC,4EAA4E,cAErF,CACR,CACE,CACN,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,QAAQ,CAAA"}

package/lib/components/content-tree/RecommendedList/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ContentProps } from '../../types';
+import type * as ComponentWorkarounds from '../Workarounds';
+interface RecommendedListProps extends ContentProps<ComponentWorkarounds.RecommendedList> {
+}
+declare const RecommendedList: React.FC<RecommendedListProps>;
+export default RecommendedList;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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) {
+        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,
+                // 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,
+            } }))))));
+};
+exports.default = RecommendedList;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -33,6 +33,10 @@ export type Teaser = PartialToMaybeDeep<LiteralToPrimitiveDeep<SetOptional<SetFi
 export type Recommended = PartialToMaybe<ContentTreeWorkarounds.Recommended & {
     teaser?: Teaser;
 }>;
+export type RecommendedList = PartialToMaybe<ReadonlyArrays<Omit<ContentTree.RecommendedList, 'children'> & {
+    teasers?: (Teaser | null)[];
+    children: Recommended[];
+}>>;
 export type ImageSetPicture = PartialToMaybe<ReadonlyArrays<SetOptional<SetFieldType<SetFieldType<ContentTree.ImageSetPicture, 'fallbackImage', Image>, 'images', Image[]>, 'caption' | 'credit'>>>;
 export type ImageSet = PartialToMaybe<SetOptional<SetFieldType<ContentTree.ImageSet | ContentTree.LayoutImage, 'picture', ImageSetPicture>, 'picture'>>;
 export type ScrollyImage = PartialToMaybe<SetOptional<SetFieldType<ContentTree.ScrollyImage, 'picture', ImageSetPicture>, 'picture'>>;

package/lib/index.d.ts

@@ -18,6 +18,7 @@ export { Layout, LayoutContainer, LayoutSlot, } from './components/content-tree/
 export { default as Paragraph } from './components/content-tree/Paragraph';
 export { default as Pullquote } from './components/content-tree/Pullquote/index';
 export { default as Recommended } from './components/content-tree/Recommended';
+export { default as RecommendedList } from './components/content-tree/RecommendedList';
 export { ScrollyBlock } from './components/content-tree/Scrollytelling';
 export { default as Table } from './components/content-tree/Table';
 export { default as Tweet } from './components/content-tree/Tweet';

package/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PresentationOverridesContext = exports.PresentationFlagsContext = exports.CccFallbackText = exports.Cite = 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.Table = exports.ScrollyBlock = exports.Recommended = exports.Pullquote = exports.Paragraph = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.Heading = exports.Flourish = exports.CustomCodeComponent = exports.BigNumber = exports.RichText = exports.PodcastBody = exports.LiveBlogBody = exports.ArticleBody = exports.Body = exports.Topper = exports.MainImage = exports.LiveBlogWrapper = exports.Byline = exports.ArticleInfo = void 0;
+exports.PresentationOverridesContext = exports.PresentationFlagsContext = exports.CccFallbackText = exports.Cite = 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.Table = exports.ScrollyBlock = exports.RecommendedList = exports.Recommended = exports.Pullquote = exports.Paragraph = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.Heading = exports.Flourish = exports.CustomCodeComponent = exports.BigNumber = exports.RichText = exports.PodcastBody = exports.LiveBlogBody = exports.ArticleBody = exports.Body = exports.Topper = exports.MainImage = exports.LiveBlogWrapper = exports.Byline = exports.ArticleInfo = void 0;
 var ArticleInfo_1 = require("./components/ArticleInfo");
 Object.defineProperty(exports, "ArticleInfo", { enumerable: true, get: function () { return __importDefault(ArticleInfo_1).default; } });
 var Byline_1 = require("./components/Byline");
@@ -46,6 +46,8 @@ var index_1 = require("./components/content-tree/Pullquote/index");
 Object.defineProperty(exports, "Pullquote", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
 var Recommended_1 = require("./components/content-tree/Recommended");
 Object.defineProperty(exports, "Recommended", { enumerable: true, get: function () { return __importDefault(Recommended_1).default; } });
+var RecommendedList_1 = require("./components/content-tree/RecommendedList");
+Object.defineProperty(exports, "RecommendedList", { enumerable: true, get: function () { return __importDefault(RecommendedList_1).default; } });
 var Scrollytelling_1 = require("./components/content-tree/Scrollytelling");
 Object.defineProperty(exports, "ScrollyBlock", { enumerable: true, get: function () { return Scrollytelling_1.ScrollyBlock; } });
 var Table_1 = require("./components/content-tree/Table");

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAE1B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAC/B,0EAAmF;AAA1E,6HAAA,OAAO,OAAgB;AAChC,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAE/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,qFAA8F;AAArF,2IAAA,OAAO,OAAuB;AACvC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,+EAAmF;AAA1E,kHAAA,OAAO,OAAQ;AACxB,2DAIyC;AAHvC,gGAAA,MAAM,OAAA;AACN,yGAAA,eAAe,OAAA;AACf,oGAAA,UAAU,OAAA;AAEZ,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,mEAAgF;AAAvE,mHAAA,OAAO,OAAa;AAC7B,qEAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,2EAAuE;AAA9D,8GAAA,YAAY,OAAA;AACrB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,uEAAgF;AAAvE,6HAAA,OAAO,OAAgB;AAChC,yEAY8C;AAX5C,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;AACb,uGAAA,IAAI,OAAA;AACJ,kHAAA,eAAe,OAAA;AAGjB,qCAGkB;AAFhB,mHAAA,wBAAwB,OAAA;AACxB,uHAAA,4BAA4B,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAE1B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAC/B,0EAAmF;AAA1E,6HAAA,OAAO,OAAgB;AAChC,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAE/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,qFAA8F;AAArF,2IAAA,OAAO,OAAuB;AACvC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,+EAAmF;AAA1E,kHAAA,OAAO,OAAQ;AACxB,2DAIyC;AAHvC,gGAAA,MAAM,OAAA;AACN,yGAAA,eAAe,OAAA;AACf,oGAAA,UAAU,OAAA;AAEZ,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,mEAAgF;AAAvE,mHAAA,OAAO,OAAa;AAC7B,qEAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,6EAAsF;AAA7E,mIAAA,OAAO,OAAmB;AACnC,2EAAuE;AAA9D,8GAAA,YAAY,OAAA;AACrB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,uEAAgF;AAAvE,6HAAA,OAAO,OAAgB;AAChC,yEAY8C;AAX5C,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;AACb,uGAAA,IAAI,OAAA;AACJ,kHAAA,eAAe,OAAA;AAGjB,qCAGkB;AAFhB,mHAAA,wBAAwB,OAAA;AACxB,uHAAA,4BAA4B,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "9.8.0",
+  "version": "9.9.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -15,10 +15,10 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
-    "@financial-times/content-tree": "github:financial-times/content-tree#bd083dc",
-    "@financial-times/cp-content-pipeline-client": "^4.17.0",
-    "@financial-times/cp-content-pipeline-schema": "^3.16.0",
-    "@financial-times/cp-content-pipeline-styles": "^4.3.0",
+    "@financial-times/content-tree": "github:financial-times/content-tree#3f77ec4",
+    "@financial-times/cp-content-pipeline-client": "^4.18.0",
+    "@financial-times/cp-content-pipeline-schema": "^3.17.0",
+    "@financial-times/cp-content-pipeline-styles": "^4.4.0",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",
     "@financial-times/o-share": "^11.0.0",
@@ -53,7 +53,7 @@
     "@dotcom-tool-kit/npm": "^4.2.11",
     "@financial-times/ft-date-format": "^2.1.0",
     "@financial-times/o-expander": "^7.0.1",
-    "@financial-times/o-labels": "^7.0.2",
+    "@financial-times/o-labels": "^7.1.2",
     "@financial-times/o-loading": "^6.0.0",
     "@financial-times/o-teaser": "^7.1.5",
     "@financial-times/o-visual-effects": "^5.0.1",

package/src/components/RichText/BasicComponents.tsx

@@ -23,6 +23,7 @@ export const Link: React.FC<
     href={props.content.url}
     title={props.content.title}
     className={props.content.styleType}
+    data-trackable="link"
   >
     {props.children}
   </a>

package/src/components/RichText/index.tsx

@@ -7,6 +7,7 @@ import React, {
 
 import type { ContentTree } from '@financial-times/content-tree'
 import Recommended from '../content-tree/Recommended'
+import RecommendedList from '../content-tree/RecommendedList'
 import ImageSet, { FallbackImage } from '../content-tree/ImageSet'
 import { Layout, LayoutSlot } from '../content-tree/Layout'
 import Pullquote from '../content-tree/Pullquote'
@@ -125,6 +126,7 @@ const componentMap: RichTextComponentMapRecord = {
   pullquote: Pullquote,
   'raw-image': FallbackImage,
   recommended: Recommended,
+  'recommended-list': RecommendedList,
   'scrolly-block': ScrollyBlock,
   'scrolly-copy': ScrollyCopy,
   'scrolly-heading': ScrollyHeading,

package/src/components/Topper/Headline.tsx

@@ -25,7 +25,7 @@ const Headline: React.FC<HeadlineProps> = ({
     <h1 className={headlineClassnames}>
       <span className="headline__text">{headline}</span>
       {showPremiumLabel && (
-        <span className="headline__premium-badge o-labels o-labels--content-premium">
+        <span className="headline__premium-badge o-labels o-labels--small o-labels--content-premium">
           Premium
         </span>
       )}

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

@@ -52,4 +52,8 @@
             }
         }
     }
-}
+}
+
+.headline__premium-badge {
+	vertical-align: middle;
+}

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

@@ -0,0 +1,53 @@
+import React from 'react'
+
+//HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
+import { presets, Teaser } from '@financial-times/x-teaser'
+import { ContentProps } from '../../types'
+import type * as ComponentWorkarounds from '../Workarounds'
+
+// Renders a Recommended teaser component
+// `<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) {
+    return null
+  }
+
+  return (
+    <aside
+      aria-labelledby="aside-label"
+      className="n-content-recommended-list"
+      data-component="recommended-list"
+    >
+      <p className="n-content-recommended-list__title o3-type-title-lg">
+        {heading}
+      </p>
+      <div className="n-content-recommended-list__teasers">
+        {teasers.map((teaser, index) => (
+          <Teaser
+            key={teaser?.id || index}
+            modifiers={['stacked']}
+            {...presets.SmallHeavy}
+            {...teaser}
+            metaPrefixText={'By'}
+            metaLink={{
+              prefLabel: 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,
+            }}
+          />
+        ))}
+      </div>
+    </aside>
+  )
+}
+
+export default RecommendedList

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

@@ -87,11 +87,21 @@ export type Teaser = PartialToMaybeDeep<
 >
 
 export type Recommended = PartialToMaybe<
-  ContentTreeWorkarounds.Recommended & {
+ContentTreeWorkarounds.Recommended & {
     teaser?: Teaser
   }
 >
 
+export type RecommendedList = PartialToMaybe<
+  ReadonlyArrays<
+    Omit<ContentTree.RecommendedList, 'children'> & {
+    teasers?: (Teaser | null)[]
+    children: Recommended[]
+  }
+  >
+
+>
+
 export type ImageSetPicture = PartialToMaybe<
   ReadonlyArrays<
     SetOptional<

package/src/index.ts

@@ -24,6 +24,7 @@ export {
 export { default as Paragraph } from './components/content-tree/Paragraph'
 export { default as Pullquote } from './components/content-tree/Pullquote/index'
 export { default as Recommended } from './components/content-tree/Recommended'
+export { default as RecommendedList } from './components/content-tree/RecommendedList'
 export { ScrollyBlock } from './components/content-tree/Scrollytelling'
 export { default as Table } from './components/content-tree/Table'
 export { default as Tweet } from './components/content-tree/Tweet'