@financial-times/x-teaser 20.0.0-beta.2 → 20.0.0

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

@@ -16,4 +16,28 @@ describe('same-label', () => {
 			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,
@@ -647,6 +669,7 @@ var Title = ({
   url,
   ...props
 }) => {
+  var _props$indicators;
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
   const displayUrl = relativeUrl || url;
   let ariaLabel;
@@ -654,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"
@@ -850,7 +875,7 @@ 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,

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) {
@@ -792,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,
@@ -807,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"
@@ -1009,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,

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,
@@ -641,6 +663,7 @@ var Title = ({
   url,
   ...props
 }) => {
+  var _props$indicators;
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
   const displayUrl = relativeUrl || url;
   let ariaLabel;
@@ -648,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"
@@ -844,7 +869,7 @@ 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "20.0.0-beta.2",
+  "version": "20.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",
@@ -18,7 +18,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/x-engine": "^20.0.0-beta.2",
+    "@financial-times/x-engine": "^20.0.0",
     "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/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}

package/src/Title.jsx

@@ -20,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 (