@financial-times/cp-content-pipeline-ui 6.7.0 → 6.8.0

package/src/components/Topper/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { Fragment, ReactElement } from 'react'
 import Wrapper from './Wrapper'
 import Tags from './Tags'
 import Headline from './Headline'
@@ -12,6 +12,7 @@ import Flourish from '../Flourish'
 import { Layout, LayoutContainer } from '../Layout'
 import classnames from 'classnames'
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
+import PartnerContentHeader from '../PartnerContentHeader'
 
 export type TopperProps = {
   content: ArticleQuery['content']
@@ -42,6 +43,7 @@ export default function Topper({
   const isFlourish =
     topper.__typename === 'TopperWithFlourish' && !!topper.leadFlourish
   const isAudio = content.__typename === 'Audio'
+  const isPartnerContent = topper.__typename === 'PartnerContentTopper'
   const hasLayout = 'layout' in topper && topper.layout
   const hasDesign = 'design' in topper && topper.design
   const hasHeadshot = 'headshot' in topper && topper.headshot
@@ -86,104 +88,108 @@ export default function Topper({
   }
 
   return (
-    <div
-      className={classnames({
-        'article-topper': true,
-        'pinned-post__topper--no-image': isLiveBlog,
-      })}
-    >
-      <Wrapper
-        backgroundColor={topper.backgroundColour ?? undefined}
-        isBasic={isBasic}
-        modifiers={modifiers}
+    <Fragment>
+      {/** TODO: make the name dynamic when upstream is ready */}
+      {isPartnerContent && <PartnerContentHeader name="Demo Partner" />}
+      <div
+        className={classnames({
+          'article-topper': true,
+          'pinned-post__topper--no-image': isLiveBlog,
+        })}
       >
-        <div
-          className={classnames('o-topper__content', {
-            'o-topper__content--text-shadow': topper.textShadow,
-            'o-topper__content--background-box': topper.backgroundBox,
-          })}
-          id="o-topper"
+        <Wrapper
+          backgroundColor={topper.backgroundColour ?? undefined}
+          isBasic={isBasic}
+          modifiers={modifiers}
         >
-          {isLiveBlog ? (
-            <div className="o-topper__tags">
-              <LiveBlogIndicator
-                realtime={content.realtime ?? undefined}
-                lastUpdatedDateTime={getMostRecentPostPublishedDate()}
+          <div
+            className={classnames('o-topper__content', {
+              'o-topper__content--text-shadow': topper.textShadow,
+              'o-topper__content--background-box': topper.backgroundBox,
+            })}
+            id="o-topper"
+          >
+            {isLiveBlog ? (
+              <div className="o-topper__tags">
+                <LiveBlogIndicator
+                  realtime={content.realtime ?? undefined}
+                  lastUpdatedDateTime={getMostRecentPostPublishedDate()}
+                />
+              </div>
+            ) : (
+              <Tags
+                __typename={topper.__typename}
+                isPackage={isPackage}
+                displayConcept={topper.displayConcept ?? undefined}
+                brandConcept={
+                  ('brandConcept' in topper && topper.brandConcept) || undefined
+                }
+                genreConcept={
+                  ('genreConcept' in topper && topper.genreConcept) || undefined
+                }
+                headshot={hasHeadshot || undefined}
+                hasColumnist={hasColumnist}
+                followButtonVariant={topper.followButtonVariant}
+                FollowButtonSlot={followButtonSlot}
               />
-            </div>
-          ) : (
-            <Tags
-              __typename={topper.__typename}
-              isPackage={isPackage}
-              displayConcept={topper.displayConcept ?? undefined}
-              brandConcept={
-                ('brandConcept' in topper && topper.brandConcept) || undefined
+            )}
+            <Headline
+              headline={topper.headline}
+              showPremiumLabel={
+                showPremiumLabel && content.accessLevel === 'premium'
               }
-              genreConcept={
-                ('genreConcept' in topper && topper.genreConcept) || undefined
+              isLargeHeadline={
+                ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
+                undefined
               }
-              headshot={hasHeadshot || undefined}
-              hasColumnist={hasColumnist}
-              followButtonVariant={topper.followButtonVariant}
-              FollowButtonSlot={followButtonSlot}
             />
-          )}
-          <Headline
-            headline={topper.headline}
-            showPremiumLabel={
-              showPremiumLabel && content.accessLevel === 'premium'
-            }
-            isLargeHeadline={
-              ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
-              undefined
-            }
-          />
-          {isLiveBlog && isFlourish ? (
-            <Layout layoutWidth="full-grid">
-              <LayoutContainer>
-                <Flourish
-                  id={topper.leadFlourish.id || ''}
-                  flourishType={topper.leadFlourish.type || ''}
-                  description={topper.leadFlourish.description || ''}
-                  fallbackImage={topper.leadFlourish.fallbackImage || ''}
-                  iFrame={true}
-                  inArticleBody={false}
+            {isLiveBlog && isFlourish ? (
+              <Layout layoutWidth="full-grid">
+                <LayoutContainer>
+                  <Flourish
+                    id={topper.leadFlourish.id || ''}
+                    flourishType={topper.leadFlourish.type || ''}
+                    description={topper.leadFlourish.description || ''}
+                    fallbackImage={topper.leadFlourish.fallbackImage || ''}
+                    iFrame={true}
+                    inArticleBody={false}
+                  />
+                </LayoutContainer>
+              </Layout>
+            ) : (
+              ''
+            )}
+            {topper.intro && (
+              <Intro
+                structured={topper.intro.structured}
+                source={topper.intro.source}
+              />
+            )}
+            {hasHeadshot && !isAudio && isOpinion && topper.columnist && (
+              <div className="o-topper__headshot">
+                <Headshot
+                  headshot={topper.headshot}
+                  prefLabel={topper.columnist.prefLabel}
+                  className={'o-topper__headshot-image'}
+                  altText={headshotAltText}
                 />
-              </LayoutContainer>
-            </Layout>
-          ) : (
-            ''
-          )}
-          {topper.intro && (
-            <Intro
-              structured={topper.intro.structured}
-              source={topper.intro.source}
-            />
-          )}
-          {hasHeadshot && !isAudio && isOpinion && topper.columnist && (
-            <div className="o-topper__headshot">
-              <Headshot
-                headshot={topper.headshot}
-                prefLabel={topper.columnist.prefLabel}
-                className={'o-topper__headshot-image'}
-                altText={headshotAltText}
+              </div>
+            )}
+            {isOpinion && topper.columnist && (
+              <Columnist
+                authorConcept={topper.columnist}
+                followButtonVariant={topper.followButtonVariant}
+                followButtonSlot={followButtonSlot}
               />
-            </div>
-          )}
-          {isOpinion && topper.columnist && (
-            <Columnist
-              authorConcept={topper.columnist}
-              followButtonVariant={topper.followButtonVariant}
-              followButtonSlot={followButtonSlot}
-            />
+            )}
+          </div>
+          {readNextSlot && (
+            <div className="o-topper__read-next">{readNextSlot()}</div>
           )}
-        </div>
-        {readNextSlot && (
-          <div className="o-topper__read-next">{readNextSlot()}</div>
-        )}
-        <div className="o-topper__background" />
-        {'images' in topper && <Picture topper={topper} />}
-      </Wrapper>
-    </div>
+          <div className="o-topper__background" />
+          {'images' in topper && <Picture topper={topper} />}
+        </Wrapper>
+      </div>
+    </Fragment>
   )
 }

package/src/components/Video/index.tsx

@@ -8,10 +8,7 @@ export default function Video({
   title,
 }: VideoFragment & ContentTreeWorkarounds.Video) {
   return (
-    <div
-      className="n-content-video n-content-video--internal"
-      data-component="video"
-    >
+    <div className="n-content-video n-content-video--internal">
       <div
         className="n-content-video__placeholder"
         data-o-component="o-video"

package/src/components/YoutubeVideo/index.tsx

@@ -13,10 +13,7 @@ export default function YoutubeVideo({
     }
 
     return (
-      <div
-        className="n-content-video n-content-video--youtube"
-        data-component="youtube-video"
-      >
+      <div className="n-content-video n-content-video--youtube">
         <div className="n-content-video__placeholder">
           <iframe
             className="n-content-video__embedded"

package/src/stories/Clip.stories.tsx

@@ -1,9 +1,8 @@
-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'
+import ClipClient from '../components/Clip/client'
+import ClipServer, { ClipProps } from '../components/Clip/template/component'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {