@financial-times/x-teaser 21.0.0-beta.1 → 21.1.0

package/Props.d.ts

@@ -101,6 +101,7 @@ export interface Image {
   image?: Media
   imageSize?: ImageSize
   imageLazyLoad?: Boolean | String
+  imageOptions?: Object
 }
 
 /** @deprecated - use byline instead */

package/__tests__/image-service.test.js

@@ -2,63 +2,63 @@ import imageService from '../src/concerns/image-service'
 
 describe('image-service', () => {
 	it('wraps an image in a v3 URL', () => {
-		expect(imageService('https://example.com/image.jpg', 100)).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&fit=scale-down&dpr=2&width=100');
+		expect(imageService('https://example.com/image.jpg', { width: 100 })).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&fit=scale-down&dpr=2&width=100');
 	});
 
 	it('allows setting the source param', () => {
-		expect(imageService('https://example.com/image.jpg', 100, {source: 'system-code'})).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=system-code&fit=scale-down&dpr=2&width=100');
+		expect(imageService('https://example.com/image.jpg', { width: 100, source: 'system-code' })).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=system-code&fit=scale-down&dpr=2&width=100');
 	});
 
 	describe('double wrapping v2 URLs', () => {
 		it('does not double wrap an image service v2 URL', () => {
-			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=test&width=100', 100);
+			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=test&width=100', { width: 100 });
 			expect(result).toEqual('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&width=100&fit=scale-down&dpr=2');
 		});
 
 		it('preserves example-query-param=1234 from the original URL', () => {
-			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?example-query-param=1234', 100);
+			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?example-query-param=1234', { width: 100 });
 			expect(result).toEqual('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?example-query-param=1234&source=next&fit=scale-down&dpr=2&width=100');
 		});
 
 		it('overrides the "source" query param using default OPTIONS', () => {
-			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source', 100);
+			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source', { width: 100 });
 			expect(result).toEqual('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&fit=scale-down&dpr=2&width=100');
 		});
 
 		it('overrides the "width" query param when passed in', () => {
-			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', 200);
+			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', { width: 200 });
 			expect(result).toEqual('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&width=200&fit=scale-down&dpr=2');
 		});
 
 		it('overrides the "source" query param when passed in', () => {
-			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', 200, {source: 'latest-source'});
+			const result = imageService('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', { width: 200, source: 'latest-source' });
 			expect(result).toEqual('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=latest-source&width=200&fit=scale-down&dpr=2');
 		});
 	});
 
 	describe('double wrapping v3 URLs', () => {
 		it('does not double wrap an image service v3 URL', () => {
-			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=test&width=100', 100);
+			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=test&width=100', { width: 100 });
 			expect(result).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&width=100&fit=scale-down&dpr=2');
 		});
 
 		it('preserves example-query-param=1234 from the original URL', () => {
-			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?example-query-param=1234', 100);
+			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?example-query-param=1234', { width: 100 });
 			expect(result).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?example-query-param=1234&source=next&fit=scale-down&dpr=2&width=100');
 		});
 
 		it('overrides the "source" query param using default OPTIONS', () => {
-			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source', 100);
+			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source', { width: 100 });
 			expect(result).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&fit=scale-down&dpr=2&width=100');
 		});
 
 		it('overrides the "width" query param when passed in', () => {
-			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', 200);
+			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', { width: 200 });
 			expect(result).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=next&width=200&fit=scale-down&dpr=2');
 		});
 
 		it('overrides the "source" query param when passed in', () => {
-			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', 200, {source: 'latest-source'});
+			const result = imageService('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=original-source&width=100', { width: 200, source: 'latest-source' });
 			expect(result).toEqual('https://images.ft.com/v3/image/raw/https%3A%2F%2Fexample.com%2Fimage.jpg?source=latest-source&width=200&fit=scale-down&dpr=2');
 		});
 	});

package/dist/Teaser.cjs.js

@@ -173,10 +173,10 @@ const OPTIONS = {
 /**
  * Image Service
  * @param {String} url
- * @param {Number} width
- * @param {String} options
+ * @param {Object} options
+
  */
-function imageService(url, width, options) {
+function imageService(url, options) {
   if (url.startsWith(BASE_URL_V2) || url.startsWith(BASE_URL_V3)) {
     const parsedUrl = new URL(url);
     parsedUrl.search = new URLSearchParams({
@@ -184,9 +184,6 @@ function imageService(url, width, options) {
       ...OPTIONS,
       ...options
     });
-    if (width) {
-      parsedUrl.searchParams.set('width', width);
-    }
     return parsedUrl.toString();
   }
   const imageSrc = new URL(`${BASE_URL_V3}/${encodeURIComponent(url)}`);
@@ -194,7 +191,6 @@ function imageService(url, width, options) {
     ...OPTIONS,
     ...options
   });
-  imageSrc.searchParams.set('width', width);
   return imageSrc.href;
 }
 
@@ -239,9 +235,13 @@ const BylineLink = ({
   onError: ({
     currentTarget
   }) => currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.remove(),
-  src: imageService(headshot, ImageSizes.BylineHeadshot, {}),
+  src: imageService(headshot, {
+    width: ImageSizes.BylineHeadshot
+  }),
   srcSet: `
-					${imageService(headshot, ImageSizes.BylineHeadshot * 2, {})} 2x
+					${imageService(headshot, {
+    width: ImageSizes.BylineHeadshot * 2
+  })} 2x
 				`
 }) : null, xEngine.h("span", {
   className: "o-teaser__byline-link-label"
@@ -282,7 +282,10 @@ var Headshot = ({
     height: ImageSizes.Headshot,
     alt: "",
     "aria-hidden": "true",
-    src: imageService(headshot, ImageSizes.Headshot, options)
+    src: imageService(headshot, {
+      ...options,
+      width: ImageSizes.Headshot
+    })
   }) : null;
 };
 
@@ -329,6 +332,7 @@ var Image = ({
   imageSize,
   imageLazyLoad,
   imageHighestQuality,
+  imageOptions,
   ...props
 }) => {
   if (!image || image && !image.url) {
@@ -336,10 +340,14 @@ var Image = ({
   }
   const displayUrl = relativeUrl || url;
   const useImageService = !(image.url.startsWith('data:') || image.url.startsWith('blob:'));
-  const options = imageSize === 'XXL' && imageHighestQuality ? {
-    quality: 'highest'
-  } : {};
-  const imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url;
+  const options = {
+    width: ImageSizes[imageSize],
+    ...(imageSize === 'XXL' && imageHighestQuality && {
+      quality: 'highest'
+    }),
+    ...(imageOptions ?? {})
+  };
+  const imageSrc = useImageService ? imageService(image.url, options) : image.url;
   const alt = (image.altText || '').trim();
   const ImageComponent = imageLazyLoad ? LazyImage : NormalImage;
   return xEngine.h("div", {

package/dist/Teaser.es5.js

@@ -304,21 +304,17 @@ var OPTIONS = {
 /**
  * Image Service
  * @param {String} url
- * @param {Number} width
- * @param {String} options
+ * @param {Object} options
+
  */
-function imageService(url, width, options) {
+function imageService(url, options) {
   if (url.startsWith(BASE_URL_V2) || url.startsWith(BASE_URL_V3)) {
     var parsedUrl = new URL(url);
     parsedUrl.search = new URLSearchParams(_objectSpread2(_objectSpread2(_objectSpread2({}, Object.fromEntries(parsedUrl.searchParams)), OPTIONS), options));
-    if (width) {
-      parsedUrl.searchParams.set('width', width);
-    }
     return parsedUrl.toString();
   }
   var imageSrc = new URL("".concat(BASE_URL_V3, "/").concat(encodeURIComponent(url)));
   imageSrc.search = new URLSearchParams(_objectSpread2(_objectSpread2({}, OPTIONS), options));
-  imageSrc.searchParams.set('width', width);
   return imageSrc.href;
 }
 
@@ -365,8 +361,12 @@ var BylineLink = function BylineLink(_ref) {
       var currentTarget = _ref2.currentTarget;
       return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.remove();
     },
-    src: imageService(headshot, ImageSizes.BylineHeadshot, {}),
-    srcSet: "\n\t\t\t\t\t".concat(imageService(headshot, ImageSizes.BylineHeadshot * 2, {}), " 2x\n\t\t\t\t")
+    src: imageService(headshot, {
+      width: ImageSizes.BylineHeadshot
+    }),
+    srcSet: "\n\t\t\t\t\t".concat(imageService(headshot, {
+      width: ImageSizes.BylineHeadshot * 2
+    }), " 2x\n\t\t\t\t")
   }) : null, xEngine.h("span", {
     className: "o-teaser__byline-link-label"
   }, text));
@@ -414,11 +414,13 @@ var Headshot = (function (_ref) {
     height: ImageSizes.Headshot,
     alt: "",
     "aria-hidden": "true",
-    src: imageService(headshot, ImageSizes.Headshot, options)
+    src: imageService(headshot, _objectSpread2(_objectSpread2({}, options), {}, {
+      width: ImageSizes.Headshot
+    }))
   }) : null;
 });
 
-var _excluded$1 = ["relativeUrl", "url", "image", "imageSize", "imageLazyLoad", "imageHighestQuality"];
+var _excluded$1 = ["relativeUrl", "url", "image", "imageSize", "imageLazyLoad", "imageHighestQuality", "imageOptions"];
 
 /**
  * Aspect Ratio
@@ -462,16 +464,19 @@ var Image = (function (_ref4) {
     imageSize = _ref4.imageSize,
     imageLazyLoad = _ref4.imageLazyLoad,
     imageHighestQuality = _ref4.imageHighestQuality,
+    imageOptions = _ref4.imageOptions,
     props = _objectWithoutProperties(_ref4, _excluded$1);
   if (!image || image && !image.url) {
     return null;
   }
   var displayUrl = relativeUrl || url;
   var useImageService = !(image.url.startsWith('data:') || image.url.startsWith('blob:'));
-  var options = imageSize === 'XXL' && imageHighestQuality ? {
+  var options = _objectSpread2(_objectSpread2({
+    width: ImageSizes[imageSize]
+  }, imageSize === 'XXL' && imageHighestQuality && {
     quality: 'highest'
-  } : {};
-  var imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url;
+  }), imageOptions !== null && imageOptions !== void 0 ? imageOptions : {});
+  var imageSrc = useImageService ? imageService(image.url, options) : image.url;
   var alt = (image.altText || '').trim();
   var ImageComponent = imageLazyLoad ? LazyImage : NormalImage;
   return xEngine.h("div", {

package/dist/Teaser.esm.js

@@ -167,10 +167,10 @@ const OPTIONS = {
 /**
  * Image Service
  * @param {String} url
- * @param {Number} width
- * @param {String} options
+ * @param {Object} options
+
  */
-function imageService(url, width, options) {
+function imageService(url, options) {
   if (url.startsWith(BASE_URL_V2) || url.startsWith(BASE_URL_V3)) {
     const parsedUrl = new URL(url);
     parsedUrl.search = new URLSearchParams({
@@ -178,9 +178,6 @@ function imageService(url, width, options) {
       ...OPTIONS,
       ...options
     });
-    if (width) {
-      parsedUrl.searchParams.set('width', width);
-    }
     return parsedUrl.toString();
   }
   const imageSrc = new URL(`${BASE_URL_V3}/${encodeURIComponent(url)}`);
@@ -188,7 +185,6 @@ function imageService(url, width, options) {
     ...OPTIONS,
     ...options
   });
-  imageSrc.searchParams.set('width', width);
   return imageSrc.href;
 }
 
@@ -233,9 +229,13 @@ const BylineLink = ({
   onError: ({
     currentTarget
   }) => currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.remove(),
-  src: imageService(headshot, ImageSizes.BylineHeadshot, {}),
+  src: imageService(headshot, {
+    width: ImageSizes.BylineHeadshot
+  }),
   srcSet: `
-					${imageService(headshot, ImageSizes.BylineHeadshot * 2, {})} 2x
+					${imageService(headshot, {
+    width: ImageSizes.BylineHeadshot * 2
+  })} 2x
 				`
 }) : null, h("span", {
   className: "o-teaser__byline-link-label"
@@ -276,7 +276,10 @@ var Headshot = ({
     height: ImageSizes.Headshot,
     alt: "",
     "aria-hidden": "true",
-    src: imageService(headshot, ImageSizes.Headshot, options)
+    src: imageService(headshot, {
+      ...options,
+      width: ImageSizes.Headshot
+    })
   }) : null;
 };
 
@@ -323,6 +326,7 @@ var Image = ({
   imageSize,
   imageLazyLoad,
   imageHighestQuality,
+  imageOptions,
   ...props
 }) => {
   if (!image || image && !image.url) {
@@ -330,10 +334,14 @@ var Image = ({
   }
   const displayUrl = relativeUrl || url;
   const useImageService = !(image.url.startsWith('data:') || image.url.startsWith('blob:'));
-  const options = imageSize === 'XXL' && imageHighestQuality ? {
-    quality: 'highest'
-  } : {};
-  const imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url;
+  const options = {
+    width: ImageSizes[imageSize],
+    ...(imageSize === 'XXL' && imageHighestQuality && {
+      quality: 'highest'
+    }),
+    ...(imageOptions ?? {})
+  };
+  const imageSrc = useImageService ? imageService(image.url, options) : image.url;
   const alt = (image.altText || '').trim();
   const ImageComponent = imageLazyLoad ? LazyImage : NormalImage;
   return h("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "21.0.0-beta.1",
+  "version": "21.1.0",
   "description": "This module provides templates for use with o-teaser. Teasers are used to present content.",
   "source": "src/Teaser.jsx",
   "main": "dist/Teaser.cjs.js",
@@ -27,8 +27,7 @@
   },
   "homepage": "https://github.com/Financial-Times/x-teaser/tree/HEAD/components/x-teaser",
   "engines": {
-    "node": "16.x || 18.x || 20.x",
-    "npm": "7.x || 8.x || 9.x || 10.x"
+    "node": "22.x || 24.x"
   },
   "publishConfig": {
     "access": "public"

package/readme.md

@@ -4,8 +4,6 @@ This module provides templates for use with [o-teaser](https://github.com/Financ
 
 ## Installation
 
-This module is supported on Node 12 and is distributed on npm.
-
 ```bash
 npm install --save @financial-times/x-teaser @financial-times/o-teaser
 ```
@@ -182,6 +180,7 @@ As covered in the [features](#features) documentation the teaser properties, or
 | `imageSize`           | String                | XS, Small, Medium, Large, XL or XXL                                                                           |
 | `imageLazyLoad`       | Boolean, String       | Output image with `data-src` attribute. If this is a string it will be appended to the image as a class name. |
 | `imageHighestQuality` | Boolean               | Calls image service with "quality=highest" option, works only with XXL images                                 |
+| `imageOptions`        | Object                | Calls Image Service with specified props, takes precedence over other image options such as `imageSize` and `imageHighestQuality` |
 
 #### Byline Props
 

package/src/Byline.jsx

@@ -19,9 +19,9 @@ const BylineLink = ({ text, url, headshot, showBylineHeadshot }) => (
 				loading="lazy"
 				aria-hidden="true"
 				onError={({ currentTarget }) => currentTarget?.remove()}
-				src={imageService(headshot, ImageSizes.BylineHeadshot, {})}
+				src={imageService(headshot, { width: ImageSizes.BylineHeadshot })}
 				srcSet={`
-					${imageService(headshot, ImageSizes.BylineHeadshot * 2, {})} 2x
+					${imageService(headshot, { width: ImageSizes.BylineHeadshot * 2 })} 2x
 				`}
 			/>
 		) : null}

package/src/Headshot.jsx

@@ -15,7 +15,7 @@ export default ({ headshot, headshotTint }) => {
 			height={ImageSizes.Headshot}
 			alt=""
 			aria-hidden="true"
-			src={imageService(headshot, ImageSizes.Headshot, options)}
+			src={imageService(headshot, { ...options, width: ImageSizes.Headshot })}
 		/>
 	) : null
 }

package/src/Image.jsx

@@ -22,14 +22,20 @@ const LazyImage = ({ src, lazyLoad, alt }) => {
 	return <img className={`o-teaser__image ${lazyClassName}`} data-src={src} alt={alt} />
 }
 
-export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighestQuality, ...props }) => {
+export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighestQuality, imageOptions, ...props }) => {
 	if (!image || (image && !image.url)) {
 		return null
 	}
 	const displayUrl = relativeUrl || url
 	const useImageService = !(image.url.startsWith('data:') || image.url.startsWith('blob:'))
-	const options = imageSize === 'XXL' && imageHighestQuality ? { quality: 'highest' } : {}
-	const imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url
+
+	const options = {
+		width: ImageSizes[imageSize],
+		...(imageSize === 'XXL' && imageHighestQuality && { quality: 'highest' }),
+		...(imageOptions ?? {})
+	}
+
+	const imageSrc = useImageService ? imageService(image.url, options) : image.url
 	const alt = (image.altText || '').trim()
 	const ImageComponent = imageLazyLoad ? LazyImage : NormalImage
 

package/src/concerns/image-service.js

@@ -5,10 +5,10 @@ const OPTIONS = { source: 'next', fit: 'scale-down', dpr: 2 }
 /**
  * Image Service
  * @param {String} url
- * @param {Number} width
- * @param {String} options
+ * @param {Object} options
+
  */
-export default function imageService(url, width, options) {
+export default function imageService(url, options) {
 	if (url.startsWith(BASE_URL_V2) || url.startsWith(BASE_URL_V3)) {
 		const parsedUrl = new URL(url);
 
@@ -18,15 +18,10 @@ export default function imageService(url, width, options) {
 			...options,
 		})
 
-		if (width) {
-			parsedUrl.searchParams.set('width', width);
-		}
-
 		return parsedUrl.toString();
 	}
 
 	const imageSrc = new URL(`${BASE_URL_V3}/${encodeURIComponent(url)}`)
 	imageSrc.search = new URLSearchParams({ ...OPTIONS, ...options })
-	imageSrc.searchParams.set('width', width)
 	return imageSrc.href
 }