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

package/src/components/Expander/test/__snapshots__/snapshot.spec.tsx.snap

@@ -1,225 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Expander Snapshot component rendered on server default render 1`] = `
-<div
-  className="cp-expander cp-expander--all-resolutions cp-expander--not-initialised"
-  data-component="expander"
-  data-state="collapsed"
-  id="test-id__container"
->
-  <div
-    aria-describedby="test-id"
-    className="cp-expander-content"
-    id="test-id"
-  >
-    <div
-      className="cp-expander__expand"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={false}
-        aria-hidden={false}
-        className="cp-expander__link"
-        data-action="expand"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="expand"
-        href="#test-id"
-      >
-        Expand
-      </a>
-    </div>
-    <div>
-      Children 1
-    </div>
-    <div>
-      Children 2
-    </div>
-    <div
-      className="cp-expander__collapse"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={false}
-        aria-hidden={true}
-        className="cp-expander__link"
-        data-action="collapse"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="collapse"
-        href="#test-id__container"
-      >
-        Collapse
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Expander Snapshot component rendered on server only on mobile 1`] = `
-<div
-  className="cp-expander cp-expander--mobile-only cp-expander--not-initialised"
-  data-component="expander"
-  data-state="collapsed"
-  id="test-id__container"
->
-  <div
-    aria-describedby="test-id"
-    className="cp-expander-content"
-    id="test-id"
-  >
-    <div
-      className="cp-expander__expand"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={false}
-        aria-hidden={false}
-        className="cp-expander__link"
-        data-action="expand"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="expand"
-        href="#test-id"
-      >
-        Expand
-      </a>
-    </div>
-    <div>
-      Children 1
-    </div>
-    <div>
-      Children 2
-    </div>
-    <div
-      className="cp-expander__collapse"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={false}
-        aria-hidden={true}
-        className="cp-expander__link"
-        data-action="collapse"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="collapse"
-        href="#test-id__container"
-      >
-        Collapse
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Expander Snapshot component rendered on server with different labels 1`] = `
-<div
-  className="cp-expander cp-expander--all-resolutions cp-expander--not-initialised"
-  data-component="expander"
-  data-state="collapsed"
-  id="test-id__container"
->
-  <div
-    aria-describedby="test-id"
-    className="cp-expander-content"
-    id="test-id"
-  >
-    <div
-      className="cp-expander__expand"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={false}
-        aria-hidden={false}
-        className="cp-expander__link"
-        data-action="expand"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="expand"
-        href="#test-id"
-      >
-        Open
-      </a>
-    </div>
-    <div>
-      Children 1
-    </div>
-    <div>
-      Children 2
-    </div>
-    <div
-      className="cp-expander__collapse"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={false}
-        aria-hidden={true}
-        className="cp-expander__link"
-        data-action="collapse"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="collapse"
-        href="#test-id__container"
-      >
-        Close
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Expander Snapshot component rendered on server with different state 1`] = `
-<div
-  className="cp-expander cp-expander--all-resolutions cp-expander--not-initialised"
-  data-component="expander"
-  data-state="expanded"
-  id="test-id__container"
->
-  <div
-    aria-describedby="test-id"
-    className="cp-expander-content"
-    id="test-id"
-  >
-    <div
-      className="cp-expander__expand"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={true}
-        aria-hidden={true}
-        className="cp-expander__link"
-        data-action="expand"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="expand"
-        href="#test-id"
-      >
-        Expand
-      </a>
-    </div>
-    <div>
-      Children 1
-    </div>
-    <div>
-      Children 2
-    </div>
-    <div
-      className="cp-expander__collapse"
-    >
-      <a
-        aria-controls="test-id"
-        aria-expanded={true}
-        aria-hidden={false}
-        className="cp-expander__link"
-        data-action="collapse"
-        data-trackable="truncated-post"
-        data-trackable-context-truncated-id="test-id"
-        data-trackable-context-truncated-post="collapse"
-        href="#test-id__container"
-      >
-        Collapse
-      </a>
-    </div>
-  </div>
-</div>
-`;

package/src/components/Expander/test/client/index.spec.tsx

@@ -1,129 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React from 'react'
-
-import Expander, { ExpanderProps } from '../../index'
-import { ExpanderClient } from '../../client'
-import { render, screen } from '@testing-library/react'
-
-//mock IntersectionObserver
-class IntersectionObserver {
-  //mock constructor
-  constructor(callback) {
-    this.callback = callback
-  }
-  observe() {
-    this.active = true
-  }
-  disconnect() {
-    this.active = false
-  }
-
-  intersects() {
-    if (this.active) {
-      this.callback([{ isIntersecting: true }])
-    }
-  }
-}
-
-//mock scrollIntoView
-window.HTMLElement.prototype.scrollIntoView = jest.fn()
-
-describe('Expander client test', () => {
-  beforeEach(() => {
-    window.IntersectionObserver = IntersectionObserver
-  })
-
-  it('find expanders markup and initialises it', () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-    }
-    render(
-      <Expander {...props}>
-        <div>Children 1</div>
-      </Expander>
-    )
-
-    const expanders = ExpanderClient.init()
-    expect(expanders.length).toBe(1)
-    expect(
-      document.querySelectorAll("[data-component='expander']").length
-    ).toBe(1)
-    expect(expanders[0].container.id).toBe('test-id__container')
-    expect(
-      expanders[0].container.classList.contains('cp-expander--initialised')
-    ).toBe(true)
-  })
-
-  it('do not initialised twice expanders', () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-    }
-    render(
-      <Expander {...props}>
-        <div>Children 1</div>
-      </Expander>
-    )
-    ExpanderClient.init()
-    const expanders = ExpanderClient.init()
-
-    expect(expanders.length).toBe(0)
-    expect(
-      document.querySelectorAll("[data-component='expander']").length
-    ).toBe(1)
-  })
-
-  it('expands and collapse', async () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-    }
-    render(
-      <Expander {...props}>
-        <div>Children 1</div>
-      </Expander>
-    )
-    const expanders = ExpanderClient.init()
-    const expanderButton = screen.getByText('Expand')
-    const collapserButton = screen.getByText('Collapse')
-    expect(expanderButton.getAttribute('aria-expanded')).toBe('false')
-    expect(expanderButton.getAttribute('aria-hidden')).toBe('false')
-    expect(collapserButton.getAttribute('aria-expanded')).toBe('false')
-    expect(collapserButton.getAttribute('aria-hidden')).toBe('true')
-
-    await expanderButton.click()
-    expect(expanderButton.getAttribute('aria-expanded')).toBe('true')
-    expect(expanders[0].container?.getAttribute('data-state')).toBe('expanded')
-    expect(expanderButton.getAttribute('aria-expanded')).toBe('true')
-    expect(expanderButton.getAttribute('aria-hidden')).toBe('true')
-    expect(collapserButton.getAttribute('aria-expanded')).toBe('true')
-    expect(collapserButton.getAttribute('aria-hidden')).toBe('false')
-
-    await collapserButton.click()
-    expect(expanders[0].container?.getAttribute('data-state')).toBe('collapsed')
-    expect(expanderButton.getAttribute('aria-expanded')).toBe('false')
-    expect(expanderButton.getAttribute('aria-hidden')).toBe('false')
-    expect(collapserButton.getAttribute('aria-expanded')).toBe('false')
-    expect(collapserButton.getAttribute('aria-hidden')).toBe('true')
-  })
-
-  it('track entire read only once', () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-    }
-    render(
-      <Expander {...props}>
-        <div>Children 1</div>
-      </Expander>
-    )
-
-    const expanders = ExpanderClient.init()
-    const spy = jest.spyOn(document.body, 'dispatchEvent')
-    spy.mockImplementation((event) => {
-      expect(event.detail.action).toBe('entire_read')
-    })
-    expanders[0].trackingEntireRead.observer.intersects()
-    expect(spy).toHaveBeenCalledTimes(1)
-    expanders[0].trackingEntireRead.observer.intersects()
-    expect(spy).toHaveBeenCalledTimes(1)
-  })
-})

package/src/components/Expander/test/index.spec.tsx

@@ -1,77 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React from 'react'
-
-import Expander, { ExpanderProps } from '../index'
-import { render, screen } from '@testing-library/react'
-
-describe('Expander template', () => {
-  it('renders', () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-    }
-    const tree = render(
-      <Expander {...props}>
-        <div>Children 1</div>
-        <div>Children 2</div>
-      </Expander>
-    )
-    expect(
-      tree.container.querySelector('[data-component="expander"]')
-    ).toBeTruthy()
-    expect(
-      tree.container.querySelector('[data-state="collapsed"]')
-    ).toBeTruthy()
-    expect(
-      tree.container.querySelector('.cp-expander--not-initialised')
-    ).toBeTruthy()
-    expect(screen.getByText('Expand')).toBeTruthy()
-    expect(screen.getByText('Collapse')).toBeTruthy()
-    expect(screen.getByText('Children 1')).toBeTruthy()
-    expect(screen.getByText('Children 2')).toBeTruthy()
-  })
-
-  it('with different labels', () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-      collapseLabel: 'Close',
-      expandLabel: 'Open',
-    }
-    render(
-      <Expander {...props}>
-        <div>Children</div>
-      </Expander>
-    )
-
-    expect(screen.getByText('Open')).toBeTruthy()
-    expect(screen.getByText('Close')).toBeTruthy()
-  })
-
-  it('with different state', () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-      state: 'expanded',
-    }
-    const tree = render(
-      <Expander {...props}>
-        <div>Children</div>
-      </Expander>
-    )
-    expect(tree.container.querySelector('[data-state="expanded"]')).toBeTruthy()
-  })
-
-  it('add class for only mobile', () => {
-    const props: ExpanderProps = {
-      id: 'test-id',
-      onlyMobile: true,
-    }
-    const tree = render(
-      <Expander {...props}>
-        <div>Children</div>
-      </Expander>
-    )
-    expect(
-      tree.container.querySelector('.cp-expander--mobile-only')
-    ).toBeTruthy()
-  })
-})

package/src/components/Expander/test/snapshot.spec.tsx

@@ -1,73 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React from 'react'
-import renderer from 'react-test-renderer'
-import Expander, { ExpanderProps } from '../index'
-
-describe('Expander Snapshot', () => {
-  describe('component rendered on server', () => {
-    it('default render', () => {
-      const props: ExpanderProps = {
-        id: 'test-id',
-      }
-      const tree = renderer
-        .create(
-          <Expander {...props}>
-            <div>Children 1</div>
-            <div>Children 2</div>
-          </Expander>
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
-    })
-
-    it('only on mobile', () => {
-      const props: ExpanderProps = {
-        id: 'test-id',
-        onlyMobile: true,
-      }
-      const tree = renderer
-        .create(
-          <Expander {...props}>
-            <div>Children 1</div>
-            <div>Children 2</div>
-          </Expander>
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
-    })
-
-    it('with different labels', () => {
-      const props: ExpanderProps = {
-        id: 'test-id',
-        collapseLabel: 'Close',
-        expandLabel: 'Open',
-      }
-      const tree = renderer
-        .create(
-          <Expander {...props}>
-            <div>Children 1</div>
-            <div>Children 2</div>
-          </Expander>
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
-    })
-
-    it('with different state', () => {
-      const props: ExpanderProps = {
-        id: 'test-id',
-        state: 'expanded',
-      }
-      const tree = renderer
-        .create(
-          <Expander {...props}>
-            <div>Children 1</div>
-            <div>Children 2</div>
-          </Expander>
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
-    })
-  })
-})

package/src/components/LiveBlogPost/client/index.ts

@@ -1,9 +0,0 @@
-import { ExpanderClient } from '../../Expander/client'
-
-export class LiveBlogPostClient {
-  static init() {
-    return ExpanderClient.init({ trackingData: { category: 'live-blog-post' } })
-  }
-}
-
-export default LiveBlogPostClient

package/src/stories/Expander.stories.scss

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

package/src/stories/Expander.stories.tsx

@@ -1,159 +0,0 @@
-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 }