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

package/CHANGELOG.md

@@ -574,6 +574,29 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
     * @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
 
+## [6.14.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v6.14.0...cp-content-pipeline-ui-v6.14.1) (2024-07-16)
+
+
+### Bug Fixes
+
+* update list-item and block-quote tag mapping to accept paragraphs ([b8b3c4b](https://github.com/Financial-Times/cp-content-pipeline/commit/b8b3c4bc59e22335b8c7b9adbd33365d7c050c19))
+* use Content Tree transit namespace in tagMappings ([06b6080](https://github.com/Financial-Times/cp-content-pipeline/commit/06b60806e2dc0efb66a419cd87f3a40ccccf357a))
+
+## [6.14.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v6.13.0...cp-content-pipeline-ui-v6.14.0) (2024-07-16)
+
+
+### Features
+
+* tracking for flourish toppers ([4c19db6](https://github.com/Financial-Times/cp-content-pipeline/commit/4c19db61bf28e3a2f04c6eae8eb7344711076ea6))
+
+
+### Bug Fixes
+
+* decrease amount of element needed to be seen ([ba8264a](https://github.com/Financial-Times/cp-content-pipeline/commit/ba8264aa99c75a30db7b878c64766816d1464bdc))
+* genericise class to be used on all toppers ([1021468](https://github.com/Financial-Times/cp-content-pipeline/commit/1021468cfdd6d1f75a1d7a45ec7f7c142da6f9a8))
+* remove unneeded data attribute ([6ce8529](https://github.com/Financial-Times/cp-content-pipeline/commit/6ce8529588984839dccf21d29375450671ad2841))
+* return at first opportunity ([508b07c](https://github.com/Financial-Times/cp-content-pipeline/commit/508b07c7af834b6f2d02d2644ec126da195201e3))
+
 ## [6.13.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v6.12.0...cp-content-pipeline-ui-v6.13.0) (2024-07-10)
 
 

package/lib/client.d.ts

@@ -1,3 +1,4 @@
 export { default as Clip } from './components/Clip/client/index';
 export { default as BackToTopButton } from './components/BackToTopButton/client';
 export { default as FlourishSSREmbed } from './components/Flourish/client/index';
+export { TopperTracker } from './components/Topper/client/index';

package/lib/client.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlourishSSREmbed = exports.BackToTopButton = exports.Clip = void 0;
+exports.TopperTracker = exports.FlourishSSREmbed = exports.BackToTopButton = exports.Clip = void 0;
 var index_1 = require("./components/Clip/client/index");
 Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
 var client_1 = require("./components/BackToTopButton/client");
 Object.defineProperty(exports, "BackToTopButton", { enumerable: true, get: function () { return __importDefault(client_1).default; } });
 var index_2 = require("./components/Flourish/client/index");
 Object.defineProperty(exports, "FlourishSSREmbed", { enumerable: true, get: function () { return __importDefault(index_2).default; } });
+var index_3 = require("./components/Topper/client/index");
+Object.defineProperty(exports, "TopperTracker", { enumerable: true, get: function () { return index_3.TopperTracker; } });
 //# sourceMappingURL=client.js.map

package/lib/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAgE;AAAvD,8GAAA,OAAO,OAAQ;AACxB,8DAAgF;AAAvE,0HAAA,OAAO,OAAmB;AACnC,4DAAgF;AAAvE,0HAAA,OAAO,OAAoB"}
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAgE;AAAvD,8GAAA,OAAO,OAAQ;AACxB,8DAAgF;AAAvE,0HAAA,OAAO,OAAmB;AACnC,4DAAgF;AAAvE,0HAAA,OAAO,OAAoB;AACpC,0DAAgE;AAAvD,sGAAA,aAAa,OAAA"}

package/lib/components/Flourish/index.js

@@ -10,6 +10,8 @@ const DisclaimerNotice = ({ id }) => (react_1.default.createElement("div", { id:
         react_1.default.createElement("div", { className: "o-message__content" },
             react_1.default.createElement("p", { className: "o-message__content-main" }, "You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.")))));
 function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, iFrame = false, inArticleBody = true, }) {
+    if (!id)
+        return null;
     const anchorHref = `#${id}`;
     const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid';
     const figureClassnames = (0, classnames_1.default)({
@@ -27,13 +29,11 @@ function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, i
             aspectRatio: `${fallbackImage.width}/${fallbackImage.height}`,
         }
         : {};
-    if (!id)
-        return null;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
             'n-content-layout': inArticleBody,
             flourish: iFrame,
             'flourish--iFrame': iFrame,
-        }), "data-layout-width": fullGrid ? 'full-grid' : null, "data-component": "flourish" },
+        }), "data-layout-width": fullGrid ? 'full-grid' : null, "data-component": "flourish", "data-component-id": id, "data-component-type": inArticleBody ? 'flourish-in-article' : 'flourish-topper' },
         iFrame && (react_1.default.createElement("iframe", { src: `https://flo.uri.sh/visualisation/${id}/embed?hideTitle=${!inArticleBody}`, style: { width: '100%', aspectRatio: iframeAspectRatio }, className: "flourish__i-frame" })),
         react_1.default.createElement("figure", { className: figureClassnames, "data-original-image-width": fullGrid ? fallbackImage?.width : null, "data-original-image-height": fullGrid ? fallbackImage?.height : null },
             react_1.default.createElement("a", { href: anchorHref },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAqBnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAmB,EAAE,EAAE,CAAC,CACpD,uCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,mEAAmE,sBAC5D,WAAW;IAE5B,uCAAK,SAAS,EAAC,sBAAsB;QACnC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,qCAAG,SAAS,EAAC,yBAAyB,kJAIlC,CACA,CACF,CACF,CACP,CAAA;AACD,SAAwB,QAAQ,CAAC,EAC/B,EAAE,EACF,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,EACb,MAAM,GAAG,KAAK,EACd,aAAa,GAAG,IAAI,GACN;IACd,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,WAAW,KAAK,WAAW,IAAI,WAAW,KAAK,MAAM,CAAA;IACtE,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAClC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;QACnC,gBAAgB,EAAE,MAAM;KACzB,CAAC,CAAA;IAEF,MAAM,iBAAiB,GACrB,MAAM,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QACrD,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;QAClD,CAAC,CAAC,MAAM,CAAA;IAEZ,MAAM,gBAAgB,GACpB,CAAC,aAAa,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QAC7D,CAAC,CAAC;YACE,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;SAC9D;QACH,CAAC,CAAC,EAAE,CAAA;IAER,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAA;IAEpB,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,kBAAkB,EAAE,aAAa;YACjC,QAAQ,EAAE,MAAM;YAChB,kBAAkB,EAAE,MAAM;SAC3B,CAAC,uBACiB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,oBACjC,UAAU;QAExB,MAAM,IAAI,CACT,0CACE,GAAG,EAAE,oCAAoC,EAAE,oBAAoB,CAAC,aAAa,EAAE,EAC/E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,EACxD,SAAS,EAAC,mBAAmB,GACrB,CACX;QACD,0CACE,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YAEnE,qCAAG,IAAI,EAAE,UAAU;gBACjB,8DAGmB,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,sBACrC,EAAE,wBACA,YAAY;oBAEhC,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCACE,GAAG,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,gBAAgB,GACvB,CACM,CACR,CACG,CACL,CACP,CAAA;AACH,CAAC;AA1ED,2BA0EC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAqBnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAmB,EAAE,EAAE,CAAC,CACpD,uCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,mEAAmE,sBAC5D,WAAW;IAE5B,uCAAK,SAAS,EAAC,sBAAsB;QACnC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,qCAAG,SAAS,EAAC,yBAAyB,kJAIlC,CACA,CACF,CACF,CACP,CAAA;AACD,SAAwB,QAAQ,CAAC,EAC/B,EAAE,EACF,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,EACb,MAAM,GAAG,KAAK,EACd,aAAa,GAAG,IAAI,GACN;IACd,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAA;IACpB,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,WAAW,KAAK,WAAW,IAAI,WAAW,KAAK,MAAM,CAAA;IACtE,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAClC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;QACnC,gBAAgB,EAAE,MAAM;KACzB,CAAC,CAAA;IAEF,MAAM,iBAAiB,GACrB,MAAM,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QACrD,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;QAClD,CAAC,CAAC,MAAM,CAAA;IAEZ,MAAM,gBAAgB,GACpB,CAAC,aAAa,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QAC7D,CAAC,CAAC;YACE,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;SAC9D;QACH,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,kBAAkB,EAAE,aAAa;YACjC,QAAQ,EAAE,MAAM;YAChB,kBAAkB,EAAE,MAAM;SAC3B,CAAC,uBACiB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,oBACjC,UAAU,uBACN,EAAE,yBAEnB,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAiB;QAG1D,MAAM,IAAI,CACT,0CACE,GAAG,EAAE,oCAAoC,EAAE,oBAAoB,CAAC,aAAa,EAAE,EAC/E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,EACxD,SAAS,EAAC,mBAAmB,GACrB,CACX;QACD,0CACE,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YAEnE,qCAAG,IAAI,EAAE,UAAU;gBACjB,8DAGmB,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,sBACrC,EAAE,wBACA,YAAY;oBAEhC,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCACE,GAAG,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,gBAAgB,GACvB,CACM,CACR,CACG,CACL,CACP,CAAA;AACH,CAAC;AA7ED,2BA6EC"}

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" | "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>;
+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" | "pullquote" | "table-body" | "table-footer" | "break" | "thematic-break" | "paragraph" | "emphasis" | "strikethrough" | "list" | "custom-code-component" | "root" | "clip-set" | "tweet" | "big-number" | "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/RichText/index.test.js

@@ -58,12 +58,12 @@ describe('<RichText />', () => {
             version: 1,
             children: [
                 {
-                    type: 'link',
-                    children: [{ type: 'text', value: 'first link' }],
+                    type: 'paragraph',
+                    children: [{ type: 'text', value: 'first paragraph' }],
                 },
                 {
-                    type: 'link',
-                    children: [{ type: 'text', value: 'second link' }],
+                    type: 'paragraph',
+                    children: [{ type: 'text', value: 'second paragraph' }],
                 },
             ],
         };
@@ -80,7 +80,7 @@ describe('<RichText />', () => {
             version: 1,
             children: [
                 {
-                    type: 'link',
+                    type: 'paragraph',
                     children: [{ type: 'text', value: 'i should render' }],
                 },
                 {
@@ -95,7 +95,7 @@ describe('<RichText />', () => {
             tree,
         };
         const { getByText } = (0, react_2.render)(react_1.default.createElement(_1.default, { structuredContent: structuredContent }));
-        expect(getByText('i should render').tagName).toEqual('A');
+        expect(getByText('i should render').tagName).toEqual('P');
         //wrapping component with react-testing-library is a div
         expect(getByText('i should not render').tagName).toEqual('DIV');
     });

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

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../src/components/RichText/index.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../src/components/RichText/index.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4C;AAC5C,kDAA+C;AAC/C,yCAAwB;AAIxB,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,IAAI,GAAqB;YAC7B,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE;gBACR;oBACE,IAAI,EAAE,WAAW;oBACjB,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC;iBACjC;aAC3B;SACF,CAAA;QACD,MAAM,iBAAiB,GAAG,EAAE,IAAI,EAAE,CAAA;QAElC,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,cAAM,EAC3B,8BAAC,UAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CACnD,CAAA;QACD,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;;KAM1C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,IAAI,CAAC,KAAK,CAAC,eAAK,EAAE,eAAe,CAAC,CAAA;QAClC,MAAM,IAAI,GAAS;YACjB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE;gBACR;oBACE,IAAI,EAAE,WAAW;oBACjB,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;iBACvD;gBACD;oBACE,IAAI,EAAE,WAAW;oBACjB,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC;iBACxD;aACF;SACF,CAAA;QAED,MAAM,iBAAiB,GAAG;YACxB,IAAI;SACL,CAAA;QAED,IAAA,cAAM,EAAC,8BAAC,UAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CAAC,CAAA;QAC1D,MAAM,CAAC,qBAAa,CAAC,CAAC,oBAAoB,CACxC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EACpB,MAAM,CAAC,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACpC,CAAA;QACD,MAAM,CAAC,qBAAa,CAAC,CAAC,oBAAoB,CACxC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EACpB,MAAM,CAAC,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACpC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,IAAI,GAAS;YACjB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE;gBACR;oBACE,IAAI,EAAE,WAAW;oBACjB,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;iBACvD;gBACD;oBACE,IAAI,EAAE,SAAS;oBACf,QAAQ,EAAE;wBACR,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAsB;qBACnE;iBACkC;aACtC;SACF,CAAA;QAED,MAAM,iBAAiB,GAAG;YACxB,IAAI;SACL,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,UAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CACnD,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;QACzD,wDAAwD;QACxD,MAAM,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,IAAI,GAAS;YACjB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE;gBACR;oBACE,EAAE,EAAE,gBAAgB;oBACpB,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE;wBACJ,cAAc,EAAE,CAAC;qBAClB;iBACmB;gBACtB;oBACE,EAAE,EAAE,mBAAmB;oBACvB,IAAI,EAAE,OAAO;iBACO;aACvB;SACF,CAAA;QAED,MAAM,iBAAiB,GAAG;YACxB,IAAI;YACJ,UAAU,EAAE;gBACV;oBACE,IAAI,EAAE,OAAO;oBACb,EAAE,EAAE,gBAAgB;oBACpB,IAAI,EAAE,wCAAwC;iBAC/C;aACF;SACF,CAAA;QAED,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,cAAM,EAC5B,8BAAC,UAAQ,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CACnD,CAAA;QACD,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QACjD,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,CAAA;QACjD,MAAM,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IACvD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,2 @@
+import { TopperTracker } from './tracking';
+export { TopperTracker };

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopperTracker = void 0;
+const tracking_1 = require("./tracking");
+Object.defineProperty(exports, "TopperTracker", { enumerable: true, get: function () { return tracking_1.TopperTracker; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Topper/client/index.ts"],"names":[],"mappings":";;;AAAA,yCAA0C;AAEjC,8FAFA,wBAAa,OAEA"}

package/lib/components/Topper/client/tracking.d.ts

@@ -0,0 +1,17 @@
+declare class TopperTracker {
+    private startTime;
+    private totalVisibleTime;
+    private timeElapsedSeconds;
+    private type;
+    private component;
+    private id;
+    private observer;
+    constructor({ type }?: {
+        type?: string | undefined;
+    });
+    init(): void;
+    private dispatchEvent;
+    private onChange;
+    disconnect(): void;
+}
+export { TopperTracker };

package/lib/components/Topper/client/tracking.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopperTracker = void 0;
+class TopperTracker {
+    constructor({ type = 'flourish-topper' } = {}) {
+        this.startTime = 0;
+        this.totalVisibleTime = 0;
+        this.timeElapsedSeconds = null;
+        this.type = type;
+        this.component = document.querySelector(`[data-component-type="${this.type}"]`);
+        this.id = this.component?.getAttribute('data-component-id') || null;
+        this.observer = null;
+    }
+    init() {
+        if (!window.IntersectionObserver || !this.component) {
+            return;
+        }
+        this.dispatchEvent('mount');
+        this.observer = new IntersectionObserver(this.onChange.bind(this), {
+            threshold: [0.75],
+        });
+        this.observer.observe(this.component);
+    }
+    dispatchEvent(action) {
+        const component = {
+            name: this.type,
+            id: this.id,
+        };
+        if (this.timeElapsedSeconds) {
+            component.timeElapsedSeconds = this.timeElapsedSeconds;
+        }
+        const event = new CustomEvent('oTracking.event', {
+            detail: {
+                category: 'component',
+                action: action,
+                component,
+            },
+            bubbles: true,
+        });
+        document.body.dispatchEvent(event);
+    }
+    onChange(changes) {
+        changes.forEach((change) => {
+            if (change.target !== this.component) {
+                return;
+            }
+            if (change.isIntersecting || change.intersectionRatio >= 1) {
+                this.dispatchEvent('view');
+                this.startTime = performance.now();
+            }
+            if (!change.isIntersecting || change.intersectionRatio === 0) {
+                this.totalVisibleTime = performance.now() - this.startTime;
+                this.timeElapsedSeconds = parseFloat((this.totalVisibleTime / 1000).toFixed(2));
+                this.dispatchEvent('stop-view');
+                this.totalVisibleTime = 0;
+                this.timeElapsedSeconds = null;
+            }
+        });
+    }
+    disconnect() {
+        if (this.observer && this.component) {
+            this.observer.unobserve(this.component);
+            this.observer.disconnect();
+        }
+    }
+}
+exports.TopperTracker = TopperTracker;
+//# sourceMappingURL=tracking.js.map

package/lib/components/Topper/client/tracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking.js","sourceRoot":"","sources":["../../../../src/components/Topper/client/tracking.ts"],"names":[],"mappings":"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"}

package/lib/components/Topper/client/tracking.spec.d.ts

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

package/lib/components/Topper/client/tracking.spec.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./index");
+describe('TopperTracker', () => {
+    let mockIntersectionObserver;
+    let mockObserve;
+    let mockUnobserve;
+    let mockDisconnect;
+    let mockComponent;
+    let dispatchEventSpy;
+    beforeEach(() => {
+        mockObserve = jest.fn();
+        mockUnobserve = jest.fn();
+        mockDisconnect = jest.fn();
+        mockIntersectionObserver = jest.fn(() => {
+            return {
+                observe: mockObserve,
+                unobserve: mockUnobserve,
+                disconnect: mockDisconnect,
+            };
+        });
+        window.IntersectionObserver = mockIntersectionObserver;
+        mockComponent = document.createElement('div');
+        mockComponent.setAttribute('data-component-type', 'flourish-topper');
+        mockComponent.setAttribute('data-component-id', 'test-id');
+        document.body.appendChild(mockComponent);
+        jest.spyOn(document, 'querySelector').mockReturnValue(mockComponent);
+        jest
+            .spyOn(performance, 'now')
+            .mockImplementationOnce(() => 1)
+            .mockImplementationOnce(() => 12344);
+        dispatchEventSpy = jest.spyOn(document.body, 'dispatchEvent');
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+        document.body.removeChild(mockComponent);
+    });
+    it('should initialise and observe the component', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        expect(mockIntersectionObserver).toHaveBeenCalled();
+        expect(mockObserve).toHaveBeenCalledWith(mockComponent);
+    });
+    it('should dispatch a mount event on intialisation', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        const mountEvent = dispatchEventSpy.mock.calls[0][0];
+        expect(mountEvent.type).toBe('oTracking.event');
+        expect(mountEvent.detail).toEqual({
+            category: 'component',
+            action: 'mount',
+            component: {
+                name: 'flourish-topper',
+                id: 'test-id',
+            },
+        });
+    });
+    it('should handle component visibility changes', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        const mockChanges = [
+            {
+                target: mockComponent,
+                isIntersecting: true,
+                intersectionRatio: 1.0,
+                boundingClientRect: {},
+                intersectionRect: {},
+                rootBounds: null,
+                time: 1,
+            },
+        ];
+        tracker['onChange'](mockChanges);
+        const viewEvent = dispatchEventSpy.mock.calls[1][0];
+        expect(viewEvent.type).toBe('oTracking.event');
+        expect(viewEvent.detail).toEqual({
+            category: 'component',
+            action: 'view',
+            component: {
+                name: 'flourish-topper',
+                id: 'test-id',
+            },
+        });
+        const mockChangesAfter = [
+            {
+                target: mockComponent,
+                isIntersecting: false,
+                intersectionRatio: 0.0,
+                boundingClientRect: {},
+                intersectionRect: {},
+                rootBounds: null,
+                time: 12.3444,
+            },
+        ];
+        tracker['onChange'](mockChangesAfter);
+        const stopViewEvent = dispatchEventSpy.mock.calls[2][0];
+        expect(stopViewEvent.type).toBe('oTracking.event');
+        expect(stopViewEvent.detail).toEqual({
+            category: 'component',
+            action: 'stop-view',
+            component: {
+                name: 'flourish-topper',
+                id: 'test-id',
+                timeElapsedSeconds: 12.34,
+            },
+        });
+    });
+    it('should disconnect the observer', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        tracker.disconnect();
+        expect(mockUnobserve).toHaveBeenCalledWith(mockComponent);
+        expect(mockDisconnect).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=tracking.spec.js.map

package/lib/components/Topper/client/tracking.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking.spec.js","sourceRoot":"","sources":["../../../../src/components/Topper/client/tracking.spec.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "6.13.0",
+  "version": "6.14.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^3.3.2",
-    "@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
+    "@financial-times/content-tree": "github:financial-times/content-tree#abdc26b",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-grid": "^6.1.5",

package/src/client.ts

@@ -1,3 +1,4 @@
 export { default as Clip } from './components/Clip/client/index'
 export { default as BackToTopButton } from './components/BackToTopButton/client'
 export { default as FlourishSSREmbed } from './components/Flourish/client/index'
+export { TopperTracker } from './components/Topper/client/index'

package/src/components/Flourish/index.tsx

@@ -46,6 +46,7 @@ export default function Flourish({
   iFrame = false,
   inArticleBody = true,
 }: FlourishProps) {
+  if (!id) return null
   const anchorHref = `#${id}`
   const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid'
   const figureClassnames = classnames({
@@ -68,8 +69,6 @@ export default function Flourish({
         }
       : {}
 
-  if (!id) return null
-
   return (
     <div
       className={classnames({
@@ -79,6 +78,10 @@ export default function Flourish({
       })}
       data-layout-width={fullGrid ? 'full-grid' : null}
       data-component="flourish"
+      data-component-id={id}
+      data-component-type={
+        inArticleBody ? 'flourish-in-article' : 'flourish-topper'
+      }
     >
       {iFrame && (
         <iframe

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

@@ -5,6 +5,8 @@ exports[`Flourish component renders ignoring layout different from full-grid 1`]
   <div
     class="n-content-layout"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
   >
     <figure
       class="n-content-picture n-content-layout__container"
@@ -52,6 +54,8 @@ exports[`Flourish component renders with a full-grid layout and fallback image 1
   <div
     class="n-content-layout"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
     data-layout-width="full-grid"
   >
     <figure
@@ -102,6 +106,8 @@ exports[`Flourish component renders with an iframe rather than using the embed s
   <div
     class="n-content-layout flourish flourish--iFrame"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
     data-layout-width="full-grid"
   >
     <iframe
@@ -157,6 +163,8 @@ exports[`Flourish component renders without n-content-layout class for charts no
   <div
     class=""
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-topper"
     data-layout-width="full-grid"
   >
     <figure
@@ -208,6 +216,8 @@ exports[`does not set aspect ratios when in article body 1`] = `
   <div
     class="n-content-layout"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
     data-layout-width="full-grid"
   >
     <figure
@@ -258,6 +268,8 @@ exports[`sets the hideTitle param in the iframe url to true when not in article
   <div
     class="flourish flourish--iFrame"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-topper"
     data-layout-width="full-grid"
   >
     <iframe

package/src/components/RichText/index.test.tsx

@@ -2,6 +2,7 @@ import React, { createElement } from 'react'
 import { render } from '@testing-library/react'
 import RichText from '.'
 import { ContentTree } from '@financial-times/content-tree'
+import { Body } from '@financial-times/cp-content-pipeline-schema/src/resolvers/content-tree/Workarounds'
 
 describe('<RichText />', () => {
   it('renders a content-tree using built-in components', () => {
@@ -31,18 +32,18 @@ describe('<RichText />', () => {
 
   it('adds a key property to all child components', () => {
     jest.spyOn(React, 'createElement')
-    const tree: ContentTree.Body = {
+    const tree: Body = {
       type: 'body',
       version: 1,
       children: [
         {
-          type: 'link',
-          children: [{ type: 'text', value: 'first link' }],
-        } as ContentTree.Link,
+          type: 'paragraph',
+          children: [{ type: 'text', value: 'first paragraph' }],
+        },
         {
-          type: 'link',
-          children: [{ type: 'text', value: 'second link' }],
-        } as ContentTree.Link,
+          type: 'paragraph',
+          children: [{ type: 'text', value: 'second paragraph' }],
+        },
       ],
     }
 
@@ -62,20 +63,20 @@ describe('<RichText />', () => {
   })
 
   it("ignores components that it doesn't have a mapping for", () => {
-    const tree: ContentTree.Body = {
+    const tree: Body = {
       type: 'body',
       version: 1,
       children: [
         {
-          type: 'link',
+          type: 'paragraph',
           children: [{ type: 'text', value: 'i should render' }],
-        } as ContentTree.Link,
+        },
         {
           type: 'unknown',
           children: [
             { type: 'text', value: 'i should not render' } as ContentTree.Text,
           ],
-        } as ContentTree.Parent,
+        } as unknown as ContentTree.Paragraph,
       ],
     }
 
@@ -87,13 +88,13 @@ describe('<RichText />', () => {
       <RichText structuredContent={structuredContent} />
     )
 
-    expect(getByText('i should render').tagName).toEqual('A')
+    expect(getByText('i should render').tagName).toEqual('P')
     //wrapping component with react-testing-library is a div
     expect(getByText('i should not render').tagName).toEqual('DIV')
   })
 
   it('adds references as props', () => {
-    const tree: ContentTree.Body = {
+    const tree: Body = {
       type: 'body',
       version: 1,
       children: [

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

@@ -0,0 +1,3 @@
+import { TopperTracker } from './tracking'
+
+export { TopperTracker }