@financial-times/x-teaser 15.1.3 → 16.0.0

package/Props.d.ts

@@ -30,6 +30,7 @@ export interface Features {
   showMeta?: boolean
   showTitle?: boolean
   showStandfirst?: boolean
+  showPremiumLabel?: boolean
   showStatus?: boolean
   showImage?: boolean
   showHeadshot?: boolean

package/dist/Teaser.cjs.js

@@ -472,17 +472,33 @@ var AlwaysShowTimestamp = props => {
   }
 };
 
+function PremiumLabel() {
+  return xEngine.h("div", {
+    className: "x-teaser__premium-label"
+  }, xEngine.h("span", {
+    className: "o-labels o-labels--premium o-labels--content-premium"
+  }, "Premium"), xEngine.h("span", {
+    className: "o3-visually-hidden"
+  }, "\xA0content"));
+}
+
 var Status = props => {
-  if (props.status) {
-    return xEngine.h(LiveBlogStatus, props);
+  var _props$indicators;
+  if (props.showPremiumLabel && (props === null || props === void 0 || (_props$indicators = props.indicators) === null || _props$indicators === void 0 ? void 0 : _props$indicators.accessLevel) === 'premium') {
+    return xEngine.h(PremiumLabel, props);
   }
-  if (props.publishedDate) {
-    if (props.useRelativeTimeIfToday) {
-      return xEngine.h(AlwaysShowTimestamp, props);
-    } else if (props.useRelativeTime) {
-      return xEngine.h(RelativeTime, props);
-    } else {
-      return xEngine.h(TimeStamp, props);
+  if (props.showStatus) {
+    if (props.status) {
+      return xEngine.h(LiveBlogStatus, props);
+    }
+    if (props.publishedDate) {
+      if (props.useRelativeTimeIfToday) {
+        return xEngine.h(AlwaysShowTimestamp, props);
+      } else if (props.useRelativeTime) {
+        return xEngine.h(RelativeTime, props);
+      } else {
+        return xEngine.h(TimeStamp, props);
+      }
     }
   }
   return null;
@@ -517,13 +533,10 @@ var Title = ({
   headlineTesting,
   relativeUrl,
   url,
-  indicators,
   ...props
 }) => {
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
   const displayUrl = relativeUrl || url;
-  // o-labels--premium left for backwards compatibility for o-labels v3
-  const premiumClass = 'o-labels o-labels--premium o-labels--content-premium';
   let ariaLabel;
   if (props.type === 'video') {
     ariaLabel = `Watch video ${displayTitle}`;
@@ -540,11 +553,7 @@ var Title = ({
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), displayTitle), indicators && indicators.accessLevel === 'premium' ? xEngine.h("span", null, ' ', xEngine.h("span", {
-    className: premiumClass
-  }, "Premium"), xEngine.h("span", {
-    className: "o3-visually-hidden"
-  }, "\xA0content")) : null);
+  }), displayTitle));
 };
 
 // Re-format the data for use with o-video
@@ -594,6 +603,7 @@ const Small = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true
 };
 const SmallHeavy = {
@@ -602,6 +612,7 @@ const SmallHeavy = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -612,6 +623,7 @@ const Large = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -621,6 +633,7 @@ const Hero = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -631,6 +644,7 @@ const HeroNarrow = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true
 };
 const HeroVideo = {
@@ -646,6 +660,7 @@ const HeroOverlay = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -657,6 +672,7 @@ const TopStory = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -666,6 +682,7 @@ const TopStoryLandscape = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -684,7 +701,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) === 'promotionalContent' ? xEngine.h(PromotionalContent, 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, xEngine.h(Status, props), 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

@@ -560,17 +560,33 @@ var AlwaysShowTimestamp = (function (props) {
   }
 });
 
