@financial-times/o-labels 7.1.2 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [8.0.0](https://github.com/Financial-Times/origami/compare/o-labels-v7.1.2...o-labels-v8.0.0) (2026-02-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* Replace `scoop` with `exclusive`
+
+### Features
+
+* Replace `scoop` with `exclusive` ([8ff2c0d](https://github.com/Financial-Times/origami/commit/8ff2c0d3cfd25cec7d3d5046ca66134fc1af1633))
+
 ## [7.1.2](https://github.com/Financial-Times/origami/compare/o-labels-v7.1.1...o-labels-v7.1.2) (2025-10-28)
 
 

package/MIGRATION.md

@@ -1,5 +1,14 @@
 # Migration Guide
 
+## Migrating from v7 to v8
+
+This release removes the `content-scoop` label and replaces with `content-exclusive'. Ensure any references to `content-scoop` are updated:
+
+```diff
+- <span class="o-labels o-labels--content-scoop">Exclusive</span>
++ <span class="o-labels o-labels--content-exclusive">Exclusive</span>
+```
+
 ## Migrating from v6 to v7
 
 This major release introduces a new design language and visually breaking changes. This includes mobile optimised typography, icons, and buttons. It also removes peer dependencies from deprecated "o2" components.

package/demos/src/data/states-content.json

@@ -17,7 +17,7 @@
 			"content": "Premium"
 		},
 		{
-			"id": "content-scoop",
+			"id": "content-exclusive",
 			"content": "Exclusive"
 		}
 	]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o-labels",
-	"version": "7.1.2",
+	"version": "8.0.0",
 	"description": "Labels for content classification or to emphasise a value. Provides customisation options with the FT colour palette.",
 	"keywords": [
 		"label",

package/src/scss/_brand.scss

@@ -47,7 +47,7 @@ $_o-labels-shared-brand-config: (
 				background-color: oPrivateFoundationGet('o3-color-palette-slate'),
 				border-color: oPrivateFoundationGet('o3-color-palette-slate')
 			),
-			'content-scoop': (
+			'content-exclusive': (
 				background-color: oPrivateFoundationGet('o3-color-palette-ft-pink'),
 				border-color: oPrivateFoundationGet('o3-color-palette-ft-pink'),
 				text-color: oPrivateFoundationGet('o3-color-palette-black-80')
@@ -68,7 +68,7 @@ $_o-labels-shared-brand-config: (
 			'small',
 			'content-commercial',
 			'content-premium',
-			'content-scoop',
+			'content-exclusive',
 			'lifecycle-beta'
 		)
 	));

package/src/scss/_variables.scss

@@ -30,7 +30,7 @@ $_o-labels-standard-sizes: (
 $_o-labels-standard-states: (
 	'content-commercial',
 	'content-premium',
-	'content-scoop',
+	'content-exclusive',
 
 	'lifecycle-beta',
 

package/src/tsx/label.tsx

@@ -9,14 +9,10 @@ export interface SupportLabelProps extends BaseLabelProps {
 		| 'support-dead'
 		| 'support-deprecated'
 		| 'support-experimental'
-		| 'support-maintained'
+		| 'support-maintained';
 }
 export interface ServiceLabelProps extends BaseLabelProps {
-	state:
-		| 'tier-bronze'
-		| 'tier-gold'
-		| 'tier-platinum'
-		| 'tier-silver'
+	state: 'tier-bronze' | 'tier-gold' | 'tier-platinum' | 'tier-silver';
 }
 export interface ColourLabelProps extends BaseLabelProps {
 	state:
@@ -26,24 +22,24 @@ export interface ColourLabelProps extends BaseLabelProps {
 		| 'slate'
 		| 'jade'
 		| 'crimson'
-		| 'mandarin'
+		| 'mandarin';
 }
 export interface ContentLabelProps extends BaseLabelProps {
-	state:
-		| 'content-commercial'
-		| 'content-premium'
-		| 'content-scoop'
+	state: 'content-commercial' | 'content-premium' | 'content-exclusive';
 }
 export interface LifeCycleLabelProps extends BaseLabelProps {
-	state:
-		| 'lifecycle-beta'
+	state: 'lifecycle-beta';
 }
 
 function SimpleLabel({
 	size,
 	state,
 	children,
-}: {size?: string, state?: string, children: string}): React.JSX.Element {
+}: {
+	size?: string;
+	state?: string;
+	children: string;
+}): React.JSX.Element {
 	const classNames = ['o-labels'];
 	if (size) {
 		classNames.push(`o-labels--${size}`);
@@ -55,23 +51,23 @@ function SimpleLabel({
 }
 
 export function BaseLabel(props: BaseLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 
 export function SupportLabel(props: SupportLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function ServiceLabel(props: ServiceLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function ColourLabel(props: ColourLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function ContentLabel(props: ContentLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function LifeCycleLabel(props: LifeCycleLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 
 export interface IndicatorLabelProps {
@@ -93,16 +89,17 @@ export function IndicatorLabel({
 	if (inverse) {
 		classNames.push('o-labels-indicator--inverse');
 	}
-	if(badge) {
+	if (badge) {
 		classNames.push('o-labels-indicator--badge');
 	}
 	return (
 		<span className={classNames.join(' ')}>
-			<span className="o-labels-indicator__status"> {status || indicator} </span>
+			<span className="o-labels-indicator__status">
+				{' '}
+				{status || indicator}{' '}
+			</span>
 			{timestamp && (
-				<span className="o-labels-indicator__timestamp">
-					{timestamp}
-				</span>
+				<span className="o-labels-indicator__timestamp">{timestamp}</span>
 			)}
 		</span>
 	);
@@ -110,17 +107,16 @@ export function IndicatorLabel({
 
 export interface TimestampLabelProps {
 	inverse?: boolean;
-	children?: React.JSX.Element | React.JSX.Element[]
+	children?: React.JSX.Element | React.JSX.Element[];
 }
 
-export function TimestampLabel({inverse, children}: TimestampLabelProps): React.JSX.Element {
+export function TimestampLabel({
+	inverse,
+	children,
+}: TimestampLabelProps): React.JSX.Element {
 	const classNames = ['o-labels-timestamp'];
 	if (inverse) {
 		classNames.push('o-labels-timestamp--inverse');
 	}
-	return (
-		<span className={classNames.join(' ')}>
-			{children}
-		</span>
-	);
+	return <span className={classNames.join(' ')}>{children}</span>;
 }