Merge pull request #2357 from Financial-Times/am/scoop-to-exclusive

[CULT-757] Scoop to exclusive

Author: metart43

components/o-labels/demos/src/data/states-content.json

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

components/o-labels/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'
 		)
 	));

components/o-labels/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',
 

components/o-labels/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,34 +89,34 @@ 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>
 	);
 }
 
 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>;
 }

components/o-labels/stories/core/content.stories.tsx

@@ -6,7 +6,7 @@ const ComponentDescription = {
 	component: ContentLabelTsx,
 	argTypes: {
 		state: {
-			options: ['content-commercial', 'content-premium', 'content-scoop'],
+			options: ['content-commercial', 'content-premium', 'content-exclusive'],
 			defaultValue: 'content-premium',
 		},
 		size: {
@@ -35,7 +35,7 @@ export const ContentLabel = args => {
 			case 'content-commercial':
 				copy = 'Paid Post';
 				break;
-			case 'content-scoop':
+			case 'content-exclusive':
 				copy = 'Exclusive';
 				break;
 			default: