@financial-times/cp-content-pipeline-ui 6.4.6 → 6.5.0

package/lib/components/Topper/index.js

@@ -12,6 +12,8 @@ const Picture_1 = __importDefault(require("./Picture"));
 const Headshot_1 = __importDefault(require("../Headshot"));
 const Columnist_1 = __importDefault(require("./Columnist"));
 const LiveBlogIndicator_1 = __importDefault(require("./LiveBlogIndicator"));
+const Flourish_1 = __importDefault(require("../Flourish"));
+const Layout_1 = require("../Layout");
 const classnames_1 = __importDefault(require("classnames"));
 function Topper({ content, slot, followButtonSlot, showPremiumLabel = false, readNextSlot, }) {
     const { topper } = content;
@@ -23,6 +25,7 @@ function Topper({ content, slot, followButtonSlot, showPremiumLabel = false, rea
     const isBasic = topper.__typename === 'BasicTopper';
     const isOpinion = topper.__typename === 'OpinionTopper';
     const isPodcast = topper.__typename === 'PodcastTopper';
+    const isFlourish = topper.__typename === 'TopperWithFlourish' && !!topper.leadFlourish;
     const isAudio = content.__typename === 'Audio';
     const hasLayout = 'layout' in topper && topper.layout;
     const hasDesign = 'design' in topper && topper.design;
@@ -67,6 +70,9 @@ function Topper({ content, slot, followButtonSlot, showPremiumLabel = false, rea
                     react_1.default.createElement(LiveBlogIndicator_1.default, { realtime: content.realtime ?? undefined, lastUpdatedDateTime: getMostRecentPostPublishedDate() }))) : (react_1.default.createElement(Tags_1.default, { __typename: topper.__typename, isPackage: isPackage, displayConcept: topper.displayConcept ?? undefined, brandConcept: ('brandConcept' in topper && topper.brandConcept) || undefined, genreConcept: ('genreConcept' in topper && topper.genreConcept) || undefined, headshot: hasHeadshot || undefined, hasColumnist: hasColumnist, followButtonVariant: topper.followButtonVariant, FollowButtonSlot: followButtonSlot })),
                 react_1.default.createElement(Headline_1.default, { headline: topper.headline, showPremiumLabel: showPremiumLabel && content.accessLevel === 'premium', isLargeHeadline: ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
                         undefined }),
+                isLiveBlog && isFlourish ? (react_1.default.createElement(Layout_1.Layout, { layoutWidth: "full-grid" },
+                    react_1.default.createElement(Layout_1.LayoutContainer, null,
+                        react_1.default.createElement(Flourish_1.default, { id: topper.leadFlourish.id || '', flourishType: topper.leadFlourish.type || '', description: topper.leadFlourish.description || '', fallbackImage: topper.leadFlourish.fallbackImage || '', iFrame: true, inArticleBody: false })))) : (''),
                 topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source })),
                 hasHeadshot && !isAudio && isOpinion && topper.columnist && (react_1.default.createElement("div", { className: "o-topper__headshot" },
                     react_1.default.createElement(Headshot_1.default, { headshot: topper.headshot, prefLabel: topper.columnist.prefLabel, className: 'o-topper__headshot-image', altText: headshotAltText }))),

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import Topper from "../components/Topper";
+declare const _default: {
+    title: string;
+    component: typeof Topper;
+    content: {};
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/stories/Topper.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const Topper_1 = __importDefault(require("../components/Topper"));
+const content_1 = require("./content");
+const args = {
+    content: content_1.content
+};
+exports.default = {
+    title: 'Topper',
+    component: Topper_1.default,
+    content: {}
+};
+const Default = () => {
+    return (react_1.default.createElement("div", { className: "story-container" },
+        react_1.default.createElement(Topper_1.default, { ...args })));
+};
+exports.Default = Default;
+//# sourceMappingURL=Topper.stories.js.map

package/lib/stories/Topper.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Topper.stories.js","sourceRoot":"","sources":["../../src/stories/Topper.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,kEAA2D;AAC3D,uCAAoC;AAGpC,MAAM,IAAI,GAAgB;IACtB,OAAO,EAAE,iBAA6C;CACzD,CAAA;AAED,kBAAe;IACX,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,gBAAM;IACjB,OAAO,EAAE,EAAE;CACd,CAAA;AAEM,MAAM,OAAO,GAAG,GAAG,EAAE;IACxB,OAAO,CACH,uCAAK,SAAS,EAAC,iBAAiB;QAC5B,8BAAC,gBAAM,OAAK,IAAI,GAAI,CAClB,CACT,CAAA;AACL,CAAC,CAAA;AANY,QAAA,OAAO,WAMnB"}

package/lib/stories/content.d.ts

@@ -0,0 +1,65 @@
+export declare const content: {
+    __typename: string;
+    id: string;
+    title: string;
+    publishedDate: string;
+    firstPublishedDate: string;
+    standfirst: null;
+    topper: {
+        __typename: string;
+        layout: string;
+        layoutWidth: string;
+        headline: string;
+        backgroundColour: string;
+        backgroundBox: null;
+        textShadow: null;
+        followButtonVariant: string;
+        intro: {
+            source: string;
+            structured: {
+                tree: {
+                    type: string;
+                    version: number;
+                    children: {
+                        type: string;
+                        value: string;
+                    }[];
+                };
+            };
+        };
+        displayConcept: {
+            id: string;
+            prefLabel: string;
+            types: string[];
+            type: string;
+            directType: string;
+            isPackageBrand: boolean;
+            predicate: string;
+            url: string;
+            relativeUrl: string;
+        };
+        genreConcept: {
+            id: string;
+            prefLabel: string;
+            types: string[];
+            type: string;
+            directType: string;
+            isPackageBrand: boolean;
+            predicate: string;
+            url: string;
+            relativeUrl: string;
+        };
+        leadFlourish: {
+            type: string;
+            id: string;
+            description: string;
+            fallbackImage: {
+                url: string;
+                type: string;
+                format: string;
+                width: number;
+                height: number;
+            };
+        };
+    };
+};

package/lib/stories/content.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.content = void 0;
+exports.content = {
+    __typename: 'LiveBlogPackage',
+    id: 'f9d0da8a-ac43-4f0d-8af5-d597d1f13bb8',
+    title: 'News updates from February 2: US adds 353,000 jobs in January, US hits Iraq and Syria after drone deaths',
+    publishedDate: '2024-02-05T12:00:44.399Z',
+    firstPublishedDate: '2024-02-05T12:00:44.399Z',
+    standfirst: null,
+    topper: {
+        __typename: 'TopperWithFlourish',
+        layout: 'flourish',
+        layoutWidth: 'full-width',
+        headline: 'News updates from February 2: US adds 353,000 jobs in January, US hits Iraq and Syria after drone deaths',
+        backgroundColour: 'paper',
+        backgroundBox: null,
+        textShadow: null,
+        followButtonVariant: 'standard',
+        intro: {
+            source: 'standfirst',
+            structured: {
+                tree: {
+                    type: 'body',
+                    version: 1,
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'Media sector scrambles to deal with fallout from phase out of cross-website trackers '
+                        }
+                    ]
+                }
+            }
+        },
+        displayConcept: {
+            id: '84cf4073-a674-4a93-aef9-dcc1832a65cb',
+            prefLabel: 'Amazon.com',
+            types: [
+                'http://www.ft.com/ontology/core/Thing',
+                'http://www.ft.com/ontology/concept/Concept',
+                'http://www.ft.com/ontology/organisation/Organisation',
+                'http://www.ft.com/ontology/company/Company',
+                'http://www.ft.com/ontology/company/PublicCompany'
+            ],
+            type: 'ORGANISATION',
+            directType: 'http://www.ft.com/ontology/company/PublicCompany',
+            isPackageBrand: false,
+            predicate: 'http://www.ft.com/ontology/hasDisplayTag',
+            url: 'https://www.ft.com/stream/84cf4073-a674-4a93-aef9-dcc1832a65cb',
+            relativeUrl: '/stream/84cf4073-a674-4a93-aef9-dcc1832a65cb'
+        },
+        genreConcept: {
+            id: 'a579350c-61ce-4c00-97ca-ddaa2e0cacf6',
+            prefLabel: 'News',
+            types: [
+                'http://www.ft.com/ontology/core/Thing',
+                'http://www.ft.com/ontology/concept/Concept',
+                'http://www.ft.com/ontology/classification/Classification',
+                'http://www.ft.com/ontology/Genre'
+            ],
+            type: 'GENRE',
+            directType: 'http://www.ft.com/ontology/Genre',
+            isPackageBrand: false,
+            predicate: 'http://www.ft.com/ontology/classification/isClassifiedBy',
+            url: 'https://www.ft.com/stream/a579350c-61ce-4c00-97ca-ddaa2e0cacf6',
+            relativeUrl: '/stream/a579350c-61ce-4c00-97ca-ddaa2e0cacf6'
+        },
+        leadFlourish: {
+            type: 'visualisation',
+            id: '15700475',
+            description: 'EU Airlines',
+            fallbackImage: {
+                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fpublic.flourish.studio%2Fvisualisation%2F15700475%2Fthumbnail?source=cp-content-pipeline&fit=scale-down&quality=highest&width=1020&dpr=1',
+                type: 'visualisation',
+                format: 'standard',
+                width: 1020,
+                height: 892
+            }
+        }
+    },
+};
+//# sourceMappingURL=content.js.map

