@financial-times/o-teaser 9.1.2 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [10.0.0](https://github.com/Financial-Times/origami/compare/o-teaser-v9.1.3...o-teaser-v10.0.0) (2026-02-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* Add Byline component
+
+### Features
+
+* Add Byline component ([4d01245](https://github.com/Financial-Times/origami/commit/4d01245fb5d767a0f1cf5972714b603fab66383f))
+* Add Byline stylings ([be46170](https://github.com/Financial-Times/origami/commit/be461709df3c64537e0519ca45009e1b116765e5))
+* Add title indicator icon with Opinion teasers ([fc23079](https://github.com/Financial-Times/origami/commit/fc23079fdac6d2591842854058e26a2873e4985f))
+* Add titlePrefix into Title component ([7e754f1](https://github.com/Financial-Times/origami/commit/7e754f111ca880defbe2cdc8ddba36fa624a0bad))
+* Add titlePrefix stylings ([3ce1ae0](https://github.com/Financial-Times/origami/commit/3ce1ae0cdfdefe325f7ea2f9f2f930ba9c55cba9))
+
+## [9.1.3](https://github.com/Financial-Times/origami/compare/o-teaser-v9.1.2...o-teaser-v9.1.3) (2026-02-05)
+
+
+### Bug Fixes
+
+* depend on v7 and v8 of o-labels on o-teaser ([#2360](https://github.com/Financial-Times/origami/issues/2360)) ([e4d4c46](https://github.com/Financial-Times/origami/commit/e4d4c464ad3acfa412002a550590d497a246de45))
+
 ## [9.1.2](https://github.com/Financial-Times/origami/compare/o-teaser-v9.1.1...o-teaser-v9.1.2) (2025-12-03)
 
 

package/MIGRATION.md

@@ -1,5 +1,61 @@
 # Migration guide
 
+### Migrating to v10.0.0
+
+v10.0.0 introduces:
+
+* **Byline** component, which replaces the legacy Headshot component
+* **title indicator icon** for only Opinion teaser
+* **titlePrefix**
+
+#### Byline
+
+The Byline component is enabled by default (`showByline: true`) in the presets.
+When `byline` data is provided, the Byline component will be rendered instead of Headshot.
+
+If you are not ready to use the Byline component, pass:
+
+```js
+showByline: false
+```
+
+This keeps the existing Headshot behaviour.
+
+If you are migrating to the Byline component, you must provide a `byline` property:
+
+| Property name | Type                           | Note                               |
+| ------------- | ------------------------------ | ---------------------------------- |
+| `byline`      | `[string, string?, string?][]` | `[text, linkUrl?, headshotUrl?][]` |
+
+Example with single author with headshot:
+
+```js
+byline: [
+  ['Martin Wolf', '/martin-wolf', '/martin-wolf-headshot']
+]
+```
+
+Example with multiple authors:
+
+```js
+// This will render: Martin Wolf & Paul Krugman
+byline: [
+  ['Martin Wolf', '/martin-wolf'],
+  [' & '],
+  ['Paul Krugman', '/paul-krugman']
+]
+```
+
+#### titlePrefix
+
+`titlePrefix` is enabled by default (`showTitlePrefix: true`) in the presets.
+Nothing will be rendered unless a `titlePrefix` string is provided.
+
+| Property name | Type     | Note                            |
+| ------------- | -------- | ------------------------------- |
+| `titlePrefix` | `string` | Text displayed before the title |
+
+
 ### Migrating to v9.0.0
 
 v9 upgrades [html-react-parser to v5.2.7](https://github.com/remarkablemark/html-react-parser), which has a dependency on React 19.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o-teaser",
-	"version": "9.1.2",
+	"version": "10.0.0",
 	"description": "Provides styling for teaser elements, which contain information about an article and link through to it",
 	"keywords": [
 		"article",
@@ -24,7 +24,7 @@
 		"watch": "bash ../../scripts/component/watch.bash"
 	},
 	"peerDependencies": {
-		"@financial-times/o-labels": "^7.0.0",
+		"@financial-times/o-labels": "^7.0.0 || ^8.0.0",
 		"@financial-times/o-private-foundation": "^1.5.0"
 	},
 	"devDependencies": {

package/src/scss/_mixins.scss

@@ -105,6 +105,10 @@
 	.o-teaser__visually-hidden {
 		@include oPrivateNormaliseVisuallyHidden;
 	}
+
+	.o-teaser__byline {
+		@include _oTeaserByline;
+	}
 }
 
 @mixin _oTeaserElementsImages {

package/src/scss/elements/_default.scss

@@ -15,6 +15,25 @@
 	color: $_o-teaser-base-color;
 	margin-top: 0;
 	margin-bottom: 0;
+
+	&:before {
+		display: none;
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		vertical-align: text-bottom;
+		content: '';
+		margin-right: 0.2em;
+		width: 1em;
+		height: 1em;
+	}
+
+	.o-teaser__heading-prefix {
+		font-family: inherit;
+		font-size: inherit;
+		font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
+		line-height: inherit;
+		color: inherit;
+	}
 }
 
 /// Base styles for a teaser
@@ -64,6 +83,42 @@
 	}
 }
 
+@mixin _oTeaserByline {
+	@include _oTeaserLink();
+	a:focus,
+	a:hover {
+		color: $_o-teaser-focus-hover;
+	}
+	a:visited {
+		color: $_o-teaser-base-color;
+	}
+	font-family: oPrivateFoundationGet('o3-font-family-metric');
+	font-size: oPrivateFoundationGet('o3-font-size-metric2-0');
+	font-weight: oPrivateFoundationGet('o3-font-weight-regular');
+	line-height: oPrivateFoundationGet('o3-font-lineheight-2');
+	color: $_o-teaser-base-color;
+	margin-top: oPrivateSpacingByName('s3');
+	margin-bottom: 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: oPrivateSpacingByName('s1');
+
+	.o-teaser__byline-link {
+		display: flex;
+		align-items: center;
+
+		img {
+			width: 40px;
+			height: 40px;
+			border-radius: 50%;
+			border: 1px solid oPrivateFoundationGet('o3-color-palette-black-20');
+			background-color: oPrivateFoundationGet('o3-color-palette-black-10');
+			margin-right: oPrivateSpacingByName('s3');
+		}
+	}
+}
+
 /// Links within title or standfirst
 @mixin _oTeaserLink {
 	a {

package/src/scss/themes/_hero.scss

@@ -37,6 +37,8 @@
 	.o-teaser__heading a:focus,
 	.o-teaser__heading a:visited,
 	.o-teaser__standfirst a:visited,
+	.o-teaser__byline a:hover,
+	.o-teaser__byline a:focus,
 	.o-teaser__tag:hover,
 	.o-teaser__tag:focus {
 		color: oPrivateColorsMix(
@@ -116,6 +118,8 @@
 		.o-teaser__heading,
 		.o-teaser__heading a,
 		.o-teaser__heading a:visited,
+		.o-teaser__byline a,
+		.o-teaser__byline a:visited,
 		.o-teaser__meta,
 		.o-teaser__standfirst,
 		.o-teaser__standfirst a,
@@ -177,6 +181,10 @@
 		font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
 		line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
 	}
+
+	.o-teaser__byline {
+		justify-self: center;
+	}
 }
 
 /// Centred hero teaser styles to centre image
@@ -213,7 +221,9 @@
 	$hero-extra-highlight-border: oPrivateFoundationGet('o3-color-palette-lemon');
 	$hero-extra-highlight-color: oPrivateFoundationGet('o3-color-palette-lemon');
 	.o-teaser__heading a:hover,
-	.o-teaser__heading a:focus {
+	.o-teaser__heading a:focus,
+	.o-teaser__byline a:hover,
+	.o-teaser__byline a:focus {
 		color: $hero-extra-highlight-color;
 	}
 

package/src/scss/themes/_live.scss

@@ -26,6 +26,8 @@
 		.o-teaser__meta a:hover,
 		.o-teaser__heading a:focus,
 		.o-teaser__heading a:hover,
+		.o-teaser__byline a:focus,
+		.o-teaser__byline a:hover,
 		.o-teaser__standfirst a:visited {
 			color: oPrivateColorsMix('o3-color-palette-white', 'o3-color-palette-crimson', 90);
 			outline-color: currentColor;

package/src/scss/themes/_standard.scss

@@ -6,6 +6,8 @@
 	.o-teaser__heading a:hover,
 	.o-teaser__heading a:focus,
 	.o-teaser__heading a:visited,
+	.o-teaser__byline a:hover,
+	.o-teaser__byline a:focus,
 	.o-teaser__standfirst a:visited,
 	.o-teaser__tag:hover,
 	.o-teaser__tag:focus {
@@ -17,6 +19,8 @@
 	}
 
 	.o-teaser__meta,
+	.o-teaser__byline,
+	.o-teaser__byline a:visited,
 	.o-teaser__tag-suffix,
 	.o-teaser__heading {
 		color: oPrivateFoundationGet('o3-color-palette-white');
@@ -53,6 +57,23 @@
 	.o-teaser__meta {
 		color: oPrivateFoundationGet('o3-color-palette-oxford');
 	}
+
+	.o-teaser__heading {
+		&:before {
+			display: inline-block;
+			background-color: oPrivateFoundationGet('o3-color-palette-oxford');
+			mask-image:  oPrivateFoundationGet(o3-icon-quote-left);
+			width: 1.1em;
+			height: 1.1em;
+		}
+	}
+
+	&.o-teaser--inverse,
+	&.o-teaser--hero {
+		.o-teaser__heading:before {
+			background-color: oPrivateFoundationGet('o3-color-palette-white');
+		}
+	}
 }
 
 /// Opinion background theme - colours background blue and adjust text
@@ -100,6 +121,8 @@
 	.o-teaser__heading a:hover,
 	.o-teaser__heading a:focus,
 	.o-teaser__heading a:visited,
+	.o-teaser__byline a:hover,
+	.o-teaser__byline a:focus,
 	.o-teaser__standfirst a:visited,
 	.o-teaser__tag:hover,
 	.o-teaser__tag:focus {