@financial-times/cp-content-pipeline-ui 9.13.0 → 9.14.1

package/CHANGELOG.md

@@ -574,6 +574,31 @@
     * @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
 
+## [9.14.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.14.0...cp-content-pipeline-ui-v9.14.1) (2025-12-17)
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-styles bumped from ^4.6.0 to ^4.6.1
+
+## [9.14.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.13.0...cp-content-pipeline-ui-v9.14.0) (2025-12-16)
+
+
+### Features
+
+* timeline component ([e1e8e60](https://github.com/Financial-Times/cp-content-pipeline/commit/e1e8e60dcd6aba2527b8b4a64d144cc7c6180b93))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^4.20.2 to ^4.21.0
+    * @financial-times/cp-content-pipeline-schema bumped from ^3.21.0 to ^3.22.0
+    * @financial-times/cp-content-pipeline-styles bumped from ^4.5.0 to ^4.6.0
+
 ## [9.13.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.12.1...cp-content-pipeline-ui-v9.13.0) (2025-12-11)
 
 

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

@@ -16,9 +16,10 @@ import React from 'react';
  */
 type LayoutWidth = 'in-line' | 'mid-grid' | 'full-grid';
 interface ContentLayoutProps {
-    dataLayout: LayoutWidth;
+    dataLayout?: LayoutWidth;
     dataComponent?: string;
     className?: string;
+    children: React.ReactNode;
 }
 export declare const ContentLayout: React.FC<React.PropsWithChildren<ContentLayoutProps>>;
 export {};

package/lib/components/ContentLayout/index.js

@@ -17,7 +17,7 @@ const OverflowingLayout = ({ children, }) => (react_1.default.createElement("div
  * @param dataLayout - The layout type of the content (e.g., 'full-grid', 'mid-grid', etc.).
  * @param dataComponent - The component type used as data-component attribute for client-side targeting.
  */
-const ContentLayout = ({ dataLayout = 'in-line', children, dataComponent = '', className = '', }) => {
+const ContentLayout = ({ dataLayout = 'in-line', children, dataComponent, className = '' }) => {
     const ContainerClassNames = (0, classnames_1.default)('n-content-layout__container', className);
     if (dataLayout === 'full-grid') {
         return (react_1.default.createElement(OverflowingLayout, null,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ContentLayout/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAyBnC;;;;GAIG;AACH,MAAM,iBAAiB,GAA4C,CAAC,EAClE,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,uCAAK,SAAS,EAAC,kBAAkB,uBAAmB,WAAW,IAC5D,QAAQ,CACL,CACP,CAAA;AAED;;;;GAIG;AACI,MAAM,aAAa,GAEtB,CAAC,EACH,UAAU,GAAG,SAAS,EACtB,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,mBAAmB,GAAG,IAAA,oBAAU,EACpC,6BAA6B,EAC7B,SAAS,CACV,CAAA;IAED,IAAI,UAAU,KAAK,WAAW,EAAE,CAAC;QAC/B,OAAO,CACL,8BAAC,iBAAiB;YAChB,uCAAK,SAAS,EAAE,mBAAmB,oBAAkB,aAAa,IAC/D,QAAQ,CACL,CACY,CACrB,CAAA;IACH,CAAC;IAED,IAAI,UAAU,KAAK,UAAU,EAAE,CAAC;QAC9B,OAAO,CACL,8BAAC,iBAAiB;YAChB,uCAAK,SAAS,EAAE,mBAAmB,oBAAkB,aAAa;gBAChE,8DACsB,qBAAqB,EACzC,SAAS,EAAC,uCAAuC,IAEhD,QAAQ,CACL,CACF,CACY,CACrB,CAAA;IACH,CAAC;IAED,OAAO,CACL,uCACE,SAAS,EAAC,sCAAsC,oBAChC,aAAa,IAE5B,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AA9CY,QAAA,aAAa,iBA8CzB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ContentLayout/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,4DAAmC;AA0BnC;;;;GAIG;AACH,MAAM,iBAAiB,GAA4C,CAAC,EAClE,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,uCAAK,SAAS,EAAC,kBAAkB,uBAAmB,WAAW,IAC5D,QAAQ,CACL,CACP,CAAA;AAED;;;;GAIG;AACI,MAAM,aAAa,GAEtB,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC1E,MAAM,mBAAmB,GAAG,IAAA,oBAAU,EACpC,6BAA6B,EAC7B,SAAS,CACV,CAAA;IAED,IAAI,UAAU,KAAK,WAAW,EAAE,CAAC;QAC/B,OAAO,CACL,8BAAC,iBAAiB;YAChB,uCAAK,SAAS,EAAE,mBAAmB,oBAAkB,aAAa,IAC/D,QAAQ,CACL,CACY,CACrB,CAAA;IACH,CAAC;IAED,IAAI,UAAU,KAAK,UAAU,EAAE,CAAC;QAC9B,OAAO,CACL,8BAAC,iBAAiB;YAChB,uCAAK,SAAS,EAAE,mBAAmB,oBAAkB,aAAa;gBAChE,8DACsB,qBAAqB,EACzC,SAAS,EAAC,uCAAuC,IAEhD,QAAQ,CACL,CACF,CACY,CACrB,CAAA;IACH,CAAC;IAED,OAAO,CACL,uCACE,SAAS,EAAC,sCAAsC,oBAChC,aAAa,IAE5B,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAzCY,QAAA,aAAa,iBAyCzB"}

package/lib/components/ContentLayout/test/snapshot.spec.d.ts

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

package/lib/components/ContentLayout/test/snapshot.spec.js

@@ -0,0 +1,33 @@
+"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 index_1 = require("../index");
+describe('ContentLayout', () => {
+    it('renders with full-grid layout', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "full-grid" },
+            react_1.default.createElement("div", null, "Test content")));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders with any accepted layout', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "mid-grid" },
+            react_1.default.createElement("span", null, "Inline content")));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders with multiple children', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "mid-grid" },
+            react_1.default.createElement("h1", null, "Title"),
+            react_1.default.createElement("p", null, "Paragraph content"),
+            react_1.default.createElement("div", null, "Additional content")));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders treating no dataLayout as default inline)', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(index_1.ContentLayout, null,
+            react_1.default.createElement("div", null, "Empty layout content")));
+        expect(container).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=snapshot.spec.js.map

package/lib/components/ContentLayout/test/snapshot.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot.spec.js","sourceRoot":"","sources":["../../../../src/components/ContentLayout/test/snapshot.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kDAA+C;AAC/C,oCAAwC;AAExC,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,qBAAa,IAAC,UAAU,EAAC,WAAW;YACnC,0DAAuB,CACT,CACjB,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,qBAAa,IAAC,UAAU,EAAC,UAAU;YAClC,6DAA2B,CACb,CACjB,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACxC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,qBAAa,IAAC,UAAU,EAAC,UAAU;YAClC,kDAAc;YACd,6DAAwB;YACxB,gEAA6B,CACf,CACjB,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,qBAAa;YACZ,kEAA+B,CACjB,CACjB,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/lib/components/RichText/index.js

@@ -47,6 +47,8 @@ const Scrollytelling_1 = require("../content-tree/Scrollytelling");
 const ScrollyImage_1 = require("../content-tree/Scrollytelling/ScrollyImage");
 const YoutubeVideo_1 = __importDefault(require("../content-tree/YoutubeVideo"));
 const CustomCodeComponent_1 = __importDefault(require("../content-tree/CustomCodeComponent"));
+const Timeline_1 = __importDefault(require("../content-tree/Timeline"));
+const TimelineEvent_1 = __importDefault(require("../content-tree/Timeline/TimelineEvent"));
 const BasicComponents_1 = require("./BasicComponents");
 const context_1 = __importDefault(require("./context"));
 exports.ComponentsContext = (0, react_1.createContext)({});
@@ -95,6 +97,8 @@ const componentMap = {
     tweet: Tweet_1.default,
     video: Video_1.default,
     'youtube-video': YoutubeVideo_1.default,
+    timeline: Timeline_1.default,
+    'timeline-event': TimelineEvent_1.default,
 };
 function isParentNode(node) {
     return 'children' in node;

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

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

package/lib/components/content-tree/Clip/template/component.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const ContentLayout_1 = require("../../../ContentLayout");
 const components_1 = require("../components");
+const ContentLayout_1 = require("../../../ContentLayout");
 const ClipComponent = ({ content, preset = 'full-player', preload = 'auto', maxClipWidth = 0, }) => {
     let poster = 'poster' in content ? content.poster : '';
     let id;

package/lib/components/content-tree/Clip/template/component.js.map

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

package/lib/components/content-tree/Timeline/TimelineEvent.d.ts

@@ -0,0 +1,7 @@
+import { ContentTree } from '@financial-times/content-tree';
+import React from 'react';
+import { ContentProps } from '../../types';
+interface TimelineEventProps extends ContentProps<Omit<ContentTree.TimelineEvent, 'children'>> {
+}
+declare const TimelineEvent: React.FC<React.PropsWithChildren<TimelineEventProps>>;
+export default TimelineEvent;

package/lib/components/content-tree/Timeline/TimelineEvent.js

@@ -0,0 +1,17 @@
+"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"));
+/*
+ * @description Event component is used to render a single event.
+ */
+const TimelineEvent = ({ content: { title }, children, }) => {
+    return (react_1.default.createElement("div", { className: "cp-timeline-event" },
+        react_1.default.createElement("h5", { className: "cp-timeline-event__heading o3-type-label" },
+            react_1.default.createElement("span", { className: "cp-timeline-event__heading-title" }, title)),
+        children));
+};
+exports.default = TimelineEvent;
+//# sourceMappingURL=TimelineEvent.js.map

package/lib/components/content-tree/Timeline/TimelineEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineEvent.js","sourceRoot":"","sources":["../../../../src/components/content-tree/Timeline/TimelineEvent.tsx"],"names":[],"mappings":";;;;;AACA,kDAAyB;AAMzB;;GAEG;AACH,MAAM,aAAa,GAA0D,CAAC,EAC5E,OAAO,EAAE,EAAE,KAAK,EAAE,EAClB,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB;QAChC,sCAAI,SAAS,EAAC,0CAA0C;YACtD,wCAAM,SAAS,EAAC,kCAAkC,IAAE,KAAK,CAAQ,CAC9D;QACJ,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,aAAa,CAAA"}

package/lib/components/content-tree/Timeline/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TimelineProps {
+    children?: React.ReactNode;
+}
+declare const Timeline: React.FC<TimelineProps>;
+export default Timeline;

package/lib/components/content-tree/Timeline/index.js

@@ -0,0 +1,17 @@
+"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 ContentLayout_1 = require("../../ContentLayout");
+/*
+ * @description Timeline component is used to render a simple timeline of events.
+ * @param children - The content to be displayed in the layout.
+ */
+const Timeline = ({ children }) => {
+    return (react_1.default.createElement(ContentLayout_1.ContentLayout, null,
+        react_1.default.createElement("div", { className: "cp-timeline" }, children)));
+};
+exports.default = Timeline;
+//# sourceMappingURL=index.js.map

package/lib/components/content-tree/Timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/Timeline/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,uDAAmD;AAKnD;;;GAGG;AACH,MAAM,QAAQ,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzD,OAAO,CACL,8BAAC,6BAAa;QACZ,uCAAK,SAAS,EAAC,aAAa,IAAE,QAAQ,CAAO,CAC/B,CACjB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,QAAQ,CAAA"}

package/lib/components/content-tree/Timeline/test/TimelineEvent.spec.d.ts

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

package/lib/components/content-tree/Timeline/test/TimelineEvent.spec.js

@@ -0,0 +1,48 @@
+"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 TimelineEvent_1 = __importDefault(require("../TimelineEvent"));
+describe('TimelineEvent', () => {
+    it('renders with date label and children', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(TimelineEvent_1.default, { content: {
+                type: 'timeline-event',
+                title: 'Significant Event',
+            } },
+            react_1.default.createElement("p", null, "This is the event content")));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders with minimal children content', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(TimelineEvent_1.default, { content: {
+                type: 'timeline-event',
+                title: 'Short Event',
+            } },
+            react_1.default.createElement("p", null, "Brief event description")));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders with long date label', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(TimelineEvent_1.default, { content: {
+                type: 'timeline-event',
+                title: 'Wednesday, December 25, 2024 - Christmas Day',
+            } },
+            react_1.default.createElement("p", null, "Christmas celebration details")));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders with complex nested children', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(TimelineEvent_1.default, { content: {
+                type: 'timeline-event',
+                title: 'Q4 2024',
+            } },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h3", null, "Quarterly Results"),
+                react_1.default.createElement("p", null,
+                    "The company announced ",
+                    react_1.default.createElement("strong", null, "strong"),
+                    " Q4 results."))));
+        expect(container).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=TimelineEvent.spec.js.map

