@financial-times/x-teaser 20.0.0-beta.1 → 20.0.0-beta.3

package/Props.d.ts

@@ -66,7 +66,7 @@ export interface Meta {
   /** @deprecated - use metaLinks instead */
   metaLink?: MetaLink
   /** @deprecated - use metaLinks instead
-   * allback used if the parentId is the same as the display concept */
+   * Fallback used if the parentId is the same as the display concept */
   metaAltLink?: MetaLink
   /** Promoted content type */
   promotedPrefixText?: string

package/__tests__/CustomSlotTop.test.jsx

@@ -0,0 +1,38 @@
+const { h } = require('@financial-times/x-engine')
+const { mount } = require('@financial-times/x-test-utils/enzyme')
+const renderer = require('react-test-renderer')
+const { Teaser } = require('../')
+const article = require('../__fixtures__/article.json')
+
+describe('x-teaser / CustomSlotTop', () => {
+	let props
+
+	beforeEach(() => {
+		props = {
+			...article,
+			showTitle: true
+		}
+	})
+
+	it('should not render a custom slot top as default', () => {
+		const tree = renderer.create(h(Teaser, props)).toJSON()
+		expect(tree).toMatchSnapshot()
+	})
+
+	it('render a custom slot top with a string', () => {
+		const customSlotTopHTML = '<p>Some HTML</p>'
+		props.showCustomSlotTop = true
+		props.customSlotTop = customSlotTopHTML
+		const subject = mount(<Teaser {...props} />)
+		expect(subject.find('.x-teaser-custom-slot-top').html()).toBe(
+			`<div class="x-teaser-custom-slot-top">${customSlotTopHTML}</div>`
+		)
+	})
+
+	it('render a custom slot top with a React element', () => {
+		props.showCustomSlotTop = true
+		props.customSlotTop = <div className="custom-slot-top--with-react-element">Custom slot top content</div>
+		const subject = mount(<Teaser {...props} />)
+		expect(subject.find('.custom-slot-top--with-react-element')).toBeTruthy()
+	})
+})

package/__tests__/__snapshots__/CustomSlotTop.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`x-teaser / CustomSlotTop should not render a custom slot top as default 1`] = `
+<div
+  className="o-teaser o-teaser--article o-teaser--highlight js-teaser"
+  data-id=""
+>
+  <div
+    className="o-teaser__content"
+  >
+    <div
+      className="o-teaser__heading"
+    >
+      <a
+        className="js-teaser-heading-link"
+        data-trackable="heading-link"
+        data-trackable-context-story-link="heading-link"
+        href="#"
+      >
+        Inside charity fundraiser where hostesses are put on show
+      </a>
+    </div>
+  </div>
+</div>
+`;

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

