@financial-times/cp-content-pipeline-ui 7.10.1 → 7.11.1

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.11.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.11.0...cp-content-pipeline-ui-v7.11.1) (2025-02-28)
+
+
+### Bug Fixes
+
+* ci-2708 sortable table column index can be 0 ([0c89bc9](https://github.com/Financial-Times/cp-content-pipeline/commit/0c89bc975334e7bd7d006dfe9844edc24289b3a8))
+
+## [7.11.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.10.1...cp-content-pipeline-ui-v7.11.0) (2025-02-25)
+
+
+### Features
+
+* **byline:** added updated publish date label to byline and modified date format logic ([aa08cb7](https://github.com/Financial-Times/cp-content-pipeline/commit/aa08cb7d0c531be0c0c512d2ec7c6a56ef3fbdc1))
+
 ## [7.10.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.10.0...cp-content-pipeline-ui-v7.10.1) (2025-01-27)
 
 

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
+import React from "react";
+import type { ArticleQuery } from "@financial-times/cp-content-pipeline-client";
 type ArticleInfoProps = {
-    content: ArticleQuery['content'];
+    content: ArticleQuery["content"];
 };
 declare const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>>;
 export default ArticleInfo;

package/lib/components/ArticleInfo/index.js

@@ -7,15 +7,29 @@ const react_1 = __importDefault(require("react"));
 const Byline_1 = __importDefault(require("../Byline"));
 const ft_date_format_1 = __importDefault(require("@financial-times/ft-date-format"));
 const ArticleInfo = ({ children, content, }) => {
-    const isLiveBlogPackage = content.__typename === 'LiveBlogPackage';
-    const formattedPublishedDate = ft_date_format_1.default.format(new Date(content.publishedTimestamp), 'date');
+    const isLiveBlogPackage = content.__typename === "LiveBlogPackage";
+    const formattedFirstPublishedDate = ft_date_format_1.default.format(new Date(content.firstPublishedDate), "date");
+    const formattedPublishedDate = ft_date_format_1.default.format(new Date(content.publishedTimestamp), "date");
+    const displayPublishedDate = content.publishedDate && !isLiveBlogPackage;
+    const displayUpdatedDate = new Date(content.firstPublishedDate).getTime() !==
+        content.publishedTimestamp;
+    const isPublishedMoreThanOneDayAgo = Date.now() - new Date(content.firstPublishedDate).getTime() >
+        24 * 60 * 60 * 1000;
     return (react_1.default.createElement("div", { className: "article-info" },
-        react_1.default.createElement("div", { className: "article-info__time-byline" },
-            content.byline && content.__typename !== 'Audio' && (react_1.default.createElement(Byline_1.default, { structuredContent: content.byline, showEditedBy: isLiveBlogPackage })),
-            content.publishedDate && !isLiveBlogPackage && (react_1.default.createElement(react_1.default.Fragment, null,
-                ' ',
-                react_1.default.createElement("time", { "data-o-component": "o-date", className: "article-info__timestamp o-date", dateTime: content.publishedDate }, formattedPublishedDate)))),
-        children));
+        react_1.default.createElement("div", { className: "article-info__time-byline-row" },
+            react_1.default.createElement("div", { className: "article-info__time-byline-content" }, content.byline && content.__typename !== "Audio" && (react_1.default.createElement(Byline_1.default, { structuredContent: content.byline, showEditedBy: isLiveBlogPackage }))),
+            !displayPublishedDate && children),
+        displayPublishedDate && (react_1.default.createElement("div", { className: "article-info__time-byline-row" },
+            react_1.default.createElement("div", { className: "article-info__time-byline-content" },
+                react_1.default.createElement("p", { className: "article-info__timestamp-item" },
+                    "Published",
+                    react_1.default.createElement("time", { "data-o-component": "o-date", ...(isPublishedMoreThanOneDayAgo
+                            ? { "data-o-date-format": "MMM d yyyy" }
+                            : {}), className: "article-info__timestamp o-date", dateTime: content.firstPublishedDate }, formattedFirstPublishedDate)),
+                displayUpdatedDate && (react_1.default.createElement("p", { className: "article-info__timestamp-item article-info__updated-timestamp" },
+                    "Updated",
+                    react_1.default.createElement("time", { "data-o-component": "o-date", "data-o-date-format": isPublishedMoreThanOneDayAgo ? "MMM d yyyy, HH:mm" : "HH:mm", className: "article-info__timestamp o-date", dateTime: content.publishedDate }, formattedPublishedDate)))),
+            children))));
 };
 exports.default = ArticleInfo;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleInfo/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,uDAA8B;AAE9B,qFAA0D;AAM1D,MAAM,WAAW,GAAwD,CAAC,EACxE,QAAQ,EACR,OAAO,GACR,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,KAAK,iBAAiB,CAAA;IAClE,MAAM,sBAAsB,GAAG,wBAAY,CAAC,MAAM,CAChD,IAAI,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACpC,MAAM,CACP,CAAA;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,cAAc;QAC3B,uCAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,IAAI,CACnD,8BAAC,gBAAM,IACL,iBAAiB,EAAE,OAAO,CAAC,MAAM,EACjC,YAAY,EAAE,iBAAiB,GAC/B,CACH;YACA,OAAO,CAAC,aAAa,IAAI,CAAC,iBAAiB,IAAI,CAC9C;gBACG,GAAG;gBACJ,4DACmB,QAAQ,EACzB,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAE,OAAO,CAAC,aAAa,IAE9B,sBAAsB,CAClB,CACN,CACJ,CACG;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleInfo/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,uDAA8B;AAE9B,qFAA0D;AAM1D,MAAM,WAAW,GAAwD,CAAC,EACxE,QAAQ,EACR,OAAO,GACR,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,KAAK,iBAAiB,CAAA;IAClE,MAAM,2BAA2B,GAAG,wBAAY,CAAC,MAAM,CACrD,IAAI,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACpC,MAAM,CACP,CAAA;IACD,MAAM,sBAAsB,GAAG,wBAAY,CAAC,MAAM,CAChD,IAAI,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACpC,MAAM,CACP,CAAA;IAED,MAAM,oBAAoB,GAAG,OAAO,CAAC,aAAa,IAAI,CAAC,iBAAiB,CAAA;IACxE,MAAM,kBAAkB,GACtB,IAAI,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,OAAO,EAAE;QAC9C,OAAO,CAAC,kBAAkB,CAAA;IAC5B,MAAM,4BAA4B,GAChC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,OAAO,EAAE;QAC3D,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;IAErB,OAAO,CACL,uCAAK,SAAS,EAAC,cAAc;QAC3B,uCAAK,SAAS,EAAC,+BAA+B;YAC5C,uCAAK,SAAS,EAAC,mCAAmC,IAC/C,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,IAAI,CACnD,8BAAC,gBAAM,IACL,iBAAiB,EAAE,OAAO,CAAC,MAAM,EACjC,YAAY,EAAE,iBAAiB,GAC/B,CACH,CACG;YACL,CAAC,oBAAoB,IAAI,QAAQ,CAC9B;QACL,oBAAoB,IAAI,CACvB,uCAAK,SAAS,EAAC,+BAA+B;YAC5C,uCAAK,SAAS,EAAC,mCAAmC;gBAChD,qCAAG,SAAS,EAAC,8BAA8B;;oBAEzC,4DACmB,QAAQ,KACrB,CAAC,4BAA4B;4BAC/B,CAAC,CAAC,EAAE,oBAAoB,EAAE,YAAY,EAAE;4BACxC,CAAC,CAAC,EAAE,CAAC,EACP,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAE,OAAO,CAAC,kBAAkB,IAEnC,2BAA2B,CACvB,CACL;gBACH,kBAAkB,IAAI,CACrB,qCAAG,SAAS,EAAC,8DAA8D;;oBAEzE,4DACmB,QAAQ,wBAEvB,4BAA4B,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,OAAO,EAE9D,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAE,OAAO,CAAC,aAAa,IAE9B,sBAAsB,CAClB,CACL,CACL,CACG;YACL,QAAQ,CACL,CACP,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}

package/lib/components/content-tree/Table/TableCell.js

@@ -32,7 +32,9 @@ const _1 = require(".");
 const classnames_1 = __importDefault(require("classnames"));
 const TableCell = (props) => {
     const allColumnSettings = (0, react_1.useContext)(_1.ColumnSettingsContext);
-    const columnSettings = (props.parentIndex ? allColumnSettings[props.parentIndex] : undefined) ?? {
+    const columnSettings = (typeof props.parentIndex === 'number'
+        ? allColumnSettings[props.parentIndex]
+        : undefined) ?? {
         hideOnMobile: false,
         sortable: false,
     };

package/lib/components/content-tree/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../../src/components/content-tree/Table/TableCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AAEzC,wBAAyC;AACzC,4DAAmC;AAM5B,MAAM,SAAS,GAAsD,CAC1E,KAAK,EACL,EAAE;IACF,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,wBAAqB,CAAC,CAAA;IAC3D,MAAM,cAAc,GAClB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI;QACxE,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,KAAK;KAChB,CAAA;IAEH,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAC7B,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,yCAAyC,EAAE,cAAc,CAAC,YAAY;SACvE,CAAC,4BACsB,cAAc,CAAC,QAAQ,uCACZ,CAAC,cAAc,CAAC,QAAQ,IAAI,SAAS,EACxE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,cAAc,IAElB,KAAK,CAAC,QAAQ,CACZ,CACN,CAAC,CAAC,CAAC,CACF,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,wBAAwB,EAAE,cAAc,CAAC,QAAQ,KAAK,QAAQ;YAC9D,yCAAyC,EAAE,cAAc,CAAC,YAAY;SACvE,CAAC,IAED,KAAK,CAAC,QAAQ,CACZ,CACN,CAAA;AACH,CAAC,CAAA;AAhCY,QAAA,SAAS,aAgCrB"}
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../../src/components/content-tree/Table/TableCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AAEzC,wBAAyC;AACzC,4DAAmC;AAM5B,MAAM,SAAS,GAAsD,CAC1E,KAAK,EACL,EAAE;IACF,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,wBAAqB,CAAC,CAAA;IAC3D,MAAM,cAAc,GAClB,CAAC,OAAO,KAAK,CAAC,WAAW,KAAK,QAAQ;QACpC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CAAC;QACtC,CAAC,CAAC,SAAS,CAAC,IAAI;QAChB,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,KAAK;KAChB,CAAA;IAEH,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAC7B,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,yCAAyC,EAAE,cAAc,CAAC,YAAY;SACvE,CAAC,4BACsB,cAAc,CAAC,QAAQ,uCACZ,CAAC,cAAc,CAAC,QAAQ,IAAI,SAAS,EACxE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,cAAc,IAElB,KAAK,CAAC,QAAQ,CACZ,CACN,CAAC,CAAC,CAAC,CACF,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,wBAAwB,EAAE,cAAc,CAAC,QAAQ,KAAK,QAAQ;YAC9D,yCAAyC,EAAE,cAAc,CAAC,YAAY;SACvE,CAAC,IAED,KAAK,CAAC,QAAQ,CACZ,CACN,CAAA;AACH,CAAC,CAAA;AAlCY,QAAA,SAAS,aAkCrB"}

package/package.json

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

package/src/components/ArticleInfo/index.tsx

@@ -1,45 +1,82 @@
-import React from 'react'
-import Byline from '../Byline'
-import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
-import ftDateFormat from '@financial-times/ft-date-format'
+import React from "react"
+import Byline from "../Byline"
+import type { ArticleQuery } from "@financial-times/cp-content-pipeline-client"
+import ftDateFormat from "@financial-times/ft-date-format"
 
 type ArticleInfoProps = {
-  content: ArticleQuery['content']
+  content: ArticleQuery["content"]
 }
 
 const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>> = ({
   children,
   content,
 }) => {
-  const isLiveBlogPackage = content.__typename === 'LiveBlogPackage'
+  const isLiveBlogPackage = content.__typename === "LiveBlogPackage"
+  const formattedFirstPublishedDate = ftDateFormat.format(
+    new Date(content.firstPublishedDate),
+    "date"
+  )
   const formattedPublishedDate = ftDateFormat.format(
     new Date(content.publishedTimestamp),
-    'date'
+    "date"
   )
 
+  const displayPublishedDate = content.publishedDate && !isLiveBlogPackage
+  const displayUpdatedDate =
+    new Date(content.firstPublishedDate).getTime() !==
+    content.publishedTimestamp
+  const isPublishedMoreThanOneDayAgo =
+    Date.now() - new Date(content.firstPublishedDate).getTime() >
+    24 * 60 * 60 * 1000
+
   return (
     <div className="article-info">
-      <div className="article-info__time-byline">
-        {content.byline && content.__typename !== 'Audio' && (
-          <Byline
-            structuredContent={content.byline}
-            showEditedBy={isLiveBlogPackage}
-          />
-        )}
-        {content.publishedDate && !isLiveBlogPackage && (
-          <>
-            {' '}
-            <time
-              data-o-component="o-date"
-              className="article-info__timestamp o-date"
-              dateTime={content.publishedDate}
-            >
-              {formattedPublishedDate}
-            </time>
-          </>
-        )}
+      <div className="article-info__time-byline-row">
+        <div className="article-info__time-byline-content">
+          {content.byline && content.__typename !== "Audio" && (
+            <Byline
+              structuredContent={content.byline}
+              showEditedBy={isLiveBlogPackage}
+            />
+          )}
+        </div>
+        {!displayPublishedDate && children}
       </div>
-      {children}
+      {displayPublishedDate && (
+        <div className="article-info__time-byline-row">
+          <div className="article-info__time-byline-content">
+            <p className="article-info__timestamp-item">
+              Published
+              <time
+                data-o-component="o-date"
+                {...(isPublishedMoreThanOneDayAgo
+                  ? { "data-o-date-format": "MMM d yyyy" }
+                  : {})}
+                className="article-info__timestamp o-date"
+                dateTime={content.firstPublishedDate}
+              >
+                {formattedFirstPublishedDate}
+              </time>
+            </p>
+            {displayUpdatedDate && (
+              <p className="article-info__timestamp-item article-info__updated-timestamp">
+                Updated
+                <time
+                  data-o-component="o-date"
+                  data-o-date-format={
+                    isPublishedMoreThanOneDayAgo ? "MMM d yyyy, HH:mm" : "HH:mm"
+                  }
+                  className="article-info__timestamp o-date"
+                  dateTime={content.publishedDate}
+                >
+                  {formattedPublishedDate}
+                </time>
+              </p>
+            )}
+          </div>
+          {children}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/content-tree/Table/TableCell.tsx

@@ -12,7 +12,9 @@ export const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = (
 ) => {
   const allColumnSettings = useContext(ColumnSettingsContext)
   const columnSettings: ContentTreeWorkarounds.TableColumnSettings =
-    (props.parentIndex ? allColumnSettings[props.parentIndex] : undefined) ?? {
+    (typeof props.parentIndex === 'number'
+      ? allColumnSettings[props.parentIndex]
+      : undefined) ?? {
       hideOnMobile: false,
       sortable: false,
     }