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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "9.12.1",
+  "version": "9.14.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -15,10 +15,11 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
-    "@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-styles": "^4.5.0",
+    "@dotcom-tool-kit/npm": "^5.0.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.0",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",
     "@financial-times/o-share": "^11.0.0",
@@ -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,87 @@
+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
+  children: React.ReactNode
+}
+
+/*
+ * @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/__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/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/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/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'

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { ClipTag, ContentLayout, Container } from '../components'
+import { ClipTag } from '../components'
 import { ContentProps } from '../../../types'
+import { ContentLayout } from '../../../ContentLayout'
 import type * as ComponentWorkarounds from '../../Workarounds'
 
 type Preset = 'full-player' | 'thumbnail'
@@ -21,7 +22,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
@@ -90,28 +91,26 @@ const ClipComponent: React.FC<ClipProps> = ({
   }
 
   return (
-    <ContentLayout dataLayout={content.dataLayout}>
-      <Container dataLayout={content.dataLayout}>
-        <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 ?? ''}
-        />
-      </Container>
+    <ContentLayout dataLayout={content.dataLayout} dataComponent="clip-set">
+      <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 ?? ''}
+      />
     </ContentLayout>
   )
 }