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

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

@@ -1,5 +1,282 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests edge case: custom dataLayout value should wrap in ContentLayout 1`] = `
+"<div class="n-content-layout__container--in-line" data-component="clip-set">
+  <div
+    data-cp-clip-layout="custom-layout"
+    data-cp-clip-poster=""
+    data-cp-clip-no-audio="false"
+    data-cp-clip-no-description="false"
+    data-cp-clip-caption=""
+    data-cp-clip-no-info-box="false"
+    data-cp-clip-no-caption="false"
+    data-cp-clip-closed-caption="false"
+    class="cp-clip"
+    data-trackable="next-article-cp-clip"
+    data-o-component="cp-clip"
+    data-cp-clip-id="localhost:8080/fakevideo.mpg"
+    data-cp-clip-system-title=""
+    id=""
+  >
+    <div
+      data-o-component="o-expander"
+      class="o-expander o-expander__info-box"
+      data-o-expander-shrink-to="hidden"
+      data-trackable="clip-info-box"
+      data-o-expander-collapsed-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;"
+      data-o-expander-expanded-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;"
+    >
+      <button
+        data-trackable="toggle-open-close"
+        class="o-expander__toggle o-expander__toggle-empty"
+      >
+        <span class="o-expander__visually-hidden o3-type-detail"
+          >Show video info</span
+        >
+      </button>
+      <div class="o-expander__content video-info"></div>
+    </div>
+    <div class="cp-clip__video-container">
+      <video
+        class="cp-clip__video"
+        controls=""
+        controlsList="nodownload noremoteplayback noplaybackrate"
+        disablepictureinpicture=""
+        disableremoteplayback=""
+        playsinline=""
+        poster=""
+        preload="auto"
+        id="clip-localhost:8080/fakevideo.mpg"
+        crossorigin="anonymous"
+        style="height: fit-content; width: 100%"
+      >
+        <source
+          id="video-source-0-localhost:8080/fakevideo.mpg"
+          data-cp-component="cp-clip__video-source"
+          src="localhost:8080/fakevideo.mpg"
+          type="video/mp4"
+        />
+      </video>
+    </div>
+    <div
+      class="cp-clip__video-meta-info"
+      data-cp-clip-video-meta-info="true"
+    ></div>
+  </div>
+</div>
+"
+`;
+
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests full-grid default render - should wrap in ContentLayout with proper classes 1`] = `
+"<div class="n-content-layout" data-layout-width="full-grid">
+  <div class="n-content-layout__container" data-component="clip-set">
+    <div
+      data-cp-clip-layout="full-grid"
+      data-cp-clip-poster=""
+      data-cp-clip-no-audio="false"
+      data-cp-clip-no-description="false"
+      data-cp-clip-caption=""
+      data-cp-clip-no-info-box="false"
+      data-cp-clip-no-caption="false"
+      data-cp-clip-closed-caption="false"
+      class="cp-clip"
+      data-trackable="next-article-cp-clip"
+      data-o-component="cp-clip"
+      data-cp-clip-id="localhost:8080/fakevideo.mpg"
+      data-cp-clip-system-title=""
+      id=""
+    >
+      <div
+        data-o-component="o-expander"
+        class="o-expander o-expander__info-box"
+        data-o-expander-shrink-to="hidden"
+        data-trackable="clip-info-box"
+        data-o-expander-collapsed-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;"
+        data-o-expander-expanded-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;"
+      >
+        <button
+          data-trackable="toggle-open-close"
+          class="o-expander__toggle o-expander__toggle-empty"
+        >
+          <span class="o-expander__visually-hidden o3-type-detail"
+            >Show video info</span
+          >
+        </button>
+        <div class="o-expander__content video-info"></div>
+      </div>
+      <div class="cp-clip__video-container">
+        <video
+          class="cp-clip__video"
+          controls=""
+          controlsList="nodownload noremoteplayback noplaybackrate"
+          disablepictureinpicture=""
+          disableremoteplayback=""
+          playsinline=""
+          poster=""
+          preload="auto"
+          id="clip-localhost:8080/fakevideo.mpg"
+          crossorigin="anonymous"
+          style="height: fit-content; width: 100%"
+        >
+          <source
+            id="video-source-0-localhost:8080/fakevideo.mpg"
+            data-cp-component="cp-clip__video-source"
+            src="localhost:8080/fakevideo.mpg"
+            type="video/mp4"
+          />
+        </video>
+      </div>
+      <div
+        class="cp-clip__video-meta-info"
+        data-cp-clip-video-meta-info="true"
+      ></div>
+    </div>
+  </div>
+</div>
+"
+`;
+
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests in-line render - should not wrap in ContentLayout div 1`] = `
+"<div class="n-content-layout__container--in-line" data-component="clip-set">
+  <div
+    data-cp-clip-layout="in-line"
+    data-cp-clip-poster=""
+    data-cp-clip-no-audio="false"
+    data-cp-clip-no-description="false"
+    data-cp-clip-caption=""
+    data-cp-clip-no-info-box="false"
+    data-cp-clip-no-caption="false"
+    data-cp-clip-closed-caption="false"
+    class="cp-clip"
+    data-trackable="next-article-cp-clip"
+    data-o-component="cp-clip"
+    data-cp-clip-id="localhost:8080/fakevideo.mpg"
+    data-cp-clip-system-title=""
+    id=""
+  >
+    <div
+      data-o-component="o-expander"
+      class="o-expander o-expander__info-box"
+      data-o-expander-shrink-to="hidden"
+      data-trackable="clip-info-box"
+      data-o-expander-collapsed-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;"
+      data-o-expander-expanded-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;"
+    >
+      <button
+        data-trackable="toggle-open-close"
+        class="o-expander__toggle o-expander__toggle-empty"
+      >
+        <span class="o-expander__visually-hidden o3-type-detail"
+          >Show video info</span
+        >
+      </button>
+      <div class="o-expander__content video-info"></div>
+    </div>
+    <div class="cp-clip__video-container">
+      <video
+        class="cp-clip__video"
+        controls=""
+        controlsList="nodownload noremoteplayback noplaybackrate"
+        disablepictureinpicture=""
+        disableremoteplayback=""
+        playsinline=""
+        poster=""
+        preload="auto"
+        id="clip-localhost:8080/fakevideo.mpg"
+        crossorigin="anonymous"
+        style="height: fit-content; width: 100%"
+      >
+        <source
+          id="video-source-0-localhost:8080/fakevideo.mpg"
+          data-cp-component="cp-clip__video-source"
+          src="localhost:8080/fakevideo.mpg"
+          type="video/mp4"
+        />
+      </video>
+    </div>
+    <div
+      class="cp-clip__video-meta-info"
+      data-cp-clip-video-meta-info="true"
+    ></div>
+  </div>
+</div>
+"
+`;
+
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests mid-grid default render - should wrap in ContentLayout with nested Container structure 1`] = `
+"<div class="n-content-layout" data-layout-width="full-grid">
+  <div class="n-content-layout__container" data-component="clip-set">
+    <div
+      data-o-grid-colspan="12 S12 M12 L10 XL10"
+      class="n-content-layout__container--mid-grid"
+    >
+      <div
+        data-cp-clip-layout="mid-grid"
+        data-cp-clip-poster=""
+        data-cp-clip-no-audio="false"
+        data-cp-clip-no-description="false"
+        data-cp-clip-caption=""
+        data-cp-clip-no-info-box="false"
+        data-cp-clip-no-caption="false"
+        data-cp-clip-closed-caption="false"
+        class="cp-clip"
+        data-trackable="next-article-cp-clip"
+        data-o-component="cp-clip"
+        data-cp-clip-id="localhost:8080/fakevideo.mpg"
+        data-cp-clip-system-title=""
+        id=""
+      >
+        <div
+          data-o-component="o-expander"
+          class="o-expander o-expander__info-box"
+          data-o-expander-shrink-to="hidden"
+          data-trackable="clip-info-box"
+          data-o-expander-collapsed-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;"
+          data-o-expander-expanded-toggle-text="&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;"
+        >
+          <button
+            data-trackable="toggle-open-close"
+            class="o-expander__toggle o-expander__toggle-empty"
+          >
+            <span class="o-expander__visually-hidden o3-type-detail"
+              >Show video info</span
+            >
+          </button>
+          <div class="o-expander__content video-info"></div>
+        </div>
+        <div class="cp-clip__video-container">
+          <video
+            class="cp-clip__video"
+            controls=""
+            controlsList="nodownload noremoteplayback noplaybackrate"
+            disablepictureinpicture=""
+            disableremoteplayback=""
+            playsinline=""
+            poster=""
+            preload="auto"
+            id="clip-localhost:8080/fakevideo.mpg"
+            crossorigin="anonymous"
+            style="height: fit-content; width: 100%"
+          >
+            <source
+              id="video-source-0-localhost:8080/fakevideo.mpg"
+              data-cp-component="cp-clip__video-source"
+              src="localhost:8080/fakevideo.mpg"
+              type="video/mp4"
+            />
+          </video>
+        </div>
+        <div
+          class="cp-clip__video-meta-info"
+          data-cp-clip-video-meta-info="true"
+        ></div>
+      </div>
+    </div>
+  </div>
+</div>
+"
+`;
+
 exports[`Clip Snapshot component rendered on server full-grid default render 1`] = `
 "<div class="n-content-layout" data-layout-width="full-grid">
   <div class="n-content-layout__container" data-component="clip-set">

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

@@ -25,6 +25,46 @@ describe('Clip Snapshot', () => {
     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 = renderer
+          .create(
+            <ClipServer content={{ url, dataLayout: 'in-line' }}></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+
+      it('full-grid default render - should wrap in ContentLayout with proper classes', () => {
+        const tree = renderer
+          .create(
+            <ClipServer content={{ url, dataLayout: 'full-grid' }}></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+
+      it('mid-grid default render - should wrap in ContentLayout with nested Container structure', () => {
+        const tree = renderer
+          .create(
+            <ClipServer content={{ url, dataLayout: 'mid-grid' }}></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+
+      it('edge case: custom dataLayout value should wrap in ContentLayout', () => {
+        const tree = renderer
+          .create(
+            <ClipServer
+              content={{ url, dataLayout: 'custom-layout' }}
+            ></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+    })
+
     it('in-line render', () => {
       const tree = renderer
         .create(

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

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

@@ -0,0 +1,55 @@
+@import "@financial-times/o3-foundation/css/core.css";
+
+.cp-timeline {
+    display: flex;
+    flex-direction: column;
+
+    .cp-timeline-event {
+        flex-basis: 100%;
+        padding-left: var(--o3-spacing-s);
+        margin-left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+        position: relative;
+
+        &::before {
+            content: "";
+            width: 2px;
+            background: var(--o3-color-palette-black);
+            height: 100%;
+            display: block;
+            position: absolute;
+            left: var(--o3-spacing-5xs);
+            top: 0;
+        }
+
+        .cp-timeline-event__heading {
+            position: relative;
+            margin-top: var(--o3-spacing-s);
+            margin-bottom: var(--o3-spacing-5xs);
+
+            .cp-timeline-event__heading-title {
+                font-weight: var(--o3-font-weight-semibold);
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 6px;
+                    left: -23px;
+                    height: var(--o3-spacing-4xs);
+                    width: var(--o3-spacing-4xs);
+                    border-radius: 50%;
+                    background-color: var(--o3-color-palette-black);
+                }
+            }
+        }
+
+        p {
+            margin-bottom: var(--o3-spacing-4xs);
+            margin-top: var(--o3-spacing-5xs);
+            font-family: var(--o3-type-body-base-font-family);
+            font-size: var(--o3-type-body-base-font-size);
+            font-weight: var(--o3-type-body-base-font-weight);
+            line-height: var(--o3-type-body-base-line-height);
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ContentLayout } from '../../ContentLayout'
+
+interface TimelineProps {
+  children?: React.ReactNode
+}
+/*
+ * @description Timeline component is used to render a simple timeline of events.
+ * @param children - The content to be displayed in the layout.
+ */
+const Timeline: React.FC<TimelineProps> = ({ children }) => {
+  return (
+    <ContentLayout>
+      <div className="cp-timeline">{children}</div>
+    </ContentLayout>
+  )
+}
+
+export default Timeline

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

@@ -0,0 +1,66 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import TimelineEvent from '../TimelineEvent'
+
+describe('TimelineEvent', () => {
+  it('renders with date label and children', () => {
+    const { container } = render(
+      <TimelineEvent
+        content={{
+          type: 'timeline-event',
+          title: 'Significant Event',
+        }}
+      >
+        <p>This is the event content</p>
+      </TimelineEvent>
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with minimal children content', () => {
+    const { container } = render(
+      <TimelineEvent
+        content={{
+          type: 'timeline-event',
+          title: 'Short Event',
+        }}
+      >
+        <p>Brief event description</p>
+      </TimelineEvent>
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with long date label', () => {
+    const { container } = render(
+      <TimelineEvent
+        content={{
+          type: 'timeline-event',
+          title: 'Wednesday, December 25, 2024 - Christmas Day',
+        }}
+      >
+        <p>Christmas celebration details</p>
+      </TimelineEvent>
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with complex nested children', () => {
+    const { container } = render(
+      <TimelineEvent
+        content={{
+          type: 'timeline-event',
+          title: 'Q4 2024',
+        }}
+      >
+        <div>
+          <h3>Quarterly Results</h3>
+          <p>
+            The company announced <strong>strong</strong> Q4 results.
+          </p>
+        </div>
+      </TimelineEvent>
+    )
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/components/content-tree/Timeline/test/__snapshots__/TimelineEvent.spec.tsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimelineEvent renders with complex nested children 1`] = `
+<div>
+  <div
+    class="cp-timeline-event"
+  >
+    <h5
+      class="cp-timeline-event__heading o3-type-label"
+    >
+      <span
+        class="cp-timeline-event__heading-title"
+      >
+        Q4 2024
+      </span>
+    </h5>
+    <div>
+      <h3>
+        Quarterly Results
+      </h3>
+      <p>
+        The company announced 
+        <strong>
+          strong
+        </strong>
+         Q4 results.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TimelineEvent renders with date label and children 1`] = `
+<div>
+  <div
+    class="cp-timeline-event"
+  >
+    <h5
+      class="cp-timeline-event__heading o3-type-label"
+    >
+      <span
+        class="cp-timeline-event__heading-title"
+      >
+        Significant Event
+      </span>
+    </h5>
+    <p>
+      This is the event content
+    </p>
+  </div>
+</div>
+`;
+
+exports[`TimelineEvent renders with long date label 1`] = `
+<div>
+  <div
+    class="cp-timeline-event"
+  >
+    <h5
+      class="cp-timeline-event__heading o3-type-label"
+    >
+      <span
+        class="cp-timeline-event__heading-title"
+      >
+        Wednesday, December 25, 2024 - Christmas Day
+      </span>
+    </h5>
+    <p>
+      Christmas celebration details
+    </p>
+  </div>
+</div>
+`;
+
+exports[`TimelineEvent renders with minimal children content 1`] = `
+<div>
+  <div
+    class="cp-timeline-event"
+  >
+    <h5
+      class="cp-timeline-event__heading o3-type-label"
+    >
+      <span
+        class="cp-timeline-event__heading-title"
+      >
+        Short Event
+      </span>
+    </h5>
+    <p>
+      Brief event description
+    </p>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timeline component renders with full-width layout and children 1`] = `
+<div>
+  <div
+    class="n-content-layout__container--in-line"
+  >
+    <div
+      class="cp-timeline"
+    >
+      <div>
+        Event 1
+      </div>
+      <div>
+        Event 2
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Timeline from '../'
+
+describe('Timeline component', () => {
+  it('renders with full-width layout and children', () => {
+    const { container } = render(
+      <Timeline>
+        <div>Event 1</div>
+        <div>Event 2</div>
+      </Timeline>
+    )
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/index.ts

@@ -30,6 +30,8 @@ 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,