@financial-times/cp-content-pipeline-ui 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +2 -1
  3. package/lib/components/ImageSet/index.d.ts +2 -1
  4. package/lib/components/ImageSet/index.js +7 -3
  5. package/lib/components/ImageSet/index.js.map +1 -1
  6. package/lib/components/Paragraph/index.d.ts +2 -2
  7. package/lib/components/Paragraph/index.js +3 -2
  8. package/lib/components/Paragraph/index.js.map +1 -1
  9. package/lib/components/Scrollytelling/ScrollyImage.js +27 -6
  10. package/lib/components/Scrollytelling/ScrollyImage.js.map +1 -1
  11. package/lib/components/Scrollytelling/index.d.ts +1 -1
  12. package/lib/components/Scrollytelling/index.js +10 -10
  13. package/lib/components/Scrollytelling/index.js.map +1 -1
  14. package/lib/components/Table/TableCell.js +27 -3
  15. package/lib/components/Table/TableCell.js.map +1 -1
  16. package/package.json +3 -3
  17. package/src/components/ImageSet/index.tsx +24 -13
  18. package/src/components/Paragraph/index.tsx +7 -11
  19. package/src/components/Scrollytelling/ScrollyImage.tsx +25 -26
  20. package/src/components/Scrollytelling/index.tsx +46 -55
  21. package/src/components/Table/TableCell.tsx +32 -37
  22. package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -363,6 +363,28 @@
363
363
  * @financial-times/cp-content-pipeline-client bumped from ^1.3.11 to ^1.3.12
364
364
  * @financial-times/cp-content-pipeline-schema bumped from ^1.3.8 to ^1.3.9
365
365
 