package/lib/stories/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sourceRoot":"","sources":["../../src/stories/content.tsx"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG;IACnB,UAAU,EAAE,iBAAiB;IAC7B,EAAE,EAAE,sCAAsC;IAC1C,KAAK,EAAE,0GAA0G;IACjH,aAAa,EAAE,0BAA0B;IACzC,kBAAkB,EAAE,0BAA0B;IAC9C,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE;QACJ,UAAU,EAAE,oBAAoB;QAChC,MAAM,EAAE,UAAU;QAClB,WAAW,EAAE,YAAY;QACzB,QAAQ,EAAE,0GAA0G;QACpH,gBAAgB,EAAE,OAAO;QACzB,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,IAAI;QAChB,mBAAmB,EAAE,UAAU;QAC/B,KAAK,EAAE;YACH,MAAM,EAAE,YAAY;YACpB,UAAU,EAAE;gBACR,IAAI,EAAE;oBACF,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE;wBACN;4BACI,IAAI,EAAE,MAAM;4BACZ,KAAK,EAAE,uFAAuF;yBACjG;qBACJ;iBACJ;aACJ;SACJ;QACD,cAAc,EAAE;YACZ,EAAE,EAAE,sCAAsC;YAC1C,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE;gBACH,uCAAuC;gBACvC,4CAA4C;gBAC5C,sDAAsD;gBACtD,4CAA4C;gBAC5C,kDAAkD;aACrD;YACD,IAAI,EAAE,cAAc;YACpB,UAAU,EAAE,kDAAkD;YAC9D,cAAc,EAAE,KAAK;YACrB,SAAS,EAAE,0CAA0C;YACrD,GAAG,EAAE,gEAAgE;YACrE,WAAW,EAAE,8CAA8C;SAC9D;QACD,YAAY,EAAE;YACV,EAAE,EAAE,sCAAsC;YAC1C,SAAS,EAAE,MAAM;YACjB,KAAK,EAAE;gBACH,uCAAuC;gBACvC,4CAA4C;gBAC5C,0DAA0D;gBAC1D,kCAAkC;aACrC;YACD,IAAI,EAAE,OAAO;YACb,UAAU,EAAE,kCAAkC;YAC9C,cAAc,EAAE,KAAK;YACrB,SAAS,EAAE,0DAA0D;YACrE,GAAG,EAAE,gEAAgE;YACrE,WAAW,EAAE,8CAA8C;SAC9D;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,EAAE,EAAE,UAAU;YACd,WAAW,EAAE,aAAa;YAC1B,aAAa,EAAE;gBACb,GAAG,EAAE,iNAAiN;gBACtN,IAAI,EAAE,eAAe;gBACrB,MAAM,EAAE,UAAU;gBAClB,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,GAAG;aACZ;SACF;KACN;CACJ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "6.4.6",
+  "version": "6.5.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -17,9 +17,9 @@
     "@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.0",