@@ -256,6 +256,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with opinion data 1`] = `
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -346,6 +347,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with packageItem data 1`] =
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -886,6 +888,7 @@ exports[`x-teaser / snapshots renders a HeroNarrow teaser with opinion data 1`]
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -963,6 +966,7 @@ exports[`x-teaser / snapshots renders a HeroNarrow teaser with packageItem data
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -1464,6 +1468,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with opinion data 1`]
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -1554,6 +1559,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with packageItem data
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -2042,6 +2048,7 @@ exports[`x-teaser / snapshots renders a HeroVideo teaser with opinion data 1`] =
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -2106,6 +2113,7 @@ exports[`x-teaser / snapshots renders a HeroVideo teaser with packageItem data 1
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -2651,6 +2659,7 @@ exports[`x-teaser / snapshots renders a Large teaser with opinion data 1`] = `
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -2754,6 +2763,7 @@ exports[`x-teaser / snapshots renders a Large teaser with packageItem data 1`] =
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -3307,6 +3317,7 @@ exports[`x-teaser / snapshots renders a Small teaser with opinion data 1`] = `
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -3371,6 +3382,7 @@ exports[`x-teaser / snapshots renders a Small teaser with packageItem data 1`] =
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -3859,6 +3871,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with opinion data 1`]
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -3962,6 +3975,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with packageItem data
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -4567,6 +4581,7 @@ exports[`x-teaser / snapshots renders a TopStory teaser with opinion data 1`] =
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -4644,6 +4659,7 @@ exports[`x-teaser / snapshots renders a TopStory teaser with packageItem data 1`
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -5234,6 +5250,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with opinion da
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Anti-Semitism and the threat of identity politics"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"
@@ -5337,6 +5354,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with packageIte
       className="o-teaser__heading"
     >
       <a
+        aria-label="Opinion content. Why so little has changed since the crash"
         className="js-teaser-heading-link"
         data-trackable="heading-link"
         data-trackable-context-story-link="heading-link"

package/__tests__/same-label.test.js

@@ -0,0 +1,43 @@
+import sameLabel from '../src/concerns/same-label'
+
+describe('same-label', () => {
+	describe('when label matches context.parentLabel', () => {
+		it('returns true', () => {
+			const context = { parentLabel: 'Opinion' }
+			const label = 'Opinion'
+			expect(sameLabel(context, label)).toBe(true)
+		})
+	})
+
+	describe('when label does not match context.parentLabel', () => {
+		it('returns false', () => {
+			const context = { parentLabel: 'Opinion' }
+			const label = 'News'
+			expect(sameLabel(context, label)).toBe(false)
+		})
+	})
+
+	describe('when label is undefined', () => {
+		it('returns false', () => {
+			const context = { parentLabel: 'Opinion' }
+			const label = undefined
+			expect(sameLabel(context, label)).toBe(false)
+		})
+	})
+
+	describe('when context.parentLabel is undefined', () => {
+		it('returns false', () => {
+			const context = { parentLabel: undefined }
+			const label = 'News'
+			expect(sameLabel(context, label)).toBe(false)
+		})
+	})
+
+	describe('when both label and context.parentLabel are undefined', () => {
+		it('returns false', () => {
+			const context = { parentLabel: undefined }
+			const label = undefined
+			expect(sameLabel(context, label)).toBe(false)
+		})
+	})
+})

package/dist/Teaser.cjs.js

@@ -98,12 +98,34 @@ var Content = ({
   className: "o-teaser__content"
 }, children);
 
+/**
+ * Render
+ * @param {String|ReactElement} slot
+ * @returns {ReactElement}
+ */
+const render = slot => {
+  // Allow parent components to pass raw HTML strings
+  if (typeof slot === 'string') {
+    return xEngine.h("div", {
+      className: "x-teaser-custom-slot-top",
+      dangerouslySetInnerHTML: {
+        __html: slot
+      }
+    });
+  } else {
+    return slot;
+  }
+};
+var CustomSlotTop = ({
+  customSlotTop
+}) => customSlotTop ? render(customSlotTop) : null;
+
 /**
  * Render
  * @param {String|ReactElement} action
  * @returns {ReactElement}
  */
-const render = action => {
+const render$1 = action => {
   // Allow parent components to pass raw HTML strings
   if (typeof action === 'string') {
     return xEngine.h("span", {
@@ -119,7 +141,7 @@ var CustomSlot = ({
   customSlot
 }) => customSlot ? xEngine.h("div", {
   className: "o-teaser__action"
-}, render(customSlot)) : null;
+}, render$1(customSlot)) : null;
 
 const ImageSizes = {
   Headshot: 75,
@@ -342,9 +364,10 @@ var Image = ({
   }))));
 };
 
-const sameLabel = (context = {}, label) => {
-  return label && context && context.parentLabel && label === context.parentLabel;
-};
+function sameLabel(context = {}, label) {
+  return Boolean(label && label === (context === null || context === void 0 ? void 0 : context.parentLabel));
+}
+
 const isLegacyMode = metaLinks => !Array.isArray(metaLinks);
 const getDisplayLink = ({
   metaLink,
@@ -646,6 +669,7 @@ var Title = ({
   url,
   ...props
 }) => {
+  var _props$indicators;
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
   const displayUrl = relativeUrl || url;
   let ariaLabel;
@@ -653,6 +677,8 @@ var Title = ({
     ariaLabel = `Watch video ${displayTitle}`;
   } else if (props.type === 'audio') {
     ariaLabel = `Listen to podcast ${displayTitle}`;
+  } else if (((_props$indicators = props.indicators) === null || _props$indicators === void 0 ? void 0 : _props$indicators.isOpinion) === true) {
+    ariaLabel = `Opinion content. ${displayTitle}`;
   }
   return xEngine.h("div", {
     className: "o-teaser__heading"
@@ -664,7 +690,7 @@ var Title = ({
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), showTitlePrefix && titlePrefix && xEngine.h("span", {
+  }), showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && xEngine.h("span", {
     className: "o-teaser__heading-prefix"
   }, `${titlePrefix}. `), displayTitle));
 };
@@ -849,13 +875,14 @@ var presets = {
   TopStoryLandscape
 };
 
-const Teaser = props => xEngine.h(Container, props, xEngine.h(Content, null, props.showMeta ? xEngine.h(Meta, props) : null, media(props) === 'video' ? xEngine.h(Video, props) : null, props.showTitle ? xEngine.h(Title, props) : null, props.showStandfirst ? xEngine.h(Standfirst, props) : null, props.showByline ? xEngine.h(Byline, props) : null, xEngine.h(Status, props), props.showCustomSlot ? xEngine.h(CustomSlot, props) : null,
+const Teaser = props => xEngine.h(Container, props, xEngine.h(Content, null, props.showCustomSlotTop ? xEngine.h(CustomSlotTop, props) : null, props.showMeta ? xEngine.h(Meta, props) : null, media(props) === 'video' ? xEngine.h(Video, props) : null, props.showTitle ? xEngine.h(Title, props) : null, props.showStandfirst ? xEngine.h(Standfirst, props) : null, props.showByline ? xEngine.h(Byline, props) : null, xEngine.h(Status, props), props.showCustomSlot ? xEngine.h(CustomSlot, props) : null,
 /* Headshot is a legacy element.
 The Byline component already includes a headshot.
 Only render the Headshot when the media rule `headshot` is true,
 which means `showByline` is falsy. */
 media(props) === 'headshot' ? xEngine.h(Headshot, props) : null), media(props) === 'promotionalContent' ? xEngine.h(PromotionalContent, props) : null, media(props) === 'image' ? xEngine.h(Image, props) : null, props.showRelatedLinks ? xEngine.h(RelatedLinks, props) : null);
 
+exports.Byline = Byline;
 exports.Container = Container;
 exports.Content = Content;
 exports.CustomSlot = CustomSlot;

package/dist/Teaser.es5.js

@@ -106,12 +106,35 @@ var Content = (function (_ref) {
   }, children);
 });
 
+/**
+ * Render
+ * @param {String|ReactElement} slot
+ * @returns {ReactElement}
+ */
+var render = function render(slot) {
+  // Allow parent components to pass raw HTML strings
+  if (typeof slot === 'string') {
+    return xEngine.h("div", {
+      className: "x-teaser-custom-slot-top",
+      dangerouslySetInnerHTML: {
+        __html: slot
+      }
+    });
+  } else {
+    return slot;
+  }
+};
+var CustomSlotTop = (function (_ref) {
+  var customSlotTop = _ref.customSlotTop;
+  return customSlotTop ? render(customSlotTop) : null;
+});
+
 /**
  * Render
  * @param {String|ReactElement} action
  * @returns {ReactElement}
  */
-var render = function render(action) {
+var render$1 = function render(action) {
   // Allow parent components to pass raw HTML strings
   if (typeof action === 'string') {
     return xEngine.h("span", {
@@ -127,7 +150,7 @@ var CustomSlot = (function (_ref) {
   var customSlot = _ref.customSlot;
   return customSlot ? xEngine.h("div", {
     className: "o-teaser__action"
-  }, render(customSlot)) : null;
+  }, render$1(customSlot)) : null;
 });
 
 function _iterableToArrayLimit(r, l) {
@@ -485,11 +508,12 @@ var Image = (function (_ref4) {
   }))));
 });
 
-var sameLabel = function 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;
-};
+  return Boolean(label && label === (context === null || context === void 0 ? void 0 : context.parentLabel));
+}
+
 var isLegacyMode = function isLegacyMode(metaLinks) {
   return !Array.isArray(metaLinks);
 };
@@ -791,6 +815,7 @@ var Standfirst = (function (_ref) {
 
 var _excluded$3 = ["title", "altTitle", "showTitlePrefix", "titlePrefix", "headlineTesting", "relativeUrl", "url"];
 var Title = (function (_ref) {
+  var _props$indicators;
   var title = _ref.title,
     altTitle = _ref.altTitle,
     showTitlePrefix = _ref.showTitlePrefix,
@@ -806,6 +831,8 @@ var Title = (function (_ref) {
     ariaLabel = "Watch video ".concat(displayTitle);
   } else if (props.type === 'audio') {
     ariaLabel = "Listen to podcast ".concat(displayTitle);
+  } else if (((_props$indicators = props.indicators) === null || _props$indicators === void 0 ? void 0 : _props$indicators.isOpinion) === true) {
+    ariaLabel = "Opinion content. ".concat(displayTitle);
   }
   return xEngine.h("div", {
     className: "o-teaser__heading"
@@ -817,7 +844,7 @@ var Title = (function (_ref) {
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), showTitlePrefix && titlePrefix && xEngine.h("span", {
+  }), showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && xEngine.h("span", {
     className: "o-teaser__heading-prefix"
   }, "".concat(titlePrefix, ". ")), displayTitle));
 });
@@ -1008,7 +1035,7 @@ var presets = {
 };
 
 var Teaser = function Teaser(props) {
-  return xEngine.h(Container, props, xEngine.h(Content, null, props.showMeta ? xEngine.h(Meta, props) : null, media(props) === 'video' ? xEngine.h(Video, props) : null, props.showTitle ? xEngine.h(Title, props) : null, props.showStandfirst ? xEngine.h(Standfirst, props) : null, props.showByline ? xEngine.h(Byline, props) : null, xEngine.h(Status, props), props.showCustomSlot ? xEngine.h(CustomSlot, props) : null,
+  return xEngine.h(Container, props, xEngine.h(Content, null, props.showCustomSlotTop ? xEngine.h(CustomSlotTop, props) : null, props.showMeta ? xEngine.h(Meta, props) : null, media(props) === 'video' ? xEngine.h(Video, props) : null, props.showTitle ? xEngine.h(Title, props) : null, props.showStandfirst ? xEngine.h(Standfirst, props) : null, props.showByline ? xEngine.h(Byline, props) : null, xEngine.h(Status, props), props.showCustomSlot ? xEngine.h(CustomSlot, props) : null,
   /* Headshot is a legacy element.
   The Byline component already includes a headshot.
   Only render the Headshot when the media rule `headshot` is true,
@@ -1016,6 +1043,7 @@ var Teaser = function Teaser(props) {
   media(props) === 'headshot' ? xEngine.h(Headshot, props) : null), media(props) === 'promotionalContent' ? xEngine.h(PromotionalContent, props) : null, media(props) === 'image' ? xEngine.h(Image, props) : null, props.showRelatedLinks ? xEngine.h(RelatedLinks, props) : null);
 };
 
+exports.Byline = Byline;
 exports.Container = Container;
 exports.Content = Content;
 exports.CustomSlot = CustomSlot;

package/dist/Teaser.esm.js

@@ -92,12 +92,34 @@ var Content = ({
   className: "o-teaser__content"
 }, children);
 
+/**
+ * Render
+ * @param {String|ReactElement} slot
+ * @returns {ReactElement}
+ */
+const render = slot => {
+  // Allow parent components to pass raw HTML strings
+  if (typeof slot === 'string') {
+    return h("div", {
+      className: "x-teaser-custom-slot-top",
+      dangerouslySetInnerHTML: {
+        __html: slot
+      }
+    });
+  } else {
+    return slot;
+  }
+};
+var CustomSlotTop = ({
+  customSlotTop
+}) => customSlotTop ? render(customSlotTop) : null;
+
 /**
  * Render
  * @param {String|ReactElement} action
  * @returns {ReactElement}
  */
-const render = action => {
+const render$1 = action => {
   // Allow parent components to pass raw HTML strings
   if (typeof action === 'string') {
     return h("span", {
@@ -113,7 +135,7 @@ var CustomSlot = ({
   customSlot
 }) => customSlot ? h("div", {
   className: "o-teaser__action"
-}, render(customSlot)) : null;
+}, render$1(customSlot)) : null;
 
 const ImageSizes = {
   Headshot: 75,
@@ -336,9 +358,10 @@ var Image = ({
   }))));
 };
 
-const sameLabel = (context = {}, label) => {
-  return label && context && context.parentLabel && label === context.parentLabel;
-};
+function sameLabel(context = {}, label) {
+  return Boolean(label && label === (context === null || context === void 0 ? void 0 : context.parentLabel));
+}
+
 const isLegacyMode = metaLinks => !Array.isArray(metaLinks);
 const getDisplayLink = ({
   metaLink,
@@ -640,6 +663,7 @@ var Title = ({
   url,
   ...props
 }) => {
+  var _props$indicators;
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
   const displayUrl = relativeUrl || url;
   let ariaLabel;
@@ -647,6 +671,8 @@ var Title = ({
     ariaLabel = `Watch video ${displayTitle}`;
   } else if (props.type === 'audio') {
     ariaLabel = `Listen to podcast ${displayTitle}`;
+  } else if (((_props$indicators = props.indicators) === null || _props$indicators === void 0 ? void 0 : _props$indicators.isOpinion) === true) {
+    ariaLabel = `Opinion content. ${displayTitle}`;
   }
   return h("div", {
     className: "o-teaser__heading"
@@ -658,7 +684,7 @@ var Title = ({
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), showTitlePrefix && titlePrefix && h("span", {
+  }), showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && h("span", {
     className: "o-teaser__heading-prefix"
   }, `${titlePrefix}. `), displayTitle));
 };
@@ -843,11 +869,11 @@ var presets = {
   TopStoryLandscape
 };
 
-const Teaser = props => h(Container, props, h(Content, null, props.showMeta ? h(Meta, props) : null, media(props) === 'video' ? h(Video, props) : null, props.showTitle ? h(Title, props) : null, props.showStandfirst ? h(Standfirst, props) : null, props.showByline ? h(Byline, props) : null, h(Status, props), props.showCustomSlot ? h(CustomSlot, props) : null,
+const Teaser = props => h(Container, props, h(Content, null, props.showCustomSlotTop ? h(CustomSlotTop, props) : null, props.showMeta ? h(Meta, props) : null, media(props) === 'video' ? h(Video, props) : null, props.showTitle ? h(Title, props) : null, props.showStandfirst ? h(Standfirst, props) : null, props.showByline ? h(Byline, props) : null, h(Status, props), props.showCustomSlot ? h(CustomSlot, props) : null,
 /* Headshot is a legacy element.
 The Byline component already includes a headshot.
 Only render the Headshot when the media rule `headshot` is true,
 which means `showByline` is falsy. */
 media(props) === 'headshot' ? h(Headshot, props) : null), media(props) === 'promotionalContent' ? h(PromotionalContent, props) : null, media(props) === 'image' ? h(Image, props) : null, props.showRelatedLinks ? h(RelatedLinks, props) : null);
 
-export { Container, Content, CustomSlot, Headshot, Image, Meta, RelatedLinks, Standfirst, Status, Teaser, Title, Video, presets };
+export { Byline, Container, Content, CustomSlot, Headshot, Image, Meta, RelatedLinks, Standfirst, Status, Teaser, Title, Video, presets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "20.0.0-beta.1",
+  "version": "20.0.0-beta.3",
   "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": "^20.0.0-beta.1",
+    "@financial-times/x-engine": "^20.0.0-beta.3",
     "dateformat": "^3.0.3"
   },
   "devDependencies": {

package/src/CustomSlotTop.jsx

@@ -0,0 +1,17 @@
+import { h } from '@financial-times/x-engine'
+
+/**
+ * Render
+ * @param {String|ReactElement} slot
+ * @returns {ReactElement}
+ */
+const render = (slot) => {
+	// Allow parent components to pass raw HTML strings
+	if (typeof slot === 'string') {
+		return <div className="x-teaser-custom-slot-top" dangerouslySetInnerHTML={{ __html: slot }} />
+	} else {
+		return slot
+	}
+}
+
+export default ({ customSlotTop }) => (customSlotTop ? render(customSlotTop) : null)

package/src/MetaLink.jsx

@@ -1,8 +1,5 @@
 import { h } from '@financial-times/x-engine'
-
-const sameLabel = (context = {}, label) => {
-	return label && context && context.parentLabel && label === context.parentLabel
-}
+import sameLabel from './concerns/same-label'
 
 const isLegacyMode = (metaLinks) => !Array.isArray(metaLinks)
 

package/src/Teaser.jsx

@@ -1,6 +1,7 @@
 import { h } from '@financial-times/x-engine'
 import Container from './Container'
 import Content from './Content'
+import CustomSlotTop from './CustomSlotTop'
 import CustomSlot from './CustomSlot'
 import Byline from './Byline'
 import Headshot from './Headshot'
@@ -18,6 +19,7 @@ import presets from './concerns/presets'
 const Teaser = (props) => (
 	<Container {...props}>
 		<Content>
+			{props.showCustomSlotTop ? <CustomSlotTop {...props} /> : null}
 			{props.showMeta ? <Meta {...props} /> : null}
 			{media(props) === 'video' ? <Video {...props} /> : null}
 			{props.showTitle ? <Title {...props} /> : null}
@@ -46,6 +48,7 @@ export {
 	Headshot,
 	Image,
 	Meta,
+	Byline,
 	RelatedLinks,
 	Standfirst,
 	Status,

package/src/Title.jsx

@@ -1,5 +1,6 @@
 import { h } from '@financial-times/x-engine'
 import Link from './Link'
+import sameLabel from './concerns/same-label'
 
 export default ({
 	title,
@@ -19,6 +20,8 @@ export default ({
 		ariaLabel = `Watch video ${displayTitle}`
 	} else if (props.type === 'audio') {
 		ariaLabel = `Listen to podcast ${displayTitle}`
+	} else if (props.indicators?.isOpinion === true) {
+		ariaLabel = `Opinion content. ${displayTitle}`
 	}
 
 	return (
@@ -33,7 +36,7 @@ export default ({
 					'aria-label': ariaLabel
 				}}
 			>
-				{showTitlePrefix && titlePrefix && (
+				{showTitlePrefix && titlePrefix && !sameLabel(props.context, titlePrefix) && (
 					<span className="o-teaser__heading-prefix">{`${titlePrefix}. `}</span>
 				)}
 				{displayTitle}

package/src/concerns/same-label.js

@@ -0,0 +1,3 @@
+export default function sameLabel(context = {}, label) {
+	return Boolean(label && label === context?.parentLabel)
+}