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

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,