@financial-times/cp-content-pipeline-ui 6.14.1 → 6.15.0

package/src/stories/Expander.stories.tsx

@@ -1,67 +1,241 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ExpanderServer, ExpanderProps } from '../components/Expander'
 import { ExpanderClient } from '../components/Expander/client'
 import React, { useEffect } from 'react'
 import oTracking from '@financial-times/o-tracking/main'
 import './Expander.stories.scss'
 import ClipClient from '../components/Clip/client'
-import './Clip.stories.scss'
 import RichText from '../components/RichText'
 import { ContentTree } from '@financial-times/content-tree'
-import { ClipSet } from '@financial-times/cp-content-pipeline-schema/src/resolvers/content-tree/Workarounds'
 
-const structuredContent: ContentTree.Body = {
-  type: 'body',
-  version: 1,
-  children: [
-    {
-      type: 'paragraph',
-      children: [
-        {
-          type: 'text',
-          value:
-            'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+type ArgsType = ExpanderProps & { structuredContent: any; classNames?: string }
+
+const structuredContent = {
+  tree: {
+    type: 'body',
+    version: 1,
+    children: [
+      {
+        type: 'image-set',
+        id: 'http://api.ft.com/content/57b3150f-434e-4463-a863-3311d53bf5c2',
+        data: {
+          referenceIndex: 0,
         },
-      ],
-    } as ContentTree.Paragraph,
+      } as ContentTree.ImageSet,
+      {
+        type: 'paragraph',
+        children: [
+          {
+            type: 'text',
+            value:
+              'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+          },
+        ],
+      } as ContentTree.Paragraph,
+      {
+        type: 'paragraph',
+        children: [
+          {
+            type: 'text',
+            value:
+              'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
+          },
+        ],
+      } as ContentTree.Paragraph,
+      ,
+      {
+        type: 'paragraph',
+        children: [
+          {
+            type: 'text',
+            value:
+              'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
+          },
+        ],
+      } as ContentTree.Paragraph,
+      {
+        id: 'http://api.ft.com/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+        type: 'recommended',
+        heading: 'Recommended',
+        teaserTitleOverride:
+          'Hargreaves Lansdown backs £5.4bn private equity takeover ',
+        data: {
+          referenceIndex: 1,
+        },
+      },
+    ] as ContentTree.Body['children'],
+  },
+  references: [
     {
-      type: 'paragraph',
-      children: [
-        {
-          type: 'text',
-          value:
-            'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
+      type: 'image-set',
+      picture: {
+        __typename: 'PictureStandard',
+        alt: 'A Waitrose shop in London ',
+        caption:
+          'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+        credit: '© Ian Smith/FT',
+        imageType: 'image',
+        layoutWidth: 'standard',
+        fallbackImage: {
+          __typename: 'ImageStandardInline',
+          height: 1368,
+          width: 1600,
+          caption:
+            'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+          credit: '© Ian Smith/FT',
+          format: 'standard-inline',
+          url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+          id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
         },
-      ],
-    } as ContentTree.Paragraph,
-    ,
+        images: [
+          {
+            __typename: 'ImageStandardInline',
+            height: 1368,
+            width: 1600,
+            caption:
+              'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+            credit: '© Ian Smith/FT',
+            format: 'standard-inline',
+            url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+            id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
+            sourceSet: [
+              {
+                dpr: 1,
+                width: 700,
+                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+              },
+              {
+                dpr: 2,
+                width: 700,
+                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=2',
+              },
+            ],
+          },
+        ],
+      },
+    },
     {
-      type: 'paragraph',
-      children: [
-        {
-          type: 'text',
-          value:
-            'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
+      type: 'recommended',
+      isInLiveBlog: true,
+      teaser: {
+        title: 'Hargreaves Lansdown backs £5.4bn private equity takeover ',
+        id: '02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+        url: 'https://www.ft.com/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+        relativeUrl: '/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
+        type: 'article',
+        publishedDate: '2024-06-18T15:25:49.739Z',
+        firstPublishedDate: '2024-06-18T13:49:35.049Z',
+        metaPrefixText: null,
+        metaSuffixText: null,
+        metaLink: {
+          id: '4d1b8529-f8a3-4740-97e6-4a6f68214092',
+          url: 'https://www.ft.com/stream/4d1b8529-f8a3-4740-97e6-4a6f68214092',
+          relativeUrl: '/stream/4d1b8529-f8a3-4740-97e6-4a6f68214092',
+          prefLabel: 'Hargreaves Lansdown PLC',
+        },
+        metaAltLink: null,
+        image: {
+          url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F409586da-1e01-42d8-b4e6-cd99b82923b3.jpg?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+          width: 2266,
+          height: 1275,
+          altText: 'Hargreaves Lansdown logo',
         },
-      ],
-    } as ContentTree.Paragraph,
+        indicators: {
+          accessLevel: 'subscribed',
+          isOpinion: false,
+          isColumn: false,
+          isPodcast: false,
+          isEditorsChoice: false,
+          isExclusive: false,
+          isScoop: false,
+        },
+      },
+    },
+  ],
+}
+
+const structuredContentNoMoreElements = {
+  tree: {
+    type: 'body',
+    version: 1,
+    children: [
+      {
+        type: 'image-set',
+        id: 'http://api.ft.com/content/57b3150f-434e-4463-a863-3311d53bf5c2',
+        data: {
+          referenceIndex: 0,
+        },
+      } as ContentTree.ImageSet,
+      {
+        type: 'paragraph',
+        children: [
+          {
+            type: 'text',
+            value:
+              'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+          },
+        ],
+      } as ContentTree.Paragraph,
+    ],
+  },
+  references: [
     {
-      type: 'clip-set',
-      id: 'http://api.ft.com/content/23a00095-d9fc-4cac-ad7c-477e61e3c159',
-      autoplay: false,
-      loop: false,
-      muted: false,
-      dataLayout: 'in-line',
-      data: {
-        referenceIndex: 3,
+      type: 'image-set',
+      picture: {
+        __typename: 'PictureStandard',
+        alt: 'A Waitrose shop in London ',
+        caption:
+          'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+        credit: '© Ian Smith/FT',
+        imageType: 'image',
+        layoutWidth: 'standard',
+        fallbackImage: {
+          __typename: 'ImageStandardInline',
+          height: 1368,
+          width: 1600,
+          caption:
+            'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+          credit: '© Ian Smith/FT',
+          format: 'standard-inline',
+          url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+          id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
+        },
+        images: [
+          {
+            __typename: 'ImageStandardInline',
+            height: 1368,
+            width: 1600,
+            caption:
+              'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
+            credit: '© Ian Smith/FT',
+            format: 'standard-inline',
+            url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+            id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
+            sourceSet: [
+              {
+                dpr: 1,
+                width: 700,
+                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
+              },
+              {
+                dpr: 2,
+                width: 700,
+                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=next-article&fit=scale-down&quality=highest&width=700&dpr=2',
+              },
+            ],
+          },
+        ],
       },
-    } as ClipSet,
-  ] as ContentTree.Body['children'],
+    },
+  ],
 }
-const storyArgs: ExpanderProps = {
+
+const storyArgs: ArgsType = {
   expandLabel: 'Open',
   collapseLabel: 'Close',
   onlyMobile: false,
   id: '111232323-12123-2323',
+  structuredContent: structuredContent,
 }
 
 export default {
@@ -70,9 +244,7 @@ export default {
   tags: ['autodocs'],
 }
 
-const LiveBLogWrapper: React.FC<ExpanderProps & { classNames?: string }> = (
-  args
-) => {
+const LiveBLogWrapper: React.FC<ArgsType> = (args) => {
   const { classNames } = args
 
   return (
@@ -102,7 +274,8 @@ const LiveBLogWrapper: React.FC<ExpanderProps & { classNames?: string }> = (
   )
 }
 
-const LiveBlogPostWrapper = (args: ExpanderProps) => {
+const LiveBlogPostWrapper = (args: ArgsType) => {
+  const { structuredContent, ...expanderProps } = args
   useEffect(() => {
     oTracking.init({
       context: { product: 'next' },
@@ -123,8 +296,8 @@ const LiveBlogPostWrapper = (args: ExpanderProps) => {
           data-trackable-context-post="1234"
           data-component="example-boundary"
         >
-          <ExpanderServer {...args} id={`${args.id}_expander`}>
-            <RichText structuredContent={{ tree: structuredContent }} />
+          <ExpanderServer {...expanderProps} id={`${args.id}_expander`}>
+            <RichText structuredContent={structuredContent} />
           </ExpanderServer>
         </div>
       </div>
@@ -132,13 +305,13 @@ const LiveBlogPostWrapper = (args: ExpanderProps) => {
   )
 }
 
-export const OnlyServer = (args: ExpanderProps) => {
+export const OnlyServer = (args: ArgsType) => {
   return <LiveBLogWrapper {...args} />
 }
 
 OnlyServer.args = { ...storyArgs }
 
-export const WithClient = (args: ExpanderProps) => {
+export const WithClient = (args: ArgsType) => {
   useEffect(() => {
     const clips = ClipClient.init(null, {})
     const expanders = ExpanderClient.init()
@@ -157,3 +330,10 @@ OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true }
 
 export const OnlyMobileServer = OnlyServer
 OnlyMobileServer.args = { ...storyArgs, onlyMobile: true }
+
+export const NoMoreElements = (args: any) => {
+  return WithClient({
+    ...args,
+    structuredContent: structuredContentNoMoreElements,
+  })
+}

package/src/stories/article-page.scss

@@ -18,6 +18,7 @@ $o-typography-load-fonts: false;
 @import '@financial-times/o-icons/main';
 @import "@financial-times/o-colors/main";
 @import "@financial-times/o-spacing/main";
+@import "@financial-times/o-teaser/main";
 // HACK: n-content-body _should not_ include n-ui-foundations
 $n-ui-foundations-is-silent: true;
 @import '@financial-times/cp-content-pipeline-styles/main';
@@ -321,4 +322,23 @@ $desktop-breakpoint: 980px;
     display: none;
 }
 
-@include oIcons($opts: ('icons': ('warning-alt')));
+@include oIcons($opts: ('icons': ('warning-alt')));
+@include oTeaser(
+	$opts: (
+		'elements': (
+			'default',
+			'images',
+			'timestamp',
+			'syndication',
+			'promoted'
+		),
+		'themes': (
+			'standard',
+			'small',
+			'audio',
+			'large',
+			'hero',
+			'package'
+		)
+	)
+);

package/src/stories/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "noImplicitAny": false 
+      }
+  }
+