-    "@financial-times/cp-content-pipeline-schema": "^2.9.2",
-    "@financial-times/cp-content-pipeline-styles": "^2.4.1",
+    "@financial-times/cp-content-pipeline-client": "^3.7.1",
+    "@financial-times/cp-content-pipeline-schema": "^2.10.0",
+    "@financial-times/cp-content-pipeline-styles": "^2.4.2",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-grid": "^6.1.5",
@@ -38,10 +38,11 @@
     "@storybook/react-webpack5": "^7.0.24",
     "@storybook/testing-library": "^0.2.0",
     "@sucrase/jest-plugin": "^3.0.0",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/financial-times__n-scrollytelling-image": "0.0.0",
     "@types/react": "^18.0.15",
+    "@types/react-test-renderer": "^18.3.0",
     "eslint-plugin-react": "^7.30.1",
     "jest-environment-jsdom": "^29.6.1",
     "n-ui-foundations": "^9.1.0",

package/src/client.ts

@@ -1,2 +1,3 @@
 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'

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

@@ -38,6 +38,7 @@ interface TrackingData {
   category: string
   contentId?: string
   action: string
+  url: string
   progress?: number
   amount?: number
   amountPercentage?: number
@@ -332,6 +333,7 @@ class Clip extends ClipInterface {
       //contentId: this.opts.id,
       action: eventType,
       progress: this.getRelevantProgress(),
+      url: window.location.href,
       video: {
         duration: this.getDuration(),
         source_url: this.opts.id,

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

@@ -26,13 +26,13 @@ class ProgressBar {
   private onWindowMouseMoveListener: (e: MouseEvent) => void
   private onWindowMouseUpListener: (e: MouseEvent) => void
   private opts: Required<Opts>
-  private isMobileDevice = false
+
   constructor(videoEl: HTMLVideoElement, opts: Opts) {
     this.videoEl = videoEl
     this.opts = { ...defaultOpts, ...opts }
     this.onWindowMouseMoveListener = this.windowMouseMoveListener.bind(this)
     this.onWindowMouseUpListener = this.windowMouseUpListener.bind(this)
-    this.isMobileDevice = isMobile()
+
     const container = document.createElement('div')
     container.classList.add('cp-clip__video-progress-bar')
     const mainBar = document.createElement('div')
@@ -88,17 +88,21 @@ class ProgressBar {
 
     //When mousedown for progressBarTimeTriggerTap time we dispatch the tap event
     container.addEventListener('mousedown', () => {
-      this.mousePressed = true
-      window.addEventListener('mouseup', this.onWindowMouseUpListener)
-      window.addEventListener('mousemove', this.onWindowMouseMoveListener)
+      if (!isMobile()) {
+        this.mousePressed = true
+        window.addEventListener('mouseup', this.onWindowMouseUpListener)
+        window.addEventListener('mousemove', this.onWindowMouseMoveListener)
+      }
     })
 
     container.addEventListener('mouseover', () => {
-      mainBar.classList.add('cp-clip__progress-enlarged')
+      if (!isMobile()) {
+        mainBar.classList.add('cp-clip__progress-enlarged')
+      }
     })
 
     container.addEventListener('mouseleave', () => {
-      if (!this.mousePressed) {
+      if (!this.mousePressed && !isMobile()) {
         mainBar.classList.remove('cp-clip__progress-enlarged')
       }
     })
@@ -235,7 +239,7 @@ class ProgressBar {
   }
 
   windowMouseUpListener(e: MouseEvent) {
-    if (this.mousePressed && !this.isMobileDevice) {
+    if (this.mousePressed) {
       this.scrub(e.clientX)
       this.mousePressed = false
       if (!e.target || !this?.container?.contains(e.target as Node)) {

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

@@ -1,6 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import React from 'react'
+// TODO: React test renderer is depracated, we should use @testing-library/react
+// https://react.dev/warnings/react-test-renderer
 import renderer from 'react-test-renderer'
 import prettier from 'prettier'
 import { TextEncoder } from 'util'

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

@@ -0,0 +1,17 @@
+function hideIFrame(): void {
+  const flourishComponent = document.querySelectorAll(
+    '[data-component="flourish"]'
+  )
+  flourishComponent.forEach((component) => {
+    component.classList.add('disable-iframe')
+  })
+}
+
+function init(featureFlag: boolean = true): void {
+  // turning the feature flag off will hide the iframe and display the fallback image
+  if (!featureFlag) {
+    hideIFrame()
+  }
+}
+
+export default init

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

@@ -0,0 +1,38 @@
+.flourish {
+    &.flourish--iFrame {
+        @include oGridRespondTo(XL) {
+            max-width: oGridColspan(12);
+        }
+        margin-bottom: 0;
+        margin-top: oSpacingByName("s4")
+    }
+    // We need to force the iframe to be hidden if we turn the feature flag off
+    &.disable-iframe {
+        .flourish__i-frame {
+            display: none;
+        }
+
+        .flourish__figure {
+            display: block;
+        }
+    }
+}
+// Without JS the i-frame will not work, so we hide it
+.no-js {
+    .flourish__i-frame {
+        display: none;
+    }
+}
+.js {
+    .flourish__i-frame {
+        display: block;
+        border: 0;
+        @media screen and (max-width: 739px) {
+            // We need to enforce this otherwise it will use the inline styling
+            aspect-ratio: 3/4 !important;
+        }
+    }
+    .flourish__figure {
+        display: none;
+    }
+}

package/src/components/Flourish/index.tsx

@@ -1,12 +1,25 @@
 import React from 'react'
 import classnames from 'classnames'
-import { ContentTree } from '@financial-times/content-tree'
-import { FlourishFragment } from '@financial-times/cp-content-pipeline-client'
 
 type disclaimerProps = {
   id: string
 }
 
+type FlourishProps = {
+  id: string
+  type?: string
+  flourishType?: string
+  description?: string
+  layoutWidth?: string
+  fallbackImage: {
+    url?: string | null | undefined
+    width?: number | null | undefined
+    height?: number | null | undefined
+  }
+  iFrame?: boolean
+  inArticleBody?: boolean
+}
+
 const DisclaimerNotice = ({ id }: disclaimerProps) => (
   <div
     id={id}
@@ -30,20 +43,50 @@ export default function Flourish({
   description,
   layoutWidth,
   fallbackImage,
-}: ContentTree.Flourish & FlourishFragment) {
+  iFrame = false,
+  inArticleBody = true,
+}: FlourishProps) {
   const anchorHref = `#${id}`
   const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid'
   const figureClassnames = classnames({
     'n-content-picture': true,
     'n-content-layout__container': true,
     'n-content-picture--wide': fullGrid,
+    flourish__figure: iFrame,
   })
 
+  const iframeAspectRatio =
+    iFrame && fallbackImage?.width && fallbackImage?.height
+      ? `${fallbackImage.width}/${fallbackImage.height}`
+      : '16/9'
+
+  const imageAspectRatio =
+    !inArticleBody && fallbackImage?.width && fallbackImage?.height
+      ? {
+          width: '100%',
+          aspectRatio: `${fallbackImage.width}/${fallbackImage.height}`,
+        }
+      : {}
+
+  if (!id) return null
+
   return (
     <div
-      className="n-content-layout"
+      className={classnames({
+        'n-content-layout': inArticleBody,
+        flourish: iFrame,
+        'flourish--iFrame': iFrame,
+      })}
       data-layout-width={fullGrid ? 'full-grid' : null}
+      data-component="flourish"
     >
+      {iFrame && (
+        <iframe
+          src={`https://flo.uri.sh/visualisation/${id}/embed?hideTitle=${!inArticleBody}`} // hide the title of if in topper
+          style={{ width: '100%', aspectRatio: iframeAspectRatio }}
+          className="flourish__i-frame"
+        ></iframe>
+      )}
       <figure
         className={figureClassnames}
         data-original-image-width={fullGrid ? fallbackImage?.width : null}
@@ -51,12 +94,18 @@ export default function Flourish({
       >
         <a href={anchorHref}>
           <picture
-            data-asset-type="flourish"
+            // `flourish-embed` loads an iframe containing the JS version of a flourish chart
+            // `flourish` will be instead targeted by the flourish JS, that will replace the picture with the flourish JS version contained in an iframe
+            data-asset-type={iFrame ? 'flourish-embed' : 'flourish'}
             data-flourish-id={id}
             data-flourish-type={flourishType}
           >
             <DisclaimerNotice id={id} />
-            <img src={fallbackImage?.url} alt={description} />
+            <img
+              src={fallbackImage?.url || ''}
+              alt={description}
+              style={imageAspectRatio}
+            />
           </picture>
         </a>
       </figure>