@financial-times/x-teaser 14.9.0 → 15.0.0

package/dist/Teaser.cjs.js

@@ -75,7 +75,7 @@ const dynamicModifiers = props => {
   }
   return modifiers;
 };
-var Container = (props => {
+var Container = props => {
   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);
@@ -85,13 +85,13 @@ var Container = (props => {
     "data-id": props.id,
     "data-trackable": props.dataTrackable
   }, props.children);
-});
+};
 
-var Content = (({
+var Content = ({
   children = []
 }) => xEngine.h("div", {
   className: "o-teaser__content"
-}, children));
+}, children);
 
 /**
  * Render
@@ -110,11 +110,11 @@ const render = action => {
     return action;
   }
 };
-var CustomSlot = (({
+var CustomSlot = ({
   customSlot
 }) => customSlot ? xEngine.h("div", {
   className: "o-teaser__action"
-}, render(customSlot)) : null);
+}, render(customSlot)) : null;
 
 const ImageSizes = {
   Headshot: 75,
@@ -125,7 +125,6 @@ const ImageSizes = {
   XL: 640,
   XXL: 1180 // max width of FT.com page
 };
-
 const Layouts = {
   Small: 'small',
   Large: 'large',
@@ -160,7 +159,7 @@ function imageService(url, width, options) {
 
 // these colours are tweaked from o-colors palette colours to make headshots look less washed out
 const DEFAULT_TINT = '054593,d6d5d3';
-var Headshot = (({
+var Headshot = ({
   headshot,
   headshotTint
 }) => {
@@ -175,7 +174,7 @@ var Headshot = (({
     "aria-hidden": "true",
     src: imageService(headshot, ImageSizes.Headshot, options)
   }) : null;
-});
+};
 
 const BaseLink = ({
   url,
@@ -190,13 +189,13 @@ const BaseLink = ({
     return xEngine.h("span", attrs, children);
   }
 };
-var Link = (({
+var Link = ({
   customElements = {},
   ...props
 }) => {
   const Link = customElements.Link || BaseLink;
   return xEngine.h(Link, props);
-});
+};
 
 /**
  * Aspect Ratio
@@ -234,7 +233,7 @@ const LazyImage = ({
     alt: alt
   });
 };
-var Image = (({
+var Image = ({
   relativeUrl,
   url,
   image,
@@ -274,7 +273,7 @@ var Image = (({
     lazyLoad: imageLazyLoad,
     alt: alt
   }))));
-});
+};
 
 const sameId = (context = {}, id) => {
   return id && context && context.parentId && id === context.parentId;
@@ -282,7 +281,7 @@ const sameId = (context = {}, id) => {
 const sameLabel = (context = {}, label) => {
   return label && context && context.parentLabel && label === context.parentLabel;
 };
-var MetaLink = (({
+var MetaLink = ({
   metaPrefixText,
   metaLink,
   metaAltLink,
@@ -308,9 +307,9 @@ var MetaLink = (({
   }, displayLink.prefLabel) : null, showSuffixText ? xEngine.h("span", {
     className: "o-teaser__tag-suffix"
   }, metaSuffixText) : null);
-});
+};
 
-var Promoted = (({
+var Promoted = ({
   promotedPrefixText,
   promotedSuffixText
 }) => xEngine.h("div", {
@@ -319,12 +318,12 @@ var Promoted = (({
   className: "o-teaser__promoted-prefix"
 }, promotedPrefixText), " by", xEngine.h("span", {
   className: "o-teaser__promoted-by"
-}, ` ${promotedSuffixText} `)));
+}, ` ${promotedSuffixText} `));
 
-var Meta = (props => {
+var Meta = props => {
   const showPromoted = props.promotedPrefixText && props.promotedSuffixText;
   return showPromoted ? xEngine.h(Promoted, props) : xEngine.h(MetaLink, props);
-});
+};
 
 const renderLink = ({
   id,
@@ -343,20 +342,20 @@ const renderLink = ({
     href: displayUrl
   }, title));
 };
-var RelatedLinks = (({
+var RelatedLinks = ({
   relatedLinks = []
 }) => relatedLinks && relatedLinks.length ? xEngine.h("ul", {
   className: "o-teaser__related"
-}, relatedLinks.map(renderLink)) : null);
+}, relatedLinks.map(renderLink)) : null;
 
-var TimeStamp = (({
+var TimeStamp = ({
   publishedDate
 }) => xEngine.h("div", {
   className: "o-teaser__timestamp"
 }, xEngine.h("time", {
   className: "o-teaser__timestamp-date",
   dateTime: dateformat(publishedDate, dateformat.masks.isoDateTime, true)
-}, dateformat(publishedDate, dateformat.masks.longDate, true))));
+}, dateformat(publishedDate, dateformat.masks.longDate, true)));
 
 /**
  * To Date
@@ -419,7 +418,7 @@ const displayTime = date => {
   const suffix = hours === 0 ? '' : `${plural} ago`;
   return `${hours} ${suffix}`;
 };
-var RelativeTime = (({
+var RelativeTime = ({
   publishedDate,
   firstPublishedDate,
   showAlways = false
@@ -436,7 +435,7 @@ var RelativeTime = (({
     "data-o-date-format": showAlways ? 'time-ago-limit-24-hours' : 'time-ago-limit-4-hours',
     dateTime: dateformat(publishedDate, dateformat.masks.isoDateTime, true)
   }, status ? '' : displayTime(relativeDate))) : null;
-});
+};
 
 const LiveBlogLabels = {
   inprogress: 'Live',
@@ -448,20 +447,20 @@ const LiveBlogModifiers = {
   comingsoon: 'pending',
   closed: 'closed'
 };
-var LiveBlogStatus = (({
+var LiveBlogStatus = ({
   status
 }) => status && status !== 'closed' ? xEngine.h("div", {
   className: `o-teaser__timestamp o-teaser__timestamp--${LiveBlogModifiers[status]}`
 }, xEngine.h("span", {
   className: "o-teaser__timestamp-prefix"
-}, ` ${LiveBlogLabels[status]} `)) : null);
+}, ` ${LiveBlogLabels[status]} `)) : null;
 
 /**
  * Timestamp shown always, the default 4h limit does not apply here
  * 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 => {
+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) {
@@ -471,9 +470,9 @@ var AlwaysShowTimestamp = (props => {
       showAlways: true
     }));
   }
-});
+};
 
-var Status = (props => {
+var Status = props => {
   if (props.status) {
     return xEngine.h(LiveBlogStatus, props);
   }
@@ -487,9 +486,9 @@ var Status = (props => {
     }
   }
   return null;
-});
+};
 
-var Standfirst = (({
+var Standfirst = ({
   standfirst,
   altStandfirst,
   headlineTesting,
@@ -510,9 +509,9 @@ var Standfirst = (({
       className: 'js-teaser-standfirst-link'
     }
   }), displayStandfirst)) : null;
-});
+};
 
-var Title = (({
+var Title = ({
   title,
   altTitle,
   headlineTesting,
@@ -544,9 +543,9 @@ var Title = (({
   }), displayTitle), indicators && indicators.accessLevel === 'premium' ? xEngine.h("span", null, ' ', xEngine.h("span", {
     className: premiumClass
   }, "Premium"), xEngine.h("span", {
-    className: "o-normalise-visually-hidden"
+    className: "o3-visually-hidden"
   }, "\xA0content")) : null);
-});
+};
 
 // Re-format the data for use with o-video
 const formatData = props => JSON.stringify({
@@ -576,13 +575,13 @@ const Embed = props => {
     "data-o-video-systemcode": props.systemCode
   }));
 };
-var Video = (props => xEngine.h("div", {
+var Video = props => xEngine.h("div", {
   className: "o-teaser__video"
 }, xEngine.h("div", {
   className: "o--if-js"
 }, xEngine.h(Embed, props)), xEngine.h("div", {
   className: "o--if-no-js"
-}, xEngine.h(Image, props))));
+}, xEngine.h(Image, props)));
 
 const PromotionalContent = ({
   promotionalContent

package/dist/Teaser.es5.js

@@ -134,7 +134,6 @@ var ImageSizes = {
   XL: 640,
   XXL: 1180 // max width of FT.com page
 };
-
 var Layouts = {
   Small: 'small',
   Large: 'large',
@@ -632,7 +631,7 @@ var Title = (function (_ref) {
   }), displayTitle), indicators && indicators.accessLevel === 'premium' ? xEngine.h("span", null, ' ', xEngine.h("span", {
     className: premiumClass
   }, "Premium"), xEngine.h("span", {
-    className: "o-normalise-visually-hidden"
+    className: "o3-visually-hidden"
   }, "\xA0content")) : null);
 });
 

package/dist/Teaser.esm.js

@@ -69,7 +69,7 @@ const dynamicModifiers = props => {
   }
   return modifiers;
 };
-var Container = (props => {
+var Container = props => {
   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);
@@ -79,13 +79,13 @@ var Container = (props => {
     "data-id": props.id,
     "data-trackable": props.dataTrackable
   }, props.children);
-});
+};
 
-var Content = (({
+var Content = ({
   children = []
 }) => h("div", {
   className: "o-teaser__content"
-}, children));
+}, children);
 
 /**
  * Render
@@ -104,11 +104,11 @@ const render = action => {
     return action;
   }
 };
-var CustomSlot = (({
+var CustomSlot = ({
   customSlot
 }) => customSlot ? h("div", {
   className: "o-teaser__action"
-}, render(customSlot)) : null);
+}, render(customSlot)) : null;
 
 const ImageSizes = {
   Headshot: 75,
@@ -119,7 +119,6 @@ const ImageSizes = {
   XL: 640,
   XXL: 1180 // max width of FT.com page
 };
-
 const Layouts = {
   Small: 'small',
   Large: 'large',
@@ -154,7 +153,7 @@ function imageService(url, width, options) {
 
 // these colours are tweaked from o-colors palette colours to make headshots look less washed out
 const DEFAULT_TINT = '054593,d6d5d3';
-var Headshot = (({
+var Headshot = ({
   headshot,
   headshotTint
 }) => {
@@ -169,7 +168,7 @@ var Headshot = (({
     "aria-hidden": "true",
     src: imageService(headshot, ImageSizes.Headshot, options)
   }) : null;
-});
+};
 
 const BaseLink = ({
   url,
@@ -184,13 +183,13 @@ const BaseLink = ({
     return h("span", attrs, children);
   }
 };
-var Link = (({
+var Link = ({
   customElements = {},
   ...props
 }) => {
   const Link = customElements.Link || BaseLink;
   return h(Link, props);
-});
+};
 
 /**
  * Aspect Ratio
@@ -228,7 +227,7 @@ const LazyImage = ({
     alt: alt
   });
 };
-var Image = (({
+var Image = ({
   relativeUrl,
   url,
   image,
@@ -268,7 +267,7 @@ var Image = (({
     lazyLoad: imageLazyLoad,
     alt: alt
   }))));
-});
+};
 
 const sameId = (context = {}, id) => {
   return id && context && context.parentId && id === context.parentId;
@@ -276,7 +275,7 @@ const sameId = (context = {}, id) => {
 const sameLabel = (context = {}, label) => {
   return label && context && context.parentLabel && label === context.parentLabel;
 };
-var MetaLink = (({
+var MetaLink = ({
   metaPrefixText,
   metaLink,
   metaAltLink,
@@ -302,9 +301,9 @@ var MetaLink = (({
   }, displayLink.prefLabel) : null, showSuffixText ? h("span", {
     className: "o-teaser__tag-suffix"
   }, metaSuffixText) : null);
-});
+};
 
-var Promoted = (({
+var Promoted = ({
   promotedPrefixText,
   promotedSuffixText
 }) => h("div", {
@@ -313,12 +312,12 @@ var Promoted = (({
   className: "o-teaser__promoted-prefix"
 }, promotedPrefixText), " by", h("span", {
   className: "o-teaser__promoted-by"
-}, ` ${promotedSuffixText} `)));
+}, ` ${promotedSuffixText} `));
 
-var Meta = (props => {
+var Meta = props => {
   const showPromoted = props.promotedPrefixText && props.promotedSuffixText;
   return showPromoted ? h(Promoted, props) : h(MetaLink, props);
-});
+};
 
 const renderLink = ({
   id,
@@ -337,20 +336,20 @@ const renderLink = ({
     href: displayUrl
   }, title));
 };
-var RelatedLinks = (({
+var RelatedLinks = ({
   relatedLinks = []
 }) => relatedLinks && relatedLinks.length ? h("ul", {
   className: "o-teaser__related"
-}, relatedLinks.map(renderLink)) : null);
+}, relatedLinks.map(renderLink)) : null;
 
-var TimeStamp = (({
+var TimeStamp = ({
   publishedDate
 }) => h("div", {
   className: "o-teaser__timestamp"
 }, h("time", {
   className: "o-teaser__timestamp-date",
   dateTime: dateformat(publishedDate, dateformat.masks.isoDateTime, true)
-}, dateformat(publishedDate, dateformat.masks.longDate, true))));
+}, dateformat(publishedDate, dateformat.masks.longDate, true)));
 
 /**
  * To Date
@@ -413,7 +412,7 @@ const displayTime = date => {
   const suffix = hours === 0 ? '' : `${plural} ago`;
   return `${hours} ${suffix}`;
 };
-var RelativeTime = (({
+var RelativeTime = ({
   publishedDate,
   firstPublishedDate,
   showAlways = false
@@ -430,7 +429,7 @@ var RelativeTime = (({
     "data-o-date-format": showAlways ? 'time-ago-limit-24-hours' : 'time-ago-limit-4-hours',
     dateTime: dateformat(publishedDate, dateformat.masks.isoDateTime, true)
   }, status ? '' : displayTime(relativeDate))) : null;
-});
+};
 
 const LiveBlogLabels = {
   inprogress: 'Live',
@@ -442,20 +441,20 @@ const LiveBlogModifiers = {
   comingsoon: 'pending',
   closed: 'closed'
 };
-var LiveBlogStatus = (({
+var LiveBlogStatus = ({
   status
 }) => status && status !== 'closed' ? h("div", {
   className: `o-teaser__timestamp o-teaser__timestamp--${LiveBlogModifiers[status]}`
 }, h("span", {
   className: "o-teaser__timestamp-prefix"
-}, ` ${LiveBlogLabels[status]} `)) : null);
+}, ` ${LiveBlogLabels[status]} `)) : null;
 
 /**
  * Timestamp shown always, the default 4h limit does not apply here
  * 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 => {
+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) {
@@ -465,9 +464,9 @@ var AlwaysShowTimestamp = (props => {
       showAlways: true
     }));
   }
-});
+};
 
-var Status = (props => {
+var Status = props => {
   if (props.status) {
     return h(LiveBlogStatus, props);
   }
@@ -481,9 +480,9 @@ var Status = (props => {
     }
   }
   return null;
-});
+};
 
-var Standfirst = (({
+var Standfirst = ({
   standfirst,
   altStandfirst,
   headlineTesting,
@@ -504,9 +503,9 @@ var Standfirst = (({
       className: 'js-teaser-standfirst-link'
     }
   }), displayStandfirst)) : null;
-});
+};
 
-var Title = (({
+var Title = ({
   title,
   altTitle,
   headlineTesting,
@@ -538,9 +537,9 @@ var Title = (({
   }), displayTitle), indicators && indicators.accessLevel === 'premium' ? h("span", null, ' ', h("span", {
     className: premiumClass
   }, "Premium"), h("span", {
-    className: "o-normalise-visually-hidden"
+    className: "o3-visually-hidden"
   }, "\xA0content")) : null);
-});
+};
 
 // Re-format the data for use with o-video
 const formatData = props => JSON.stringify({
@@ -570,13 +569,13 @@ const Embed = props => {
     "data-o-video-systemcode": props.systemCode
   }));
 };
-var Video = (props => h("div", {
+var Video = props => h("div", {
   className: "o-teaser__video"
 }, h("div", {
   className: "o--if-js"
 }, h(Embed, props)), h("div", {
   className: "o--if-no-js"
-}, h(Image, props))));
+}, h(Image, props)));
 
 const PromotionalContent = ({
   promotionalContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "14.9.0",
+  "version": "15.0.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",
@@ -17,7 +17,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/x-engine": "^14.9.0",
+    "@financial-times/x-engine": "^15.0.0",
     "date-fns": "^2.30.0",
     "dateformat": "^3.0.3"
   },

package/src/Title.jsx

@@ -23,14 +23,15 @@ export default ({ title, altTitle, headlineTesting, relativeUrl, url, indicators
 					'data-trackable-context-story-link': 'heading-link',
 					className: 'js-teaser-heading-link',
 					'aria-label': ariaLabel
-				}}>
+				}}
+			>
 				{displayTitle}
 			</Link>
 			{indicators && indicators.accessLevel === 'premium' ? (
 				<span>
 					{' '}
 					<span className={premiumClass}>Premium</span>
-					<span className="o-normalise-visually-hidden">&nbsp;content</span>
+					<span className="o3-visually-hidden">&nbsp;content</span>
 				</span>
 			) : null}
 		</div>

package/storybook/index.jsx

@@ -5,9 +5,7 @@ import BuildService from '../../../.storybook/build-service'
 const dependencies = {
 	'o-date': '^5.0.0',
 	'o-labels': '^6.0.0',
-	'o-normalise': '^3.0.0',
 	'o-teaser': '^6.0.0',
-	'o-typography': '^7.0.0',
 	'o-video': '^7.0.0'
 }