366
+ ## [3.0.3](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.0.2...cp-content-pipeline-ui-v3.0.3) (2023-09-29)
367
+
368
+
369
+ ### Bug Fixes
370
+
371
+ * too large image sizes ([1b7bea0](https://github.com/Financial-Times/cp-content-pipeline/commit/1b7bea03bca604e31a2982713d2c146f5463b03e))
372
+
373
+
374
+ ### Dependencies
375
+
376
+ * The following workspace dependencies were updated
377
+ * devDependencies
378
+ * @financial-times/cp-content-pipeline-client bumped from ^2.0.0 to ^2.0.1
379
+ * @financial-times/cp-content-pipeline-schema bumped from ^1.4.0 to ^1.4.1
380
+
381
+ ## [3.0.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.0.1...cp-content-pipeline-ui-v3.0.2) (2023-09-28)
382
+
383
+
384
+ ### Documentation
385
+
386
+ * update ui readme to trigger release ([2b12d81](https://github.com/Financial-Times/cp-content-pipeline/commit/2b12d810ccac9eca67bd7242a447ae1f18f9f78f))
387
+
366
388
  ## [3.0.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.0.0...cp-content-pipeline-ui-v3.0.1) (2023-09-28)
367
389
 
368
390
 
package/README.md CHANGED
@@ -47,6 +47,7 @@ const componentOverrides = {
47
47
  Each Component in this package contains a function which returns a JSX object. Components can be combined to form content views which can be rendered on ft.com, the apps or the edit. Components may be nested, for example the `<Body>` pulls in other components to form a complete article Body.
48
48
 
49
49
  ## Storybook
50
+
50
51
  You can visually test the ui components on Storyboook running the following command:
51
52
 
52
53
  ```
@@ -90,7 +91,7 @@ Our [Schema](../schema/README.md) package uses converts a `bodyXML` from the con
90
91
 
91
92
  ### What is a Content Tree?
92
93
 
93
- [Content Tree] is a format for representing Financial Times article content as a JSON tree (following the [unist](https://github.com/syntax-tree/unist) spec).
94
+ [Content Tree](https://github.com/Financial-Times/content-tree) is a format for representing Financial Times article content as a JSON tree (following the [unist](https://github.com/syntax-tree/unist) spec).
94
95
 
95
96
  It is a shared contract between [Spark](https://biz-ops.in.ft.com/Team/digitalnewsroomsupport) and [Customer Products](https://biz-ops.in.ft.com/Group/customerproducts) defining what the content should look like, so that it can be used to both preview and render an article.
96
97
 
package/lib/components/ImageSet/index.d.ts CHANGED
@@ -15,11 +15,12 @@ type SourcesProps = {
15
15
  getBreakpoints?: BreakpointGetter;
16
16
  };
17
17
  export declare function Sources({ images, getBreakpoints }: SourcesProps): React.JSX.Element;
18
- export declare function FallbackImage({ image, imageType, picture, className, }: {
18
+ export declare function FallbackImage({ image, imageType, picture, className, inSourceSet, }: {
19
19
  image: ImageFragment;
20
20
  imageType: string;
21
21
  picture?: PictureFragment;
22
22
  className?: string;
23
+ inSourceSet?: boolean;
23
24
  }): React.JSX.Element;
24
25
  export default function ImageSet(imageSet: ImageSetFragment): React.JSX.Element | null;
25
26
  export {};
package/lib/components/ImageSet/index.js CHANGED
@@ -55,8 +55,12 @@ function Sources({ images, getBreakpoints }) {
55
55
  }
56
56
  exports.Sources = Sources;
57
57
  // TODO should `fallback` be added to content-tree imageset?
58
- function FallbackImage({ image, imageType = 'image', picture, className, }) {
59
- return (react_1.default.createElement("img", { src: hasSourceSet(image) ? image.sourceSet[0].url : image?.url ?? undefined, srcSet: hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined, alt: picture?.alt ?? '', "data-image-type": imageType, width: image.width ?? undefined, height: image.height ?? undefined, className: className }));
58
+ function FallbackImage({ image, imageType = 'image', picture, className, inSourceSet = false, }) {
59
+ const Wrapper = inSourceSet
60
+ ? react_1.default.Fragment
61
+ : ({ children }) => (react_1.default.createElement("figure", { className: "n-content-image" }, children));
62
+ return (react_1.default.createElement(Wrapper, null,
63
+ react_1.default.createElement("img", { src: hasSourceSet(image) ? image.sourceSet[0].url : image?.url ?? undefined, srcSet: hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined, alt: picture?.alt ?? '', "data-image-type": imageType, width: image.width ?? undefined, height: image.height ?? undefined, className: className })));
60
64
  }
61
65
  exports.FallbackImage = FallbackImage;
62
66
  function ImageSet(imageSet) {
@@ -72,7 +76,7 @@ function ImageSet(imageSet) {
72
76
  'n-content-image' },
73
77
  react_1.default.createElement("picture", null,
74
78
  react_1.default.createElement(Sources, { images: imageSet.picture.images }),
75
- react_1.default.createElement(FallbackImage, { picture: imageSet.picture, image: imageSet.picture.fallbackImage, imageType: imageSet.picture.imageType || 'image' })),
79
+ react_1.default.createElement(FallbackImage, { picture: imageSet.picture, image: imageSet.picture.fallbackImage, imageType: imageSet.picture.imageType || 'image', inSourceSet: true })),
76
80
  (imageSet.picture.caption || imageSet.picture.credit) && (react_1.default.createElement("figcaption", { className: "n-content-picture__caption" },
77
81
  react_1.default.createElement("span", null, imageSet.picture.caption),
78
82
  react_1.default.createElement("span", null,
package/lib/components/ImageSet/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageSet/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageSet/index.tsx"],"names":[],"mappings":"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"}
package/lib/components/Paragraph/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ContentTree } from '@financial-times/content-tree';
2
2
  import React from 'react';
3
3
  export declare const ParagraphContext: React.Context<{
4
- className?: string | undefined;
5
- } | undefined>;
4
+ className: string;
5
+ } | null>;
6
6
  export default function Paragraph(props: React.PropsWithChildren<ContentTree.Paragraph>): React.JSX.Element;
package/lib/components/Paragraph/index.js CHANGED
@@ -25,9 +25,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.ParagraphContext = void 0;
27
27
  const react_1 = __importStar(require("react"));
28
- exports.ParagraphContext = (0, react_1.createContext)(undefined);
28
+ exports.ParagraphContext = (0, react_1.createContext)(null);
29
29
  function Paragraph(props) {
30
- return (react_1.default.createElement(exports.ParagraphContext.Consumer, null, ({ className } = { className: undefined }) => (react_1.default.createElement("p", { ...{ className } }, props.children))));
30
+ const { className } = (0, react_1.useContext)(exports.ParagraphContext) ?? { className: undefined };
31
+ return react_1.default.createElement("p", { ...{ className } }, props.children);
31
32
  }
32
33
  exports.default = Paragraph;
33
34
  //# sourceMappingURL=index.js.map
package/lib/components/Paragraph/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA4C;AAE/B,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAE3C,SAAS,CAAC,CAAA;AAEZ,SAAwB,SAAS,CAC/B,KAAqD;IAErD,OAAO,CACL,8BAAC,wBAAgB,CAAC,QAAQ,QACvB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC7C,wCAAO,EAAE,SAAS,EAAE,IAAG,KAAK,CAAC,QAAQ,CAAK,CAC3C,CACyB,CAC7B,CAAA;AACH,CAAC;AAVD,4BAUC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAwD;AAE3C,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAC3C,IAAI,CACL,CAAA;AAED,SAAwB,SAAS,CAC/B,KAAqD;IAErD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;IAE9E,OAAO,wCAAO,EAAE,SAAS,EAAE,IAAG,KAAK,CAAC,QAAQ,CAAK,CAAA;AACnD,CAAC;AAND,4BAMC"}
package/lib/components/Scrollytelling/ScrollyImage.js CHANGED
@@ -1,10 +1,30 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
4
24
  };
5
25
  Object.defineProperty(exports, "__esModule", { value: true });
6
26
  exports.ScrollyImage = void 0;
7
- const react_1 = __importDefault(require("react"));
27
+ const react_1 = __importStar(require("react"));
8
28
  const ImageSet_1 = require("../ImageSet");
9
29
  const _1 = require(".");
10
30
  const scrollyGetBreakpoints = (image) => {
@@ -26,16 +46,17 @@ const scrollyGetBreakpoints = (image) => {
26
46
  }
27
47
  };
28
48
  function ScrollyImage({ picture, }) {
49
+ const scrollyId = (0, react_1.useContext)(_1.ScrollyIDContext);
29
50
  if (!picture?.images) {
30
51
  throw new Error(`ScrollyImage has no images. Check that they are present in the query`);
31
52
  }
32
- return (react_1.default.createElement(_1.ScrollyIDContext.Consumer, null, (scrollyId) => (react_1.default.createElement("figure", { className: "n-scrollytelling__figure n-content-image--full", "data-scrollytelling-slide": scrollyId },
53
+ return (react_1.default.createElement("figure", { className: "n-scrollytelling__figure n-content-image--full", "data-scrollytelling-slide": scrollyId },
33
54
  react_1.default.createElement("picture", null,
34
55
  react_1.default.createElement(ImageSet_1.Sources, { images: picture.images, getBreakpoints: scrollyGetBreakpoints }),
35
- react_1.default.createElement(ImageSet_1.FallbackImage, { image: picture.fallbackImage, imageType: picture.imageType, className: "n-scrollytelling__image" })),
56
+ react_1.default.createElement(ImageSet_1.FallbackImage, { image: picture.fallbackImage, imageType: picture.imageType, className: "n-scrollytelling__image", inSourceSet: true })),
36
57
  (picture.caption || picture.credit) && (react_1.default.createElement("figcaption", { className: "n-scrollytelling__caption n-scrollytelling__caption--has-caption" },
37
58
  picture.caption ? picture.caption + ' ' : '',
38
- picture.credit ? `© ${picture.credit}` : ''))))));
59
+ picture.credit ? `© ${picture.credit}` : ''))));
39
60
  }
40
61
  exports.ScrollyImage = ScrollyImage;
41
62
  //# sourceMappingURL=ScrollyImage.js.map
package/lib/components/Scrollytelling/ScrollyImage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollyImage.js","sourceRoot":"","sources":["../../../src/components/Scrollytelling/ScrollyImage.tsx"],"names":[],"mappings":";;;;;;AAEA,kDAAyB;AACzB,0CAAsE;AACtE,wBAAoC;AAEpC,MAAM,qBAAqB,GAAqB,CAAC,KAAK,EAAE,EAAE;IACxD,QAAQ,KAAK,CAAC,MAAM,EAAE;QACpB,KAAK,SAAS;YACZ,OAAO;gBACL,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE;gBAC9C,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE;gBAC9C,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE;gBAC/C,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE;aACjD,CAAA;QACH,KAAK,QAAQ;YACX,OAAO;gBACL,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE;gBAC7C,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE;gBAC7C,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE;gBAC7C,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE;aAChD,CAAA;KACJ;AACH,CAAC,CAAA;AAED,SAAgB,YAAY,CAAC,EAC3B,OAAO,GACyC;IAChD,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE;QACpB,MAAM,IAAI,KAAK,CACb,sEAAsE,CACvE,CAAA;KACF;IAED,OAAO,CACL,8BAAC,mBAAgB,CAAC,QAAQ,QACvB,CAAC,SAAS,EAAE,EAAE,CAAC,CACd,0CACE,SAAS,EAAC,gDAAgD,+BAC/B,SAAS;QAEpC;YACE,8BAAC,kBAAO,IACN,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,cAAc,EAAE,qBAAqB,GACrC;YACF,8BAAC,wBAAa,IACZ,KAAK,EAAE,OAAO,CAAC,aAAa,EAC5B,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,SAAS,EAAC,yBAAyB,GACnC,CACM;QACT,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CACtC,8CAAY,SAAS,EAAC,kEAAkE;YACrF,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5C,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CACjC,CACd,CACM,CACV,CACyB,CAC7B,CAAA;AACH,CAAC;AArCD,oCAqCC"}
1
+ {"version":3,"file":"ScrollyImage.js","sourceRoot":"","sources":["../../../src/components/Scrollytelling/ScrollyImage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,+CAAyC;AACzC,0CAAsE;AACtE,wBAAoC;AAEpC,MAAM,qBAAqB,GAAqB,CAAC,KAAK,EAAE,EAAE;IACxD,QAAQ,KAAK,CAAC,MAAM,EAAE;QACpB,KAAK,SAAS;YACZ,OAAO;gBACL,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE;gBAC9C,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE;gBAC9C,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE;gBAC/C,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE;aACjD,CAAA;QACH,KAAK,QAAQ;YACX,OAAO;gBACL,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE;gBAC7C,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE;gBAC7C,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE;gBAC7C,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE;aAChD,CAAA;KACJ;AACH,CAAC,CAAA;AAED,SAAgB,YAAY,CAAC,EAC3B,OAAO,GACyC;IAChD,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,mBAAgB,CAAC,CAAA;IAE9C,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE;QACpB,MAAM,IAAI,KAAK,CACb,sEAAsE,CACvE,CAAA;KACF;IAED,OAAO,CACL,0CACE,SAAS,EAAC,gDAAgD,+BAC/B,SAAS;QAEpC;YACE,8BAAC,kBAAO,IACN,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,cAAc,EAAE,qBAAqB,GACrC;YACF,8BAAC,wBAAa,IACZ,KAAK,EAAE,OAAO,CAAC,aAAa,EAC5B,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,SAAS,EAAC,yBAAyB,EACnC,WAAW,EAAE,IAAI,GACjB,CACM;QACT,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CACtC,8CAAY,SAAS,EAAC,kEAAkE;YACrF,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5C,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CACjC,CACd,CACM,CACV,CAAA;AACH,CAAC;AApCD,oCAoCC"}
package/lib/components/Scrollytelling/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { FC, PropsWithChildren } from 'react';
2
2
  import type { ContentTree } from '@financial-times/content-tree';
3
- export declare const ScrollyIDContext: React.Context<string | undefined>;
3
+ export declare const ScrollyIDContext: React.Context<string | null>;
4
4
  export declare const ScrollyBlock: FC<PropsWithChildren<Omit<ContentTree.ScrollyBlock, 'children'>> & {
5
5
  parentIndex: number;
6
6
  }>;
package/lib/components/Scrollytelling/index.js CHANGED
@@ -30,22 +30,22 @@ exports.ScrollyHeading = exports.ScrollyCopy = exports.ScrollySection = exports.
30
30
  const react_1 = __importStar(require("react"));
31
31
  const classnames_1 = __importDefault(require("classnames"));
32
32
  const Paragraph_1 = require("../Paragraph");
33
- exports.ScrollyIDContext = (0, react_1.createContext)(undefined);
33
+ exports.ScrollyIDContext = (0, react_1.createContext)(null);
34
34
  const ScrollyBlock = ({ children, theme, parentIndex }) => (react_1.default.createElement("div", { className: "n-content-layout n-content-layout--scrollytelling", "data-layout-name": "auto" },
35
35
  react_1.default.createElement("div", { className: (0, classnames_1.default)('n-scrollytelling', `n-scrollytelling--theme-${theme}`), "data-component": "scrollytelling-image", "data-scrollytelling-theme": theme },
36
36
  react_1.default.createElement("div", { className: "n-scrollytelling__viewport" }, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(exports.ScrollyIDContext.Provider, { value: `${parentIndex}-${index}` }, child)))))));
37
37
  exports.ScrollyBlock = ScrollyBlock;
38
- const ScrollySectionOptionsContext = (0, react_1.createContext)(undefined);
38
+ const ScrollySectionOptionsContext = (0, react_1.createContext)(null);
39
39
  const ScrollySection = ({ children, display, noBox, position, transition }) => (react_1.default.createElement(ScrollySectionOptionsContext.Provider, { value: { display, noBox, position, transition } },
40
40
  react_1.default.createElement(react_1.default.Fragment, null, children)));
41
41
  exports.ScrollySection = ScrollySection;
42
- const ScrollyCopy = ({ children, }) => (react_1.default.createElement(exports.ScrollyIDContext.Consumer, null, (scrollyId) => (react_1.default.createElement(ScrollySectionOptionsContext.Consumer, null, ({ display, noBox, position, transition } = {
43
- display: 'dark-background',
44
- position: 'center',
45
- }) => {
46
- const displaySuffix = display === 'dark-background'
47
- ? 'background-dark'
48
- : 'background-light';
42
+ const ScrollyCopy = ({ children, }) => {
43
+ const { display, noBox, position, transition } = (0, react_1.useContext)(ScrollySectionOptionsContext) ?? {
44
+ display: 'dark-background',
45
+ position: 'center',
46
+ };
47
+ const scrollyId = (0, react_1.useContext)(exports.ScrollyIDContext);
48
+ const displaySuffix = display === 'dark-background' ? 'background-dark' : 'background-light';
49
49
  return (react_1.default.createElement("div", { className: (0, classnames_1.default)('n-scrollytelling__overlay-text-slide', `n-scrollytelling__overlay-text-slide--position-${position}`, {
50
50
  'n-scrollytelling__overlay-text-slide-box--transparent': noBox,
51
51
  [`n-scrollytelling__overlay-text-slide-box--${displaySuffix}`]: display,
@@ -57,7 +57,7 @@ const ScrollyCopy = ({ children, }) => (react_1.default.createElement(exports.Sc
57
57
  }) },
58
58
  react_1.default.createElement(Paragraph_1.ParagraphContext.Provider, { value: { className: 'n-scrollytelling__overlay-text' } },
59
59
  react_1.default.createElement(react_1.default.Fragment, null, children)))));
60
- }))));
60
+ };
61
61
  exports.ScrollyCopy = ScrollyCopy;
62
62
  const ScrollyHeading = ({ children, level }) => {
63
63
  const classNames = (0, classnames_1.default)('n-scrollytelling__overlay-text', `n-scrollytelling__overlay-text--text-style-${level}`);
package/lib/components/Scrollytelling/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scrollytelling/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scrollytelling/index.tsx"],"names":[],"mappings":"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"}
package/lib/components/Table/TableCell.js CHANGED
@@ -1,13 +1,37 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
5
28
  Object.defineProperty(exports, "__esModule", { value: true });
6
29
  exports.TableCell = void 0;
7
- const react_1 = __importDefault(require("react"));
30
+ const react_1 = __importStar(require("react"));
8
31
  const _1 = require(".");
9
32
  const classnames_1 = __importDefault(require("classnames"));
10
- const TableCell = (props) => (react_1.default.createElement(_1.ColumnSettingsContext.Consumer, null, (allColumnSettings) => {
33
+ const TableCell = (props) => {
34
+ const allColumnSettings = (0, react_1.useContext)(_1.ColumnSettingsContext);
11
35
  const columnSettings = allColumnSettings[props.parentIndex] ?? {
12
36
  hideOnMobile: false,
13
37
  sortable: false,
@@ -18,6 +42,6 @@ const TableCell = (props) => (react_1.default.createElement(_1.ColumnSettingsCon
18
42
  'o-table__cell--numeric': columnSettings.sortType === 'number',
19
43
  'n-content-body__table-cell--hide-mobile': columnSettings.hideOnMobile,
20
44
  }) }, props.children));
21
- }));
45
+ };
22
46
  exports.TableCell = TableCell;
23
47
  //# sourceMappingURL=TableCell.js.map
package/lib/components/Table/TableCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAEzB,wBAAyC;AAEzC,4DAAmC;AAE5B,MAAM,SAAS,GAAG,CACvB,KAEC,EACD,EAAE,CAAC,CACH,8BAAC,wBAAqB,CAAC,QAAQ,QAC5B,CAAC,iBAAiB,EAAE,EAAE;IACrB,MAAM,cAAc,GAAwB,iBAAiB,CAC3D,KAAK,CAAC,WAAW,CAClB,IAAI;QACH,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,KAAK;KAChB,CAAA;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACrB,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,yCAAyC,EACvC,cAAc,CAAC,YAAY;SAC9B,CAAC,0BACoB,cAAc,CAAC,QAAQ,4BACrB,cAAc,CAAC,QAAQ,EAC/C,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,cAAc,IAElB,KAAK,CAAC,QAAQ,CACZ,CACN,CAAC,CAAC,CAAC,CACF,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,wBAAwB,EAAE,cAAc,CAAC,QAAQ,KAAK,QAAQ;YAC9D,yCAAyC,EACvC,cAAc,CAAC,YAAY;SAC9B,CAAC,IAED,KAAK,CAAC,QAAQ,CACZ,CACN,CAAA;AACH,CAAC,CAC8B,CAClC,CAAA;AAxCY,QAAA,SAAS,aAwCrB"}
1
+ {"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AAEzC,wBAAyC;AAEzC,4DAAmC;AAE5B,MAAM,SAAS,GAAG,CACvB,KAEC,EACD,EAAE;IACF,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,wBAAqB,CAAC,CAAA;IAC3D,MAAM,cAAc,GAAwB,iBAAiB,CAC3D,KAAK,CAAC,WAAW,CAClB,IAAI;QACH,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,KAAK;KAChB,CAAA;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACrB,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,yCAAyC,EAAE,cAAc,CAAC,YAAY;SACvE,CAAC,0BACoB,cAAc,CAAC,QAAQ,4BACrB,cAAc,CAAC,QAAQ,EAC/C,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,cAAc,IAElB,KAAK,CAAC,QAAQ,CACZ,CACN,CAAC,CAAC,CAAC,CACF,sCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,wBAAwB,EAAE,cAAc,CAAC,QAAQ,KAAK,QAAQ;YAC9D,yCAAyC,EAAE,cAAc,CAAC,YAAY;SACvE,CAAC,IAED,KAAK,CAAC,QAAQ,CACZ,CACN,CAAA;AACH,CAAC,CAAA;AAnCY,QAAA,SAAS,aAmCrB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/cp-content-pipeline-ui",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -17,8 +17,8 @@
17
17
  "@babel/preset-react": "^7.22.5",
18
18
  "@dotcom-tool-kit/npm": "^3.1.4",
19
19
  "@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
20
- "@financial-times/cp-content-pipeline-client": "^2.0.0",
21
- "@financial-times/cp-content-pipeline-schema": "^1.4.0",
20
+ "@financial-times/cp-content-pipeline-client": "^2.0.1",
21
+ "@financial-times/cp-content-pipeline-schema": "^1.4.1",
22
22
  "@financial-times/n-scrollytelling-image": "^1.1.0",
23
23
  "@financial-times/o-colors": "^6.6.2",
24
24
  "@financial-times/o-expander": "^6.2.6",
package/src/components/ImageSet/index.tsx CHANGED
@@ -133,26 +133,36 @@ export function FallbackImage({
133
133
  imageType = 'image',
134
134
  picture,
135
135
  className,
136
+ inSourceSet = false,
136
137
  }: {
137
138
  image: ImageFragment
138
139
  imageType: string
139
140
  picture?: PictureFragment
140
141
  className?: string
142
+ inSourceSet?: boolean
141
143
  }) {
144
+ const Wrapper = inSourceSet
145
+ ? React.Fragment
146
+ : ({ children }: PropsWithChildren) => (
147
+ <figure className="n-content-image">{children}</figure>
148
+ )
149
+
142
150
  return (
143
- <img
144
- src={
145
- hasSourceSet(image) ? image.sourceSet[0].url : image?.url ?? undefined
146
- }
147
- srcSet={
148
- hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined
149
- }
150
- alt={picture?.alt ?? ''}
151
- data-image-type={imageType}
152
- width={image.width ?? undefined}
153
- height={image.height ?? undefined}
154
- className={className}
155
- />
151
+ <Wrapper>
152
+ <img
153
+ src={
154
+ hasSourceSet(image) ? image.sourceSet[0].url : image?.url ?? undefined
155
+ }
156
+ srcSet={
157
+ hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined
158
+ }
159
+ alt={picture?.alt ?? ''}
160
+ data-image-type={imageType}
161
+ width={image.width ?? undefined}
162
+ height={image.height ?? undefined}
163
+ className={className}
164
+ />
165
+ </Wrapper>
156
166
  )
157
167
  }
158
168
 
@@ -185,6 +195,7 @@ export default function ImageSet(imageSet: ImageSetFragment) {
185
195
  picture={imageSet.picture}
186
196
  image={imageSet.picture.fallbackImage}
187
197
  imageType={imageSet.picture.imageType || 'image'}
198
+ inSourceSet={true}
188
199
  />
189
200
  </picture>
190
201
  {(imageSet.picture.caption || imageSet.picture.credit) && (
package/src/components/Paragraph/index.tsx CHANGED
@@ -1,18 +1,14 @@
1
1
  import { ContentTree } from '@financial-times/content-tree'
2
- import React, { createContext } from 'react'
2
+ import React, { createContext, useContext } from 'react'
3
3
 
4
- export const ParagraphContext = createContext<
5
- { className?: string } | undefined
6
- >(undefined)
4
+ export const ParagraphContext = createContext<{ className: string } | null>(
5
+ null
6
+ )
7
7
 
8
8
  export default function Paragraph(
9
9
  props: React.PropsWithChildren<ContentTree.Paragraph>
10
10
  ) {
11
- return (
12
- <ParagraphContext.Consumer>
13
- {({ className } = { className: undefined }) => (
14
- <p {...{ className }}>{props.children}</p>
15
- )}
16
- </ParagraphContext.Consumer>
17
- )
11
+ const { className } = useContext(ParagraphContext) ?? { className: undefined }
12
+
13
+ return <p {...{ className }}>{props.children}</p>
18
14
  }
package/src/components/Scrollytelling/ScrollyImage.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ContentTree } from '@financial-times/content-tree'
2
2
  import { ScrollyImageFragment } from '@financial-times/cp-content-pipeline-client'
3
- import React from 'react'
3
+ import React, { useContext } from 'react'
4
4
  import { BreakpointGetter, FallbackImage, Sources } from '../ImageSet'
5
5
  import { ScrollyIDContext } from '.'
6
6
 
@@ -26,6 +26,8 @@ const scrollyGetBreakpoints: BreakpointGetter = (image) => {
26
26
  export function ScrollyImage({
27
27
  picture,
28
28
  }: ContentTree.ScrollyImage & ScrollyImageFragment) {
29
+ const scrollyId = useContext(ScrollyIDContext)
30
+
29
31
  if (!picture?.images) {
30
32
  throw new Error(
31
33
  `ScrollyImage has no images. Check that they are present in the query`
@@ -33,31 +35,28 @@ export function ScrollyImage({
33
35
  }
34
36
 
35
37
  return (
36
- <ScrollyIDContext.Consumer>
37
- {(scrollyId) => (
38
- <figure
39
- className="n-scrollytelling__figure n-content-image--full"
40
- data-scrollytelling-slide={scrollyId}
41
- >
42
- <picture>
43
- <Sources
44
- images={picture.images}
45
- getBreakpoints={scrollyGetBreakpoints}
46
- />
47
- <FallbackImage
48
- image={picture.fallbackImage}
49
- imageType={picture.imageType}
50
- className="n-scrollytelling__image"
51
- />
52
- </picture>
53
- {(picture.caption || picture.credit) && (
54
- <figcaption className="n-scrollytelling__caption n-scrollytelling__caption--has-caption">
55
- {picture.caption ? picture.caption + ' ' : ''}
56
- {picture.credit ? `© ${picture.credit}` : ''}
57
- </figcaption>
58
- )}
59
- </figure>
38
+ <figure
39
+ className="n-scrollytelling__figure n-content-image--full"
40
+ data-scrollytelling-slide={scrollyId}
41
+ >
42
+ <picture>
43
+ <Sources
44
+ images={picture.images}
45
+ getBreakpoints={scrollyGetBreakpoints}
46
+ />
47
+ <FallbackImage
48
+ image={picture.fallbackImage}
49
+ imageType={picture.imageType}
50
+ className="n-scrollytelling__image"
51
+ inSourceSet={true}
52
+ />
53
+ </picture>
54
+ {(picture.caption || picture.credit) && (
55
+ <figcaption className="n-scrollytelling__caption n-scrollytelling__caption--has-caption">
56
+ {picture.caption ? picture.caption + ' ' : ''}
57
+ {picture.credit ? `© ${picture.credit}` : ''}
58
+ </figcaption>
60
59
  )}
61
- </ScrollyIDContext.Consumer>
60
+ </figure>
62
61
  )
63
62
  }