@financial-times/cp-content-pipeline-ui 12.4.2 → 12.6.0

package/CHANGELOG.md

@@ -574,6 +574,36 @@
     * @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
 
+## [12.6.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v12.5.0...cp-content-pipeline-ui-v12.6.0) (2026-06-25)
+
+
+### Features
+
+* **topper:** add matisse light colour ([d4431cf](https://github.com/Financial-Times/cp-content-pipeline/commit/d4431cf08bf2941e1e4f80680c91446266b713c1))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^6.3.0 to ^6.4.0
+    * @financial-times/cp-content-pipeline-schema bumped from ^5.4.0 to ^5.5.0
+
+## [12.5.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v12.4.2...cp-content-pipeline-ui-v12.5.0) (2026-06-25)
+
+
+### Features
+
+* ci-3707 new content tree model for carousel ([8fbec0a](https://github.com/Financial-Times/cp-content-pipeline/commit/8fbec0a0df8bb296e470ee94bee3c9b652be5ad1))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^6.2.0 to ^6.3.0
+    * @financial-times/cp-content-pipeline-schema bumped from ^5.3.0 to ^5.4.0
+
 ## [12.4.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v12.4.1...cp-content-pipeline-ui-v12.4.2) (2026-06-24)
 
 

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

@@ -22,24 +22,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselCardHeadingLevelContext = void 0;
 const react_1 = __importStar(require("react"));
-const CarouselHeading_1 = __importDefault(require("../CarouselHeading"));
 /** There may or may not be a main carousel heading. In order to get the heading level correct for the headings in individual carousel cards, we capture what heading levels they should have in context */
 exports.CarouselCardHeadingLevelContext = (0, react_1.createContext)(3);
 /**
  * Renders a Carousel component
  *
  */
-const Carousel = ({ content: { heading, id }, children, }) => {
-    const cardHeadingLevel = heading ? 3 : 2;
+const Carousel = ({ content: { title, standfirst, id }, children, }) => {
+    const cardHeadingLevel = title ? 3 : 2;
     return (react_1.default.createElement(exports.CarouselCardHeadingLevelContext.Provider, { value: cardHeadingLevel },
         react_1.default.createElement("section", { className: "cp-carousel", "data-component": "carousel", "data-component-id": id },
-            heading && react_1.default.createElement(CarouselHeading_1.default, { content: heading }),
+            title && (react_1.default.createElement("h2", { className: "o3-type-title-md cp-carousel__title" }, title)),
+            standfirst && react_1.default.createElement("p", { className: "cp-carousel__standfirst" }, standfirst),
             react_1.default.Children.count(children) > 0 && (react_1.default.createElement("ul", { className: "cp-carousel__cards" }, children)))));
 };
 exports.default = Carousel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/Carousel/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4C;AAK5C,yEAAgD;AAEhD,2MAA2M;AAC9L,QAAA,+BAA+B,GAAG,IAAA,qBAAa,EAAQ,CAAC,CAAC,CAAA;AAGtE;;;GAGG;AAEH,MAAM,QAAQ,GAAqD,CAAC,EAClE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EACxB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAU,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/C,OAAO,CACL,8BAAC,uCAA+B,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB;QAC/D,2CACE,SAAS,EAAC,aAAa,oBACR,UAAU,uBACN,EAAE;YAEpB,OAAO,IAAI,8BAAC,yBAAe,IAAC,OAAO,EAAE,OAAO,GAAI;YAChD,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CACrC,sCAAI,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CACnD,CACO,CAC+B,CAC5C,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/Carousel/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4C;AAM5C,2MAA2M;AAC9L,QAAA,+BAA+B,GAAG,IAAA,qBAAa,EAAQ,CAAC,CAAC,CAAA;AAGtE;;;GAGG;AAEH,MAAM,QAAQ,GAAqD,CAAC,EAClE,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAClC,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAU,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC7C,OAAO,CACL,8BAAC,uCAA+B,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB;QAC/D,2CACE,SAAS,EAAC,aAAa,oBACR,UAAU,uBACN,EAAE;YAEpB,KAAK,IAAI,CACR,sCAAI,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAM,CACjE;YACA,UAAU,IAAI,qCAAG,SAAS,EAAC,yBAAyB,IAAE,UAAU,CAAK;YACrE,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CACrC,sCAAI,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CACnD,CACO,CAC+B,CAC5C,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,QAAQ,CAAA"}

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

@@ -7,7 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const index_1 = __importDefault(require("../index"));
 describe('Carousel', () => {
-    it('renders without a heading', () => {
+    it('renders without a title or standfirst', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(index_1.default, { content: {
                 id: 'carousel-1',
                 type: 'carousel',
@@ -16,15 +16,22 @@ describe('Carousel', () => {
             react_1.default.createElement("li", null, "Carousel card")));
         expect(container.firstChild).toMatchSnapshot();
     });
-    it('renders with a heading', () => {
+    it('renders with a title but no standfirst', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(index_1.default, { content: {
                 id: 'carousel-1',
                 type: 'carousel',
-                heading: {
-                    type: 'carousel-heading',
-                    title: 'Inside Business',
-                    standfirst: 'Analysis and insight from FT specialists',
-                },
+                title: 'Inside Business',
+                children: [],
+            } },
+            react_1.default.createElement("li", null, "Carousel card")));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('renders with a title and standfirst', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(index_1.default, { content: {
+                id: 'carousel-1',
+                type: 'carousel',
+                title: 'Inside Business',
+                standfirst: 'Analysis and insight from FT specialists',
                 children: [],
             } },
             react_1.default.createElement("li", null, "Carousel card")));

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

@@ -1 +1 @@
-{"version":3,"file":"snapshot.spec.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Carousel/test/snapshot.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kDAA+C;AAC/C,qDAA+B;AAE/B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,eAAQ,IACP,OAAO,EAAE;gBACP,EAAE,EAAE,YAAY;gBAChB,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,EAAE;aACb;YAED,0DAAsB,CACb,CACZ,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;IAChD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAChC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,eAAQ,IACP,OAAO,EAAE;gBACP,EAAE,EAAE,YAAY;gBAChB,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE;oBACP,IAAI,EAAE,kBAAkB;oBACxB,KAAK,EAAE,iBAAiB;oBACxB,UAAU,EAAE,0CAA0C;iBACvD;gBACD,QAAQ,EAAE,EAAE;aACb;YAED,0DAAsB,CACb,CACZ,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;IAChD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"snapshot.spec.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Carousel/test/snapshot.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kDAA+C;AAC/C,qDAA+B;AAE/B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC/C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,eAAQ,IACP,OAAO,EAAE;gBACP,EAAE,EAAE,YAAY;gBAChB,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,EAAE;aACb;YAED,0DAAsB,CACb,CACZ,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;IAChD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,eAAQ,IACP,OAAO,EAAE;gBACP,EAAE,EAAE,YAAY;gBAChB,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,iBAAiB;gBACxB,QAAQ,EAAE,EAAE;aACb;YAED,0DAAsB,CACb,CACZ,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;IAChD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,eAAQ,IACP,OAAO,EAAE;gBACP,EAAE,EAAE,YAAY;gBAChB,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,iBAAiB;gBACxB,UAAU,EAAE,0CAA0C;gBACtD,QAAQ,EAAE,EAAE;aACb;YAED,0DAAsB,CACb,CACZ,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;IAChD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/lib/main.scss

@@ -6,7 +6,6 @@
 @import '../src/components/content-tree/Card/client/main.scss';
 @import '../src/components/content-tree/Carousel/client/main.scss';
 @import '../src/components/content-tree/CarouselCard/client/main.scss';
-@import '../src/components/content-tree/CarouselHeading/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/ImagePair/client/main.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "12.4.2",
+  "version": "12.6.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -16,9 +16,9 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^5.0.1",
-    "@financial-times/content-tree": "^0.12.0",
-    "@financial-times/cp-content-pipeline-client": "^6.2.0",
-    "@financial-times/cp-content-pipeline-schema": "^5.3.0",
+    "@financial-times/content-tree": "^0.14.0",
+    "@financial-times/cp-content-pipeline-client": "^6.4.0",
+    "@financial-times/cp-content-pipeline-schema": "^5.5.0",
     "@financial-times/cp-content-pipeline-styles": "^4.8.2",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",

package/src/components/Topper/client/_variables.scss

@@ -19,7 +19,8 @@ $_o-topper-colors: (
 	'wheat',
 	'crimson',
 	'sky',
-	'matisse'
+	'matisse',
+	'matisse-light'
 );
 
 /// When adding a new theme update the README

package/src/components/Topper/client/colors/_colors.scss

@@ -1,5 +1,6 @@
 @import './crimson.scss';
 @import './matisse.scss';
+@import './matisse-light.scss';
 @import './oxford.scss';
 @import './paper.scss';
 @import './white.scss';

package/src/components/Topper/client/colors/_matisse-light.scss

@@ -0,0 +1,68 @@
+.o-topper--color-matisse-light {
+    .o-topper__background,
+    .o-topper__content {
+        background-color: hsla(210,20%,90%,1);
+    }
+
+    .o-topper__standfirst a,
+    .o-topper__summary a {
+        border-bottom-color: var(--o3-color-palette-teal-50);
+        color: var(--o3-color-palette-teal-50);
+        text-decoration-color: var(--o3-color-use-case-link-underline);
+    }
+
+    .o-topper__standfirst a:hover,
+    .o-topper__summary a:hover {
+        border-bottom-color: var(--o3-color-palette-teal-30);
+        color: var(--o3-color-palette-teal-30);
+        text-decoration-color: var(--o3-color-use-case-link-underline-hover);
+    }
+
+    .o-topper__brand,
+    .o-topper__columnist-name,
+    .o-topper__headline,
+    .o-topper__right-rail-content,
+    .o-topper__standfirst,
+    .o-topper__summary,
+    .o-topper__tags,
+    .o-topper__topic {
+        color: var(--o3-color-palette-black);
+    }
+
+    .o-topper__brand:hover,
+    .o-topper__image-caption,
+    .n-content-picture__caption,
+    .o-topper__columnist-name:hover,
+    .o-topper__topic:hover {
+        color: var(--o3-color-palette-black-70);
+    }
+    .o-topper__headline::after {
+        border-bottom: 6px solid var(--o3-color-palette-black);
+        @include oGridRespondTo($from: L) {
+            border-bottom-width: var(--o3-spacing-4xs);
+        }
+    }
+
+    &.o-topper--deep-landscape {
+        .o-topper__content--text-shadow {
+            text-shadow: 2px 3px 4px hsla(0,0%,7%,.4)
+        }
+        .o-topper__content--background-box {
+            background-color: hsla(0,0%,100%,.9);
+            padding: 16px
+        }
+    }
+
+    @include oGridRespondTo($until: M) {
+        &.o-topper--deep-portrait {
+            .o-topper__image-caption {
+                background-color: hsla(210,20%,90%,1);
+                color: #454545;
+            }
+        }
+    }
+}
+
+.o-topper--color-matisse-light :focus-visible {
+    outline-color: var(--o3-color-palette-black);
+}

package/src/components/content-tree/Carousel/client/main.scss

@@ -1,8 +1,13 @@
 $carousel-gap: var(--o3-spacing-2xs);
 $carousel-gap--wide: var(--o3-spacing-s);
 @import '../../CarouselCard/client/main.scss';
-@import '../../CarouselHeading/client/main.scss';
 .cp-carousel {
+    .cp-carousel__title {
+        margin: 0 0 var(--o3-spacing-2xs);
+    }
+    .cp-carousel__standfirst {
+        margin: 0 0 var(--o3-spacing-s);
+    }
     .cp-carousel__cards {
         padding: 0;
         margin: 0 0 var(--o3-spacing-xs);

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

@@ -3,7 +3,6 @@ import React, { createContext } from 'react'
 import { ContentTree } from '@financial-times/content-tree'
 
 import { ContentProps } from '../../types'
-import CarouselHeading from '../CarouselHeading'
 
 /** There may or may not be a main carousel heading. In order to get the heading level correct for the headings in individual carousel cards, we capture what heading levels they should have in context */
 export const CarouselCardHeadingLevelContext = createContext<2 | 3>(3)
@@ -15,10 +14,10 @@ interface CarouselProps extends ContentProps<ContentTree.transit.Carousel> {}
  */
 
 const Carousel: React.FC<React.PropsWithChildren<CarouselProps>> = ({
-  content: { heading, id },
+  content: { title, standfirst, id },
   children,
 }) => {
-  const cardHeadingLevel: 2 | 3 = heading ? 3 : 2
+  const cardHeadingLevel: 2 | 3 = title ? 3 : 2
   return (
     <CarouselCardHeadingLevelContext.Provider value={cardHeadingLevel}>
       <section
@@ -26,7 +25,10 @@ const Carousel: React.FC<React.PropsWithChildren<CarouselProps>> = ({
         data-component="carousel"
         data-component-id={id}
       >
-        {heading && <CarouselHeading content={heading} />}
+        {title && (
+          <h2 className="o3-type-title-md cp-carousel__title">{title}</h2>
+        )}
+        {standfirst && <p className="cp-carousel__standfirst">{standfirst}</p>}
         {React.Children.count(children) > 0 && (
           <ul className="cp-carousel__cards">{children}</ul>
         )}

package/src/components/content-tree/Carousel/test/__snapshots__/snapshot.spec.tsx.snap

@@ -1,25 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Carousel renders with a heading 1`] = `
+exports[`Carousel renders with a title and standfirst 1`] = `
 <section
   class="cp-carousel"
   data-component="carousel"
   data-component-id="carousel-1"
 >
-  <div
-    class="cp-carousel__heading"
+  <h2
+    class="o3-type-title-md cp-carousel__title"
   >
-    <h2
-      class="o3-type-title-md cp-carousel__heading__title"
-    >
-      Inside Business
-    </h2>
-    <p
-      class="cp-carousel__heading__standfirst"
-    >
-      Analysis and insight from FT specialists
-    </p>
-  </div>
+    Inside Business
+  </h2>
+  <p
+    class="cp-carousel__standfirst"
+  >
+    Analysis and insight from FT specialists
+  </p>
+  <ul
+    class="cp-carousel__cards"
+  >
+    <li>
+      Carousel card
+    </li>
+  </ul>
+</section>
+`;
+
+exports[`Carousel renders with a title but no standfirst 1`] = `
+<section
+  class="cp-carousel"
+  data-component="carousel"
+  data-component-id="carousel-1"
+>
+  <h2
+    class="o3-type-title-md cp-carousel__title"
+  >
+    Inside Business
+  </h2>
   <ul
     class="cp-carousel__cards"
   >
@@ -30,7 +47,7 @@ exports[`Carousel renders with a heading 1`] = `
 </section>
 `;
 
-exports[`Carousel renders without a heading 1`] = `
+exports[`Carousel renders without a title or standfirst 1`] = `
 <section
   class="cp-carousel"
   data-component="carousel"

package/src/components/content-tree/Carousel/test/snapshot.spec.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import Carousel from '../index'
 
 describe('Carousel', () => {
-  it('renders without a heading', () => {
+  it('renders without a title or standfirst', () => {
     const { container } = render(
       <Carousel
         content={{
@@ -19,17 +19,31 @@ describe('Carousel', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  it('renders with a heading', () => {
+  it('renders with a title but no standfirst', () => {
     const { container } = render(
       <Carousel
         content={{
           id: 'carousel-1',
           type: 'carousel',
-          heading: {
-            type: 'carousel-heading',
-            title: 'Inside Business',
-            standfirst: 'Analysis and insight from FT specialists',
-          },
+          title: 'Inside Business',
+          children: [],
+        }}
+      >
+        <li>Carousel card</li>
+      </Carousel>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('renders with a title and standfirst', () => {
+    const { container } = render(
+      <Carousel
+        content={{
+          id: 'carousel-1',
+          type: 'carousel',
+          title: 'Inside Business',
+          standfirst: 'Analysis and insight from FT specialists',
           children: [],
         }}
       >