@financial-times/x-teaser 10.1.0 → 10.1.2

package/Props.d.ts

@@ -142,6 +142,7 @@ export interface Media {
   url: string
   width: number
   height: number
+  altText?: string
 }
 
 export interface Indicators {

package/__fixtures__/video.json

@@ -20,7 +20,8 @@
   "image": {
     "url": "http://com.ft.imagepublish.upp-prod-eu.s3.amazonaws.com/a27ce49b-85b8-445b-b883-db6e2f533194",
     "width": 1920,
-    "height": 1080
+    "height": 1080,
+    "altText": "Image alt text"
   },
   "video": {
     "url": "https://next-media-api.ft.com/renditions/15218247321960/640x360.mp4",

package/__tests__/__snapshots__/snapshots.test.js.snap

@@ -569,7 +569,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with video data 1`] = `
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=340"
         />
@@ -1647,7 +1647,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with video data 1`] =
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=640"
         />
@@ -2067,7 +2067,7 @@ exports[`x-teaser / snapshots renders a HeroVideo teaser with video data 1`] = `
               }
             >
               <img
-                alt=""
+                alt="Image alt text"
                 className="o-teaser__image"
                 src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=420"
               />
@@ -2781,7 +2781,7 @@ exports[`x-teaser / snapshots renders a Large teaser with video data 1`] = `
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=340"
         />
@@ -3859,7 +3859,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with video data 1`] =
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=240"
         />
@@ -5131,7 +5131,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with video data
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=640"
         />

package/dist/Teaser.cjs.js

@@ -211,21 +211,23 @@ const aspectRatio = ({
   return null;
 };
 const NormalImage = ({
-  src
+  src,
+  alt
 }) => xEngine.h("img", {
   className: "o-teaser__image",
   src: src,
-  alt: ""
+  alt: alt
 });
 const LazyImage = ({
   src,
-  lazyLoad
+  lazyLoad,
+  alt
 }) => {
   const lazyClassName = typeof lazyLoad === 'string' ? lazyLoad : '';
   return xEngine.h("img", {
     className: `o-teaser__image ${lazyClassName}`,
     "data-src": src,
-    alt: ""
+    alt: alt
   });
 };
 var Image = (({
@@ -246,6 +248,7 @@ var Image = (({
     quality: 'highest'
   } : {};
   const imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url;
+  const alt = (image.altText || '').trim();
   const ImageComponent = imageLazyLoad ? LazyImage : NormalImage;
   return xEngine.h("div", {
     className: "o-teaser__image-container js-teaser-image-container"
@@ -263,7 +266,8 @@ var Image = (({
     }
   }, xEngine.h(ImageComponent, {
     src: imageSrc,
-    lazyLoad: imageLazyLoad
+    lazyLoad: imageLazyLoad,
+    alt: alt
   }))));
 });
 

package/dist/Teaser.es5.js

@@ -295,21 +295,23 @@ var aspectRatio = function aspectRatio(_ref) {
   return null;
 };
 var NormalImage = function NormalImage(_ref2) {
-  var src = _ref2.src;
+  var src = _ref2.src,
+    alt = _ref2.alt;
   return xEngine.h("img", {
     className: "o-teaser__image",
     src: src,
-    alt: ""
+    alt: alt
   });
 };
 var LazyImage = function LazyImage(_ref3) {
   var src = _ref3.src,
-    lazyLoad = _ref3.lazyLoad;
+    lazyLoad = _ref3.lazyLoad,
+    alt = _ref3.alt;
   var lazyClassName = typeof lazyLoad === 'string' ? lazyLoad : '';
   return xEngine.h("img", {
     className: "o-teaser__image ".concat(lazyClassName),
     "data-src": src,
-    alt: ""
+    alt: alt
   });
 };
 var Image = (function (_ref4) {
@@ -329,6 +331,7 @@ var Image = (function (_ref4) {
     quality: 'highest'
   } : {};
   var imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url;
+  var alt = (image.altText || '').trim();
   var ImageComponent = imageLazyLoad ? LazyImage : NormalImage;
   return xEngine.h("div", {
     className: "o-teaser__image-container js-teaser-image-container"
@@ -346,7 +349,8 @@ var Image = (function (_ref4) {
     }
   }, xEngine.h(ImageComponent, {
     src: imageSrc,
-    lazyLoad: imageLazyLoad
+    lazyLoad: imageLazyLoad,
+    alt: alt
   }))));
 });
 

package/dist/Teaser.esm.js

@@ -205,21 +205,23 @@ const aspectRatio = ({
   return null;
 };
 const NormalImage = ({
-  src
+  src,
+  alt
 }) => h("img", {
   className: "o-teaser__image",
   src: src,
-  alt: ""
+  alt: alt
 });
 const LazyImage = ({
   src,
-  lazyLoad
+  lazyLoad,
+  alt
 }) => {
   const lazyClassName = typeof lazyLoad === 'string' ? lazyLoad : '';
   return h("img", {
     className: `o-teaser__image ${lazyClassName}`,
     "data-src": src,
-    alt: ""
+    alt: alt
   });
 };
 var Image = (({
@@ -240,6 +242,7 @@ var Image = (({
     quality: 'highest'
   } : {};
   const imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url;
+  const alt = (image.altText || '').trim();
   const ImageComponent = imageLazyLoad ? LazyImage : NormalImage;
   return h("div", {
     className: "o-teaser__image-container js-teaser-image-container"
@@ -257,7 +260,8 @@ var Image = (({
     }
   }, h(ImageComponent, {
     src: imageSrc,
-    lazyLoad: imageLazyLoad
+    lazyLoad: imageLazyLoad,
+    alt: alt
   }))));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "10.1.0",
+  "version": "10.1.2",
   "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",
@@ -18,7 +18,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/x-engine": "^10.1.0",
+    "@financial-times/x-engine": "^10.1.2",
     "date-fns": "^1.29.0",
     "dateformat": "^3.0.3"
   },

package/src/Image.jsx

@@ -17,11 +17,11 @@ const aspectRatio = ({ width, height }) => {
 	return null
 }
 
-const NormalImage = ({ src }) => <img className="o-teaser__image" src={src} alt="" />
+const NormalImage = ({ src, alt }) => <img className="o-teaser__image" src={src} alt={alt} />
 
-const LazyImage = ({ src, lazyLoad }) => {
+const LazyImage = ({ src, lazyLoad, alt }) => {
 	const lazyClassName = typeof lazyLoad === 'string' ? lazyLoad : ''
-	return <img className={`o-teaser__image ${lazyClassName}`} data-src={src} alt="" />
+	return <img className={`o-teaser__image ${lazyClassName}`} data-src={src} alt={alt} />
 }
 
 export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighestQuality, ...props }) => {
@@ -32,6 +32,7 @@ export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighes
 	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 alt = (image.altText || '').trim()
 	const ImageComponent = imageLazyLoad ? LazyImage : NormalImage
 
 	return (
@@ -43,9 +44,10 @@ export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighes
 					'data-trackable': 'image-link',
 					tabIndex: '-1',
 					'aria-hidden': 'true'
-				}}>
+				}}
+			>
 				<div className="o-teaser__image-placeholder" style={{ paddingBottom: aspectRatio(image) }}>
-					<ImageComponent src={imageSrc} lazyLoad={imageLazyLoad} />
+					<ImageComponent src={imageSrc} lazyLoad={imageLazyLoad} alt={alt} />
 				</div>
 			</Link>
 		</div>