@financial-times/cp-content-pipeline-ui 6.9.2 → 6.10.0

package/src/extensions/scrollIntoView.ts

@@ -0,0 +1,38 @@
+type HTMLElementExpanded = HTMLElement & { polyfillScrollIntoView?: boolean }
+/**
+ * Extension for scrollIntoView of HTMLElement
+ * set the flag "programmaticScroll" to true on the window object when is called that last 500 ms with this value ,
+ * so when we listen to scroll event we can know that comes from this method
+ *
+ * The reason of this polyfill is that there is no way to know if the scroll event comes from the scrollIntoView method.
+ * This polyfill is a workaround to solve this problem and shouldn't affect the normal behavior of the scrollIntoView method
+ *
+ */
+export default function scrollIntoViewPolyfill() {
+  // Check if the extension can be applied or if it is already applied to not apply it twice
+  const windowRef = window as Window & { polyfillScrollIntoView?: boolean }
+  if (!windowRef || (windowRef && windowRef?.polyfillScrollIntoView)) {
+    return
+  }
+
+  windowRef.polyfillScrollIntoView = true
+
+  const nativeScrollIntoView = window.HTMLElement.prototype.scrollIntoView
+
+  window.HTMLElement.prototype.scrollIntoView = function (
+    options?: ScrollIntoViewOptions | undefined
+  ) {
+    const element = this as HTMLElementExpanded
+
+    const window = element.ownerDocument.defaultView as Window & {
+      programmaticScroll?: boolean
+    }
+    window.programmaticScroll = true
+    nativeScrollIntoView.apply(element, [options])
+    setTimeout(() => {
+      window.programmaticScroll = false
+    }, 500)
+  }
+}
+
+scrollIntoViewPolyfill()

package/src/stories/Clip.stories.tsx

@@ -1,8 +1,9 @@
+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 ClipClient from '../components/Clip/client'
-import ClipServer, { ClipProps } from '../components/Clip/template/component'
+import { 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 {

package/src/stories/Expander.stories.scss

@@ -0,0 +1,3 @@
+$system-code: "cp-expander";
+@import "./article-page.scss";
+@import "../components/Expander/client/main.scss";

package/src/stories/Expander.stories.tsx

@@ -0,0 +1,159 @@
+import { ExpanderServer, ExpanderProps } from '../components/Expander'
+import { ExpanderClient } from '../components/Expander/client'
+import React, { useEffect } from 'react'
+import oTracking from '@financial-times/o-tracking/main'
+import './Expander.stories.scss'
+import ClipClient from '../components/Clip/client'
+import './Clip.stories.scss'
+import RichText from '../components/RichText'
+import { ContentTree } from '@financial-times/content-tree'
+import { ClipSet } from '@financial-times/cp-content-pipeline-schema/src/resolvers/content-tree/Workarounds'
+
+const structuredContent: ContentTree.Body = {
+  type: 'body',
+  version: 1,
+  children: [
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value:
+            'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+        },
+      ],
+    } as ContentTree.Paragraph,
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value:
+            'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
+        },
+      ],
+    } as ContentTree.Paragraph,
+    ,
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value:
+            'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
+        },
+      ],
+    } as ContentTree.Paragraph,
+    {
+      type: 'clip-set',
+      id: 'http://api.ft.com/content/23a00095-d9fc-4cac-ad7c-477e61e3c159',
+      autoplay: false,
+      loop: false,
+      muted: false,
+      dataLayout: 'in-line',
+      data: {
+        referenceIndex: 3,
+      },
+    } as ClipSet,
+  ] as ContentTree.Body['children'],
+}
+const storyArgs: ExpanderProps = {
+  expandLabel: 'Open',
+  collapseLabel: 'Close',
+  onlyMobile: false,
+  id: '111232323-12123-2323',
+}
+
+export default {
+  title: 'Expander',
+  component: ExpanderServer,
+  tags: ['autodocs'],
+}
+
+const LiveBLogWrapper: React.FC<ExpanderProps & { classNames?: string }> = (
+  args
+) => {
+  const { classNames } = args
+
+  return (
+    <div className={classNames}>
+      <article
+        id="site-content"
+        role="main"
+        className="article article-grid  article-grid--no-full-width-graphics js enhanced"
+        data-article-type="no-full-width-graphics"
+      >
+        <div
+          className="article__content"
+          data-trackable="article-body"
+          data-component="article-body"
+          style={{ position: 'relative' }}
+        >
+          <div
+            className="article__content-body n-content-body js-article__content-body"
+            data-attribute="article-content-body"
+          >
+            <LiveBlogPostWrapper {...args} id="111"></LiveBlogPostWrapper>
+          </div>
+        </div>
+        <div className="article__right "></div>
+      </article>
+    </div>
+  )
+}
+
+const LiveBlogPostWrapper = (args: ExpanderProps) => {
+  useEffect(() => {
+    oTracking.init({
+      context: { product: 'next' },
+      test: true,
+    })
+
+    const clips = ClipClient.init(null, {})
+
+    return () => {
+      clips.forEach((clip) => clip.unload())
+    }
+  }, [])
+  return (
+    <article id={args.id}>
+      <div className="n-content-body">
+        <div
+          data-trackable="truncated-post"
+          data-trackable-context-post="1234"
+          data-component="example-boundary"
+        >
+          <ExpanderServer {...args} id={`${args.id}_expander`}>
+            <RichText structuredContent={{ tree: structuredContent }} />
+          </ExpanderServer>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export const OnlyServer = (args: ExpanderProps) => {
+  return <LiveBLogWrapper {...args} />
+}
+
+OnlyServer.args = { ...storyArgs }
+
+export const WithClient = (args: ExpanderProps) => {
+  useEffect(() => {
+    const clips = ClipClient.init(null, {})
+    const expanders = ExpanderClient.init()
+    return () => {
+      clips.forEach((clip) => clip.unload())
+      expanders.forEach((expander) => expander?.destroy())
+    }
+  }, [])
+  return <LiveBLogWrapper {...args} />
+}
+
+WithClient.args = { ...storyArgs }
+
+export const OnlyMobileWithClient = WithClient
+OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true }
+
+export const OnlyMobileServer = OnlyServer
+OnlyMobileServer.args = { ...storyArgs, onlyMobile: true }