+function PremiumLabel() {
+  return xEngine.h("div", {
+    className: "x-teaser__premium-label"
+  }, xEngine.h("span", {
+    className: "o-labels o-labels--premium o-labels--content-premium"
+  }, "Premium"), xEngine.h("span", {
+    className: "o3-visually-hidden"
+  }, "\xA0content"));
+}
+
 var Status = (function (props) {
-  if (props.status) {
-    return xEngine.h(LiveBlogStatus, props);
+  var _props$indicators;
+  if (props.showPremiumLabel && (props === null || props === void 0 || (_props$indicators = props.indicators) === null || _props$indicators === void 0 ? void 0 : _props$indicators.accessLevel) === 'premium') {
+    return xEngine.h(PremiumLabel, props);
   }
-  if (props.publishedDate) {
-    if (props.useRelativeTimeIfToday) {
-      return xEngine.h(AlwaysShowTimestamp, props);
-    } else if (props.useRelativeTime) {
-      return xEngine.h(RelativeTime, props);
-    } else {
-      return xEngine.h(TimeStamp, props);
+  if (props.showStatus) {
+    if (props.status) {
+      return xEngine.h(LiveBlogStatus, props);
+    }
+    if (props.publishedDate) {
+      if (props.useRelativeTimeIfToday) {
+        return xEngine.h(AlwaysShowTimestamp, props);
+      } else if (props.useRelativeTime) {
+        return xEngine.h(RelativeTime, props);
+      } else {
+        return xEngine.h(TimeStamp, props);
+      }
     }
   }
   return null;
@@ -599,19 +615,16 @@ var Standfirst = (function (_ref) {
   }), displayStandfirst)) : null;
 });
 
-var _excluded$3 = ["title", "altTitle", "headlineTesting", "relativeUrl", "url", "indicators"];
+var _excluded$3 = ["title", "altTitle", "headlineTesting", "relativeUrl", "url"];
 var Title = (function (_ref) {
   var title = _ref.title,
     altTitle = _ref.altTitle,
     headlineTesting = _ref.headlineTesting,
     relativeUrl = _ref.relativeUrl,
     url = _ref.url,
-    indicators = _ref.indicators,
     props = _objectWithoutProperties(_ref, _excluded$3);
   var displayTitle = headlineTesting && altTitle ? altTitle : title;
   var displayUrl = relativeUrl || url;
-  // o-labels--premium left for backwards compatibility for o-labels v3
-  var premiumClass = 'o-labels o-labels--premium o-labels--content-premium';
   var ariaLabel;
   if (props.type === 'video') {
     ariaLabel = "Watch video ".concat(displayTitle);
@@ -628,11 +641,7 @@ var Title = (function (_ref) {
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), displayTitle), indicators && indicators.accessLevel === 'premium' ? xEngine.h("span", null, ' ', xEngine.h("span", {
-    className: premiumClass
-  }, "Premium"), xEngine.h("span", {
-    className: "o3-visually-hidden"
-  }, "\xA0content")) : null);
+  }), displayTitle));
 });
 
 // Re-format the data for use with o-video
@@ -687,6 +696,7 @@ var Small = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true
 };
 var SmallHeavy = {
@@ -695,6 +705,7 @@ var SmallHeavy = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -705,6 +716,7 @@ var Large = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -714,6 +726,7 @@ var Hero = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -724,6 +737,7 @@ var HeroNarrow = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true
 };
 var HeroVideo = {
@@ -739,6 +753,7 @@ var HeroOverlay = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -750,6 +765,7 @@ var TopStory = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -759,6 +775,7 @@ var TopStoryLandscape = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -778,7 +795,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) === 'promotionalContent' ? xEngine.h(PromotionalContent, 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, xEngine.h(Status, props), 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

@@ -466,17 +466,33 @@ var AlwaysShowTimestamp = props => {
   }
 };
 
+function PremiumLabel() {
+  return h("div", {
+    className: "x-teaser__premium-label"
+  }, h("span", {
+    className: "o-labels o-labels--premium o-labels--content-premium"
+  }, "Premium"), h("span", {
+    className: "o3-visually-hidden"
+  }, "\xA0content"));
+}
+
 var Status = props => {
-  if (props.status) {
-    return h(LiveBlogStatus, props);
+  var _props$indicators;
+  if (props.showPremiumLabel && (props === null || props === void 0 || (_props$indicators = props.indicators) === null || _props$indicators === void 0 ? void 0 : _props$indicators.accessLevel) === 'premium') {
+    return h(PremiumLabel, props);
   }
-  if (props.publishedDate) {
-    if (props.useRelativeTimeIfToday) {
-      return h(AlwaysShowTimestamp, props);
-    } else if (props.useRelativeTime) {
-      return h(RelativeTime, props);
-    } else {
-      return h(TimeStamp, props);
+  if (props.showStatus) {
+    if (props.status) {
+      return h(LiveBlogStatus, props);
+    }
+    if (props.publishedDate) {
+      if (props.useRelativeTimeIfToday) {
+        return h(AlwaysShowTimestamp, props);
+      } else if (props.useRelativeTime) {
+        return h(RelativeTime, props);
+      } else {
+        return h(TimeStamp, props);
+      }
     }
   }
   return null;
@@ -511,13 +527,10 @@ var Title = ({
   headlineTesting,
   relativeUrl,
   url,
-  indicators,
   ...props
 }) => {
   const displayTitle = headlineTesting && altTitle ? altTitle : title;
   const displayUrl = relativeUrl || url;
-  // o-labels--premium left for backwards compatibility for o-labels v3
-  const premiumClass = 'o-labels o-labels--premium o-labels--content-premium';
   let ariaLabel;
   if (props.type === 'video') {
     ariaLabel = `Watch video ${displayTitle}`;
@@ -534,11 +547,7 @@ var Title = ({
       className: 'js-teaser-heading-link',
       'aria-label': ariaLabel
     }
-  }), displayTitle), indicators && indicators.accessLevel === 'premium' ? h("span", null, ' ', h("span", {
-    className: premiumClass
-  }, "Premium"), h("span", {
-    className: "o3-visually-hidden"
-  }, "\xA0content")) : null);
+  }), displayTitle));
 };
 
 // Re-format the data for use with o-video
