@financial-times/cp-content-pipeline-ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -66,6 +66,72 @@
   * devDependencies
     * @financial-times/cp-content-pipeline-client bumped from ^0.3.7 to ^0.3.8
 
+## [0.5.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v0.4.0...cp-content-pipeline-ui-v0.5.0) (2023-01-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* don't automatically serialise live blog body
+* update to latest content-tree ImageSet changes
+* update references to use External type
+* use contenttree for structured tree
+* return an array for picture images
+* rename sources on Image to sourceSet
+
+### Features
+
+* add Flourish to content-tree ([7816a6f](https://github.com/Financial-Times/cp-content-pipeline/commit/7816a6f5b4d9f599ebd4afd9284de5b18979f278))
+* add imageset to references ([28157c0](https://github.com/Financial-Times/cp-content-pipeline/commit/28157c0e170a4d954ff8ab97decd89221b1a0545))
+* add layout nodes to content tree ([b6f5327](https://github.com/Financial-Times/cp-content-pipeline/commit/b6f5327422521437ae18f88f6100e1fcfa1f8cb4))
+* add recommended link to content tree ([082450a](https://github.com/Financial-Times/cp-content-pipeline/commit/082450acf36e3ce2bd51893e3ebfd8c62fe20f0b))
+* add some more tags ([0bb0b6f](https://github.com/Financial-Times/cp-content-pipeline/commit/0bb0b6fd2dae1d9ffaa2d19028a49231c8a89217))
+* add tweet reference to content tree ([d0d0550](https://github.com/Financial-Times/cp-content-pipeline/commit/d0d05504ad0cc105507d6c8f9145dee23afc8f28))
+* allow overriding article & live blog bodies ([7387cd8](https://github.com/Financial-Times/cp-content-pipeline/commit/7387cd8527238121d859b00099dbc9945175adf1))
+* don't automatically serialise live blog body ([bdb6976](https://github.com/Financial-Times/cp-content-pipeline/commit/bdb6976c4c18bbec1f4ebc3420fca5388817cf43))
+* rename sources on Image to sourceSet ([c6ddf7f](https://github.com/Financial-Times/cp-content-pipeline/commit/c6ddf7f0cac47b0cbf4060e91c62a1c398665058))
+* render new image data format in imageset component ([6016216](https://github.com/Financial-Times/cp-content-pipeline/commit/60162163812a16a0e7a8728c49dfde4b85dca338))
+* render raw images ([3cf9cb6](https://github.com/Financial-Times/cp-content-pipeline/commit/3cf9cb69199e31fde4b23935d7e2ddf7bdbdf916))
+* render topper image using imageset components ([687b31c](https://github.com/Financial-Times/cp-content-pipeline/commit/687b31c57cfc5e32ac0e2517dfc5df81e0a64952))
+* return an array for picture images ([e555bf8](https://github.com/Financial-Times/cp-content-pipeline/commit/e555bf8e33e4c2f23957aa2ed463395bae21e8a6))
+* return array for topper images ([826e6cf](https://github.com/Financial-Times/cp-content-pipeline/commit/826e6cfc47b2782e5a7a7dfe4a12f81d21d08fcb))
+* update x-live-blog-wrapper and pass it the RichText component ([b822cf3](https://github.com/Financial-Times/cp-content-pipeline/commit/b822cf37cef743baca1761fb12d6680500a457a1))
+* use contenttree for structured tree ([0bb0b6f](https://github.com/Financial-Times/cp-content-pipeline/commit/0bb0b6fd2dae1d9ffaa2d19028a49231c8a89217))
+
+
+### Bug Fixes
+
+* broken tests and image format bug ([82909a8](https://github.com/Financial-Times/cp-content-pipeline/commit/82909a88cca976eb2bf1c8114ca4c93eb0d9da8d))
+* casing of Pullquote folder ([fa44f99](https://github.com/Financial-Times/cp-content-pipeline/commit/fa44f99526b4903cc78e0ca0666e99e63f3239b3))
+* get imageset working with latest image changes ([e1eceb0](https://github.com/Financial-Times/cp-content-pipeline/commit/e1eceb0a5b8018d91aadd1699240425a29505e58))
+* loosen image format restrictions to handle edge cases ([27ada9b](https://github.com/Financial-Times/cp-content-pipeline/commit/27ada9b62405c9036e484e041337a3f590faa2f8))
+* missing credit on images ([62a10d3](https://github.com/Financial-Times/cp-content-pipeline/commit/62a10d3146d1af49371262e247b6c0cb2140d432))
+* output o-editorial-typography heading classes (is this right?) ([e160876](https://github.com/Financial-Times/cp-content-pipeline/commit/e1608769866555a79f1caaaf84e7c8d4c2c252d7))
+* output o-editorial-typography heading classes (is this right?) ([38e3d86](https://github.com/Financial-Times/cp-content-pipeline/commit/38e3d86345768eecd1203c2844e94a457aa661b2))
+* reinstate twitter error handling ([6ba321c](https://github.com/Financial-Times/cp-content-pipeline/commit/6ba321cf6a3d66f58cd1c0f3df40eaf9b8076054))
+* remove trailing index ([b7566fb](https://github.com/Financial-Times/cp-content-pipeline/commit/b7566fb0144d779d3164767e089a61706322ddc4))
+* rename PullQuote to Pullquote to align with Blockquote ([e160876](https://github.com/Financial-Times/cp-content-pipeline/commit/e1608769866555a79f1caaaf84e7c8d4c2c252d7))
+* rename PullQuote to Pullquote to align with Blockquote ([e192df6](https://github.com/Financial-Times/cp-content-pipeline/commit/e192df6ea4896aef6ab9ecbd76cf98f27add0caf))
+* rename subhead to subheading ([e160876](https://github.com/Financial-Times/cp-content-pipeline/commit/e1608769866555a79f1caaaf84e7c8d4c2c252d7))
+* rename subhead to subheading ([e89e34a](https://github.com/Financial-Times/cp-content-pipeline/commit/e89e34afd61192f6f6f93ee27cb60d28539b8f98))
+* render byline links as a custom author-link node ([9a4dfc0](https://github.com/Financial-Times/cp-content-pipeline/commit/9a4dfc02810744054d0137f8cb4e640d9cd8e7f5))
+* render tweet html using dangerouslyRender ([a0aa543](https://github.com/Financial-Times/cp-content-pipeline/commit/a0aa54387dd02bed77fde025f006796f444523a6))
+* style headings usign n-content-body styles ([f1d8b0f](https://github.com/Financial-Times/cp-content-pipeline/commit/f1d8b0f65225295d6324ce65ab2ca2b962c7a0ff))
+* uncomment out exported UI components from index ([c60ab7d](https://github.com/Financial-Times/cp-content-pipeline/commit/c60ab7d32d23d145a8f15d9ccb8e35b4e44f9c7c))
+* update layout-width to match new names ([b6f5327](https://github.com/Financial-Times/cp-content-pipeline/commit/b6f5327422521437ae18f88f6100e1fcfa1f8cb4))
+
+
+### Code Refactoring
+
+* update references to use External type ([6ba321c](https://github.com/Financial-Times/cp-content-pipeline/commit/6ba321cf6a3d66f58cd1c0f3df40eaf9b8076054))
+* update to latest content-tree ImageSet changes ([6d33d38](https://github.com/Financial-Times/cp-content-pipeline/commit/6d33d383586841e83e08685ce93ca87964825297))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^0.4.0 to ^0.5.0
+
 ## [0.4.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v0.3.15...cp-content-pipeline-ui-v0.4.0) (2022-12-14)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # Content Pipeline UI Components
 
-Provides a set of React components that can be used to render content received from the GraphQL API.
+Provides a set of React components that can be used to render content received from the GraphQL API, including [Content Tree](https://github.com/Financial-Times/content-tree) components.
 
 The components can be used independently or alongside the [GraphQL Client](../client/README.md) which supplies content data from CAPI and other sources.
 
@@ -48,51 +48,59 @@ Each Component in this package contains a function which returns a JSX object. C
 
 ## Rendering
 
-We use `<RichText>` to render our JSX components. It takes a structured data object and an optional list of component overrides and renders JSX components for each `tag` in that dataset. The supported Body tags are defined in a [componentMap](./src/components/RichText/index.tsx#42) and they refer to the set of Components which can be rendered.
+We use `<RichText>` to render our JSX components. It takes a structured data object matching the [content-tree spec](https://github.com/Financial-Times/content-tree), and an optional list of component overrides and renders JSX components for each `tag` in that dataset. The supported Body tags are defined in a [componentMap](./src/components/RichText/index.tsx#42) and they refer to the set of Components which can be rendered.
 
 Any component override must be a valid [JSX functional or class constructor](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/24f1d0c82da2d898acd03fbb3e692eba3c431f82/types/react/index.d.ts#L80).
 
-- ✅ `{ Paragraph: (props) => (<p>{props.children}</p>) }`
-- ✅ `{ Paragraph: MyParagraphComponent }`
-- ✅ `{ Paragraph: () => null }`
-- ❌ `{ Paragraph: 'p' }`
+- ✅ `{ paragraph: (props) => (<p>{props.children}</p>) }`
+- ✅ `{ paragraph: MyParagraphComponent }`
+- ✅ `{ paragraph: () => null }`
+- ❌ `{ paragraph: 'p' }`
 
 The `Fallback` component is a special instance. This component is used whenever the renderer encounters a tag that it doesn't have a component mapping for. The default behaviour is to render any known child components. This `Fallback` component can also be overridden in the same way others can.
 
-Our [Schema](../schema/README.md) package uses [Unified](https://unifiedjs.com/) to transform content XML from our APIs into structured data which is renderable by `<RichText>`. That process generates a `tree` and a set of `references` for the content provided.
+Our [Schema](../schema/README.md) package uses converts a `bodyXML` from the content API, into structured `content-tree` [Body node](https://github.com/Financial-Times/content-tree#body) which is renderable by `<RichText>`. That process generates a `tree`, and a set of `references` for any external content required to render.
 
 ### Example usage
 
 ```jsx
   const structuredContent = {
-    tree: hastTree,
+    tree: contentTree,
     references: [{
-      __typename: 'Recommended',
+      type: 'recommended',
       teaser: {}
     }] // Array of additional props to pass to components
   }
 
   const components = {
-    Paragraph: ParagraphComponent,
-    Link: LinkComponent,
-    ImageSet: ImageSetComponent
+    paragraph: ParagraphComponent,
+    link: LinkComponent,
+    'image-set': ImageSetComponent
   }
 
   <RichText structuredContent={structuredContent} components={components} />
 ```
 
-### What is a tree?
+### What is a Content Tree?
 
-A `tree` is a body of content represented as a [hast](https://github.com/syntax-tree/hast) abstract syntax tree.
+[Content Tree] is a format for representing Financial Times article content as a JSON tree (following the [unist](https://github.com/syntax-tree/unist) spec).
 
-### What is a tag?
+It is a shared contract between [Spark](https://biz-ops.in.ft.com/Team/digitalnewsroomsupport) and [Customer Products](https://biz-ops.in.ft.com/Group/customerproducts) defining what the content should look like, so that it can be used to both preview and render an article.
 
-Each node in the hast tree is given a `tagName` which corresponds to a Component which can be rendered, e.g. `Pargraph`, `Link`, `ImageSet`.
+### What is a node?
+
+Each node in the content tree has a `type` property, which corresponds to a Component which can be rendered, e.g. `paragraph`, `link`, `image-set`.
+
+The spec for these nodes determines what data is available to those components.
 
 ### What are references?
 
-A reference is an object providing additional props to a node in the tree.
+Some nodes in the tree require additional data that isn't available from the CMS (for example, a tweet requires the embed code from the Twitter API).
+
+The shape of this additional data is defined in the content tree for that node as optional properties, to indicate that it may not be present in the generated tree.
+
+To provide this external data to the content tree, we produce an array of "references", which are objects containing additional fields.
 
-Nodes in the hast tree may be given a `dataReferenceId` property which corresponds to an index in the `references` array. This essentially creates a map between a node in the tree and an item in the references array. `<RichText>` will automatically pass the additional props from the `references` to the corresponding JSX component for that node when it is being rendered.
+When generating the content tree in the API, an additional property `node.data.referenceIndex` is added to any node which has a reference in this array.
 
-Some nodes cannot be rendered without additional data which is not available in the original content tree so they rely on references to supply this context.
+The `<RichText>` component will automatically pass the additional props from the `references` to the corresponding JSX component for that node when it is being rendered.

package/lib/components/ArticleBody/index.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const RichText_1 = __importDefault(require("../RichText"));
 function ArticleBody({ content, components }) {
-    var _a;
-    if (!((_a = content === null || content === void 0 ? void 0 : content.body) === null || _a === void 0 ? void 0 : _a.structured)) {
+    if (!content?.body?.structured) {
         return null;
     }
     return (react_1.default.createElement("article", { className: "n-content-body" },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAGlC,SAAwB,WAAW,CAAC,EAAE,OAAO,EAAE,UAAU,EAAa;;IACpE,IAAI,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,UAAU,CAAA,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,2CAAS,SAAS,EAAC,gBAAgB;QACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,UAAU,GACtB,CACM,CACX,CAAA;AACH,CAAC;AAbD,8BAaC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAGlC,SAAwB,WAAW,CAAC,EAAE,OAAO,EAAE,UAAU,EAAa;IACpE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,2CAAS,SAAS,EAAC,gBAAgB;QACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,UAAU,GACtB,CACM,CACX,CAAA;AACH,CAAC;AAbD,8BAaC"}

package/lib/components/ArticleInfo/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
 declare type ArticleInfoProps = {
     content: ArticleQuery['content'];
 };
-export default function ArticleInfo({ content }: ArticleInfoProps): JSX.Element;
+export default function ArticleInfo({ children, content }: PropsWithChildren<ArticleInfoProps>): JSX.Element;
 export {};

package/lib/components/ArticleInfo/index.js

@@ -5,12 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const Byline_1 = __importDefault(require("../Byline"));
-function ArticleInfo({ content }) {
+function ArticleInfo({ children, content }) {
     return (react_1.default.createElement("div", { className: "article-info" },
         react_1.default.createElement("div", { className: "article-info__time-byline" },
             content.byline && react_1.default.createElement(Byline_1.default, { structuredContent: content.byline }),
             react_1.default.createElement("span", null, " "),
-            content.publishedDate && (react_1.default.createElement("time", { "data-o-component": "o-date", className: "article-info__timestamp o-date", dateTime: content.publishedDate })))));
+            content.publishedDate && (react_1.default.createElement("time", { "data-o-component": "o-date", className: "article-info__timestamp o-date", dateTime: content.publishedDate }))),
+        children));
 }
 exports.default = ArticleInfo;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleInfo/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,uDAA8B;AAO9B,SAAwB,WAAW,CAAC,EAAE,OAAO,EAAoB;IAC/D,OAAO,CACL,uCAAK,SAAS,EAAC,cAAc;QAC3B,uCAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO,CAAC,MAAM,IAAI,8BAAC,gBAAM,IAAC,iBAAiB,EAAE,OAAO,CAAC,MAAM,GAAI;YAChE,gDAAc;YACb,OAAO,CAAC,aAAa,IAAI,CACxB,4DACmB,QAAQ,EACzB,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAE,OAAO,CAAC,aAAa,GAC/B,CACH,CACG,CACF,CACP,CAAA;AACH,CAAC;AAhBD,8BAgBC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleInfo/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAgD;AAChD,uDAA8B;AAO9B,SAAwB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAuC;IAE5F,OAAO,CACL,uCAAK,SAAS,EAAC,cAAc;QAC3B,uCAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO,CAAC,MAAM,IAAI,8BAAC,gBAAM,IAAC,iBAAiB,EAAE,OAAO,CAAC,MAAM,GAAI;YAChE,gDAAc;YACb,OAAO,CAAC,aAAa,IAAI,CACxB,4DACmB,QAAQ,EACzB,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAE,OAAO,CAAC,aAAa,GAC/B,CACH,CACG;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAlBD,8BAkBC"}

package/lib/components/Body/index.js

@@ -7,14 +7,15 @@ const react_1 = __importDefault(require("react"));
 const index_js_1 = __importDefault(require("../ArticleBody/index.js"));
 const index_js_2 = __importDefault(require("../LiveBlogBody/index.js"));
 function Body({ content, components }) {
-    var _a;
-    if (!((_a = content === null || content === void 0 ? void 0 : content.body) === null || _a === void 0 ? void 0 : _a.structured)) {
+    if (!content?.body?.structured) {
         return null;
     }
+    const LiveBlog = components?.['live-blog-body'] ?? index_js_2.default;
+    const Article = components?.['article-body'] ?? index_js_1.default;
     if (content.__typename === 'LiveBlogPackage') {
-        return react_1.default.createElement(index_js_2.default, { content: content, components: components });
+        return react_1.default.createElement(LiveBlog, { content: content, components: components });
     }
-    return react_1.default.createElement(index_js_1.default, { content: content, components: components });
+    return react_1.default.createElement(Article, { content: content, components: components });
 }
 exports.default = Body;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,uEAAiD;AACjD,wEAAmD;AASnD,SAAwB,IAAI,CAAC,EAAE,OAAO,EAAE,UAAU,EAAa;;IAC7D,IAAI,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,UAAU,CAAA,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB,EAAE;QAC5C,OAAO,8BAAC,kBAAY,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;KAClE;IAED,OAAO,8BAAC,kBAAW,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;AAClE,CAAC;AAVD,uBAUC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,uEAAiD;AACjD,wEAAmD;AASnD,SAAwB,IAAI,CAAC,EAAE,OAAO,EAAE,UAAU,EAAa;IAC7D,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,QAAQ,GAAG,UAAU,EAAE,CAAC,gBAAgB,CAAC,IAAI,kBAAY,CAAA;IAC/D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC,cAAc,CAAC,IAAI,kBAAW,CAAA;IAE3D,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB,EAAE;QAC5C,OAAO,8BAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;KAC9D;IAED,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;AAC9D,CAAC;AAbD,uBAaC"}

package/lib/components/Byline/index.js

@@ -5,9 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const index_js_1 = __importDefault(require("../RichText/index.js"));
+const AuthorLink = (props) => (react_1.default.createElement("a", { className: "n-content-tag--author", href: props.href }, props.children));
+const bylineComponents = {
+    'author-link': AuthorLink,
+};
 function Byline({ structuredContent }) {
     return (react_1.default.createElement("p", { className: "article-info__byline" },
-        react_1.default.createElement(index_js_1.default, { structuredContent: structuredContent })));
+        react_1.default.createElement(index_js_1.default, { structuredContent: structuredContent, components: bylineComponents })));
 }
 exports.default = Byline;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Byline/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAGzB,oEAA2C;AAM3C,SAAwB,MAAM,CAAC,EAAE,iBAAiB,EAAe;IAC/D,OAAO,CACL,qCAAG,SAAS,EAAC,sBAAsB;QACjC,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CAChD,CACL,CAAA;AACH,CAAC;AAND,yBAMC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Byline/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAGzB,oEAA2C;AAM3C,MAAM,UAAU,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,CACjC,qCAAG,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAClD,KAAK,CAAC,QAAQ,CACb,CACL,CAAA;AAED,MAAM,gBAAgB,GAAG;IACvB,aAAa,EAAE,UAAU;CAC1B,CAAA;AAED,SAAwB,MAAM,CAAC,EAAE,iBAAiB,EAAe;IAC/D,OAAO,CACL,qCAAG,SAAS,EAAC,sBAAsB;QACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,gBAAgB,GAC5B,CACA,CACL,CAAA;AACH,CAAC;AATD,yBASC"}

package/lib/components/Flourish/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+import { ContentTree } from '@financial-times/content-tree';
 import { FlourishFragment } from '@financial-times/cp-content-pipeline-client';
-export default function Flourish({ id, type, description, fullGrid, fallbackImage }: FlourishFragment): JSX.Element;
+export default function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, }: ContentTree.Flourish & FlourishFragment): JSX.Element;

package/lib/components/Flourish/index.js

@@ -9,19 +9,20 @@ const DisclaimerNotice = ({ id }) => (react_1.default.createElement("div", { id:
     react_1.default.createElement("div", { className: "o-message__container" },
         react_1.default.createElement("div", { className: "o-message__content" },
             react_1.default.createElement("p", { className: "o-message__content-main" }, "You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.")))));
-function Flourish({ id, type, description, fullGrid, fallbackImage }) {
+function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, }) {
     const anchorHref = `#${id}`;
+    const fullGrid = layoutWidth === 'grid';
     const figureClassnames = (0, classnames_1.default)({
         'n-content-picture': true,
         'n-content-layout__container': true,
         'n-content-picture--wide': fullGrid,
     });
     return (react_1.default.createElement("div", { className: "n-content-layout", "data-layout-width": fullGrid ? 'full-grid' : null },
-        react_1.default.createElement("figure", { className: figureClassnames, "data-original-image-width": fullGrid ? fallbackImage === null || fallbackImage === void 0 ? void 0 : fallbackImage.width : null, "data-original-image-height": fullGrid ? fallbackImage === null || fallbackImage === void 0 ? void 0 : fallbackImage.height : null },
+        react_1.default.createElement("figure", { className: figureClassnames, "data-original-image-width": fullGrid ? fallbackImage?.width : null, "data-original-image-height": fullGrid ? fallbackImage?.height : null },
             react_1.default.createElement("a", { href: anchorHref },
-                react_1.default.createElement("picture", { "data-asset-type": "flourish", "data-flourish-id": id, "data-flourish-type": type },
+                react_1.default.createElement("picture", { "data-asset-type": "flourish", "data-flourish-id": id, "data-flourish-type": flourishType },
                     react_1.default.createElement(DisclaimerNotice, { id: id }),
-                    react_1.default.createElement("img", { src: fallbackImage === null || fallbackImage === void 0 ? void 0 : fallbackImage.url, alt: description }))))));
+                    react_1.default.createElement("img", { src: fallbackImage?.url, alt: description }))))));
 }
 exports.default = Flourish;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAOnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAoB,EAAE,EAAE,CAAC,CACtD,uCAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,mEAAmE,sBAAkB,WAAW;IACtH,uCAAK,SAAS,EAAC,sBAAsB;QACpC,uCAAK,SAAS,EAAC,oBAAoB;YAClC,qCAAG,SAAS,EAAC,yBAAyB,kJAElC,CACC,CACD,CACD,CACF,CACJ;AAED,SAAwB,QAAQ,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAoB;IACjG,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAChC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;KACtC,CAAC,CAAA;IAEF,OAAO,CACH,uCACI,SAAS,EAAC,kBAAkB,uBACT,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI;QAChD,0CACI,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YACnE,qCAAG,IAAI,EAAE,UAAU;gBACf,8DACoB,UAAU,sBACR,EAAE,wBACA,IAAI;oBACxB,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCACI,GAAG,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,GAAG,EACvB,GAAG,EAAE,WAAW,GAAG,CACjB,CACV,CACC,CACP,CACT,CAAA;AACL,CAAC;AA9BD,2BA8BC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAQnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAmB,EAAE,EAAE,CAAC,CACpD,uCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,mEAAmE,sBAC5D,WAAW;IAE5B,uCAAK,SAAS,EAAC,sBAAsB;QACnC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,qCAAG,SAAS,EAAC,yBAAyB,kJAIlC,CACA,CACF,CACF,CACP,CAAA;AACD,SAAwB,QAAQ,CAAC,EAC/B,EAAE,EACF,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,GAC2B;IACxC,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,WAAW,KAAK,MAAM,CAAA;IACvC,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAClC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;KACpC,CAAC,CAAA;IAEF,OAAO,CACL,uCACE,SAAS,EAAC,kBAAkB,uBACT,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI;QAEhD,0CACE,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YAEnE,qCAAG,IAAI,EAAE,UAAU;gBACjB,8DACkB,UAAU,sBACR,EAAE,wBACA,YAAY;oBAEhC,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCAAK,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,GAAI,CAC1C,CACR,CACG,CACL,CACP,CAAA;AACH,CAAC;AAtCD,2BAsCC"}

package/lib/components/Heading/index.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { ContentTree } from '@financial-times/content-tree';
+declare const _default: (props: ContentTree.Heading & {
+    children: ReactNode[];
+}) => JSX.Element;
+export default _default;

package/lib/components/Heading/index.js

@@ -0,0 +1,17 @@
+"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"));
+exports.default = (props) => {
+    switch (props.level) {
+        case 'chapter':
+            return react_1.default.createElement("h2", { className: "n-content-heading-2" }, props.children);
+        case 'subheading':
+            return react_1.default.createElement("h3", { className: "n-content-heading-3" }, props.children);
+        case 'label':
+            return react_1.default.createElement("h5", { className: "n-content-heading-5" }, props.children);
+    }
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Heading/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAIzB,kBAAe,CAAC,KAAsD,EAAE,EAAE;IACxE,QAAQ,KAAK,CAAC,KAAK,EAAE;QACnB,KAAK,SAAS;YACZ,OAAO,sCAAI,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAC,QAAQ,CAAM,CAAA;QAClE,KAAK,YAAY;YACf,OAAO,sCAAI,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAC,QAAQ,CAAM,CAAA;QAClE,KAAK,OAAO;YACV,OAAO,sCAAI,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAC,QAAQ,CAAM,CAAA;KACnE;AACH,CAAC,CAAA"}

package/lib/components/ImageSet/index.d.ts

@@ -1,3 +1,21 @@
 /// <reference types="react" />
-import type { ImageSetFragment } from '@financial-times/cp-content-pipeline-client';
-export default function ImageSet(fragment: ImageSetFragment): JSX.Element;
+import type { ImageFragment, ImageSetFragment } from '@financial-times/cp-content-pipeline-client';
+import type { ContentTree } from '@financial-times/content-tree';
+declare type ImageType = ContentTree.Image | ImageFragment;
+declare type Breakpoint = {
+    minWidth?: number;
+    maxWidth?: number;
+};
+declare const defaultGetBreakpoints: (image: ImageType) => Breakpoint | undefined;
+export declare type BreakpointGetter = typeof defaultGetBreakpoints;
+declare type SourcesProps = {
+    images: readonly ImageType[];
+    getBreakpoints?: BreakpointGetter;
+};
+export declare function Sources({ images, getBreakpoints }: SourcesProps): JSX.Element;
+export declare function FallbackImage({ image, imageType, }: {
+    image: ContentTree.Image;
+    imageType: string;
+}): JSX.Element;
+export default function ImageSet(imageSet: ImageSetFragment & ContentTree.ImageSet): JSX.Element;
+export {};

package/lib/components/ImageSet/index.js

@@ -3,62 +3,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FallbackImage = exports.Sources = void 0;
 const react_1 = __importDefault(require("react"));
-const srcSet = (image) => image.sources.map((src) => `${src.url} ${src.dpr}x`).join(',');
+const formatSourceSet = (image) => image.sourceSet.map((src) => `${src.url} ${src.dpr}x`).join(',');
 const figureClassNameMap = {
-    PictureFullBleed: 'n-content-picture n-content-picture--wide n-content-layout__container',
-    PictureInline: 'n-content-image n-content-image--inline',
-    PictureStandard: 'n-content-image n-content-image--full',
+    'full-grid': 'n-content-picture n-content-picture--wide n-content-layout__container',
+    'inset-left': 'n-content-image n-content-image--inline',
+    standard: 'n-content-image n-content-image--full',
 };
-function Source({ image }) {
-    const media = [
-        image.minDisplayWidth && `(min-width: ${image.minDisplayWidth})`,
-        image.maxDisplayWidth && `(max-width: ${image.maxDisplayWidth})`,
-    ]
-        .filter(Boolean)
-        .join(' and ');
-    // only need to have sources for different screen breakpoints
-    if (!media.length)
-        return null;
-    return (react_1.default.createElement("source", { media: media, srcSet: srcSet(image), width: image.originalWidth, height: image.originalHeight }));
+const defaultGetBreakpoints = (image) => {
+    switch (image.format) {
+        case 'mobile':
+            return { maxWidth: 490 };
+        case 'desktop':
+            return { minWidth: 980 };
+    }
+};
+const breakpointToMedia = (breakpoint) => [
+    breakpoint.minWidth && `(min-width: ${breakpoint.minWidth})`,
+    breakpoint.maxWidth && `(max-width: ${breakpoint.maxWidth})`,
+]
+    .filter(Boolean)
+    .join(' and ');
+function hasSourceSet(image) {
+    return image && 'sourceSet' in image;
 }
-function Image({ image, alt, type }) {
-    const props = {
-        src: image.sources[0].url,
-        alt,
-        srcSet: image.sources.length > 1 ? srcSet(image) : undefined,
-        'data-image-type': type.toLowerCase(),
-        width: image.originalWidth,
-        height: image.originalHeight,
-    };
-    return react_1.default.createElement("img", { ...props });
+function hasAlt(image) {
+    return image && 'alt' in image;
 }
-const isValidImage = (image) => Boolean(image) && image !== 'PictureImages';
-const validImages = (images) => Object.values(images).filter(isValidImage);
-function Figure({ picture }) {
-    if (!picture.images) {
-        throw new Error(`ImageSet of type ${picture.__typename} has no images. Check that they are present in the query`);
-    }
-    if (!picture.images.standard ||
-        'minDisplayWidth' in picture.images.standard ||
-        'maxDisplayWidth' in picture.images.standard) {
-        throw new Error(`ImageSet must include a "standard" image, without any breakpoint restrictions.`);
+function Source({ image, getBreakpoints = defaultGetBreakpoints, }) {
+    const breakpoints = getBreakpoints(image);
+    if (!hasSourceSet(image) || !breakpoints) {
+        return null;
     }
-    const pictureImages = validImages(picture.images);
-    return (react_1.default.createElement("figure", { className: figureClassNameMap[picture.__typename] || 'n-content-image' },
-        react_1.default.createElement("picture", null,
-            pictureImages.map((image, index) => (react_1.default.createElement(Source, { key: index, image: image }))),
-            react_1.default.createElement(Image, { image: picture.images.standard, alt: picture.alt, type: picture.imageType })),
-        picture.caption && (react_1.default.createElement("figcaption", { className: "n-content-picture__caption" }, picture.caption))));
+    return (react_1.default.createElement("source", { media: breakpointToMedia(breakpoints), srcSet: formatSourceSet(image), width: image.width, height: image.height }));
 }
-function ImageSet(fragment) {
-    if (fragment.picture.__typename === 'PictureFullBleed') {
-        return (react_1.default.createElement("div", { className: "n-content-layout", "data-layout-width": "full-grid" },
-            react_1.default.createElement(Figure, { ...fragment })));
-    }
-    else {
-        return react_1.default.createElement(Figure, { ...fragment });
+function Sources({ images, getBreakpoints }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null, images.map((image, index) => (react_1.default.createElement(Source, { key: index, image: image, getBreakpoints: getBreakpoints })))));
+}
+exports.Sources = Sources;
+// TODO should `fallback` be added to content-tree imageset?
+function FallbackImage({ image, imageType = 'image', }) {
+    return (react_1.default.createElement("img", { src: hasSourceSet(image) ? image.sourceSet[0].url : image.url, srcSet: hasSourceSet(image) ? formatSourceSet(image) : undefined, alt: hasAlt(image) ? image.alt : '', "data-image-type": imageType, width: image.width, height: image.height }));
+}
+exports.FallbackImage = FallbackImage;
+function ImageSet(imageSet) {
+    if (!imageSet.picture.images) {
+        throw new Error(`ImageSet of type ${imageSet.picture?.layoutWidth} has no images. Check that they are present in the query`);
     }
+    return (react_1.default.createElement("div", { className: imageSet.picture.layoutWidth === 'full-grid' ? 'n-content-layout' : '', "data-layout-width": imageSet.picture.layoutWidth },
+        react_1.default.createElement("figure", { className: figureClassNameMap[imageSet.picture.layoutWidth] || 'n-content-image' },
+            react_1.default.createElement("picture", null,
+                react_1.default.createElement(Sources, { images: imageSet.picture.images }),
+                react_1.default.createElement(FallbackImage, { image: imageSet.picture.fallbackImage, imageType: imageSet.picture.imageType || 'image' })),
+            (imageSet.picture.caption || imageSet.picture.credit) && (react_1.default.createElement("figcaption", { className: "n-content-picture__caption" },
+                react_1.default.createElement("span", null, imageSet.picture.caption),
+                react_1.default.createElement("span", null,
+                    imageSet.picture.caption ? ' ' : '',
+                    imageSet.picture.credit))))));
 }
 exports.default = ImageSet;
 //# sourceMappingURL=index.js.map

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/Layout/index.d.ts

@@ -1,17 +1,19 @@
-import { ReactNode } from 'react';
-declare type LayoutProps = {
-    children: ReactNode;
-    dataLayoutName: string;
-    dataLayoutWidth: 'full-grid' | 'fullWidth';
-};
+import { ContentTree } from '@financial-times/content-tree';
+import React, { ReactNode } from 'react';
 declare type LayoutContainerProps = {
     children: ReactNode;
 };
-declare type LayoutSlotProps = {
-    children: ReactNode;
-    dataLayoutWidth: string;
-};
-export declare function Layout({ children, dataLayoutName, dataLayoutWidth, }: LayoutProps): JSX.Element;
+interface ContentTreeLayoutSlot extends ContentTree.Node {
+    type: 'slot';
+    children: [ContentTree.ImageSet?, ...ContentTree.Paragraph[]];
+}
+interface ContentTreeCardLayout extends ContentTree.Node {
+    type: 'layout';
+    layoutName: 'auto' | 'card' | 'timeline';
+    layoutWidth: 'inset-left' | 'full-width' | 'full-grid';
+    children: ContentTreeLayoutSlot[];
+}
+export declare function Layout({ children, layoutWidth, layoutName, }: React.PropsWithChildren<ContentTreeCardLayout>): JSX.Element;
 export declare function LayoutContainer({ children }: LayoutContainerProps): JSX.Element;
-export declare function LayoutSlot({ children, dataLayoutWidth }: LayoutSlotProps): JSX.Element;
+export declare function LayoutSlot({ children }: React.PropsWithChildren): JSX.Element;
 export {};

package/lib/components/Layout/index.js

@@ -5,16 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutSlot = exports.LayoutContainer = exports.Layout = void 0;
 const react_1 = __importDefault(require("react"));
-function Layout({ children, dataLayoutName, dataLayoutWidth, }) {
-    return (react_1.default.createElement("div", { className: "n-content-layout", "data-layout-name": dataLayoutName, "data-layout-width": dataLayoutWidth }, children));
+function Layout({ children, layoutWidth, layoutName, }) {
+    return (react_1.default.createElement("div", { className: "n-content-layout", "data-layout-name": layoutName, "data-layout-width": layoutWidth },
+        react_1.default.createElement(LayoutContainer, null, children)));
 }
 exports.Layout = Layout;
 function LayoutContainer({ children }) {
     return react_1.default.createElement("div", { className: "n-content-layout__container" }, children);
 }
 exports.LayoutContainer = LayoutContainer;
-function LayoutSlot({ children, dataLayoutWidth }) {
-    return (react_1.default.createElement("div", { className: "n-content-layout__slot", "data-layout-width": dataLayoutWidth }, children));
+function LayoutSlot({ children }) {
+    return react_1.default.createElement("div", { className: "n-content-layout__slot" }, children);
 }
 exports.LayoutSlot = LayoutSlot;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Layout/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwC;AAiBxC,SAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,cAAc,EACd,eAAe,GACH;IACZ,OAAO,CACL,uCACE,SAAS,EAAC,kBAAkB,sBACV,cAAc,uBACb,eAAe,IAEjC,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAdD,wBAcC;AAED,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAwB;IAChE,OAAO,uCAAK,SAAS,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAA;AACtE,CAAC;AAFD,0CAEC;AAED,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAmB;IACvE,OAAO,CACL,uCAAK,SAAS,EAAC,wBAAwB,uBAAoB,eAAe,IACvE,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAND,gCAMC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Layout/index.tsx"],"names":[],"mappings":";;;;;;AACA,kDAAwC;AAkBxC,SAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,UAAU,GACqC;IAC/C,OAAO,CACL,uCACE,SAAS,EAAC,kBAAkB,sBACV,UAAU,uBACT,WAAW;QAE9B,8BAAC,eAAe,QAAE,QAAQ,CAAmB,CACzC,CACP,CAAA;AACH,CAAC;AAdD,wBAcC;AAED,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAwB;IAChE,OAAO,uCAAK,SAAS,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAA;AACtE,CAAC;AAFD,0CAEC;AAED,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAA2B;IAC9D,OAAO,uCAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAAA;AACjE,CAAC;AAFD,gCAEC"}

package/lib/components/LiveBlogBody/index.js

@@ -4,15 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const x_interaction_1 = require("@financial-times/x-interaction");
 const x_live_blog_wrapper_1 = require("@financial-times/x-live-blog-wrapper");
+const index_js_1 = __importDefault(require("../RichText/index.js"));
 function LiveBlogBody({ content }) {
     if (content.__typename !== 'LiveBlogPackage')
         return null;
-    const serialiser = new x_interaction_1.Serialiser();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(x_live_blog_wrapper_1.LiveBlogWrapper, { posts: content.liveBlogPosts, articleUrl: `https://www.ft.com/content/${content.id}`, showShareButtons: true, id: "live-blog-wrapper", serialiser: serialiser }),
-        react_1.default.createElement(x_interaction_1.HydrationData, { serialiser: serialiser })));
+    return (react_1.default.createElement(x_live_blog_wrapper_1.LiveBlogWrapper, { posts: content.liveBlogPosts, articleUrl: `https://www.ft.com/content/${content.id}`, showShareButtons: true, id: "live-blog-wrapper", renderRichText: index_js_1.default }));
 }
 exports.default = LiveBlogBody;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kEAA0E;AAC1E,8EAAsE;AAItE,SAAwB,YAAY,CAAC,EAAE,OAAO,EAAa;IACzD,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IACzD,MAAM,UAAU,GAAG,IAAI,0BAAU,EAAE,CAAA;IACnC,OAAO,CACL;QACE,8BAAC,qCAAe,IACd,KAAK,EAAE,OAAO,CAAC,aAAa,EAC5B,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,gBAAgB,EAAE,IAAI,EACtB,EAAE,EAAC,mBAAmB,EACtB,UAAU,EAAE,UAAU,GACtB;QAEF,8BAAC,6BAAa,IAAC,UAAU,EAAE,UAAU,GAAI,CACxC,CACJ,CAAA;AACH,CAAC;AAhBD,+BAgBC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,8EAAsE;AAGtE,oEAA2C;AAE3C,SAAwB,YAAY,CAAC,EAAE,OAAO,EAAa;IACzD,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IACzD,OAAO,CACL,8BAAC,qCAAe,IACd,KAAK,EAAE,OAAO,CAAC,aAAa,EAC5B,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,gBAAgB,EAAE,IAAI,EACtB,EAAE,EAAC,mBAAmB,EACtB,cAAc,EAAE,kBAAQ,GACxB,CACH,CAAA;AACH,CAAC;AAXD,+BAWC"}