@financial-times/cp-content-pipeline-ui 6.6.3 → 6.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Recommended/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,0EAA2E;AAG3E,4DAAmC;AACnC;;;;GAIG;AACH,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,YAAY,GACkC;IAC9C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,4DACkB,aAAa,EAC7B,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAqC,EAAE;YAC3D,8BAA8B,EAAE,CAAC,YAAY;SAC9C,CAAC;QAED,CAAC,YAAY,IAAI,CAChB,qCAAG,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAK,CAC1D;QACD,8BAAC,mBAAM,IACL,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAC5C,oBAAO,CAAC,UAAU,KAClB,MAAM,GACV,CACI,CACT,CAAA;AACH,CAAC;AA1BD,8BA0BC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Recommended/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,0EAA2E;AAG3E,4DAAmC;AACnC;;;;GAIG;AACH,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,YAAY,GACkC;IAC9C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,4DACkB,aAAa,EAC7B,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAqC,EAAE;YAC3D,8BAA8B,EAAE,CAAC,YAAY;SAC9C,CAAC,oBACa,aAAa;QAE3B,CAAC,YAAY,IAAI,CAChB,qCAAG,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAK,CAC1D;QACD,8BAAC,mBAAM,IACL,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAC5C,oBAAO,CAAC,UAAU,KAClB,MAAM,GACV,CACI,CACT,CAAA;AACH,CAAC;AA3BD,8BA2BC"}

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

@@ -2,7 +2,7 @@ import React, { JSXElementConstructor } from 'react';
 import type { StructuredContentFragment } from '@financial-times/cp-content-pipeline-client';
 import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema';
 export type RichTextComponentMapRecord = Partial<Record<ContentTreeWorkarounds.AnyNode['type'] | 'fallback', JSXElementConstructor<any>>>;
