Merge pull request #774 from Financial-Times/am/inject-promotional-co…

…ntent

[CON-3298] Inject promotional content inside Teaser

components/x-teaser/Props.d.ts

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

components/x-teaser/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
 

components/x-teaser/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

components/x-teaser/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>

components/x-teaser/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) {