@financial-times/cp-content-pipeline-ui 0.1.2

package/.toolkitrc.yml

@@ -0,0 +1,12 @@
+plugins:
+  - '@dotcom-tool-kit/npm'
+  - '../../tool-kit/placeholder-hook'
+
+hooks:
+  publish:tag:
+    - NpmPublish
+
+options:
+  '../../tool-kit/placeholder-hook':
+    hooks:
+      - publish:tag

package/CHANGELOG.md

@@ -0,0 +1,62 @@
+# Changelog
+
+## [0.1.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v0.1.1...cp-content-pipeline-ui-v0.1.2) (2022-09-27)
+
+
+### Bug Fixes
+
+* make an innocuous change to trigger a rerelease of these packages ([7ed623d](https://github.com/Financial-Times/cp-content-pipeline/commit/7ed623d126ddc00bc99ee050ddbba1cb18b01ee9))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^0.2.0 to ^0.2.1
+
+## [0.1.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v0.1.0...cp-content-pipeline-ui-v0.1.1) (2022-09-27)
+
+
+### Features
+
+* add Columnist tag to Opinion topper ([b50dc42](https://github.com/Financial-Times/cp-content-pipeline/commit/b50dc42113f3e477b5b30588d886e84fd800d718))
+* add componentMap record for Link ([99a51bd](https://github.com/Financial-Times/cp-content-pipeline/commit/99a51bdb1eda59e6c5d226094a70988f6490a123))
+* add data-image-type attribute to image ([88200bb](https://github.com/Financial-Times/cp-content-pipeline/commit/88200bb366374a6e926124af68564b9a60581508))
+* add Headshot to topper ([a832390](https://github.com/Financial-Times/cp-content-pipeline/commit/a8323906e74d1fdd5d877e12efb9d2168ba20fef))
+* add image caption and alt ([3dd2dd8](https://github.com/Financial-Times/cp-content-pipeline/commit/3dd2dd8cf88a33f8114470b57ea8cba4ea69e352))
+* add LeadImages to Topper ([cb7ad3a](https://github.com/Financial-Times/cp-content-pipeline/commit/cb7ad3af32f5d63fe949686dc2a0d4b80e940f4c))
+* add metadata and BrandedTopper ([57fc4c5](https://github.com/Financial-Times/cp-content-pipeline/commit/57fc4c524b2b690ba993563d971ad10b14b85c10))
+* add OpinionTopper type ([4fc3e38](https://github.com/Financial-Times/cp-content-pipeline/commit/4fc3e386b6cd45b8dc06bee51515f6a8889bd817))
+* add PictureInline variant ([7d3f721](https://github.com/Financial-Times/cp-content-pipeline/commit/7d3f721fec6c9a79a21d076a5517955a15b7089d))
+* add topper image copyright ([49f7c26](https://github.com/Financial-Times/cp-content-pipeline/commit/49f7c26f0ea9a3df1ec3b8ada8c1e9266b824c9c))
+* add topper modifiers ([0ced250](https://github.com/Financial-Times/cp-content-pipeline/commit/0ced25069427db0b1e32dad9b50491cda71b9129))
+* add width attribute to image ([c64f550](https://github.com/Financial-Times/cp-content-pipeline/commit/c64f550b843ead71aef0de839d568b2271ef55e2))
+* allow different image widths and breakpoints ([1210b62](https://github.com/Financial-Times/cp-content-pipeline/commit/1210b62e9f778ee09a9ecd1998bffbefb4234c2d))
+* create byline component and add it to topper ([56d6ed1](https://github.com/Financial-Times/cp-content-pipeline/commit/56d6ed1af1dd31e2f51e95b5e538578d5802a726))
+* expect all imagesets to query for a standard image ([e969747](https://github.com/Financial-Times/cp-content-pipeline/commit/e96974764a6f19eceb3f80e281d046c91e1cbdef))
+* export all UI components in the index ([c7726c2](https://github.com/Financial-Times/cp-content-pipeline/commit/c7726c23adfaaafed846751f2f0a5dc5ce071d53))
+* provide all possible resolutions for image sources ([4d9d586](https://github.com/Financial-Times/cp-content-pipeline/commit/4d9d586ec4578bbd9d8d12e5333ad1f5f9f4e1ff))
+* render all imagesets as <picture> elements ([5ac2051](https://github.com/Financial-Times/cp-content-pipeline/commit/5ac20513a2e07cd7378f21e8bf49e635ad03ba62))
+* render an img tag for single images ([772058e](https://github.com/Financial-Times/cp-content-pipeline/commit/772058e26803b9092fb2de671b0ee0426ec4fb5d))
+* render Layout components ([a134e30](https://github.com/Financial-Times/cp-content-pipeline/commit/a134e301f6eaddd6eb665489b76dfd36097a8903))
+* render topper intro ([e0f5c4c](https://github.com/Financial-Times/cp-content-pipeline/commit/e0f5c4cce964ebf460806e6175e6a7ad180d1780))
+* reserve image width/height to prevent layout shift ([59d2d31](https://github.com/Financial-Times/cp-content-pipeline/commit/59d2d314625f47b73f422ac1a71d7c3afe7fbe6f))
+* set class on article body based on full width images ([337d694](https://github.com/Financial-Times/cp-content-pipeline/commit/337d694486b9d6f8d65c74fdf12e918b01410f4a))
+* turn Body into a generic RichText type ([e0a2b04](https://github.com/Financial-Times/cp-content-pipeline/commit/e0a2b04c8fbadcd9779b53aa30a2c16387b768db))
+* use correct class for standfirst/summary ([6ad5a1f](https://github.com/Financial-Times/cp-content-pipeline/commit/6ad5a1f9193a733ede550f034863b4009f70b228))
+* use correct image data for different topper themes ([319abde](https://github.com/Financial-Times/cp-content-pipeline/commit/319abde3c62b57f97ea0ed109147517a47ac8848))
+* use ImageSource type for image sources ([db767df](https://github.com/Financial-Times/cp-content-pipeline/commit/db767dfd6cd505b33981373d849d70ae0a343dae))
+* use interfaces to represent topper types ([c032c97](https://github.com/Financial-Times/cp-content-pipeline/commit/c032c9780fef7f28b1f9259697e1f234a9466e1e))
+
+
+### Bug Fixes
+
+* fix media query output when between widths ([7e1f8c6](https://github.com/Financial-Times/cp-content-pipeline/commit/7e1f8c6ea7d96207656920a7054695255d4a4b38))
+* only render figcaption if there is a copyright ([e3a9e93](https://github.com/Financial-Times/cp-content-pipeline/commit/e3a9e9363b380ad4422daea89974c05036a3a484))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^0.0.0 to ^0.2.0

package/README.md

@@ -0,0 +1,27 @@
+# Components
+
+This package provides a set of React components that can be used to render the content received from the GraphQL API.
+
+The `<Body>` component does the bulk of the work in rendering the entire content tree into a set of defined React components.
+
+A default set of components have been provided for rendering all elements that constitute an FT content body - however these can be overridden for clients that have different rendering requirements.
+
+## Installing
+
+TODO
+
+## Usage
+
+```
+import { Body, Recommended } from '@financial-times/cp-content-pipeline-ui'
+const removeOutboundLinks = (props) => <span>{...props.children}</span>
+const removeImageFromRecommended = (props) => <Recommended {...props} teaser={{ ...props.teaser, showImage:false }}/>
+
+...
+	const componentOverrides = {
+		Link: removeOutboundLinks,
+		Recommended: removeImageFromRecommended
+	};
+	<Body content={articleData} components={componentOverrides}>
+
+```

package/jest.config.mjs

@@ -0,0 +1,6 @@
+import base from '../../jest.config.base.mjs'
+
+export default {
+  ...base,
+  testEnvironment: 'jsdom',
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
+import type { ComponentMapRecord } from '../RichText/index.js';
+export declare type BodyProps = {
+    content: ArticleQuery['content'];
+    components: ComponentMapRecord;
+};
+export default function Body({ content, components }: BodyProps): JSX.Element | null;

package/lib/components/Body/index.js

@@ -0,0 +1,22 @@
+"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"));
+const RichText_1 = __importDefault(require("../RichText"));
+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)) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "article-content" },
+        react_1.default.createElement("article", { id: "site-content", className: "article article-grid" },
+            react_1.default.createElement("div", { className: "article__content" },
+                react_1.default.createElement("div", { className: "article__content-body n-content-body js-article__content-body" },
+                    react_1.default.createElement("div", { className: "article__content-body n-content-body js-article__content-body" },
+                        react_1.default.createElement("article", { className: "n-content-body" },
+                            react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components: components }))))))));
+}
+exports.default = Body;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAUlC,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,OAAO,CACL,uCAAK,SAAS,EAAC,iBAAiB;QAC9B,2CAAS,EAAE,EAAC,cAAc,EAAC,SAAS,EAAC,sBAAsB;YACzD,uCAAK,SAAS,EAAC,kBAAkB;gBAC/B,uCAAK,SAAS,EAAC,+DAA+D;oBAC5E,uCAAK,SAAS,EAAC,+DAA+D;wBAC5E,2CAAS,SAAS,EAAC,gBAAgB;4BACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,UAAU,GACtB,CACM,CACN,CACF,CACF,CACE,CACN,CACP,CAAA;AACH,CAAC;AAvBD,uBAuBC"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StructuredTreeFragment } from "@financial-times/cp-content-pipeline-client";
+declare type BylineProps = {
+    structuredContent: StructuredTreeFragment;
+};
+export default function Byline({ structuredContent }: BylineProps): JSX.Element;
+export {};

package/lib/components/Byline/index.js

@@ -0,0 +1,12 @@
+"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"));
+const index_js_1 = __importDefault(require("../RichText/index.js"));
+function Byline({ structuredContent }) {
+    return react_1.default.createElement(index_js_1.default, { structuredContent: structuredContent });
+}
+exports.default = Byline;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Byline/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAGzB,oEAA4C;AAM5C,SAAwB,MAAM,CAAC,EAAE,iBAAiB,EAAe;IACzD,OAAO,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CAAA;AACjE,CAAC;AAFD,yBAEC"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ImageSetFragment } from '@financial-times/cp-content-pipeline-client';
+export default function ImageSet(fragment: ImageSetFragment): JSX.Element;

package/lib/components/ImageSet/index.js

@@ -0,0 +1,64 @@
+"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"));
+const srcSet = (image) => image.sources.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',
+};
+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 }));
+}
+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 });
+}
+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.`);
+    }
+    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))));
+}
+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 });
+    }
+}
+exports.default = ImageSet;
+//# sourceMappingURL=index.js.map

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

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+declare type LayoutProps = {
+    children: ReactNode;
+    dataLayoutName: string;
+    dataLayoutWidth: 'full-grid' | 'fullWidth';
+};
+declare type LayoutContainerProps = {
+    children: ReactNode;
+};
+declare type LayoutSlotProps = {
+    children: ReactNode;
+    dataLayoutWidth: string;
+};
+export declare function Layout({ children, dataLayoutName, dataLayoutWidth, }: LayoutProps): JSX.Element;
+export declare function LayoutContainer({ children }: LayoutContainerProps): JSX.Element;
+export declare function LayoutSlot({ children, dataLayoutWidth }: LayoutSlotProps): JSX.Element;
+export {};

package/lib/components/Layout/index.js

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

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

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

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

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export default function ListItem({ children }: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/components/ListItem/index.js

@@ -0,0 +1,11 @@
+"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"));
+function ListItem({ children }) {
+    return react_1.default.createElement("li", null, children);
+}
+exports.default = ListItem;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListItem/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AAExC,SAAwB,QAAQ,CAAC,EAAE,QAAQ,EAA2B;IACpE,OAAO,0CAAK,QAAQ,CAAM,CAAA;AAC5B,CAAC;AAFD,2BAEC"}

package/lib/components/Recommended/RecommendedTitle.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export default function RecommendedTitle({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/components/Recommended/RecommendedTitle.js

@@ -0,0 +1,11 @@
+"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"));
+function RecommendedTitle({ children, }) {
+    return react_1.default.createElement("h2", { className: "n-content-recommended__title" }, children);
+}
+exports.default = RecommendedTitle;
+//# sourceMappingURL=RecommendedTitle.js.map

package/lib/components/Recommended/RecommendedTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendedTitle.js","sourceRoot":"","sources":["../../../src/components/Recommended/RecommendedTitle.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AAExC,SAAwB,gBAAgB,CAAC,EACvC,QAAQ,GAGT;IACC,OAAO,sCAAI,SAAS,EAAC,8BAA8B,IAAE,QAAQ,CAAM,CAAA;AACrE,CAAC;AAND,mCAMC"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RecommendedFragment } from '@financial-times/cp-content-pipeline-client';
+export default function RecommendedComponent({ title, teaser, }: RecommendedFragment): JSX.Element;

package/lib/components/Recommended/index.js

@@ -0,0 +1,16 @@
+"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 Teaser_cjs_js_1 = require("@financial-times/x-teaser/dist/Teaser.cjs.js");
+const RecommendedTitle_1 = __importDefault(require("./RecommendedTitle"));
+function RecommendedComponent({ title, teaser, }) {
+    return (react_1.default.createElement("aside", { className: "n-content-recommended--single-story" },
+        react_1.default.createElement(RecommendedTitle_1.default, null, title),
+        react_1.default.createElement(Teaser_cjs_js_1.Teaser, { modifiers: ['stacked'], ...Teaser_cjs_js_1.presets.SmallHeavy, ...teaser })));
+}
+exports.default = RecommendedComponent;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Recommended/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,gFAA8E;AAC9E,0EAAiD;AAIjD,SAAwB,oBAAoB,CAAC,EAC3C,KAAK,EACL,MAAM,GACc;IACpB,OAAO,CACL,yCAAO,SAAS,EAAC,qCAAqC;QACpD,8BAAC,0BAAgB,QAAE,KAAK,CAAoB;QAC5C,8BAAC,sBAAM,IACL,SAAS,EAAE,CAAC,SAAS,CAAC,KAClB,uBAAO,CAAC,UAAU,KAClB,MAAM,GACV,CACI,CACT,CAAA;AACH,CAAC;AAdD,uCAcC"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as hast from 'hast';
+import type { Reference, StructuredContentFragment } from '@financial-times/cp-content-pipeline-client';
+export declare type ComponentMapRecord = Record<string, React.ElementType>;
+export declare type RenderHastTreeArguments = {
+    root: hast.Root;
+    components: ComponentMapRecord;
+    references?: Reference[];
+};
+declare type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export declare type RichTextProps = {
+    structuredContent: WithOptionalProperty<StructuredContentFragment, 'references'>;
+    components?: ComponentMapRecord;
+};
+export default function RichText({ structuredContent, components, }: RichTextProps): JSX.Element | null;
+export {};

package/lib/components/RichText/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _HastToJSX_instances, _HastToJSX_getPropsForNode, _HastToJSX_renderChild;
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Recommended_1 = __importDefault(require("../Recommended"));
+const ImageSet_1 = __importDefault(require("../ImageSet"));
+const RecommendedTitle_1 = __importDefault(require("../Recommended/RecommendedTitle"));
+const UnorderedList_1 = __importDefault(require("../UnorderedList"));
+const ListItem_1 = __importDefault(require("../ListItem"));
+const Layout_1 = require("../Layout");
+/* This will be the default set of components we provide, that most
+ * clients can use to render a workable article page
+ */
+const componentMap = {
+    Paragraph: 'p',
+    Recommended: Recommended_1.default,
+    UnorderedList: UnorderedList_1.default,
+    ListItem: ListItem_1.default,
+    FTContent: (props) => react_1.default.createElement("a", { href: props.url }, props.children),
+    RecommendedTitle: RecommendedTitle_1.default,
+    Link: (props) => react_1.default.createElement("a", { href: props.href }, props.children),
+    ImageSet: ImageSet_1.default,
+    Layout: Layout_1.Layout,
+    LayoutContainer: Layout_1.LayoutContainer,
+    LayoutSlot: Layout_1.LayoutSlot,
+    LayoutImage: ImageSet_1.default,
+    Experimental: (props) => props.children,
+};
+function isHastElement(element) {
+    return element.tagName !== undefined;
+}
+class HastToJSX {
+    constructor(components, references) {
+        _HastToJSX_instances.add(this);
+        this.index = 0;
+        this.components = components;
+        this.references = references;
+    }
+    render(tree) {
+        const children = tree.children.map((node) => __classPrivateFieldGet(this, _HastToJSX_instances, "m", _HastToJSX_renderChild).call(this, node));
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+}
+_HastToJSX_instances = new WeakSet(), _HastToJSX_getPropsForNode = function _HastToJSX_getPropsForNode(node) {
+    var _a, _b, _c;
+    const reference = typeof ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.dataReferenceId) === 'number'
+        ? (_b = this.references) === null || _b === void 0 ? void 0 : _b[(_c = node.properties) === null || _c === void 0 ? void 0 : _c.dataReferenceId]
+        : {};
+    return {
+        ...node.properties,
+        ...reference,
+        key: this.index++,
+    };
+}, _HastToJSX_renderChild = function _HastToJSX_renderChild(node) {
+    if (node.type === 'text') {
+        return node.value;
+    }
+    else if (!isHastElement(node)) {
+        return null;
+    }
+    const component = this.components[node.tagName];
+    if (component) {
+        const childElements = node.children
+            .map((child) => __classPrivateFieldGet(this, _HastToJSX_instances, "m", _HastToJSX_renderChild).call(this, child))
+            .filter(Boolean);
+        return (0, react_1.createElement)(component, __classPrivateFieldGet(this, _HastToJSX_instances, "m", _HastToJSX_getPropsForNode).call(this, node), childElements);
+    }
+};
+function RichText({ structuredContent, components, }) {
+    if (!structuredContent) {
+        return null;
+    }
+    const componentsWithOverrides = {
+        ...componentMap,
+        ...components,
+    };
+    const renderer = new HastToJSX(componentsWithOverrides, structuredContent.references);
+    return renderer.render(structuredContent.tree);
+}
+exports.default = RichText;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AACvD,iEAAwC;AACxC,2DAAkC;AAClC,uFAA8D;AAC9D,qEAA4C;AAC5C,2DAAkC;AAClC,sCAA+D;AA+B/D;;GAEG;AAEH,MAAM,YAAY,GAAuB;IACvC,SAAS,EAAE,GAAG;IACd,WAAW,EAAX,qBAAW;IACX,aAAa,EAAb,uBAAa;IACb,QAAQ,EAAR,kBAAQ;IACR,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qCAAG,IAAI,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAK;IAC9D,gBAAgB,EAAhB,0BAAgB;IAChB,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qCAAG,IAAI,EAAE,KAAK,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAK;IAC1D,QAAQ,EAAR,kBAAQ;IACR,MAAM,EAAN,eAAM;IACN,eAAe,EAAf,wBAAe;IACf,UAAU,EAAV,mBAAU;IACV,WAAW,EAAE,kBAAQ;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ;CACxC,CAAA;AAED,SAAS,aAAa,CAAC,OAAqB;IAC1C,OAAQ,OAAwB,CAAC,OAAO,KAAK,SAAS,CAAA;AACxD,CAAC;AAED,MAAM,SAAS;IAKb,YACE,UAA8B,EAC9B,UAAoD;;QAJtD,UAAK,GAAG,CAAC,CAAA;QAMP,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;QAC5B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;IAC9B,CAAC;IAoCD,MAAM,CAAC,IAAe;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAkB,EAAE,EAAE,CACxD,uBAAA,IAAI,oDAAa,MAAjB,IAAI,EAAc,IAAI,CAAC,CACxB,CAAA;QAED,OAAO,8DAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;CACF;uGAzCkB,IAAkB;;IACjC,MAAM,SAAS,GACb,OAAO,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe,CAAA,KAAK,QAAQ;QAClD,CAAC,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe,CAAC;QACrD,CAAC,CAAC,EAAE,CAAA;IACR,OAAO;QACL,GAAG,IAAI,CAAC,UAAU;QAClB,GAAG,SAAS;QACZ,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE;KAClB,CAAA;AACH,CAAC,2DAEY,IAAkB;IAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;QACxB,OAAO,IAAI,CAAC,KAAK,CAAA;KAClB;SAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE;QAC/B,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAE/C,IAAI,SAAS,EAAE;QACb,MAAM,aAAa,GAAgB,IAAI,CAAC,QAAQ;aAC7C,GAAG,CAAC,CAAC,KAAmB,EAAE,EAAE,CAAC,uBAAA,IAAI,oDAAa,MAAjB,IAAI,EAAc,KAAK,CAAC,CAAC;aACtD,MAAM,CAAC,OAAO,CAAC,CAAA;QAElB,OAAO,IAAA,qBAAa,EAClB,SAAS,EACT,uBAAA,IAAI,wDAAiB,MAArB,IAAI,EAAkB,IAAI,CAAC,EAC3B,aAAa,CACd,CAAA;KACF;AACH,CAAC;AAWH,SAAwB,QAAQ,CAAC,EAC/B,iBAAiB,EACjB,UAAU,GACI;IACd,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,uBAAuB,GAAG;QAC9B,GAAG,YAAY;QACf,GAAG,UAAU;KACd,CAAA;IAED,MAAM,QAAQ,GAAG,IAAI,SAAS,CAC5B,uBAAuB,EACvB,iBAAiB,CAAC,UAAU,CAC7B,CAAA;IACD,OAAO,QAAQ,CAAC,MAAM,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AAChD,CAAC;AAlBD,2BAkBC"}

package/lib/components/RichText/index.test.d.ts

@@ -0,0 +1 @@
+export {};