@financial-times/cp-content-pipeline-ui 6.8.1 → 6.9.1

package/src/components/LiveBlogWrapper/index.tsx

@@ -40,12 +40,13 @@ type LiveBlogWrapperTypes = {
   serialiser: any //TODO: keeps TS happy, but maybe not required?
 }
 
-type stateTypes = { postCount: number; tracker: any }
+type LiveBlogWrapperState = { postCount?: number; tracker?: any }
 
-class BaseLiveBlogWrapper extends Component<LiveBlogWrapperTypes, stateTypes> {
-  constructor(props: LiveBlogWrapperTypes) {
-    super(props)
-  }
+class BaseLiveBlogWrapper extends Component<
+  LiveBlogWrapperTypes,
+  LiveBlogWrapperState
+> {
+  state: LiveBlogWrapperState = {}
 
   componentDidUpdate() {
     if (this.props.posts && this.props.posts.length && !this.state.tracker) {

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

@@ -1,5 +1,18 @@
 /* Topper styles are in o-topper codebase */
 /* Flourish topper is not a distributable Origami topper, but only used via cp-pipeline-ui */
 .o-topper--flourish {
-    padding: 0 10px;
+    // Do not use the grid to set top padding. Works only on Desktop
+    grid-template-rows: none;
+    .o-topper__content {
+        // Set top padding for all resolutions
+        padding-top: 20px;
+    }
+    .n-content-layout {
+        // set margin to match designs
+        margin-top: 24px;
+        margin-bottom: 24px;
+    }
+    .n-content-layout__container {
+        padding: initial;
+    }
 }

package/src/components/Topper/index.tsx

@@ -9,7 +9,7 @@ import Columnist from './Columnist'
 import LiveBlogIndicator from './LiveBlogIndicator'
 import { FollowButtonSlot } from './FollowButtonSlot'
 import Flourish from '../Flourish'
-import { Layout, LayoutContainer } from '../Layout'
+import { Layout } from '../Layout'
 import classnames from 'classnames'
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
 import PartnerContentHeader from '../PartnerContentHeader'
@@ -144,17 +144,19 @@ export default function Topper({
               }
             />
             {isLiveBlog && isFlourish ? (
-              <Layout layoutWidth="full-grid">
-                <LayoutContainer>
-                  <Flourish
+              <Layout
+              layoutWidth={
+                topper.layoutWidth === 'full-grid' ? 'full-grid' : 'in-line'
+              }
+            >
+                <Flourish
                     id={topper.leadFlourish.id || ''}
                     flourishType={topper.leadFlourish.type || ''}
                     description={topper.leadFlourish.description || ''}
                     fallbackImage={topper.leadFlourish.fallbackImage || ''}
                     iFrame={true}
                     inArticleBody={false}
-                  />
-                </LayoutContainer>
+                />
               </Layout>
             ) : (
               ''