@financial-times/x-teaser 14.6.5 → 14.7.0

package/Props.d.ts

@@ -36,6 +36,7 @@ export interface Features {
   showVideo?: boolean
   showRelatedLinks?: boolean
   showCustomSlot?: boolean
+  showPromotionalContent?: boolean
 }
 
 export interface General {

package/dist/Teaser.cjs.js

@@ -24,6 +24,9 @@ const rulesets = {
     if (props.showImage && props.image && props.image.url) {
       return 'image';
     }
+    if (props.showPromotionalContent && props.promotionalContent) {
+      return 'promotionalContent';
+    }
   },
   theme: props => {
     if (props.theme) {
@@ -577,6 +580,12 @@ var Video = (props => xEngine.h("div", {
   className: "o--if-no-js"
 }, xEngine.h(Image, props))));
 
+const PromotionalContent = ({
+  promotionalContent
+}) => xEngine.h("div", {
+  className: "o-teaser__promotional-content"
+}, promotionalContent);
+
 const Small = {
   layout: Layouts.Small,
   useRelativeTime: true,
@@ -672,7 +681,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.showStatus ? xEngine.h(Status, props) : null, props.showCustomSlot ? xEngine.h(CustomSlot, props) : null, media(props) === 'headshot' ? xEngine.h(Headshot, props) : null), media(props) === 'image' ? xEngine.h(Image, props) : null, props.showRelatedLinks ? xEngine.h(RelatedLinks, props) : null);
+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.showStatus ? xEngine.h(Status, props) : null, props.showCustomSlot ? xEngine.h(CustomSlot, props) : null, 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.Container = Container;
 exports.Content = Content;

package/dist/Teaser.es5.js

@@ -24,6 +24,9 @@ var rulesets = {
     if (props.showImage && props.image && props.image.url) {
       return 'image';
     }
+    if (props.showPromotionalContent && props.promotionalContent) {
+      return 'promotionalContent';
+    }
   },
   theme: function theme(props) {
     if (props.theme) {
@@ -669,6 +672,13 @@ var Video = (function (props) {
   }, xEngine.h(Image, props)));
 });
 
+var PromotionalContent = function PromotionalContent(_ref) {
+  var promotionalContent = _ref.promotionalContent;
+  return xEngine.h("div", {
+    className: "o-teaser__promotional-content"
+  }, promotionalContent);
+};
+
 var Small = {
   layout: Layouts.Small,
   useRelativeTime: true,
@@ -765,7 +775,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.showStatus ? xEngine.h(Status, props) : null, props.showCustomSlot ? xEngine.h(CustomSlot, props) : null, media(props) === 'headshot' ? xEngine.h(Headshot, props) : null), media(props) === 'image' ? xEngine.h(Image, props) : null, props.showRelatedLinks ? xEngine.h(RelatedLinks, props) : null);
+  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.showStatus ? xEngine.h(Status, props) : null, props.showCustomSlot ? xEngine.h(CustomSlot, props) : null, 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.Container = Container;

package/dist/Teaser.esm.js

@@ -18,6 +18,9 @@ const rulesets = {
     if (props.showImage && props.image && props.image.url) {
       return 'image';
     }
+    if (props.showPromotionalContent && props.promotionalContent) {
+      return 'promotionalContent';
+    }
   },
   theme: props => {
     if (props.theme) {
@@ -571,6 +574,12 @@ var Video = (props => h("div", {
   className: "o--if-no-js"
 }, h(Image, props))));
 
+const PromotionalContent = ({
+  promotionalContent
+}) => h("div", {
+  className: "o-teaser__promotional-content"
+}, promotionalContent);
+
 const Small = {
   layout: Layouts.Small,
   useRelativeTime: true,
@@ -666,6 +675,6 @@ 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.showStatus ? h(Status, props) : null, props.showCustomSlot ? h(CustomSlot, props) : null, media(props) === 'headshot' ? h(Headshot, props) : null), media(props) === 'image' ? h(Image, props) : null, props.showRelatedLinks ? h(RelatedLinks, props) : null);
+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.showStatus ? h(Status, props) : null, props.showCustomSlot ? h(CustomSlot, props) : null, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "14.6.5",
+  "version": "14.7.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.6.5",
+    "@financial-times/x-engine": "^14.7.0",
     "date-fns": "^2.30.0",
     "dateformat": "^3.0.3"
   },