@@ -588,6 +597,7 @@ const Small = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true
 };
 const SmallHeavy = {
@@ -596,6 +606,7 @@ const SmallHeavy = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -606,6 +617,7 @@ const Large = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -615,6 +627,7 @@ const Hero = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -625,6 +638,7 @@ const HeroNarrow = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true
 };
 const HeroVideo = {
@@ -640,6 +654,7 @@ const HeroOverlay = {
   useRelativeTime: true,
   showMeta: true,
   showTitle: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -651,6 +666,7 @@ const TopStory = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -660,6 +676,7 @@ const TopStoryLandscape = {
   showMeta: true,
   showTitle: true,
   showStandfirst: true,
+  showPremiumLabel: true,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -678,6 +695,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) === 'promotionalContent' ? h(PromotionalContent, 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, h(Status, props), 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,11 +1,12 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "15.1.3",
+  "version": "16.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",
   "module": "dist/Teaser.esm.js",
   "browser": "dist/Teaser.es5.js",
+  "style": "src/Teaser.scss",
   "types": "Props.d.ts",
   "scripts": {
     "build": "node rollup.js",
@@ -17,7 +18,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/x-engine": "^15.1.3",
+    "@financial-times/x-engine": "^16.0.0",
     "date-fns": "^2.30.0",
     "dateformat": "^3.0.3"
   },

package/readme.md

@@ -113,6 +113,7 @@ As covered in the [features](#features) documentation the teaser properties, or
 | `showMeta`               | Boolean |
 | `showTitle`              | Boolean |
 | `showStandfirst`         | Boolean |
+| `showPremiumLabel`       | Boolean |
 | `showStatus`             | Boolean |
 | `showImage`              | Boolean |
 | `showHeadshot`           | Boolean | Takes precedence over image             |

package/src/PremiumLabel.jsx

@@ -0,0 +1,10 @@
+import { h } from '@financial-times/x-engine'
+
+export default function PremiumLabel() {
+	return (
+		<div className="x-teaser__premium-label">
+			<span className="o-labels o-labels--premium o-labels--content-premium">Premium</span>
+			<span className="o3-visually-hidden">&nbsp;content</span>
+		</div>
+	)
+}

package/src/Status.jsx

@@ -3,19 +3,26 @@ import TimeStamp from './TimeStamp'
 import RelativeTime from './RelativeTime'
 import LiveBlogStatus from './LiveBlogStatus'
 import AlwaysShowTimestamp from './AlwaysShowTimestamp'
+import PremiumLabel from './PremiumLabel'
 
 export default (props) => {
-	if (props.status) {
-		return <LiveBlogStatus {...props} />
+	if (props.showPremiumLabel && props?.indicators?.accessLevel === 'premium') {
+		return <PremiumLabel {...props} />
 	}
 
-	if (props.publishedDate) {
-		if (props.useRelativeTimeIfToday) {
-			return <AlwaysShowTimestamp {...props} />
-		} else if (props.useRelativeTime) {
-			return <RelativeTime {...props} />
-		} else {
-			return <TimeStamp {...props} />
+	if (props.showStatus) {
+		if (props.status) {
+			return <LiveBlogStatus {...props} />
+		}
+
+		if (props.publishedDate) {
+			if (props.useRelativeTimeIfToday) {
+				return <AlwaysShowTimestamp {...props} />
+			} else if (props.useRelativeTime) {
+				return <RelativeTime {...props} />
+			} else {
+				return <TimeStamp {...props} />
+			}
 		}
 	}
 

package/src/Teaser.jsx

@@ -21,7 +21,7 @@ const Teaser = (props) => (
 			{media(props) === 'video' ? <Video {...props} /> : null}
 			{props.showTitle ? <Title {...props} /> : null}
 			{props.showStandfirst ? <Standfirst {...props} /> : null}
-			{props.showStatus ? <Status {...props} /> : null}
+			<Status {...props} />
 			{props.showCustomSlot ? <CustomSlot {...props} /> : null}
 			{media(props) === 'headshot' ? <Headshot {...props} /> : null}
 		</Content>

package/src/Teaser.scss

@@ -0,0 +1,8 @@
+@import '@financial-times/o3-foundation/css/core.css';
+
+// Theses styles copy the spacing from o-teaser__timestamp
+// as the premium label is replacing it
+.x-teaser__premium-label {
+	margin-top: auto;
+	padding-top: var(--o3-spacing-2xs);
+}

package/src/Title.jsx

@@ -1,11 +1,9 @@
 import { h } from '@financial-times/x-engine'
 import Link from './Link'
 
-export default ({ title, altTitle, headlineTesting, relativeUrl, url, indicators, ...props }) => {
+export default ({ title, altTitle, headlineTesting, relativeUrl, url, ...props }) => {
 	const displayTitle = headlineTesting && altTitle ? altTitle : title
 	const displayUrl = relativeUrl || url
-	// o-labels--premium left for backwards compatibility for o-labels v3
-	const premiumClass = 'o-labels o-labels--premium o-labels--content-premium'
 	let ariaLabel
 	if (props.type === 'video') {
 		ariaLabel = `Watch video ${displayTitle}`
@@ -27,13 +25,6 @@ export default ({ title, altTitle, headlineTesting, relativeUrl, url, indicators
 			>
 				{displayTitle}
 			</Link>
-			{indicators && indicators.accessLevel === 'premium' ? (
-				<span>
-					{' '}
-					<span className={premiumClass}>Premium</span>
-					<span className="o3-visually-hidden">&nbsp;content</span>
-				</span>
-			) : null}
 		</div>
 	)
 }

package/src/concerns/presets.js

@@ -5,6 +5,7 @@ const Small = {
 	useRelativeTime: true,
 	showMeta: true,
 	showTitle: true,
+	showPremiumLabel: true,
 	showStatus: true
 }
 
@@ -14,6 +15,7 @@ const SmallHeavy = {
 	showMeta: true,
 	showTitle: true,
 	showStandfirst: true,
+	showPremiumLabel: true,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'Small'
@@ -25,6 +27,7 @@ const Large = {
 	showMeta: true,
 	showTitle: true,
 	showStandfirst: true,
+	showPremiumLabel: true,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'Medium'
@@ -35,6 +38,7 @@ const Hero = {
 	useRelativeTime: true,
 	showMeta: true,
 	showTitle: true,
+	showPremiumLabel: true,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'Medium'
@@ -46,6 +50,7 @@ const HeroNarrow = {
 	showMeta: true,
 	showTitle: true,
 	showStandfirst: true,
+	showPremiumLabel: true,
 	showStatus: true
 }
 
@@ -63,6 +68,7 @@ const HeroOverlay = {
 	useRelativeTime: true,
 	showMeta: true,
 	showTitle: true,
+	showPremiumLabel: true,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'XL',
@@ -75,6 +81,7 @@ const TopStory = {
 	showMeta: true,
 	showTitle: true,
 	showStandfirst: true,
+	showPremiumLabel: true,
 	showStatus: true,
 	showRelatedLinks: true
 }
@@ -85,6 +92,7 @@ const TopStoryLandscape = {
 	showMeta: true,
 	showTitle: true,
 	showStandfirst: true,
+	showPremiumLabel: true,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'XL',

package/storybook/index.jsx

@@ -2,11 +2,13 @@ import { Teaser } from '../src/Teaser'
 import React from 'react'
 import BuildService from '../../../.storybook/build-service'
 
+import '../src/Teaser.scss'
+
 const dependencies = {
-	'o-date': '^5.0.0',
-	'o-labels': '^6.0.0',
-	'o-teaser': '^6.0.0',
-	'o-video': '^7.0.0'
+	'o-date': '^5.3.0',
+	'o-labels': '^7.0.1',
+	'o-teaser': '^7.1.3',
+	'o-video': '^8.0.0'
 }
 
 const { argTypes } = require('./argTypes')