@financial-times/o-topper 7.0.3 → 7.0.5

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 (24) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +13 -13
  3. package/demos/src/basic.mustache +1 -1
  4. package/demos/src/branded.mustache +1 -1
  5. package/demos/src/centered.mustache +1 -1
  6. package/demos/src/deep-landscape-left.mustache +4 -4
  7. package/demos/src/deep-portrait.mustache +4 -4
  8. package/demos/src/full-bleed-image-center.mustache +1 -1
  9. package/demos/src/full-bleed-image-left.mustache +1 -1
  10. package/demos/src/full-bleed-offset-right-rail.mustache +1 -1
  11. package/demos/src/full-bleed-offset.mustache +1 -1
  12. package/demos/src/live-blog-package.mustache +2 -2
  13. package/demos/src/opinion.mustache +1 -1
  14. package/demos/src/pa11y.mustache +8 -8
  15. package/demos/src/package-extra.mustache +1 -1
  16. package/demos/src/package-special-report.mustache +3 -3
  17. package/demos/src/package.mustache +1 -1
  18. package/demos/src/podcast.mustache +1 -1
  19. package/demos/src/right-rail.mustache +1 -1
  20. package/demos/src/split-text-center.mustache +1 -1
  21. package/demos/src/split-text-left.mustache +1 -1
  22. package/package.json +1 -1
  23. package/src/scss/_mixins.scss +2 -2
  24. package/src/scss/themes/_branded.scss +4 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## [7.0.5](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.4...o-topper-v7.0.5) (2025-05-28)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * ci-2809 o-topper fix text under headshot ([f4c5cb1](https://github.com/Financial-Times/origami/commit/f4c5cb1d1f95caf7433fb1c1030b13ac63f63cc2))
9
+
10
+ ## [7.0.4](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.3...o-topper-v7.0.4) (2025-04-30)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * Revert o-topper breaking markup change ([2086102](https://github.com/Financial-Times/origami/commit/2086102c76037b8389f8a59f10ad5c41488be5aa))
16
+
3
17
  ## [7.0.3](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.2...o-topper-v7.0.3) (2025-04-29)
4
18
 
5
19
 
