@financial-times/x-teaser 17.0.5 → 18.1.0

package/Props.d.ts

@@ -31,6 +31,7 @@ export interface Features {
   showTitle?: boolean
   showStandfirst?: boolean
   showPremiumLabel?: boolean
+  showScoopLabel?: boolean
   showStatus?: boolean
   showImage?: boolean
   showHeadshot?: boolean
@@ -40,6 +41,10 @@ export interface Features {
   showPromotionalContent?: boolean
 }
 
+export interface SpecialStylings {
+  allowLiveTeaserStyling?: boolean
+}
+
 export interface General {
   id: string
   url?: string

package/__tests__/Status.test.jsx

@@ -0,0 +1,312 @@
+const { h } = require('@financial-times/x-engine')
+const { mount } = require('@financial-times/x-test-utils/enzyme')
+
+import * as LiveBlogStatus from '../src/LiveBlogStatus'
+import * as ScoopLabel from '../src/ScoopLabel'
+import * as PremiumLabel from '../src/PremiumLabel'
+import * as AlwaysShowTimestamp from '../src/AlwaysShowTimestamp'
+import * as RelativeTime from '../src/RelativeTime'
+import * as TimeStamp from '../src/TimeStamp'
+
+const LiveBlogStatusSpy = jest
+	.spyOn(LiveBlogStatus, 'default')
+	.mockReturnValue(<div className="live-blog-status">LiveBlogStatus</div>)
+const ScoopLabelSpy = jest
+	.spyOn(ScoopLabel, 'default')
+	.mockReturnValue(<div className="scoop-label">ScoopLabel</div>)
+const PremiumLabelSpy = jest
+	.spyOn(PremiumLabel, 'default')
+	.mockReturnValue(<div className="premium-label">PremiumLabel</div>)
+const AlwaysShowTimestampSpy = jest
+	.spyOn(AlwaysShowTimestamp, 'default')
+	.mockReturnValue(<div className="always-show-timestamp">AlwaysShowTimestamp</div>)
+const RelativeTimeSpy = jest
+	.spyOn(RelativeTime, 'default')
+	.mockReturnValue(<div className="relative-time">RelativeTimeSpy</div>)
+const TimeStampSpy = jest
+	.spyOn(TimeStamp, 'default')
+	.mockReturnValue(<div className="timestamp">TimeStamp</div>)
+
+import Status from '../src/Status'
+
+describe('Status - Display Logic', () => {
+	let props
+
+	beforeEach(() => {
+		props = {
+			showStatus: true,
+			showPremiumLabel: true,
+			showScoopLabel: true,
+			status: 'inprogress',
+			indicators: { isScoop: true, accessLevel: 'premium' },
+			firstPublishedDate: '2025-10-01T00:00:00.000Z',
+			publishedDate: '2025-10-01T00:00:00.000Z',
+			useRelativeTimeIfToday: true,
+			useRelativeTime: true
+		}
+	})
+
+	afterEach(() => {
+		jest.clearAllMocks()
+	})
+
+	describe('LiveBlogStatus', () => {
+		it('renders only LiveBlogStatus when LiveBlogStatus props are present', () => {
+			mount(<Status {...props} />)
+
+			expect(LiveBlogStatusSpy).toHaveBeenCalledTimes(1)
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render LiveBlogStatus when status is not present', () => {
+			delete props.status
+			mount(<Status {...props} />)
+
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render LiveBlogStatus when showStatus is false', () => {
+			props.showStatus = false
+			mount(<Status {...props} />)
+
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('ScoopLabel', () => {
+		beforeEach(() => {
+			delete props.status
+		})
+
+		it('renders only ScoopLabel when higher-level render props are absent and ScoopLabel props are present', () => {
+			mount(<Status {...props} />)
+
+			expect(ScoopLabelSpy).toHaveBeenCalledTimes(1)
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render ScoopLabel when showScoopLabel = false', () => {
+			props.showScoopLabel = false
+			mount(<Status {...props} />)
+
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render ScoopLabel when props.indicators.isScoop = false', () => {
+			props.indicators.isScoop = false
+			mount(<Status {...props} />)
+
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render ScoopLabel when firstPublishedDate is older than the cutoff date', () => {
+			props.firstPublishedDate = '2025-09-01T00:00:00.000Z'
+			mount(<Status {...props} />)
+
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('PremiumLabel', () => {
+		beforeEach(() => {
+			delete props.status
+			props.showScoopLabel = false
+		})
+
+		it('renders only PremiumLabel when higher-level render props are absent and PremiumLabel props are present', () => {
+			mount(<Status {...props} />)
+
+			expect(PremiumLabelSpy).toHaveBeenCalledTimes(1)
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render PremiumLabel when showPremiumLabel = false', () => {
+			props.showPremiumLabel = false
+			mount(<Status {...props} />)
+
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render PremiumLabel when accessLevel is not premium', () => {
+			props.indicators.accessLevel = 'subscribed'
+			mount(<Status {...props} />)
+
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('AlwaysShowTimestamp', () => {
+		beforeEach(() => {
+			delete props.status
+			props.showScoopLabel = false
+			props.showPremiumLabel = false
+		})
+
+		it('renders only AlwaysShowTimestamp when higher-level render props are absent and AlwaysShowTimestamp props are present', () => {
+			mount(<Status {...props} />)
+
+			expect(AlwaysShowTimestampSpy).toHaveBeenCalledTimes(1)
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render AlwaysShowTimestamp when showStatus = false', () => {
+			props.showStatus = false
+			mount(<Status {...props} />)
+
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render AlwaysShowTimestamp when publishedDate is not present', () => {
+			delete props.publishedDate
+			mount(<Status {...props} />)
+
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render AlwaysShowTimestamp when useRelativeTimeIfToday = false', () => {
+			props.useRelativeTimeIfToday = false
+			mount(<Status {...props} />)
+
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('RelativeTime', () => {
+		beforeEach(() => {
+			delete props.status
+			props.showScoopLabel = false
+			props.showPremiumLabel = false
+			props.useRelativeTimeIfToday = false
+		})
+
+		it('renders only RelativeTime when higher-level render props are absent and RelativeTime props are present', () => {
+			mount(<Status {...props} />)
+
+			expect(RelativeTimeSpy).toHaveBeenCalledTimes(1)
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render RelativeTime when showStatus = false', () => {
+			props.showStatus = false
+			mount(<Status {...props} />)
+
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render RelativeTime when publishedDate is not present', () => {
+			delete props.publishedDate
+			mount(<Status {...props} />)
+
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render RelativeTime when useRelativeTime = false', () => {
+			props.useRelativeTime = false
+			mount(<Status {...props} />)
+
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('TimeStamp', () => {
+		beforeEach(() => {
+			delete props.status
+			props.showScoopLabel = false
+			props.showPremiumLabel = false
+			props.useRelativeTimeIfToday = false
+			props.useRelativeTime = false
+		})
+
+		it('renders only TimeStamp when higher-level render props are absent and TimeStamp props are present', () => {
+			mount(<Status {...props} />)
+
+			expect(TimeStampSpy).toHaveBeenCalledTimes(1)
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render TimeStamp when showStatus = false', () => {
+			props.showStatus = false
+			mount(<Status {...props} />)
+
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render TimeStamp when publishedDate is not present', () => {
+			delete props.publishedDate
+			mount(<Status {...props} />)
+
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('No Status rendered', () => {
+		it('should not render any Status - Case 1: all showXXX properties are set to false', () => {
+			props = {
+				showStatus: false,
+				showPremiumLabel: false,
+				showScoopLabel: false,
+				status: 'inprogress',
+				indicators: { isScoop: true, accessLevel: 'premium' },
+				firstPublishedDate: '2025-10-01T00:00:00.000Z',
+				publishedDate: '2025-10-01T00:00:00.000Z',
+				useRelativeTimeIfToday: true,
+				useRelativeTime: true
+			}
+			const subject = mount(<Status {...props} />)
+
+			expect(subject.isEmptyRender()).toBeTruthy()
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+
+		it('should not render any Status - Case 2: showStatus = true but other properties are not present', () => {
+			// status & publishedDate are missing
+			props = {
+				showStatus: true,
+				showPremiumLabel: false,
+				showScoopLabel: false,
+				indicators: { isScoop: true, accessLevel: 'premium' },
+				firstPublishedDate: '2025-10-01T00:00:00.000Z',
+				useRelativeTimeIfToday: true,
+				useRelativeTime: true
+			}
+			const subject = mount(<Status {...props} />)
+
+			expect(subject.isEmptyRender()).toBeTruthy()
+			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
+			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(PremiumLabelSpy).not.toHaveBeenCalled()
+			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
+			expect(RelativeTimeSpy).not.toHaveBeenCalled()
+			expect(TimeStampSpy).not.toHaveBeenCalled()
+		})
+	})
+})

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
@@ -473,32 +473,52 @@ var AlwaysShowTimestamp = props => {
 };
 
 function PremiumLabel() {
+  return (
+    // WARNING: Do not use the x-teaser__premium-label class to override styling.
+    // The styling should be in o-teaser, not x-teaser.
+    // Use o-teaser__labels or o-teaser__labels--premium instead of x-teaser__premium-label.
+    xEngine.h("div", {
+      className: "x-teaser__premium-label o-teaser__labels o-teaser__labels--premium"
+    }, xEngine.h("span", {
+      className: "o-labels o-labels--premium o-labels--content-premium"
+    }, "Premium"), xEngine.h("span", {
+      className: "o3-visually-hidden"
+    }, "\xA0content"))
+  );
+}
+
+function ScoopLabel() {
   return xEngine.h("div", {
-    className: "x-teaser__premium-label"
+    className: "o-teaser__labels o-teaser__labels--scoop"
   }, xEngine.h("span", {
-    className: "o-labels o-labels--premium o-labels--content-premium"
-  }, "Premium"), xEngine.h("span", {
+    className: "o-labels o-labels--content-scoop"
+  }, "Exclusive"), xEngine.h("span", {
     className: "o3-visually-hidden"
   }, "\xA0content"));
 }
 
 var Status = 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') {
+  var _props$indicators, _props$indicators2;
+  if (props.showStatus && props.status) {
+    return xEngine.h(LiveBlogStatus, props);
+  }
+  if (props.showScoopLabel && props !== null && props !== void 0 && (_props$indicators = props.indicators) !== null && _props$indicators !== void 0 && _props$indicators.isScoop &&
+  // We plan to show the Scoop label only on homepages.
+  // If we later show it on other pages, this cutoff date will need review.
+  // The `isScoop` property already exists, but Editorial will use it differently after 2025-10-01.
+  new Date(props.firstPublishedDate) >= new Date('2025-10-01T00:00:00.000Z')) {
+    return xEngine.h(ScoopLabel, props);
+  }
+  if (props.showPremiumLabel && (props === null || props === void 0 || (_props$indicators2 = props.indicators) === null || _props$indicators2 === void 0 ? void 0 : _props$indicators2.accessLevel) === 'premium') {
     return xEngine.h(PremiumLabel, 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);
-      }
+  if (props.showStatus && 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;
@@ -604,6 +624,7 @@ const Small = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true
 };
 const SmallHeavy = {
@@ -613,6 +634,7 @@ const SmallHeavy = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -624,6 +646,7 @@ const Large = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -634,6 +657,7 @@ const Hero = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -645,6 +669,7 @@ const HeroNarrow = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true
 };
 const HeroVideo = {
@@ -661,6 +686,7 @@ const HeroOverlay = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -673,6 +699,7 @@ const TopStory = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -683,6 +710,7 @@ const TopStoryLandscape = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',

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;
 });
 
 /**
@@ -561,32 +562,52 @@ var AlwaysShowTimestamp = (function (props) {
 });
 
 function PremiumLabel() {
+  return (
+    // WARNING: Do not use the x-teaser__premium-label class to override styling.
+    // The styling should be in o-teaser, not x-teaser.
+    // Use o-teaser__labels or o-teaser__labels--premium instead of x-teaser__premium-label.
+    xEngine.h("div", {
+      className: "x-teaser__premium-label o-teaser__labels o-teaser__labels--premium"
+    }, xEngine.h("span", {
+      className: "o-labels o-labels--premium o-labels--content-premium"
+    }, "Premium"), xEngine.h("span", {
+      className: "o3-visually-hidden"
+    }, "\xA0content"))
+  );
+}
+
+function ScoopLabel() {
   return xEngine.h("div", {
-    className: "x-teaser__premium-label"
+    className: "o-teaser__labels o-teaser__labels--scoop"
   }, xEngine.h("span", {
-    className: "o-labels o-labels--premium o-labels--content-premium"
-  }, "Premium"), xEngine.h("span", {
+    className: "o-labels o-labels--content-scoop"
+  }, "Exclusive"), xEngine.h("span", {
     className: "o3-visually-hidden"
   }, "\xA0content"));
 }
 
 var Status = (function (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') {
+  var _props$indicators, _props$indicators2;
+  if (props.showStatus && props.status) {
+    return xEngine.h(LiveBlogStatus, props);
+  }
+  if (props.showScoopLabel && props !== null && props !== void 0 && (_props$indicators = props.indicators) !== null && _props$indicators !== void 0 && _props$indicators.isScoop &&
+  // We plan to show the Scoop label only on homepages.
+  // If we later show it on other pages, this cutoff date will need review.
+  // The `isScoop` property already exists, but Editorial will use it differently after 2025-10-01.
+  new Date(props.firstPublishedDate) >= new Date('2025-10-01T00:00:00.000Z')) {
+    return xEngine.h(ScoopLabel, props);
+  }
+  if (props.showPremiumLabel && (props === null || props === void 0 || (_props$indicators2 = props.indicators) === null || _props$indicators2 === void 0 ? void 0 : _props$indicators2.accessLevel) === 'premium') {
     return xEngine.h(PremiumLabel, 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);
-      }
+  if (props.showStatus && 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;
@@ -697,6 +718,7 @@ var Small = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true
 };
 var SmallHeavy = {
@@ -706,6 +728,7 @@ var SmallHeavy = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -717,6 +740,7 @@ var Large = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -727,6 +751,7 @@ var Hero = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -738,6 +763,7 @@ var HeroNarrow = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true
 };
 var HeroVideo = {
@@ -754,6 +780,7 @@ var HeroOverlay = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -766,6 +793,7 @@ var TopStory = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -776,6 +804,7 @@ var TopStoryLandscape = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',

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
@@ -467,32 +467,52 @@ var AlwaysShowTimestamp = props => {
 };
 
 function PremiumLabel() {
+  return (
+    // WARNING: Do not use the x-teaser__premium-label class to override styling.
+    // The styling should be in o-teaser, not x-teaser.
+    // Use o-teaser__labels or o-teaser__labels--premium instead of x-teaser__premium-label.
+    h("div", {
+      className: "x-teaser__premium-label o-teaser__labels o-teaser__labels--premium"
+    }, h("span", {
+      className: "o-labels o-labels--premium o-labels--content-premium"
+    }, "Premium"), h("span", {
+      className: "o3-visually-hidden"
+    }, "\xA0content"))
+  );
+}
+
+function ScoopLabel() {
   return h("div", {
-    className: "x-teaser__premium-label"
+    className: "o-teaser__labels o-teaser__labels--scoop"
   }, h("span", {
-    className: "o-labels o-labels--premium o-labels--content-premium"
-  }, "Premium"), h("span", {
+    className: "o-labels o-labels--content-scoop"
+  }, "Exclusive"), h("span", {
     className: "o3-visually-hidden"
   }, "\xA0content"));
 }
 
 var Status = 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') {
+  var _props$indicators, _props$indicators2;
+  if (props.showStatus && props.status) {
+    return h(LiveBlogStatus, props);
+  }
+  if (props.showScoopLabel && props !== null && props !== void 0 && (_props$indicators = props.indicators) !== null && _props$indicators !== void 0 && _props$indicators.isScoop &&
+  // We plan to show the Scoop label only on homepages.
+  // If we later show it on other pages, this cutoff date will need review.
+  // The `isScoop` property already exists, but Editorial will use it differently after 2025-10-01.
+  new Date(props.firstPublishedDate) >= new Date('2025-10-01T00:00:00.000Z')) {
+    return h(ScoopLabel, props);
+  }
+  if (props.showPremiumLabel && (props === null || props === void 0 || (_props$indicators2 = props.indicators) === null || _props$indicators2 === void 0 ? void 0 : _props$indicators2.accessLevel) === 'premium') {
     return h(PremiumLabel, 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);
-      }
+  if (props.showStatus && props.publishedDate) {
+    if (props.useRelativeTimeIfToday) {
+      return h(AlwaysShowTimestamp, props);
+    } else if (props.useRelativeTime) {
+      return h(RelativeTime, props);
+    } else {
+      return h(TimeStamp, props);
     }
   }
   return null;
@@ -598,6 +618,7 @@ const Small = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true
 };
 const SmallHeavy = {
@@ -607,6 +628,7 @@ const SmallHeavy = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -618,6 +640,7 @@ const Large = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -628,6 +651,7 @@ const Hero = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -639,6 +663,7 @@ const HeroNarrow = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true
 };
 const HeroVideo = {
@@ -655,6 +680,7 @@ const HeroOverlay = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -667,6 +693,7 @@ const TopStory = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -677,6 +704,7 @@ const TopStoryLandscape = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
+  showScoopLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',

package/package.json

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

package/readme.md

@@ -114,6 +114,7 @@ As covered in the [features](#features) documentation the teaser properties, or
 | `showTitle`              | Boolean |
 | `showStandfirst`         | Boolean |
 | `showPremiumLabel`       | Boolean |
+| `showScoopLabel`         | Boolean |
 | `showStatus`             | Boolean |
 | `showImage`              | Boolean |
 | `showHeadshot`           | Boolean | Takes precedence over image             |
@@ -257,6 +258,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/PremiumLabel.jsx

@@ -2,7 +2,10 @@ import { h } from '@financial-times/x-engine'
 
 export default function PremiumLabel() {
 	return (
-		<div className="x-teaser__premium-label">
+		// WARNING: Do not use the x-teaser__premium-label class to override styling.
+		// The styling should be in o-teaser, not x-teaser.
+		// Use o-teaser__labels or o-teaser__labels--premium instead of x-teaser__premium-label.
+		<div className="x-teaser__premium-label o-teaser__labels o-teaser__labels--premium">
 			<span className="o-labels o-labels--premium o-labels--content-premium">Premium</span>
 			<span className="o3-visually-hidden">&nbsp;content</span>
 		</div>

package/src/ScoopLabel.jsx

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

package/src/Status.jsx

@@ -4,25 +4,35 @@ import RelativeTime from './RelativeTime'
 import LiveBlogStatus from './LiveBlogStatus'
 import AlwaysShowTimestamp from './AlwaysShowTimestamp'
 import PremiumLabel from './PremiumLabel'
+import ScoopLabel from './ScoopLabel'
 
 export default (props) => {
+	if (props.showStatus && props.status) {
+		return <LiveBlogStatus {...props} />
+	}
+
+	if (
+		props.showScoopLabel &&
+		props?.indicators?.isScoop &&
+		// We plan to show the Scoop label only on homepages.
+		// If we later show it on other pages, this cutoff date will need review.
+		// The `isScoop` property already exists, but Editorial will use it differently after 2025-10-01.
+		new Date(props.firstPublishedDate) >= new Date('2025-10-01T00:00:00.000Z')
+	) {
+		return <ScoopLabel {...props} />
+	}
+
 	if (props.showPremiumLabel && props?.indicators?.accessLevel === 'premium') {
 		return <PremiumLabel {...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} />
-			}
+	if (props.showStatus && props.publishedDate) {
+		if (props.useRelativeTimeIfToday) {
+			return <AlwaysShowTimestamp {...props} />
+		} else if (props.useRelativeTime) {
+			return <RelativeTime {...props} />
+		} else {
+			return <TimeStamp {...props} />
 		}
 	}
 

package/src/Teaser.scss

@@ -1,5 +1,9 @@
 @import '@financial-times/o3-foundation/css/core.css';
 
+// WARNING: Do not use the x-teaser__premium-label class to override styling.
+// The styling should be in o-teaser, not x-teaser.
+// Use o-teaser__labels or o-teaser__labels--premium instead of x-teaser__premium-label.
+
 // Theses styles copy the spacing from o-teaser__timestamp
 // as the premium label is replacing it
 .x-teaser__premium-label {

package/src/concerns/presets.js

@@ -6,6 +6,7 @@ const Small = {
 	showMeta: true,
 	showTitle: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true
 }
 
@@ -16,6 +17,7 @@ const SmallHeavy = {
 	showTitle: true,
 	showStandfirst: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'Small'
@@ -28,6 +30,7 @@ const Large = {
 	showTitle: true,
 	showStandfirst: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'Medium'
@@ -39,6 +42,7 @@ const Hero = {
 	showMeta: true,
 	showTitle: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'Medium'
@@ -51,6 +55,7 @@ const HeroNarrow = {
 	showTitle: true,
 	showStandfirst: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true
 }
 
@@ -69,6 +74,7 @@ const HeroOverlay = {
 	showMeta: true,
 	showTitle: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'XL',
@@ -82,6 +88,7 @@ const TopStory = {
 	showTitle: true,
 	showStandfirst: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true,
 	showRelatedLinks: true
 }
@@ -93,6 +100,7 @@ const TopStoryLandscape = {
 	showTitle: true,
 	showStandfirst: true,
 	showPremiumLabel: true,
+	showScoopLabel: false,
 	showStatus: true,
 	showImage: true,
 	imageSize: 'XL',

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': '^9.1.0',
 	'o-video': '^8.0.0'
 }