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

package/CHANGELOG.md

@@ -574,6 +574,30 @@
     * @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.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)
+
+
+### Features
+
+* anchor links in clips ([f753082](https://github.com/Financial-Times/cp-content-pipeline/commit/f753082b61b1e5aa989cd1db901546eeee71fe83))
+* ci-3111 media queries on clips sources ([856bd45](https://github.com/Financial-Times/cp-content-pipeline/commit/856bd457ba6dc56f292c6a31e0edfe3f29b4a904))
+* content layout ui component as wrapper for body-tree ui components ([becfee2](https://github.com/Financial-Times/cp-content-pipeline/commit/becfee26199bc6fd666c46b5ebb2353bdd7da630))
+
+
+### Bug Fixes
+
+* avoid fetching teaser data from RecommendedList resolver ([54bc53f](https://github.com/Financial-Times/cp-content-pipeline/commit/54bc53f9a40446667a9f93b85d710cd6a943157d))
+* ensure headshot only for one columnist ([63b1f54](https://github.com/Financial-Times/cp-content-pipeline/commit/63b1f54008b5019863508cef224e14ab67429695))
+* **ui:** mark Tool Kit plugin as a dev dependency ([53299d4](https://github.com/Financial-Times/cp-content-pipeline/commit/53299d46826aafb1884651441ae98caa63950ef2))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^4.20.1 to ^4.20.2
+    * @financial-times/cp-content-pipeline-schema bumped from ^3.20.0 to ^3.21.0
+
 ## [9.12.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.12.0...cp-content-pipeline-ui-v9.12.1) (2025-12-09)
 
 

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

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * The available layout widths for the Layout component.
+ *
+ * Available options:
+ * - `in-line` - [Default] 7 columns (700 pixels)
+ * - `full-width` - Legacy alias for `in-line`
+ * - `mid-grid` - 9 columns (900 pixels)
+ * - `full-grid` - 12 columns of the grid (1200 pixels)
+ *
+ * @todo Existing layouts not currently supported by this component. To be implemented in the future:
+ * @todo `inset-left` - 5 columns (up to 500 pixels), medium screens and above: 3 columns (300 pixels), float left
+ * @todo `inset-right` - 5 columns (up to 500 pixels), medium screens and above: 3 columns (300 pixels), float right
+ * @todo `full-bleed` - Edge to edge of the viewport, no padding
+ * @todo The terminology in Spark doesn't align with our terminology. For instance, Editorial uses `full-width` that we map to `full-grid`. We should likely move towards an ubiquitous language prioritising the Editorial one.
+ */
+type LayoutWidth = 'in-line' | 'mid-grid' | 'full-grid';
+interface ContentLayoutProps {
+    dataLayout: LayoutWidth;
+    dataComponent?: string;
+    className?: string;
+}
+export declare const ContentLayout: React.FC<React.PropsWithChildren<ContentLayoutProps>>;
+export {};

package/lib/components/ContentLayout/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+/*
+ * @description OverflowingLayout component prevent clashes with ads on the RHR (Righthand-rail) and share bar
+ * via the usage of data-layout-width='full-grid'
+ * See related code here: https://github.com/Financial-Times/next-article/blob/5766d82de6125ffc99fa6e3bc132311b3434f8f0/client/components/share/main.js#L8
+ */
+const OverflowingLayout = ({ children, }) => (react_1.default.createElement("div", { className: "n-content-layout", "data-layout-width": "full-grid" }, children));
+/*
+ * @description ContentLayout component is used to fulfill the legacy usage of n-layout.
+ * @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 ContainerClassNames = (0, classnames_1.default)('n-content-layout__container', className);
+    if (dataLayout === 'full-grid') {
+        return (react_1.default.createElement(OverflowingLayout, null,
+            react_1.default.createElement("div", { className: ContainerClassNames, "data-component": dataComponent }, children)));
+    }
+    if (dataLayout === 'mid-grid') {
+        return (react_1.default.createElement(OverflowingLayout, null,
+            react_1.default.createElement("div", { className: ContainerClassNames, "data-component": dataComponent },
+                react_1.default.createElement("div", { "data-o-grid-colspan": "12 S12 M12 L10 XL10", className: "n-content-layout__container--mid-grid" }, children))));
+    }
+    return (react_1.default.createElement("div", { className: "n-content-layout__container--in-line", "data-component": dataComponent }, children));
+};
+exports.ContentLayout = ContentLayout;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,57 @@
+"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_test_renderer_1 = __importDefault(require("react-test-renderer"));
+const index_1 = require("../index");
+describe('ContentLayout', () => {
+    it('renders full-grid layout with container correctly', () => {
+        const tree = react_test_renderer_1.default
+            .create(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "full-grid", dataComponent: "clip-set" },
+            react_1.default.createElement("div", null, "Test content")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('renders mid-grid layout with container correctly', () => {
+        const tree = react_test_renderer_1.default
+            .create(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "mid-grid", dataComponent: "clip-set" },
+            react_1.default.createElement("div", null, "Test content")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('renders in-line layout with container correctly', () => {
+        const tree = react_test_renderer_1.default
+            .create(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "in-line", dataComponent: "clip-set" },
+            react_1.default.createElement("div", null, "Test content")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    describe('Edge cases', () => {
+        it('handles empty children', () => {
+            const tree = react_test_renderer_1.default
+                .create(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "full-grid", dataComponent: "clip-set" },
+                react_1.default.createElement("div", null)))
+                .toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+        it('handles null children', () => {
+            const tree = react_test_renderer_1.default
+                .create(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "full-grid", dataComponent: "clip-set" },
+                react_1.default.createElement("div", null, null)))
+                .toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+        it('handles conditional children', () => {
+            const showContent = true;
+            const tree = react_test_renderer_1.default
+                .create(react_1.default.createElement(index_1.ContentLayout, { dataLayout: "full-grid", dataComponent: "clip-set" },
+                react_1.default.createElement("div", null, showContent && react_1.default.createElement("div", null, "Conditional content")),
+                react_1.default.createElement("div", null, !showContent && react_1.default.createElement("div", null, "Alternative content"))))
+                .toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+    });
+});
+//# sourceMappingURL=index.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/ContentLayout/test/index.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,8EAA0C;AAC1C,oCAAwC;AAExC,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;QAC3D,MAAM,IAAI,GAAG,6BAAQ;aAClB,MAAM,CACL,8BAAC,qBAAa,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAC,UAAU;YAC5D,0DAAuB,CACT,CACjB;aACA,MAAM,EAAE,CAAA;QAEX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;IAChC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,IAAI,GAAG,6BAAQ;aAClB,MAAM,CACL,8BAAC,qBAAa,IAAC,UAAU,EAAC,UAAU,EAAC,aAAa,EAAC,UAAU;YAC3D,0DAAuB,CACT,CACjB;aACA,MAAM,EAAE,CAAA;QAEX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;IAChC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,IAAI,GAAG,6BAAQ;aAClB,MAAM,CACL,8BAAC,qBAAa,IAAC,UAAU,EAAC,SAAS,EAAC,aAAa,EAAC,UAAU;YAC1D,0DAAuB,CACT,CACjB;aACA,MAAM,EAAE,CAAA;QAEX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;IAChC,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;QAC1B,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,MAAM,IAAI,GAAG,6BAAQ;iBAClB,MAAM,CACL,8BAAC,qBAAa,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAC,UAAU;gBAC5D,0CAAW,CACG,CACjB;iBACA,MAAM,EAAE,CAAA;YAEX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;QAChC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;YAC/B,MAAM,IAAI,GAAG,6BAAQ;iBAClB,MAAM,CACL,8BAAC,qBAAa,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAC,UAAU;gBAC5D,2CAAM,IAAI,CAAO,CACH,CACjB;iBACA,MAAM,EAAE,CAAA;YAEX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;QAChC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;YACtC,MAAM,WAAW,GAAG,IAAI,CAAA;YACxB,MAAM,IAAI,GAAG,6BAAQ;iBAClB,MAAM,CACL,8BAAC,qBAAa,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAC,UAAU;gBAC5D,2CAAM,WAAW,IAAI,iEAA8B,CAAO;gBAC1D,2CAAM,CAAC,WAAW,IAAI,iEAA8B,CAAO,CAC7C,CACjB;iBACA,MAAM,EAAE,CAAA;YAEX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

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

@@ -3,6 +3,4 @@ export { Caption } from './Caption';
 export { VideoInfoBox } from './VideoInfoBox';
 export { ClosedCaptions } from './ClosedCaptions';
 export { VideoDescription } from './VideoDescription';
-export { Container } from './Container';
-export { ContentLayout } from './ContentLayout';
 export { ClipTag } from './ClipTag';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClipTag = exports.ContentLayout = exports.Container = exports.VideoDescription = exports.ClosedCaptions = exports.VideoInfoBox = exports.Caption = exports.Credit = void 0;
+exports.ClipTag = exports.VideoDescription = exports.ClosedCaptions = exports.VideoInfoBox = exports.Caption = exports.Credit = void 0;
 var Credit_1 = require("./Credit");
 Object.defineProperty(exports, "Credit", { enumerable: true, get: function () { return Credit_1.Credit; } });
 var Caption_1 = require("./Caption");
@@ -11,10 +11,6 @@ var ClosedCaptions_1 = require("./ClosedCaptions");
 Object.defineProperty(exports, "ClosedCaptions", { enumerable: true, get: function () { return ClosedCaptions_1.ClosedCaptions; } });
 var VideoDescription_1 = require("./VideoDescription");
 Object.defineProperty(exports, "VideoDescription", { enumerable: true, get: function () { return VideoDescription_1.VideoDescription; } });
-var Container_1 = require("./Container");
-Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return Container_1.Container; } });
-var ContentLayout_1 = require("./ContentLayout");
-Object.defineProperty(exports, "ContentLayout", { enumerable: true, get: function () { return ContentLayout_1.ContentLayout; } });
 var ClipTag_1 = require("./ClipTag");
 Object.defineProperty(exports, "ClipTag", { enumerable: true, get: function () { return ClipTag_1.ClipTag; } });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Clip/components/index.tsx"],"names":[],"mappings":";;;AAAA,mCAAiC;AAAxB,gGAAA,MAAM,OAAA;AACf,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,mDAAiD;AAAxC,gHAAA,cAAc,OAAA;AACvB,uDAAqD;AAA5C,oHAAA,gBAAgB,OAAA;AACzB,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAClB,iDAA+C;AAAtC,8GAAA,aAAa,OAAA;AACtB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Clip/components/index.tsx"],"names":[],"mappings":";;;AAAA,mCAAiC;AAAxB,gGAAA,MAAM,OAAA;AACf,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,mDAAiD;AAAxC,gHAAA,cAAc,OAAA;AACvB,uDAAqD;AAA5C,oHAAA,gBAAgB,OAAA;AACzB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA"}

package/lib/components/content-tree/Clip/template/component.d.ts

@@ -16,7 +16,7 @@ export interface ClipPropsOld {
     clips?: ComponentWorkarounds.Clip[];
     poster?: string;
     posterAlt?: string;
-    dataLayout: string;
+    dataLayout: 'in-line' | 'mid-grid' | 'full-grid';
     description?: string;
     muted?: boolean;
     caption?: string;

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

@@ -4,6 +4,7 @@ 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 ClipComponent = ({ content, preset = 'full-player', preload = 'auto', maxClipWidth = 0, }) => {
     let poster = 'poster' in content ? content.poster : '';
@@ -38,9 +39,8 @@ const ClipComponent = ({ content, preset = 'full-player', preload = 'auto', maxC
     if (preset === 'thumbnail') {
         return (react_1.default.createElement(components_1.ClipTag, { id: id, clip: clip, poster: poster, accessibility: accessibility, autoplay: content.autoplay, loop: content.loop, noAudio: noAudio, muted: content.muted, preload: preload, noCaption: true, noDescription: true, noInfoBox: true, systemTitle: systemTitle, maxClipWidth: maxClipWidth }));
     }
-    return (react_1.default.createElement(components_1.ContentLayout, { dataLayout: content.dataLayout },
-        react_1.default.createElement(components_1.Container, { dataLayout: content.dataLayout },
-            react_1.default.createElement(components_1.ClipTag, { id: id, dataLayout: content.dataLayout, description: content.description ?? '', poster: posterAttribute, autoplay: content.autoplay, noAudio: noAudio, loop: content.loop, muted: content.muted, clip: clip, credits: content.credits ?? '', caption: content.caption ?? '', systemTitle: systemTitle, accessibility: accessibility, preload: preload, dataTrackable: "next-article-cp-clip", maxClipWidth: maxClipWidth, fragmentIdentifier: content.fragmentIdentifier ?? '' }))));
+    return (react_1.default.createElement(ContentLayout_1.ContentLayout, { dataLayout: content.dataLayout, dataComponent: "clip-set" },
+        react_1.default.createElement(components_1.ClipTag, { id: id, dataLayout: content.dataLayout, description: content.description ?? '', poster: posterAttribute, autoplay: content.autoplay, noAudio: noAudio, loop: content.loop, muted: content.muted, clip: clip, credits: content.credits ?? '', caption: content.caption ?? '', systemTitle: systemTitle, accessibility: accessibility, preload: preload, dataTrackable: "next-article-cp-clip", maxClipWidth: maxClipWidth, fragmentIdentifier: content.fragmentIdentifier ?? '' })));
 };
 exports.default = ClipComponent;
 //# sourceMappingURL=component.js.map

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/Clip/test/snapshot.spec.js

@@ -26,6 +26,32 @@ describe('Clip Snapshot', () => {
     describe('component rendered on server', () => {
         const url = 'localhost:8080/fakevideo.mpg';
         const poster = 'localhost:8080/fakeposter.jpg';
+        describe('ContentLayout integration tests', () => {
+            it('in-line render - should not wrap in ContentLayout div', () => {
+                const tree = react_test_renderer_1.default
+                    .create(react_1.default.createElement(index_1.default, { content: { url, dataLayout: 'in-line' } }))
+                    .toJSON();
+                expect(formatString(tree)).toMatchSnapshot();
+            });
+            it('full-grid default render - should wrap in ContentLayout with proper classes', () => {
+                const tree = react_test_renderer_1.default
+                    .create(react_1.default.createElement(index_1.default, { content: { url, dataLayout: 'full-grid' } }))
+                    .toJSON();
+                expect(formatString(tree)).toMatchSnapshot();
+            });
+            it('mid-grid default render - should wrap in ContentLayout with nested Container structure', () => {
+                const tree = react_test_renderer_1.default
+                    .create(react_1.default.createElement(index_1.default, { content: { url, dataLayout: 'mid-grid' } }))
+                    .toJSON();
+                expect(formatString(tree)).toMatchSnapshot();
+            });
+            it('edge case: custom dataLayout value should wrap in ContentLayout', () => {
+                const tree = react_test_renderer_1.default
+                    .create(react_1.default.createElement(index_1.default, { content: { url, dataLayout: 'custom-layout' } }))
+                    .toJSON();
+                expect(formatString(tree)).toMatchSnapshot();
+            });
+        });
         it('in-line render', () => {
             const tree = react_test_renderer_1.default
                 .create(react_1.default.createElement(index_1.default, { content: { url, dataLayout: 'in-line' } }))

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "9.12.1",
+  "version": "9.13.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -15,9 +15,10 @@
   "devDependencies": {
     "@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.1",
-    "@financial-times/cp-content-pipeline-schema": "^3.20.0",
+    "@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/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",
@@ -50,7 +51,6 @@
     "webpack": "^5.88.1"
   },
   "dependencies": {
-    "@dotcom-tool-kit/npm": "^5.0.0",
     "@financial-times/ft-date-format": "^2.1.0",
     "@financial-times/o-expander": "^7.0.1",
     "@financial-times/o-labels": "^7.1.2",

package/src/components/ContentLayout/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import classnames from 'classnames'
+
+/**
+ * The available layout widths for the Layout component.
+ *
+ * Available options:
+ * - `in-line` - [Default] 7 columns (700 pixels)
+ * - `full-width` - Legacy alias for `in-line`
+ * - `mid-grid` - 9 columns (900 pixels)
+ * - `full-grid` - 12 columns of the grid (1200 pixels)
+ *
+ * @todo Existing layouts not currently supported by this component. To be implemented in the future:
+ * @todo `inset-left` - 5 columns (up to 500 pixels), medium screens and above: 3 columns (300 pixels), float left
+ * @todo `inset-right` - 5 columns (up to 500 pixels), medium screens and above: 3 columns (300 pixels), float right
+ * @todo `full-bleed` - Edge to edge of the viewport, no padding
+ * @todo The terminology in Spark doesn't align with our terminology. For instance, Editorial uses `full-width` that we map to `full-grid`. We should likely move towards an ubiquitous language prioritising the Editorial one.
+ */
+type LayoutWidth = 'in-line' | 'mid-grid' | 'full-grid'
+
+interface ContentLayoutProps {
+  dataLayout: LayoutWidth
+  dataComponent?: string
+  className?: string
+}
+
+/*
+ * @description OverflowingLayout component prevent clashes with ads on the RHR (Righthand-rail) and share bar
+ * via the usage of data-layout-width='full-grid'
+ * See related code here: https://github.com/Financial-Times/next-article/blob/5766d82de6125ffc99fa6e3bc132311b3434f8f0/client/components/share/main.js#L8
+ */
+const OverflowingLayout: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div className="n-content-layout" data-layout-width="full-grid">
+    {children}
+  </div>
+)
+
+/*
+ * @description ContentLayout component is used to fulfill the legacy usage of n-layout.
+ * @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.
+ */
+export const ContentLayout: React.FC<
+  React.PropsWithChildren<ContentLayoutProps>
+> = ({
+  dataLayout = 'in-line',
+  children,
+  dataComponent = '',
+  className = '',
+}) => {
+  const ContainerClassNames = classnames(
+    'n-content-layout__container',
+    className
+  )
+
+  if (dataLayout === 'full-grid') {
+    return (
+      <OverflowingLayout>
+        <div className={ContainerClassNames} data-component={dataComponent}>
+          {children}
+        </div>
+      </OverflowingLayout>
+    )
+  }
+
+  if (dataLayout === 'mid-grid') {
+    return (
+      <OverflowingLayout>
+        <div className={ContainerClassNames} data-component={dataComponent}>
+          <div
+            data-o-grid-colspan="12 S12 M12 L10 XL10"
+            className="n-content-layout__container--mid-grid"
+          >
+            {children}
+          </div>
+        </div>
+      </OverflowingLayout>
+    )
+  }
+
+  return (
+    <div
+      className="n-content-layout__container--in-line"
+      data-component={dataComponent}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentLayout Edge cases handles conditional children 1`] = `
+<div
+  className="n-content-layout"
+  data-layout-width="full-grid"
+>
+  <div
+    className="n-content-layout__container"
+    data-component="clip-set"
+  >
+    <div>
+      <div>
+        Conditional content
+      </div>
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`ContentLayout Edge cases handles empty children 1`] = `
+<div
+  className="n-content-layout"
+  data-layout-width="full-grid"
+>
+  <div
+    className="n-content-layout__container"
+    data-component="clip-set"
+  >
+    <div />
+  </div>
+</div>
+`;
+
+exports[`ContentLayout Edge cases handles null children 1`] = `
+<div
+  className="n-content-layout"
+  data-layout-width="full-grid"
+>
+  <div
+    className="n-content-layout__container"
+    data-component="clip-set"
+  >
+    <div />
+  </div>
+</div>
+`;
+
+exports[`ContentLayout renders full-grid layout with container correctly 1`] = `
+<div
+  className="n-content-layout"
+  data-layout-width="full-grid"
+>
+  <div
+    className="n-content-layout__container"
+    data-component="clip-set"
+  >
+    <div>
+      Test content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ContentLayout renders in-line layout with container correctly 1`] = `
+<div
+  className="n-content-layout__container--in-line"
+  data-component="clip-set"
+>
+  <div>
+    Test content
+  </div>
+</div>
+`;
+
+exports[`ContentLayout renders mid-grid layout with container correctly 1`] = `
+<div
+  className="n-content-layout"
+  data-layout-width="full-grid"
+>
+  <div
+    className="n-content-layout__container"
+    data-component="clip-set"
+  >
+    <div
+      className="n-content-layout__container--mid-grid"
+      data-o-grid-colspan="12 S12 M12 L10 XL10"
+    >
+      <div>
+        Test content
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,81 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { ContentLayout } from '../index'
+
+describe('ContentLayout', () => {
+  it('renders full-grid layout with container correctly', () => {
+    const tree = renderer
+      .create(
+        <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
+          <div>Test content</div>
+        </ContentLayout>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders mid-grid layout with container correctly', () => {
+    const tree = renderer
+      .create(
+        <ContentLayout dataLayout="mid-grid" dataComponent="clip-set">
+          <div>Test content</div>
+        </ContentLayout>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders in-line layout with container correctly', () => {
+    const tree = renderer
+      .create(
+        <ContentLayout dataLayout="in-line" dataComponent="clip-set">
+          <div>Test content</div>
+        </ContentLayout>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  describe('Edge cases', () => {
+    it('handles empty children', () => {
+      const tree = renderer
+        .create(
+          <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
+            <div></div>
+          </ContentLayout>
+        )
+        .toJSON()
+
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('handles null children', () => {
+      const tree = renderer
+        .create(
+          <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
+            <div>{null}</div>
+          </ContentLayout>
+        )
+        .toJSON()
+
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('handles conditional children', () => {
+      const showContent = true
+      const tree = renderer
+        .create(
+          <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
+            <div>{showContent && <div>Conditional content</div>}</div>
+            <div>{!showContent && <div>Alternative content</div>}</div>
+          </ContentLayout>
+        )
+        .toJSON()
+
+      expect(tree).toMatchSnapshot()
+    })
+  })
+})

package/src/components/content-tree/Clip/components/index.tsx

@@ -3,6 +3,4 @@ export { Caption } from './Caption'
 export { VideoInfoBox } from './VideoInfoBox'
 export { ClosedCaptions } from './ClosedCaptions'
 export { VideoDescription } from './VideoDescription'
-export { Container } from './Container'
-export { ContentLayout } from './ContentLayout'
 export { ClipTag } from './ClipTag'