@financial-times/cp-content-pipeline-ui 7.4.4 → 7.6.0

package/CHANGELOG.md

@@ -574,6 +574,20 @@
     * @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
 
+## [7.6.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.5.0...cp-content-pipeline-ui-v7.6.0) (2024-11-15)
+
+
+### Features
+
+* ci-2559 remove closed label from live blogs ([b61114a](https://github.com/Financial-Times/cp-content-pipeline/commit/b61114a60f8bf32c32f9f72c15f8c4f6ef6c6efc))
+
+## [7.5.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.4.4...cp-content-pipeline-ui-v7.5.0) (2024-11-12)
+
+
+### Features
+
+* declare support for Node 20 ([41c9641](https://github.com/Financial-Times/cp-content-pipeline/commit/41c9641898e647b1ad14c9d025683c8725f31d03))
+
 ## [7.4.4](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.4.3...cp-content-pipeline-ui-v7.4.4) (2024-11-11)
 
 

package/lib/components/Topper/LiveBlogIndicator.js

@@ -4,16 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const ft_date_format_1 = __importDefault(require("@financial-times/ft-date-format"));
 const LiveBlogIndicator = ({ realtime, lastUpdatedDateTime, }) => {
-    const liveBlogStatus = realtime ? 'live' : 'closed';
-    const indicatorStatusClasses = (0, classnames_1.default)('o-labels-indicator', `o-labels-indicator--${liveBlogStatus}`, 'o-labels-indicator--inverse', 'live-blog-indicator__status', `live-blog-indicator__status--${liveBlogStatus}`);
+    const isLive = Boolean(realtime);
     return (react_1.default.createElement("div", { className: "live-blog-indicator" },
-        react_1.default.createElement("span", { className: indicatorStatusClasses },
-            react_1.default.createElement("span", { className: "o-labels-indicator__status", "data-live-blog-status": liveBlogStatus },
+        isLive && (react_1.default.createElement("span", { className: "o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse live-blog-indicator__status live-blog-indicator__status--live" },
+            react_1.default.createElement("span", { className: "o-labels-indicator__status", "data-live-blog-status": "live" },
                 ' ',
-                liveBlogStatus)),
+                "Live"))),
         react_1.default.createElement("time", { id: "live-blog-updated-timestamp", "data-o-component": "o-date", className: "o-date live-blog-indicator__timestamp", dateTime: lastUpdatedDateTime, "data-o-date-format": "time-ago-no-seconds" },
             react_1.default.createElement("span", null, "Updated "),
             react_1.default.createElement("span", { "data-o-date-printer": true }, ft_date_format_1.default.timeAgo(lastUpdatedDateTime)))));

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

@@ -1 +1 @@
-{"version":3,"file":"LiveBlogIndicator.js","sourceRoot":"","sources":["../../../src/components/Topper/LiveBlogIndicator.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AACnC,qFAA0D;AAa1D,MAAM,iBAAiB,GAAqC,CAAC,EAC3D,QAAQ,EACR,mBAAmB,GACpB,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAA;IACnD,MAAM,sBAAsB,GAAG,IAAA,oBAAU,EACvC,oBAAoB,EACpB,uBAAuB,cAAc,EAAE,EACvC,6BAA6B,EAC7B,6BAA6B,EAC7B,gCAAgC,cAAc,EAAE,CACjD,CAAA;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,qBAAqB;QAClC,wCAAM,SAAS,EAAE,sBAAsB;YACrC,wCACE,SAAS,EAAC,4BAA4B,2BACf,cAAc;gBAEoC,GAAG;gBAC3E,cAAc,CACV,CACF;QACP,wCACE,EAAE,EAAC,6BAA6B,sBACf,QAAQ,EACzB,SAAS,EAAC,uCAAuC,EACjD,QAAQ,EAAE,mBAAmB,wBACV,qBAAqB;YAExC,uDAAqB;YACrB,uEACG,wBAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CACrC,CACF,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,iBAAiB,CAAA"}
+{"version":3,"file":"LiveBlogIndicator.js","sourceRoot":"","sources":["../../../src/components/Topper/LiveBlogIndicator.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,qFAA0D;AAa1D,MAAM,iBAAiB,GAAqC,CAAC,EAC3D,QAAQ,EACR,mBAAmB,GACpB,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;IAEhC,OAAO,CACL,uCAAK,SAAS,EAAC,qBAAqB;QACjC,MAAM,IAAI,CACT,wCAAM,SAAS,EAAC,uIAAuI;YACrJ,wCACE,SAAS,EAAC,4BAA4B,2BAChB,MAAM;gBAE6C,GAAG;uBAEvE,CACF,CACR;QAED,wCACE,EAAE,EAAC,6BAA6B,sBACf,QAAQ,EACzB,SAAS,EAAC,uCAAuC,EACjD,QAAQ,EAAE,mBAAmB,wBACV,qBAAqB;YAExC,uDAAqB;YACrB,uEACG,wBAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CACrC,CACF,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,iBAAiB,CAAA"}

package/lib/components/Topper/LiveBlogIndicator.spec.d.ts

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

package/lib/components/Topper/LiveBlogIndicator.spec.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const LiveBlogIndicator_1 = __importDefault(require("./LiveBlogIndicator"));
+describe('LiveBlogIndicator component', () => {
+    // times are set to absolute in the datetime attribute of the time element, but relative (e.g. 1 month ago) in the text body
+    // therefore we have to set a specific time for 'now', otherwise snapshots will be out of date instantly
+    beforeAll(() => {
+        jest.useFakeTimers();
+        const fakeSystemTime = new Date('2024-11-15T10:48:03.442Z');
+        jest.setSystemTime(fakeSystemTime);
+    });
+    afterAll(() => {
+        jest.useRealTimers();
+    });
+    it('shows a live label and the last updated time when the live blog is active', () => {
+        const tenMinutesAgo = new Date(Date.now() - 1000 * 60 * 10);
+        const { container } = (0, react_2.render)(react_1.default.createElement(LiveBlogIndicator_1.default, { realtime: true, lastUpdatedDateTime: tenMinutesAgo.toISOString() }));
+        expect(container).toMatchSnapshot();
+    });
+    it('does not show a label but does show the last updated time when the live blog is no longer active', () => {
+        const tenDaysAgo = new Date(Date.now() - 1000 * 60 * 60 * 24 * 10);
+        const { container } = (0, react_2.render)(react_1.default.createElement(LiveBlogIndicator_1.default, { realtime: false, lastUpdatedDateTime: tenDaysAgo.toISOString() }));
+        expect(container).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=LiveBlogIndicator.spec.js.map

package/lib/components/Topper/LiveBlogIndicator.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveBlogIndicator.spec.js","sourceRoot":"","sources":["../../../src/components/Topper/LiveBlogIndicator.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kDAA+C;AAC/C,4EAAmD;AAEnD,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC3C,4HAA4H;IAC5H,wGAAwG;IACxG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,0BAA0B,CAAC,CAAA;QAC3D,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,CAAC,CAAC,CAAA;IACF,QAAQ,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2EAA2E,EAAE,GAAG,EAAE;QACnF,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,2BAAiB,IAChB,QAAQ,EAAE,IAAI,EACd,mBAAmB,EAAE,aAAa,CAAC,WAAW,EAAE,GAChD,CACH,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kGAAkG,EAAE,GAAG,EAAE;QAC1G,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;QAClE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,2BAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,mBAAmB,EAAE,UAAU,CAAC,WAAW,EAAE,GAC7C,CACH,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/lib/components/body-components/PodcastBody/index.js

@@ -15,8 +15,7 @@ const PodcastBody = ({ content, richTextComponents, showPlayer = true, showAcces
         // HACK:20230712:IM use next-article's CSS classes until we bundle styles
         className: "article__content-body n-content-body js-article__content-body", "data-trackable": "article-body", "data-attribute": "article-content-body" },
         showPlayer && podcast?.url && (react_1.default.createElement("div", { className: "article__media" },
-            react_1.default.createElement("div", { id: "ima-audio-ad-container", style: { display: 'none' } }),
-            react_1.default.createElement("audio", { controls: true, "data-o-component": "o-audio", "data-audio-subtype": "podcast", "data-content-id": content.id, "data-dispatch-listened-event-on-unload": true, id: "ima-audio-player" },
+            react_1.default.createElement("audio", { controls: true, "data-o-component": "o-audio", "data-audio-subtype": "podcast", "data-content-id": content.id, "data-dispatch-listened-event-on-unload": true },
                 react_1.default.createElement("source", { src: podcast.url, type: podcastMediaType }),
                 react_1.default.createElement("p", null,
                     "Your browser does not support playing this file but you can still",

package/lib/components/body-components/PodcastBody/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/body-components/PodcastBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,8DAAqC;AAQrC,MAAM,WAAW,GAA+B,CAAC,EAC/C,OAAO,EACP,kBAAkB,EAClB,UAAU,GAAG,IAAI,EACjB,sBAAsB,GAAG,IAAI,GAC9B,EAAE,EAAE;IACH,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE,CAAC;QACnC,OAAO,IAAI,CAAA;IACb,CAAC;IACD,MAAM,gBAAgB,GAAG,YAAY,CAAA;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,IAAI,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,gBAAgB,CACjD,CAAA;IAED,OAAO,CACL;QACE,yEAAyE;QACzE,SAAS,EAAC,+DAA+D,oBAC1D,cAAc,oBACd,sBAAsB;QAEpC,UAAU,IAAI,OAAO,EAAE,GAAG,IAAI,CAC7B,uCAAK,SAAS,EAAC,gBAAgB;YAC7B,uCAAK,EAAE,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAQ;YACnE,yCACE,QAAQ,4BACS,SAAS,wBACP,SAAS,qBACX,OAAO,CAAC,EAAE,kDAE3B,EAAE,EAAC,kBAAkB;gBAErB,0CAAQ,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,gBAAgB,GAAI;gBACpD;;oBACoE,GAAG;oBACrE,qCAAG,IAAI,EAAE,OAAO,CAAC,GAAG,4BAA2B;wCAC7C,CACE,CACJ,CACP;QAEA,OAAO,CAAC,IAAI,EAAE,UAAU,IAAI,CAC3B,2CAAS,SAAS,EAAC,gBAAgB;YACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,kBAAkB,GAC9B;YACD,sBAAsB,IAAI,CACzB;gBACE,qCAAG,IAAI,EAAC,uCAAuC,mCAE3C;oBAEF,CACL,CACO,CACX,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/body-components/PodcastBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,8DAAqC;AAQrC,MAAM,WAAW,GAA+B,CAAC,EAC/C,OAAO,EACP,kBAAkB,EAClB,UAAU,GAAG,IAAI,EACjB,sBAAsB,GAAG,IAAI,GAC9B,EAAE,EAAE;IACH,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE,CAAC;QACnC,OAAO,IAAI,CAAA;IACb,CAAC;IACD,MAAM,gBAAgB,GAAG,YAAY,CAAA;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,IAAI,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,gBAAgB,CACjD,CAAA;IAED,OAAO,CACL;QACE,yEAAyE;QACzE,SAAS,EAAC,+DAA+D,oBAC1D,cAAc,oBACd,sBAAsB;QAEpC,UAAU,IAAI,OAAO,EAAE,GAAG,IAAI,CAC7B,uCAAK,SAAS,EAAC,gBAAgB;YAC7B,yCACE,QAAQ,4BACS,SAAS,wBACP,SAAS,qBACX,OAAO,CAAC,EAAE;gBAG3B,0CAAQ,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,gBAAgB,GAAI;gBACpD;;oBACoE,GAAG;oBACrE,qCAAG,IAAI,EAAE,OAAO,CAAC,GAAG,4BAA2B;wCAC7C,CACE,CACJ,CACP;QAEA,OAAO,CAAC,IAAI,EAAE,UAAU,IAAI,CAC3B,2CAAS,SAAS,EAAC,gBAAgB;YACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,kBAAkB,GAC9B;YACD,sBAAsB,IAAI,CACzB;gBACE,qCAAG,IAAI,EAAC,uCAAuC,mCAE3C;oBAEF,CACL,CACO,CACX,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "7.4.4",
+  "version": "7.6.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -73,9 +73,9 @@
     }
   },
   "engines": {
-    "node": "18.x"
+    "node": "18.x || 20.x"
   },
   "volta": {
-    "node": "18.20.2"
+    "extends": "../../package.json"
   }
 }

package/src/components/Body/__snapshots__/index.test.tsx.snap

@@ -52,17 +52,12 @@ exports[`Body default renderers renders default renderer for Audio 1`] = `
     <div
       class="article__media"
     >
-      <div
-        id="ima-audio-ad-container"
-        style="display: none;"
-      />
       <audio
         controls=""
         data-audio-subtype="podcast"
         data-content-id="00000000-0000-0000-0000-000000000000"
         data-dispatch-listened-event-on-unload="true"
         data-o-component="o-audio"
-        id="ima-audio-player"
       >
         <source
           src="https://open.spotify.com/album/34a7B1mPM7RqlwsjPPmzEg?si=aHxMBJ1zRES6Z0iIrTrwBQ"

package/src/components/Topper/LiveBlogIndicator.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import LiveBlogIndicator from './LiveBlogIndicator'
+
+describe('LiveBlogIndicator component', () => {
+  // times are set to absolute in the datetime attribute of the time element, but relative (e.g. 1 month ago) in the text body
+  // therefore we have to set a specific time for 'now', otherwise snapshots will be out of date instantly
+  beforeAll(() => {
+    jest.useFakeTimers()
+    const fakeSystemTime = new Date('2024-11-15T10:48:03.442Z')
+    jest.setSystemTime(fakeSystemTime)
+  })
+  afterAll(() => {
+    jest.useRealTimers()
+  })
+
+  it('shows a live label and the last updated time when the live blog is active', () => {
+    const tenMinutesAgo = new Date(Date.now() - 1000 * 60 * 10)
+    const { container } = render(
+      <LiveBlogIndicator
+        realtime={true}
+        lastUpdatedDateTime={tenMinutesAgo.toISOString()}
+      />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('does not show a label but does show the last updated time when the live blog is no longer active', () => {
+    const tenDaysAgo = new Date(Date.now() - 1000 * 60 * 60 * 24 * 10)
+    const { container } = render(
+      <LiveBlogIndicator
+        realtime={false}
+        lastUpdatedDateTime={tenDaysAgo.toISOString()}
+      />
+    )
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/components/Topper/LiveBlogIndicator.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import classnames from 'classnames'
 import ftDateFormat from '@financial-times/ft-date-format'
 
 /**
@@ -17,26 +16,22 @@ const LiveBlogIndicator: React.FC<LiveBlogIndicatorProps> = ({
   realtime,
   lastUpdatedDateTime,
 }) => {
-  const liveBlogStatus = realtime ? 'live' : 'closed'
-  const indicatorStatusClasses = classnames(
-    'o-labels-indicator',
-    `o-labels-indicator--${liveBlogStatus}`,
-    'o-labels-indicator--inverse',
-    'live-blog-indicator__status',
-    `live-blog-indicator__status--${liveBlogStatus}`
-  )
+  const isLive = Boolean(realtime)
 
   return (
     <div className="live-blog-indicator">
-      <span className={indicatorStatusClasses}>
-        <span
-          className="o-labels-indicator__status"
-          data-live-blog-status={liveBlogStatus}
-        >
-          {/* Origami o-label component expects whitespace to output correctly */}{' '}
-          {liveBlogStatus}
+      {isLive && (
+        <span className="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse live-blog-indicator__status live-blog-indicator__status--live">
+          <span
+            className="o-labels-indicator__status"
+            data-live-blog-status="live"
+          >
+            {/* Origami o-label component expects whitespace to output correctly */}{' '}
+            Live
+          </span>
         </span>
-      </span>
+      )}
+
       <time
         id="live-blog-updated-timestamp"
         data-o-component="o-date"

package/src/components/Topper/__snapshots__/LiveBlogIndicator.spec.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LiveBlogIndicator component does not show a label but does show the last updated time when the live blog is no longer active 1`] = `
+<div>
+  <div
+    class="live-blog-indicator"
+  >
+    <time
+      class="o-date live-blog-indicator__timestamp"
+      data-o-component="o-date"
+      data-o-date-format="time-ago-no-seconds"
+      datetime="2024-11-05T10:48:03.442Z"
+      id="live-blog-updated-timestamp"
+    >
+      <span>
+        Updated 
+      </span>
+      <span
+        data-o-date-printer="true"
+      >
+        10 days ago
+      </span>
+    </time>
+  </div>
+</div>
+`;
+
+exports[`LiveBlogIndicator component shows a live label and the last updated time when the live blog is active 1`] = `
+<div>
+  <div
+    class="live-blog-indicator"
+  >
+    <span
+      class="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse live-blog-indicator__status live-blog-indicator__status--live"
+    >
+      <span
+        class="o-labels-indicator__status"
+        data-live-blog-status="live"
+      >
+         
+        Live
+      </span>
+    </span>
+    <time
+      class="o-date live-blog-indicator__timestamp"
+      data-o-component="o-date"
+      data-o-date-format="time-ago-no-seconds"
+      datetime="2024-11-15T10:38:03.442Z"
+      id="live-blog-updated-timestamp"
+    >
+      <span>
+        Updated 
+      </span>
+      <span
+        data-o-date-printer="true"
+      >
+        10 minutes ago
+      </span>
+    </time>
+  </div>
+</div>
+`;

package/src/components/body-components/PodcastBody/index.tsx

@@ -30,14 +30,12 @@ const PodcastBody: React.FC<PodcastBodyProps> = ({
     >
       {showPlayer && podcast?.url && (
         <div className="article__media">
-          <div id="ima-audio-ad-container" style={{ display: 'none' }}></div>
           <audio
             controls
             data-o-component="o-audio"
             data-audio-subtype="podcast"
             data-content-id={content.id}
             data-dispatch-listened-event-on-unload
-            id="ima-audio-player"
           >
             <source src={podcast.url} type={podcastMediaType} />
             <p>