@financial-times/o-teaser 8.0.1 → 9.1.0
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 +23 -0
- package/MIGRATION.md +18 -0
- package/package.json +2 -2
- package/src/scss/_mixins.scss +18 -0
- package/src/scss/_variables.scss +1 -1
- package/src/scss/elements/_default.scss +5 -5
- package/src/scss/themes/_hero.scss +1 -5
- package/src/scss/themes/_live.scss +7 -9
- package/src/scss/themes/_standard.scss +0 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [9.1.0](https://github.com/Financial-Times/origami/compare/o-teaser-v9.0.0...o-teaser-v9.1.0) (2025-11-04)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* Add new styling for o-teaser labels ([#2268](https://github.com/Financial-Times/origami/issues/2268)) ([b356c83](https://github.com/Financial-Times/origami/commit/b356c8377817cadafc3e1da5614156f7d7159c63))
|
|
9
|
+
|
|
10
|
+
## [9.0.0](https://github.com/Financial-Times/origami/compare/o-teaser-v8.0.1...o-teaser-v9.0.0) (2025-10-23)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### ⚠ BREAKING CHANGES
|
|
14
|
+
|
|
15
|
+
* bump html-react-parser ([#2256](https://github.com/Financial-Times/origami/issues/2256))
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* bump html-react-parser ([#2256](https://github.com/Financial-Times/origami/issues/2256)) ([81b1498](https://github.com/Financial-Times/origami/commit/81b149882e72a60a1311c1aae51ec447c1c9d532))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* Remove standfirst hover and focus colour changes ([#2232](https://github.com/Financial-Times/origami/issues/2232)) ([741e2d3](https://github.com/Financial-Times/origami/commit/741e2d38df52335699ee0e448df6384ecb619772))
|
|
25
|
+
|
|
3
26
|
## [8.0.1](https://github.com/Financial-Times/origami/compare/o-teaser-v8.0.0...o-teaser-v8.0.1) (2025-10-16)
|
|
4
27
|
|
|
5
28
|
|
package/MIGRATION.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Migration guide
|
|
2
2
|
|
|
3
|
+
### Migrating to v9.0.0
|
|
4
|
+
|
|
5
|
+
v9 upgrades [html-react-parser to v5.2.7](https://github.com/remarkablemark/html-react-parser), which has a dependency on React 19.
|
|
6
|
+
|
|
7
|
+
If you use React 17 or 18, add an override/resolution in your package manager to align React versions.
|
|
8
|
+
|
|
9
|
+
```json
|
|
10
|
+
{
|
|
11
|
+
"overrides": {
|
|
12
|
+
"react": "17.0.2",
|
|
13
|
+
"react-dom": "17.0.2"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
If you are using preact with `preact/compat`, ensure your bundler aliases `react` and `react-dom` to `preact/compat`.
|
|
19
|
+
|
|
20
|
+
|
|
3
21
|
### Migrating to v8.0.0
|
|
4
22
|
|
|
5
23
|
v8.0.0 includes a minor visual update. You’ll need to check a few things to make sure it looks and works as expected.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/o-teaser",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.1.0",
|
|
4
4
|
"description": "Provides styling for teaser elements, which contain information about an article and link through to it",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"article",
|
|
@@ -41,6 +41,6 @@
|
|
|
41
41
|
"date-fns": "^2.30.0",
|
|
42
42
|
"dateformat": "^3.0.3",
|
|
43
43
|
"dompurify": "^2.3.9",
|
|
44
|
-
"html-react-parser": "^
|
|
44
|
+
"html-react-parser": "^5.2.7"
|
|
45
45
|
}
|
|
46
46
|
}
|
package/src/scss/_mixins.scss
CHANGED
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
@include _oTeaserElementsRelatedItems;
|
|
17
17
|
} @else if $group == 'syndication' {
|
|
18
18
|
@include _oTeaserSyndicationIndicator;
|
|
19
|
+
} @else if $group == 'labels' {
|
|
20
|
+
@include _oTeaserElementsLabels;
|
|
19
21
|
}
|
|
20
22
|
}
|
|
21
23
|
|
|
@@ -117,6 +119,22 @@
|
|
|
117
119
|
@include _oTeaserHeadshot;
|
|
118
120
|
}
|
|
119
121
|
|
|
122
|
+
@mixin _oTeaserElementsLabels {
|
|
123
|
+
.o-teaser__labels {
|
|
124
|
+
font-family: oPrivateFoundationGet('o3-type-label-font-family');
|
|
125
|
+
font-size: oPrivateFoundationGet('o3-type-label-font-size');
|
|
126
|
+
font-weight: oPrivateFoundationGet('o3-type-label-font-weight');
|
|
127
|
+
line-height: oPrivateFoundationGet('o3-type-label-line-height');
|
|
128
|
+
text-transform: oPrivateFoundationGet('o3-type-label-text-case');
|
|
129
|
+
color: $_o-teaser-muted;
|
|
130
|
+
display: block;
|
|
131
|
+
// Moves labels to the bottom when stretched modifier is used
|
|
132
|
+
margin-top: auto;
|
|
133
|
+
// and ensures there is always some gap above
|
|
134
|
+
padding-top: oPrivateSpacingByName('s4');
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
120
138
|
@mixin _oTeaserElementsTimestamp {
|
|
121
139
|
.o-teaser__timestamp-date,
|
|
122
140
|
.o-teaser__timestamp {
|
package/src/scss/_variables.scss
CHANGED
|
@@ -7,7 +7,7 @@ $_o-teaser-themes: ('small', 'large', 'standard', 'video', 'audio', 'hero', 'top
|
|
|
7
7
|
|
|
8
8
|
/// List of element styles available
|
|
9
9
|
/// @access private
|
|
10
|
-
$_o-teaser-elements: ('default', 'images', 'timestamp', 'promoted', 'related-items', 'syndication');
|
|
10
|
+
$_o-teaser-elements: ('default', 'images', 'timestamp', 'promoted', 'related-items', 'syndication', 'labels');
|
|
11
11
|
|
|
12
12
|
/// Commonly used text colour.
|
|
13
13
|
/// @type Color
|
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
/// @access public
|
|
4
4
|
@mixin oTeaserHeading {
|
|
5
5
|
@include _oTeaserLink();
|
|
6
|
+
a:focus,
|
|
7
|
+
a:hover {
|
|
8
|
+
color: $_o-teaser-focus-hover;
|
|
9
|
+
}
|
|
10
|
+
|
|
6
11
|
font-family: oPrivateFoundationGet('o3-type-headline-sm-font-family');
|
|
7
12
|
font-size: oPrivateFoundationGet('o3-type-headline-sm-font-size');
|
|
8
13
|
font-weight: oPrivateFoundationGet('o3-type-headline-sm-font-weight');
|
|
@@ -66,11 +71,6 @@
|
|
|
66
71
|
text-decoration: none;
|
|
67
72
|
border: 0;
|
|
68
73
|
|
|
69
|
-
&:focus,
|
|
70
|
-
&:hover {
|
|
71
|
-
color: $_o-teaser-focus-hover;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
74
|
&:visited {
|
|
75
75
|
color: $_o-teaser-muted;
|
|
76
76
|
}
|
|
@@ -36,8 +36,6 @@
|
|
|
36
36
|
.o-teaser__heading a:hover,
|
|
37
37
|
.o-teaser__heading a:focus,
|
|
38
38
|
.o-teaser__heading a:visited,
|
|
39
|
-
.o-teaser__standfirst a:hover,
|
|
40
|
-
.o-teaser__standfirst a:focus,
|
|
41
39
|
.o-teaser__standfirst a:visited,
|
|
42
40
|
.o-teaser__tag:hover,
|
|
43
41
|
.o-teaser__tag:focus {
|
|
@@ -215,9 +213,7 @@
|
|
|
215
213
|
$hero-extra-highlight-border: oPrivateFoundationGet('o3-color-palette-lemon');
|
|
216
214
|
$hero-extra-highlight-color: oPrivateFoundationGet('o3-color-palette-lemon');
|
|
217
215
|
.o-teaser__heading a:hover,
|
|
218
|
-
.o-teaser__heading a:focus
|
|
219
|
-
.o-teaser__standfirst a:hover,
|
|
220
|
-
.o-teaser__standfirst a:focus {
|
|
216
|
+
.o-teaser__heading a:focus {
|
|
221
217
|
color: $hero-extra-highlight-color;
|
|
222
218
|
}
|
|
223
219
|
|
|
@@ -22,15 +22,13 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.o-teaser__meta a,
|
|
26
|
-
.o-
|
|
27
|
-
.o-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
outline-color: currentColor;
|
|
33
|
-
}
|
|
25
|
+
.o-teaser__meta a:focus,
|
|
26
|
+
.o-teaser__meta a:hover,
|
|
27
|
+
.o-teaser__heading a:focus,
|
|
28
|
+
.o-teaser__heading a:hover,
|
|
29
|
+
.o-teaser__standfirst a:visited {
|
|
30
|
+
color: oPrivateColorsMix('o3-color-palette-white', 'o3-color-palette-crimson', 90);
|
|
31
|
+
outline-color: currentColor;
|
|
34
32
|
}
|
|
35
33
|
|
|
36
34
|
// @deprecated - o-teaser__timestamp--inprogress has been replaced by o-teaser__timestamp--live
|
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
.o-teaser__heading a:hover,
|
|
7
7
|
.o-teaser__heading a:focus,
|
|
8
8
|
.o-teaser__heading a:visited,
|
|
9
|
-
.o-teaser__standfirst a:hover,
|
|
10
|
-
.o-teaser__standfirst a:focus,
|
|
11
9
|
.o-teaser__standfirst a:visited,
|
|
12
10
|
.o-teaser__tag:hover,
|
|
13
11
|
.o-teaser__tag:focus {
|
|
@@ -102,8 +100,6 @@
|
|
|
102
100
|
.o-teaser__heading a:hover,
|
|
103
101
|
.o-teaser__heading a:focus,
|
|
104
102
|
.o-teaser__heading a:visited,
|
|
105
|
-
.o-teaser__standfirst a:hover,
|
|
106
|
-
.o-teaser__standfirst a:focus,
|
|
107
103
|
.o-teaser__standfirst a:visited,
|
|
108
104
|
.o-teaser__tag:hover,
|
|
109
105
|
.o-teaser__tag:focus {
|