@financial-times/cp-content-pipeline-ui 7.0.2 → 7.1.0

package/lib/stories/Message.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noticeInformCustomText = exports.noticeInformDefault = void 0;
+const Message_1 = __importDefault(require("../components/Message"));
+const react_1 = __importDefault(require("react"));
+require("./Message.stories.scss");
+exports.default = {
+    title: 'Message',
+    component: Message_1.default,
+    content: {},
+};
+const noticeInformArgs = {
+    id: '',
+    type: 'notice',
+    state: 'inform',
+};
+const noticeInformDefault = () => react_1.default.createElement(Message_1.default, { ...noticeInformArgs });
+exports.noticeInformDefault = noticeInformDefault;
+const noticeInformCustomTextArgs = {
+    id: '',
+    type: 'notice',
+    state: 'inform',
+    text: 'This is a custom message',
+};
+const noticeInformCustomText = () => (react_1.default.createElement(Message_1.default, { ...noticeInformCustomTextArgs }));
+exports.noticeInformCustomText = noticeInformCustomText;
+//# sourceMappingURL=Message.stories.js.map

package/lib/stories/Message.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.stories.js","sourceRoot":"","sources":["../../src/stories/Message.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,oEAA2C;AAE3C,kDAAyB;AACzB,kCAA+B;AAE/B,kBAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,iBAAO;IAClB,OAAO,EAAE,EAAE;CACZ,CAAA;AAED,MAAM,gBAAgB,GAAiB;IACrC,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;CAChB,CAAA;AAEM,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,8BAAC,iBAAO,OAAK,gBAAgB,GAAI,CAAA;AAA7D,QAAA,mBAAmB,uBAA0C;AAE1E,MAAM,0BAA0B,GAAiB;IAC/C,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,0BAA0B;CACjC,CAAA;AAEM,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,CAC1C,8BAAC,iBAAO,OAAK,0BAA0B,GAAI,CAC5C,CAAA;AAFY,QAAA,sBAAsB,0BAElC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -16,11 +16,12 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^3.3.2",
-    "@financial-times/content-tree": "github:financial-times/content-tree#abdc26b",
+    "@financial-times/content-tree": "github:financial-times/content-tree#056af70",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-grid": "^6.1.5",
     "@financial-times/o-icons": "^7.7.0",
+    "@financial-times/o-message": "^5.4.4",
     "@financial-times/o-share": "^10.0.1",
     "@financial-times/o-spacing": "^3.2.3",
     "@financial-times/o-tracking": "^4.5.0",

package/src/client.ts

@@ -2,3 +2,4 @@ export { default as Clip } from './components/Clip/client/index'
 export { default as BackToTopButton } from './components/BackToTopButton/client'
 export { default as FlourishSSREmbed } from './components/Flourish/client/index'
 export { TopperTracker } from './components/Topper/client/index'
+export { default as CustomCodeComponentClient } from './components/CustomCodeComponent/client/index'

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

@@ -36,12 +36,17 @@ const baseContent: ArticleQuery['content'] = {
   },
 }
 
-const extraContentForType: Partial<
-  Record<
-    ArticleQuery['content']['__typename'],
-    Partial<ArticleQuery['content']>
-  >
-> = {
+// these are the only content types we currently care about rendering bodies for
+const typesToTest = [
+  'Article',
+  'Video',
+  'Audio',
+  'LiveBlogPackage',
+  'ContentPackage',
+] satisfies ArticleQuery['content']['__typename'][]
+
+const extraContentForType = {
+  Article: {},
   Audio: {
     __typename: 'Audio',
     media: [
@@ -83,7 +88,10 @@ const extraContentForType: Partial<
   Video: {
     __typename: 'Video',
   },
-}
+} satisfies Record<
+  (typeof typesToTest)[number],
+  Partial<ArticleQuery['content']>
+>
 
 const extraPropsForType: Partial<
   Record<ArticleQuery['content']['__typename'], Record<string, unknown>>
@@ -95,24 +103,15 @@ const extraPropsForType: Partial<
   },
 }
 