package/README.md CHANGED
@@ -18,7 +18,7 @@ Check out [how to include Origami components in your project](https://origami.ft
18
18
  The basic markup structure for a topper will look something like this:
19
19
 
20
20
  ```html
21
- <div class="o-topper o-topper--basic o-topper--color-o3-color-palette-paper">
21
+ <div class="o-topper o-topper--basic o-topper--color-paper">
22
22
  <div class="o-topper__content">
23
23
  <div class="o-topper__tags">
24
24
  <a href="https://www.ft.com/german-election" class="o-topper__topic"
@@ -81,16 +81,16 @@ These themes affect the layout and visual style of all elements. See the [demos]
81
81
  These colors affect the background of the `.o-topper__background` and `.o-topper__visual` elements, and select a contrasting text color for all other elements.
82
82
 
83
83
  ```
84
- .o-topper--color-o3-color-palette-paper
85
- .o-topper--color-o3-color-palette-wheat
86
- .o-topper--color-o3-color-palette-white
87
- .o-topper--color-o3-color-palette-black
88
- .o-topper--color-o3-color-palette-claret
89
- .o-topper--color-o3-color-palette-oxford
90
- .o-topper--color-o3-color-palette-slate
91
- .o-topper--color-o3-color-palette-crimson
92
- .o-topper--color-o3-color-palette-sky
93
- .o-topper--color-o3-color-palette-matisse
84
+ .o-topper--color-paper
85
+ .o-topper--color-wheat
86
+ .o-topper--color-white
87
+ .o-topper--color-black
88
+ .o-topper--color-claret
89
+ .o-topper--color-oxford
90
+ .o-topper--color-slate
91
+ .o-topper--color-crimson
92
+ .o-topper--color-sky
93
+ .o-topper--color-matisse
94
94
  ```
95
95
 
96
96
  ### Modifiers
@@ -158,9 +158,9 @@ To include o-topper styles granularly specify which elements, themes, and colour
158
158
  ),
159
159
  'colors': (
160
160
  'o3-color-palette-white',
161
- // .o-topper--color-o3-color-palette-white
161
+ // .o-topper--color-white
162
162
  'o3-color-palette-black',
163
- // .o-topper--color-o3-color-palette-black
163
+ // .o-topper--color-black
164
164
  'o3-color-palette-claret',
165
165
  'o3-color-palette-oxford',
166
166
  'o3-color-palette-paper',
package/demos/src/basic.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--basic o-topper--color-o3-color-palette-paper">
1
+ <div class="o-topper o-topper--basic o-topper--color-paper">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
package/demos/src/branded.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--branded o-topper--color-o3-color-palette-wheat">
1
+ <div class="o-topper o-topper--branded o-topper--color-wheat">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/stream/c65ad97e-ccf0-4b6a-b34a-0e03744a9431" class="o-topper__brand">
package/demos/src/centered.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--centered o-topper--color-o3-color-palette-paper">
1
+ <div class="o-topper o-topper--centered o-topper--color-paper">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
package/demos/src/deep-landscape-left.mustache CHANGED
@@ -1,7 +1,7 @@
1
1
  <h2>
2
2
  Text Shadow + Slate background
3
3
  </h2>
4
- <div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-slate">
4
+ <div class="o-topper o-topper--deep-landscape o-topper--color-slate">
5
5
  <div class="o-topper__content o-topper__content--text-shadow">
6
6
  <div class="o-topper__tags">
7
7
  <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
@@ -28,7 +28,7 @@ Text Shadow + Slate background
28
28
 
29
29
  <h2>Background Box + Slate background</h2>
30
30
 
31
- <div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-slate">
31
+ <div class="o-topper o-topper--deep-landscape o-topper--color-slate">
32
32
  <div class="o-topper__content o-topper__content--background-box">
33
33
  <div class="o-topper__tags">
34
34
  <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
@@ -55,7 +55,7 @@ Text Shadow + Slate background
55
55
 
56
56
  <h2>White background</h2>
57
57
 
58
- <div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-white">
58
+ <div class="o-topper o-topper--deep-landscape o-topper--color-white">
59
59
  <div class="o-topper__content">
60
60
  <div class="o-topper__tags">
61
61
  <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
@@ -76,7 +76,7 @@ Text Shadow + Slate background
76
76
 
77
77
  <h2>Background Box + White background</h2>
78
78
 
79
- <div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-white">
79
+ <div class="o-topper o-topper--deep-landscape o-topper--color-white">
80
80
  <div class="o-topper__content o-topper__content--text-shadow o-topper__content--background-box">
81
81
  <div class="o-topper__tags">
82
82
  <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
package/demos/src/deep-portrait.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--deep-portrait o-topper--color-o3-color-palette-claret">
1
+ <div class="o-topper o-topper--deep-portrait o-topper--color-claret">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="/uk-general-election" class="o-topper__topic">
@@ -22,9 +22,9 @@
22
22
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
23
23
  </picture>
24
24
  <figcaption class="o-topper__image-caption">
25
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
26
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
27
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
25
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
26
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
27
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
28
28
  </figcaption>
29
29
  </figure>
30
30
  </div>
package/demos/src/full-bleed-image-center.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--full-bleed-image-center o-topper--color-o3-color-palette-slate">
1
+ <div class="o-topper o-topper--full-bleed-image-center o-topper--color-slate">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
package/demos/src/full-bleed-image-left.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--full-bleed-image-left o-topper--color-o3-color-palette-slate">
1
+ <div class="o-topper o-topper--full-bleed-image-left o-topper--color-slate">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
package/demos/src/full-bleed-offset-right-rail.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--full-bleed-offset o-topper--right-rail o-topper--color-o3-color-palette-paper">
1
+ <div class="o-topper o-topper--full-bleed-offset o-topper--right-rail o-topper--color-paper">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
package/demos/src/full-bleed-offset.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--full-bleed-offset o-topper--color-o3-color-palette-paper">
1
+ <div class="o-topper o-topper--full-bleed-offset o-topper--color-paper">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
package/demos/src/live-blog-package.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--full-bleed-offset o-topper--color-o3-color-palette-paper">
1
+ <div class="o-topper o-topper--full-bleed-offset o-topper--color-paper">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags"></div>
4
4
  <h1 class="o-topper__headline o-topper__headline--large"><span class="article-classifier__gap">Coronavirus
@@ -42,4 +42,4 @@
42
42
  </picture>
43
43
  <figcaption class="o-topper__image-credit">© REUTERS</figcaption>
44
44
  </figure>
45
- </div>
45
+ </div>
package/demos/src/opinion.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-o3-color-palette-sky">
1
+ <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-sky">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <span class="o-topper__opinion-genre">
package/demos/src/pa11y.mustache CHANGED
@@ -1,5 +1,5 @@
1
1
  <div id="demo-container">
2
- <div class="o-topper o-topper--basic o-topper--color-o3-color-palette-paper">
2
+ <div class="o-topper o-topper--basic o-topper--color-paper">
3
3
  <div class="o-topper__content">
4
4
  <div class="o-topper__tags">
5
5
  <a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
@@ -12,7 +12,7 @@
12
12
 
13
13
  <div class="o-topper__background"></div>
14
14
  </div>
15
- <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--color-o3-color-palette-wheat">
15
+ <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--color-wheat">
16
16
  <div class="o-topper__content">
17
17
  <div class="o-topper__tags">
18
18
  <a href="https://www.ft.com/stream/c65ad97e-ccf0-4b6a-b34a-0e03744a9431" class="o-topper__brand">
@@ -52,7 +52,7 @@
52
52
  </picture>
53
53
  </figure>
54
54
  </div>
55
- <div class="o-topper o-topper--full-bleed-offset o-topper--color-o3-color-palette-paper">
55
+ <div class="o-topper o-topper--full-bleed-offset o-topper--color-paper">
56
56
  <div class="o-topper__content">
57
57
  <div class="o-topper__tags">
58
58
  <a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
@@ -80,7 +80,7 @@
80
80
  <figcaption class="o-topper__image-credit">© Bloomberg</figcaption>
81
81
  </figure>
82
82
  </div>
83
- <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-o3-color-palette-sky">
83
+ <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-sky">
84
84
  <div class="o-topper__content">
85
85
  <div class="o-topper__tags tags--large">
86
86
  <span class="o-topper__opinion-genre">
@@ -108,7 +108,7 @@
108
108
 
109
109
  <div class="o-topper__background"></div>
110
110
  </div>
111
- <div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-o3-color-palette-slate">
111
+ <div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-slate">
112
112
  <div class="o-topper__content">
113
113
  <div class="o-topper__tags">
114
114
  <a href="https://www.ft.com/ft-series" class="o-topper__topic tags--large">FT Series</a>
@@ -132,7 +132,7 @@
132
132
  <figcaption class="o-topper__image-credit">© FT montage</figcaption>
133
133
  </figure>
134
134
  </div>
135
- <div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-o3-color-palette-wheat">
135
+ <div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-wheat">
136
136
  <div class="o-topper__content">
137
137
  <div class="o-topper__tags">
138
138
  <a href="https://www.ft.com/ft-guides" class="o-topper__topic tags--large">FT Guides</a>
@@ -153,7 +153,7 @@
153
153
  </picture>
154
154
  </figure>
155
155
  </div>
156
- <div class="o-topper o-topper--split-text-center o-topper--color-o3-color-palette-black">
156
+ <div class="o-topper o-topper--split-text-center o-topper--color-black">
157
157
  <div class="o-topper__content">
158
158
  <div class="o-topper__tags">
159
159
  <a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
@@ -183,7 +183,7 @@
183
183
  <figcaption class="o-topper__image-credit">© Ollanski</figcaption>
184
184
  </figure>
185
185
  </div>
186
- <div class="o-topper o-topper--split-text-left o-topper--color-o3-color-palette-claret">
186
+ <div class="o-topper o-topper--split-text-left o-topper--color-claret">
187
187
  <div class="o-topper__content">
188
188
  <div class="o-topper__tags">
189
189
  <a href="/uk-general-election" class="o-topper__topic">
package/demos/src/package-extra.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-o3-color-palette-slate">
1
+ <div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-slate">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/ft-series" class="o-topper__topic tags--large">FT Series</a>
package/demos/src/package-special-report.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--split-text-left o-topper--package o-topper--special-report o-topper--color-o3-color-palette-claret">
1
+ <div class="o-topper o-topper--split-text-left o-topper--package o-topper--special-report o-topper--color-claret">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/reports" class="o-topper__topic tags--large">Special Report</a>
@@ -17,9 +17,9 @@
17
17
  <figure class="o-topper__visual">
18
18
  <picture class="o-topper__picture">
19
19
  <source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/ftcms:0eac32d0-1cec-4f20-a183-d9f4370309fb?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1067 1067w">
20
-
20
+
21
21
  <source media="(max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/ftcms:63ebca9e-3091-4cde-a958-33ee6405c741?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
22
-
22
+
23
23
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/ftcms:0eac32d0-1cec-4f20-a183-d9f4370309fb?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1067">
24
24
  </picture>
25
25
  </figure>
package/demos/src/package.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-o3-color-palette-wheat">
1
+ <div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-wheat">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/ft-guides" class="o-topper__topic tags--large">FT Guides</a>
package/demos/src/podcast.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-o3-color-palette-slate">
1
+ <div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-slate">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/topics/themes/US_Treasury_Bonds" class="o-topper__topic">
package/demos/src/right-rail.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--basic o-topper--right-rail o-topper--color-o3-color-palette-paper">
1
+ <div class="o-topper o-topper--basic o-topper--right-rail o-topper--color-paper">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
package/demos/src/split-text-center.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--split-text-center o-topper--color-o3-color-palette-black">
1
+ <div class="o-topper o-topper--split-text-center o-topper--color-black">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
package/demos/src/split-text-left.mustache CHANGED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--split-text-left o-topper--color-o3-color-palette-claret">
1
+ <div class="o-topper o-topper--split-text-left o-topper--color-claret">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="/uk-general-election" class="o-topper__topic">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-topper",
3
- "version": "7.0.3",
3
+ "version": "7.0.5",
4
4
  "description": "Article header styling",
5
5
  "keywords": [
6
6
  "topper",
package/src/scss/_mixins.scss CHANGED
@@ -285,13 +285,13 @@
285
285
 
286
286
  @mixin _oTopperColors($colors) {
287
287
  @each $color in $colors {
288
- $color: if(
288
+ $o3-color-name: if(
289
289
  $color == 'matisse',
290
290
  'o3-color-palette-#{$color}-blue',
291
291
  'o3-color-palette-#{$color}'
292
292
  );
293
293
  .o-topper--color-#{$color} {
294
- @include _oTopperColor($color);
294
+ @include _oTopperColor($o3-color-name);
295
295
  }
296
296
  }
297
297
  }
package/src/scss/themes/_branded.scss CHANGED
@@ -20,12 +20,14 @@
20
20
 
21
21
  @mixin _oTopperHasHeadshot {
22
22
  .o-topper__tags,
23
- .o-topper__standfirst {
23
+ .o-topper__standfirst,
24
+ .o-topper__summary {
24
25
  box-sizing: border-box;
25
26
  }
26
27
 
27
28
  .o-topper__headline--no-standfirst,
28
- .o-topper__standfirst {
29
+ .o-topper__standfirst,
30
+ .o-topper__summary {
29
31
  padding-right: calc(
30
32
  #{$_o-topper-headshot-width} + #{oPrivateSpacingByName('s2')}
31
33
  );