package/lib/components/content-tree/Timeline/test/TimelineEvent.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineEvent.spec.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Timeline/test/TimelineEvent.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kDAA+C;AAC/C,qEAA4C;AAE5C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,uBAAa,IACZ,OAAO,EAAE;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,mBAAmB;aAC3B;YAED,qEAAgC,CAClB,CACjB,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC/C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,uBAAa,IACZ,OAAO,EAAE;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,aAAa;aACrB;YAED,mEAA8B,CAChB,CACjB,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,uBAAa,IACZ,OAAO,EAAE;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,8CAA8C;aACtD;YAED,yEAAoC,CACtB,CACjB,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,uBAAa,IACZ,OAAO,EAAE;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,SAAS;aACjB;YAED;gBACE,8DAA0B;gBAC1B;;oBACwB,uDAAuB;mCAC3C,CACA,CACQ,CACjB,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/lib/components/content-tree/Timeline/test/snapshot.spec.d.ts

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

package/lib/components/content-tree/Timeline/test/snapshot.spec.js

@@ -0,0 +1,17 @@
+"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 __1 = __importDefault(require("../"));
+describe('Timeline component', () => {
+    it('renders with full-width layout and children', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement("div", null, "Event 1"),
+            react_1.default.createElement("div", null, "Event 2")));
+        expect(container).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=snapshot.spec.js.map

package/lib/components/content-tree/Timeline/test/snapshot.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot.spec.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Timeline/test/snapshot.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kDAA+C;AAC/C,4CAA0B;AAE1B,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,WAAQ;YACP,qDAAkB;YAClB,qDAAkB,CACT,CACZ,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/lib/index.d.ts

@@ -24,5 +24,7 @@ export { default as Table } from './components/content-tree/Table';
 export { default as Tweet } from './components/content-tree/Tweet';
 export { default as Video } from './components/content-tree/Video';
 export { default as YoutubeVideo } from './components/content-tree/YoutubeVideo';
+export { default as Timeline } from './components/content-tree/Timeline';
+export { default as TimelineEvent } from './components/content-tree/Timeline/TimelineEvent';
 export { List, ListItem, Link, Blockquote, LineBreak, HorizontalRule, Emphasis, Strong, Strikethrough, Cite, CccFallbackText, } from './components/RichText/BasicComponents';
 export { PresentationFlagsContext, PresentationOverridesContext, } from './context';

package/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PresentationOverridesContext = exports.PresentationFlagsContext = exports.CccFallbackText = exports.Cite = exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.YoutubeVideo = exports.Video = exports.Tweet = exports.Table = exports.ScrollyBlock = exports.RecommendedList = exports.Recommended = exports.Pullquote = exports.Paragraph = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.Heading = exports.Flourish = exports.CustomCodeComponent = exports.BigNumber = exports.RichText = exports.PodcastBody = exports.LiveBlogBody = exports.ArticleBody = exports.Body = exports.Topper = exports.MainImage = exports.LiveBlogWrapper = exports.Byline = exports.ArticleInfo = void 0;
+exports.PresentationOverridesContext = exports.PresentationFlagsContext = exports.CccFallbackText = exports.Cite = exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.TimelineEvent = exports.Timeline = exports.YoutubeVideo = exports.Video = exports.Tweet = exports.Table = exports.ScrollyBlock = exports.RecommendedList = exports.Recommended = exports.Pullquote = exports.Paragraph = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.Heading = exports.Flourish = exports.CustomCodeComponent = exports.BigNumber = exports.RichText = exports.PodcastBody = exports.LiveBlogBody = exports.ArticleBody = exports.Body = exports.Topper = exports.MainImage = exports.LiveBlogWrapper = exports.Byline = exports.ArticleInfo = void 0;
 var ArticleInfo_1 = require("./components/ArticleInfo");
 Object.defineProperty(exports, "ArticleInfo", { enumerable: true, get: function () { return __importDefault(ArticleInfo_1).default; } });
 var Byline_1 = require("./components/Byline");
@@ -58,6 +58,10 @@ var Video_1 = require("./components/content-tree/Video");
 Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });
 var YoutubeVideo_1 = require("./components/content-tree/YoutubeVideo");
 Object.defineProperty(exports, "YoutubeVideo", { enumerable: true, get: function () { return __importDefault(YoutubeVideo_1).default; } });
