@financial-times/o-teaser 10.0.0 → 10.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/MIGRATION.md +3 -5
- package/README.md +5 -11
- package/package.json +1 -1
- package/src/scss/elements/_default.scss +0 -1
- package/src/scss/themes/_small.scss +0 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [10.0.3](https://github.com/Financial-Times/origami/compare/o-teaser-v10.0.2...o-teaser-v10.0.3) (2026-03-23)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* comment link no longer exists ([c82a7b3](https://github.com/Financial-Times/origami/commit/c82a7b3084e08274263725b31113f4aa54fce17a))
|
|
9
|
+
* comment link no longer exists ([fa33229](https://github.com/Financial-Times/origami/commit/fa3322918cc6de31e4815a6cbface1b21ee5b566))
|
|
10
|
+
|
|
11
|
+
## [10.0.2](https://github.com/Financial-Times/origami/compare/o-teaser-v10.0.1...o-teaser-v10.0.2) (2026-03-19)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* visited link color for teaser heading prefix ([f156091](https://github.com/Financial-Times/origami/commit/f15609131e9963099389531bf21e29b09b54991e))
|
|
17
|
+
* visited link color for teaser heading prefix ([ed8adcf](https://github.com/Financial-Times/origami/commit/ed8adcf16afb189f1f0ae670b0dbd49c0acc187d))
|
|
18
|
+
|
|
19
|
+
## [10.0.1](https://github.com/Financial-Times/origami/compare/o-teaser-v10.0.0...o-teaser-v10.0.1) (2026-03-11)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* broken live blog opinion indicator icon ([b747ce2](https://github.com/Financial-Times/origami/commit/b747ce203de7cbcc878d279c5c61d029ca97f554))
|
|
25
|
+
* broken live blog opinion indicator icon ([e704163](https://github.com/Financial-Times/origami/commit/e70416356266e8bc33f7055aae3ba74c1a91e606))
|
|
26
|
+
|
|
3
27
|
## [10.0.0](https://github.com/Financial-Times/origami/compare/o-teaser-v9.1.3...o-teaser-v10.0.0) (2026-02-19)
|
|
4
28
|
|
|
5
29
|
|
package/MIGRATION.md
CHANGED
|
@@ -112,11 +112,9 @@ To upgrade, replace the following "o2" components with their "o3" equivalent:
|
|
|
112
112
|
|
|
113
113
|
v6 drops support for Bower and version 2 of the Origami Build Service.
|
|
114
114
|
|
|
115
|
-
Follow [the migration guide on the Origami website](https://origami.ft.com/documentation/tutorials/bower-to-npm/).
|
|
116
|
-
|
|
117
115
|
## Migrating from v4 to v5
|
|
118
116
|
|
|
119
|
-
v5 introduces the font FinancierDisplayWeb at medium weight and normal style. To upgrade make sure your project includes the FinancierDisplayWeb medium font face using [o-fonts](https://
|
|
117
|
+
v5 introduces the font FinancierDisplayWeb at medium weight and normal style. To upgrade make sure your project includes the FinancierDisplayWeb medium font face using [o-fonts](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-icons-sassdoc--docs).
|
|
120
118
|
|
|
121
119
|
## Migrating from v3 to v4
|
|
122
120
|
|
|
@@ -135,9 +133,9 @@ All [o-teaser colours and colour usecases](https://github.com/Financial-Times/o-
|
|
|
135
133
|
+ color: oColorsByUsecase('o-teaser/tag', 'text');
|
|
136
134
|
```
|
|
137
135
|
|
|
138
|
-
The `commercial-content` colour has been removed. Include [o-labels](https://
|
|
136
|
+
The `commercial-content` colour has been removed. Include [o-labels](https://o2-core.origami.ft.com/?path=/docs/maintained-o-labels-readme--docs&globals=backgrounds:!undefined) and use `o-labels/commercial-content` instead.
|
|
139
137
|
|
|
140
|
-
The deprecated `o-teaser-promoted-prefix` usecase has been removed. Include [o-labels](https://
|
|
138
|
+
The deprecated `o-teaser-promoted-prefix` usecase has been removed. Include [o-labels](https://o2-core.origami.ft.com/?path=/docs/maintained-o-labels-readme--docs&globals=backgrounds:!undefined) and use the `o-labels/commercial-content` colour instead.
|
|
141
139
|
|
|
142
140
|
### Markup
|
|
143
141
|
|
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ This component is for displaying teasers which link through to articles.
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
Check out [how to include Origami components in your project](
|
|
15
|
+
Check out [how to include Origami components in your project](../../docs/legacy-o2-docs/technical-guide.md) to get started with `o-teaser`.
|
|
16
16
|
|
|
17
17
|
## Development
|
|
18
18
|
|
|
@@ -41,9 +41,9 @@ The basic markup structure for a teaser will look something like this:
|
|
|
41
41
|
</div>
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
Optionally include the [o-date](https://
|
|
44
|
+
Optionally include the [o-date](https://o2-core.origami.ft.com/?path=/docs/maintained-o-date-readme--docs&globals=backgrounds:!undefined) component within your project to render a formatted date within the timestamp element `o-teaser__timestamp`. This is required to render relative timestamps e.g. "1hr ago".
|
|
45
45
|
|
|
46
|
-
Teasers support a wide array of [elements](#supported-elements) and can be customised using several [themes](#themes) and should be used as required. For a full list of examples including example markup, see [o-teaser in the Registry](
|
|
46
|
+
Teasers support a wide array of [elements](#supported-elements) and can be customised using several [themes](#themes) and should be used as required. For a full list of examples including example markup, see [o-teaser in the Registry](https://o2-core.origami.ft.com/?path=/docs/maintained-o-teaser-readme--docs&globals=backgrounds:!undefined).
|
|
47
47
|
|
|
48
48
|
### Images
|
|
49
49
|
|
|
@@ -137,8 +137,6 @@ Elements are specified via groups, they include:
|
|
|
137
137
|
|
|
138
138
|
Uses the `o-teaser--small` modifier.
|
|
139
139
|
|
|
140
|
-
[View example on the Registry](http://registry.origami.ft.com/components/o-teaser#demo-small)
|
|
141
|
-
|
|
142
140
|
Additional modifiers:
|
|
143
141
|
|
|
144
142
|
- `stacked`: moves the image to the top of the teaser
|
|
@@ -150,8 +148,6 @@ Additional modifiers:
|
|
|
150
148
|
|
|
151
149
|
Uses the `o-teaser--large` modifier.
|
|
152
150
|
|
|
153
|
-
[View example on the Registry](http://registry.origami.ft.com/components/o-teaser#demo-large)
|
|
154
|
-
|
|
155
151
|
Additional modifiers:
|
|
156
152
|
|
|
157
153
|
- `opinion`: adds a blue background
|
|
@@ -161,7 +157,7 @@ Additional modifiers:
|
|
|
161
157
|
|
|
162
158
|
Uses the `o-teaser--hero` modifier.
|
|
163
159
|
|
|
164
|
-
[View example on
|
|
160
|
+
[View example on Storybook](https://o2-core.origami.ft.com/?path=/story/maintained-o-teaser--hero-image&globals=backgrounds:!undefined)
|
|
165
161
|
|
|
166
162
|
Additional modifiers:
|
|
167
163
|
|
|
@@ -174,14 +170,12 @@ Additional modifiers:
|
|
|
174
170
|
|
|
175
171
|
Uses the `o-teaser--video` modifier.
|
|
176
172
|
|
|
177
|
-
[View example on
|
|
173
|
+
[View example on Storybook](https://o2-core.origami.ft.com/?path=/story/maintained-o-teaser--video&globals=backgrounds:!undefined)
|
|
178
174
|
|
|
179
175
|
#### Video teasers
|
|
180
176
|
|
|
181
177
|
Uses the `o-teaser--audio` modifier.
|
|
182
178
|
|
|
183
|
-
[View example on the Registry](http://registry.origami.ft.com/components/o-teaser#demo-audio)
|
|
184
|
-
|
|
185
179
|
## Migration guide
|
|
186
180
|
|
|
187
181
|
| State | Major Version | Last Minor Release | Migration guide |
|
package/package.json
CHANGED
|
@@ -48,7 +48,6 @@
|
|
|
48
48
|
.o-teaser__image-container {
|
|
49
49
|
margin-bottom: oPrivateSpacingByName('s3');
|
|
50
50
|
width: 100%;
|
|
51
|
-
// <https://connect.microsoft.com/IE/feedbackdetail/view/891815>
|
|
52
51
|
min-height: 1px;
|
|
53
52
|
padding-top: 0;
|
|
54
53
|
padding-right: 0;
|
|
@@ -143,19 +142,6 @@
|
|
|
143
142
|
@mixin _oTeaserPostOpinion {
|
|
144
143
|
@include _oTeaserPost;
|
|
145
144
|
|
|
146
|
-
.o-teaser__heading:before {
|
|
147
|
-
@include oPrivateIconsContent(
|
|
148
|
-
'speech-left',
|
|
149
|
-
oPrivateFoundationGet('o3-color-palette-oxford'),
|
|
150
|
-
30,
|
|
151
|
-
$iconset-version: 1
|
|
152
|
-
);
|
|
153
|
-
content: '';
|
|
154
|
-
height: 13px;
|
|
155
|
-
position: relative;
|
|
156
|
-
background-size: cover;
|
|
157
|
-
margin-left: -5px;
|
|
158
|
-
}
|
|
159
145
|
.o-teaser__tag {
|
|
160
146
|
color: oPrivateFoundationGet('o3-color-palette-oxford');
|
|
161
147
|
}
|