@financial-times/o-topper 6.0.8 → 7.0.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 +64 -74
- package/MIGRATION.md +21 -1
- package/README.md +108 -90
- package/demos/src/basic.mustache +1 -1
- package/demos/src/branded.mustache +1 -1
- package/demos/src/centered.mustache +1 -1
- package/demos/src/deep-landscape-left.mustache +4 -4
- package/demos/src/deep-portrait.mustache +1 -1
- package/demos/src/demo.scss +0 -4
- package/demos/src/full-bleed-image-center.mustache +1 -1
- package/demos/src/full-bleed-image-left.mustache +1 -1
- package/demos/src/full-bleed-offset-right-rail.mustache +1 -1
- package/demos/src/full-bleed-offset.mustache +1 -1
- package/demos/src/live-blog-package.mustache +1 -1
- package/demos/src/opinion.mustache +1 -1
- package/demos/src/pa11y.mustache +8 -8
- package/demos/src/package-extra.mustache +1 -1
- package/demos/src/package-special-report.mustache +1 -1
- package/demos/src/package.mustache +1 -1
- package/demos/src/podcast.mustache +1 -1
- package/demos/src/right-rail.mustache +1 -1
- package/demos/src/split-text-center.mustache +1 -1
- package/demos/src/split-text-left.mustache +1 -1
- package/main.scss +11 -12
- package/package.json +33 -39
- package/src/scss/_elements.scss +64 -17
- package/src/scss/_grid.scss +5 -5
- package/src/scss/_layout.scss +5 -5
- package/src/scss/_mixins.scss +115 -36
- package/src/scss/_variables.scss +2 -3
- package/src/scss/themes/_branded.scss +23 -13
- package/src/scss/themes/_deep-landscape.scss +11 -10
- package/src/scss/themes/_deep-portrait.scss +9 -8
- package/src/scss/themes/_full-bleed-image.scss +7 -7
- package/src/scss/themes/_full-bleed-offset.scss +11 -11
- package/src/scss/themes/_package.scss +37 -18
- package/src/scss/themes/_right-rail.scss +4 -4
- package/src/scss/themes/_split-text.scss +10 -10
- package/src/scss/_deprecated.scss +0 -47
package/CHANGELOG.md
CHANGED
|
@@ -1,246 +1,236 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## [
|
|
3
|
+
## [7.0.0](https://github.com/Financial-Times/origami/compare/o-topper-v6.0.8...o-topper-v7.0.0) (2025-02-20)
|
|
4
|
+
|
|
5
|
+
### ⚠ BREAKING CHANGES
|
|
6
|
+
|
|
7
|
+
This introduces a new design language and visually breaking changes. Including mobile optimised typography, icons, and buttons (see [MIGRATION.md](./MIGRATION.md)).
|
|
8
|
+
|
|
9
|
+
#### Origami 3: Principles, Purpose, and Impact
|
|
10
|
+
|
|
11
|
+
For anyone in P&T. We covered what’s new in Origami 3 (o3), why it matters, and what’s next.
|
|
12
|
+
|
|
13
|
+
[Slides](https://docs.google.com/presentation/d/1Qs8RHpMrDxxP5LyrVlnsUHnS3AriRK5-IboUeneRyMs/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/1OMW9zdTOEUvWyW1trsFqL3XhpTejYelO/view)
|
|
14
|
+
|
|
15
|
+
#### Origami 3: Bridging design & code
|
|
16
|
+
|
|
17
|
+
For designers and engineers alike. How to work with design guidelines, design foundations, and techniques for designer–engineer collaboration.
|
|
18
|
+
|
|
19
|
+
[Slides](https://docs.google.com/presentation/d/1pGBKFNv-g8RbY2g3SJ7v823XBI-MQqpjHrdgg9B6bzI/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/14hWVKM690arNEWROPHx9gmebnOUa6wlM/view)
|
|
20
|
+
|
|
21
|
+
#### Origami 3: Engineers’ Deep Dive
|
|
22
|
+
|
|
23
|
+
We got into the technical detail. Working with Origami CSS (no more Sass), custom elements, JSX templates, etc.
|
|
4
24
|
|
|
25
|
+
[Slides](https://docs.google.com/presentation/d/1s1S959CwZYnd0Q89EhsDFLFUuy2HZ9UnpBVaDHDFX7A/edit#slide=id.g3347c4befb5_0_402) | [Recording](https://drive.google.com/file/d/1hDtSN8Ce_P0Vr_dv0KXuXhs5Q9aHfvAp/view)
|
|
26
|
+
|
|
27
|
+
## [6.0.8](https://github.com/Financial-Times/origami/compare/o-topper-v6.0.7...o-topper-v6.0.8) (2023-10-27)
|
|
5
28
|
|
|
6
29
|
### Bug Fixes
|
|
7
30
|
|
|
8
|
-
|
|
31
|
+
- Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
|
|
9
32
|
|
|
10
33
|
## [6.0.7](https://github.com/Financial-Times/origami/compare/o-topper-v6.0.6...o-topper-v6.0.7) (2023-08-25)
|
|
11
34
|
|
|
12
|
-
|
|
13
35
|
### Bug Fixes
|
|
14
36
|
|
|
15
|
-
|
|
37
|
+
- update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
|
|
16
38
|
|
|
17
39
|
### [6.0.6](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.5...o-topper-v6.0.6) (2023-04-28)
|
|
18
40
|
|
|
19
|
-
|
|
20
41
|
### Bug Fixes
|
|
21
42
|
|
|
22
|
-
|
|
43
|
+
- Require latest minor version of o-colors, o-buttons, and o-forms ([#1098](https://www.github.com/Financial-Times/origami/issues/1098)) ([b856ca6](https://www.github.com/Financial-Times/origami/commit/b856ca66c9ec555f3c70833ffa35cb05cd19841f))
|
|
23
44
|
|
|
24
45
|
### [6.0.5](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.4...o-topper-v6.0.5) (2023-04-11)
|
|
25
46
|
|
|
26
|
-
|
|
27
47
|
### Bug Fixes
|
|
28
48
|
|
|
29
|
-
|
|
49
|
+
- change outline color for focus links under matisse theme ([7e5b1be](https://www.github.com/Financial-Times/origami/commit/7e5b1be95e1f49be53b511f3478f187dd86121c8))
|
|
30
50
|
|
|
31
51
|
### [6.0.4](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.3...o-topper-v6.0.4) (2023-03-29)
|
|
32
52
|
|
|
33
|
-
|
|
34
53
|
### Bug Fixes
|
|
35
54
|
|
|
36
|
-
|
|
55
|
+
- change opacity background box ([946e6a6](https://www.github.com/Financial-Times/origami/commit/946e6a6c312a1fcf706ec3c79359699c73597e94))
|
|
37
56
|
|
|
38
57
|
### [6.0.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.2...o-topper-v6.0.3) (2023-03-13)
|
|
39
58
|
|
|
40
|
-
|
|
41
59
|
### Bug Fixes
|
|
42
60
|
|
|
43
|
-
|
|
61
|
+
- set new margin bottom deep-landscape ([d95bec9](https://www.github.com/Financial-Times/origami/commit/d95bec9c8e98d769d62dd88bd7a196c598cd6141))
|
|
44
62
|
|
|
45
63
|
### [6.0.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.1...o-topper-v6.0.2) (2023-03-08)
|
|
46
64
|
|
|
47
|
-
|
|
48
65
|
### Bug Fixes
|
|
49
66
|
|
|
50
|
-
|
|
67
|
+
- remove unnecesary margin deep-portrait ([aa80b54](https://www.github.com/Financial-Times/origami/commit/aa80b542cd34d0a33d2e518cf52bf09591587ad4))
|
|
51
68
|
|
|
52
69
|
### [6.0.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.0...o-topper-v6.0.1) (2023-03-08)
|
|
53
70
|
|
|
54
|
-
|
|
55
71
|
### Bug Fixes
|
|
56
72
|
|
|
57
|
-
|
|
58
|
-
|
|
73
|
+
- Remove standfirst opacity from the deep-landscape topper variant. ([b1a7bf7](https://www.github.com/Financial-Times/origami/commit/b1a7bf73f4a7ebd163622f749c847a9daf52e5f9))
|
|
74
|
+
- Remove the caption boarder from the deep-portrait topper variant. ([dfe8598](https://www.github.com/Financial-Times/origami/commit/dfe8598ec137040efb977050490183ca9c81d3b4))
|
|
59
75
|
|
|
60
76
|
## [6.0.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.8.0...o-topper-v6.0.0) (2023-03-07)
|
|
61
77
|
|
|
62
|
-
|
|
63
78
|
### ⚠ BREAKING CHANGES
|
|
64
79
|
|
|
65
|
-
|
|
80
|
+
- o-topper, remove JS including `n-map-content-to-topper` dependency. (#1031)
|
|
66
81
|
|
|
67
82
|
### Features
|
|
68
83
|
|
|
69
|
-
|
|
84
|
+
- o-topper, remove JS including `n-map-content-to-topper` dependency. ([#1031](https://www.github.com/Financial-Times/origami/issues/1031)) ([a7aa280](https://www.github.com/Financial-Times/origami/commit/a7aa280a363dad91e959903eb36ed7286ffac203))
|
|
70
85
|
|
|
71
86
|
## [5.8.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.4...o-topper-v5.8.0) (2023-03-06)
|
|
72
87
|
|
|
73
|
-
|
|
74
88
|
### Features
|
|
75
89
|
|
|
76
|
-
|
|
90
|
+
- Add a "deep landscape" o-topper variant with a background box behind content, for use on complex backgrounds where legibility is reduced.
|
|
77
91
|
|
|
78
92
|
### [5.7.4](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.3...o-topper-v5.7.4) (2023-02-08)
|
|
79
93
|
|
|
80
|
-
|
|
81
94
|
### Bug Fixes
|
|
82
95
|
|
|
83
|
-
|
|
96
|
+
- o-topper, reposition deep landscape copy ([#992](https://www.github.com/Financial-Times/origami/issues/992)) ([4f9db10](https://www.github.com/Financial-Times/origami/commit/4f9db1079da6cba254975eacb14e231815f32e30))
|
|
84
97
|
|
|
85
98
|
### [5.7.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.2...o-topper-v5.7.3) (2023-02-01)
|
|
86
99
|
|
|
87
|
-
|
|
88
100
|
### Bug Fixes
|
|
89
101
|
|
|
90
|
-
|
|
102
|
+
- o-topper: remove the headline underline from the deep portrait variant ([#988](https://www.github.com/Financial-Times/origami/issues/988)) ([be44f05](https://www.github.com/Financial-Times/origami/commit/be44f054a60500d1429dddc5cd581f3d48bd6ed0))
|
|
91
103
|
|
|
92
104
|
### [5.7.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.1...o-topper-v5.7.2) (2023-01-31)
|
|
93
105
|
|
|
94
|
-
|
|
95
106
|
### Bug Fixes
|
|
96
107
|
|
|
97
|
-
|
|
108
|
+
- Improve the headline positioning of the deep-portrait variant ([1ab5323](https://www.github.com/Financial-Times/origami/commit/1ab53239653a88bc6898f1af6784b8976d44dd1d))
|
|
98
109
|
|
|
99
110
|
### [5.7.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.0...o-topper-v5.7.1) (2023-01-04)
|
|
100
111
|
|
|
101
|
-
|
|
102
112
|
### Bug Fixes
|
|
103
113
|
|
|
104
|
-
|
|
114
|
+
- Use `rgba` for `rgba` value ([b3562e2](https://www.github.com/Financial-Times/origami/commit/b3562e20582a211704ca67495d89af3bb2576e97))
|
|
105
115
|
|
|
106
116
|
## [5.7.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.4...o-topper-v5.7.0) (2023-01-04)
|
|
107
117
|
|
|
108
|
-
|
|
109
118
|
### Features
|
|
110
119
|
|
|
111
|
-
|
|
120
|
+
- o-topper, add a `deep-landscape` topper ([91cccfe](https://www.github.com/Financial-Times/origami/commit/91cccfe68c9b0fc7c8ba1805c2f904d6680c8bd3))
|
|
112
121
|
|
|
113
122
|
### [5.6.4](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.3...o-topper-v5.6.4) (2022-12-21)
|
|
114
123
|
|
|
115
|
-
|
|
116
124
|
### Bug Fixes
|
|
117
125
|
|
|
118
|
-
|
|
126
|
+
- require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
|
|
119
127
|
|
|
120
128
|
### [5.6.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.2...o-topper-v5.6.3) (2022-12-20)
|
|
121
129
|
|
|
122
|
-
|
|
123
130
|
### Bug Fixes
|
|
124
131
|
|
|
125
|
-
|
|
132
|
+
- update n-map-content-to-topper to 3.2.0 ([a1c6cb3](https://www.github.com/Financial-Times/origami/commit/a1c6cb36a7a6bb5b4a8ba96ab45b68f6f800dd59))
|
|
126
133
|
|
|
127
134
|
### [5.6.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.1...o-topper-v5.6.2) (2022-12-14)
|
|
128
135
|
|
|
129
|
-
|
|
130
136
|
### Bug Fixes
|
|
131
137
|
|
|
132
|
-
|
|
138
|
+
- Rename `o-topper--split-text-portrait-left` to `o-topper--deep-portrait` – this is [technically a breaking change but is being treated as a minor release](https://github.com/Financial-Times/origami/pull/923#pullrequestreview-1217595762) in this case ([78e5da8](https://www.github.com/Financial-Times/origami/commit/78e5da879465029caa11dd2f3d256f7f89b34857))
|
|
133
139
|
|
|
134
140
|
## [5.6.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.0...o-topper-v5.6.1) (2022-12-14)
|
|
135
141
|
|
|
136
|
-
|
|
137
142
|
### Features
|
|
138
143
|
|
|
139
|
-
|
|
144
|
+
- Improve the design of the split-text-portrait-left topper (also known as deep portrait). ([https://github.com/Financial-Times/origami/pull/920](https://github.com/Financial-Times/origami/pull/920))
|
|
140
145
|
|
|
141
146
|
## [5.6.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.5.1...o-topper-v5.6.0) (2022-12-02)
|
|
142
147
|
|
|
143
|
-
|
|
144
148
|
### Features
|
|
145
149
|
|
|
146
|
-
|
|
150
|
+
- Add new topper, split-text-portrait-left. ([a8197da](https://www.github.com/Financial-Times/origami/commit/a8197da3850193971db9b200e5ac9b979014fdcc))
|
|
147
151
|
|
|
148
152
|
### [5.5.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.5.0...o-topper-v5.5.1) (2022-11-24)
|
|
149
153
|
|
|
150
|
-
|
|
151
154
|
### Bug Fixes
|
|
152
155
|
|
|
153
|
-
|
|
156
|
+
- move to the left position of the credit element ([6749a5f](https://www.github.com/Financial-Times/origami/commit/6749a5f155126143f738bae7adee981225ce6c3a))
|
|
154
157
|
|
|
155
158
|
## [5.5.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.2...o-topper-v5.5.0) (2022-11-23)
|
|
156
159
|
|
|
157
|
-
|
|
158
160
|
### Features
|
|
159
161
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
+
- Introduce an image caption element, to compliment the existing credit element. Only use the credit element when there is a credit to display and no image caption. Otherwise use the image caption element to display both caption and any credit. ([2bb7988](https://www.github.com/Financial-Times/origami/commit/2bb79886b7db19920883e61a192cccef926d8af2))
|
|
162
163
|
|
|
163
164
|
### Bug Fixes
|
|
164
165
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
166
|
+
- add credit to example ([005e3b4](https://www.github.com/Financial-Times/origami/commit/005e3b4c90cd30d95bce8e188b84d1d7980a5fe4))
|
|
167
|
+
- fix pa11y error on demos only one figcaption is alowed ([d71c350](https://www.github.com/Financial-Times/origami/commit/d71c350805a0823cafca734a4345b94bc067fec6))
|
|
168
|
+
- update README ([09f7cec](https://www.github.com/Financial-Times/origami/commit/09f7cec15a57491c52a0423c89ea373f8f02c61b))
|
|
168
169
|
|
|
169
170
|
### [5.4.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.1...o-topper-v5.4.2) (2022-11-16)
|
|
170
171
|
|
|
171
|
-
|
|
172
172
|
### Bug Fixes
|
|
173
173
|
|
|
174
|
-
|
|
174
|
+
- remove background from figcaption on toppers ([df93a9a](https://www.github.com/Financial-Times/origami/commit/df93a9a61aee25339a737c959df87d30cb29d4b9))
|
|
175
175
|
|
|
176
176
|
### [5.4.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.0...o-topper-v5.4.1) (2022-11-16)
|
|
177
177
|
|
|
178
|
-
|
|
179
178
|
### Bug Fixes
|
|
180
179
|
|
|
181
|
-
|
|
180
|
+
- support o-topper within a snappy grid container ([6c6f20a](https://www.github.com/Financial-Times/origami/commit/6c6f20a78916f447820380af93161fd1414b794c))
|
|
182
181
|
|
|
183
182
|
## [5.4.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.3.1...o-topper-v5.4.0) (2022-11-15)
|
|
184
183
|
|
|
185
|
-
|
|
186
184
|
### Features
|
|
187
185
|
|
|
188
|
-
|
|
186
|
+
- Updates caption position for improved contrast. Adds additional demos to the registry which were previously missing. [pr 877](https://github.com/Financial-Times/origami/pull/877)
|
|
189
187
|
|
|
190
188
|
### [5.3.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.3.0...o-topper-v5.3.1) (2022-09-01)
|
|
191
189
|
|
|
192
|
-
|
|
193
190
|
### Bug Fixes
|
|
194
191
|
|
|
195
|
-
|
|
192
|
+
- update n-map-content-to-topper to support alphaville article page branding
|
|
196
193
|
|
|
197
194
|
## [5.3.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.3...o-topper-v5.3.0) (2022-09-01)
|
|
198
195
|
|
|
199
|
-
|
|
200
196
|
### Features
|
|
201
197
|
|
|
202
|
-
|
|
198
|
+
- add mattisee o-topper colour for Alphaville
|
|
203
199
|
|
|
204
200
|
### [5.2.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.2...o-topper-v5.2.3) (2022-01-13)
|
|
205
201
|
|
|
206
|
-
|
|
207
202
|
### Bug Fixes
|
|
208
203
|
|
|
209
|
-
|
|
204
|
+
- expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
|
|
210
205
|
|
|
211
206
|
### [5.2.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.1...o-topper-v5.2.2) (2021-12-24)
|
|
212
207
|
|
|
213
|
-
|
|
214
208
|
### Bug Fixes
|
|
215
209
|
|
|
216
|
-
|
|
210
|
+
- Deprecate the `news-package` topper. This is no longer used. ([980fb8f](https://www.github.com/Financial-Times/origami/commit/980fb8fd9c315008622098913c56f4c85dd181fe))
|
|
217
211
|
|
|
218
212
|
### [5.2.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.0...o-topper-v5.2.1) (2021-12-14)
|
|
219
213
|
|
|
220
|
-
|
|
221
214
|
### Bug Fixes
|
|
222
215
|
|
|
223
|
-
|
|
216
|
+
- Deprecate the `news-package` topper. This is no longer used. ([e4ddf31](https://www.github.com/Financial-Times/origami/commit/e4ddf31ae78f99fe571f77b704fb9180d23504b2))
|
|
224
217
|
|
|
225
218
|
## [5.2.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.1.0...o-topper-v5.2.0) (2021-11-24)
|
|
226
219
|
|
|
227
|
-
|
|
228
220
|
### Features
|
|
229
221
|
|
|
230
|
-
|
|
222
|
+
- allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
|
|
231
223
|
|
|
232
224
|
## [5.1.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.0.2...o-topper-v5.1.0) (2021-11-08)
|
|
233
225
|
|
|
234
|
-
|
|
235
226
|
### Features
|
|
236
227
|
|
|
237
|
-
|
|
228
|
+
- Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
|
|
238
229
|
|
|
239
230
|
### [5.0.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.0.1...o-topper-v5.0.2) (2021-09-21)
|
|
240
231
|
|
|
241
|
-
|
|
242
232
|
### Bug Fixes
|
|
243
233
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
234
|
+
- Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
|
|
235
|
+
- update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
|
|
236
|
+
- update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
|
package/MIGRATION.md
CHANGED
|
@@ -1,4 +1,22 @@
|
|
|
1
1
|
# Migration guide
|
|
2
|
+
|
|
3
|
+
## Migrating from v6 to v7
|
|
4
|
+
|
|
5
|
+
This major release introduces a new design language and visually breaking changes. This includes mobile optimised typography, icons, and buttons. It also removes peer dependencies from deprecated "o2" components.
|
|
6
|
+
|
|
7
|
+
To upgrade, replace the following "o2" components with their "o3" equivalent:
|
|
8
|
+
|
|
9
|
+
- [o-normalise](../o-normalise/MIGRATION.md)
|
|
10
|
+
- [o-spacing](../o-spacing/MIGRATION.md)
|
|
11
|
+
- [o-colors](../o-colors/MIGRATION.md)
|
|
12
|
+
- [o-icons](../o-icons/MIGRATION.md)
|
|
13
|
+
- [o-buttons](../o-buttons/MIGRATION.md)
|
|
14
|
+
- [o-typography](../o-typography/MIGRATION.md)
|
|
15
|
+
- [o-editorial-typography](../o-editorial-typography/MIGRATION.md)
|
|
16
|
+
- [o-big-number](../o-big-number/MIGRATION.md)
|
|
17
|
+
- [o-quote](../o-quote/MIGRATION.md)
|
|
18
|
+
- [o-fonts](../o-fonts/MIGRATION.md)
|
|
19
|
+
|
|
2
20
|
## Migrating from v5 to v6
|
|
3
21
|
|
|
4
22
|
`o-topper` no longer includes JavaScript to select the correct topper for JSON-formatted FT articles and flags. This helper was deeply tied to the FT.com content store, and included hardcoded UUIDs and business logic beyond the scope of Origami. Origami components focus on providing reusable user interfaces – without business logic assumptions which could limit their use outside specific groups or use-cases.
|
|
@@ -10,6 +28,7 @@ To migrate, replace `o-topper` JavaScript with [`n-map-content-to-topper`](https
|
|
|
10
28
|
+import mapContentToTopper from '@financial-times/n-map-content-to-topper';
|
|
11
29
|
const topper = mapContentToTopper(ftArticle, flags);
|
|
12
30
|
```
|
|
31
|
+
|
|
13
32
|
## Migrating from v4 to v5
|
|
14
33
|
|
|
15
34
|
The velvet topper (previously used to indicate life and arts) has been removed.
|
|
@@ -89,8 +108,8 @@ All other mixins have been removed. Instead make a single `oTopper`, with releva
|
|
|
89
108
|
- `oTopperColors`
|
|
90
109
|
- `oTopperColor`
|
|
91
110
|
|
|
92
|
-
|
|
93
111
|
E.g to include all styles:
|
|
112
|
+
|
|
94
113
|
```diff
|
|
95
114
|
-$o-topper-is-silent: false;
|
|
96
115
|
-@import 'o-topper/main';
|
|
@@ -100,6 +119,7 @@ E.g to include all styles:
|
|
|
100
119
|
```
|
|
101
120
|
|
|
102
121
|
E.g to include only base styles and some themes:
|
|
122
|
+
|
|
103
123
|
```diff
|
|
104
124
|
-.o-topper--branded {
|
|
105
125
|
- @include _oTopperThemeBranded;
|
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# o-topper
|
|
2
2
|
|
|
3
3
|
This component is used for styling the topper sections of an article.
|
|
4
|
+
|
|
4
5
|
- [Usage](#usage)
|
|
5
6
|
- [Markup](#markup)
|
|
6
7
|
- [Sass](#sass)
|
|
@@ -17,15 +18,20 @@ Check out [how to include Origami components in your project](https://origami.ft
|
|
|
17
18
|
The basic markup structure for a topper will look something like this:
|
|
18
19
|
|
|
19
20
|
```html
|
|
20
|
-
<div class="o-topper o-topper--basic o-topper--color-paper">
|
|
21
|
+
<div class="o-topper o-topper--basic o-topper--color-o3-color-palette-paper">
|
|
21
22
|
<div class="o-topper__content">
|
|
22
23
|
<div class="o-topper__tags">
|
|
23
|
-
<a href="https://www.ft.com/german-election" class="o-topper__topic"
|
|
24
|
+
<a href="https://www.ft.com/german-election" class="o-topper__topic"
|
|
25
|
+
>German election</a
|
|
26
|
+
>
|
|
24
27
|
</div>
|
|
25
28
|
<h1 class="o-topper__headline">
|
|
26
29
|
Merkel reaches ‘grand coalition’ breakthrough with Social Democrats
|
|
27
30
|
</h1>
|
|
28
|
-
<div class="o-topper__standfirst">
|
|
31
|
+
<div class="o-topper__standfirst">
|
|
32
|
+
Move raises hopes of end to political deadlock that has gripped Germany
|
|
33
|
+
since September
|
|
34
|
+
</div>
|
|
29
35
|
</div>
|
|
30
36
|
|
|
31
37
|
<div class="o-topper__background"></div>
|
|
@@ -36,23 +42,23 @@ Toppers support a wide array of [elements](#supported-elements) and can be custo
|
|
|
36
42
|
|
|
37
43
|
### Supported elements
|
|
38
44
|
|
|
39
|
-
| Element | Use case
|
|
40
|
-
|
|
41
|
-
| `.o-topper__content` | Main content area of topper. Required parent of all elements except `__visual` and `__background`.
|
|
42
|
-
| `.o-topper__tags` | Wrapper element for the article concept tag elements `__brand`, `__topic` and `__opinion-genre`.
|
|
43
|
-
| `.o-topper__brand` | A concept tag that represents a brand, e.g. "The Big Read".
|
|
44
|
-
| `.o-topper__topic` | A concept tag that represents a topic or generic concept.
|
|
45
|
-
| `.o-topper__opinion-genre` | A concept tag that represents the abstract Opinion genre.
|
|
46
|
-
| `.o-topper__columnist` | Wrapper element for `__columnist-name`. Should be placed below the headline and standfirst.
|
|
47
|
-
| `.o-topper__columnist-name` | Represents the columnist that wrote an Opinion genre article.
|
|
48
|
-
| `.o-topper__headline` | The main headline of the article.
|
|
49
|
-
| `.o-topper__standfirst` | A short introduction to the article.
|
|
50
|
-
| `.o-topper__background` | Element used to display the editorially-chosen colored background of the topper. Must be empty.
|
|
51
|
-
| `.o-topper__visual` | Wrapper for the visual elements `__picture` and `__image`. Should be a `<figure>` tag.
|
|
52
|
-
| `.o-topper__picture` | A `<picture>` tag visual element.
|
|
53
|
-
| `.o-topper__image` | An `<img>` tag visual element, usually used as fallback for a `<picture>`.
|
|
45
|
+
| Element | Use case |
|
|
46
|
+
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| `.o-topper__content` | Main content area of topper. Required parent of all elements except `__visual` and `__background`. |
|
|
48
|
+
| `.o-topper__tags` | Wrapper element for the article concept tag elements `__brand`, `__topic` and `__opinion-genre`. |
|
|
49
|
+
| `.o-topper__brand` | A concept tag that represents a brand, e.g. "The Big Read". |
|
|
50
|
+
| `.o-topper__topic` | A concept tag that represents a topic or generic concept. |
|
|
51
|
+
| `.o-topper__opinion-genre` | A concept tag that represents the abstract Opinion genre. |
|
|
52
|
+
| `.o-topper__columnist` | Wrapper element for `__columnist-name`. Should be placed below the headline and standfirst. |
|
|
53
|
+
| `.o-topper__columnist-name` | Represents the columnist that wrote an Opinion genre article. |
|
|
54
|
+
| `.o-topper__headline` | The main headline of the article. |
|
|
55
|
+
| `.o-topper__standfirst` | A short introduction to the article. |
|
|
56
|
+
| `.o-topper__background` | Element used to display the editorially-chosen colored background of the topper. Must be empty. |
|
|
57
|
+
| `.o-topper__visual` | Wrapper for the visual elements `__picture` and `__image`. Should be a `<figure>` tag. |
|
|
58
|
+
| `.o-topper__picture` | A `<picture>` tag visual element. |
|
|
59
|
+
| `.o-topper__image` | An `<img>` tag visual element, usually used as fallback for a `<picture>`. |
|
|
54
60
|
| `.o-topper__image-credit` | Element showing credit/copyright for the `__picture` or `__image`, where no image caption is given. If an image caption is provided alongside credit/copyright information use `.o-topper__image-caption` instead. Should be a `<figcaption>` tag. |
|
|
55
|
-
| `.o-topper__image-caption`
|
|
61
|
+
| `.o-topper__image-caption` | Element showing caption and credit/copyright together for the `__picture` or `__image`. Should be a `<figcaption>` tag. |
|
|
56
62
|
|
|
57
63
|
### Themes
|
|
58
64
|
|
|
@@ -72,27 +78,27 @@ These themes affect the layout and visual style of all elements. See the [demos]
|
|
|
72
78
|
|
|
73
79
|
### Colors
|
|
74
80
|
|
|
75
|
-
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.
|
|
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.
|
|
76
82
|
|
|
77
83
|
```
|
|
78
|
-
.o-topper--color-paper
|
|
79
|
-
.o-topper--color-wheat
|
|
80
|
-
.o-topper--color-white
|
|
81
|
-
.o-topper--color-black
|
|
82
|
-
.o-topper--color-claret
|
|
83
|
-
.o-topper--color-oxford
|
|
84
|
-
.o-topper--color-slate
|
|
85
|
-
.o-topper--color-crimson
|
|
86
|
-
.o-topper--color-sky
|
|
87
|
-
.o-topper--color-matisse
|
|
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
|
|
88
94
|
```
|
|
89
95
|
|
|
90
96
|
### Modifiers
|
|
91
97
|
|
|
92
|
-
| Modifier
|
|
93
|
-
|
|
94
|
-
| `.o-topper__content--background-box`
|
|
95
|
-
|
|
|
98
|
+
| Modifier | Use case |
|
|
99
|
+
| ------------------------------------ | ------------------------------------------------------------------------------------------------- |
|
|
100
|
+
| `.o-topper__content--background-box` | Create a background box around the element `.o-topper__content`. The background colour of the box |
|
|
101
|
+
| | will be defined based on the background of the topper |
|
|
96
102
|
|
|
97
103
|
## Sass
|
|
98
104
|
|
|
@@ -106,66 +112,78 @@ To include all o-topper CSS include `oTopper`:
|
|
|
106
112
|
To include o-topper styles granularly specify which elements, themes, and colours to output styles for using the options `$opts` argument:
|
|
107
113
|
|
|
108
114
|
```scss
|
|
109
|
-
@include oTopper(
|
|
110
|
-
|
|
111
|
-
'
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
'
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
'
|
|
154
|
-
|
|
155
|
-
|
|
115
|
+
@include oTopper(
|
|
116
|
+
$opts: (
|
|
117
|
+
'themes': (
|
|
118
|
+
'branded',
|
|
119
|
+
// .o-topper--branded
|
|
120
|
+
'opinion',
|
|
121
|
+
// .o-topper--opinion
|
|
122
|
+
'has-headshot',
|
|
123
|
+
// .o-topper--has-headshot
|
|
124
|
+
'full-bleed-offset',
|
|
125
|
+
'split-text-left',
|
|
126
|
+
'split-text-center',
|
|
127
|
+
'full-bleed-image-center',
|
|
128
|
+
'full-bleed-image-left',
|
|
129
|
+
'package',
|
|
130
|
+
'package-extra',
|
|
131
|
+
'package-extra-wide',
|
|
132
|
+
'package-special-report',
|
|
133
|
+
'right-rail',
|
|
134
|
+
'centered',
|
|
135
|
+
'deep-landscape',
|
|
136
|
+
),
|
|
137
|
+
'elements': (
|
|
138
|
+
'content',
|
|
139
|
+
// .o-topper__content
|
|
140
|
+
'visual',
|
|
141
|
+
// .o-topper__visual
|
|
142
|
+
'background',
|
|
143
|
+
// .o-topper__background
|
|
144
|
+
'headline',
|
|
145
|
+
'headline--large',
|
|
146
|
+
'summary',
|
|
147
|
+
'standfirst',
|
|
148
|
+
'summary--body',
|
|
149
|
+
'tags',
|
|
150
|
+
'columnist',
|
|
151
|
+
'columnist-name',
|
|
152
|
+
'brand',
|
|
153
|
+
'topic',
|
|
154
|
+
'read-next',
|
|
155
|
+
'image',
|
|
156
|
+
'image-credit',
|
|
157
|
+
'image-caption',
|
|
158
|
+
),
|
|
159
|
+
'colors': (
|
|
160
|
+
'o3-color-palette-white',
|
|
161
|
+
// .o-topper--color-o3-color-palette-white
|
|
162
|
+
'o3-color-palette-black',
|
|
163
|
+
// .o-topper--color-o3-color-palette-black
|
|
164
|
+
'o3-color-palette-claret',
|
|
165
|
+
'o3-color-palette-oxford',
|
|
166
|
+
'o3-color-palette-paper',
|
|
167
|
+
'o3-color-palette-slate',
|
|
168
|
+
'o3-color-palette-wheat',
|
|
169
|
+
'o3-color-palette-crimson',
|
|
170
|
+
'o3-color-palette-sky',
|
|
171
|
+
),
|
|
156
172
|
)
|
|
157
|
-
)
|
|
173
|
+
);
|
|
158
174
|
```
|
|
175
|
+
|
|
159
176
|
## Migration
|
|
160
177
|
|
|
161
|
-
State
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
╳ deprecated |
|
|
166
|
-
╳ deprecated |
|
|
167
|
-
╳ deprecated |
|
|
168
|
-
╳ deprecated |
|
|
178
|
+
| State | Major Version | Last Minor Release | Migration guide |
|
|
179
|
+
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
|
|
180
|
+
| ⚠ maintained | 7 | N/A | [migrate to v7](MIGRATION.md#migrating-from-v6-to-v7) |
|
|
181
|
+
| ╳ deprecated | 6 | 6.0 | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
|
|
182
|
+
| ╳ deprecated | 5 | - | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
|
|
183
|
+
| ╳ deprecated | 4 | 4.0 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
|
|
184
|
+
| ╳ deprecated | 3 | 3.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
|
|
185
|
+
| ╳ deprecated | 2 | 2.7 | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
|
|
186
|
+
| ╳ deprecated | 1 | 1.2 | - |
|
|
169
187
|
|
|
170
188
|
## Contact
|
|
171
189
|
|
package/demos/src/basic.mustache
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="o-topper o-topper--basic o-topper--color-paper">
|
|
1
|
+
<div class="o-topper o-topper--basic o-topper--color-o3-color-palette-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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="o-topper o-topper--branded o-topper--color-wheat">
|
|
1
|
+
<div class="o-topper o-topper--branded o-topper--color-o3-color-palette-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">
|