@financial-times/cp-content-pipeline-ui 6.14.1 → 6.15.1

package/lib/stories/Expander.stories.js

@@ -26,56 +26,218 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnlyMobileServer = exports.OnlyMobileWithClient = exports.WithClient = exports.OnlyServer = void 0;
+exports.NoMoreElements = exports.OnlyMobileServer = exports.OnlyMobileWithClient = exports.WithClient = exports.OnlyServer = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const Expander_1 = require("../components/Expander");
 const client_1 = require("../components/Expander/client");
 const react_1 = __importStar(require("react"));
 const main_1 = __importDefault(require("@financial-times/o-tracking/main"));
 require("./Expander.stories.scss");
 const client_2 = __importDefault(require("../components/Clip/client"));
-require("./Clip.stories.scss");
 const RichText_1 = __importDefault(require("../components/RichText"));
 const structuredContent = {
-    type: 'body',
-    version: 1,
-    children: [
-        {
-            type: 'paragraph',
-            children: [
-                {
-                    type: 'text',
-                    value: 'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+    tree: {
+        type: 'body',
+        version: 1,
+        children: [
+            {
+                type: 'image-set',
+                id: 'http://api.ft.com/content/57b3150f-434e-4463-a863-3311d53bf5c2',
+                data: {
+                    referenceIndex: 0,
                 },
-            ],
-        },
+            },
+            {
+                type: 'paragraph',
+                children: [
+                    {
+                        type: 'text',
+                        value: 'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+                    },
+                ],
+            },
+            {
+                type: 'paragraph',
+                children: [
+                    {
+                        type: 'text',
+                        value: 'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
+                    },
+                ],
+            },
+            ,
+            {
+                type: 'paragraph',
+                children: [
+                    {
+                        type: 'text',
+                        value: 'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
+                    },
+                ],
+            },
+            {
+                id: 'http://api.ft.com/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+                type: 'recommended',
+                heading: 'Recommended',
+                teaserTitleOverride: 'Hargreaves Lansdown backs £5.4bn private equity takeover ',
+                data: {
+                    referenceIndex: 1,
+                },
+            },
+        ],
+    },
+    references: [
         {
-            type: 'paragraph',
-            children: [
-                {
-                    type: 'text',
-                    value: 'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
+            type: 'image-set',
+            picture: {
+                __typename: 'PictureStandard',
+                alt: 'A Waitrose shop in London ',
+                caption: 'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+                credit: '© Ian Smith/FT',
+                imageType: 'image',
+                layoutWidth: 'standard',
+                fallbackImage: {
+                    __typename: 'ImageStandardInline',
+                    height: 1368,
+                    width: 1600,
+                    caption: 'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+                    credit: '© Ian Smith/FT',
+                    format: 'standard-inline',
+                    url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+                    id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
                 },
-            ],
+                images: [
+                    {
+                        __typename: 'ImageStandardInline',
+                        height: 1368,
+                        width: 1600,
+                        caption: 'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+                        credit: '© Ian Smith/FT',
+                        format: 'standard-inline',
+                        url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+                        id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
+                        sourceSet: [
+                            {
+                                dpr: 1,
+                                width: 700,
+                                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+                            },
+                            {
+                                dpr: 2,
+                                width: 700,
+                                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=2',
+                            },
+                        ],
+                    },
+                ],
+            },
         },
-        ,
         {
-            type: 'paragraph',
-            children: [
-                {
-                    type: 'text',
-                    value: 'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
+            type: 'recommended',
+            isInLiveBlog: true,
+            teaser: {
+                title: 'Hargreaves Lansdown backs £5.4bn private equity takeover ',
+                id: '02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+                url: 'https://www.ft.com/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+                relativeUrl: '/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+                type: 'article',
+                publishedDate: '2024-06-18T15:25:49.739Z',
+                firstPublishedDate: '2024-06-18T13:49:35.049Z',
+                metaPrefixText: null,
+                metaSuffixText: null,
+                metaLink: {
+                    id: '4d1b8529-f8a3-4740-97e6-4a6f68214092',
+                    url: 'https://www.ft.com/stream/4d1b8529-f8a3-4740-97e6-4a6f68214092',
+                    relativeUrl: '/stream/4d1b8529-f8a3-4740-97e6-4a6f68214092',
+                    prefLabel: 'Hargreaves Lansdown PLC',
+                },
+                metaAltLink: null,
+                image: {
+                    url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F409586da-1e01-42d8-b4e6-cd99b82923b3.jpg?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+                    width: 2266,
+                    height: 1275,
+                    altText: 'Hargreaves Lansdown logo',
                 },
-            ],
+                indicators: {
+                    accessLevel: 'subscribed',
+                    isOpinion: false,
+                    isColumn: false,
+                    isPodcast: false,
+                    isEditorsChoice: false,
+                    isExclusive: false,
+                    isScoop: false,
+                },
+            },
         },
+    ],
+};
+const structuredContentNoMoreElements = {
+    tree: {
+        type: 'body',
+        version: 1,
+        children: [
+            {
+                type: 'image-set',
+                id: 'http://api.ft.com/content/57b3150f-434e-4463-a863-3311d53bf5c2',
+                data: {
+                    referenceIndex: 0,
+                },
+            },
+            {
+                type: 'paragraph',
+                children: [
+                    {
+                        type: 'text',
+                        value: 'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+                    },
+                ],
+            },
+        ],
+    },
+    references: [
         {
-            type: 'clip-set',
-            id: 'http://api.ft.com/content/23a00095-d9fc-4cac-ad7c-477e61e3c159',
-            autoplay: false,
-            loop: false,
-            muted: false,
-            dataLayout: 'in-line',
-            data: {
-                referenceIndex: 3,
+            type: 'image-set',
+            picture: {
+                __typename: 'PictureStandard',
+                alt: 'A Waitrose shop in London ',
+                caption: 'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+                credit: '© Ian Smith/FT',
+                imageType: 'image',
+                layoutWidth: 'standard',
+                fallbackImage: {
+                    __typename: 'ImageStandardInline',
+                    height: 1368,
+                    width: 1600,
+                    caption: 'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+                    credit: '© Ian Smith/FT',
+                    format: 'standard-inline',
+                    url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+                    id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
+                },
+                images: [
+                    {
+                        __typename: 'ImageStandardInline',
+                        height: 1368,
+                        width: 1600,
+                        caption: 'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+                        credit: '© Ian Smith/FT',
+                        format: 'standard-inline',
+                        url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+                        id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
+                        sourceSet: [
+                            {
+                                dpr: 1,
+                                width: 700,
+                                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+                            },
+                            {
+                                dpr: 2,
+                                width: 700,
+                                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=2',
+                            },
+                        ],
+                    },
+                ],
             },
         },
     ],
@@ -85,6 +247,7 @@ const storyArgs = {
     collapseLabel: 'Close',
     onlyMobile: false,
     id: '111232323-12123-2323',
+    structuredContent: structuredContent,
 };
 exports.default = {
     title: 'Expander',
@@ -101,6 +264,7 @@ const LiveBLogWrapper = (args) => {
             react_1.default.createElement("div", { className: "article__right " }))));
 };
 const LiveBlogPostWrapper = (args) => {
+    const { structuredContent, ...expanderProps } = args;
     (0, react_1.useEffect)(() => {
         main_1.default.init({
             context: { product: 'next' },
@@ -114,8 +278,8 @@ const LiveBlogPostWrapper = (args) => {
     return (react_1.default.createElement("article", { id: args.id },
         react_1.default.createElement("div", { className: "n-content-body" },
             react_1.default.createElement("div", { "data-trackable": "truncated-post", "data-trackable-context-post": "1234", "data-component": "example-boundary" },
-                react_1.default.createElement(Expander_1.ExpanderServer, { ...args, id: `${args.id}_expander` },
-                    react_1.default.createElement(RichText_1.default, { structuredContent: { tree: structuredContent } }))))));
+                react_1.default.createElement(Expander_1.ExpanderServer, { ...expanderProps, id: `${args.id}_expander` },
+                    react_1.default.createElement(RichText_1.default, { structuredContent: structuredContent }))))));
 };
 const OnlyServer = (args) => {
     return react_1.default.createElement(LiveBLogWrapper, { ...args });
@@ -139,4 +303,11 @@ exports.OnlyMobileWithClient = exports.WithClient;
 exports.OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true };
 exports.OnlyMobileServer = exports.OnlyServer;
 exports.OnlyMobileServer.args = { ...storyArgs, onlyMobile: true };
+const NoMoreElements = (args) => {
+    return (0, exports.WithClient)({
+        ...args,
+        structuredContent: structuredContentNoMoreElements,
+    });
+};
+exports.NoMoreElements = NoMoreElements;
 //# sourceMappingURL=Expander.stories.js.map

package/lib/stories/Expander.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.stories.js","sourceRoot":"","sources":["../../src/stories/Expander.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Expander.stories.js","sourceRoot":"","sources":["../../src/stories/Expander.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAuD;AACvD,qDAAsE;AACtE,0DAA8D;AAC9D,+CAAwC;AACxC,4EAAwD;AACxD,mCAAgC;AAChC,uEAAkD;AAClD,sEAA6C;AAK7C,MAAM,iBAAiB,GAAG;IACxB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,EAAE,EAAE,gEAAgE;gBACpE,IAAI,EAAE;oBACJ,cAAc,EAAE,CAAC;iBAClB;aACsB;YACzB;gBACE,IAAI,EAAE,WAAW;gBACjB,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,MAAM;wBACZ,KAAK,EACH,2KAA2K;qBAC9K;iBACF;aACuB;YAC1B;gBACE,IAAI,EAAE,WAAW;gBACjB,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,MAAM;wBACZ,KAAK,EACH,qJAAqJ;qBACxJ;iBACF;aACuB;YAC1B,AAD2B;YAE3B;gBACE,IAAI,EAAE,WAAW;gBACjB,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,MAAM;wBACZ,KAAK,EACH,sNAAsN;qBACzN;iBACF;aACuB;YAC1B;gBACE,EAAE,EAAE,gEAAgE;gBACpE,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,aAAa;gBACtB,mBAAmB,EACjB,2DAA2D;gBAC7D,IAAI,EAAE;oBACJ,cAAc,EAAE,CAAC;iBAClB;aACF;SAC8B;KAClC;IACD,UAAU,EAAE;QACV;YACE,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,UAAU,EAAE,iBAAiB;gBAC7B,GAAG,EAAE,4BAA4B;gBACjC,OAAO,EACL,2JAA2J;gBAC7J,MAAM,EAAE,gBAAgB;gBACxB,SAAS,EAAE,OAAO;gBAClB,WAAW,EAAE,UAAU;gBACvB,aAAa,EAAE;oBACb,UAAU,EAAE,qBAAqB;oBACjC,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE,IAAI;oBACX,OAAO,EACL,2JAA2J;oBAC7J,MAAM,EAAE,gBAAgB;oBACxB,MAAM,EAAE,iBAAiB;oBACzB,GAAG,EAAE,iOAAiO;oBACtO,EAAE,EAAE,sCAAsC;iBAC3C;gBACD,MAAM,EAAE;oBACN;wBACE,UAAU,EAAE,qBAAqB;wBACjC,MAAM,EAAE,IAAI;wBACZ,KAAK,EAAE,IAAI;wBACX,OAAO,EACL,2JAA2J;wBAC7J,MAAM,EAAE,gBAAgB;wBACxB,MAAM,EAAE,iBAAiB;wBACzB,GAAG,EAAE,iOAAiO;wBACtO,EAAE,EAAE,sCAAsC;wBAC1C,SAAS,EAAE;4BACT;gCACE,GAAG,EAAE,CAAC;gCACN,KAAK,EAAE,GAAG;gCACV,GAAG,EAAE,0KAA0K;6BAChL;4BACD;gCACE,GAAG,EAAE,CAAC;gCACN,KAAK,EAAE,GAAG;gCACV,GAAG,EAAE,0KAA0K;6BAChL;yBACF;qBACF;iBACF;aACF;SACF;QACD;YACE,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE;gBACN,KAAK,EAAE,2DAA2D;gBAClE,EAAE,EAAE,sCAAsC;gBAC1C,GAAG,EAAE,iEAAiE;gBACtE,WAAW,EAAE,+CAA+C;gBAC5D,IAAI,EAAE,SAAS;gBACf,aAAa,EAAE,0BAA0B;gBACzC,kBAAkB,EAAE,0BAA0B;gBAC9C,cAAc,EAAE,IAAI;gBACpB,cAAc,EAAE,IAAI;gBACpB,QAAQ,EAAE;oBACR,EAAE,EAAE,sCAAsC;oBAC1C,GAAG,EAAE,gEAAgE;oBACrE,WAAW,EAAE,8CAA8C;oBAC3D,SAAS,EAAE,yBAAyB;iBACrC;gBACD,WAAW,EAAE,IAAI;gBACjB,KAAK,EAAE;oBACL,GAAG,EAAE,iOAAiO;oBACtO,KAAK,EAAE,IAAI;oBACX,MAAM,EAAE,IAAI;oBACZ,OAAO,EAAE,0BAA0B;iBACpC;gBACD,UAAU,EAAE;oBACV,WAAW,EAAE,YAAY;oBACzB,SAAS,EAAE,KAAK;oBAChB,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,KAAK;oBAChB,eAAe,EAAE,KAAK;oBACtB,WAAW,EAAE,KAAK;oBAClB,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAA;AAED,MAAM,+BAA+B,GAAG;IACtC,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,EAAE,EAAE,gEAAgE;gBACpE,IAAI,EAAE;oBACJ,cAAc,EAAE,CAAC;iBAClB;aACsB;YACzB;gBACE,IAAI,EAAE,WAAW;gBACjB,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,MAAM;wBACZ,KAAK,EACH,2KAA2K;qBAC9K;iBACF;aACuB;SAC3B;KACF;IACD,UAAU,EAAE;QACV;YACE,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,UAAU,EAAE,iBAAiB;gBAC7B,GAAG,EAAE,4BAA4B;gBACjC,OAAO,EACL,2JAA2J;gBAC7J,MAAM,EAAE,gBAAgB;gBACxB,SAAS,EAAE,OAAO;gBAClB,WAAW,EAAE,UAAU;gBACvB,aAAa,EAAE;oBACb,UAAU,EAAE,qBAAqB;oBACjC,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE,IAAI;oBACX,OAAO,EACL,2JAA2J;oBAC7J,MAAM,EAAE,gBAAgB;oBACxB,MAAM,EAAE,iBAAiB;oBACzB,GAAG,EAAE,iOAAiO;oBACtO,EAAE,EAAE,sCAAsC;iBAC3C;gBACD,MAAM,EAAE;oBACN;wBACE,UAAU,EAAE,qBAAqB;wBACjC,MAAM,EAAE,IAAI;wBACZ,KAAK,EAAE,IAAI;wBACX,OAAO,EACL,2JAA2J;wBAC7J,MAAM,EAAE,gBAAgB;wBACxB,MAAM,EAAE,iBAAiB;wBACzB,GAAG,EAAE,iOAAiO;wBACtO,EAAE,EAAE,sCAAsC;wBAC1C,SAAS,EAAE;4BACT;gCACE,GAAG,EAAE,CAAC;gCACN,KAAK,EAAE,GAAG;gCACV,GAAG,EAAE,0KAA0K;6BAChL;4BACD;gCACE,GAAG,EAAE,CAAC;gCACN,KAAK,EAAE,GAAG;gCACV,GAAG,EAAE,0KAA0K;6BAChL;yBACF;qBACF;iBACF;aACF;SACF;KACF;CACF,CAAA;AAED,MAAM,SAAS,GAAa;IAC1B,WAAW,EAAE,MAAM;IACnB,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,KAAK;IACjB,EAAE,EAAE,sBAAsB;IAC1B,iBAAiB,EAAE,iBAAiB;CACrC,CAAA;AAED,kBAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,yBAAc;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAA;AAED,MAAM,eAAe,GAAuB,CAAC,IAAI,EAAE,EAAE;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAE3B,OAAO,CACL,uCAAK,SAAS,EAAE,UAAU;QACxB,2CACE,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,wEAAwE,uBAChE,wBAAwB;YAE1C,uCACE,SAAS,EAAC,kBAAkB,oBACb,cAAc,oBACd,cAAc,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;gBAE/B,uCACE,SAAS,EAAC,+DAA+D,oBAC1D,sBAAsB;oBAErC,8BAAC,mBAAmB,OAAK,IAAI,EAAE,EAAE,EAAC,KAAK,GAAuB,CAC1D,CACF;YACN,uCAAK,SAAS,EAAC,iBAAiB,GAAO,CAC/B,CACN,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,IAAc,EAAE,EAAE;IAC7C,MAAM,EAAE,iBAAiB,EAAE,GAAG,aAAa,EAAE,GAAG,IAAI,CAAA;IACpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,cAAS,CAAC,IAAI,CAAC;YACb,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC5B,IAAI,EAAE,IAAI;SACX,CAAC,CAAA;QAEF,MAAM,KAAK,GAAG,gBAAU,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;QAEvC,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;QACxC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,2CAAS,EAAE,EAAE,IAAI,CAAC,EAAE;QAClB,uCAAK,SAAS,EAAC,gBAAgB;YAC7B,yDACiB,gBAAgB,iCACH,MAAM,oBACnB,kBAAkB;gBAEjC,8BAAC,yBAAc,OAAK,aAAa,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,WAAW;oBAC1D,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CACnC,CACb,CACF,CACE,CACX,CAAA;AACH,CAAC,CAAA;AAEM,MAAM,UAAU,GAAG,CAAC,IAAc,EAAE,EAAE;IAC3C,OAAO,8BAAC,eAAe,OAAK,IAAI,GAAI,CAAA;AACtC,CAAC,CAAA;AAFY,QAAA,UAAU,cAEtB;AAED,kBAAU,CAAC,IAAI,GAAG,EAAE,GAAG,SAAS,EAAE,CAAA;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAc,EAAE,EAAE;IAC3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,gBAAU,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;QACvC,MAAM,SAAS,GAAG,uBAAc,CAAC,IAAI,EAAE,CAAA;QACvC,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;YACtC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,8BAAC,eAAe,OAAK,IAAI,GAAI,CAAA;AACtC,CAAC,CAAA;AAVY,QAAA,UAAU,cAUtB;AAED,kBAAU,CAAC,IAAI,GAAG,EAAE,GAAG,SAAS,EAAE,CAAA;AAErB,QAAA,oBAAoB,GAAG,kBAAU,CAAA;AAC9C,4BAAoB,CAAC,IAAI,GAAG,EAAE,GAAG,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,CAAA;AAEjD,QAAA,gBAAgB,GAAG,kBAAU,CAAA;AAC1C,wBAAgB,CAAC,IAAI,GAAG,EAAE,GAAG,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,CAAA;AAEnD,MAAM,cAAc,GAAG,CAAC,IAAS,EAAE,EAAE;IAC1C,OAAO,IAAA,kBAAU,EAAC;QAChB,GAAG,IAAI;QACP,iBAAiB,EAAE,+BAA+B;KACnD,CAAC,CAAA;AACJ,CAAC,CAAA;AALY,QAAA,cAAc,kBAK1B"}

package/lib/stories/LiveBlogPost.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import './LiveBlogPost.stories.scss';
 declare const _default: {
     title: string;
-    component: ({ id, postId, title, content, bodyHTML, body, publishedTimestamp, publishedDate, isBreakingNews, standout, articleUrl, showShareButtons, byline, ad, isPinned, indicators, authors, }: LiveBlogPostProps) => React.JSX.Element;
+    component: React.FC<LiveBlogPostProps>;
     content: {};
     argTypes: {
         'indicators.isOpinion': {

package/lib/stories/LiveBlogPost.stories.js

@@ -20,14 +20,14 @@ exports.default = {
 };
 const args = {
     id: '',
-    postId: '',
+    postId: '', // Remove once wordpress is no longer in use
     title: 'Ukraine hails new security architecture after German accord',
-    content: '',
-    bodyHTML: '',
-    body: '',
-    publishedTimestamp: '',
+    content: '', // Remove once wordpress is no longer in use
+    bodyHTML: '', //ElasticSearch
+    body: '', // cp-content-pipeline
+    publishedTimestamp: '', // Remove once wordpress is no longer in use
     publishedDate: '2024-02-16T14:24:00',
-    isBreakingNews: false,
+    isBreakingNews: false, // Remove once wordpress is no longer in use
     articleUrl: '',
     showShareButtons: true,
     ad: '',

package/lib/stories/LiveBlogPost.stories.js.map

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

package/lib/stories/Topper.stories.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import Topper from "../components/Topper";
+import { TopperProps } from "../components/Topper";
 declare const _default: {
     title: string;
-    component: typeof Topper;
+    component: React.FC<TopperProps>;
     content: {};
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "6.14.1",
+  "version": "6.15.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/ArticleBody/index.tsx

@@ -2,10 +2,7 @@ import React from 'react'
 import RichText, { ComponentsContext } from '../RichText'
 import type { BodyProps } from '../Body'
 
-export default function ArticleBody({
-  content,
-  richTextComponents,
-}: BodyProps) {
+const ArticleBody: React.FC<BodyProps> = ({ content, richTextComponents }) => {
   if (!content?.body?.structured) {
     return null
   }
@@ -21,3 +18,5 @@ export default function ArticleBody({
     </ComponentsContext.Provider>
   )
 }
+
+export default ArticleBody

package/src/components/ArticleInfo/index.tsx

@@ -1,16 +1,21 @@
-import React, { PropsWithChildren } from 'react'
+import React from 'react'
 import Byline from '../Byline'
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
+import ftDateFormat from '@financial-times/ft-date-format'
 
 type ArticleInfoProps = {
   content: ArticleQuery['content']
 }
 
-export default function ArticleInfo({
+const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>> = ({
   children,
   content,
-}: PropsWithChildren<ArticleInfoProps>) {
+}) => {
   const isLiveBlogPackage = content.__typename === 'LiveBlogPackage'
+  const formattedPublishedDate = ftDateFormat.format(
+    new Date(content.publishedTimestamp),
+    'date'
+  )
 
   return (
     <div className="article-info">
@@ -22,14 +27,21 @@ export default function ArticleInfo({
           />
         )}
         {content.publishedDate && !isLiveBlogPackage && (
-          <time
-            data-o-component="o-date"
-            className="article-info__timestamp o-date"
-            dateTime={content.publishedDate}
-          />
+          <>
+            {' '}
+            <time
+              data-o-component="o-date"
+              className="article-info__timestamp o-date"
+              dateTime={content.publishedDate}
+            >
+              {formattedPublishedDate}
+            </time>
+          </>
         )}
       </div>
       {children}
     </div>
   )
 }
+
+export default ArticleInfo

package/src/components/BackToTopButton/client/index.tsx

@@ -12,15 +12,18 @@ import { throttle } from './utils'
  * @description Component that renders a button that scrolls users to the top of the page when clicked
  * and is only visible when the user has scrolled down at least to the startSelector element and then scrolls up
  */
-export default function BackToTop({
-  startSelector,
-  attributes = {},
-  scrollableElement = window,
-}: {
+
+type BackToTopProps = {
   startSelector?: string
   attributes?: Record<string, string>
   scrollableElement?: Window | HTMLElement
-}) {
+}
+
+const BackToTop: React.FC<BackToTopProps> = ({
+  startSelector,
+  attributes = {},
+  scrollableElement = window,
+}) => {
   const [visible, setVisible] = useState(false)
   const [scrolledDownFirstTime, setScrolledDownFirstTime] = useState(false)
   const lastScroll = useRef(0)
@@ -126,3 +129,5 @@ export default function BackToTop({
     </div>
   )
 }
+
+export default BackToTop

package/src/components/BigNumber/index.tsx

@@ -5,19 +5,16 @@ import { ContentTree } from '@financial-times/content-tree'
 /**
  * Renders a BigNumber component
  */
-export default function BigNumber({
+const BigNumber: React.FC<ContentTree.BigNumber> = ({
   description,
   number,
-}: ContentTree.BigNumber) {
-
+}) => {
   return (
     <div className="n-content-big-number">
-  		<span className="n-content-big-number__title">
-  			{number}
-  		</span>
-  		<span className="n-content-big-number__content">
-  			{description}
-  		</span>
+      <span className="n-content-big-number__title">{number}</span>
+      <span className="n-content-big-number__content">{description}</span>
     </div>
   )
 }
+
+export default BigNumber

package/src/components/Body/index.tsx

@@ -50,11 +50,11 @@ export type BodyProps = {
   [key: string]: unknown
 }
 
-export default function Body({
+const Body: React.FC<BodyProps> = ({
   content,
   bodyComponents,
   ...extraProps
-}: BodyProps) {
+}) => {
   if (!content?.body?.structured) {
     return null
   }
@@ -76,3 +76,5 @@ export default function Body({
 
   return <BodyComponent content={content} {...extraProps} />
 }
+
+export default Body

package/src/components/Byline/index.tsx

@@ -24,10 +24,7 @@ const bylineComponents = {
   'author-link': AuthorLink,
 }
 
-export default function Byline({
-  structuredContent,
-  showEditedBy,
-}: BylineProps) {
+const Byline: React.FC<BylineProps> = ({ structuredContent, showEditedBy }) => {
   return (
     <p className="article-info__byline">
       {showEditedBy && (
@@ -46,3 +43,5 @@ export default function Byline({
     </p>
   )
 }
+
+export default Byline

package/src/components/Clip/components/Caption.tsx

@@ -6,7 +6,7 @@ interface CaptionProps {
   credits?: string
 }
 
-export const Caption = ({ caption, credits }: CaptionProps) => {
+export const Caption: React.FC<CaptionProps> = ({ caption, credits }) => {
   if (!caption && !credits) return <></>
   const separator = caption && credits ? ' ' : null
 

package/src/components/Clip/components/ClipTag.tsx

@@ -32,7 +32,7 @@ interface ClipTagProps {
   preload?: string
 }
 
-export const ClipTag = ({
+export const ClipTag: React.FC<ClipTagProps> = ({
   id,
   dataLayout,
   description,
@@ -50,7 +50,7 @@ export const ClipTag = ({
   noInfoBox = false,
   noCaption = false,
   dataTrackable,
-}: ClipTagProps) => {
+}) => {
   const { pixelWidth, pixelHeight } = clip?.dataSource?.[0]
     ? clip.dataSource[0]
     : { pixelWidth: 0, pixelHeight: 0 }

package/src/components/Clip/components/ClosedCaptions.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { Accessibility } from '@financial-times/cp-content-pipeline-client'
 
-interface ClosedCaptionsPros {
+interface ClosedCaptionsProps {
   accessibility?: Accessibility
 }
 
-export const ClosedCaptions = ({ accessibility }: ClosedCaptionsPros) => {
+export const ClosedCaptions: React.FC<ClosedCaptionsProps> = ({
+  accessibility,
+}) => {
   if (!accessibility?.captions?.[0]?.url) return <></>
 
   return (

package/src/components/Clip/components/Container.tsx

@@ -1,11 +1,13 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 
 interface ContainerProps {
-  children: ReactNode
   dataLayout: string
 }
 
-export const Container = ({ dataLayout, children }: ContainerProps) => {
+export const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
+  dataLayout,
+  children,
+}) => {
   return dataLayout === 'full-grid' ? (
     <div className="n-content-layout__container" data-component="clip-set">
       {children}

package/src/components/Clip/components/ContentLayout.tsx

@@ -1,12 +1,13 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 
 interface ContentLayoutProps {
   dataLayout: string
-  children: ReactNode
 }
 
 // data-layout-width='full-grid' prevent clashes with ads and share bar
-export const ContentLayout = ({ dataLayout, children }: ContentLayoutProps) => {
+export const ContentLayout: React.FC<
+  React.PropsWithChildren<ContentLayoutProps>
+> = ({ dataLayout, children }) => {
   return dataLayout !== 'in-line' ? (
     <div className="n-content-layout" data-layout-width="full-grid">
       {children}

package/src/components/Clip/components/Credit.tsx

@@ -4,6 +4,6 @@ interface CreditProps {
   credits: string
 }
 
-export const Credit = ({ credits }: CreditProps) => (
+export const Credit: React.FC<CreditProps> = ({ credits }) => (
   <span className="cp-clip__credit">&copy; {credits}</span>
 )