@financial-times/cp-content-pipeline-ui 1.4.0 → 1.4.1

package/.babelrc.json

@@ -1,7 +1,6 @@
 {
   "sourceType": "unambiguous",
   "presets": [
-    "@babel/preset-typescript",   
     [
       "@babel/preset-env",
       {

package/jest.config.js

@@ -1,23 +1,6 @@
 const base = require('../../jest.config.base.js')
+
 module.exports = {
   ...base,
   testEnvironment: 'jsdom',
-  transformIgnorePatterns: [
-		// Need to transform all node from the FT
-		"/node_modules/(?!@financial-times)"
-	],
-	transform: {
-    ...base.transform,
-		'.(js)': '@sucrase/jest-plugin'
-	},
-	moduleNameMapper: {
-      ...base.moduleNameMapper,
-       '^@financial-times/o-expander$':
-            '<rootDir>/../../node_modules/@financial-times/o-expander/main.js',
-        '^@financial-times/o-viewport$':
-            '<rootDir>/../../node_modules/@financial-times/o-viewport/main.js',
-    }
-    ,
-    maxWorkers: '50%', // Adjust the number based on your CircleCI resources
-
 }

package/lib/components/Clip/index.d.ts

@@ -1,2 +1,2 @@
-import ClipComponent from './template/component';
+import { ClipComponent } from '@financial-times/n-clip/server/index.cjs';
 export default ClipComponent;

package/lib/components/Clip/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const component_1 = __importDefault(require("./template/component"));
-exports.default = component_1.default;
+const index_cjs_1 = require("@financial-times/n-clip/server/index.cjs");
+exports.default = index_cjs_1.ClipComponent;
 //# sourceMappingURL=index.js.map

package/lib/components/Clip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Clip/index.tsx"],"names":[],"mappings":";;;;;AAAA,qEAAgD;AAEhD,kBAAe,mBAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Clip/index.tsx"],"names":[],"mappings":";;AAAA,wEAAwE;AAExE,kBAAe,yBAAa,CAAA"}

package/lib/index.d.ts

@@ -16,4 +16,3 @@ export { default as Heading } from './components/Heading';
 export { default as Table } from './components/Table';
 export { default as Paragraph } from './components/Paragraph';
 export { List, ListItem, Link, Blockquote, LineBreak, HorizontalRule, Emphasis, Strong, Strikethrough, } from './components/RichText/BasicComponents';
-export { default as Clip } from './components/Clip/template/component';

package/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clip = exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.Paragraph = exports.Table = exports.Heading = exports.Tweet = exports.Pullquote = exports.Flourish = exports.RichText = exports.Recommended = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.ImageSet = exports.MainImage = exports.Byline = exports.ArticleInfo = exports.Topper = exports.LiveBlogBody = exports.ArticleBody = exports.Body = void 0;
+exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.Paragraph = exports.Table = exports.Heading = exports.Tweet = exports.Pullquote = exports.Flourish = exports.RichText = exports.Recommended = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.ImageSet = exports.MainImage = exports.Byline = exports.ArticleInfo = exports.Topper = exports.LiveBlogBody = exports.ArticleBody = exports.Body = void 0;
 var Body_1 = require("./components/Body");
 Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
 var ArticleBody_1 = require("./components/ArticleBody");
@@ -50,6 +50,4 @@ Object.defineProperty(exports, "HorizontalRule", { enumerable: true, get: functi
 Object.defineProperty(exports, "Emphasis", { enumerable: true, get: function () { return BasicComponents_1.Emphasis; } });
 Object.defineProperty(exports, "Strong", { enumerable: true, get: function () { return BasicComponents_1.Strong; } });
 Object.defineProperty(exports, "Strikethrough", { enumerable: true, get: function () { return BasicComponents_1.Strikethrough; } });
-var component_1 = require("./components/Clip/template/component");
-Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,sDAAmE;AAA1D,mHAAA,OAAO,OAAa;AAC7B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,yEAU8C;AAT5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA;AAEf,kEAAsE;AAA7D,kHAAA,OAAO,OAAQ"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,sDAAmE;AAA1D,mHAAA,OAAO,OAAa;AAC7B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,yEAU8C;AAT5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA"}

package/package.json

@@ -23,7 +23,7 @@
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-expander": "^6.2.6",
     "@financial-times/o-grid": "^6.1.5",
-    "@financial-times/o-icons": "^7.7.0",
+    "@financial-times/o-icons": "^7.6.0",
     "@financial-times/o-spacing": "^3.2.3",
     "@financial-times/o-tracking": "^4.5.0",
     "@financial-times/o-typography": "^7.4.1",
@@ -35,18 +35,15 @@
     "@storybook/react": "^7.0.24",
     "@storybook/react-webpack5": "^7.0.24",
     "@storybook/testing-library": "^0.2.0",
-    "@sucrase/jest-plugin": "^3.0.0",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.4.3",
     "@types/financial-times__n-scrollytelling-image": "0.0.0",
     "@types/react": "^18.0.15",
     "eslint-plugin-react": "^7.30.1",
-    "jest-environment-jsdom": "^29.6.1",
     "n-content-body": "^14.4.0",
     "prop-types": "^15.8.1",
+    "jest-environment-jsdom": "^29.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
     "sass": "^1.63.6",
     "storybook": "^7.0.24",
     "webpack": "^5.88.1"

package/src/components/Clip/clip.d.ts

@@ -0,0 +1,16 @@
+declare module '@financial-times/n-clip/server/index.cjs' {
+  export interface Props {
+    url: string
+    autoplay: boolean
+    loop: boolean
+    credits: string
+    poster: string
+    posterAlt: string
+    posterCredits: string
+    dataLayout: string
+    description: string
+    muted: boolean
+    caption: string
+  }
+  export function ClipComponent(props: Props): JSX.Element
+}

package/src/components/Clip/index.tsx

@@ -1,3 +1,3 @@
-import ClipComponent from './template/component'
+import { ClipComponent } from '@financial-times/n-clip/server/index.cjs'
 
 export default ClipComponent

package/src/index.ts

@@ -26,4 +26,3 @@ export {
   Strong,
   Strikethrough,
 } from './components/RichText/BasicComponents'
-export { default as Clip } from './components/Clip/template/component'

package/src/stories/Clip.stories.js

@@ -0,0 +1,43 @@
+import ClipServer from '../components/Clip'
+import ClipClient from '@financial-times/n-clip'
+import React, { useEffect } from 'react'
+import oTracking from '@financial-times/o-tracking/main'
+import './Clip.stories.scss'
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  title: 'Clip',
+  component: ClipServer,
+  tags: ['autodocs'],
+  argTypes: {
+    dataLayout: {
+      options: ['in-line', 'full-grid', 'mid-grid'],
+      control: { type: 'radio' },
+    },
+  },
+}
+export const Inline = (args) => {
+  useEffect(() => {
+    oTracking.init({
+      context: { product: 'next' },
+      test: true,
+    })
+
+    ClipClient.init()
+    return () => {
+      ClipClient.unload()
+    }
+  }, [])
+  return <div className='n-content-body'><ClipServer {...args} /></div>
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+Inline.args = {
+  url: 'https://next-media-api.ft.com/renditions/16777586039370/1280x720.mp4',
+  credits: 'FT',
+  poster:
+    'https://d1e00ek4ebabms.cloudfront.net/staging/52d850f7-99e0-44c4-b069-cd6d1284565f.jpg',
+  alt: 'Civilians hug Ukrainian soldiers in Balakliya town square',
+  dataLayout: 'in-line',
+  description:
+    "A lightning assault by Ukrainian forces in the first half of September decimated Russia's defences in north-eastern Ukraine.",
+}

package/src/stories/Clip.stories.scss

@@ -1,309 +1,3 @@
-// Load fonts for demos that we rely on being in the consuming apps
-@import '@financial-times/o-fonts/main';
-@include oFonts($opts: ('recommended': true));
-
-body {
-  overflow-x: hidden;
-  background-color: #fff1e5;
-  color: #33302e;
-}
-
-body,
-figure {
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-$o-brand: 'core';
-$o-typography-load-fonts: false;
-@import "@financial-times/o-typography/main";
-@import '@financial-times/o-normalise/main';
-@import '@financial-times/o-grid/main';
-
-
-@include oNormalise((
-    'body': (
-  			'font-smoothing'
-  	),
-));
-
-.article__media {
-	margin-bottom: 20px;
-
-	audio,
-	video {
-		width: 100%;
-	}
-}
-
-.n-content-body > .n-content-blockquote,
-.n-content-body > p {
-	@include oTypographySans(
-		$scale: (
-			default: 1,
-			XL: 2
-		),
-		$line-height: 1.6,
-		$include-font-family: false
-	);
-}
-
-//Give a background to responsive graphics so they appear above sticky elements
-.n-content-picture {
-	background-color: oColorsByUsecase(page, background);
-}
-
-//Full bleed elements - amend the positioning to match grid
-.n-content-layout[data-layout-width='full-grid'] {
-	@include oGridRespondTo(L) {
-		left: calc(50% + 120px);
-		z-index: 2; // keep above share button & ads
-	}
-}
-
-// Full bleed elements on centered template
-.article-grid--centered {
-	.n-content-layout[data-layout-width='full-grid'] {
-		@include oGridRespondTo(L) {
-			left: 50%;
-			z-index: 2; // keep above share button & ads
-		}
-	}
-}
-
-
-// Contains grid container setup, and positioning of elements within the grid.
-
-//This file is included in multiple places, so don't include actual CSS
-
-@mixin articleGrid() {
-	@include oGridContainer();
-	max-width: 100%;
-	display: flex;
-	flex-direction: column;
-
-	@include oGridRespondTo(L) {
-		display: grid;
-		grid-template-columns: 40px 40px minmax(500px, 700px) minmax(20px, 1fr) 300px;
-
-		grid-template-areas: 'lhr . image . rhr-top'
-			'lhr . content . rhr-top'
-			'lhr . content . rhr-bottom'
-			'. . tools . rhr-bottom'
-			'more-articles more-articles more-articles more-articles more-articles'
-			'. . onward . onward-rhr'
-			'. . second-onward . onward-rhr'
-			'. . promoted-content . .'
-			'. . comments . comments-rhr';
-		width: 100%;
-	}
-
-	@include oGridRespondTo(XL) {
-		grid-template-columns: 40px 80px minmax(600px, 700px) minmax(20px, 1fr) 300px;
-	}
-}
-
-@mixin articleGridCentered() {
-	@include oGridRespondTo(L) {
-		grid-template-columns: 40px 1fr minmax(500px, 700px) 1fr 40px;
-	}
-
-	@include oGridRespondTo(XL) {
-		grid-template-columns: 1fr 40px minmax(500px, 700px) 40px 1fr;
-	}
-}
-
-@mixin liveBlogArticleGrid() {
-	@include oGridRespondTo(L) {
-		grid-template-areas: 'lhr . content . rhr-top'
-			'lhr . content . rhr-bottom'
-			'. . comments . comments-rhr';
-	}
-}
-
-
-.article-content {
-	display: grid;
-	grid-template-columns: 100%;
-	grid-template-areas: 'topper'
-		'article-body';
-}
-
-.article-grid {
-	grid-area: article-body;
-
-	@include articleGrid();
-	margin: 20px auto;
-
-	.main-image {
-		grid-area: image;
-	}
-
-	.share-nav {
-		grid-area: lhr;
-		z-index: 7;
-	}
-
-	.article__content {
-		margin-bottom: oSpacingByName('s6');
-		grid-area: content;
-		max-width: 700px;
-		width: 100%;
-		position: relative; //so scroll depth tracking works
-		@supports (display: grid) {
-			max-width: auto;
-		}
-	}
-
-	.article__content-body {
-		@include oNormaliseClearfix();
-	}
-
-	.article__right {
-		grid-area: rhr-top;
-		margin: 0 auto;
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-
-		// Create a stacking context to prevent ad content from setting a z-index that overlays our content
-		position: relative;
-		z-index: 1;
-
-		> .sidebar-advert {
-			margin-bottom: oSpacingByName('s6');
-		}
-
-		> .sidebar-advert.o-ads-sticky {
-			// HACK: @supports (position: sticky) is misreported by MSEdge
-			// @supports (-webkit-appearance:none) allows us to target the browsers
-			// that do support it more accurately
-			// Further details:
-			// <https://github.com/Financial-Times/next-article/pull/3466>
-			@supports (-webkit-appearance: none) {
-				position: sticky;
-				top: 80px;
-			}
-		}
-
-		@include oGridRespondTo($until: L) {
-			display: none;
-		}
-	}
-
-	.article__right--live {
-		display: flex; // always show it, on mobile as well
-		.live-latest,
-		.live-milestones {
-			order: -1; // move this above the ad
-		}
-	}
-
-	.article__right--live-splash {
-		order: -1; // on mobile, move this column above the content (visually only)
-	}
-
-	.article-tools {
-		margin-bottom: oSpacingByName('s8');
-		padding: oSpacingByName('s6') 0 oSpacingByName('s6') 0;
-		grid-area: tools;
-		border-bottom: 1px solid #ccc1b7;
-		border-top: 1px solid #ccc1b7;
-
-		@include oGridRespondTo($from: M) {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-	}
-
-	.promoted-content__container {
-		grid-area: promoted-content;
-	}
-
-	.bottom-advert {
-		@include oGridRespondTo($until: L) {
-			display: none;
-		}
-	}
-
-	.show-in-large-and-above {
-		@include oGridRespondTo($until: L) {
-			display: none;
-		}
-	}
-
-	.ad-rhr-bottom {
-		display: flex;
-		flex: 1;
-		align-items: flex-end;
-		padding-bottom: 60px;
-	}
-
-	@mixin tintedBackgroundBefore() {
-		position: relative;
-		&:before {
-			content: '';
-			position: absolute;
-			background: oColorsByName('black-5');
-			width: 100vw;
-			margin-left: -50vw;
-			left: 50%;
-			height: 100%;
-			z-index: -1;
-		}
-	}
-
-	.article__right-bottom {
-		grid-area: rhr-bottom;
-		align-self: start;
-		z-index: 1; // grid & flex items both support `z-index` directly
-
-		display: flex;
-		flex-direction: column;
-
-		padding: 0 10px;
-
-		@include oGridRespondTo($until: L) {
-			@include tintedBackgroundBefore();
-		}
-
-		.article-grid--centered & {
-			@include oGridRespondTo(L) {
-				@include tintedBackgroundBefore();
-			}
-		}
-	}
-
-	// Increased specificity to fix IE11 issue where generated CSS was targetting incorrect elements
-	&.article-grid--centered,
-	&.article-grid--full-width-graphics {
-		> .article__right-bottom {
-			grid-area: second-onward;
-			padding: 0;
-		}
-	}
-}
-
-.article-grid--centered {
-	@include articleGridCentered();
-	.article__right,
-	.bottom-advert,
-	.onward-myft {
-		display: none;
-	}
-}
-
-.hidden {
-	display: none !important;
-}
-
-.article-grid--live-blog {
-	@include liveBlogArticleGrid();
-}
-
-
-
 $system-code: "n-clip-demo";
 @import "@financial-times/o-colors/main";
 @import "@financial-times/o-grid/main";
@@ -315,7 +9,7 @@ $system-code: "n-clip-demo";
 // HACK: n-content-body _should not_ include n-ui-foundations
 $n-ui-foundations-is-silent: true;
 @import 'n-content-body/main';
-@import "../components/Clip/client/main.scss";
+@import "@financial-times/n-clip/client/main";
 
 $desktop-breakpoint: 980px;
 
@@ -347,8 +41,4 @@ $desktop-breakpoint: 980px;
   // Adding this only for local development given the image will only be available for the mobile App
   // It will be cache via https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxzdHlsZT4qe2ZpbGw6I0ZGRkZGRiFpbXBvcnRhbnQ7fTwvc3R5bGU+PHBhdGggZD0iTTY5Ny40IDc1OS4ybDYxLjgtNjEuOEw1NzMuOCA1MTJsMTg1LjQtMTg1LjQtNjEuOC02MS44TDUxMiA0NTAuMiAzMjYuNiAyNjQuOGwtNjEuOCA2MS44TDQ1MC4yIDUxMiAyNjQuOCA2OTcuNGw2MS44IDYxLjhMNTEyIDU3My44eiIvPjwvc3ZnPg==") !important;
-}
-
-.o-clip .video-meta-info .o-expander__toggle[aria-expanded=true]:after {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxzdHlsZT4qe2ZpbGw6IzAwMDAwMCFpbXBvcnRhbnQ7fTwvc3R5bGU+PHBhdGggZD0iTTY5Ny40IDc1OS4ybDYxLjgtNjEuOEw1NzMuOCA1MTJsMTg1LjQtMTg1LjQtNjEuOC02MS44TDUxMiA0NTAuMiAzMjYuNiAyNjQuOGwtNjEuOCA2MS44TDQ1MC4yIDUxMiAyNjQuOCA2OTcuNGw2MS44IDYxLjhMNTEyIDU3My44eiIvPjwvc3ZnPg==") !important;
 }