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

package/CHANGELOG.md

@@ -574,6 +574,13 @@
     * @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)
 
 

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/package.json

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

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>
+`;