+var Timeline_1 = require("./components/content-tree/Timeline");
+Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return __importDefault(Timeline_1).default; } });
+var TimelineEvent_1 = require("./components/content-tree/Timeline/TimelineEvent");
+Object.defineProperty(exports, "TimelineEvent", { enumerable: true, get: function () { return __importDefault(TimelineEvent_1).default; } });
 var BasicComponents_1 = require("./components/RichText/BasicComponents");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return BasicComponents_1.List; } });
 Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return BasicComponents_1.ListItem; } });

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAE1B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAC/B,0EAAmF;AAA1E,6HAAA,OAAO,OAAgB;AAChC,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAE/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,qFAA8F;AAArF,2IAAA,OAAO,OAAuB;AACvC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,+EAAmF;AAA1E,kHAAA,OAAO,OAAQ;AACxB,2DAIyC;AAHvC,gGAAA,MAAM,OAAA;AACN,yGAAA,eAAe,OAAA;AACf,oGAAA,UAAU,OAAA;AAEZ,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,mEAAgF;AAAvE,mHAAA,OAAO,OAAa;AAC7B,qEAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,6EAAsF;AAA7E,mIAAA,OAAO,OAAmB;AACnC,2EAAuE;AAA9D,8GAAA,YAAY,OAAA;AACrB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,uEAAgF;AAAvE,6HAAA,OAAO,OAAgB;AAChC,yEAY8C;AAX5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA;AACb,uGAAA,IAAI,OAAA;AACJ,kHAAA,eAAe,OAAA;AAGjB,qCAGkB;AAFhB,mHAAA,wBAAwB,OAAA;AACxB,uHAAA,4BAA4B,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAE1B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAC/B,0EAAmF;AAA1E,6HAAA,OAAO,OAAgB;AAChC,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAE/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,qFAA8F;AAArF,2IAAA,OAAO,OAAuB;AACvC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,+EAAmF;AAA1E,kHAAA,OAAO,OAAQ;AACxB,2DAIyC;AAHvC,gGAAA,MAAM,OAAA;AACN,yGAAA,eAAe,OAAA;AACf,oGAAA,UAAU,OAAA;AAEZ,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,mEAAgF;AAAvE,mHAAA,OAAO,OAAa;AAC7B,qEAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,6EAAsF;AAA7E,mIAAA,OAAO,OAAmB;AACnC,2EAAuE;AAA9D,8GAAA,YAAY,OAAA;AACrB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,uEAAgF;AAAvE,6HAAA,OAAO,OAAgB;AAChC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,kFAA2F;AAAlF,+HAAA,OAAO,OAAiB;AACjC,yEAY8C;AAX5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA;AACb,uGAAA,IAAI,OAAA;AACJ,kHAAA,eAAe,OAAA;AAGjB,qCAGkB;AAFhB,mHAAA,wBAAwB,OAAA;AACxB,uHAAA,4BAA4B,OAAA"}

