@financial-times/o-teaser 7.1.2 → 7.1.4

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/demos/src/pa11y.mustache +22 -0
  3. package/package.json +1 -1
  4. package/src/scss/_mixins.scss +51 -7
  5. package/src/scss/elements/_default.scss +0 -49
  6. package/src/scss/elements/_timestamp.scss +0 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## [7.1.4](https://github.com/Financial-Times/origami/compare/o-teaser-v7.1.3...o-teaser-v7.1.4) (2025-06-17)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * Update teaser topic tag typography ([bb7a9ee](https://github.com/Financial-Times/origami/commit/bb7a9eea91c78fed526b5b68c4ffed970c4e1239))
9
+
10
+ ## [7.1.3](https://github.com/Financial-Times/origami/compare/o-teaser-v7.1.2...o-teaser-v7.1.3) (2025-05-29)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * o-teaser timestamp margin ([e4c2815](https://github.com/Financial-Times/origami/commit/e4c2815ff3e11cdc880da8c7cd25fcda0540539c))
16
+
3
17
  ## [7.1.2](https://github.com/Financial-Times/origami/compare/o-teaser-v7.1.1...o-teaser-v7.1.2) (2025-04-29)
4
18
 
5
19
 
package/demos/src/pa11y.mustache CHANGED
@@ -1,5 +1,27 @@
1
1
  <div class="demo-container">
2
2
 
3
+ <div class="o-teaser o-teaser--article o-teaser--small o-teaser--has-image o-teaser--highlight">
4
+ <div class="o-teaser__content">
5
+ <div class="o-teaser__meta">
6
+ <span class="o-teaser__tag-prefix">Prefix Text</span>
7
+ <a class="o-teaser__tag" href="#" aria-label="Category: {{article-tag}}">{{article-tag}}</a>
8
+ </div>
9
+ <div class="o-teaser__heading">
10
+ <a href="#">{{article-heading}}</a>
11
+ </div>
12
+ <p class="o-teaser__standfirst">
13
+ <a href="#">{{article-standfirst}}</a>
14
+ </p>
15
+ </div>
16
+ <div class="o-teaser__image-container">
17
+ <a href="#" tabindex="-1" aria-hidden="true">
18
+ <div class="o-teaser__image-placeholder" style="aspect-ratio: 2048 / 1152;">
19
+ <img class="o-teaser__image" src="{{article-image-url}}" alt="">
20
+ </div>
21
+ </a>
22
+ </div>
23
+ </div>
24
+
3
25
  <div class="o-teaser o-teaser--small" data-o-component="o-teaser">
4
26
  <div class="o-teaser__content">
