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

package/lib/stories/Expander.stories.js

@@ -1,142 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnlyMobileServer = exports.OnlyMobileWithClient = exports.WithClient = exports.OnlyServer = void 0;
-const Expander_1 = require("../components/Expander");
-const client_1 = require("../components/Expander/client");
-const react_1 = __importStar(require("react"));
-const main_1 = __importDefault(require("@financial-times/o-tracking/main"));
-require("./Expander.stories.scss");
-const client_2 = __importDefault(require("../components/Clip/client"));
-require("./Clip.stories.scss");
-const RichText_1 = __importDefault(require("../components/RichText"));
-const structuredContent = {
-    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. ',
-                },
-            ],
-        },
-        {
-            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. ',
-                },
-            ],
-        },
-        ,
-        {
-            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.  ',
-                },
-            ],
-        },
-        {
-            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,
-            },
-        },
-    ],
-};
-const storyArgs = {
-    expandLabel: 'Open',
-    collapseLabel: 'Close',
-    onlyMobile: false,
-    id: '111232323-12123-2323',
-};
-exports.default = {
-    title: 'Expander',
-    component: Expander_1.ExpanderServer,
-    tags: ['autodocs'],
-};
-const LiveBLogWrapper = (args) => {
-    const { classNames } = args;
-    return (react_1.default.createElement("div", { className: classNames },
-        react_1.default.createElement("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" },
-            react_1.default.createElement("div", { className: "article__content", "data-trackable": "article-body", "data-component": "article-body", style: { position: 'relative' } },
-                react_1.default.createElement("div", { className: "article__content-body n-content-body js-article__content-body", "data-attribute": "article-content-body" },
-                    react_1.default.createElement(LiveBlogPostWrapper, { ...args, id: "111" }))),
-            react_1.default.createElement("div", { className: "article__right " }))));
-};
-const LiveBlogPostWrapper = (args) => {
-    (0, react_1.useEffect)(() => {
-        main_1.default.init({
-            context: { product: 'next' },
-            test: true,
-        });
-        const clips = client_2.default.init(null, {});
-        return () => {
-            clips.forEach((clip) => clip.unload());
-        };
-    }, []);
-    return (react_1.default.createElement("article", { id: args.id },
-        react_1.default.createElement("div", { className: "n-content-body" },
-            react_1.default.createElement("div", { "data-trackable": "truncated-post", "data-trackable-context-post": "1234", "data-component": "example-boundary" },
-                react_1.default.createElement(Expander_1.ExpanderServer, { ...args, id: `${args.id}_expander` },
-                    react_1.default.createElement(RichText_1.default, { structuredContent: { tree: structuredContent } }))))));
-};
-const OnlyServer = (args) => {
-    return react_1.default.createElement(LiveBLogWrapper, { ...args });
-};
-exports.OnlyServer = OnlyServer;
-exports.OnlyServer.args = { ...storyArgs };
-const WithClient = (args) => {
-    (0, react_1.useEffect)(() => {
-        const clips = client_2.default.init(null, {});
-        const expanders = client_1.ExpanderClient.init();
-        return () => {
-            clips.forEach((clip) => clip.unload());
-            expanders.forEach((expander) => expander?.destroy());
-        };
-    }, []);
-    return react_1.default.createElement(LiveBLogWrapper, { ...args });
-};
-exports.WithClient = WithClient;
-exports.WithClient.args = { ...storyArgs };
-exports.OnlyMobileWithClient = exports.WithClient;
-exports.OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true };
-exports.OnlyMobileServer = exports.OnlyServer;
-exports.OnlyMobileServer.args = { ...storyArgs, onlyMobile: true };
-//# sourceMappingURL=Expander.stories.js.map