package/lib/main.scss

@@ -4,3 +4,4 @@
 @import '../src/components/Topper/client/main.scss';
 @import '../src/components/content-tree/Clip/client/main.scss';
 @import '../src/components/content-tree/Flourish/client/main.scss';
+@import '../src/components/content-tree/Timeline/client/main.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "9.13.0",
+  "version": "9.14.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -16,10 +16,10 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^5.0.0",
-    "@financial-times/content-tree": "github:financial-times/content-tree#3f77ec4",
-    "@financial-times/cp-content-pipeline-client": "^4.20.2",
-    "@financial-times/cp-content-pipeline-schema": "^3.21.0",
-    "@financial-times/cp-content-pipeline-styles": "^4.5.0",
+    "@financial-times/content-tree": "github:financial-times/content-tree#aa5cf1",
+    "@financial-times/cp-content-pipeline-client": "^4.21.0",
+    "@financial-times/cp-content-pipeline-schema": "^3.22.0",
+    "@financial-times/cp-content-pipeline-styles": "^4.6.1",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",
     "@financial-times/o-share": "^11.0.0",

package/src/components/ContentLayout/index.tsx

@@ -19,9 +19,10 @@ import classnames from 'classnames'
 type LayoutWidth = 'in-line' | 'mid-grid' | 'full-grid'
 
 interface ContentLayoutProps {
-  dataLayout: LayoutWidth
+  dataLayout?: LayoutWidth
   dataComponent?: string
   className?: string
+  children: React.ReactNode
 }
 
 /*
@@ -44,12 +45,7 @@ const OverflowingLayout: React.FC<{ children: React.ReactNode }> = ({
  */
 export const ContentLayout: React.FC<
   React.PropsWithChildren<ContentLayoutProps>