5
27
  {{#article-tag}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-teaser",
3
- "version": "7.1.2",
3
+ "version": "7.1.4",
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",
package/src/scss/_mixins.scss CHANGED
@@ -46,20 +46,51 @@
46
46
  }
47
47
 
48
48
  @mixin _oTeaserElementsDefault {
49
+ .o-teaser__meta,
50
+ .o-teaser__tag-suffix,
51
+ .o-teaser__tag,
52
+ .o-teaser__tag-prefix {
53
+ font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
54
+ font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
55
+ font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
56
+ line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
57
+ }
58
+
59
+ a.o-teaser__tag-prefix,
60
+ a.o-teaser__tag {
61
+ font-family: oPrivateFoundationGet('o3-type-body-highlight-font-family');
62
+ font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
63
+ font-weight: oPrivateFoundationGet('o3-type-body-highlight-font-weight');
64
+ line-height: oPrivateFoundationGet('o3-type-body-highlight-line-height');
65
+ }
66
+
49
67
  .o-teaser__meta {
50
- @include _oTeaserMeta;
68
+ color: oPrivateFoundationGet('o3-color-palette-claret');
69
+ margin-bottom: oPrivateSpacingByName('s3');
70
+ }
71
+
72
+ .o-teaser__tag-suffix {
73
+ color: oPrivateFoundationGet('o3-color-palette-black-60');
51
74
  }
52
75
 
53
76
  .o-teaser__tag-prefix {
54
- @include _oTeaserTagPrefix;
77
+ margin-right: 0.25em;
55
78
  }
56
79
 
57
80
  .o-teaser__tag {
58
- @include _oTeaserTag;
59
- }
81
+ color: inherit;
82
+ text-decoration: none;
83
+ border: 0;
84
+ margin-right: 0.25em;
85
+
86
+ &:hover,
87
+ &:focus {
88
+ color: $_o-teaser-focus-hover;
89
+ }
60
90
 
61
- .o-teaser__tag-suffix {
62
- @include _oTeaserTagSuffix;
91
+ span {
92
+ display: inline-block;
93
+ }
63
94
  }
64
95
 
65
96
  .o-teaser__heading {
@@ -89,7 +120,20 @@
89
120
  @mixin _oTeaserElementsTimestamp {
90
121
  .o-teaser__timestamp-date,
91
122
  .o-teaser__timestamp {
92
- @include _oTeaserTimestamp;
123
+ font-family: oPrivateFoundationGet('o3-type-label-font-family');
124
+ font-size: oPrivateFoundationGet('o3-type-label-font-size');
125
+ font-weight: oPrivateFoundationGet('o3-type-label-font-weight');
126
+ line-height: oPrivateFoundationGet('o3-type-label-line-height');
127
+ text-transform: oPrivateFoundationGet('o3-type-label-text-case');
128
+ color: $_o-teaser-muted;
129
+ display: block;
130
+ // Moves timestamp to the bottom when stretched modifier is used
131
+ margin-top: auto;
132
+ }
133
+
134
+ .o-teaser__timestamp {
135
+ // and ensures there is always some gap above
136
+ padding-top: oPrivateSpacingByName('s4');
93
137
  }
94
138
 
95
139
  @include _oTeaserTimestampVariants;
package/src/scss/elements/_default.scss CHANGED
@@ -43,55 +43,6 @@
43
43
  }
44
44
  }
45
45
 
46
- /// Meta area and colouring styles
47
- @mixin _oTeaserMeta {
48
- font-family: oPrivateFoundationGet('o3-type-detail-font-family');
49
- font-size: oPrivateFoundationGet('o3-type-detail-font-size');
50
- font-weight: oPrivateFoundationGet('o3-type-detail-font-weight');
51
- line-height: oPrivateFoundationGet('o3-type-detail-line-height');
52
- color: oPrivateFoundationGet('o3-color-palette-claret');
53
- margin-bottom: oPrivateSpacingByName('s3');
54
- }
55
-
56
- /// Tag styling.
57
- /// Element should be a link, otherwise use _oTeaserMeta
58
- @mixin _oTeaserTag {
59
- font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
60
- font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
61
- font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
62
- line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
63
-
64
- color: inherit;
65
- text-decoration: none;
66
- border: 0;
67
- margin-right: 0.25em;
68
-
69
- &:hover,
70
- &:focus {
71
- color: $_o-teaser-focus-hover;
72
- }
73
-
74
- span {
75
- display: inline-block;
76
- }
77
- }
78
-
79
- @mixin _oTeaserTagPrefix {
80
- font-family: oPrivateFoundationGet('o3-type-detail-font-family');
81
- font-size: oPrivateFoundationGet('o3-type-detail-font-size');
82
- font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
83
- line-height: oPrivateFoundationGet('o3-type-detail-line-height');
84
- margin-right: 0.25em;
85
- }
86
-
87
- @mixin _oTeaserTagSuffix {
88
- font-family: oPrivateFoundationGet('o3-type-detail-font-family');
89
- font-size: oPrivateFoundationGet('o3-type-detail-font-size');
90
- font-weight: oPrivateFoundationGet('o3-type-detail-font-weight');
91
- line-height: oPrivateFoundationGet('o3-type-detail-line-height');
92
- color: oPrivateFoundationGet('o3-color-palette-black-60');
93
- }
94
-
95
46
  /// Styles for standfirst element
96
47
  @mixin _oTeaserStandfirst {
97
48
  @include _oTeaserLink();
package/src/scss/elements/_timestamp.scss CHANGED
@@ -1,18 +1,3 @@
1
- /// Timestamp base styles
2
- @mixin _oTeaserTimestamp {
3
- font-family: oPrivateFoundationGet('o3-type-label-font-family');
4
- font-size: oPrivateFoundationGet('o3-type-label-font-size');
5
- font-weight: oPrivateFoundationGet('o3-type-label-font-weight');
6
- line-height: oPrivateFoundationGet('o3-type-label-line-height');
7
- text-transform: oPrivateFoundationGet('o3-type-label-text-case');
8
- color: $_o-teaser-muted;
9
- display: block;
10
- // Moves timestamp to the bottom when stretched modifier is used
11
- margin-top: auto;
12
- // and ensures there is always some gap above
13
- padding-top: oPrivateSpacingByName('s4');
14
- }
15
-
16
1
  /// Timestamp variant styles adding coloured prefixes.
17
2
  /// Includes keyframe declaration so must be used outside of
18
3
  /// a selector