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

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

@@ -0,0 +1,162 @@
+@import '@financial-times/o-icons/main';
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-grid/main';
+@import '@financial-times/o-spacing/main';
+
+$numberIntroductoryElements: 1;
+$dataComponentVisibleElements: (
+  'clip-set',
+  'recommended',
+  'flourish',
+  'image-set',
+  'video',
+  'youtube-video',
+  'table'
+);
+$alwaysVisibleComponentSelectors: ();
+
+@each $component-name in $dataComponentVisibleElements {
+  $alwaysVisibleComponentSelectors: append(
+    $alwaysVisibleComponentSelectors,
+    '[data-component="#{$component-name}"]'
+  );
+}
+@mixin AlwaysVisibleElements {
+  @each $component in $alwaysVisibleComponentSelectors {
+    #{$component} {
+      display: block;
+    }
+  }
+}
+@mixin IntroductoryElements {
+  & > :nth-child(-n + #{$numberIntroductoryElements + 1}):not(.cp-expander__expand) {
+    display: block;
+    order:1
+  }
+  & > :nth-child(n + #{$numberIntroductoryElements + 1}) {
+    order:3
+  }
+}
+@mixin expandeAndCollapse {
+  &[data-state='expanded'] {
+    .cp-expander-content {
+      // Show all the hidden children...
+      & > * {
+        display: block;
+      }
+      > .cp-expander__expand {
+        display: none;
+        }
+    }
+   
+
+  }
+
+  &[data-state='collapsed'] {
+    .cp-expander-content {
+      // Hide everything that comes after the expander...
+      // ... except the always visible children
+      & > * {
+        display: none;
+      }
+      &:target > * {
+        display: block;
+      }
+
+      > .cp-expander__expand {
+        display: block;
+        order: 2;
+      }
+
+      > .cp-expander__collapse {
+        display: none;
+      }
+
+      @include AlwaysVisibleElements;
+
+      @include IntroductoryElements;
+
+    }
+   
+  }
+}
+
+@mixin InnerStyles {
+
+      &.cp-expander--not-initialised {
+
+        .cp-expander__expand,
+        .cp-expander__collapse {
+          display: none;
+        }
+
+          .cp-expander-content {
+            // Target is used for the Core experience.
+            // It permits us to hide elements server-side via CSS preventing Cumulative Shift but it is also a fully functional solution without Javascript
+            &:target{
+              .cp-expander__collapse{
+                display: block;
+              }
+              .cp-expander__expand{
+                display: none;
+              }
+            }
+          }
+      }
+      .cp-expander__expand,
+        .cp-expander__collapse {
+          display: block;
+          padding-bottom: oSpacingByName('s6');
+          > a {
+            $icon-color: oColorsByName('ft-grey');
+            --_o-typography-body-color: $icon-color;
+            font-feature-settings: 'clig' off, 'liga' off;
+            
+            @include oTypographyBody();
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 20px;
+            &:hover {
+              
+              cursor: pointer;
+            }
+      
+            &:after {
+              content: '';
+              @include oIconsContent('arrow-down', $icon-color, $size: 20);
+              padding: 0 4px;
+              vertical-align: middle;
+            }
+          }
+        }
+    
+        .cp-expander__collapse a:after {
+          transform: rotate(180deg);
+        }
+
+      .cp-expander-content {
+        display: flex;
+        flex-direction: column;
+      }
+
+      @include expandeAndCollapse;
+    
+
+}
+
+.cp-expander{
+  &.cp-expander--mobile-only {
+    .cp-expander__expand,
+    .cp-expander__collapse {
+      display: none;
+    }
+    @include oGridRespondTo($until: S) {
+        @include InnerStyles;
+    }
+  }
+
+  &.cp-expander--all-resolutions {
+    @include InnerStyles;
+  }
+}
+

package/src/components/Expander/index.tsx

@@ -0,0 +1,74 @@
+import classnames from 'classnames'
+import React from 'react'
+
+export interface ExpanderProps extends React.PropsWithChildren {
+  /** The initial state of the expander */
+  state?: 'expanded' | 'collapsed'
+  /** The label for the Expand CTA */
+  expandLabel?: string
+  /** The label for the collapse CTA */
+  collapseLabel?: string
+  /** Show the expander only on mobile resolutions  */
+  onlyMobile?: boolean
+  /** Id of the component */
+  id: string
+}
+// React functional component with children
+export const ExpanderServer: React.FC<ExpanderProps> = ({
+  state = 'collapsed', // default value for "state
+  children,
+  id,
+  expandLabel = 'Expand',
+  collapseLabel = 'Collapse',
+  onlyMobile = false,
+}) => {
+  return (
+    <div
+      className={classnames({
+        'cp-expander': true,
+        'cp-expander--mobile-only': onlyMobile,
+        'cp-expander--all-resolutions': !onlyMobile,
+        'cp-expander--not-initialised': true,
+      })}
+      data-component="expander"
+      data-state={state}
+      id={`${id}__container`}
+    >
+      <div id={id} className="cp-expander-content" aria-describedby={id}>
+        <div className="cp-expander__expand">
+          <a
+            data-trackable="truncated-post"
+            data-trackable-context-truncated-post="expand"
+            data-trackable-context-truncated-id={id}
+            className="cp-expander__link"
+            href={`#${id}`}
+            aria-expanded={state === 'expanded' ? true : false}
+            aria-controls={id}
+            aria-hidden={state === 'expanded' ? true : false}
+            data-action="expand"
+          >
+            {expandLabel}
+          </a>
+        </div>
+        {children}
+        <div className="cp-expander__collapse">
+          <a
+            data-trackable="truncated-post"
+            data-trackable-context-truncated-post="collapse"
+            data-trackable-context-truncated-id={id}
+            href={`#${id}__container`}
+            className="cp-expander__link"
+            aria-expanded={state === 'expanded' ? true : false}
+            aria-controls={id}
+            aria-hidden={state === 'expanded' ? false : true}
+            data-action="collapse"
+          >
+            {collapseLabel}
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ExpanderServer

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

@@ -0,0 +1,225 @@
+// 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

@@ -0,0 +1,129 @@
+// 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

@@ -0,0 +1,77 @@
+// 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()
+  })
+})