-> = ({
-  dataLayout = 'in-line',
-  children,
-  dataComponent = '',
-  className = '',
-}) => {
+> = ({ dataLayout = 'in-line', children, dataComponent, className = '' }) => {
   const ContainerClassNames = classnames(
     'n-content-layout__container',
     className

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentLayout renders treating no dataLayout as default inline) 1`] = `
+<div>
+  <div
+    class="n-content-layout__container--in-line"
+  >
+    <div>
+      Empty layout content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ContentLayout renders with any accepted layout 1`] = `
+<div>
+  <div
+    class="n-content-layout"
+    data-layout-width="full-grid"
+  >
+    <div
+      class="n-content-layout__container"
+    >
+      <div
+        class="n-content-layout__container--mid-grid"
+        data-o-grid-colspan="12 S12 M12 L10 XL10"
+      >
+        <span>
+          Inline content
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ContentLayout renders with full-grid layout 1`] = `
+<div>
+  <div
+    class="n-content-layout"
+    data-layout-width="full-grid"
+  >
+    <div
+      class="n-content-layout__container"
+    >
+      <div>
+        Test content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ContentLayout renders with multiple children 1`] = `
+<div>
+  <div
+    class="n-content-layout"
+    data-layout-width="full-grid"
+  >
+    <div
+      class="n-content-layout__container"
+    >
+      <div
+        class="n-content-layout__container--mid-grid"
+        data-o-grid-colspan="12 S12 M12 L10 XL10"
+      >
+        <h1>
+          Title
+        </h1>
+        <p>
+          Paragraph content
+        </p>
+        <div>
+          Additional content
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ContentLayout } from '../index'
+
+describe('ContentLayout', () => {
+  it('renders with full-grid layout', () => {
+    const { container } = render(
+      <ContentLayout dataLayout="full-grid">
+        <div>Test content</div>
+      </ContentLayout>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with any accepted layout', () => {
+    const { container } = render(
+      <ContentLayout dataLayout="mid-grid">
+        <span>Inline content</span>
+      </ContentLayout>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with multiple children', () => {
+    const { container } = render(
+      <ContentLayout dataLayout="mid-grid">
+        <h1>Title</h1>
+        <p>Paragraph content</p>
+        <div>Additional content</div>
+      </ContentLayout>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders treating no dataLayout as default inline)', () => {
+    const { container } = render(
+      <ContentLayout>
+        <div>Empty layout content</div>
+      </ContentLayout>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/components/RichText/index.tsx

@@ -30,6 +30,8 @@ import {
 import { ScrollyImage } from '../content-tree/Scrollytelling/ScrollyImage'
 import YoutubeVideo from '../content-tree/YoutubeVideo'
 import CustomCodeComponent from '../content-tree/CustomCodeComponent'
+import Timeline from '../content-tree/Timeline'
+import TimelineEvent from '../content-tree/Timeline/TimelineEvent'
 
 import {
   List,
@@ -144,6 +146,8 @@ const componentMap: RichTextComponentMapRecord = {
   tweet: Tweet,
   video: Video,
   'youtube-video': YoutubeVideo,
+  timeline: Timeline,
+  'timeline-event': TimelineEvent,
 }
 
 function isParentNode(

package/src/components/content-tree/Clip/template/component.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { ContentLayout } from '../../../ContentLayout'
 import { ClipTag } from '../components'
 import { ContentProps } from '../../../types'
+import { ContentLayout } from '../../../ContentLayout'
 import type * as ComponentWorkarounds from '../../Workarounds'
 
 type Preset = 'full-player' | 'thumbnail'

package/src/components/content-tree/Timeline/TimelineEvent.tsx

@@ -0,0 +1,25 @@
+import { ContentTree } from '@financial-times/content-tree'
+import React from 'react'
+import { ContentProps } from '../../types'
+
+interface TimelineEventProps
+  extends ContentProps<Omit<ContentTree.TimelineEvent, 'children'>> {}
+
+/*
+ * @description Event component is used to render a single event.
+ */
+const TimelineEvent: React.FC<React.PropsWithChildren<TimelineEventProps>> = ({
+  content: { title },
+  children,
+}) => {
+  return (
+    <div className="cp-timeline-event">
+      <h5 className="cp-timeline-event__heading o3-type-label">
+        <span className="cp-timeline-event__heading-title">{title}</span>
+      </h5>
+      {children}
+    </div>
+  )
+}
+
+export default TimelineEvent