-export declare const ComponentsContext: React.Context<Partial<Record<"blockquote" | "body" | "cite" | "link" | "strong" | "table" | "video" | "clip" | "text" | "layout" | "table-caption" | "table-cell" | "table-row" | "list-item" | "heading" | "flourish" | "image-set" | "paragraph" | "pullquote" | "tweet" | "big-number" | "table-body" | "table-footer" | "root" | "break" | "thematic-break" | "emphasis" | "strikethrough" | "list" | "clip-set" | "recommended" | "scrolly-block" | "scrolly-section" | "scrolly-copy" | "scrolly-heading" | "scrolly-image" | "layout-slot" | "layout-image" | "youtube-video" | "main-image" | "raw-image" | "main-image-raw" | "author-link" | "fallback", React.JSXElementConstructor<any>>> | undefined>;
+export declare const ComponentsContext: React.Context<Partial<Record<"blockquote" | "body" | "cite" | "link" | "strong" | "table" | "video" | "clip" | "text" | "layout" | "table-caption" | "table-cell" | "table-row" | "list-item" | "heading" | "recommended" | "image-set" | "flourish" | "paragraph" | "pullquote" | "tweet" | "big-number" | "table-body" | "table-footer" | "root" | "break" | "thematic-break" | "emphasis" | "strikethrough" | "list" | "clip-set" | "scrolly-block" | "scrolly-section" | "scrolly-copy" | "scrolly-heading" | "scrolly-image" | "layout-slot" | "layout-image" | "youtube-video" | "main-image" | "raw-image" | "main-image-raw" | "author-link" | "fallback", React.JSXElementConstructor<any>>> | undefined>;
 type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 type RichTextProps = {
     structuredContent: WithOptionalProperty<StructuredContentFragment, 'references'>;

package/lib/components/Table/index.js

@@ -34,7 +34,7 @@ function Table({ children, compact, layoutWidth, stripes, responsiveStyle, colum
     return (react_1.default.createElement(exports.ColumnSettingsContext.Provider, { value: columnSettings },
         react_1.default.createElement("div", { className: (0, classnames_1.default)('o-table-container n-content-layout', {
                 'o-table-container--contracted': Boolean(collapseAfterHowManyRows),
-            }), "data-layout-width": layoutWidth },
+            }), "data-layout-width": layoutWidth, "data-component": "table" },
             react_1.default.createElement("div", { className: (0, classnames_1.default)('o-table-overlay-wrapper', {
                     'n-content-layout__container': layoutWidth !== 'auto',
                 }) },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA4C;AAC5C,4DAAmC;AAEtB,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAEhD,EAAE,CAAC,CAAA;AAEL,SAAwB,KAAK,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,eAAe,EACf,cAAc,EACd,wBAAwB,GAC8B;IACtD,OAAO,CACL,8BAAC,6BAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc;QACnD,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAoC,EAAE;gBAC1D,+BAA+B,EAAE,OAAO,CAAC,wBAAwB,CAAC;aACnE,CAAC,uBACiB,WAAW;YAE9B,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,yBAAyB,EAAE;oBAC/C,6BAA6B,EAAE,WAAW,KAAK,MAAM;iBACtD,CAAC;gBAEF,uCAAK,SAAS,EAAC,wBAAwB;oBACrC,yCACE,SAAS,EAAE,IAAA,oBAAU,EACnB,SAAS,EACT,uBAAuB,eAAe,EAAE,EACxC;4BACE,kBAAkB,EAAE,OAAO;4BAC3B,sBAAsB,EAAE,OAAO;4BAC/B,2BAA2B,EAAE,CAAC,OAAO;yBACtC,CACF,sBACgB,SAAS,6BACD,eAAe,oCACR,wBAAwB,2BACjC,MAAM,CAAC,CAAC,wBAAwB,CAAC,IAEvD,QAAQ,CACH,CACJ,CACF,CACF,CACyB,CAClC,CAAA;AACH,CAAC;AA7CD,wBA6CC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA4C;AAC5C,4DAAmC;AAEtB,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAEhD,EAAE,CAAC,CAAA;AAEL,SAAwB,KAAK,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,eAAe,EACf,cAAc,EACd,wBAAwB,GAC8B;IACtD,OAAO,CACL,8BAAC,6BAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc;QACnD,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAoC,EAAE;gBAC1D,+BAA+B,EAAE,OAAO,CAAC,wBAAwB,CAAC;aACnE,CAAC,uBACiB,WAAW,oBACf,OAAO;YAEtB,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,yBAAyB,EAAE;oBAC/C,6BAA6B,EAAE,WAAW,KAAK,MAAM;iBACtD,CAAC;gBAEF,uCAAK,SAAS,EAAC,wBAAwB;oBACrC,yCACE,SAAS,EAAE,IAAA,oBAAU,EACnB,SAAS,EACT,uBAAuB,eAAe,EAAE,EACxC;4BACE,kBAAkB,EAAE,OAAO;4BAC3B,sBAAsB,EAAE,OAAO;4BAC/B,2BAA2B,EAAE,CAAC,OAAO;yBACtC,CACF,sBACgB,SAAS,6BACD,eAAe,oCACR,wBAAwB,2BACjC,MAAM,CAAC,CAAC,wBAAwB,CAAC,IAEvD,QAAQ,CACH,CACJ,CACF,CACF,CACyB,CAClC,CAAA;AACH,CAAC;AA9CD,wBA8CC"}

package/lib/components/Video/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function Video({ id, embedded, title, }) {
-    return (react_1.default.createElement("div", { className: "n-content-video n-content-video--internal" },
+    return (react_1.default.createElement("div", { className: "n-content-video n-content-video--internal", "data-component": "video" },
         react_1.default.createElement("div", { className: "n-content-video__placeholder", "data-o-component": "o-video", "data-o-video-id": id },
             react_1.default.createElement("a", { href: `https://www.ft.com/content/${id}`, "data-embedded": embedded, "data-asset-type": "video", "data-trackable": "link" },
                 react_1.default.createElement("span", null, title ? `Video: ${title}` : 'Watch the video')))));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Video/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAIzB,SAAwB,KAAK,CAAC,EAC5B,EAAE,EACF,QAAQ,EACR,KAAK,GACwC;IAC7C,OAAO,CACL,uCAAK,SAAS,EAAC,2CAA2C;QACxD,uCACE,SAAS,EAAC,8BAA8B,sBACvB,SAAS,qBACT,EAAE;YAEnB,qCACE,IAAI,EAAE,8BAA8B,EAAE,EAAE,mBACzB,QAAQ,qBACP,OAAO,oBACR,MAAM;gBAErB,4CAAO,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAQ,CAC1D,CACA,CACF,CACP,CAAA;AACH,CAAC;AAvBD,wBAuBC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Video/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAIzB,SAAwB,KAAK,CAAC,EAC5B,EAAE,EACF,QAAQ,EACR,KAAK,GACwC;IAC7C,OAAO,CACL,uCACE,SAAS,EAAC,2CAA2C,oBACtC,OAAO;QAEtB,uCACE,SAAS,EAAC,8BAA8B,sBACvB,SAAS,qBACT,EAAE;YAEnB,qCACE,IAAI,EAAE,8BAA8B,EAAE,EAAE,mBACzB,QAAQ,qBACP,OAAO,oBACR,MAAM;gBAErB,4CAAO,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAQ,CAC1D,CACA,CACF,CACP,CAAA;AACH,CAAC;AA1BD,wBA0BC"}

package/lib/components/YoutubeVideo/index.js

@@ -11,7 +11,7 @@ function YoutubeVideo({ url, }) {
         if (!id) {
             return null;
         }
-        return (react_1.default.createElement("div", { className: "n-content-video n-content-video--youtube" },
+        return (react_1.default.createElement("div", { className: "n-content-video n-content-video--youtube", "data-component": "youtube-video" },
             react_1.default.createElement("div", { className: "n-content-video__placeholder" },
                 react_1.default.createElement("iframe", { className: "n-content-video__embedded", frameBorder: 0, allowFullScreen: true, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", src: `https://www.youtube.com/embed/${id}?rel=0` }))));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/YoutubeVideo/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAGzB,SAAwB,YAAY,CAAC,EACnC,GAAG,GACiC;IACpC,IAAI;QACF,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;QAC3B,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAEvC,IAAI,CAAC,EAAE,EAAE;YACP,OAAO,IAAI,CAAA;SACZ;QAED,OAAO,CACL,uCAAK,SAAS,EAAC,0CAA0C;YACvD,uCAAK,SAAS,EAAC,8BAA8B;gBAC3C,0CACE,SAAS,EAAC,2BAA2B,EACrC,WAAW,EAAE,CAAC,EACd,eAAe,QACf,KAAK,EAAC,yEAAyE,EAC/E,GAAG,EAAE,iCAAiC,EAAE,QAAQ,GAChD,CACE,CACF,CACP,CAAA;KACF;IAAC,MAAM;QACN,OAAO,IAAI,CAAA;KACZ;AACH,CAAC;AA3BD,+BA2BC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/YoutubeVideo/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAGzB,SAAwB,YAAY,CAAC,EACnC,GAAG,GACiC;IACpC,IAAI;QACF,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;QAC3B,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAEvC,IAAI,CAAC,EAAE,EAAE;YACP,OAAO,IAAI,CAAA;SACZ;QAED,OAAO,CACL,uCACE,SAAS,EAAC,0CAA0C,oBACrC,eAAe;YAE9B,uCAAK,SAAS,EAAC,8BAA8B;gBAC3C,0CACE,SAAS,EAAC,2BAA2B,EACrC,WAAW,EAAE,CAAC,EACd,eAAe,QACf,KAAK,EAAC,yEAAyE,EAC/E,GAAG,EAAE,iCAAiC,EAAE,QAAQ,GAChD,CACE,CACF,CACP,CAAA;KACF;IAAC,MAAM;QACN,OAAO,IAAI,CAAA;KACZ;AACH,CAAC;AA9BD,+BA8BC"}

package/lib/stories/Clip.stories.d.ts

@@ -1,6 +1,7 @@
+import ClipServer from '../components/Clip';
 import React from 'react';
 import './Clip.stories.scss';
-import ClipServer, { ClipProps } from '../components/Clip/template/component';
+import { ClipProps } from '../components/Clip/template/component';
 declare const _default: {
     title: string;
     component: typeof ClipServer;

package/lib/stories/Clip.stories.js

@@ -27,15 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThumbnailClip = exports.NoDataSource = exports.InlineAutoplay = exports.InlineLandscape = exports.InlineSquare = exports.Inline = void 0;
+const Clip_1 = __importDefault(require("../components/Clip"));
+const client_1 = __importDefault(require("../components/Clip/client"));
 const react_1 = __importStar(require("react"));
 const main_1 = __importDefault(require("@financial-times/o-tracking/main"));
 require("./Clip.stories.scss");
-const client_1 = __importDefault(require("../components/Clip/client"));
-const component_1 = __importDefault(require("../components/Clip/template/component"));
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 exports.default = {
     title: 'Clip',
-    component: component_1.default,
+    component: Clip_1.default,
     tags: ['autodocs'],
     argTypes: {
         dataLayout: {
@@ -74,7 +74,7 @@ const ClipStory = (args) => {
     }, []);
     return (react_1.default.createElement(ArticleWrapper, null,
         react_1.default.createElement("div", { className: "n-content-body" },
-            react_1.default.createElement(component_1.default, { ...args }))));
+            react_1.default.createElement(Clip_1.default, { ...args }))));
 };
 const Inline = (args) => {
     return react_1.default.createElement(ClipStory, { ...args });
@@ -94,7 +94,7 @@ const ThumbnailClipStory = (args) => {
             justifyContent: 'center',
         } },
         react_1.default.createElement("div", { style: { width: 640, height: 320, marginTop: '4rem' } },
-            react_1.default.createElement(component_1.default, { ...args }),
+            react_1.default.createElement(Clip_1.default, { ...args }),
             react_1.default.createElement("div", { style: {
                     width: '100%',
                     display: 'flex',

package/lib/stories/Clip.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clip.stories.js","sourceRoot":"","sources":["../../src/stories/Clip.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,4EAAwD;AACxD,+BAA4B;AAC5B,uEAAkD;AAClD,sFAA6E;AAE7E,qGAAqG;AACrG,kBAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,mBAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAA;AAMD,MAAM,cAAc,GAAkC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE,OAAO,CACL,2CACE,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,4DAA4D,uBACpD,wBAAwB;QAE1C,uCACE,SAAS,EAAC,kBAAkB,oBACb,cAAc,oBACd,cAAc,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;YAE/B,uCACE,SAAS,EAAC,+DAA+D,oBAC1D,sBAAsB;gBAErC,ipBAWI;gBACJ,ipBAWI;gBACJ,ipBAWI;gBACJ,ipBAWI;gBACH,QAAQ;gBACT,ipBAWI;gBACJ,ipBAWI;gBACJ,ipBAWI;gBACJ,ipBAWI;gBACJ,ipBAWI;gBACJ,ipBAWI,CACA,CACF;QACN,uCAAK,SAAS,EAAC,iBAAiB,GAAO,CAC/B,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,IAAe,EAAE,EAAE;IACpC,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;QACvC,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,8BAAC,cAAc;QACb,uCAAK,SAAS,EAAC,gBAAgB;YAC7B,8BAAC,mBAAU,OAAK,IAAI,GAAI,CACpB,CACS,CAClB,CAAA;AACH,CAAC,CAAA;AAEM,MAAM,MAAM,GAAG,CAAC,IAAe,EAAE,EAAE;IACxC,OAAO,8BAAC,SAAS,OAAK,IAAI,GAAI,CAAA;AAChC,CAAC,CAAA;AAFY,QAAA,MAAM,UAElB;AAED,MAAM,kBAAkB,GAAG,CAAC,IAAe,EAAE,EAAE;IAC7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,gBAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACnC,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;IAEN,OAAO,CACL,2CACE,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;SACzB;QAED,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE;YACxD,8BAAC,mBAAU,OAAK,IAAI,GAAI;YACxB,uCACE,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,cAAc,EAAE,QAAQ;oBACxB,SAAS,EAAE,QAAQ;oBACnB,GAAG,EAAE,MAAM;oBACX,SAAS,EAAE,MAAM;iBAClB;gBAED,wCACE,KAAK,EAAE;wBACL,KAAK,EAAE,iBAAiB;wBACxB,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;qBAClB,EACD,EAAE,EAAC,EAAE,yBAGA;gBAEP;oBACE,wCACE,KAAK,EAAE;4BACL,KAAK,EAAE,cAAc;4BACrB,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,KAAK;yBAClB;;wBAEoD,GAAG,CACnD,CACH,CACF,CACF,CACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,8FAA8F;AAC9F,cAAM,CAAC,IAAI,GAAG;IACZ,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,SAAS;IACrB,EAAE,EAAE,sCAAsC;IAC1C,OAAO,EAAE,IAAI;IACb,OAAO,EACL,oGAAoG;IACtG,OAAO,EAAE,SAAS;IAClB,WAAW,EACT,oGAAoG;IACtG,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,EAAE;IAClB,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,0BAA0B;IACzC,KAAK,EAAE;QACL;YACE,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,iBAAiB;YACzB,UAAU,EAAE;gBACV;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,sGAAsG;oBACxG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,GAAG;oBAChB,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,wGAAwG;oBAC1G,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,wGAAwG;oBAC1G,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,kGAAkG;oBACpG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,YAAY;oBACvB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,IAAI;iBACjB;aACF;YACD,MAAM,EACJ,qPAAqP;SACxP;KACF;IACD,aAAa,EAAE;QACb,QAAQ,EAAE;YACR;gBACE,GAAG,EAAE,uDAAuD;gBAC5D,SAAS,EAAE,UAAU;aACtB;SACF;QACD,UAAU,EAAE;YACV,MAAM,EAAE,YAAY;YACpB,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE;wBACR;4BACE,IAAI,EAAE,WAAW;4BACjB,QAAQ,EAAE;gCACR;oCACE,IAAI,EAAE,MAAM;oCACZ,KAAK,EACH,8LAA8L;iCACjM;6BACF;yBACF;wBACD;4BACE,IAAI,EAAE,WAAW;4BACjB,QAAQ,EAAE;gCACR;oCACE,IAAI,EAAE,MAAM;oCACZ,KAAK,EACH,wJAAwJ;iCAC3J;6BACF;yBACF;wBACD;4BACE,IAAI,EAAE,WAAW;4BACjB,QAAQ,EAAE;gCACR;oCACE,IAAI,EAAE,MAAM;oCACZ,KAAK,EACH,8HAA8H;iCACjI;6BACF;yBACF;qBACF;iBACF;aACF;SACF;KACF;CACF,CAAA;AAEM,MAAM,YAAY,GAAG,CAAC,IAAe,EAAE,EAAE;IAC9C,OAAO,8BAAC,SAAS,OAAK,IAAI,GAAI,CAAA;AAChC,CAAC,CAAA;AAFY,QAAA,YAAY,gBAExB;AACD,oBAAY,CAAC,IAAI,GAAG;IAClB,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,SAAS;IACrB,EAAE,EAAE,sCAAsC;IAC1C,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,4BAA4B;IACzC,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,EAAE;IAClB,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,0BAA0B;IACzC,KAAK,EAAE;QACL;YACE,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,iBAAiB;YACzB,UAAU,EAAE;gBACV;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,wGAAwG;oBAC1G,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;aACF;YACD,MAAM,EACJ,qPAAqP;SACxP;KACF;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,IAAI;KACjB;CACF,CAAA;AAEM,MAAM,eAAe,GAAG,CAAC,IAAe,EAAE,EAAE;IACjD,OAAO,8BAAC,SAAS,OAAK,IAAI,GAAI,CAAA;AAChC,CAAC,CAAA;AAFY,QAAA,eAAe,mBAE3B;AACD,uBAAe,CAAC,IAAI,GAAG;IACrB,GAAG,EAAE,kFAAkF;IACvF,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,kCAAkC;IAC3C,MAAM,EACJ,2FAA2F;IAC7F,GAAG,EAAE,2DAA2D;IAChE,UAAU,EAAE,SAAS;IACrB,WAAW,EACT,yFAAyF;IAC3F,OAAO,EAAE,KAAK;IACd,aAAa,EAAE;QACb,QAAQ,EAAE;YACR;gBACE,GAAG,EAAE,2DAA2D;aACjE;SACF;KACF;IACD,KAAK,EAAE;QACL;YACE,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,iBAAiB;YACzB,UAAU,EAAE;gBACV;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,sGAAsG;oBACxG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,GAAG;oBAChB,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,uGAAuG;oBACzG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,GAAG;oBAChB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,wGAAwG;oBAC1G,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,kGAAkG;oBACpG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,YAAY;oBACvB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,IAAI;iBACjB;aACF;YACD,MAAM,EACJ,qPAAqP;SACxP;KACF;CACF,CAAA;AAEM,MAAM,cAAc,GAAG,CAAC,IAAe,EAAE,EAAE;IAChD,OAAO,8BAAC,SAAS,OAAK,IAAI,GAAI,CAAA;AAChC,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B;AAED,8FAA8F;AAC9F,sBAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,SAAS;IACrB,EAAE,EAAE,sCAAsC;IAC1C,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,wDAAwD;IACjE,OAAO,EAAE,wBAAwB;IACjC,WAAW,EAAE,wDAAwD;IACrE,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,EAAE;IAClB,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,0BAA0B;IACzC,KAAK,EAAE;QACL;YACE,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,iBAAiB;YACzB,UAAU,EAAE;gBACV;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,sGAAsG;oBACxG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,GAAG;oBAChB,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,uGAAuG;oBACzG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,GAAG;oBAChB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,wGAAwG;oBAC1G,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;gBACD;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,kGAAkG;oBACpG,QAAQ,EAAE,KAAK;oBACf,SAAS,EAAE,YAAY;oBACvB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,IAAI;iBACjB;aACF;YACD,MAAM,EACJ,qPAAqP;SACxP;KACF;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,IAAI;KACjB;CACF,CAAA;AAEM,MAAM,YAAY,GAAG,CAAC,IAAe,EAAE,EAAE;IAC9C,OAAO,8BAAC,SAAS,OAAK,IAAI,GAAI,CAAA;AAChC,CAAC,CAAA;AAFY,QAAA,YAAY,gBAExB;AAED,8FAA8F;AAC9F,oBAAY,CAAC,IAAI,GAAG;IAClB,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,SAAS;IACrB,EAAE,EAAE,sCAAsC;IAC1C,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,wDAAwD;IACjE,OAAO,EAAE,wBAAwB;IACjC,WAAW,EAAE,wDAAwD;IACrE,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,EAAE;IAClB,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,0BAA0B;IACzC,KAAK,EAAE;QACL;YACE,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,iBAAiB;YACzB,MAAM,EACJ,qPAAqP;SACxP;KACF;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,IAAI;KACjB;CACF,CAAA;AAEM,MAAM,aAAa,GAAG,CAAC,IAAe,EAAE,EAAE;IAC/C,OAAO,8BAAC,kBAAkB,OAAK,IAAI,EAAE,MAAM,EAAC,WAAW,GAAG,CAAA;AAC5D,CAAC,CAAA;AAFY,QAAA,aAAa,iBAEzB;AAED,8FAA8F;AAC9F,qBAAa,CAAC,IAAI,GAAG;IACnB,aAAa,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,IAAI;KACjB;IACD,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE;QACL;YACE,UAAU,EAAE;gBACV;oBACE,UAAU,EAAE,KAAK;oBACjB,SAAS,EACP,oFAAoF;oBACtF,QAAQ,EAAE,MAAM;oBAChB,SAAS,EAAE,WAAW;oBACtB,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,MAAM;iBACnB;aACF;YACD,EAAE,EAAE,UAAU;YACd,MAAM,EACJ,wGAAwG;SAC3G;KACF;IACD,UAAU,EAAE,EAAE;IACd,EAAE,EAAE,sCAAsC;IAC1C,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI;IACb,MAAM,EACJ,wGAAwG;IAC1G,aAAa,EAAE,0BAA0B;IACzC,IAAI,EAAE,UAAU;CACjB,CAAA"}
+{"version":3,"file":"Clip.stories.js","sourceRoot":"","sources":["../../src/stories/Clip.stories.tsx"],"names":[],"mappings":"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"}

package/lib/stories/Expander.stories.d.ts

@@ -0,0 +1,54 @@
+import { ExpanderProps } from '../components/Expander';
+import React from 'react';
+import './Expander.stories.scss';
+import './Clip.stories.scss';
+declare const _default: {
+    title: string;
+    component: React.FC<ExpanderProps>;
+    tags: string[];
+};
+export default _default;
+export declare const OnlyServer: {
+    (args: ExpanderProps): React.JSX.Element;
+    args: {
+        state?: "expanded" | "collapsed" | undefined;
+        expandLabel?: string | undefined;
+        collapseLabel?: string | undefined;
+        onlyMobile?: boolean | undefined;
+        id: string;
+        children?: React.ReactNode;
+    };
+};
+export declare const WithClient: {
+    (args: ExpanderProps): React.JSX.Element;
+    args: {
+        state?: "expanded" | "collapsed" | undefined;
+        expandLabel?: string | undefined;
+        collapseLabel?: string | undefined;
+        onlyMobile?: boolean | undefined;
+        id: string;
+        children?: React.ReactNode;
+    };
+};
+export declare const OnlyMobileWithClient: {
+    (args: ExpanderProps): React.JSX.Element;
+    args: {
+        state?: "expanded" | "collapsed" | undefined;
+        expandLabel?: string | undefined;
+        collapseLabel?: string | undefined;
+        onlyMobile?: boolean | undefined;
+        id: string;
+        children?: React.ReactNode;
+    };
+};
+export declare const OnlyMobileServer: {
+    (args: ExpanderProps): React.JSX.Element;
+    args: {
+        state?: "expanded" | "collapsed" | undefined;
+        expandLabel?: string | undefined;
+        collapseLabel?: string | undefined;
+        onlyMobile?: boolean | undefined;
+        id: string;
+        children?: React.ReactNode;
+    };
+};

package/lib/stories/Expander.stories.js

@@ -0,0 +1,142 @@
+"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 });
+exports.OnlyMobileServer = exports.OnlyMobileWithClient = exports.WithClient = exports.OnlyServer = void 0;
+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. ',
+                },
+            ],
+        },
+        {
+            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.  ',
+                },
+            ],
+        },
+        {
+            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,
+            },
+        },
+    ],
+};
+const storyArgs = {
+    expandLabel: 'Open',
+    collapseLabel: 'Close',
+    onlyMobile: false,
+    id: '111232323-12123-2323',
+};
+exports.default = {
+    title: 'Expander',
+    component: Expander_1.ExpanderServer,
+    tags: ['autodocs'],
+};
+const LiveBLogWrapper = (args) => {
+    const { classNames } = args;
+    return (react_1.default.createElement("div", { className: classNames },
+        react_1.default.createElement("article", { id: "site-content", role: "main", className: "article article-grid  article-grid--no-full-width-graphics js enhanced", "data-article-type": "no-full-width-graphics" },
+            react_1.default.createElement("div", { className: "article__content", "data-trackable": "article-body", "data-component": "article-body", style: { position: 'relative' } },
+                react_1.default.createElement("div", { className: "article__content-body n-content-body js-article__content-body", "data-attribute": "article-content-body" },
+                    react_1.default.createElement(LiveBlogPostWrapper, { ...args, id: "111" }))),
+            react_1.default.createElement("div", { className: "article__right " }))));
+};
+const LiveBlogPostWrapper = (args) => {
+    (0, react_1.useEffect)(() => {
+        main_1.default.init({
+            context: { product: 'next' },
+            test: true,
+        });
+        const clips = client_2.default.init(null, {});
+        return () => {
+            clips.forEach((clip) => clip.unload());
+        };
+    }, []);
+    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 } }))))));
+};
+const OnlyServer = (args) => {
+    return react_1.default.createElement(LiveBLogWrapper, { ...args });
+};
+exports.OnlyServer = OnlyServer;
+exports.OnlyServer.args = { ...storyArgs };
+const WithClient = (args) => {
+    (0, react_1.useEffect)(() => {
+        const clips = client_2.default.init(null, {});
+        const expanders = client_1.ExpanderClient.init();
+        return () => {
+            clips.forEach((clip) => clip.unload());
+            expanders.forEach((expander) => expander?.destroy());
+        };
+    }, []);
+    return react_1.default.createElement(LiveBLogWrapper, { ...args });
+};
+exports.WithClient = WithClient;
+exports.WithClient.args = { ...storyArgs };
+exports.OnlyMobileWithClient = exports.WithClient;
+exports.OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true };
+exports.OnlyMobileServer = exports.OnlyServer;
+exports.OnlyMobileServer.args = { ...storyArgs, onlyMobile: true };
+//# sourceMappingURL=Expander.stories.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "6.6.3",
+  "version": "6.7.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -17,9 +17,6 @@
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^3.1.4",
     "@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
