@financial-times/cp-content-pipeline-ui 6.4.5 → 6.5.0

package/src/components/Flourish/test/__snapshots__/snapshot.spec.tsx.snap

@@ -0,0 +1,310 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Flourish component renders ignoring layout different from full-grid 1`] = `
+<div>
+  <div
+    class="n-content-layout"
+    data-component="flourish"
+  >
+    <figure
+      class="n-content-picture n-content-layout__container"
+    >
+      <a
+        href="#123"
+      >
+        <picture
+          data-asset-type="flourish"
+          data-flourish-id="123"
+          data-flourish-type="bar"
+        >
+          <div
+            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            data-o-component="o-message"
+            id="123"
+          >
+            <div
+              class="o-message__container"
+            >
+              <div
+                class="o-message__content"
+              >
+                <p
+                  class="o-message__content-main"
+                >
+                  You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.
+                </p>
+              </div>
+            </div>
+          </div>
+          <img
+            alt="foo"
+            src="https://example.com/image.jpg"
+          />
+        </picture>
+      </a>
+    </figure>
+  </div>
+</div>
+`;
+
+exports[`Flourish component renders with a full-grid layout and fallback image 1`] = `
+<div>
+  <div
+    class="n-content-layout"
+    data-component="flourish"
+    data-layout-width="full-grid"
+  >
+    <figure
+      class="n-content-picture n-content-layout__container n-content-picture--wide"
+      data-original-image-height="150"
+      data-original-image-width="100"
+    >
+      <a
+        href="#123"
+      >
+        <picture
+          data-asset-type="flourish"
+          data-flourish-id="123"
+          data-flourish-type="bar"
+        >
+          <div
+            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            data-o-component="o-message"
+            id="123"
+          >
+            <div
+              class="o-message__container"
+            >
+              <div
+                class="o-message__content"
+              >
+                <p
+                  class="o-message__content-main"
+                >
+                  You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.
+                </p>
+              </div>
+            </div>
+          </div>
+          <img
+            alt="foo"
+            src="https://example.com/image.jpg"
+          />
+        </picture>
+      </a>
+    </figure>
+  </div>
+</div>
+`;
+
+exports[`Flourish component renders with an iframe rather than using the embed script to insert it 1`] = `
+<div>
+  <div
+    class="n-content-layout flourish flourish--iFrame"
+    data-component="flourish"
+    data-layout-width="full-grid"
+  >
+    <iframe
+      class="flourish__i-frame"
+      src="https://flo.uri.sh/visualisation/123/embed?hideTitle=false"
+      style="width: 100%;"
+    />
+    <figure
+      class="n-content-picture n-content-layout__container n-content-picture--wide flourish__figure"
+      data-original-image-height="150"
+      data-original-image-width="100"
+    >
+      <a
+        href="#123"
+      >
+        <picture
+          data-asset-type="flourish-embed"
+          data-flourish-id="123"
+          data-flourish-type="bar"
+        >
+          <div
+            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            data-o-component="o-message"
+            id="123"
+          >
+            <div
+              class="o-message__container"
+            >
+              <div
+                class="o-message__content"
+              >
+                <p
+                  class="o-message__content-main"
+                >
+                  You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.
+                </p>
+              </div>
+            </div>
+          </div>
+          <img
+            alt="foo"
+            src="https://example.com/image.jpg"
+          />
+        </picture>
+      </a>
+    </figure>
+  </div>
+</div>
+`;
+
+exports[`Flourish component renders without n-content-layout class for charts not in article body 1`] = `
+<div>
+  <div
+    class=""
+    data-component="flourish"
+    data-layout-width="full-grid"
+  >
+    <figure
+      class="n-content-picture n-content-layout__container n-content-picture--wide"
+      data-original-image-height="150"
+      data-original-image-width="100"
+    >
+      <a
+        href="#123"
+      >
+        <picture
+          data-asset-type="flourish"
+          data-flourish-id="123"
+          data-flourish-type="bar"
+        >
+          <div
+            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            data-o-component="o-message"
+            id="123"
+          >
+            <div
+              class="o-message__container"
+            >
+              <div
+                class="o-message__content"
+              >
+                <p
+                  class="o-message__content-main"
+                >
+                  You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.
+                </p>
+              </div>
+            </div>
+          </div>
+          <img
+            alt="foo"
+            src="https://example.com/image.jpg"
+            style="width: 100%;"
+          />
+        </picture>
+      </a>
+    </figure>
+  </div>
+</div>
+`;
+
+exports[`does not set aspect ratios when in article body 1`] = `
+<div>
+  <div
+    class="n-content-layout"
+    data-component="flourish"
+    data-layout-width="full-grid"
+  >
+    <figure
+      class="n-content-picture n-content-layout__container n-content-picture--wide"
+      data-original-image-height="150"
+      data-original-image-width="100"
+    >
+      <a
+        href="#123"
+      >
+        <picture
+          data-asset-type="flourish"
+          data-flourish-id="123"
+          data-flourish-type="bar"
+        >
+          <div
+            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            data-o-component="o-message"
+            id="123"
+          >
+            <div
+              class="o-message__container"
+            >
+              <div
+                class="o-message__content"
+              >
+                <p
+                  class="o-message__content-main"
+                >
+                  You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.
+                </p>
+              </div>
+            </div>
+          </div>
+          <img
+            alt="foo"
+            src="https://example.com/image.jpg"
+          />
+        </picture>
+      </a>
+    </figure>
+  </div>
+</div>
+`;
+
+exports[`sets the hideTitle param in the iframe url to true when not in article body 1`] = `
+<div>
+  <div
+    class="flourish flourish--iFrame"
+    data-component="flourish"
+    data-layout-width="full-grid"
+  >
+    <iframe
+      class="flourish__i-frame"
+      src="https://flo.uri.sh/visualisation/123/embed?hideTitle=true"
+      style="width: 100%;"
+    />
+    <figure
+      class="n-content-picture n-content-layout__container n-content-picture--wide flourish__figure"
+      data-original-image-height="150"
+      data-original-image-width="100"
+    >
+      <a
+        href="#123"
+      >
+        <picture
+          data-asset-type="flourish-embed"
+          data-flourish-id="123"
+          data-flourish-type="bar"
+        >
+          <div
+            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            data-o-component="o-message"
+            id="123"
+          >
+            <div
+              class="o-message__container"
+            >
+              <div
+                class="o-message__content"
+              >
+                <p
+                  class="o-message__content-main"
+                >
+                  You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.
+                </p>
+              </div>
+            </div>
+          </div>
+          <img
+            alt="foo"
+            src="https://example.com/image.jpg"
+            style="width: 100%;"
+          />
+        </picture>
+      </a>
+    </figure>
+  </div>
+</div>
+`;

package/src/components/Flourish/test/snapshot.spec.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Flourish from '../'
+
+enum acceptedFormat {
+  standard = 'standard',
+}
+
+const anImage = {
+  id: '123',
+  url: 'https://example.com/image.jpg',
+  width: 100,
+  height: 150,
+  format: 'standard' as acceptedFormat,
+  sourceSet: [
+    {
+      url: 'https://example.com/anotherImage.jpg',
+      width: 200,
+      dpr: 2,
+    },
+  ],
+}
+describe('Flourish component', () => {
+  it('renders with a full-grid layout and fallback image', async () => {
+    const { container } = render(
+      <Flourish
+        type="flourish"
+        id="123"
+        flourishType="bar"
+        description="foo"
+        layoutWidth="full-grid"
+        fallbackImage={anImage}
+      />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders ignoring layout different from full-grid', async () => {
+    const { container } = render(
+      <Flourish
+        type="flourish"
+        id="123"
+        flourishType="bar"
+        description="foo"
+        layoutWidth="whatever"
+        fallbackImage={anImage}
+      />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with an iframe rather than using the embed script to insert it', async () => {
+    const iFrame = true
+    const { container } = render(
+      <Flourish
+        type="flourish"
+        id="123"
+        flourishType="bar"
+        description="foo"
+        layoutWidth="full-grid"
+        fallbackImage={anImage}
+        iFrame={iFrame}
+      />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders without n-content-layout class for charts not in article body', async () => {
+    const inArticleBody = false
+    const { container } = render(
+      <Flourish
+        type="flourish"
+        id="123"
+        flourishType="bar"
+        description="foo"
+        layoutWidth="full-grid"
+        fallbackImage={anImage}
+        inArticleBody={inArticleBody}
+      />
+    )
+    expect(container).toMatchSnapshot()
+  })
+})
+
+it('sets the hideTitle param in the iframe url to true when not in article body', async () => {
+  const inArticleBody = false
+  const iFrame = true
+  const { container } = render(
+    <Flourish
+      type="flourish"
+      id="123"
+      flourishType="bar"
+      description="foo"
+      layoutWidth="full-grid"
+      fallbackImage={anImage}
+      iFrame={iFrame}
+      inArticleBody={inArticleBody}
+    />
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('does not set aspect ratios when in article body', async () => {
+  const { container } = render(
+    <Flourish
+      type="flourish"
+      id="123"
+      flourishType="bar"
+      description="foo"
+      layoutWidth="full-grid"
+      fallbackImage={anImage}
+    />
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/Layout/index.tsx

@@ -10,18 +10,31 @@ interface ContentTreeLayoutSlot extends ContentTree.Node {
   children: [ContentTree.ImageSet?, ...ContentTree.Paragraph[]]
 }
 
-interface ContentTreeCardLayout extends ContentTree.Node {
+interface BaseLayoutProps {
+  layoutWidth: 'inset-left' | 'full-width' | 'full-grid'
+  layoutName?: string
+}
+
+interface ContentTreeCardLayout extends BaseLayoutProps, ContentTree.Node {
   type: 'layout'
   layoutName: 'auto' | 'card' | 'timeline'
-  layoutWidth: 'inset-left' | 'full-width' | 'full-grid'
   children: ContentTreeLayoutSlot[]
 }
 
+interface StaticLayout extends BaseLayoutProps {
+  children: ReactNode
+}
+/*
+ * @description Layout component is used to define the layout for content. It can be used with ContentTree Layout Nodes or as a static layout.
+ * @param layoutWidth - The width of the layout within the containing grid.
+ * @param layoutName - The name of the layout.
+ * @param children - The content to be displayed in the layout.
+ */
 export function Layout({
   children,
   layoutWidth,
-  layoutName,
-}: React.PropsWithChildren<ContentTreeCardLayout>) {
+  layoutName = 'auto',
+}: React.PropsWithChildren<ContentTreeCardLayout | StaticLayout>) {
   return (
     <div
       className="n-content-layout"

package/src/components/PodcastBody/index.tsx

@@ -6,8 +6,8 @@ export default function PodcastBody({
   content,
   richTextComponents,
   showPlayer = true,
-  showAccessbilityGuide = true,
-}: BodyProps & { showPlayer?: boolean; showAccessbilityGuide?: boolean }) {
+  showAccessibilityGuide = true,
+}: BodyProps & { showPlayer?: boolean; showAccessibilityGuide?: boolean }) {
   if (content.__typename !== 'Audio') {
     return null
   }
@@ -47,7 +47,7 @@ export default function PodcastBody({
             structuredContent={content.body.structured}
             components={richTextComponents}
           />
-          {showAccessbilityGuide && (
+          {showAccessibilityGuide && (
             <p>
               <a href="/accessibility#podcast-transcriptions">
                 View our accessibility guide

package/src/components/Topper/Headline.tsx

@@ -23,9 +23,11 @@ export default function Headline({
 
   return (
     <h1 className={headlineClassnames}>
-      <span className="article-classifier__gap">{headline}</span>
+      <span className="headline__text">{headline}</span>
       {showPremiumLabel && (
-        <span className="o-labels o-labels--content-premium">Premium</span>
+        <span className="headline__premium-badge o-labels o-labels--content-premium">
+          Premium
+        </span>
       )}
     </h1>
   )

package/src/components/Topper/Intro.tsx

@@ -3,16 +3,9 @@ import RichText from '../RichText'
 import type { IntroFragment } from '@financial-times/cp-content-pipeline-client'
 import classNames from 'classnames'
 
-export default function Intro({
-  structured,
-  source,
-  handleSummaryLinkClick,
-}: IntroFragment & {
-  handleSummaryLinkClick?: (event: React.MouseEvent<HTMLElement>) => void
-}) {
+export default function Intro({ structured, source }: IntroFragment) {
   return (
     <div
-      onClick={handleSummaryLinkClick}
       className={classNames(`o-topper__${source}`, {
         'o-topper__summary--body': source === 'summary',
       })}

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

@@ -0,0 +1,5 @@
+/* Topper styles are in o-topper codebase */
+/* Flourish topper is not a distributable Origami topper, but only used via cp-pipeline-ui */
+.o-topper--flourish {
+    padding: 0 10px;
+}

package/src/components/Topper/index.tsx

@@ -8,16 +8,17 @@ import Headshot from '../Headshot'
 import Columnist from './Columnist'
 import LiveBlogIndicator from './LiveBlogIndicator'
 import { FollowButtonSlot } from './FollowButtonSlot'
+import Flourish from '../Flourish'
+import { Layout, LayoutContainer } from '../Layout'
 import classnames from 'classnames'
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
 
-type TopperProps = {
+export type TopperProps = {
   content: ArticleQuery['content']
   slot?: string
   followButtonSlot?: FollowButtonSlot
   showPremiumLabel?: boolean
   readNextSlot?: () => ReactElement
-  handleSummaryLinkClick?: (event: React.MouseEvent<HTMLElement>) => void
 }
 
 export default function Topper({
@@ -26,7 +27,6 @@ export default function Topper({
   followButtonSlot,
   showPremiumLabel = false,
   readNextSlot,
-  handleSummaryLinkClick,
 }: TopperProps) {
   const { topper } = content
 
@@ -39,6 +39,8 @@ export default function Topper({
   const isBasic = topper.__typename === 'BasicTopper'
   const isOpinion = topper.__typename === 'OpinionTopper'
   const isPodcast = topper.__typename === 'PodcastTopper'
+  const isFlourish =
+    topper.__typename === 'TopperWithFlourish' && !!topper.leadFlourish
   const isAudio = content.__typename === 'Audio'
   const hasLayout = 'layout' in topper && topper.layout
   const hasDesign = 'design' in topper && topper.design
@@ -136,14 +138,28 @@ export default function Topper({
               undefined
             }
           />
+          {isLiveBlog && isFlourish ? (
+            <Layout layoutWidth="full-grid">
+              <LayoutContainer>
+                <Flourish
+                  id={topper.leadFlourish.id || ''}
+                  flourishType={topper.leadFlourish.type || ''}
+                  description={topper.leadFlourish.description || ''}
+                  fallbackImage={topper.leadFlourish.fallbackImage || ''}
+                  iFrame={true}
+                  inArticleBody={false}
+                />
+              </LayoutContainer>
+            </Layout>
+          ) : (
+            ''
+          )}
           {topper.intro && (
             <Intro
               structured={topper.intro.structured}
               source={topper.intro.source}
-              handleSummaryLinkClick={handleSummaryLinkClick}
             />
           )}
-
           {hasHeadshot && !isAudio && isOpinion && topper.columnist && (
             <div className="o-topper__headshot">
               <Headshot

package/src/stories/Topper.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Topper, { TopperProps } from "../components/Topper";
+import { content } from './content';
+import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
+
+const args: TopperProps = {
+    content: content as unknown as ArticleQuery['content']
+}
+
+export default {
+    title: 'Topper',
+    component: Topper,
+    content: {}
+}
+
+export const Default = () => {
+    return (
+        <div className="story-container">
+            <Topper {...args} />
+        </div>
+    )
+}

package/src/stories/content.tsx

@@ -0,0 +1,78 @@
+export const content = {
+    __typename: 'LiveBlogPackage',
+    id: 'f9d0da8a-ac43-4f0d-8af5-d597d1f13bb8',
+    title: 'News updates from February 2: US adds 353,000 jobs in January, US hits Iraq and Syria after drone deaths',
+    publishedDate: '2024-02-05T12:00:44.399Z',
+    firstPublishedDate: '2024-02-05T12:00:44.399Z',
+    standfirst: null,
+    topper: {
+        __typename: 'TopperWithFlourish',
+        layout: 'flourish',
+        layoutWidth: 'full-width',
+        headline: 'News updates from February 2: US adds 353,000 jobs in January, US hits Iraq and Syria after drone deaths',
+        backgroundColour: 'paper',
+        backgroundBox: null,
+        textShadow: null,
+        followButtonVariant: 'standard',
+        intro: {
+            source: 'standfirst',
+            structured: {
+                tree: {
+                    type: 'body',
+                    version: 1,
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'Media sector scrambles to deal with fallout from phase out of cross-website trackers '
+                        }
+                    ]
+                }
+            }
+        },
+        displayConcept: {
+            id: '84cf4073-a674-4a93-aef9-dcc1832a65cb',
+            prefLabel: 'Amazon.com',
+            types: [
+                'http://www.ft.com/ontology/core/Thing',
+                'http://www.ft.com/ontology/concept/Concept',
+                'http://www.ft.com/ontology/organisation/Organisation',
+                'http://www.ft.com/ontology/company/Company',
+                'http://www.ft.com/ontology/company/PublicCompany'
+            ],
+            type: 'ORGANISATION',
+            directType: 'http://www.ft.com/ontology/company/PublicCompany',
+            isPackageBrand: false,
+            predicate: 'http://www.ft.com/ontology/hasDisplayTag',
+            url: 'https://www.ft.com/stream/84cf4073-a674-4a93-aef9-dcc1832a65cb',
+            relativeUrl: '/stream/84cf4073-a674-4a93-aef9-dcc1832a65cb'
+        },
+        genreConcept: {
+            id: 'a579350c-61ce-4c00-97ca-ddaa2e0cacf6',
+            prefLabel: 'News',
+            types: [
+                'http://www.ft.com/ontology/core/Thing',
+                'http://www.ft.com/ontology/concept/Concept',
+                'http://www.ft.com/ontology/classification/Classification',
+                'http://www.ft.com/ontology/Genre'
+            ],
+            type: 'GENRE',
+            directType: 'http://www.ft.com/ontology/Genre',
+            isPackageBrand: false,
+            predicate: 'http://www.ft.com/ontology/classification/isClassifiedBy',
+            url: 'https://www.ft.com/stream/a579350c-61ce-4c00-97ca-ddaa2e0cacf6',
+            relativeUrl: '/stream/a579350c-61ce-4c00-97ca-ddaa2e0cacf6'
+        },
+        leadFlourish: {
+            type: 'visualisation',
+            id: '15700475',
+            description: 'EU Airlines',
+            fallbackImage: {
+              url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fpublic.flourish.studio%2Fvisualisation%2F15700475%2Fthumbnail?source=cp-content-pipeline&fit=scale-down&quality=highest&width=1020&dpr=1',
+              type: 'visualisation',
+              format: 'standard',
+              width: 1020,
+              height: 892
+            }
+          }
+    },
+}