@financial-times/x-teaser 17.0.5 → 18.0.0

package/Props.d.ts

@@ -40,6 +40,10 @@ export interface Features {
   showPromotionalContent?: boolean
 }
 
+export interface SpecialStylings {
+  allowLiveTeaserStyling?: boolean
+}
+
 export interface General {
   id: string
   url?: string

package/dist/Teaser.cjs.js

@@ -32,7 +32,7 @@ const rulesets = {
     if (props.theme) {
       return props.theme;
     }
-    if (props.status === 'inprogress') {
+    if (props.status === 'inprogress' && props.allowLiveTeaserStyling) {
       return 'live';
     }
     if (props.indicators && props.indicators.isOpinion) {
@@ -437,23 +437,23 @@ var RelativeTime = ({
   }, displayTime(relativeDate))) : null;
 };
 
-const LiveBlogLabels = {
-  inprogress: 'Live',
-  comingsoon: 'Coming Soon',
-  closed: ''
-};
 const LiveBlogModifiers = {
   inprogress: 'live',
   comingsoon: 'pending',
   closed: 'closed'
 };
 var LiveBlogStatus = ({
-  status
+  status,
+  allowLiveTeaserStyling = false
 }) => status && status !== 'closed' ? xEngine.h("div", {
   className: `o-teaser__timestamp o-teaser__timestamp--${LiveBlogModifiers[status]}`
-}, xEngine.h("span", {
+}, status === 'comingsoon' && xEngine.h("span", {
   className: "o-teaser__timestamp-prefix"
-}, ` ${LiveBlogLabels[status]} `)) : null;
+}, ` Coming Soon `), status === 'inprogress' && xEngine.h("span", {
+  className: `o-labels-indicator o-labels-indicator--live ${allowLiveTeaserStyling ? null : 'o-labels-indicator--badge'}`
+}, xEngine.h("span", {
+  className: "o-labels-indicator__status"
+}, ` Live `))) : null;
 
 /**
  * Timestamp shown always, the default 4h limit does not apply here

package/dist/Teaser.es5.js

@@ -32,7 +32,7 @@ var rulesets = {
     if (props.theme) {
       return props.theme;
     }
-    if (props.status === 'inprogress') {
+    if (props.status === 'inprogress' && props.allowLiveTeaserStyling) {
       return 'live';
     }
     if (props.indicators && props.indicators.isOpinion) {
@@ -524,23 +524,24 @@ var RelativeTime = (function (_ref) {
   }, displayTime(relativeDate))) : null;
 });
 
-var LiveBlogLabels = {
-  inprogress: 'Live',
-  comingsoon: 'Coming Soon',
-  closed: ''
-};
 var LiveBlogModifiers = {
   inprogress: 'live',
   comingsoon: 'pending',
   closed: 'closed'
 };
 var LiveBlogStatus = (function (_ref) {
-  var status = _ref.status;
+  var status = _ref.status,
+    _ref$allowLiveTeaserS = _ref.allowLiveTeaserStyling,
+    allowLiveTeaserStyling = _ref$allowLiveTeaserS === void 0 ? false : _ref$allowLiveTeaserS;
   return status && status !== 'closed' ? xEngine.h("div", {
     className: "o-teaser__timestamp o-teaser__timestamp--".concat(LiveBlogModifiers[status])
-  }, xEngine.h("span", {
+  }, status === 'comingsoon' && xEngine.h("span", {
     className: "o-teaser__timestamp-prefix"
-  }, " ".concat(LiveBlogLabels[status], " "))) : null;
+  }, " Coming Soon "), status === 'inprogress' && xEngine.h("span", {
+    className: "o-labels-indicator o-labels-indicator--live ".concat(allowLiveTeaserStyling ? null : 'o-labels-indicator--badge')
+  }, xEngine.h("span", {
+    className: "o-labels-indicator__status"
+  }, " Live "))) : null;
 });
 
 /**

package/dist/Teaser.esm.js

@@ -26,7 +26,7 @@ const rulesets = {
     if (props.theme) {
       return props.theme;
     }
-    if (props.status === 'inprogress') {
+    if (props.status === 'inprogress' && props.allowLiveTeaserStyling) {
       return 'live';
     }
     if (props.indicators && props.indicators.isOpinion) {
@@ -431,23 +431,23 @@ var RelativeTime = ({
   }, displayTime(relativeDate))) : null;
 };
 
-const LiveBlogLabels = {
-  inprogress: 'Live',
-  comingsoon: 'Coming Soon',
-  closed: ''
-};
 const LiveBlogModifiers = {
   inprogress: 'live',
   comingsoon: 'pending',
   closed: 'closed'
 };
 var LiveBlogStatus = ({
-  status
+  status,
+  allowLiveTeaserStyling = false
 }) => status && status !== 'closed' ? h("div", {
   className: `o-teaser__timestamp o-teaser__timestamp--${LiveBlogModifiers[status]}`
-}, h("span", {
+}, status === 'comingsoon' && h("span", {
   className: "o-teaser__timestamp-prefix"
-}, ` ${LiveBlogLabels[status]} `)) : null;
+}, ` Coming Soon `), status === 'inprogress' && h("span", {
+  className: `o-labels-indicator o-labels-indicator--live ${allowLiveTeaserStyling ? null : 'o-labels-indicator--badge'}`
+}, h("span", {
+  className: "o-labels-indicator__status"
+}, ` Live `))) : null;
 
 /**
  * Timestamp shown always, the default 4h limit does not apply here

package/package.json

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

package/readme.md

@@ -257,6 +257,12 @@ As covered in the [features](#features) documentation the teaser properties, or
 | `isExclusive`     | Boolean |
 | `isScoop`         | Boolean |
 
+#### Special Styling Props
+
+| Property                 | Type    | Notes                                      |
+| ------------------------ | ------- | ------------------------------------------ |
+| `allowLiveTeaserStyling` | Boolean | Apply `o-teaser--live` class to Container. :memo: *Consumers need to include the o-teaser styling in their applications too.* |
+
 ### Presets
 
 Because there are so many options presets are available for the most commonly used configurations, these are:-

package/src/LiveBlogStatus.jsx

@@ -1,20 +1,23 @@
 import { h } from '@financial-times/x-engine'
 
-const LiveBlogLabels = {
-	inprogress: 'Live',
-	comingsoon: 'Coming Soon',
-	closed: ''
-}
-
 const LiveBlogModifiers = {
 	inprogress: 'live',
 	comingsoon: 'pending',
 	closed: 'closed'
 }
 
-export default ({ status }) =>
+export default ({ status, allowLiveTeaserStyling = false }) =>
 	status && status !== 'closed' ? (
 		<div className={`o-teaser__timestamp o-teaser__timestamp--${LiveBlogModifiers[status]}`}>
-			<span className="o-teaser__timestamp-prefix">{` ${LiveBlogLabels[status]} `}</span>
+			{status === 'comingsoon' && <span className="o-teaser__timestamp-prefix">{` Coming Soon `}</span>}
+			{status === 'inprogress' && (
+				<span
+					className={`o-labels-indicator o-labels-indicator--live ${
+						allowLiveTeaserStyling ? null : 'o-labels-indicator--badge'
+					}`}
+				>
+					<span className="o-labels-indicator__status">{` Live `}</span>
+				</span>
+			)}
 		</div>
 	) : null

package/src/concerns/rules.js

@@ -26,7 +26,7 @@ const rulesets = {
 			return props.theme
 		}
 
-		if (props.status === 'inprogress') {
+		if (props.status === 'inprogress' && props.allowLiveTeaserStyling) {
 			return 'live'
 		}
 

package/storybook/argTypes.js

@@ -47,5 +47,9 @@ exports.argTypes = {
 		}
 	},
 	publishedDate: { name: 'Published Date', control: { type: 'date' } },
-	firstPublishedDate: { name: 'First Published Date', control: { type: 'date' } }
+	firstPublishedDate: { name: 'First Published Date', control: { type: 'date' } },
+	allowLiveTeaserStyling: {
+		name: 'allowLiveTeaserStyling',
+		control: 'boolean'
+	}
 }

package/storybook/article.js

@@ -1,6 +1,8 @@
 const { presets } = require('../')
 
-exports.args = Object.assign(require('../__fixtures__/article.json'), presets.SmallHeavy)
+exports.args = Object.assign(require('../__fixtures__/article.json'), presets.SmallHeavy, {
+	allowLiveTeaserStyling: false
+})
 
 // This reference is only required for hot module loading in development
 // <https://webpack.js.org/concepts/hot-module-replacement/>

package/storybook/index.jsx

@@ -5,9 +5,9 @@ import BuildService from '../../../.storybook/build-service'
 import '../src/Teaser.scss'
 
 const dependencies = {
-	'o-date': '^5.3.0',
-	'o-labels': '^7.0.1',
-	'o-teaser': '^7.1.3',
+	'o-date': '^7.0.1',
+	'o-labels': '^7.1.0',
+	'o-teaser': '^8.0.1',
 	'o-video': '^8.0.0'
 }