@financial-times/cp-content-pipeline-ui 6.8.1 → 6.9.1

package/src/components/Body/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,352 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Body content type override renderers renders override renderer for Article 1`] = `
+<DocumentFragment>
+  body override Article
+</DocumentFragment>
+`;
+
+exports[`Body content type override renderers renders override renderer for Audio 1`] = `
+<DocumentFragment>
+  body override Audio
+</DocumentFragment>
+`;
+
+exports[`Body content type override renderers renders override renderer for ContentPackage 1`] = `
+<DocumentFragment>
+  body override ContentPackage
+</DocumentFragment>
+`;
+
+exports[`Body content type override renderers renders override renderer for LiveBlogPackage 1`] = `
+<DocumentFragment>
+  body override LiveBlogPackage
+</DocumentFragment>
+`;
+
+exports[`Body content type override renderers renders override renderer for Video 1`] = `
+<DocumentFragment>
+  body override Video
+</DocumentFragment>
+`;
+
+exports[`Body default renderers renders default renderer for Article 1`] = `
+<DocumentFragment>
+  <article
+    class="n-content-body"
+  >
+    <p>
+      Lorem ipsum dolor sit amet
+    </p>
+  </article>
+</DocumentFragment>
+`;
+
+exports[`Body default renderers renders default renderer for Audio 1`] = `
+<DocumentFragment>
+  <div
+    class="article__content-body n-content-body js-article__content-body"
+    data-attribute="article-content-body"
+    data-trackable="article-body"
+  >
+    <div
+      class="article__media"
+    >
+      <audio
+        controls=""
+        data-audio-subtype="podcast"
+        data-content-id="00000000-0000-0000-0000-000000000000"
+        data-dispatch-listened-event-on-unload="true"
+        data-o-component="o-audio"
+      >
+        <source
+          src="https://open.spotify.com/album/34a7B1mPM7RqlwsjPPmzEg?si=aHxMBJ1zRES6Z0iIrTrwBQ"
+          type="audio/mpeg"
+        />
+        <p>
+          Your browser does not support playing this file but you can still 
+          <a
+            href="https://open.spotify.com/album/34a7B1mPM7RqlwsjPPmzEg?si=aHxMBJ1zRES6Z0iIrTrwBQ"
+          >
+            download the MP3 file
+          </a>
+           to play locally.
+        </p>
+      </audio>
+    </div>
+    <article
+      class="n-content-body"
+    >
+      <p>
+        Lorem ipsum dolor sit amet
+      </p>
+      <p>
+        <a
+          href="/accessibility#podcast-transcriptions"
+        >
+          View our accessibility guide
+        </a>
+        .
+      </p>
+    </article>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Body default renderers renders default renderer for ContentPackage 1`] = `
+<DocumentFragment>
+  <article
+    class="article n-content-body js-article__content-body n-content-body"
+    data-attribute="article-content-body"
+    data-content-id="00000000-0000-0000-0000-000000000000"
+    id="site-content"
+    role="main"
+  >
+    <div
+      class="package-container package-grid-1-column"
+    >
+      <div
+        class="package-contents package-teasers--large"
+      >
+        <ul
+          class="package-contents package-teasers__list"
+        >
+          <li
+            class="package-contents__item o-teaser-collection__item o-teaser-collection__item--stretched"
+          >
+            <div
+              class="o-teaser o-teaser--hero o-teaser--centre o-teaser--stretched js-teaser"
+            >
+              <div
+                class="o-teaser__content"
+              >
+                <div
+                  class="o-teaser__heading"
+                >
+                  <a
+                    class="js-teaser-heading-link"
+                    data-trackable="heading-link"
+                    href="/content/00000000-0000-0000-0000-000000000000"
+                  >
+                    teaser
+                  </a>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </article>
+</DocumentFragment>
+`;
+
+exports[`Body default renderers renders default renderer for LiveBlogPackage 1`] = `
+<DocumentFragment>
+  <div
+    class="x-live-blog-wrapper"
+    data-live-blog-wrapper-id="live-blog-wrapper"
+  >
+    <article
+      class="x-live-blog-post"
+      data-trackable="live-post"
+      data-x-component="live-blog-post"
+      id="post-00000000-0000-0000-0000-000000000000"
+    >
+      <div
+        class="x-live-blog-post__standout"
+      >
+        <span
+          class=""
+        />
+        <div
+          class="x-live-blog-post__meta-container"
+        >
+          <div
+            class="x-live-blog-post__meta"
+          >
+            <span>
+              <span
+                class="x-live-blog-post__timestamp-container"
+              >
+                <time
+                  class="o-date x-live-blog-post__timestamp"
+                  data-o-component="o-date"
+                  data-o-date-format="time-ago-no-seconds"
+                  data-o-date-text-case="sentence"
+                  datetime="2024-06-11T14:13:25.527Z"
+                  itemprop="datePublished"
+                >
+                  <span
+                    data-o-date-printer="true"
+                  >
+                    6/11/2024, 2:13:25 PM
+                  </span>
+                </time>
+              </span>
+            </span>
+          </div>
+          <div
+            class="x-live-blog-post__byline"
+          >
+            <p
+              class="article-info__byline"
+            />
+          </div>
+        </div>
+      </div>
+      <h2
+        class="x-live-blog-post__title"
+      >
+        live post 1
+      </h2>
+      <div
+        class="x-live-blog-post__body n-content-body article--body"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+      <div
+        class="x-live-blog-post__controls"
+      >
+        <div>
+          <div
+            class="o-share o-share--small"
+            data-o-component="o-share"
+            data-o-share-location="live-blog-post-00000000-0000-0000-0000-000000000000"
+          >
+            <ul
+              data-toolbar="share"
+            >
+              <li
+                class="o-share__action"
+                data-share="twitter"
+              >
+                <a
+                  class="o-share__icon o-share__icon--x"
+                  data-trackable="twitter"
+                  href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.ft.com%2Fcontent%2F00000000-0000-0000-0000-000000000000%23post-00000000-0000-0000-0000-000000000000&text=live%20post%201&via=ft"
+                  rel="noopener"
+                >
+                  <div
+                    class="o-share__icon__image"
+                  >
+                    <svg
+                      viewBox="0 0 40 40"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M21.647 18.469 28.932 10h-1.726l-6.326 7.353L15.827 10H10l7.64 11.12L10 30h1.726l6.68-7.765L23.744 30h5.827l-7.924-11.531Zm-2.365 2.748-.774-1.107-6.16-8.81H15l4.971 7.11.774 1.107 6.462 9.242h-2.652l-5.273-7.541Z"
+                      />
+                    </svg>
+                  </div>
+                  <span
+                    class="o-share__text"
+                  >
+                    Share $live post 1 on X (opens in a new window)
+                  </span>
+                </a>
+              </li>
+              <li
+                class="o-share__action"
+                data-share="facebook"
+              >
+                <a
+                  class="o-share__icon o-share__icon--facebook"
+                  data-trackable="facebook"
+                  href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.ft.com%2Fcontent%2F00000000-0000-0000-0000-000000000000%23post-00000000-0000-0000-0000-000000000000&t=live%20post%201"
+                  rel="noopener"
+                >
+                  <div
+                    class="o-share__icon__image"
+                  >
+                    <svg
+                      viewBox="0 0 1024 1024"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M643.9 342h-48.2c-37.8 0-45.1 18-45.1 44.3v58.1h90.1l-11.7 91h-78.4V769h-94V535.5H378v-91h78.6v-67.1c0-77.9 47.6-120.3 117.1-120.3 33.3 0 61.9 2.5 70.2 3.6V342z"
+                      />
+                    </svg>
+                  </div>
+                  <span
+                    class="o-share__text"
+                  >
+                    Share $live post 1 on Facebook (opens in a new window)
+                  </span>
+                </a>
+              </li>
+              <li
+                class="o-share__action"
+                data-share="linkedin"
+              >
+                <a
+                  class="o-share__icon o-share__icon--linkedin"
+                  data-trackable="linkedin"
+                  href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.ft.com%2Fcontent%2F00000000-0000-0000-0000-000000000000%23post-00000000-0000-0000-0000-000000000000&title=live%20post%201&source=Financial+Times"
+                  rel="noopener"
+                >
+                  <div
+                    class="o-share__icon__image"
+                  >
+                    <svg
+                      viewBox="0 0 1024 1024"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M264.4 426.2h106.2v341.4H264.4V426.2zm53.2-169.7c-34.1 0-61.6 27.6-61.6 61.5 0 34 27.5 61.5 61.6 61.5 33.9 0 61.5-27.6 61.5-61.5-.1-34-27.6-61.5-61.5-61.5zm323.1 161.2c-51.6 0-86.2 28.3-100.4 55.1h-1.5v-46.7H437.2v341.4h106V598.7c0-44.5 8.4-87.7 63.6-87.7 54.5 0 55.1 50.9 55.1 90.5v166H768V580.3c0-91.9-19.9-162.6-127.3-162.6z"
+                      />
+                    </svg>
+                  </div>
+                  <span
+                    class="o-share__text"
+                  >
+                    Share $live post 1 on LinkedIn (opens in a new window)
+                  </span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </article>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Body default renderers renders default renderer for Video 1`] = `
+<DocumentFragment>
+  <article
+    class="n-content-body"
+  >
+    <p>
+      Lorem ipsum dolor sit amet
+    </p>
+  </article>
+</DocumentFragment>
+`;
+
+exports[`Body legacy override renderers renders override renderer for Article 1`] = `
+<DocumentFragment>
+  body override Article
+</DocumentFragment>
+`;
+
+exports[`Body legacy override renderers renders override renderer for Audio 1`] = `
+<DocumentFragment>
+  body override Audio
+</DocumentFragment>
+`;
+
+exports[`Body legacy override renderers renders override renderer for ContentPackage 1`] = `
+<DocumentFragment>
+  body override ContentPackage
+</DocumentFragment>
+`;
+
+exports[`Body legacy override renderers renders override renderer for LiveBlogPackage 1`] = `
+<DocumentFragment>
+  body override LiveBlogPackage
+</DocumentFragment>
+`;

package/src/components/Body/index.test.tsx

@@ -0,0 +1,159 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Body, { BodyComponentMapRecord } from '.'
+import { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
+
+const baseContent: ArticleQuery['content'] = {
+  __typename: 'Article',
+  title: 'title',
+  id: '00000000-0000-0000-0000-000000000000',
+  url: 'https://www.ft.com/content/00000000-0000-0000-0000-000000000000',
+  publishedDate: '2024-06-11T14:13:25.527Z',
+  publishedTimestamp: 1718115205527,
+  firstPublishedDate: '2024-06-11T14:13:25.527Z',
+  body: {
+    structured: {
+      tree: {
+        type: 'body',
+        version: 1,
+        children: [
+          {
+            type: 'paragraph',
+            children: [
+              {
+                type: 'text',
+                value: 'Lorem ipsum dolor sit amet',
+              },
+            ],
+          },
+        ],
+      },
+      references: [],
+    },
+  },
+}
+
+const extraContentForType: Partial<
+  Record<
+    ArticleQuery['content']['__typename'],
+    Partial<ArticleQuery['content']>
+  >
+> = {
+  Audio: {
+    __typename: 'Audio',
+    media: [
+      {
+        mediaType: 'audio/mpeg',
+        url: 'https://open.spotify.com/album/34a7B1mPM7RqlwsjPPmzEg?si=aHxMBJ1zRES6Z0iIrTrwBQ',
+      },
+    ],
+  },
+  ContentPackage: {
+    __typename: 'ContentPackage',
+    contains: [
+      {
+        title: 'teaser',
+        url: 'https://www.ft.com/content/00000000-0000-0000-0000-000000000000',
+        relativeUrl: '/content/00000000-0000-0000-0000-000000000000',
+      },
+    ],
+  },
+  LiveBlogPackage: {
+    __typename: 'LiveBlogPackage',
+    liveBlogPosts: [
+      {
+        ...baseContent,
+        __typename: 'LiveBlogPost',
+        title: 'live post 1',
+      },
+    ],
+  },
+  Video: {
+    __typename: 'Video',
+  },
+}
+
+const extraPropsForType: Partial<
+  Record<ArticleQuery['content']['__typename'], Record<string, unknown>>
+> = {
+  LiveBlogPackage: {
+    postTrackerConfig: {
+      usePostTracker: false,
+    },
+  },
+}
+
+// these are the only content types we currently care about rendering bodies for
+const typesToTest: ArticleQuery['content']['__typename'][] = [
+  'Article',
+  'Video',
+  'Audio',
+  'LiveBlogPackage',
+  'ContentPackage',
+]
+
+const legacyOverridesToTest: [
+  ArticleQuery['content']['__typename'],
+  keyof BodyComponentMapRecord
+][] = [
+  ['Article', 'article-body'],
+  ['LiveBlogPackage', 'live-blog-body'],
+  ['ContentPackage', 'content-package-body'],
+  ['Audio', 'podcast-body'],
+]
+
+describe('Body', () => {
+  describe('default renderers', () => {
+    test.each(typesToTest)('renders default renderer for %s', (type) => {
+      const { asFragment } = render(
+        <Body
+          content={{ ...baseContent, ...(extraContentForType[type] ?? {}) }}
+          {...(extraPropsForType[type] ?? {})}
+        />
+      )
+
+      expect(asFragment()).toMatchSnapshot()
+    })
+  })
+
+  describe('legacy override renderers', () => {
+    test.each(legacyOverridesToTest)(
+      'renders override renderer for %s',
+      (type, overrideName) => {
+        const { asFragment } = render(
+          <Body
+            content={{ ...baseContent, ...(extraContentForType[type] ?? {}) }}
+            {...(extraPropsForType[type] ?? {})}
+            bodyComponents={{
+              [overrideName]: ({
+                content,
+              }: {
+                content: ArticleQuery['content']
+              }) => <>body override {content.__typename}</>,
+            }}
+          />
+        )
+
+        expect(asFragment()).toMatchSnapshot()
+      }
+    )
+  })
+
+  describe('content type override renderers', () => {
+    test.each(typesToTest)('renders override renderer for %s', (type) => {
+      const { asFragment } = render(
+        <Body
+          content={{ ...baseContent, ...(extraContentForType[type] ?? {}) }}
+          {...(extraPropsForType[type] ?? {})}
+          bodyComponents={{
+            [type]: ({ content }: { content: ArticleQuery['content'] }) => (
+              <>body override {content.__typename}</>
+            ),
+          }}
+        />
+      )
+
+      expect(asFragment()).toMatchSnapshot()
+    })
+  })
+})

package/src/components/Body/index.tsx

@@ -5,74 +5,74 @@ import PodcastBody from '../PodcastBody'
 import ContentPackageBody from '../ContentPackageBody'
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
 import type { RichTextComponentMapRecord } from '../RichText'
-import type { Serialiser } from '@financial-times/x-interaction'
 
-type PostTrackerConfig = {
-  usePostTracker: boolean
-  onEntersViewport: () => void
-  onRead: () => void
-  onError: () => void
-}
-
-type BodyComponentMapRecord = Partial<
+export type BodyComponentMapRecord = Partial<
   Record<
-    'live-blog-body' | 'article-body' | 'podcast-body' | 'content-package-body',
+    | ArticleQuery['content']['__typename']
+    // these are here for backwards compatibility:
+    | 'live-blog-body'
+    | 'article-body'
+    | 'podcast-body'
+    | 'content-package-body'
+    // this will be used for any content type without a default or override body
+    | 'fallback',
     // using any here, no easy way to make a type that works for all the potential renderers
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     JSXElementConstructor<any>
   >
 >
 
+const contentTypeLegacyOverrideMap: Partial<
+  Record<
+    ArticleQuery['content']['__typename'],
+    Exclude<
+      keyof BodyComponentMapRecord,
+      ArticleQuery['content']['__typename'] | 'fallback'
+    >
+  >
+> = {
+  Audio: 'podcast-body',
+  LiveBlogPackage: 'live-blog-body',
+  ContentPackage: 'content-package-body',
+}
+
+const defaultBodyComponents = {
+  Audio: PodcastBody,
+  LiveBlogPackage: LiveBlogBody,
+  ContentPackage: ContentPackageBody,
+  fallback: ArticleBody,
+} satisfies BodyComponentMapRecord
+
 export type BodyProps = {
   content: ArticleQuery['content']
   richTextComponents?: RichTextComponentMapRecord
   bodyComponents?: BodyComponentMapRecord
-  showShareButtons?: boolean
-  xInteractionSerialiser?: Serialiser
-  postTrackerConfig?: PostTrackerConfig
-  AdSlot?: React.FC
+  [key: string]: unknown
 }
 
 export default function Body({
   content,
-  richTextComponents,
   bodyComponents,
-  showShareButtons,
-  xInteractionSerialiser,
-  postTrackerConfig,
-  AdSlot,
+  ...extraProps
 }: BodyProps) {
   if (!content?.body?.structured) {
     return null
   }
 
-  const LiveBlog = bodyComponents?.['live-blog-body'] ?? LiveBlogBody
-  const Article = bodyComponents?.['article-body'] ?? ArticleBody
-  const Podcast = bodyComponents?.['podcast-body'] ?? PodcastBody
-  const ContentPackage =
-    bodyComponents?.['content-package-body'] ?? ContentPackageBody
-
-  if (content.__typename === 'LiveBlogPackage') {
-    return (
-      <LiveBlog
-        content={content}
-        richTextComponents={richTextComponents}
-        showShareButtons={showShareButtons}
-        xInteractionSerialiser={xInteractionSerialiser}
-        postTrackerConfig={postTrackerConfig}
-      />
-    )
-  } else if (content.__typename === 'Audio') {
-    return <Podcast content={content} richTextComponents={richTextComponents} />
-  } else if (content.__typename === 'ContentPackage') {
-    return (
-      <ContentPackage
-        content={content}
-        richTextComponents={richTextComponents}
-        AdSlot={AdSlot}
-      />
-    )
+  const bodyComponentsWithOverrides = {
+    ...defaultBodyComponents,
+    ...bodyComponents,
   }
 
-  return <Article content={content} richTextComponents={richTextComponents} />
+  const legacyOverrideKey =
+    contentTypeLegacyOverrideMap[content.__typename] ?? 'article-body'
+  const overrideComponent =
+    legacyOverrideKey in bodyComponentsWithOverrides
+      ? bodyComponentsWithOverrides[legacyOverrideKey]
+      : bodyComponentsWithOverrides[content.__typename]
+
+  const BodyComponent =
+    overrideComponent ?? bodyComponentsWithOverrides.fallback ?? ArticleBody
+
+  return <BodyComponent content={content} {...extraProps} />
 }

package/src/components/ContentPackageBody/index.tsx

@@ -33,11 +33,15 @@ type SecondaryTeasersProps = {
   AdSlot?: React.FC
 }
 
+type ContentPackageBodyProps = BodyProps & {
+  AdSlot?: React.FC
+}
+
 export default function ContentPackageBody({
   content,
   richTextComponents,
   AdSlot,
-}: BodyProps) {
+}: ContentPackageBodyProps) {
   if (content.__typename !== 'ContentPackage') {
     return null
   }

package/src/components/Flourish/client/main.scss

@@ -3,11 +3,20 @@
         @include oGridRespondTo(XL) {
             max-width: oGridColspan(12);
         }
-        margin-bottom: 0;
-        margin-top: oSpacingByName("s4")
+        .flourish__i-frame {
+            border: 0;
+            @media screen and (max-width: 739px) {
+                // We need to enforce this otherwise it will use the inline styling
+                aspect-ratio: 3/4 !important;
+            }
+        }
+        .flourish__figure {
+            display: none;
+        }
     }
     // We need to force the iframe to be hidden if we turn the feature flag off
-    &.disable-iframe {
+    &.disable-iframe,
+    .no-js & {
         .flourish__i-frame {
             display: none;
         }
@@ -17,22 +26,3 @@
         }
     }
 }
-// Without JS the i-frame will not work, so we hide it
-.no-js {
-    .flourish__i-frame {
-        display: none;
-    }
-}
-.js {
-    .flourish__i-frame {
-        display: block;
-        border: 0;
-        @media screen and (max-width: 739px) {
-            // We need to enforce this otherwise it will use the inline styling
-            aspect-ratio: 3/4 !important;
-        }
-    }
-    .flourish__figure {
-        display: none;
-    }
-}

package/src/components/Layout/index.tsx

@@ -11,7 +11,7 @@ interface ContentTreeLayoutSlot extends ContentTree.Node {
 }
 
 interface BaseLayoutProps {
-  layoutWidth: 'inset-left' | 'full-width' | 'full-grid'
+  layoutWidth: 'inset-left' | 'full-width' | 'full-grid' | 'in-line'
   layoutName?: string
 }