@financial-times/x-teaser 18.2.1 → 19.0.0

package/Props.d.ts

@@ -31,7 +31,7 @@ export interface Features {
   showTitle?: boolean
   showStandfirst?: boolean
   showPremiumLabel?: boolean
-  showScoopLabel?: boolean
+  showExclusiveLabel?: boolean
   showStatus?: boolean
   showImage?: boolean
   showHeadshot?: boolean
@@ -159,6 +159,7 @@ export interface Indicators {
   isPodcast?: boolean
   /** Methode packaging options */
   isEditorsChoice?: boolean
+  /** Controls whether the Exclusive badge is displayed */
   isExclusive?: boolean
   isScoop?: boolean
 }

package/__tests__/Status.test.jsx

@@ -2,7 +2,7 @@ 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 ExclusiveLabel from '../src/ExclusiveLabel'
 import * as PremiumLabel from '../src/PremiumLabel'
 import * as AlwaysShowTimestamp from '../src/AlwaysShowTimestamp'
 import * as RelativeTime from '../src/RelativeTime'
@@ -11,9 +11,9 @@ 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 ExclusiveLabelSpy = jest
+	.spyOn(ExclusiveLabel, 'default')
+	.mockReturnValue(<div className="exclusive-label">ExclusiveLabel</div>)
 const PremiumLabelSpy = jest
 	.spyOn(PremiumLabel, 'default')
 	.mockReturnValue(<div className="premium-label">PremiumLabel</div>)
@@ -35,9 +35,9 @@ describe('Status - Display Logic', () => {
 		props = {
 			showStatus: true,
 			showPremiumLabel: true,
-			showScoopLabel: true,
+			showExclusiveLabel: true,
 			status: 'inprogress',
-			indicators: { isScoop: true, accessLevel: 'premium' },
+			indicators: { isExclusive: true, accessLevel: 'premium' },
 			firstPublishedDate: '2025-10-01T00:00:00.000Z',
 			publishedDate: '2025-10-01T00:00:00.000Z',
 			useRelativeTimeIfToday: true,
@@ -54,7 +54,7 @@ describe('Status - Display Logic', () => {
 			mount(<Status {...props} />)
 
 			expect(LiveBlogStatusSpy).toHaveBeenCalledTimes(1)
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 			expect(PremiumLabelSpy).not.toHaveBeenCalled()
 			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
 			expect(RelativeTimeSpy).not.toHaveBeenCalled()
@@ -76,15 +76,15 @@ describe('Status - Display Logic', () => {
 		})
 	})
 
-	describe('ScoopLabel', () => {
+	describe('ExclusiveLabel', () => {
 		beforeEach(() => {
 			delete props.status
 		})
 
-		it('renders only ScoopLabel when higher-level render props are absent and ScoopLabel props are present', () => {
+		it('renders only ExclusiveLabel when higher-level render props are absent and ExclusiveLabel props are present', () => {
 			mount(<Status {...props} />)
 
-			expect(ScoopLabelSpy).toHaveBeenCalledTimes(1)
+			expect(ExclusiveLabelSpy).toHaveBeenCalledTimes(1)
 			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
 			expect(PremiumLabelSpy).not.toHaveBeenCalled()
 			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
@@ -92,32 +92,25 @@ describe('Status - Display Logic', () => {
 			expect(TimeStampSpy).not.toHaveBeenCalled()
 		})
 
-		it('should not render ScoopLabel when showScoopLabel = false', () => {
-			props.showScoopLabel = false
+		it('should not render ExclusiveLabel when showExclusiveLabel = false', () => {
+			props.showExclusiveLabel = false
 			mount(<Status {...props} />)
 
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 		})
 
-		it('should not render ScoopLabel when props.indicators.isScoop = false', () => {
-			props.indicators.isScoop = false
+		it('should not render ExclusiveLabel when props.indicators.isExclusive = false', () => {
+			props.indicators.isExclusive = 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()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 		})
 	})
 
 	describe('PremiumLabel', () => {
 		beforeEach(() => {
 			delete props.status
-			props.showScoopLabel = false
+			props.showExclusiveLabel = false
 		})
 
 		it('renders only PremiumLabel when higher-level render props are absent and PremiumLabel props are present', () => {
@@ -125,7 +118,7 @@ describe('Status - Display Logic', () => {
 
 			expect(PremiumLabelSpy).toHaveBeenCalledTimes(1)
 			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
 		})
 
@@ -147,7 +140,7 @@ describe('Status - Display Logic', () => {
 	describe('AlwaysShowTimestamp', () => {
 		beforeEach(() => {
 			delete props.status
-			props.showScoopLabel = false
+			props.showExclusiveLabel = false
 			props.showPremiumLabel = false
 		})
 
@@ -159,7 +152,7 @@ describe('Status - Display Logic', () => {
 
 			expect(AlwaysShowTimestampSpy).toHaveBeenCalledTimes(1)
 			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 			expect(PremiumLabelSpy).not.toHaveBeenCalled()
 			expect(RelativeTimeSpy).not.toHaveBeenCalled()
 			expect(TimeStampSpy).not.toHaveBeenCalled()
@@ -211,7 +204,7 @@ describe('Status - Display Logic', () => {
 	describe('RelativeTime', () => {
 		beforeEach(() => {
 			delete props.status
-			props.showScoopLabel = false
+			props.showExclusiveLabel = false
 			props.showPremiumLabel = false
 			props.useRelativeTimeIfToday = false
 		})
@@ -221,7 +214,7 @@ describe('Status - Display Logic', () => {
 
 			expect(RelativeTimeSpy).toHaveBeenCalledTimes(1)
 			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 			expect(PremiumLabelSpy).not.toHaveBeenCalled()
 			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
 			expect(TimeStampSpy).not.toHaveBeenCalled()
@@ -252,7 +245,7 @@ describe('Status - Display Logic', () => {
 	describe('TimeStamp', () => {
 		beforeEach(() => {
 			delete props.status
-			props.showScoopLabel = false
+			props.showExclusiveLabel = false
 			props.showPremiumLabel = false
 			props.useRelativeTimeIfToday = false
 			props.useRelativeTime = false
@@ -263,7 +256,7 @@ describe('Status - Display Logic', () => {
 
 			expect(TimeStampSpy).toHaveBeenCalledTimes(1)
 			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 			expect(PremiumLabelSpy).not.toHaveBeenCalled()
 			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
 			expect(RelativeTimeSpy).not.toHaveBeenCalled()
@@ -289,9 +282,9 @@ describe('Status - Display Logic', () => {
 			props = {
 				showStatus: false,
 				showPremiumLabel: false,
-				showScoopLabel: false,
+				showExclusiveLabel: false,
 				status: 'inprogress',
-				indicators: { isScoop: true, accessLevel: 'premium' },
+				indicators: { isExclusive: true, accessLevel: 'premium' },
 				firstPublishedDate: '2025-10-01T00:00:00.000Z',
 				publishedDate: '2025-10-01T00:00:00.000Z',
 				useRelativeTimeIfToday: true,
@@ -301,7 +294,7 @@ describe('Status - Display Logic', () => {
 
 			expect(subject.isEmptyRender()).toBeTruthy()
 			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 			expect(PremiumLabelSpy).not.toHaveBeenCalled()
 			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
 			expect(RelativeTimeSpy).not.toHaveBeenCalled()
@@ -313,8 +306,8 @@ describe('Status - Display Logic', () => {
 			props = {
 				showStatus: true,
 				showPremiumLabel: false,
-				showScoopLabel: false,
-				indicators: { isScoop: true, accessLevel: 'premium' },
+				showExclusiveLabel: false,
+				indicators: { isExclusive: true, accessLevel: 'premium' },
 				firstPublishedDate: '2025-10-01T00:00:00.000Z',
 				useRelativeTimeIfToday: true,
 				useRelativeTime: true
@@ -323,7 +316,7 @@ describe('Status - Display Logic', () => {
 
 			expect(subject.isEmptyRender()).toBeTruthy()
 			expect(LiveBlogStatusSpy).not.toHaveBeenCalled()
-			expect(ScoopLabelSpy).not.toHaveBeenCalled()
+			expect(ExclusiveLabelSpy).not.toHaveBeenCalled()
 			expect(PremiumLabelSpy).not.toHaveBeenCalled()
 			expect(AlwaysShowTimestampSpy).not.toHaveBeenCalled()
 			expect(RelativeTimeSpy).not.toHaveBeenCalled()

package/dist/Teaser.cjs.js

@@ -499,11 +499,11 @@ function PremiumLabel() {
   );
 }
 
-function ScoopLabel() {
+function ExclusiveLabel() {
   return xEngine.h("div", {
-    className: "o-teaser__labels o-teaser__labels--scoop"
+    className: "o-teaser__labels o-teaser__labels--exclusive"
   }, xEngine.h("span", {
-    className: "o-labels o-labels--content-scoop"
+    className: "o-labels o-labels--content-exclusive"
   }, "Exclusive"), xEngine.h("span", {
     className: "o3-visually-hidden"
   }, "\xA0content"));
@@ -514,12 +514,8 @@ var Status = props => {
   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.showExclusiveLabel && props !== null && props !== void 0 && (_props$indicators = props.indicators) !== null && _props$indicators !== void 0 && _props$indicators.isExclusive) {
+    return xEngine.h(ExclusiveLabel, 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);
@@ -636,7 +632,7 @@ const Small = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true
 };
 const SmallHeavy = {
@@ -646,7 +642,7 @@ const SmallHeavy = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -658,7 +654,7 @@ const Large = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -669,7 +665,7 @@ const Hero = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -681,7 +677,7 @@ const HeroNarrow = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true
 };
 const HeroVideo = {
@@ -698,7 +694,7 @@ const HeroOverlay = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -711,7 +707,7 @@ const TopStory = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -722,7 +718,7 @@ const TopStoryLandscape = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',

package/dist/Teaser.es5.js

@@ -584,11 +584,11 @@ function PremiumLabel() {
   );
 }
 
-function ScoopLabel() {
+function ExclusiveLabel() {
   return xEngine.h("div", {
-    className: "o-teaser__labels o-teaser__labels--scoop"
+    className: "o-teaser__labels o-teaser__labels--exclusive"
   }, xEngine.h("span", {
-    className: "o-labels o-labels--content-scoop"
+    className: "o-labels o-labels--content-exclusive"
   }, "Exclusive"), xEngine.h("span", {
     className: "o3-visually-hidden"
   }, "\xA0content"));
@@ -599,12 +599,8 @@ var Status = (function (props) {
   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.showExclusiveLabel && props !== null && props !== void 0 && (_props$indicators = props.indicators) !== null && _props$indicators !== void 0 && _props$indicators.isExclusive) {
+    return xEngine.h(ExclusiveLabel, 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);
@@ -726,7 +722,7 @@ var Small = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true
 };
 var SmallHeavy = {
@@ -736,7 +732,7 @@ var SmallHeavy = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -748,7 +744,7 @@ var Large = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -759,7 +755,7 @@ var Hero = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -771,7 +767,7 @@ var HeroNarrow = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true
 };
 var HeroVideo = {
@@ -788,7 +784,7 @@ var HeroOverlay = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -801,7 +797,7 @@ var TopStory = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -812,7 +808,7 @@ var TopStoryLandscape = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',

package/dist/Teaser.esm.js

@@ -493,11 +493,11 @@ function PremiumLabel() {
   );
 }
 
-function ScoopLabel() {
+function ExclusiveLabel() {
   return h("div", {
-    className: "o-teaser__labels o-teaser__labels--scoop"
+    className: "o-teaser__labels o-teaser__labels--exclusive"
   }, h("span", {
-    className: "o-labels o-labels--content-scoop"
+    className: "o-labels o-labels--content-exclusive"
   }, "Exclusive"), h("span", {
     className: "o3-visually-hidden"
   }, "\xA0content"));
@@ -508,12 +508,8 @@ var Status = props => {
   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.showExclusiveLabel && props !== null && props !== void 0 && (_props$indicators = props.indicators) !== null && _props$indicators !== void 0 && _props$indicators.isExclusive) {
+    return h(ExclusiveLabel, 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);
@@ -630,7 +626,7 @@ const Small = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true
 };
 const SmallHeavy = {
@@ -640,7 +636,7 @@ const SmallHeavy = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Small'
@@ -652,7 +648,7 @@ const Large = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -663,7 +659,7 @@ const Hero = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'Medium'
@@ -675,7 +671,7 @@ const HeroNarrow = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true
 };
 const HeroVideo = {
@@ -692,7 +688,7 @@ const HeroOverlay = {
   showMeta: true,
   showTitle: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',
@@ -705,7 +701,7 @@ const TopStory = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showRelatedLinks: true
 };
@@ -716,7 +712,7 @@ const TopStoryLandscape = {
   showTitle: true,
   showStandfirst: true,
   showPremiumLabel: true,
-  showScoopLabel: false,
+  showExclusiveLabel: false,
   showStatus: true,
   showImage: true,
   imageSize: 'XL',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-teaser",
-  "version": "18.2.1",
+  "version": "19.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": "^18.2.1",
+    "@financial-times/x-engine": "^19.0.0",
     "dateformat": "^3.0.3"
   },
   "devDependencies": {

package/readme.md

@@ -114,7 +114,7 @@ As covered in the [features](#features) documentation the teaser properties, or
 | `showTitle`              | Boolean |
 | `showStandfirst`         | Boolean |
 | `showPremiumLabel`       | Boolean |
-| `showScoopLabel`         | Boolean |
+| `showExclusiveLabel`     | Boolean |
 | `showStatus`             | Boolean |
 | `showImage`              | Boolean |
 | `showHeadshot`           | Boolean | Takes precedence over image             |
@@ -255,7 +255,7 @@ As covered in the [features](#features) documentation the teaser properties, or
 | `isColumn`        | Boolean |
 | `isPodcast`       | Boolean |
 | `isEditorsChoice` | Boolean |
-| `isExclusive`     | Boolean |
+| `isExclusive`     | Boolean | Controls whether the Exclusive badge is displayed |
 | `isScoop`         | Boolean |
 
 #### Special Styling Props

package/src/ExclusiveLabel.jsx

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

package/src/Status.jsx

@@ -4,22 +4,15 @@ import RelativeTime from './RelativeTime'
 import LiveBlogStatus from './LiveBlogStatus'
 import AlwaysShowTimestamp from './AlwaysShowTimestamp'
 import PremiumLabel from './PremiumLabel'
-import ScoopLabel from './ScoopLabel'
+import ExclusiveLabel from './ExclusiveLabel'
 
 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.showExclusiveLabel && props?.indicators?.isExclusive) {
+		return <ExclusiveLabel {...props} />
 	}
 
 	if (props.showPremiumLabel && props?.indicators?.accessLevel === 'premium') {

package/src/concerns/presets.js

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

package/storybook/index.jsx

@@ -6,7 +6,7 @@ import '../src/Teaser.scss'
 
 const dependencies = {
 	'o-date': '^7.0.1',
-	'o-labels': '^7.1.0',
+	'o-labels': '^8.0.0',
 	'o-teaser': '^9.1.0',
 	'o-video': '^8.0.0'
 }

package/src/ScoopLabel.jsx

@@ -1,10 +0,0 @@
-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>
-	)
-}