-// 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
-][] = [
+const legacyOverridesToTest = [
   ['Article', 'article-body'],
   ['LiveBlogPackage', 'live-blog-body'],
   ['ContentPackage', 'content-package-body'],
   ['Audio', 'podcast-body'],
-]
+] satisfies [
+  ArticleQuery['content']['__typename'],
+  keyof BodyComponentMapRecord
+][]
 
 describe('Body', () => {
   let mockDate: jest.SpyInstance
@@ -128,7 +127,7 @@ describe('Body', () => {
     test.each(typesToTest)('renders default renderer for %s', (type) => {
       const { asFragment } = render(
         <Body
-          content={{ ...baseContent, ...(extraContentForType[type] ?? {}) }}
+          content={{ ...baseContent, ...extraContentForType[type] }}
           {...(extraPropsForType[type] ?? {})}
         />
       )
@@ -143,7 +142,7 @@ describe('Body', () => {
       (type, overrideName) => {
         const { asFragment } = render(
           <Body
-            content={{ ...baseContent, ...(extraContentForType[type] ?? {}) }}
+            content={{ ...baseContent, ...extraContentForType[type] }}
             {...(extraPropsForType[type] ?? {})}
             bodyComponents={{
               [overrideName]: ({
@@ -164,7 +163,7 @@ describe('Body', () => {
     test.each(typesToTest)('renders override renderer for %s', (type) => {
       const { asFragment } = render(
         <Body
-          content={{ ...baseContent, ...(extraContentForType[type] ?? {}) }}
+          content={{ ...baseContent, ...extraContentForType[type] }}
           {...(extraPropsForType[type] ?? {})}
           bodyComponents={{
             [type]: ({ content }: { content: ArticleQuery['content'] }) => (

package/src/components/CustomCodeComponent/client/index.ts

@@ -0,0 +1,121 @@
+type Component = {
+  id: string
+  name: string
+  type: string
+}
+
+type TrackingData = {
+  component: Component
+}
+
+/**
+ * TrackMount
+ * @description Track initial render of a custom code component
+ * @param {HTMLElement} mountElement - The custom code component
+ * @param {TrackingData} trackingData - The specific component data
+ */
+class TrackMount {
+  constructor(
+    private mountElement: Element,
+    private trackingData: TrackingData
+  ) {
+    this.init()
+  }
+
+  private init() {
+    this.mountElement.addEventListener('ccc-connected', () => {
+      new TrackView(this.mountElement as Element, this.trackingData)
+      this.handleMount()
+    })
+  }
+
+  private handleMount = () => {
+    const event = new CustomEvent('oTracking.event', {
+      detail: {
+        category: 'component',
+        action: 'mount',
+        ...this.trackingData,
+      },
+    })
+    document.body.dispatchEvent(event)
+  }
+}
+
+/**
+ * TrackView
+ * @description Track the view of a rendered custom code component
+ * @param {HTMLElement} mountElement - The custom code component
+ * @param {TrackingData} trackingData - The specific component data
+ */
+class TrackView {
+  private observer: IntersectionObserver | undefined
+  constructor(
+    private viewElement: Element,
+    private trackingData: TrackingData
+  ) {
+    this.viewElement = viewElement as Element
+    this.trackingData = trackingData
+    this.init()
+  }
+
+  private init() {
+    //Intersection observer that observes when viewElement is in view
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.handleView()
+          this.observer?.disconnect()
+        }
+      })
+    })
+    this.observer.observe(this.viewElement as Element)
+  }
+
+  private handleView = () => {
+    const event = new CustomEvent('oTracking.event', {
+      detail: {
+        category: 'component',
+        action: 'view',
+        ...this.trackingData,
+      },
+    })
+    document.body.dispatchEvent(event)
+  }
+
+  destroy(): void {
+    this.observer?.disconnect()
+  }
+}
+
+/**
+ * CustomCodeComponentClient
+ * @description Track the view of a rendered custom code component
+ * @param {HTMLElement} el - The custom code component
+ * @param {TrackingData} trackingData - The tracking data
+ */
+class CustomCodeComponentClient {
+  /**
+   * Track the mount of a custom code component
+   */
+  private trackingMount: TrackMount
+
+  constructor(el: Element) {
+    const trackingData = {
+      component: {
+        id: el.getAttribute('id') ?? '',
+        name: el.getAttribute('path') ?? '',
+        type: 'custom-code-component',
+      },
+    }
+    this.trackingMount = new TrackMount(el as Element, trackingData)
+  }
+
+  static init(rootEl?: Element): (CustomCodeComponentClient | undefined)[] {
+    const root = rootEl instanceof Element ? rootEl : document
+    return Array.from(root.querySelectorAll('custom-code-component')).map(
+      (el: Element) => new CustomCodeComponentClient(el)
+    )
+  }
+}
+
+export default CustomCodeComponentClient

package/src/components/CustomCodeComponent/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Message from '../Message'
+import { Layout } from '../Layout'
+import RichText from '../RichText'
+import { ContentProps } from '../types'
+import * as ComponentWorkarounds from '../Workarounds'
+
+interface CustomCodeComponentProps
+  extends ContentProps<ComponentWorkarounds.CustomCodeComponent> {}
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'custom-code-component': {
+        path: string
+        version: string
+        id: string
+        children: React.ReactNode
+      }
+    }
+  }
+}
+
+const CustomCodeComponent: React.FC<
+  React.PropsWithChildren<CustomCodeComponentProps>
+> = ({
+  content: {
+    path,
+    versionRange,
+    id,
+    layoutWidth = 'in-line',
+    attributes = {},
+    body,
+  },
+}: CustomCodeComponentProps) => {
+  return (
+    <Layout
+      content={{ type: 'layout', layoutName: 'auto', layoutWidth: layoutWidth }}
+    >
+      <custom-code-component
+        path={path}
+        version={versionRange}
+        {...attributes}
+        id={id}
+      >
+        <Message id={id} type="notice" state="inform" />
+        {body?.structured && <RichText structuredContent={body.structured} />}
+      </custom-code-component>
+    </Layout>
+  )
+}
+
+export default CustomCodeComponent

package/src/components/Flourish/index.tsx

@@ -2,36 +2,15 @@ import React from 'react'
 import classnames from 'classnames'
 import { ContentProps } from '../types'
 import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
-
-interface disclaimerProps {
-  id: string
-}
-
-const DisclaimerNotice = ({ id }: disclaimerProps) => (
-  <div
-    id={id}
-    className="flourish-disclaimer o-message o-message--alert o-message--neutral"
-    data-o-component="o-message"
-  >
-    <div className="o-message__container">
-      <div className="o-message__content">
-        <p className="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>
-)
+import Message from '../Message'
 
 interface FlourishProps extends ContentProps<ContentTreeWorkarounds.Flourish> {
-  iFrame?: boolean
-  inArticleBody?: boolean
+    iFrame?: boolean
+    inArticleBody?: boolean
 }
 
 const Flourish: React.FC<FlourishProps> = ({
-  content: { id, flourishType, description, layoutWidth, fallbackImage },
+    content: { id, flourishType, description, layoutWidth, fallbackImage },
   iFrame = false,
   inArticleBody = true,
 }) => {
@@ -92,7 +71,7 @@ const Flourish: React.FC<FlourishProps> = ({
             data-flourish-id={id}
             data-flourish-type={flourishType}
           >
-            <DisclaimerNotice id={id} />
+            <Message id={id} type="notice" state="inform" />
             <img
               src={fallbackImage?.url || ''}
               alt={description}

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

@@ -20,7 +20,7 @@ exports[`Flourish component renders ignoring layout different from full-grid 1`]
           data-flourish-type="bar"
         >
           <div
-            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            class="cp-message o-message o-message--inform o-message--notice"
             data-o-component="o-message"
             id="123"
           >
@@ -33,7 +33,7 @@ exports[`Flourish component renders ignoring layout different from full-grid 1`]
                 <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.
+                  Some content could not load. Check your internet connection or browser settings.
                 </p>
               </div>
             </div>
@@ -72,7 +72,7 @@ exports[`Flourish component renders with a full-grid layout and fallback image 1
           data-flourish-type="bar"
         >
           <div
-            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            class="cp-message o-message o-message--inform o-message--notice"
             data-o-component="o-message"
             id="123"
           >
@@ -85,7 +85,7 @@ exports[`Flourish component renders with a full-grid layout and fallback image 1
                 <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.
+                  Some content could not load. Check your internet connection or browser settings.
                 </p>
               </div>
             </div>
@@ -129,7 +129,7 @@ exports[`Flourish component renders with an iframe rather than using the embed s
           data-flourish-type="bar"
         >
           <div
-            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            class="cp-message o-message o-message--inform o-message--notice"
             data-o-component="o-message"
             id="123"
           >
@@ -142,7 +142,7 @@ exports[`Flourish component renders with an iframe rather than using the embed s
                 <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.
+                  Some content could not load. Check your internet connection or browser settings.
                 </p>
               </div>
             </div>
@@ -181,7 +181,7 @@ exports[`Flourish component renders without n-content-layout class for charts no
           data-flourish-type="bar"
         >
           <div
-            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            class="cp-message o-message o-message--inform o-message--notice"
             data-o-component="o-message"
             id="123"
           >
@@ -194,7 +194,7 @@ exports[`Flourish component renders without n-content-layout class for charts no
                 <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.
+                  Some content could not load. Check your internet connection or browser settings.
                 </p>
               </div>
             </div>
@@ -234,7 +234,7 @@ exports[`does not set aspect ratios when in article body 1`] = `
           data-flourish-type="bar"
         >
           <div
-            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            class="cp-message o-message o-message--inform o-message--notice"
             data-o-component="o-message"
             id="123"
           >
@@ -247,7 +247,7 @@ exports[`does not set aspect ratios when in article body 1`] = `
                 <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.
+                  Some content could not load. Check your internet connection or browser settings.
                 </p>
               </div>
             </div>
@@ -291,7 +291,7 @@ exports[`sets the hideTitle param in the iframe url to true when not in article
           data-flourish-type="bar"
         >
           <div
-            class="flourish-disclaimer o-message o-message--alert o-message--neutral"
+            class="cp-message o-message o-message--inform o-message--notice"
             data-o-component="o-message"
             id="123"
           >
@@ -304,7 +304,7 @@ exports[`sets the hideTitle param in the iframe url to true when not in article
                 <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.
+                  Some content could not load. Check your internet connection or browser settings.
                 </p>
               </div>
             </div>

package/src/components/Layout/index.tsx

@@ -2,7 +2,7 @@ import { ContentTree } from '@financial-times/content-tree'
 import React from 'react'
 import { ContentProps } from '../types'
 
-interface LayoutProps extends ContentProps<ContentTree.transit.Layout> {}
+interface LayoutProps extends ContentProps<Omit<ContentTree.transit.Layout, 'children'>> {}
 
 /*
  * @description Layout component is used to define the layout for content. It can be used with ContentTree Layout Nodes or as a static layout.

package/src/components/Message/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export type MessageProps = {
+  id: string
+  type?: string
+  state?: string
+  text?: string
+}
+
+const Message: React.FC<MessageProps> = ({
+  id,
+  type,
+  state,
+  text = 'Some content could not load. Check your internet connection or browser settings.',
+}) => {
+  return (
+    <div
+      id={id}
+      className={classnames('cp-message', 'o-message', {
+        [`o-message--${state}`]: state,
+        [`o-message--${type}`]: type,
+      })}
+      data-o-component="o-message"
+    >
+      <div className="o-message__container">
+        <div className="o-message__content">
+          <p className="o-message__content-main">{text}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Message

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message component renders default 1`] = `
+<div
+  className="cp-message o-message o-message--neutral o-message--alert"
+  data-o-component="o-message"
+  id="aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
+>
+  <div
+    className="o-message__container"
+  >
+    <div
+      className="o-message__content"
+    >
+      <p
+        className="o-message__content-main"
+      >
+        Some content could not load. Check your internet connection or browser settings.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Message component renders with custom text 1`] = `
+<div
+  className="cp-message o-message o-message--neutral o-message--alert"
+  data-o-component="o-message"
+  id="aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
+>
+  <div
+    className="o-message__container"
+  >
+    <div
+      className="o-message__content"
+    >
+      <p
+        className="o-message__content-main"
+      >
+        This is a custom message
+      </p>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Message from '../index'
+
+describe('Message component', () => {
+  it('renders default', () => {
+    const tree = renderer
+      .create(
+        <Message
+          id={'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa'}
+          type="alert"
+          state="neutral"
+        />
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders with custom text', () => {
+    const tree = renderer
+      .create(
+        <Message
+          id={'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa'}
+          type="alert"
+          state="neutral"
+          text="This is a custom message"
+        />
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/components/PartnerContentHeader/index.tsx

@@ -3,18 +3,16 @@ import { TooltipToggle } from '@financial-times/o3-tooltip'
 
 const PartnerContentHeader = ({ name = 'Partner' }: { name: string }) => {
   return (
-    <div className="partner-content-header">
+    <div className="partner-content-header" data-o3-brand="core">
       <div className="partner-content-header__content">
         <div className="partner-content-header__client">{name}</div>
         <div className="partner-content-header__title">
           <p>Partner Content</p>
-          <div data-o3-brand="core">
-            <TooltipToggle
-              placement="bottom"
-              content={`This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`}
-              infoLabel="More information on Partner Content"
-            />
-          </div>
+          <TooltipToggle
+            placement="bottom"
+            content={`This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`}
+            infoLabel="More information on Partner Content"
+          />
         </div>
       </div>
     </div>

package/src/components/RichText/BasicComponents.tsx

@@ -50,6 +50,10 @@ export const Strikethrough: React.FC<
   React.PropsWithChildren<ContentProps<ContentTree.Strikethrough>>
 > = (props) => <s>{props.children}</s>
 
+export const CccFallbackText: React.FC<
+  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.CccFallbackText>>
+> = (props) => <div>{props.children}</div>
+
 export const TableRow: React.FC<
   React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableRow>>
 > = (props) => <tr>{props.children}</tr>