package/readme.md

@@ -29,6 +29,7 @@ Because teasers are very complex with thousands of possible permutations the com
 - Headshot, an image of the content author when content is published in their column
 - Video, for video content able to play videos in-situ
 - Custom slot, a free slot to insert custom components or markup
+- Promotional content, a slot to insert promotional content of different types such as but not limited to: clips, interactive graphics, etc.
 
 ![screenshot of a teaser with features highlighted](https://user-images.githubusercontent.com/271645/38372758-7b55beac-38e7-11e8-9529-6286f384b7ce.png)
 
@@ -107,18 +108,19 @@ As covered in the [features](#features) documentation the teaser properties, or
 
 #### Feature Props
 
-| Feature            | Type    | Notes                                   |
-| ------------------ | ------- | --------------------------------------- |
-| `showMeta`         | Boolean |
-| `showTitle`        | Boolean |
-| `showStandfirst`   | Boolean |
-| `showStatus`       | Boolean |
-| `showImage`        | Boolean |
-| `showHeadshot`     | Boolean | Takes precedence over image             |
-| `showVideo`        | Boolean | Takes precedence over image or headshot |
-| `showGuidance`     | Boolean | Show video captions guidance            |
-| `showRelatedLinks` | Boolean |
-| `showCustomSlot`   | Boolean |
+| Feature                  | Type    | Notes                                   |
+| ------------------------ | ------- | --------------------------------------- |
+| `showMeta`               | Boolean |
+| `showTitle`              | Boolean |
+| `showStandfirst`         | Boolean |
+| `showStatus`             | Boolean |
+| `showImage`              | Boolean |
+| `showHeadshot`           | Boolean | Takes precedence over image             |
+| `showVideo`              | Boolean | Takes precedence over image or headshot |
+| `showGuidance`           | Boolean | Show video captions guidance            |
+| `showRelatedLinks`       | Boolean |
+| `showCustomSlot`         | Boolean |
+| `showPromotionalContent` | Boolean |
 
 #### General Props
 

package/src/PromotionaContent.jsx

@@ -0,0 +1,7 @@
+import { h } from '@financial-times/x-engine'
+
+const PromotionalContent = ({ promotionalContent }) => (
+	<div className="o-teaser__promotional-content">{promotionalContent}</div>
+)
+
+export default PromotionalContent

package/src/Teaser.jsx

@@ -10,6 +10,7 @@ import Status from './Status'
 import Standfirst from './Standfirst'
 import Title from './Title'
 import Video from './Video'
+import PromotionalContent from './PromotionaContent'
 import { media } from './concerns/rules'
 import presets from './concerns/presets'
 
@@ -24,6 +25,7 @@ const Teaser = (props) => (
 			{props.showCustomSlot ? <CustomSlot {...props} /> : null}
 			{media(props) === 'headshot' ? <Headshot {...props} /> : null}
 		</Content>
+		{media(props) === 'promotionalContent' ? <PromotionalContent {...props} /> : null}
 		{media(props) === 'image' ? <Image {...props} /> : null}
 		{props.showRelatedLinks ? <RelatedLinks {...props} /> : null}
 	</Container>

package/src/concerns/rules.js

@@ -16,6 +16,10 @@ const rulesets = {
 		if (props.showImage && props.image && props.image.url) {
 			return 'image'
 		}
+
+		if (props.showPromotionalContent && props.promotionalContent) {
+			return 'promotionalContent'
+		}
 	},
 	theme: (props) => {
 		if (props.theme) {