package/lib/stories/Expander.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expander.stories.js","sourceRoot":"","sources":["../../src/stories/Expander.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -1,197 +0,0 @@
-/**
- * trackEntireRead
- * @description Track the entire read of a truncated post
- * @param {HTMLElement} post - The post element
- */
-class TrackEntireRead {
-  private observer: IntersectionObserver | null = null
-  private readElement: Element | null
-  // data can be any key value pair that needs to be tracked
-  private data: Record<string, string>
-  constructor(readElement: Element, data: Record<string, string>) {
-    this.readElement = readElement as Element
-    this.data = data
-    this.init()
-  }
-
-  private init() {
-    //Intersection observer that observes readElement and when in view tracks the entire read
-    this.observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          this.handleEntireRead()
-          this.observer?.disconnect()
-        }
-      })
-    })
-    this.observer.observe(this.readElement as Element)
-  }
-
-  private handleEntireRead = () => {
-    const trackingData = {
-      action: 'entire_read',
-      ...this.data,
-    }
-    const event = new CustomEvent('oTracking.event', {
-      detail: trackingData,
-      bubbles: true,
-    })
-    document.body.dispatchEvent(event)
-  }
-
-  destroy(): void {
-    this.observer?.disconnect()
-    this.observer = null
-  }
-}
-export class ExpanderClient {
-  /**
-   * The container element for all the elements that should be showned or be hidden.
-   */
-  private container: Element | null
-
-  /**
-   * An optional element to which the expander will dispatch the events to.
-   * If not provided, events will not be dispatched.
-   */
-  private dispatchBoundary?: Element | Document | null
-
-  /**
-   * Element that will be showned at the end of the content when the expander is expanded.
-   * We use this to track when the entire post is read.
-   */
-  private endContent: Element | null
-
-  /**
-   * Track the entire read of a truncated post
-   */
-  private trackingEntireRead: TrackEntireRead
-
-  /**
-   * The button that will expand the content
-   */
-  private expanderButton: HTMLElement | null
-
-  /**
-   * The button that will collapse the content
-   */
-  private collapserButton: HTMLElement | null
-
-  /**
-   * The tracking data that will be sent when the entire post is read
-   */
-  private trackingData: Record<string, string>
-
-  /**
-   *
-   * @param el
-   * @param dispatchBoundary
-   */
-
-  constructor(
-    el: Element,
-    dispatchBoundary?: Element | Document | null,
-    trackingData?: Record<string, string>
-  ) {
-    this.container = el
-    this.trackingData = trackingData || {}
-    this.expanderButton = el.querySelector(
-      '.cp-expander__expand [data-action="expand"]'
-    ) as HTMLElement
-    this.collapserButton = el.querySelector(
-      '.cp-expander__collapse [data-action="collapse"]'
-    ) as HTMLElement
-    this.endContent = el.querySelector('.cp-expander__collapse')
-
-    this.expanderButton?.addEventListener('click', this.handleExpand)
-    this.collapserButton?.addEventListener('click', this.handleCollapse)
-
-    this.container.classList.replace(
-      'cp-expander--not-initialised',
-      'cp-expander--initialised'
-    )
-    this.dispatchBoundary = dispatchBoundary || this.container
-    ;(this.trackingData['post_id'] =
-      this.container
-        .querySelector('[data-trackable-context-truncated-id]')
-        ?.getAttribute('data-trackable-context-truncated-id') || ''),
-      (this.trackingEntireRead = new TrackEntireRead(
-        this.endContent as Element,
-        this.trackingData
-      ))
-  }
-
-  expand() {
-    this.container?.setAttribute('data-state', 'expanded')
-    this.dispatchBoundary?.dispatchEvent(
-      new CustomEvent('expander:expanded', {
-        bubbles: true,
-        detail: {
-          component: this.container,
-        },
-      })
-    )
-  }
-
-  collapse() {
-    this.container?.setAttribute('data-state', 'collapsed')
-    this.container?.scrollIntoView()
-    this.dispatchBoundary?.dispatchEvent(
-      new CustomEvent('expander:collapsed', {
-        bubbles: true,
-        detail: {
-          component: this.container,
-        },
-      })
-    )
-  }
-
-  private handleExpand = (e: Event) => {
-    e.preventDefault()
-    this.expand()
-    this.expanderButton?.setAttribute('aria-expanded', 'true')
-    this.expanderButton?.setAttribute('aria-hidden', 'true')
-    this.collapserButton?.setAttribute('aria-expanded', 'true')
-    this.collapserButton?.setAttribute('aria-hidden', 'false')
-  }
-  private handleCollapse = (e: Event) => {
-    e.preventDefault()
-    this.collapse()
-    this.expanderButton?.setAttribute('aria-expanded', 'false')
-    this.expanderButton?.setAttribute('aria-hidden', 'false')
-    this.collapserButton?.setAttribute('aria-expanded', 'false')
-    this.collapserButton?.setAttribute('aria-hidden', 'true')
-  }
-
-  destroy(): void {
-    this.container?.setAttribute('data-state', 'collapsed')
-    this.container
-      ?.querySelector('.cp-expander__expand')
-      ?.removeEventListener('click', this.expand)
-    this.container
-      ?.querySelector('.cp-expander__collapse')
-      ?.removeEventListener('click', this.collapse)
-    this.container?.classList.remove('cp-expander--initialised')
-    this.trackingEntireRead.destroy()
-  }
-
-  static init(data?: {
-    rootElement?: HTMLElement | null
-    dispatchBoundary?: Element | Document | null
-    trackingData?: Record<string, string>
-  }): ExpanderClient[] {
-    const { rootElement, dispatchBoundary, trackingData } = data || {}
-    const root = rootElement || document.body
-
-    return (Array.from(
-      root.querySelectorAll(
-        ':not(.cp-expander--initialised)[data-component="expander"]'
-      )
-    )?.map((el: Element) => {
-      if (!el.classList.contains('expander--initialised')) {
-        return new ExpanderClient(el, dispatchBoundary, trackingData)
-      }
-    }) || []) as ExpanderClient[]
-  }
-}
-export default ExpanderClient

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

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

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