-    "@financial-times/cp-content-pipeline-client": "^3.7.4",
-    "@financial-times/cp-content-pipeline-schema": "^2.10.3",
-    "@financial-times/cp-content-pipeline-styles": "^2.4.3",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-grid": "^6.1.5",
@@ -58,9 +55,10 @@
     "@financial-times/ft-date-format": "^2.1.0",
     "@financial-times/o-expander": "^6.2.6",
     "@financial-times/o-labels": "^6.5.0",
+    "@financial-times/o-loading": "^5.2.3",
     "@financial-times/o-teaser": "^6.2.2",
     "@financial-times/x-teaser": "^14.6.5",
-    "classnames": "^2.3.1"
+    "classnames": "^2.5.1"
   },
   "peerDependencies": {
     "@financial-times/x-interaction": ">=14",

package/src/components/Clip/client/index.ts

@@ -493,6 +493,19 @@ class Clip extends ClipInterface {
     playIconContainer.classList.add('cp-clip__play-icon-container')
     playIconContainer.append(playIcon)
 
+    const loadingIndicator = document.createElement('div')
+    loadingIndicator.classList.add(
+      'o-loading',
+      'o-loading--light',
+      'o-loading--large'
+    )
+
+    const loadingIconContainer = document.createElement('div')
+    loadingIconContainer.classList.add('cp-clip__loading-icon-container')
+    loadingIconContainer.append(loadingIndicator)
+
+    customControls.append(loadingIconContainer)
+
     const muteIcon = document.createElement('button')
     muteIcon.classList.add('cp-clip__mute-icon')
     muteIcon.setAttribute('data-mute', String(this.muted))
@@ -564,11 +577,13 @@ class Clip extends ClipInterface {
       this.resizeControls()
 
       this.containerEl.classList.add('cp-clip--playing')
+      this.containerEl.classList.remove('cp-clip--loading')
       this.fadeOut()
     })
 
     video.addEventListener('pause', () => {
       this.containerEl.classList.remove('cp-clip--playing')
+      this.containerEl.classList.remove('cp-clip--loading')
       playIcon.setAttribute('data-trackable', 'video-clip-resume')
 
       this.fadeIn()
@@ -594,6 +609,18 @@ class Clip extends ClipInterface {
       }
     })
 
+    video.addEventListener('waiting', () => {
+      this.showLoadingIndicator()
+    })
+
+    video.addEventListener('canplay', () => {
+      this.hideLoadingIndicator()
+    })
+
+    video.addEventListener('canplaythrough', () => {
+      this.hideLoadingIndicator()
+    })
+
     this.resizeControls()
 
     const onLoadedMetaData = () => {
@@ -688,6 +715,16 @@ class Clip extends ClipInterface {
     }
   }
 
+  hideLoadingIndicator() {
+    this.containerEl.classList.remove('cp-clip--loading')
+    this.fadeOut(true)
+  }
+
+  showLoadingIndicator() {
+    this.containerEl.classList.add('cp-clip--loading')
+    this.fadeIn()
+  }
+
   hideOffLineMessage() {
     const oExpanderElement = this.expander?.oExpanderElement
 

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

@@ -2,14 +2,22 @@
 @import "@financial-times/o-colors/main";
 @import "@financial-times/o-typography/main";
 @import "@financial-times/o-grid/main";
+@import '@financial-times/o-loading/main';
 @import "./progressBar.scss";
 
 .cp-clip {
+  --o-loading-size: 64px;
   @import "../components/caption";
   @import "../components/clip-tag";
   @import "../components/video-info-box";
   @import "../components/video-description";
   @import "../components/credit";
+   
+	@include oLoading($opts: (
+		'themes': ('light'),
+		'sizes': ('large')
+	));
+  --o-loading-size: 64px;
 
   &[data-o-component='cp-clip'] {
     flex: none;
@@ -120,6 +128,14 @@
 		display: flex;
 	}
 
+	&.cp-clip--loading .cp-clip__loading-icon-container {
+		display: block;
+	}
+
+	&.cp-clip--loading .cp-clip__play-icon-container {
+		display: none;
+	}
+
 	.cp-clip__pause-icon {
 		// The icon will be cached in the FT-App
 		// See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
@@ -191,4 +207,16 @@
 		to {opacity :0;}
 	}
 
+	.cp-clip__loading-icon-container {
+		display: none;
+		position: absolute;
+		top: calc(50% - var(--o-loading-size) / 2);
+		left: calc(50% - var(--o-loading-size) / 2);
+	}
+
+	.o-loading {
+		width: var(--o-loading-size);
+		height:  var(--o-loading-size);
+	}
+
 }

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

@@ -7,9 +7,11 @@ interface ContainerProps {
 
 export const Container = ({ dataLayout, children }: ContainerProps) => {
   return dataLayout === 'full-grid' ? (
-    <div className="n-content-layout__container">{children}</div>
+    <div className="n-content-layout__container" data-component="clip-set">
+      {children}
+    </div>
   ) : dataLayout === 'mid-grid' ? (
-    <div className="n-content-layout__container">
+    <div className="n-content-layout__container" data-component="clip-set">
       <div
         data-o-grid-colspan="12 S12 M12 L10 XL10"
         className="n-content-layout__container--mid-grid"
@@ -18,6 +20,11 @@ export const Container = ({ dataLayout, children }: ContainerProps) => {
       </div>
     </div>
   ) : (
-    <div className="n-content-layout__container--in-line">{children}</div>
+    <div
+      className="n-content-layout__container--in-line"
+      data-component="clip-set"
+    >
+      {children}
+    </div>
   )
 }

package/src/components/Clip/template/index.ts

@@ -1,5 +1,4 @@
 // This file will is used by next-es-interface and it renders the component as a string
-/* eslint-disable import/no-unused-modules */
 // TODO: Remove this file once next-es-interface and Elastic Search won't be used anymore to render articles (After r13n API will be used in Production by all the consumers: FT-App, next-article, FT Edit)
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'

package/src/components/Clip/test/__snapshots__/snapshot.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Clip Snapshot component rendered on server full-grid default render 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-cp-clip-layout=\\"full-grid\\"
       data-cp-clip-poster=\\"\\"
@@ -64,7 +64,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
 
 exports[`Clip Snapshot component rendered on server full-grid render with attributes 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-cp-clip-layout=\\"full-grid\\"
       data-cp-clip-poster=\\"\\"
@@ -151,7 +151,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
 `;
 
 exports[`Clip Snapshot component rendered on server in-line render 1`] = `
-"<div class=\\"n-content-layout__container--in-line\\">
+"<div class=\\"n-content-layout__container--in-line\\" data-component=\\"clip-set\\">
   <div
     data-cp-clip-layout=\\"in-line\\"
     data-cp-clip-poster=\\"\\"
@@ -211,7 +211,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
 `;
 
 exports[`Clip Snapshot component rendered on server in-line render with attributes 1`] = `
-"<div class=\\"n-content-layout__container--in-line\\">
+"<div class=\\"n-content-layout__container--in-line\\" data-component=\\"clip-set\\">
   <div
     data-cp-clip-layout=\\"in-line\\"
     data-cp-clip-poster=\\"\\"
@@ -298,7 +298,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
 
 exports[`Clip Snapshot component rendered on server mid-grid default render 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-o-grid-colspan=\\"12 S12 M12 L10 XL10\\"
       class=\\"n-content-layout__container--mid-grid\\"
@@ -365,7 +365,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
 
 exports[`Clip Snapshot component rendered on server mid-grid render with attributes 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-o-grid-colspan=\\"12 S12 M12 L10 XL10\\"
       class=\\"n-content-layout__container--mid-grid\\"
@@ -463,7 +463,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
 `;
 
 exports[`Clip Snapshot component rendered on server renders multiple video sources 1`] = `
-"<div class=\\"n-content-layout__container--in-line\\">
+"<div class=\\"n-content-layout__container--in-line\\" data-component=\\"clip-set\\">
   <div
     data-cp-clip-layout=\\"in-line\\"
     data-cp-clip-poster=\\"https://whatever/1080x1920.jpg\\"
@@ -561,7 +561,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
 
 exports[`Clip Snapshot component rendered on server supports new Origami images, fallbacking to the previous implementation 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-cp-clip-layout=\\"full-grid\\"
       data-cp-clip-poster=\\"\\"