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

package/src/components/RichText/BasicComponents.tsx

@@ -2,54 +2,59 @@ import React from 'react'
 import type { ContentTree } from '@financial-times/content-tree'
 import type { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 
-export const List = (props: React.PropsWithChildren<ContentTree.List>) =>
-  props.ordered ? <ol>{props.children}</ol> : <ul>{props.children}</ul>
+export const List: React.FC<React.PropsWithChildren<ContentTree.List>> = (
+  props
+) => (props.ordered ? <ol>{props.children}</ol> : <ul>{props.children}</ul>)
 
-export const ListItem = (
-  props: React.PropsWithChildren<ContentTree.ListItem>
-) => <li>{props.children}</li>
+export const ListItem: React.FC<
+  React.PropsWithChildren<ContentTree.ListItem>
+> = (props) => <li>{props.children}</li>
 
-export const Link = (props: React.PropsWithChildren<ContentTree.Link>) => (
+export const Link: React.FC<React.PropsWithChildren<ContentTree.Link>> = (
+  props
+) => (
   <a href={props.url} title={props.title}>
     {props.children}
   </a>
 )
 
-export const Blockquote = (
-  props: React.PropsWithChildren<ContentTree.Blockquote>
-) => {
+export const Blockquote: React.FC<
+  React.PropsWithChildren<ContentTree.Blockquote>
+> = (props) => {
   return (
     <blockquote className="n-content-blockquote">{props.children}</blockquote>
   )
 }
 
-export const Cite = (props: React.PropsWithChildren<ContentTree.Phrasing>) => {
+export const Cite: React.FC<React.PropsWithChildren<ContentTree.Phrasing>> = (
+  props
+) => {
   return <cite>{props.children}</cite>
 }
 
-export const LineBreak = () => <br />
+export const LineBreak: React.FC = () => <br />
 
-export const HorizontalRule = () => <hr />
+export const HorizontalRule: React.FC = () => <hr />
 
-export const Emphasis = (
-  props: React.PropsWithChildren<ContentTree.Emphasis>
-) => <em>{props.children}</em>
+export const Emphasis: React.FC<
+  React.PropsWithChildren<ContentTree.Emphasis>
+> = (props) => <em>{props.children}</em>
 
-export const Strong = (props: React.PropsWithChildren<ContentTree.Strong>) => (
-  <strong>{props.children}</strong>
-)
+export const Strong: React.FC<React.PropsWithChildren<ContentTree.Strong>> = (
+  props
+) => <strong>{props.children}</strong>
 
-export const Strikethrough = (
-  props: React.PropsWithChildren<ContentTree.Strikethrough>
-) => <s>{props.children}</s>
+export const Strikethrough: React.FC<
+  React.PropsWithChildren<ContentTree.Strikethrough>
+> = (props) => <s>{props.children}</s>
 
-export const TableRow = (
-  props: React.PropsWithChildren<ContentTreeWorkarounds.TableRow>
-) => <tr>{props.children}</tr>
+export const TableRow: React.FC<
+  React.PropsWithChildren<ContentTreeWorkarounds.TableRow>
+> = (props) => <tr>{props.children}</tr>
 
-export const TableFooter = (
-  props: React.PropsWithChildren<ContentTreeWorkarounds.TableFooter>
-) => (
+export const TableFooter: React.FC<
+  React.PropsWithChildren<ContentTreeWorkarounds.TableFooter>
+> = (props) => (
   <tfoot>
     <tr>
       <td colSpan={1000} className="o-table-footnote">
@@ -59,9 +64,9 @@ export const TableFooter = (
   </tfoot>
 )
 
-export const TableCaption = (
-  props: React.PropsWithChildren<ContentTreeWorkarounds.TableCaption>
-) => (
+export const TableCaption: React.FC<
+  React.PropsWithChildren<ContentTreeWorkarounds.TableCaption>
+> = (props) => (
   <caption className="n-content-body__caption n-content-body__caption--auto">
     {props.children}
   </caption>

package/src/components/RichText/index.tsx

@@ -123,16 +123,18 @@ function isParentNode(
   return 'children' in node
 }
 
-const RichTextChild = ({
-  node,
-  components,
-  references,
-  parentIndex,
-}: {
+type RichTextChildProps = {
   node: ContentTreeWorkarounds.AnyNode
   components: RichTextComponentMapRecord
   references: StructuredContentFragment['references']
   parentIndex: number
+}
+
+const RichTextChild: React.FC<RichTextChildProps> = ({
+  node,
+  components,
+  references,
+  parentIndex,
 }) => {
   if (node.type === 'text') {
     return <>{node.value}</>
@@ -175,10 +177,10 @@ const RichTextChild = ({
   return null
 }
 
-export default function RichText({
+const RichText: React.FC<RichTextProps> = ({
   structuredContent,
   components,
-}: RichTextProps) {
+}) => {
   if (!structuredContent) {
     return null
   }
@@ -205,3 +207,5 @@ export default function RichText({
     </>
   )
 }
+
+export default RichText

package/src/components/Scrollytelling/ScrollyImage.tsx

@@ -25,9 +25,9 @@ const scrollyGetBreakpoints: BreakpointGetter = (image) => {
   }
 }
 
-export function ScrollyImage({
-  picture,
-}: ContentTree.ScrollyImage & ScrollyImageFragment) {
+export const ScrollyImage: React.FC<
+  ContentTree.ScrollyImage & ScrollyImageFragment
+> = ({ picture }) => {
   const scrollyId = useContext(ScrollyIDContext)
 
   if (!picture?.images) {
@@ -61,4 +61,4 @@ export function ScrollyImage({
       )}
     </figure>
   )
-}
+}

package/src/components/Scrollytelling/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, createContext, useContext } from 'react'
+import React, { createContext, useContext } from 'react'
 import type { ContentTree } from '@financial-times/content-tree'
 import classnames from 'classnames'
 import type scrollytelling from '@financial-times/n-scrollytelling-image/server'
@@ -6,8 +6,8 @@ import { ParagraphContext } from '../Paragraph'
 
 export const ScrollyIDContext = createContext<string | null>(null)
 
-export const ScrollyBlock: FC<
-  PropsWithChildren<Omit<ContentTree.ScrollyBlock, 'children'>> & {
+export const ScrollyBlock: React.FC<
+  React.PropsWithChildren<Omit<ContentTree.ScrollyBlock, 'children'>> & {
     parentIndex: number
   }
 > = ({ children, theme, parentIndex }) => (
@@ -42,8 +42,8 @@ type ScrollySectionOptions = Pick<
 const ScrollySectionOptionsContext =
   createContext<ScrollySectionOptions | null>(null)
 
-export const ScrollySection: FC<
-  PropsWithChildren<ContentTree.ScrollySection>
+export const ScrollySection: React.FC<
+  React.PropsWithChildren<ContentTree.ScrollySection>
 > = ({ children, display, noBox, position, transition }) => (
   <ScrollySectionOptionsContext.Provider
     value={{ display, noBox, position, transition }}
@@ -55,9 +55,9 @@ export const ScrollySection: FC<
 type ScrollytellingDisplaySuffix =
   scrollytelling.ScrollytellingOptionsMap['display'][keyof scrollytelling.ScrollytellingOptionsMap['display']]
 
-export const ScrollyCopy: FC<PropsWithChildren<ContentTree.ScrollyCopy>> = ({
-  children,
-}) => {
+export const ScrollyCopy: React.FC<
+  React.PropsWithChildren<ContentTree.ScrollyCopy>
+> = ({ children }) => {
   const { display, noBox, position, transition } = useContext(
     ScrollySectionOptionsContext
   ) ?? {
@@ -100,8 +100,8 @@ export const ScrollyCopy: FC<PropsWithChildren<ContentTree.ScrollyCopy>> = ({
   )
 }
 
-export const ScrollyHeading: FC<
-  PropsWithChildren<ContentTree.ScrollyHeading>
+export const ScrollyHeading: React.FC<
+  React.PropsWithChildren<ContentTree.ScrollyHeading>
 > = ({ children, level }) => {
   const classNames = classnames(
     'n-scrollytelling__overlay-text',

package/src/components/Table/TableBody.tsx

@@ -1,9 +1,9 @@
 import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 import React from 'react'
 
-export default function TableBody({
-  children,
-}: React.PropsWithChildren<ContentTreeWorkarounds.TableBody>) {
+const TableBody: React.FC<
+  React.PropsWithChildren<ContentTreeWorkarounds.TableBody>
+> = ({ children }) => {
   const [headerRow, ...bodyRows] = React.Children.toArray(children)
 
   return (
@@ -13,3 +13,5 @@ export default function TableBody({
     </>
   )
 }
+
+export default TableBody

package/src/components/Table/TableCell.tsx

@@ -3,11 +3,11 @@ import type { ContentTreeWorkarounds } from '@financial-times/cp-content-pipelin
 import { ColumnSettingsContext } from '.'
 import classNames from 'classnames'
 
-export const TableCell = (
-  props: React.PropsWithChildren<ContentTreeWorkarounds.TableCell> & {
+type TableCellProps =
+  React.PropsWithChildren<ContentTreeWorkarounds.TableCell> & {
     parentIndex: number
   }
-) => {
+export const TableCell: React.FC<TableCellProps> = (props) => {
   const allColumnSettings = useContext(ColumnSettingsContext)
   const columnSettings: ContentTreeWorkarounds.TableColumnSettings =
     allColumnSettings[props.parentIndex] ?? {

package/src/components/Table/index.tsx

@@ -6,7 +6,9 @@ export const ColumnSettingsContext = createContext<
   ContentTreeWorkarounds.TableColumnSettings[]
 >([])
 
-export default function Table({
+const Table: React.FC<
+  React.PropsWithChildren<ContentTreeWorkarounds.Table>
+> = ({
   children,
   compact,
   layoutWidth,
@@ -14,7 +16,7 @@ export default function Table({
   responsiveStyle,
   columnSettings,
   collapseAfterHowManyRows,
-}: React.PropsWithChildren<ContentTreeWorkarounds.Table>) {
+}) => {
   return (
     <ColumnSettingsContext.Provider value={columnSettings}>
       <div
@@ -53,3 +55,5 @@ export default function Table({
     </ColumnSettingsContext.Provider>
   )
 }
+
+export default Table

package/src/components/Topper/Columnist.tsx

@@ -13,11 +13,11 @@ type ColumnistProps = {
   followButtonSlot?: FollowButtonSlot
 }
 
-export default function Columnist({
+const Columnist: React.FC<ColumnistProps> = ({
   authorConcept,
   followButtonVariant,
   followButtonSlot,
-}: ColumnistProps) {
+}) => {
   return (
     <div className="o-topper__columnist">
       <a
@@ -36,3 +36,5 @@ export default function Columnist({
     </div>
   )
 }
+
+export default Columnist

package/src/components/Topper/Headline.tsx

@@ -7,11 +7,11 @@ type HeadlineProps = {
   isLargeHeadline?: boolean
 }
 
-export default function Headline({
+const Headline: React.FC<HeadlineProps> = ({
   headline,
   showPremiumLabel = false,
   isLargeHeadline = false,
-}: HeadlineProps) {
+}) => {
   if (!headline) {
     return <></>
   }
@@ -32,3 +32,5 @@ export default function Headline({
     </h1>
   )
 }
+
+export default Headline

package/src/components/Topper/Intro.tsx

@@ -3,7 +3,7 @@ import RichText from '../RichText'
 import type { IntroFragment } from '@financial-times/cp-content-pipeline-client'
 import classNames from 'classnames'
 
-export default function Intro({ structured, source }: IntroFragment) {
+const Intro: React.FC<IntroFragment> = ({ structured, source }) => {
   return (
     <div
       className={classNames(`o-topper__${source}`, {
@@ -14,3 +14,5 @@ export default function Intro({ structured, source }: IntroFragment) {
     </div>
   )
 }
+
+export default Intro

package/src/components/Topper/LiveBlogIndicator.tsx

@@ -13,10 +13,10 @@ type LiveBlogIndicatorProps = {
   realtime?: boolean
   lastUpdatedDateTime: string
 }
-export default function LiveBlogIndicator({
+const LiveBlogIndicator: React.FC<LiveBlogIndicatorProps> = ({
   realtime,
   lastUpdatedDateTime,
-}: LiveBlogIndicatorProps) {
+}) => {
   const liveBlogStatus = realtime ? 'live' : 'closed'
   const indicatorStatusClasses = classnames(
     'o-labels-indicator',
@@ -52,3 +52,5 @@ export default function LiveBlogIndicator({
     </div>
   )
 }
+
+export default LiveBlogIndicator

package/src/components/Topper/Picture.tsx

@@ -4,11 +4,6 @@ import type { TopperFragment } from '@financial-times/cp-content-pipeline-client
 
 import { AliasedBreakpoints, BreakpointGetter, Sources } from '../ImageSet'
 
-type PictureProps = {
-  topper: TopperFragment
-  alt?: string
-}
-
 const topperGetBreakpointsMap: Partial<
   Record<TopperFragment['__typename'], BreakpointGetter>
 > = {
@@ -69,7 +64,12 @@ const topperGetBreakpointsMap: Partial<
   },
 }
 
-export default function Picture({ topper, alt = '' }: PictureProps) {
+type PictureProps = {
+  topper: TopperFragment
+  alt?: string
+}
+
+const Picture: React.FC<PictureProps> = ({ topper, alt = '' }) => {
   if (!('images' in topper) || !topper.fallbackImage) {
     return null
   }
@@ -105,3 +105,5 @@ export default function Picture({ topper, alt = '' }: PictureProps) {
     </figure>
   )
 }
+
+export default Picture

package/src/components/Topper/Tags.tsx

@@ -18,7 +18,7 @@ type TagsProps = {
   headshot?: string
 }
 
-export default function Tags({
+const Tags: React.FC<TagsProps> = ({
   __typename,
   isPackage,
   displayConcept,
@@ -28,7 +28,7 @@ export default function Tags({
   followButtonVariant,
   headshot,
   FollowButtonSlot,
-}: TagsProps) {
+}) => {
   const isOpinion = __typename === 'OpinionTopper'
   const concept = getConcept(displayConcept, genreConcept)
   const baseFollowButtonCondition = FollowButtonSlot && concept?.id
@@ -87,7 +87,7 @@ function getConcept(
   return null
 }
 
-function BrandConcept(concept: ConceptFragment) {
+const BrandConcept: React.FC<ConceptFragment> = (concept) => {
   return (
     <a
       href={concept.relativeUrl ?? undefined}
@@ -100,7 +100,7 @@ function BrandConcept(concept: ConceptFragment) {
   )
 }
 
-function ConceptLabel(concept: ConceptFragment) {
+const ConceptLabel: React.FC<ConceptFragment> = (concept) => {
   return (
     <a
       href={concept.relativeUrl}
@@ -113,3 +113,5 @@ function ConceptLabel(concept: ConceptFragment) {
     </a>
   )
 }
+
+export default Tags

package/src/components/Topper/Wrapper.tsx

@@ -1,20 +1,19 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 type WrapperProps = {
-  children: ReactNode
   isPackage?: boolean
   isBasic?: boolean
   modifiers: string[]
   backgroundColor?: string
 }
 
-export default function Wrapper({
+const Wrapper: React.FC<React.PropsWithChildren<WrapperProps>> = ({
   children,
   isBasic,
   modifiers = [],
   backgroundColor,
-}: WrapperProps) {
+}) => {
   const modifierClasses = modifiers.map((modifier) => `o-topper--${modifier}`)
   const modifierClassesString = modifierClasses.toString().replace(/,/g, ' ')
 
@@ -28,3 +27,5 @@ export default function Wrapper({
 
   return <div className={wrapperClassnames}>{children}</div>
 }
+
+export default Wrapper

package/src/components/Topper/index.tsx

@@ -21,13 +21,13 @@ export type TopperProps = {
   readNextSlot?: () => ReactElement
 }
 
-export default function Topper({
+const Topper: React.FC<TopperProps> = ({
   content,
   slot,
   followButtonSlot,
   showPremiumLabel = false,
   readNextSlot,
-}: TopperProps) {
+}) => {
   const { topper } = content
 
   if (!topper) {
@@ -191,3 +191,5 @@ export default function Topper({
     </Fragment>
   )
 }
+
+export default Topper

package/src/components/Tweet/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { ContentTree } from '@financial-times/content-tree'
 import { TweetFragment } from '@financial-times/cp-content-pipeline-client'
 
-export default function Tweet(tweet: ContentTree.Tweet & TweetFragment) {
+const Tweet: React.FC<ContentTree.Tweet & TweetFragment> = (tweet) => {
   if (tweet.html) {
     return (
       <div
@@ -19,3 +19,5 @@ export default function Tweet(tweet: ContentTree.Tweet & TweetFragment) {
   }
   return null
 }
+
+export default Tweet

package/src/components/Video/index.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { VideoFragment } from '@financial-times/cp-content-pipeline-client'
 import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 
-export default function Video({
+const Video: React.FC<VideoFragment & ContentTreeWorkarounds.Video> = ({
   id,
   embedded,
   title,
-}: VideoFragment & ContentTreeWorkarounds.Video) {
+}) => {
   return (
     <div
       className="n-content-video n-content-video--internal"
@@ -29,3 +29,5 @@ export default function Video({
     </div>
   )
 }
+
+export default Video

package/src/components/YoutubeVideo/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 
-export default function YoutubeVideo({
+const YoutubeVideo: React.FC<ContentTreeWorkarounds.YoutubeVideo> = ({
   url,
-}: ContentTreeWorkarounds.YoutubeVideo) {
+}) => {
   try {
     const parsed = new URL(url)
     const id = parsed.searchParams.get('v')
@@ -32,3 +32,5 @@ export default function YoutubeVideo({
     return null
   }
 }
+
+export default YoutubeVideo

package/src/stories/Clip.stories.tsx

@@ -1,6 +1,6 @@
+import React, { useEffect } from 'react'
 import ClipServer from '../components/Clip'
 import ClipClient from '../components/Clip/client'
-import React, { useEffect, ReactNode } from 'react'
 import oTracking from '@financial-times/o-tracking/main'
 import './Clip.stories.scss'
 import { ClipProps } from '../components/Clip/template/component'
@@ -18,11 +18,7 @@ export default {
   },
 }
 
-interface ArticleWrapperProps {
-  children: ReactNode
-}
-
-const ArticleWrapper: React.FC<ArticleWrapperProps> = ({ children }) => {
+const ArticleWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <article
       id="site-content"