@financial-times/x-teaser 8.1.0 → 8.2.0

package/dist/Teaser.cjs.js

@@ -18,11 +18,9 @@ const rulesets = {
     if (props.showVideo && props.video && props.video.url) {
       return 'video';
     }
-
     if (props.showHeadshot && props.headshot && props.indicators.isColumn) {
       return 'headshot';
     }
-
     if (props.showImage && props.image && props.image.url) {
       return 'image';
     }
@@ -31,31 +29,27 @@ const rulesets = {
     if (props.theme) {
       return props.theme;
     }
-
     if (props.status === 'inprogress') {
       return 'live';
     }
-
     if (props.indicators && props.indicators.isOpinion) {
       return 'opinion';
     }
-
     if (props.indicators && props.indicators.isEditorsChoice) {
       return 'highlight';
     }
-
     if (props.parentTheme) {
       return props.parentTheme;
     }
   }
 };
+
 /**
  * Rules
  * @param {String} rule
  * @param {Props} props
  * @returns {String|null}
  */
-
 function rules(rule, props) {
   if (rulesets.hasOwnProperty(rule)) {
     return rulesets[rule](props);
@@ -69,23 +63,18 @@ const theme = props => rules('theme', props);
 const dynamicModifiers = props => {
   const modifiers = [];
   const mediaRule = media(props);
-
   if (mediaRule) {
     modifiers.push(`has-${mediaRule}`);
   }
-
   const themeRule = theme(props);
-
   if (themeRule) {
     modifiers.push(themeRule);
   }
-
   return modifiers;
 };
-
 var Container = (props => {
-  const computed = dynamicModifiers(props); // Modifier props may be a string rather than a string[] so concat, don't spread.
-
+  const computed = dynamicModifiers(props);
+  // Modifier props may be a string rather than a string[] so concat, don't spread.
   const variants = [props.type, props.layout].concat(props.modifiers, computed);
   const classNames = variants.filter(Boolean).map(mod => `o-teaser--${mod}`).join(' ');
   return xEngine.h("div", {
@@ -106,7 +95,6 @@ var Content = (({
  * @param {String|ReactElement} action
  * @returns {ReactElement}
  */
-
 const render = action => {
   // Allow parent components to pass raw HTML strings
   if (typeof action === 'string') {
@@ -119,7 +107,6 @@ const render = action => {
     return action;
   }
 };
-
 var CustomSlot = (({
   customSlot
 }) => customSlot ? xEngine.h("div", {
@@ -134,8 +121,8 @@ const ImageSizes = {
   Large: 420,
   XL: 640,
   XXL: 1180 // max width of FT.com page
-
 };
+
 const Layouts = {
   Small: 'small',
   Large: 'large',
@@ -151,22 +138,24 @@ const OPTIONS = {
   fit: 'scale-down',
   dpr: 2
 };
+
 /**
  * Image Service
  * @param {String} url
  * @param {Number} width
  * @param {String} options
  */
-
 function imageService(url, width, options) {
   const imageSrc = new URL(`${BASE_URL}/${encodeURIComponent(url)}`);
-  imageSrc.search = new URLSearchParams({ ...OPTIONS,
+  imageSrc.search = new URLSearchParams({
+    ...OPTIONS,
     ...options
   });
   imageSrc.searchParams.set('width', width);
   return imageSrc.href;
 }
 
+// these colours are tweaked from o-colors palette colours to make headshots look less washed out
 const DEFAULT_TINT = '054593,d6d5d3';
 var Headshot = (({
   headshot,
@@ -198,7 +187,6 @@ const BaseLink = ({
     return xEngine.h("span", attrs, children);
   }
 };
-
 var Link = (({
   customElements = {},
   ...props
@@ -212,7 +200,6 @@ var Link = (({
  * @param {{ width: Number, height: Number }} image
  * @returns {String|null}
  */
-
 const aspectRatio = ({
   width,
   height
@@ -221,10 +208,8 @@ const aspectRatio = ({
     const ratio = 100 / width * height;
     return ratio.toFixed(4) + '%';
   }
-
   return null;
 };
-
 const NormalImage = ({
   src
 }) => xEngine.h("img", {
@@ -232,7 +217,6 @@ const NormalImage = ({
   src: src,
   alt: ""
 });
-
 const LazyImage = ({
   src,
   lazyLoad
@@ -244,7 +228,6 @@ const LazyImage = ({
     alt: ""
   });
 };
-
 var Image = (({
   relativeUrl,
   url,
@@ -257,7 +240,6 @@ var Image = (({
   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 ? {
@@ -288,11 +270,9 @@ var Image = (({
 const sameId = (context = {}, id) => {
   return id && context && context.parentId && id === context.parentId;
 };
-
 const sameLabel = (context = {}, label) => {
   return label && context && context.parentLabel && label === context.parentLabel;
 };
-
 var MetaLink = (({
   metaPrefixText,
   metaLink,
@@ -353,7 +333,6 @@ const renderLink = ({
     href: displayUrl
   }, title));
 };
-
 var RelatedLinks = (({
   relatedLinks = []
 }) => relatedLinks && relatedLinks.length ? xEngine.h("ul", {
@@ -374,34 +353,31 @@ var TimeStamp = (({
  * @param {Date | String | Number} date
  * @returns {Date}
  */
-
 function toDate(date) {
   if (typeof date === 'string') {
     return new Date(date);
   }
-
   if (typeof date === 'number') {
     return new Date(date);
   }
-
   return date;
 }
+
 /**
  * Get Relative Date
  * @param {Date | String | Number} date
  * @returns {Number}
  */
-
 function getRelativeDate(date) {
   return Date.now() - toDate(date).getTime();
 }
+
 /**
  * Get Status
  * @param {Date | String | Number} publishedDate
  * @param {Date | String | Number} firstPublishedDate
  * @returns {String}
  */
-
 function getStatus(publishedDate, firstPublishedDate) {
   if (getRelativeDate(publishedDate) < Newish) {
     if (publishedDate === firstPublishedDate) {
@@ -410,15 +386,14 @@ function getStatus(publishedDate, firstPublishedDate) {
       return 'updated';
     }
   }
-
   return '';
 }
+
 /**
  * Is Recent
  * @param {Number} relativeDate
  * @returns {Boolean}
  */
-
 function isRecent(relativeDate) {
   return relativeDate < Recent;
 }
@@ -428,14 +403,12 @@ function isRecent(relativeDate) {
  * @param {Number} date
  * @returns {String}
  */
-
 const displayTime = date => {
   const hours = Math.floor(Math.abs(date / 3600000));
   const plural = hours === 1 ? 'hour' : 'hours';
   const suffix = hours === 0 ? '' : `${plural} ago`;
   return `${hours} ${suffix}`;
 };
-
 var RelativeTime = (({
   publishedDate,
   firstPublishedDate,
@@ -478,12 +451,9 @@ var LiveBlogStatus = (({
  * If same calendar day, we show relative time e.g. X hours ago or Updated X min ago
  * If different calendar day, we show full Date time e.g. June 9, 2021
  */
-
 var AlwaysShowTimestamp = (props => {
   const localTodayDate = new Date().toISOString().substr(0, 10); // keep only the date bit
-
   const dateToCompare = new Date(props.publishedDate).toISOString().substr(0, 10);
-
   if (dateFns.differenceInCalendarDays(localTodayDate, dateToCompare) >= 1) {
     return xEngine.h(TimeStamp, props);
   } else {
@@ -497,7 +467,6 @@ var Status = (props => {
   if (props.status) {
     return xEngine.h(LiveBlogStatus, props);
   }
-
   if (props.publishedDate) {
     if (props.useRelativeTimeIfToday) {
       return xEngine.h(AlwaysShowTimestamp, props);
@@ -507,7 +476,6 @@ var Status = (props => {
       return xEngine.h(TimeStamp, props);
     }
   }
-
   return null;
 });
 
@@ -543,17 +511,15 @@ var Title = (({
   ...props
 }) => {
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
-  const displayUrl = relativeUrl || url; // o-labels--premium left for backwards compatibility for o-labels v3
-
+  const displayUrl = relativeUrl || url;
+  // o-labels--premium left for backwards compatibility for o-labels v3
   const premiumClass = 'o-labels o-labels--premium o-labels--content-premium';
   let ariaLabel;
-
   if (props.type === 'video') {
     ariaLabel = `Watch video ${displayTitle}`;
   } else if (props.type === 'audio') {
     ariaLabel = `Listen to podcast ${displayTitle}`;
   }
-
   return xEngine.h("div", {
     className: "o-teaser__heading"
   }, xEngine.h(Link, Object.assign({}, props, {
@@ -570,13 +536,14 @@ var Title = (({
   }, "\xA0content")) : null);
 });
 
+// Re-format the data for use with o-video
 const formatData = props => JSON.stringify({
   renditions: [props.video],
   mainImageUrl: props.image ? props.image.url : null
-}); // To prevent React from touching the DOM after mounting… return an empty <div />
-// <https://reactjs.org/docs/integrating-with-other-libraries.html>
-
+});
 
+// To prevent React from touching the DOM after mounting… return an empty <div />
+// <https://reactjs.org/docs/integrating-with-other-libraries.html>
 const Embed = props => {
   const showGuidance = typeof props.showGuidance === 'boolean' ? props.showGuidance.toString() : 'true';
   return xEngine.h("div", {
@@ -597,7 +564,6 @@ const Embed = props => {
     "data-o-video-systemcode": props.systemCode
   }));
 };
-
 var Video = (props => xEngine.h("div", {
   className: "o-teaser__video"
 }, xEngine.h("div", {

package/dist/Teaser.es5.js

@@ -18,11 +18,9 @@ var rulesets = {
     if (props.showVideo && props.video && props.video.url) {
       return 'video';
     }
-
     if (props.showHeadshot && props.headshot && props.indicators.isColumn) {
       return 'headshot';
     }
-
     if (props.showImage && props.image && props.image.url) {
       return 'image';
     }
@@ -31,31 +29,27 @@ var rulesets = {
     if (props.theme) {
       return props.theme;
     }
-
     if (props.status === 'inprogress') {
       return 'live';
     }
-
     if (props.indicators && props.indicators.isOpinion) {
       return 'opinion';
     }
-
     if (props.indicators && props.indicators.isEditorsChoice) {
       return 'highlight';
     }
-
     if (props.parentTheme) {
       return props.parentTheme;
     }
   }
 };
+
 /**
  * Rules
  * @param {String} rule
  * @param {Props} props
  * @returns {String|null}
  */
-
 function rules(rule, props) {
   if (rulesets.hasOwnProperty(rule)) {
     return rulesets[rule](props);
@@ -73,23 +67,18 @@ var theme = function theme(props) {
 var dynamicModifiers = function dynamicModifiers(props) {
   var modifiers = [];
   var mediaRule = media(props);
-
   if (mediaRule) {
     modifiers.push("has-".concat(mediaRule));
   }
-
   var themeRule = theme(props);
-
   if (themeRule) {
     modifiers.push(themeRule);
   }
-
   return modifiers;
 };
-
 var Container = (function (props) {
-  var computed = dynamicModifiers(props); // Modifier props may be a string rather than a string[] so concat, don't spread.
-
+  var computed = dynamicModifiers(props);
+  // Modifier props may be a string rather than a string[] so concat, don't spread.
   var variants = [props.type, props.layout].concat(props.modifiers, computed);
   var classNames = variants.filter(Boolean).map(function (mod) {
     return "o-teaser--".concat(mod);
@@ -103,7 +92,7 @@ var Container = (function (props) {
 
 var Content = (function (_ref) {
   var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? [] : _ref$children;
+    children = _ref$children === void 0 ? [] : _ref$children;
   return xEngine.h("div", {
     className: "o-teaser__content"
   }, children);
@@ -114,7 +103,6 @@ var Content = (function (_ref) {
  * @param {String|ReactElement} action
  * @returns {ReactElement}
  */
-
 var render = function render(action) {
   // Allow parent components to pass raw HTML strings
   if (typeof action === 'string') {
@@ -127,7 +115,6 @@ var render = function render(action) {
     return action;
   }
 };
-
 var CustomSlot = (function (_ref) {
   var customSlot = _ref.customSlot;
   return customSlot ? xEngine.h("div", {
@@ -143,8 +130,8 @@ var ImageSizes = {
   Large: 420,
   XL: 640,
   XXL: 1180 // max width of FT.com page
-
 };
+
 var Layouts = {
   Small: 'small',
   Large: 'large',
@@ -156,17 +143,14 @@ var Recent = 1000 * 60 * 60 * 4;
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -176,10 +160,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -191,35 +173,26 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-
   var target = _objectWithoutPropertiesLoose(source, excluded);
-
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
       key = sourceSymbolKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
@@ -227,7 +200,6 @@ function _objectWithoutProperties(source, excluded) {
       target[key] = source[key];
     }
   }
-
   return target;
 }
 
@@ -237,13 +209,13 @@ var OPTIONS = {
   fit: 'scale-down',
   dpr: 2
 };
+
 /**
  * Image Service
  * @param {String} url
  * @param {Number} width
  * @param {String} options
  */
-
 function imageService(url, width, options) {
   var imageSrc = new URL("".concat(BASE_URL, "/").concat(encodeURIComponent(url)));
   imageSrc.search = new URLSearchParams(_objectSpread2(_objectSpread2({}, OPTIONS), options));
@@ -251,10 +223,11 @@ function imageService(url, width, options) {
   return imageSrc.href;
 }
 
+// these colours are tweaked from o-colors palette colours to make headshots look less washed out
 var DEFAULT_TINT = '054593,d6d5d3';
 var Headshot = (function (_ref) {
   var headshot = _ref.headshot,
-      headshotTint = _ref.headshotTint;
+    headshotTint = _ref.headshotTint;
   var options = {
     tint: "".concat(headshotTint || DEFAULT_TINT)
   };
@@ -269,13 +242,11 @@ var Headshot = (function (_ref) {
 });
 
 var _excluded = ["customElements"];
-
 var BaseLink = function BaseLink(_ref) {
   var url = _ref.url,
-      _ref$attrs = _ref.attrs,
-      attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
-      children = _ref.children;
-
+    _ref$attrs = _ref.attrs,
+    attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
+    children = _ref.children;
   if (url) {
     return xEngine.h("a", Object.assign({
       href: url
@@ -284,35 +255,30 @@ var BaseLink = function BaseLink(_ref) {
     return xEngine.h("span", attrs, children);
   }
 };
-
 var Link = (function (_ref2) {
   var _ref2$customElements = _ref2.customElements,
-      customElements = _ref2$customElements === void 0 ? {} : _ref2$customElements,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+    customElements = _ref2$customElements === void 0 ? {} : _ref2$customElements,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var Link = customElements.Link || BaseLink;
   return xEngine.h(Link, props);
 });
 
 var _excluded$1 = ["relativeUrl", "url", "image", "imageSize", "imageLazyLoad", "imageHighestQuality"];
+
 /**
  * Aspect Ratio
  * @param {{ width: Number, height: Number }} image
  * @returns {String|null}
  */
-
 var aspectRatio = function aspectRatio(_ref) {
   var width = _ref.width,
-      height = _ref.height;
-
+    height = _ref.height;
   if (typeof width === 'number' && typeof height === 'number') {
     var ratio = 100 / width * height;
     return ratio.toFixed(4) + '%';
   }
-
   return null;
 };
-
 var NormalImage = function NormalImage(_ref2) {
   var src = _ref2.src;
   return xEngine.h("img", {
@@ -321,10 +287,9 @@ var NormalImage = function NormalImage(_ref2) {
     alt: ""
   });
 };
-
 var LazyImage = function LazyImage(_ref3) {
   var src = _ref3.src,
-      lazyLoad = _ref3.lazyLoad;
+    lazyLoad = _ref3.lazyLoad;
   var lazyClassName = typeof lazyLoad === 'string' ? lazyLoad : '';
   return xEngine.h("img", {
     className: "o-teaser__image ".concat(lazyClassName),
@@ -332,20 +297,17 @@ var LazyImage = function LazyImage(_ref3) {
     alt: ""
   });
 };
-
 var Image = (function (_ref4) {
   var relativeUrl = _ref4.relativeUrl,
-      url = _ref4.url,
-      image = _ref4.image,
-      imageSize = _ref4.imageSize,
-      imageLazyLoad = _ref4.imageLazyLoad,
-      imageHighestQuality = _ref4.imageHighestQuality,
-      props = _objectWithoutProperties(_ref4, _excluded$1);
-
+    url = _ref4.url,
+    image = _ref4.image,
+    imageSize = _ref4.imageSize,
+    imageLazyLoad = _ref4.imageLazyLoad,
+    imageHighestQuality = _ref4.imageHighestQuality,
+    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 ? {
@@ -378,19 +340,17 @@ var sameId = function sameId() {
   var id = arguments.length > 1 ? arguments[1] : undefined;
   return id && context && context.parentId && id === context.parentId;
 };
-
 var sameLabel = function sameLabel() {
   var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var label = arguments.length > 1 ? arguments[1] : undefined;
   return label && context && context.parentLabel && label === context.parentLabel;
 };
-
 var MetaLink = (function (_ref) {
   var metaPrefixText = _ref.metaPrefixText,
-      metaLink = _ref.metaLink,
-      metaAltLink = _ref.metaAltLink,
-      metaSuffixText = _ref.metaSuffixText,
-      context = _ref.context;
+    metaLink = _ref.metaLink,
+    metaAltLink = _ref.metaAltLink,
+    metaSuffixText = _ref.metaSuffixText,
+    context = _ref.context;
   var showPrefixText = metaPrefixText && !sameLabel(context, metaPrefixText);
   var showSuffixText = metaSuffixText && !sameLabel(context, metaSuffixText);
   var linkId = metaLink && metaLink.id;
@@ -413,7 +373,7 @@ var MetaLink = (function (_ref) {
 
 var Promoted = (function (_ref) {
   var promotedPrefixText = _ref.promotedPrefixText,
-      promotedSuffixText = _ref.promotedSuffixText;
+    promotedSuffixText = _ref.promotedSuffixText;
   return xEngine.h("div", {
     className: "o-teaser__meta"
   }, xEngine.h("span", {
@@ -430,10 +390,10 @@ var Meta = (function (props) {
 
 var renderLink = function renderLink(_ref, i) {
   var id = _ref.id,
-      type = _ref.type,
-      title = _ref.title,
-      url = _ref.url,
-      relativeUrl = _ref.relativeUrl;
+    type = _ref.type,
+    title = _ref.title,
+    url = _ref.url,
+    relativeUrl = _ref.relativeUrl;
   var displayUrl = relativeUrl || url;
   return xEngine.h("li", {
     key: "related-".concat(i),
@@ -444,10 +404,9 @@ var renderLink = function renderLink(_ref, i) {
     href: displayUrl
   }, title));
 };
-
 var RelatedLinks = (function (_ref2) {
   var _ref2$relatedLinks = _ref2.relatedLinks,
-      relatedLinks = _ref2$relatedLinks === void 0 ? [] : _ref2$relatedLinks;
+    relatedLinks = _ref2$relatedLinks === void 0 ? [] : _ref2$relatedLinks;
   return relatedLinks && relatedLinks.length ? xEngine.h("ul", {
     className: "o-teaser__related"
   }, relatedLinks.map(renderLink)) : null;
@@ -468,34 +427,31 @@ var TimeStamp = (function (_ref) {
  * @param {Date | String | Number} date
  * @returns {Date}
  */
-
 function toDate(date) {
   if (typeof date === 'string') {
     return new Date(date);
   }
-
   if (typeof date === 'number') {
     return new Date(date);
   }
-
   return date;
 }
+
 /**
  * Get Relative Date
  * @param {Date | String | Number} date
  * @returns {Number}
  */
-
 function getRelativeDate(date) {
   return Date.now() - toDate(date).getTime();
 }
+
 /**
  * Get Status
  * @param {Date | String | Number} publishedDate
  * @param {Date | String | Number} firstPublishedDate
  * @returns {String}
  */
-
 function getStatus(publishedDate, firstPublishedDate) {
   if (getRelativeDate(publishedDate) < Newish) {
     if (publishedDate === firstPublishedDate) {
@@ -504,15 +460,14 @@ function getStatus(publishedDate, firstPublishedDate) {
       return 'updated';
     }
   }
-
   return '';
 }
+
 /**
  * Is Recent
  * @param {Number} relativeDate
  * @returns {Boolean}
  */
-
 function isRecent(relativeDate) {
   return relativeDate < Recent;
 }
@@ -522,19 +477,17 @@ function isRecent(relativeDate) {
  * @param {Number} date
  * @returns {String}
  */
-
 var displayTime = function displayTime(date) {
   var hours = Math.floor(Math.abs(date / 3600000));
   var plural = hours === 1 ? 'hour' : 'hours';
   var suffix = hours === 0 ? '' : "".concat(plural, " ago");
   return "".concat(hours, " ").concat(suffix);
 };
-
 var RelativeTime = (function (_ref) {
   var publishedDate = _ref.publishedDate,
-      firstPublishedDate = _ref.firstPublishedDate,
-      _ref$showAlways = _ref.showAlways,
-      showAlways = _ref$showAlways === void 0 ? false : _ref$showAlways;
+    firstPublishedDate = _ref.firstPublishedDate,
+    _ref$showAlways = _ref.showAlways,
+    showAlways = _ref$showAlways === void 0 ? false : _ref$showAlways;
   var relativeDate = getRelativeDate(publishedDate);
   var status = getStatus(publishedDate, firstPublishedDate);
   return showAlways === true || isRecent(relativeDate) ? xEngine.h("div", {
@@ -573,12 +526,9 @@ var LiveBlogStatus = (function (_ref) {
  * If same calendar day, we show relative time e.g. X hours ago or Updated X min ago
  * If different calendar day, we show full Date time e.g. June 9, 2021
  */
-
 var AlwaysShowTimestamp = (function (props) {
   var localTodayDate = new Date().toISOString().substr(0, 10); // keep only the date bit
-
   var dateToCompare = new Date(props.publishedDate).toISOString().substr(0, 10);
-
   if (dateFns.differenceInCalendarDays(localTodayDate, dateToCompare) >= 1) {
     return xEngine.h(TimeStamp, props);
   } else {
@@ -592,7 +542,6 @@ var Status = (function (props) {
   if (props.status) {
     return xEngine.h(LiveBlogStatus, props);
   }
-
   if (props.publishedDate) {
     if (props.useRelativeTimeIfToday) {
       return xEngine.h(AlwaysShowTimestamp, props);
@@ -602,19 +551,17 @@ var Status = (function (props) {
       return xEngine.h(TimeStamp, props);
     }
   }
-
   return null;
 });
 
 var _excluded$2 = ["standfirst", "altStandfirst", "headlineTesting", "relativeUrl", "url"];
 var Standfirst = (function (_ref) {
   var standfirst = _ref.standfirst,
-      altStandfirst = _ref.altStandfirst,
-      headlineTesting = _ref.headlineTesting,
-      relativeUrl = _ref.relativeUrl,
-      url = _ref.url,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-
+    altStandfirst = _ref.altStandfirst,
+    headlineTesting = _ref.headlineTesting,
+    relativeUrl = _ref.relativeUrl,
+    url = _ref.url,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var displayStandfirst = headlineTesting && altStandfirst ? altStandfirst : standfirst;
   var displayUrl = relativeUrl || url;
   return displayStandfirst ? xEngine.h("p", {
@@ -632,25 +579,22 @@ var Standfirst = (function (_ref) {
 var _excluded$3 = ["title", "altTitle", "headlineTesting", "relativeUrl", "url", "indicators"];
 var Title = (function (_ref) {
   var title = _ref.title,
-      altTitle = _ref.altTitle,
-      headlineTesting = _ref.headlineTesting,
-      relativeUrl = _ref.relativeUrl,
-      url = _ref.url,
-      indicators = _ref.indicators,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-
+    altTitle = _ref.altTitle,
+    headlineTesting = _ref.headlineTesting,
+    relativeUrl = _ref.relativeUrl,
+    url = _ref.url,
+    indicators = _ref.indicators,
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var displayTitle = headlineTesting && altTitle ? altTitle : title;
-  var displayUrl = relativeUrl || url; // o-labels--premium left for backwards compatibility for o-labels v3
-
+  var displayUrl = relativeUrl || url;
+  // o-labels--premium left for backwards compatibility for o-labels v3
   var premiumClass = 'o-labels o-labels--premium o-labels--content-premium';
   var ariaLabel;
-
   if (props.type === 'video') {
     ariaLabel = "Watch video ".concat(displayTitle);
   } else if (props.type === 'audio') {
     ariaLabel = "Listen to podcast ".concat(displayTitle);
   }
-
   return xEngine.h("div", {
     className: "o-teaser__heading"
   }, xEngine.h(Link, Object.assign({}, props, {
@@ -667,15 +611,16 @@ var Title = (function (_ref) {
   }, "\xA0content")) : null);
 });
 
+// Re-format the data for use with o-video
 var formatData = function formatData(props) {
   return JSON.stringify({
     renditions: [props.video],
     mainImageUrl: props.image ? props.image.url : null
   });
-}; // To prevent React from touching the DOM after mounting… return an empty <div />
-// <https://reactjs.org/docs/integrating-with-other-libraries.html>
-
+};
 
+// To prevent React from touching the DOM after mounting… return an empty <div />
+// <https://reactjs.org/docs/integrating-with-other-libraries.html>
 var Embed = function Embed(props) {
   var showGuidance = typeof props.showGuidance === 'boolean' ? props.showGuidance.toString() : 'true';
   return xEngine.h("div", {
@@ -696,7 +641,6 @@ var Embed = function Embed(props) {
     "data-o-video-systemcode": props.systemCode
   }));
 };
-
 var Video = (function (props) {
   return xEngine.h("div", {
     className: "o-teaser__video"

package/dist/Teaser.esm.js

@@ -12,11 +12,9 @@ const rulesets = {
     if (props.showVideo && props.video && props.video.url) {
       return 'video';
     }
-
     if (props.showHeadshot && props.headshot && props.indicators.isColumn) {
       return 'headshot';
     }
-
     if (props.showImage && props.image && props.image.url) {
       return 'image';
     }
@@ -25,31 +23,27 @@ const rulesets = {
     if (props.theme) {
       return props.theme;
     }
-
     if (props.status === 'inprogress') {
       return 'live';
     }
-
     if (props.indicators && props.indicators.isOpinion) {
       return 'opinion';
     }
-
     if (props.indicators && props.indicators.isEditorsChoice) {
       return 'highlight';
     }
-
     if (props.parentTheme) {
       return props.parentTheme;
     }
   }
 };
+
 /**
  * Rules
  * @param {String} rule
  * @param {Props} props
  * @returns {String|null}
  */
-
 function rules(rule, props) {
   if (rulesets.hasOwnProperty(rule)) {
     return rulesets[rule](props);
@@ -63,23 +57,18 @@ const theme = props => rules('theme', props);
 const dynamicModifiers = props => {
   const modifiers = [];
   const mediaRule = media(props);
-
   if (mediaRule) {
     modifiers.push(`has-${mediaRule}`);
   }
-
   const themeRule = theme(props);
-
   if (themeRule) {
     modifiers.push(themeRule);
   }
-
   return modifiers;
 };
-
 var Container = (props => {
-  const computed = dynamicModifiers(props); // Modifier props may be a string rather than a string[] so concat, don't spread.
-
+  const computed = dynamicModifiers(props);
+  // Modifier props may be a string rather than a string[] so concat, don't spread.
   const variants = [props.type, props.layout].concat(props.modifiers, computed);
   const classNames = variants.filter(Boolean).map(mod => `o-teaser--${mod}`).join(' ');
   return h("div", {
@@ -100,7 +89,6 @@ var Content = (({
  * @param {String|ReactElement} action
  * @returns {ReactElement}
  */
-
 const render = action => {
   // Allow parent components to pass raw HTML strings
   if (typeof action === 'string') {
@@ -113,7 +101,6 @@ const render = action => {
     return action;
   }
 };
-
 var CustomSlot = (({
   customSlot
 }) => customSlot ? h("div", {
@@ -128,8 +115,8 @@ const ImageSizes = {
   Large: 420,
   XL: 640,
   XXL: 1180 // max width of FT.com page
-
 };
+
 const Layouts = {
   Small: 'small',
   Large: 'large',
@@ -145,22 +132,24 @@ const OPTIONS = {
   fit: 'scale-down',
   dpr: 2
 };
+
 /**
  * Image Service
  * @param {String} url
  * @param {Number} width
  * @param {String} options
  */
-
 function imageService(url, width, options) {
   const imageSrc = new URL(`${BASE_URL}/${encodeURIComponent(url)}`);
-  imageSrc.search = new URLSearchParams({ ...OPTIONS,
+  imageSrc.search = new URLSearchParams({
+    ...OPTIONS,
     ...options
   });
   imageSrc.searchParams.set('width', width);
   return imageSrc.href;
 }
 
+// these colours are tweaked from o-colors palette colours to make headshots look less washed out
 const DEFAULT_TINT = '054593,d6d5d3';
 var Headshot = (({
   headshot,
@@ -192,7 +181,6 @@ const BaseLink = ({
     return h("span", attrs, children);
   }
 };
-
 var Link = (({
   customElements = {},
   ...props
@@ -206,7 +194,6 @@ var Link = (({
  * @param {{ width: Number, height: Number }} image
  * @returns {String|null}
  */
-
 const aspectRatio = ({
   width,
   height
@@ -215,10 +202,8 @@ const aspectRatio = ({
     const ratio = 100 / width * height;
     return ratio.toFixed(4) + '%';
   }
-
   return null;
 };
-
 const NormalImage = ({
   src
 }) => h("img", {
@@ -226,7 +211,6 @@ const NormalImage = ({
   src: src,
   alt: ""
 });
-
 const LazyImage = ({
   src,
   lazyLoad
@@ -238,7 +222,6 @@ const LazyImage = ({
     alt: ""
   });
 };
-
 var Image = (({
   relativeUrl,
   url,
@@ -251,7 +234,6 @@ var Image = (({
   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 ? {
@@ -282,11 +264,9 @@ var Image = (({
 const sameId = (context = {}, id) => {
   return id && context && context.parentId && id === context.parentId;
 };
-
 const sameLabel = (context = {}, label) => {
   return label && context && context.parentLabel && label === context.parentLabel;
 };
-
 var MetaLink = (({
   metaPrefixText,
   metaLink,
@@ -347,7 +327,6 @@ const renderLink = ({
     href: displayUrl
   }, title));
 };
-
 var RelatedLinks = (({
   relatedLinks = []
 }) => relatedLinks && relatedLinks.length ? h("ul", {
@@ -368,34 +347,31 @@ var TimeStamp = (({
  * @param {Date | String | Number} date
  * @returns {Date}
  */
-
 function toDate(date) {
   if (typeof date === 'string') {
     return new Date(date);
   }
-
   if (typeof date === 'number') {
     return new Date(date);
   }
-
   return date;
 }
+
 /**
  * Get Relative Date
  * @param {Date | String | Number} date
  * @returns {Number}
  */
-
 function getRelativeDate(date) {
   return Date.now() - toDate(date).getTime();
 }
+
 /**
  * Get Status
  * @param {Date | String | Number} publishedDate
  * @param {Date | String | Number} firstPublishedDate
  * @returns {String}
  */
-
 function getStatus(publishedDate, firstPublishedDate) {
   if (getRelativeDate(publishedDate) < Newish) {
     if (publishedDate === firstPublishedDate) {
@@ -404,15 +380,14 @@ function getStatus(publishedDate, firstPublishedDate) {
       return 'updated';
     }
   }
-
   return '';
 }
+
 /**
  * Is Recent
  * @param {Number} relativeDate
  * @returns {Boolean}
  */
-
 function isRecent(relativeDate) {
   return relativeDate < Recent;
 }
@@ -422,14 +397,12 @@ function isRecent(relativeDate) {
  * @param {Number} date
  * @returns {String}
  */
-
 const displayTime = date => {
   const hours = Math.floor(Math.abs(date / 3600000));
   const plural = hours === 1 ? 'hour' : 'hours';
   const suffix = hours === 0 ? '' : `${plural} ago`;
   return `${hours} ${suffix}`;
 };
-
 var RelativeTime = (({
   publishedDate,
   firstPublishedDate,
@@ -472,12 +445,9 @@ var LiveBlogStatus = (({
  * If same calendar day, we show relative time e.g. X hours ago or Updated X min ago
  * If different calendar day, we show full Date time e.g. June 9, 2021
  */
-
 var AlwaysShowTimestamp = (props => {
   const localTodayDate = new Date().toISOString().substr(0, 10); // keep only the date bit
-
   const dateToCompare = new Date(props.publishedDate).toISOString().substr(0, 10);
-
   if (differenceInCalendarDays(localTodayDate, dateToCompare) >= 1) {
     return h(TimeStamp, props);
   } else {
@@ -491,7 +461,6 @@ var Status = (props => {
   if (props.status) {
     return h(LiveBlogStatus, props);
   }
-
   if (props.publishedDate) {
     if (props.useRelativeTimeIfToday) {
       return h(AlwaysShowTimestamp, props);
@@ -501,7 +470,6 @@ var Status = (props => {
       return h(TimeStamp, props);
     }
   }
-
   return null;
 });
 
@@ -537,17 +505,15 @@ var Title = (({
   ...props
 }) => {
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
-  const displayUrl = relativeUrl || url; // o-labels--premium left for backwards compatibility for o-labels v3
-
+  const displayUrl = relativeUrl || url;
+  // o-labels--premium left for backwards compatibility for o-labels v3
   const premiumClass = 'o-labels o-labels--premium o-labels--content-premium';
   let ariaLabel;
-
   if (props.type === 'video') {
     ariaLabel = `Watch video ${displayTitle}`;
   } else if (props.type === 'audio') {
     ariaLabel = `Listen to podcast ${displayTitle}`;
   }
-
   return h("div", {
     className: "o-teaser__heading"
   }, h(Link, Object.assign({}, props, {
@@ -564,13 +530,14 @@ var Title = (({
   }, "\xA0content")) : null);
 });
 
+// Re-format the data for use with o-video
 const formatData = props => JSON.stringify({
   renditions: [props.video],
   mainImageUrl: props.image ? props.image.url : null
-}); // To prevent React from touching the DOM after mounting… return an empty <div />
-// <https://reactjs.org/docs/integrating-with-other-libraries.html>
-
+});
 
+// To prevent React from touching the DOM after mounting… return an empty <div />
+// <https://reactjs.org/docs/integrating-with-other-libraries.html>
 const Embed = props => {
   const showGuidance = typeof props.showGuidance === 'boolean' ? props.showGuidance.toString() : 'true';
   return h("div", {
@@ -591,7 +558,6 @@ const Embed = props => {
     "data-o-video-systemcode": props.systemCode
   }));
 };
-
 var Video = (props => h("div", {
   className: "o-teaser__video"
 }, h("div", {

package/package.json

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