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

package/src/components/Clip/template/component.tsx

@@ -26,7 +26,7 @@ export interface ClipProps {
   preload?: string
   preset?: Preset
 }
-export default function ClipComponent({
+const ClipComponent: React.FC<ClipProps> = ({
   url,
   id,
   autoplay = false,
@@ -42,7 +42,7 @@ export default function ClipComponent({
   accessibility = {},
   preset = 'full-player',
   preload = 'auto',
-}: ClipProps) {
+}) => {
   // We support currently a single clip, with multiple sources.
   let clip = {} as Clip
   // V2 has an array of clips
@@ -109,3 +109,5 @@ export default function ClipComponent({
     </ContentLayout>
   )
 }
+
+export default ClipComponent

package/src/components/ContentPackageBody/index.tsx

@@ -37,11 +37,11 @@ type ContentPackageBodyProps = BodyProps & {
   AdSlot?: React.FC
 }
 
-export default function ContentPackageBody({
+const ContentPackageBody: React.FC<ContentPackageBodyProps> = ({
   content,
   richTextComponents,
   AdSlot,
-}: ContentPackageBodyProps) {
+}) => {
   if (content.__typename !== 'ContentPackage') {
     return null
   }
@@ -88,13 +88,13 @@ export default function ContentPackageBody({
   )
 }
 
-function PackageTeasers({
+const PackageTeasers: React.FC<PackageTeasersProps> = ({
   primaryTeasers,
   secondaryTeasers,
   secondaryTeaserTitle,
   secondaryTeaserMods,
   AdSlot,
-}: PackageTeasersProps) {
+}) => {
   return (
     <div
       className={classnames('package-container', {
@@ -117,7 +117,7 @@ function PackageTeasers({
   )
 }
 
-function PrimaryTeasers({ teasers }: PrimaryTeasersProps) {
+const PrimaryTeasers: React.FC<PrimaryTeasersProps> = ({ teasers }) => {
   return (
     <div className="package-contents package-teasers--large">
       <ul className="package-contents package-teasers__list">
@@ -145,11 +145,11 @@ function PrimaryTeasers({ teasers }: PrimaryTeasersProps) {
   )
 }
 
-function SecondaryTeasers({
+const SecondaryTeasers: React.FC<SecondaryTeasersProps> = ({
   teaserTitle,
   teasers,
   teaserMods,
-}: SecondaryTeasersProps) {
+}) => {
   return (
     <div className="o-teaser-collection package-more">
       {teaserTitle && (
@@ -172,3 +172,5 @@ function SecondaryTeasers({
     </div>
   )
 }
+
+export default ContentPackageBody

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

@@ -3,7 +3,6 @@
 @import '@financial-times/o-grid/main';
 @import '@financial-times/o-spacing/main';
 
-$numberIntroductoryElements: 1;
 $dataComponentVisibleElements: (
   'clip-set',
   'recommended',
@@ -23,28 +22,30 @@ $alwaysVisibleComponentSelectors: ();
 }
 @mixin AlwaysVisibleElements {
   @each $component in $alwaysVisibleComponentSelectors {
-    #{$component} {
+    & > p:first-of-type ~ #{$component} {
       display: block;
     }
   }
 }
-@mixin IntroductoryElements {
-  & > :nth-child(-n + #{$numberIntroductoryElements }):not(.cp-expander__expand) {
-    display: block;
+@mixin OrderElements {
+  & > * {
     order:1
   }
-  & > :nth-child(n + #{$numberIntroductoryElements }) {
+  & > p:first-of-type ~ * {
     order:3
   }
+  & > p:first-of-type ~ .cp-expander__expand {
+    order:2
+  }
 }
 @mixin expandeAndCollapse {
   &[data-state='expanded'] {
     .cp-expander-content {
       // Show all the hidden children...
-      & > * {
+      & > *:not(.cp-expander__expand) {
         display: block;
       }
-      > .cp-expander__expand {
+      & > .cp-expander__expand {
         display: none;
         }
     }
@@ -56,19 +57,27 @@ $alwaysVisibleComponentSelectors: ();
     .cp-expander-content {
       // Hide everything that comes after the expander...
       // ... except the always visible children
-      & > * {
+      > p:first-of-type ~ * {
         display: none;
       }
-      &:target > * {
-        display: block;
+      //when target truncated post show everything
+      &:target > p:first-of-type {
+        ~ * {
+          display: block;
+
+        }  
+
+        ~ .cp-expander__expand {
+          display: none;
+        }
       }
+
       //show expand only when there is a p element, in this case we supose all other elements are exclusions that will be shown always
-      > p ~ .cp-expander__expand {
+      > p:first-of-type ~ .cp-expander__expand {
         display: block;
-        order: 2;
       }
-      //If expander button is the second element means that there is only one element and therefore we don't have nothing to expand
-      > :nth-child(#{$numberIntroductoryElements + 1}).cp-expander__expand {
+
+      > p:first-of-type + .cp-expander__expand {
         display: none;
       }
 
@@ -76,9 +85,10 @@ $alwaysVisibleComponentSelectors: ();
         display: none;
       }
 
+     
       @include AlwaysVisibleElements;
-
-      @include IntroductoryElements;
+      
+      @include OrderElements;
 
     }
    

package/src/components/FixedAspectRatio/FixedAspectRatio.tsx

@@ -1,24 +1,25 @@
-import React, { PropsWithChildren } from 'react'
+import React from 'react'
 
 type FixedAspectRatioProps = {
   width: number
   height: number
   style?: React.CSSProperties
   element?: string
+  [key:string]: string | boolean | React.ReactNode | React.CSSProperties
 }
 
 /**
  * High Order Component that forces a fixed aspect ratio to prevent Cumulative Layout Shift
  * for elements that have a deterministic aspect ratio server-side
  */
-export function FixedAspectRatio<P extends object = object>({
+export const FixedAspectRatio: React.FC<React.PropsWithChildren<FixedAspectRatioProps>> = ({
   width,
   height,
   children,
   style = {},
   element = 'div',
-  ...otherprops
-}: PropsWithChildren<FixedAspectRatioProps & P>) {
+  ...otherProps
+}) => {
   let fixedAspectRatioStyles
   if (!width || !height) {
     fixedAspectRatioStyles = {
@@ -34,7 +35,7 @@ export function FixedAspectRatio<P extends object = object>({
 
   return React.createElement(
     element,
-    { ...otherprops, style: { ...style, ...fixedAspectRatioStyles } },
+    { ...otherProps, style: { ...style, ...fixedAspectRatioStyles } },
     children
   )
 }

package/src/components/Flourish/index.tsx

@@ -37,7 +37,7 @@ const DisclaimerNotice = ({ id }: disclaimerProps) => (
     </div>
   </div>
 )
-export default function Flourish({
+const Flourish: React.FC<FlourishProps> = ({
   id,
   flourishType,
   description,
@@ -45,7 +45,7 @@ export default function Flourish({
   fallbackImage,
   iFrame = false,
   inArticleBody = true,
-}: FlourishProps) {
+}) => {
   if (!id) return null
   const anchorHref = `#${id}`
   const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid'
@@ -115,3 +115,5 @@ export default function Flourish({
     </div>
   )
 }
+
+export default Flourish

package/src/components/Heading/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import type { ReactNode } from 'react'
 import type { ContentTree } from '@financial-times/content-tree'
 
-export default (props: ContentTree.Heading & { children: ReactNode[] }) => {
+const Heading: React.FC<React.PropsWithChildren<ContentTree.Heading>> = (
+  props
+) => {
   if (!props.children.length) return null
 
   switch (props.level) {
@@ -14,3 +15,5 @@ export default (props: ContentTree.Heading & { children: ReactNode[] }) => {
       return <h5 className="n-content-heading-5">{props.children}</h5>
   }
 }
+
+export default Heading

package/src/components/Headshot/index.tsx

@@ -8,13 +8,13 @@ type HeadshotProps = {
   altText?: string
 }
 
-export default function Headshot({
+const Headshot: React.FC<HeadshotProps> = ({
   headshot,
   prefLabel,
   streamPage,
   className,
   altText = `Headshot for ${prefLabel}`,
-}: HeadshotProps) {
+}) => {
   return streamPage ? (
     <a
       target="_blank"
@@ -37,3 +37,5 @@ export default function Headshot({
     />
   )
 }
+
+export default Headshot

package/src/components/ImageSet/index.tsx

@@ -80,11 +80,6 @@ function isAliasedBreakpoints(
   )
 }
 
-type SourceProps = {
-  image: ImageFragment
-  getBreakpoints?: BreakpointGetter
-}
-
 function figureWidth(picture: PictureFragment) {
   if (picture.layoutWidth === 'inset-left') {
     const DEFAULT_WIDTH = 700
@@ -101,10 +96,15 @@ function figureWidth(picture: PictureFragment) {
   }
 }
 
-function Source({
+type SourceProps = {
+  image: ImageFragment
+  getBreakpoints?: BreakpointGetter
+}
+
+const Source: React.FC<SourceProps> = ({
   image,
   getBreakpoints = defaultGetBreakpoints,
-}: SourceProps) {
+}) => {
   const breakpoints = getBreakpoints(image)
   if (!breakpoints) {
     return null
@@ -145,7 +145,7 @@ type SourcesProps = {
   getBreakpoints?: BreakpointGetter
 }
 
-export function Sources({ images, getBreakpoints }: SourcesProps) {
+export const Sources: React.FC<SourcesProps> = ({ images, getBreakpoints }) => {
   return (
     <>
       {images.map((image, index) => (
@@ -155,22 +155,24 @@ export function Sources({ images, getBreakpoints }: SourcesProps) {
   )
 }
 
+type FallbackImageProps = {
+  image: ImageFragment
+  imageType?: string
+  picture?: PictureFragment
+  className?: string
+  inSourceSet?: boolean
+  isMainImage?: boolean
+}
+
 // TODO should `fallback` be added to content-tree imageset?
-export function FallbackImage({
+export const FallbackImage: React.FC<FallbackImageProps> = ({
   image,
   imageType = 'image',
   picture,
   className,
   inSourceSet = false,
   isMainImage = false,
-}: {
-  image: ImageFragment
-  imageType?: string
-  picture?: PictureFragment
-  className?: string
-  inSourceSet?: boolean
-  isMainImage?: boolean
-}) {
+}) => {
   const Wrapper = inSourceSet
     ? React.Fragment
     : ({ children }: PropsWithChildren) => (
@@ -199,15 +201,15 @@ export function FallbackImage({
   )
 }
 
-export default function ImageSet(
-  imageSet: ImageSetFragment & { isMainImage?: boolean }
-) {
-  const { reduceFullBleedImages } = useContext(PresentationFlagsContext)
+type ImageSetProps = ImageSetFragment & { isMainImage?: boolean }
 
+const ImageSet: React.FC<ImageSetProps> = (imageSet) => {
   if (!imageSet.picture?.images) {
     return null
   }
 
+  const { reduceFullBleedImages } = useContext(PresentationFlagsContext)
+
   const Wrapper =
     // HACK:20240618:IM don't stretch out the main image to the full grid in
     // the app as it can clash with the right hand rail
@@ -253,3 +255,5 @@ export default function ImageSet(
     </Wrapper>
   )
 }
+
+export default ImageSet

package/src/components/Layout/index.tsx

@@ -1,9 +1,5 @@
 import { ContentTree } from '@financial-times/content-tree'
-import React, { ReactNode } from 'react'
-
-type LayoutContainerProps = {
-  children: ReactNode
-}
+import React from 'react'
 
 interface ContentTreeLayoutSlot extends ContentTree.Node {
   type: 'slot'
@@ -21,20 +17,15 @@ interface ContentTreeCardLayout extends BaseLayoutProps, ContentTree.Node {
   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 = 'auto',
-}: React.PropsWithChildren<ContentTreeCardLayout | StaticLayout>) {
+export const Layout: React.FC<
+  React.PropsWithChildren<ContentTreeCardLayout | BaseLayoutProps>
+> = ({ children, layoutWidth, layoutName = 'auto' }) => {
   return (
     <div
       className="n-content-layout"
@@ -46,10 +37,12 @@ export function Layout({
   )
 }
 
-export function LayoutContainer({ children }: LayoutContainerProps) {
+export const LayoutContainer: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   return <div className="n-content-layout__container">{children}</div>
 }
 
-export function LayoutSlot({ children }: React.PropsWithChildren) {
+export const LayoutSlot: React.FC<React.PropsWithChildren> = ({ children }) => {
   return <div className="n-content-layout__slot">{children}</div>
 }

package/src/components/LiveBlogBody/index.tsx

@@ -10,13 +10,13 @@ type LiveBlogBodyProps = BodyProps & {
   xInteractionSerialiser?: any
 }
 
-export default function LiveBlogBody({
+const LiveBlogBody: React.FC<LiveBlogBodyProps> = ({
   content,
   richTextComponents,
   xInteractionSerialiser,
   showShareButtons,
   postTrackerConfig,
-}: LiveBlogBodyProps) {
+}) => {
   if (content.__typename !== 'LiveBlogPackage') return null
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -35,3 +35,5 @@ export default function LiveBlogBody({
     </ComponentsContext.Provider>
   )
 }
+
+export default LiveBlogBody

package/src/components/LiveBlogPost/ShareButtons.tsx

@@ -1,13 +1,16 @@
 import React from 'react'
 import { FacebookSVG, LinkedInSVG, TwitterSVG } from './svgIcons'
-export default ({
-  postId,
-  articleUrl,
-  title,
-}: {
+
+type ShareButtonsProps = {
   postId: string
   articleUrl: string
   title: string
+}
+
+const ShareButtons: React.FC<ShareButtonsProps> = ({
+  postId,
+  articleUrl,
+  title,
 }) => {
   const shareUrl = articleUrl ? new URL(articleUrl) : null
   if (shareUrl) {
@@ -84,3 +87,5 @@ export default ({
     </div>
   )
 }
+
+export default ShareButtons

package/src/components/LiveBlogPost/Timestamp.tsx

@@ -5,7 +5,10 @@ type TimestampProps = {
   textCase?: 'sentence'
 }
 
-export default ({ publishedTimestamp, textCase }: TimestampProps) => {
+const TimeStamp: React.FC<TimestampProps> = ({
+  publishedTimestamp,
+  textCase,
+}) => {
   const now = new Date()
   const oneDay = 24 * 60 * 60 * 1000
   const date = new Date(publishedTimestamp)
@@ -38,3 +41,5 @@ export default ({ publishedTimestamp, textCase }: TimestampProps) => {
     </span>
   )
 }
+
+export default TimeStamp

package/src/components/LiveBlogPost/index.tsx

@@ -16,7 +16,10 @@ type indicators = {
   isOpinion?: boolean
 }
 
-const TruncatedPost = ({ id, children }: { id: string; children: any }) => {
+const TruncatedPost: React.FC<React.PropsWithChildren<{ id: string }>> = ({
+  id,
+  children,
+}) => {
   return (
     <div
       data-trackable="truncated-post"
@@ -77,8 +80,7 @@ export type LiveBlogPostProps = {
   indicators?: indicators
   authors: Array<any>
 }
-
-const LiveBlogPost = ({
+const LiveBlogPost: React.FC<LiveBlogPostProps> = ({
   id,
   postId, // Remove once wordpress is no longer in use
   title,
@@ -96,7 +98,7 @@ const LiveBlogPost = ({
   isPinned,
   indicators = {},
   authors,
-}: LiveBlogPostProps) => {
+}) => {
   const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
   let postBody

package/src/components/LiveBlogPost/svgIcons.tsx

@@ -5,7 +5,7 @@ TODO: CI-1975 given the below comment, once we are happy this migration works, w
 These icons have been copied from Origami as their TSX components are currently incompatible with next-article.
 Once this is resolved, these components should be replaced with o-share https://github.com/Financial-Times/origami/tree/main/components/o-share.
  */
-export function TwitterSVG() {
+export const TwitterSVG: React.FC = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
       <path d="M21.647 18.469 28.932 10h-1.726l-6.326 7.353L15.827 10H10l7.64 11.12L10 30h1.726l6.68-7.765L23.744 30h5.827l-7.924-11.531Zm-2.365 2.748-.774-1.107-6.16-8.81H15l4.971 7.11.774 1.107 6.462 9.242h-2.652l-5.273-7.541Z" />
@@ -13,7 +13,7 @@ export function TwitterSVG() {
   )
 }
 
-export function FacebookSVG() {
+export const FacebookSVG: React.FC = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
       <path d="M643.9 342h-48.2c-37.8 0-45.1 18-45.1 44.3v58.1h90.1l-11.7 91h-78.4V769h-94V535.5H378v-91h78.6v-67.1c0-77.9 47.6-120.3 117.1-120.3 33.3 0 61.9 2.5 70.2 3.6V342z" />
@@ -21,7 +21,7 @@ export function FacebookSVG() {
   )
 }
 
-export function LinkedInSVG() {
+export const LinkedInSVG: React.FC = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
       <path d="M264.4 426.2h106.2v341.4H264.4V426.2zm53.2-169.7c-34.1 0-61.6 27.6-61.6 61.5 0 34 27.5 61.5 61.6 61.5 33.9 0 61.5-27.6 61.5-61.5-.1-34-27.6-61.5-61.5-61.5zm323.1 161.2c-51.6 0-86.2 28.3-100.4 55.1h-1.5v-46.7H437.2v341.4h106V598.7c0-44.5 8.4-87.7 63.6-87.7 54.5 0 55.1 50.9 55.1 90.5v166H768V580.3c0-91.9-19.9-162.6-127.3-162.6z" />

package/src/components/MainImage/index.tsx

@@ -10,7 +10,7 @@ import { ContentTree } from '@financial-times/content-tree'
 type MainImageProps = {
   content: ArticleQuery['content']
 }
-export default function MainImage({ content }: MainImageProps) {
+const MainImage: React.FC<MainImageProps> = ({ content }) => {
   const references = content.body?.structured.references
 
   /* Spark publishes the MainImage at the top of the <body>. if the image is expected to be rendered at all
@@ -37,3 +37,5 @@ export default function MainImage({ content }: MainImageProps) {
 
   return null
 }
+
+export default MainImage

package/src/components/Paragraph/index.tsx

@@ -5,10 +5,12 @@ export const ParagraphContext = createContext<{ className: string } | null>(
   null
 )
 
-export default function Paragraph(
-  props: React.PropsWithChildren<ContentTree.Paragraph>
-) {
+const Paragraph: React.FC<React.PropsWithChildren<ContentTree.Paragraph>> = (
+  props
+) => {
   const { className } = useContext(ParagraphContext) ?? { className: undefined }
 
   return <p {...{ className }}>{props.children}</p>
 }
+
+export default Paragraph

package/src/components/PodcastBody/index.tsx

@@ -2,12 +2,17 @@ import React from 'react'
 import RichText from '../RichText'
 import type { BodyProps } from '../Body'
 
-export default function PodcastBody({
+type PodcastBodyProps = BodyProps & {
+  showPlayer?: boolean
+  showAccessibilityGuide?: boolean
+}
+
+const PodcastBody: React.FC<PodcastBodyProps> = ({
   content,
   richTextComponents,
   showPlayer = true,
   showAccessibilityGuide = true,
-}: BodyProps & { showPlayer?: boolean; showAccessibilityGuide?: boolean }) {
+}) => {
   if (content.__typename !== 'Audio') {
     return null
   }
@@ -60,3 +65,5 @@ export default function PodcastBody({
     </div>
   )
 }
+
+export default PodcastBody

package/src/components/Pullquote/index.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 import classnames from 'classnames'
 
-export default (
-  props: React.PropsWithChildren<ContentTreeWorkarounds.ContentTreePullquote>
-) => {
+const Pullquote: React.FC<
+  React.PropsWithChildren<ContentTreeWorkarounds.ContentTreePullquote>
+> = (props) => {
   return (
     <blockquote
       className={classnames('n-content-pullquote', {
@@ -22,3 +22,5 @@ export default (
     </blockquote>
   )
 }
+
+export default Pullquote

package/src/components/Recommended/index.tsx

@@ -10,11 +10,12 @@ import classnames from 'classnames'
  * `<Teaser>` is imported from x-dash
  * https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
  */
-export default function Recommended({
+
+const Recommended: React.FC<ContentTree.Recommended & RecommendedFragment> = ({
   heading,
   teaser,
   isInLiveBlog,
-}: ContentTree.Recommended & RecommendedFragment) {
+}) => {
   if (!teaser) {
     return null
   }
@@ -38,3 +39,5 @@ export default function Recommended({
     </aside>
   )
 }
+
+export default Recommended