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

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

@@ -0,0 +1,170 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = __importDefault(require("."));
+describe('<RichText />', () => {
+    it('renders a HAST tree using built-in components', () => {
+        const tree = {
+            type: 'root',
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'Paragraph',
+                    children: [{ type: 'text', value: 'This is some text.' }],
+                },
+            ],
+        };
+        const structuredContent = { tree };
+        const { asFragment } = (0, react_2.render)(react_1.default.createElement(_1.default, { structuredContent: structuredContent }));
+        expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <p>
+          This is some text.
+        </p>
+      </DocumentFragment>
+    `);
+    });
+    it('adds a key property to all child components', () => {
+        jest.spyOn(react_1.default, 'createElement');
+        const tree = {
+            type: 'root',
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'Link',
+                    properties: {
+                        test: 'blah',
+                    },
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'first link',
+                        },
+                    ],
+                },
+                {
+                    type: 'element',
+                    tagName: 'Link',
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'second link',
+                        },
+                    ],
+                },
+            ],
+        };
+        const structuredContent = {
+            tree,
+        };
+        (0, react_2.render)(react_1.default.createElement(_1.default, { structuredContent: structuredContent }));
+        expect(react_1.createElement).toHaveBeenCalledWith(expect.any(Function), expect.objectContaining({ key: 0 }), ['first link']);
+        expect(react_1.createElement).toHaveBeenCalledWith(expect.any(Function), expect.objectContaining({ key: 1 }), ['second link']);
+    });
+    it("ignores components that it doesn't have a mapping for", () => {
+        const tree = {
+            type: 'root',
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'Link',
+                    properties: {
+                        test: 'blah',
+                    },
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'i should render',
+                        },
+                    ],
+                },
+                {
+                    type: 'element',
+                    tagName: 'Unknown',
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'i should not render',
+                        },
+                    ],
+                },
+            ],
+        };
+        const structuredContent = {
+            tree,
+        };
+        const { queryByText } = (0, react_2.render)(react_1.default.createElement(_1.default, { structuredContent: structuredContent }));
+        expect(queryByText('i should render')).toBeTruthy();
+        expect(queryByText('i should not render')).toBeFalsy();
+    });
+    it('adds references as props', () => {
+        const tree = {
+            type: 'root',
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'Link',
+                    properties: {
+                        dataReferenceId: 0,
+                    },
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'withreference',
+                        },
+                    ],
+                },
+                {
+                    type: 'element',
+                    tagName: 'Link',
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'withoutreference',
+                        },
+                    ],
+                },
+            ],
+        };
+        const structuredContent = {
+            tree,
+            references: [
+                {
+                    __typename: 'Link',
+                    href: 'https://www.ft.com/',
+                },
+            ],
+        };
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(_1.default, { structuredContent: structuredContent }));
+        expect(getByText('withreference')).toHaveProperty('href', 'https://www.ft.com/');
+        expect(getByText('withoutreference')).toHaveProperty('href', '');
+    });
+});
+//# sourceMappingURL=index.test.js.map

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

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

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

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

package/lib/components/Topper/Columnist.js

@@ -0,0 +1,14 @@
+"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"));
+//TODO: add myFT button stuff here
+function Columnist({ authorConcept, }) {
+    var _a;
+    return (react_1.default.createElement("div", { className: "o-topper__columnist" },
+        react_1.default.createElement("a", { className: "o-topper__columnist-name n-content-tag--with-follow", href: (_a = authorConcept.relativeUrl) !== null && _a !== void 0 ? _a : undefined, "data-trackable": "columnist" }, authorConcept.prefLabel)));
+}
+exports.default = Columnist;
+//# sourceMappingURL=Columnist.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Columnist.js","sourceRoot":"","sources":["../../../src/components/Topper/Columnist.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAGzB,kCAAkC;AAClC,SAAwB,SAAS,CAAC,EAChC,aAAa,GAGd;;IACC,OAAO,CACL,uCAAK,SAAS,EAAC,qBAAqB;QAClC,qCACE,SAAS,EAAC,qDAAqD,EAC/D,IAAI,EAAE,MAAA,aAAa,CAAC,WAAW,mCAAI,SAAS,oBAC7B,WAAW,IAEzB,aAAa,CAAC,SAAS,CACtB,CACA,CACP,CAAA;AACH,CAAC;AAhBD,4BAgBC"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type HeadlineProps = {
+    headline: string;
+    isLargeHeadline?: boolean;
+};
+export default function Headline({ headline, isLargeHeadline, }: HeadlineProps): JSX.Element;
+export {};

package/lib/components/Topper/Headline.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 });
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+function Headline({ headline, isLargeHeadline = false, }) {
+    if (!headline) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    const headlineClassnames = (0, classnames_1.default)({
+        'o-topper__headline': true,
+        [`o-topper__headline--large`]: isLargeHeadline,
+    });
+    return (react_1.default.createElement("h1", { className: headlineClassnames },
+        react_1.default.createElement("span", { className: "article-classifier__gap" }, headline)));
+}
+exports.default = Headline;
+//# sourceMappingURL=Headline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Topper/Headline.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAOnC,SAAwB,QAAQ,CAAC,EAC/B,QAAQ,EACR,eAAe,GAAG,KAAK,GACT;IACd,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,6DAAK,CAAA;KACb;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,yBAAyB,IAAE,QAAQ,CAAQ,CACxD,CACN,CAAA;AACH,CAAC;AAlBD,2BAkBC"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function Headshot({ url }: {
+    url: string;
+}): JSX.Element;

package/lib/components/Topper/Headshot.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"));
+function Headshot({ url }) {
+    return (react_1.default.createElement("div", { className: "o-topper__headshot" },
+        react_1.default.createElement("img", { className: "o-topper__headshot-image", src: url, role: "presentation" })));
+}
+exports.default = Headshot;
+//# sourceMappingURL=Headshot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Headshot.js","sourceRoot":"","sources":["../../../src/components/Topper/Headshot.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,SAAwB,QAAQ,CAAC,EAAE,GAAG,EAAmB;IACvD,OAAO,CACL,uCAAK,SAAS,EAAC,oBAAoB;QACjC,uCAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,cAAc,GAAG,CACtE,CACP,CAAA;AACH,CAAC;AAND,2BAMC"}

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

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

package/lib/components/Topper/Intro.js

@@ -0,0 +1,13 @@
+"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 Intro({ structuredContent, source }) {
+    return (react_1.default.createElement("div", { className: `o-topper__${source}` },
+        react_1.default.createElement(RichText_1.default, { structuredContent: structuredContent })));
+}
+exports.default = Intro;
+//# sourceMappingURL=Intro.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Intro.js","sourceRoot":"","sources":["../../../src/components/Topper/Intro.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAQlC,SAAwB,KAAK,CAAC,EAAE,iBAAiB,EAAE,MAAM,EAAc;IACrE,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa,MAAM,EAAE;QACnC,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CAC9C,CACP,CAAA;AACH,CAAC;AAND,wBAMC"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { TopperImagesFragment } from '@financial-times/cp-content-pipeline-client';
+declare type PictureProps = {
+    images?: TopperImagesFragment;
+    alt?: string;
+};
+export default function Picture({ images, alt }: PictureProps): JSX.Element | null;
+export {};

package/lib/components/Topper/Picture.js

@@ -0,0 +1,27 @@
+"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 generateMediaQuery(image) {
+    const queries = [];
+    image.minDisplayWidth && queries.push(`(min-width: ${image.minDisplayWidth})`);
+    image.maxDisplayWidth && queries.push(`(max-width: ${image.maxDisplayWidth})`);
+    return queries.join(' and ');
+}
+const srcSet = (image) => image.sources.map((src) => `${src.url} ${src.dpr}x`).join(',');
+function Picture({ images, alt = '' }) {
+    if (!(images === null || images === void 0 ? void 0 : images.fallback)) {
+        return null;
+    }
+    return (react_1.default.createElement("figure", { className: "o-topper__visual" },
+        react_1.default.createElement("picture", { className: "o-topper__picture", key: "responsive-images" },
+            (images === null || images === void 0 ? void 0 : images.square) && (react_1.default.createElement("source", { media: generateMediaQuery(images.square), srcSet: srcSet(images.square), "data-testid": "responsive-source", key: 'square' })),
+            (images === null || images === void 0 ? void 0 : images.standard) && (react_1.default.createElement("source", { media: generateMediaQuery(images.standard), srcSet: srcSet(images.standard), "data-testid": "responsive-source", key: 'standard' })),
+            (images === null || images === void 0 ? void 0 : images.wide) && (react_1.default.createElement("source", { media: generateMediaQuery(images.wide), srcSet: srcSet(images.wide), "data-testid": "responsive-source", key: 'standard' })),
+            react_1.default.createElement("img", { alt: alt, className: "o-topper__image", src: `${images.fallback.sources[0].url}`, key: "fallback-image" })),
+        images.fallback.copyright && (react_1.default.createElement("figcaption", { className: "o-topper__image-credit" }, images.fallback.copyright))));
+}
+exports.default = Picture;
+//# sourceMappingURL=Picture.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picture.js","sourceRoot":"","sources":["../../../src/components/Topper/Picture.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAYzB,SAAS,kBAAkB,CAAC,KAAoB;IAC9C,MAAM,OAAO,GAAG,EAAE,CAAA;IAClB,KAAK,CAAC,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,eAAe,KAAK,CAAC,eAAe,GAAG,CAAC,CAAA;IAC9E,KAAK,CAAC,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,eAAe,KAAK,CAAC,eAAe,GAAG,CAAC,CAAA;IAE9E,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AAC9B,CAAC;AAED,MAAM,MAAM,GAAG,CAAC,KAAoB,EAAE,EAAE,CACtC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEhE,SAAwB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,EAAE,EAAgB;IAChE,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA,EAAE;QACrB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,0CAAQ,SAAS,EAAC,kBAAkB;QAClC,2CAAS,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAC,mBAAmB;YAC3D,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,CACjB,0CACE,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,EACxC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,iBACjB,mBAAmB,EAC/B,GAAG,EAAE,QAAQ,GACb,CACH;YACA,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAAI,CACnB,0CACE,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAC1C,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,iBACnB,mBAAmB,EAC/B,GAAG,EAAE,UAAU,GACf,CACH;YACA,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,CACf,0CACE,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,EACtC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,iBACf,mBAAmB,EAC/B,GAAG,EAAE,UAAU,GACf,CACH;YACD,uCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,iBAAiB,EAC3B,GAAG,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EACxC,GAAG,EAAC,gBAAgB,GACpB,CACM;QACT,MAAM,CAAC,QAAQ,CAAC,SAAS,IAAI,CAC5B,8CAAY,SAAS,EAAC,wBAAwB,IAC3C,MAAM,CAAC,QAAQ,CAAC,SAAS,CACf,CACd,CACM,CACV,CAAA;AACH,CAAC;AA9CD,0BA8CC"}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ConceptFragment } from '@financial-times/cp-content-pipeline-client';
+declare type TagsProps = {
+    __typename: String;
+    displayConcept?: ConceptFragment;
+    brandConcept?: ConceptFragment;
+};
+export default function Tags({ __typename, displayConcept, brandConcept, }: TagsProps): JSX.Element;
+export {};

package/lib/components/Topper/Tags.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"));
+function Tags({ __typename, displayConcept, brandConcept, }) {
+    var _a;
+    //TODO: add back follow buttons here
+    return (react_1.default.createElement("div", { className: "o-topper__tags" },
+        react_1.default.createElement("div", { className: "topper__primary-theme" },
+            __typename === 'OpinionTopper' && (react_1.default.createElement("span", { className: "o-topper__opinion-genre", "aria-label": "opinion article" }, `Opinion `)),
+            brandConcept && (react_1.default.createElement("a", { href: (_a = brandConcept.relativeUrl) !== null && _a !== void 0 ? _a : undefined, className: "o-topper__brand", "data-trackable": "primary-brand", "aria-label": `part of the ${brandConcept.prefLabel} column` },
+                brandConcept.prefLabel,
+                " \u00A0")),
+            displayConcept && displayConcept.id && (react_1.default.createElement("span", null,
+                ' ',
+                react_1.default.createElement(ConceptLabel, { ...displayConcept }))))));
+}
+exports.default = Tags;
+function ConceptLabel(concept) {
+    return (react_1.default.createElement("a", { href: concept.relativeUrl, className: "o-topper__topic n-content-tag--with-follow js-primary-theme", "data-trackable": "primary-theme", "aria-label": `posted in category ${concept.prefLabel}`, "data-concept-id": concept.id }, concept.prefLabel));
+}
+//# sourceMappingURL=Tags.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Topper/Tags.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AASzB,SAAwB,IAAI,CAAC,EAC3B,UAAU,EACV,cAAc,EACd,YAAY,GACF;;IACV,oCAAoC;IACpC,OAAO,CACL,uCAAK,SAAS,EAAC,gBAAgB;QAC7B,uCAAK,SAAS,EAAC,uBAAuB;YACnC,UAAU,KAAK,eAAe,IAAI,CACjC,wCACE,SAAS,EAAC,yBAAyB,gBACxB,iBAAiB,IAE3B,UAAU,CACN,CACR;YAEA,YAAY,IAAI,CACf,qCACE,IAAI,EAAE,MAAA,YAAY,CAAC,WAAW,mCAAI,SAAS,EAC3C,SAAS,EAAC,iBAAiB,oBACZ,eAAe,gBAClB,eAAe,YAAY,CAAC,SAAS,SAAS;gBAEzD,YAAY,CAAC,SAAS;0BACrB,CACL;YACA,cAAc,IAAI,cAAc,CAAC,EAAE,IAAI,CACtC;gBACG,GAAG;gBACJ,8BAAC,YAAY,OAAK,cAAc,GAAI,CAC/B,CACR,CACG,CACF,CACP,CAAA;AACH,CAAC;AArCD,uBAqCC;AAED,SAAS,YAAY,CAAC,OAAwB;IAC5C,OAAO,CACL,qCACE,IAAI,EAAE,OAAO,CAAC,WAAW,EACzB,SAAS,EAAC,6DAA6D,oBACxD,eAAe,gBAClB,sBAAsB,OAAO,CAAC,SAAS,EAAE,qBACpC,OAAO,CAAC,EAAE,IAE1B,OAAO,CAAC,SAAS,CAChB,CACL,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+declare type WrapperProps = {
+    children: ReactNode;
+    modifiers: string[];
+    backgroundColor?: string;
+};
+export default function Wrapper({ children, modifiers, backgroundColor, }: WrapperProps): JSX.Element;
+export {};

package/lib/components/Topper/Wrapper.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 });
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+function Wrapper({ children, modifiers = [], backgroundColor, }) {
+    const modifierClasses = modifiers.map((modifier) => `o-topper--${modifier}`);
+    const modifierClassesString = modifierClasses.toString().replace(/,/g, ' ');
+    const wrapperClassnames = (0, classnames_1.default)({
+        'o-topper': true,
+        'article-topper': true,
+        [`o-topper--color-${backgroundColor}`]: Boolean(backgroundColor),
+        [`${modifierClassesString}`]: Boolean(modifierClassesString),
+    });
+    return react_1.default.createElement("div", { className: wrapperClassnames }, children);
+}
+exports.default = Wrapper;
+//# sourceMappingURL=Wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../src/components/Topper/Wrapper.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AACxC,4DAAmC;AAQnC,SAAwB,OAAO,CAAC,EAC9B,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,eAAe,GACF;IACb,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAA;IAC5E,MAAM,qBAAqB,GAAG,eAAe,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IAE3E,MAAM,iBAAiB,GAAG,IAAA,oBAAU,EAAC;QACnC,UAAU,EAAE,IAAI;QAChB,gBAAgB,EAAE,IAAI;QACtB,CAAC,mBAAmB,eAAe,EAAE,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;QAChE,CAAC,GAAG,qBAAqB,EAAE,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC;KAC7D,CAAC,CAAA;IAEF,OAAO,uCAAK,SAAS,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAA;AAC5D,CAAC;AAhBD,0BAgBC"}

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

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

package/lib/components/Topper/index.js

@@ -0,0 +1,39 @@
+"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 Wrapper_js_1 = __importDefault(require("./Wrapper.js"));
+const Tags_js_1 = __importDefault(require("./Tags.js"));
+const Headline_js_1 = __importDefault(require("./Headline.js"));
+const Intro_js_1 = __importDefault(require("./Intro.js"));
+const Picture_js_1 = __importDefault(require("./Picture.js"));
+const Headshot_js_1 = __importDefault(require("./Headshot.js"));
+const Columnist_js_1 = __importDefault(require("./Columnist.js"));
+const index_js_1 = __importDefault(require("../Byline/index.js"));
+function Topper({ content }) {
+    const { topper } = content;
+    if (!topper) {
+        return null;
+    }
+    const modifiers = [];
+    'layout' in topper && topper.layout && modifiers.push(topper.layout);
+    'headshot' in topper && topper.headshot && modifiers.push('has-headshot');
+    topper.__typename === 'OpinionTopper' && modifiers.push('opinion');
+    return (react_1.default.createElement("div", { className: "article-topper" },
+        react_1.default.createElement(Wrapper_js_1.default, { backgroundColor: topper.backgroundColour, modifiers: modifiers },
+            react_1.default.createElement("div", { className: "o-topper__content", id: "o-topper" },
+                react_1.default.createElement(Tags_js_1.default, { __typename: topper.__typename, displayConcept: topper.displayConcept, brandConcept: topper.__typename === 'BrandedTopper'
+                        ? topper.brandConcept
+                        : undefined }),
+                react_1.default.createElement(Headline_js_1.default, { headline: topper.headline, isLargeHeadline: 'isLargeHeadline' in topper && topper.isLargeHeadline }),
+                react_1.default.createElement(index_js_1.default, { structuredContent: content.byline }),
+                topper.intro && (react_1.default.createElement(Intro_js_1.default, { structuredContent: topper.intro.structured, source: topper.intro.source })),
+                'headshot' in topper && topper.headshot && (react_1.default.createElement(Headshot_js_1.default, { url: topper.headshot })),
+                topper.__typename === 'OpinionTopper' && topper.columnist && (react_1.default.createElement(Columnist_js_1.default, { authorConcept: topper.columnist }))),
+            react_1.default.createElement("div", { className: "o-topper__background" }),
+            'images' in topper && react_1.default.createElement(Picture_js_1.default, { images: topper.images }))));
+}
+exports.default = Topper;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,8DAAkC;AAClC,wDAA4B;AAC5B,gEAAoC;AACpC,0DAA8B;AAC9B,8DAAkC;AAClC,gEAAoC;AACpC,kEAAsC;AACtC,kEAAuC;AAQvC,SAAwB,MAAM,CAAC,EAAE,OAAO,EAAe;IACrD,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAA;IAE1B,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,SAAS,GAAa,EAAE,CAAA;IAE9B,QAAQ,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACpE,UAAU,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACzE,MAAM,CAAC,UAAU,KAAK,eAAe,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAElE,OAAO,CACL,uCAAK,SAAS,EAAC,gBAAgB;QAC7B,8BAAC,oBAAO,IAAC,eAAe,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,EAAE,SAAS;YACrE,uCAAK,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAC,UAAU;gBAC9C,8BAAC,iBAAI,IACH,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,cAAc,EAAE,MAAM,CAAC,cAAc,EACrC,YAAY,EACV,MAAM,CAAC,UAAU,KAAK,eAAe;wBACnC,CAAC,CAAC,MAAM,CAAC,YAAY;wBACrB,CAAC,CAAC,SAAS,GAEf;gBACF,8BAAC,qBAAQ,IACP,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,eAAe,EACb,iBAAiB,IAAI,MAAM,IAAI,MAAM,CAAC,eAAe,GAEvD;gBACF,8BAAC,kBAAM,IAAC,iBAAiB,EAAE,OAAO,CAAC,MAAM,GAAI;gBAC5C,MAAM,CAAC,KAAK,IAAI,CACf,8BAAC,kBAAK,IACJ,iBAAiB,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU,EAC1C,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,GAC3B,CACH;gBAEA,UAAU,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,IAAI,CAC1C,8BAAC,qBAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,GAAI,CACnC;gBACA,MAAM,CAAC,UAAU,KAAK,eAAe,IAAI,MAAM,CAAC,SAAS,IAAI,CAC5D,8BAAC,sBAAS,IAAC,aAAa,EAAE,MAAM,CAAC,SAAS,GAAI,CAC/C,CACG;YACN,uCAAK,SAAS,EAAC,sBAAsB,GAAG;YACvC,QAAQ,IAAI,MAAM,IAAI,8BAAC,oBAAO,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,GAAI,CACjD,CACN,CACP,CAAA;AACH,CAAC;AApDD,yBAoDC"}

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

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

package/lib/components/UnorderedList/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 UnorderedList({ children }) {
+    return react_1.default.createElement("ul", null, children);
+}
+exports.default = UnorderedList;
+//# sourceMappingURL=index.js.map

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

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

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Body } from './components/Body';
+export { default as Topper } from './components/Topper';
+export { default as Byline } from './components/Byline';
+export { default as ImageSet } from './components/ImageSet';
+export { Layout, LayoutContainer, LayoutSlot } from './components/Layout';
+export { default as UnorderedList } from './components/UnorderedList';
+export { default as ListItem } from './components/ListItem';
+export { default as Recommended } from './components/Recommended';
+export { default as RichText } from './components/RichText';

package/lib/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichText = exports.Recommended = exports.ListItem = exports.UnorderedList = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.ImageSet = exports.Byline = exports.Topper = exports.Body = void 0;
+var Body_1 = require("./components/Body");
+Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
+var Topper_1 = require("./components/Topper");
+Object.defineProperty(exports, "Topper", { enumerable: true, get: function () { return __importDefault(Topper_1).default; } });
+var Byline_1 = require("./components/Byline");
+Object.defineProperty(exports, "Byline", { enumerable: true, get: function () { return __importDefault(Byline_1).default; } });
+var ImageSet_1 = require("./components/ImageSet");
+Object.defineProperty(exports, "ImageSet", { enumerable: true, get: function () { return __importDefault(ImageSet_1).default; } });
+var Layout_1 = require("./components/Layout");
+Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });
+Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return Layout_1.LayoutContainer; } });
+Object.defineProperty(exports, "LayoutSlot", { enumerable: true, get: function () { return Layout_1.LayoutSlot; } });
+var UnorderedList_1 = require("./components/UnorderedList");
+Object.defineProperty(exports, "UnorderedList", { enumerable: true, get: function () { return __importDefault(UnorderedList_1).default; } });
+var ListItem_1 = require("./components/ListItem");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return __importDefault(ListItem_1).default; } });
+var Recommended_1 = require("./components/Recommended");
+Object.defineProperty(exports, "Recommended", { enumerable: true, get: function () { return __importDefault(Recommended_1).default; } });
+var RichText_1 = require("./components/RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return __importDefault(RichText_1).default; } });
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,4DAAqE;AAA5D,+HAAA,OAAO,OAAiB;AACjC,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY"}

package/lib/index.test.d.ts

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

package/lib/index.test.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+test('hello components', () => expect(true).toBe(true));
+//# sourceMappingURL=index.test.js.map

package/lib/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":";;AAAA,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@financial-times/cp-content-pipeline-ui",
+  "version": "0.1.2",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "dotcom-tool-kit build:local",
+    "test": "dotcom-tool-kit test:local",
+    "start": "dotcom-tool-kit run:local"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "devDependencies": {
+    "@dotcom-tool-kit/npm": "^2.0.9",
+    "@financial-times/cp-content-pipeline-client": "^0.2.1",
+    "@testing-library/react": "^13.3.0",
+    "@types/hast": "^2.3.4",
+    "@types/react": "^18.0.15",
+    "eslint-plugin-react": "^7.30.1"
+  },
+  "dependencies": {
+    "@financial-times/o-teaser": "^6.2.2",
+    "@financial-times/x-teaser": "^8.0.3",
+    "classnames": "^2.3.1",
+    "react": "^18.2.0"
+  }
+}

package/src/components/Body/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import RichText from '../RichText'
+
+import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
+import type { ComponentMapRecord } from '../RichText/index.js'
+
+export type BodyProps = {
+  content: ArticleQuery['content']
+  components: ComponentMapRecord
+}
+
+export default function Body({ content, components }: BodyProps) {
+  if (!content?.body?.structured) {
+    return null
+  }
+
+  return (
+    <div className="article-content">
+      <article id="site-content" className="article article-grid">
+        <div className="article__content">
+          <div className="article__content-body n-content-body js-article__content-body">
+            <div className="article__content-body n-content-body js-article__content-body">
+              <article className="n-content-body">
+                <RichText
+                  structuredContent={content.body.structured}
+                  components={components}
+                />
+              </article>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  )
+}

package/src/components/Byline/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import {StructuredTreeFragment} from "@financial-times/cp-content-pipeline-client";
+
+import RichText from "../RichText/index.js";
+
+type BylineProps = {
+    structuredContent: StructuredTreeFragment
+}
+
+export default function Byline({ structuredContent }: BylineProps) {
+        return <RichText structuredContent={structuredContent} />
+}