@financial-times/cp-content-pipeline-ui 9.8.0 → 9.10.0

package/src/components/Topper/index.tsx

@@ -5,7 +5,7 @@ import Headline from './Headline'
 import Intro from './Intro'
 import Picture from './Picture'
 import Headshot from '../Headshot'
-import Columnist from './Columnist'
+import Columnists from './Columnists'
 import LiveBlogIndicator from './LiveBlogIndicator'
 import { FollowButtonSlot } from './FollowButtonSlot'
 import Flourish from '../content-tree/Flourish'
@@ -65,7 +65,18 @@ const Topper: React.FC<TopperProps> = ({
   const hasLayoutWidth = 'layoutWidth' in topper && topper.layoutWidth
   const hasDesign = 'design' in topper && topper.design
   const hasHeadshot = 'headshot' in topper && topper.headshot
-  const hasColumnist = 'columnist' in topper && !!topper.columnist
+  const hasColumnists =
+    'columnists' in topper &&
+    !!topper.columnists &&
+    topper.columnists.length > 0
+  const legacyHasColumnist = 'columnist' in topper && !!topper.columnist // @deprecated Replaced with usage of `columinists`
+  const hasOneColumnist =
+    (hasColumnists && topper.columnists.length === 1) || legacyHasColumnist
+  const oneColumnist = hasOneColumnist
+    ? hasColumnists
+      ? topper.columnists[0]
+      : topper.columnist
+    : null
   const sponsorName = 'clientName' in content && content.clientName
   const disclaimerType = isArticle ? content.disclaimerType : undefined
 
@@ -81,8 +92,8 @@ const Topper: React.FC<TopperProps> = ({
     modifiers.push(topper.layoutWidth === 'full-grid' ? 'full-grid' : 'in-line')
 
   const headshotAltText =
-    isOpinion && topper.columnist
-      ? `Headshot for ${topper.columnist.prefLabel}`
+    isOpinion && oneColumnist
+      ? `Headshot for ${oneColumnist.prefLabel}`
       : isPodcast
       ? 'Cover photo for podcast'
       : ''
@@ -161,7 +172,7 @@ const Topper: React.FC<TopperProps> = ({
                   ('genreConcept' in topper && topper.genreConcept) || undefined
                 }
                 headshot={hasHeadshot || undefined}
-                hasColumnist={hasColumnist}
+                hasColumnists={hasColumnists}
                 followButtonVariant={topper.followButtonVariant}
                 FollowButtonSlot={followButtonSlot}
               />
@@ -197,19 +208,19 @@ const Topper: React.FC<TopperProps> = ({
                 source={topper.intro.source}
               />
             )}
-            {hasHeadshot && !isAudio && isOpinion && topper.columnist && (
+            {hasHeadshot && !isAudio && isOpinion && oneColumnist && (
               <div className="o-topper__headshot">
                 <Headshot
                   headshot={topper.headshot}
-                  prefLabel={topper.columnist.prefLabel}
+                  prefLabel={oneColumnist.prefLabel}
                   className={'o-topper__headshot-image'}
                   altText={headshotAltText}
                 />
               </div>
             )}
-            {isOpinion && topper.columnist && (
-              <Columnist
-                authorConcept={topper.columnist}
+            {isOpinion && hasColumnists && (
+              <Columnists
+                authorConcepts={[...topper.columnists]}
                 followButtonVariant={topper.followButtonVariant}
                 followButtonSlot={followButtonSlot}
               />

package/src/components/content-tree/RecommendedList/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+//HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
+import { presets, Teaser } from '@financial-times/x-teaser'
+import { ContentProps } from '../../types'
+import type * as ComponentWorkarounds from '../Workarounds'
+
+// Renders a Recommended teaser component
+// `<Teaser>` is imported from x-dash
+// https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
+
+interface RecommendedListProps
+  extends ContentProps<ComponentWorkarounds.RecommendedList> {}
+
+const RecommendedList: React.FC<RecommendedListProps> = ({
+  content: { heading, teasers },
+}) => {
+  if (!teasers || teasers.length === 0) {
+    return null
+  }
+
+  return (
+    <aside
+      aria-labelledby="aside-label"
+      className="n-content-recommended-list"
+      data-component="recommended-list"
+    >
+      <p className="n-content-recommended-list__title o3-type-title-lg">
+        {heading}
+      </p>
+      <div className="n-content-recommended-list__teasers">
+        {teasers.map((teaser, index) => (
+          <Teaser
+            key={teaser?.id || index}
+            modifiers={['stacked']}
+            {...presets.SmallHeavy}
+            {...teaser}
+            metaPrefixText={'By'}
+            metaLink={{
+              prefLabel: teaser?.clientName,
+              // clientName is a free form text field. Currently, there is no way to map it to an organisation
+              // from the annotations. For now, we're linking it to the article url.
+              // A property like isSponsoredBy could be added in future to support this properly.
+              url: teaser?.url,
+            }}
+          />
+        ))}
+      </div>
+    </aside>
+  )
+}
+
+export default RecommendedList

package/src/components/content-tree/Workarounds.ts

@@ -87,11 +87,21 @@ export type Teaser = PartialToMaybeDeep<
 >
 
 export type Recommended = PartialToMaybe<
-  ContentTreeWorkarounds.Recommended & {
+ContentTreeWorkarounds.Recommended & {
     teaser?: Teaser
   }
 >
 
+export type RecommendedList = PartialToMaybe<
+  ReadonlyArrays<
+    Omit<ContentTree.RecommendedList, 'children'> & {
+    teasers?: (Teaser | null)[]
+    children: Recommended[]
+  }
+  >
+
+>
+
 export type ImageSetPicture = PartialToMaybe<
   ReadonlyArrays<
     SetOptional<

package/src/index.ts

@@ -24,6 +24,7 @@ export {
 export { default as Paragraph } from './components/content-tree/Paragraph'
 export { default as Pullquote } from './components/content-tree/Pullquote/index'
 export { default as Recommended } from './components/content-tree/Recommended'
+export { default as RecommendedList } from './components/content-tree/RecommendedList'
 export { ScrollyBlock } from './components/content-tree/Scrollytelling'
 export { default as Table } from './components/content-tree/Table'
 export { default as Tweet } from './components/content-tree/Tweet'