@financial-times/o-topper 5.7.4 → 6.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/MIGRATION.md +10 -0
  3. package/README.md +12 -19
  4. package/demos/src/deep-landscape-left.mustache +80 -1
  5. package/package.json +1 -5
  6. package/src/scss/_mixins.scss +1 -1
  7. package/src/scss/themes/_deep-landscape.scss +5 -0
  8. package/main.js +0 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # Changelog
2
2
 
3
+ ## [6.0.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.8.0...o-topper-v6.0.0) (2023-03-07)
4
+
5
+
6
+ ### ⚠ BREAKING CHANGES
7
+
8
+ * o-topper, remove JS including `n-map-content-to-topper` dependency. (#1031)
9
+
10
+ ### Features
11
+
12
+ * 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))
13
+
14
+ ## [5.8.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.4...o-topper-v5.8.0) (2023-03-06)
15
+
16
+
17
+ ### Features
18
+
19
+ * Add a "deep landscape" o-topper variant with a background box behind content, for use on complex backgrounds where legibility is reduced.
20
+
3
21
  ### [5.7.4](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.3...o-topper-v5.7.4) (2023-02-08)
4
22
 
5
23
 
package/MIGRATION.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Migration guide
2
+ ## Migrating from v5 to v6
2
3
 
4
+ `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.
5
+
6
+ To migrate, replace `o-topper` JavaScript with [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper).
7
+
8
+ ```diff
9
+ -import { mapContentToTopper } from '@financial-times/o-topper';
10
+ +import mapContentToTopper from '@financial-times/n-map-content-to-topper';
11
+ const topper = mapContentToTopper(ftArticle, flags);
12
+ ```
3
13
  ## Migrating from v4 to v5
4
14
 
5
15
  The velvet topper (previously used to indicate life and arts) has been removed.
package/README.md CHANGED
@@ -4,7 +4,6 @@ This component is used for styling the topper sections of an article.
4
4
  - [Usage](#usage)
5
5
  - [Markup](#markup)
6
6
  - [Sass](#sass)
7
- - [JavaScript](#javascript)
8
7
  - [Migration](#migration)
9
8
  - [Contact](#contact)
10
9
  - [Licence](#licence)
@@ -68,6 +67,7 @@ These themes affect the layout and visual style of all elements. See the [demos]
68
67
  .o-topper--split-text-left
69
68
  .o-topper--split-text-center
70
69
  .o-topper--deep-landscape
70
+ .o-topper--deep-portrait
71
71
  ```
72
72
 
73
73
  ### Colors
@@ -87,6 +87,13 @@ These colors affect the background of the `.o-topper__background` and `.o-topper
87
87
  .o-topper--color-matisse
88
88
  ```
89
89
 
90
+ ### Modifiers
91
+
92
+ | Modifier | Use case |
93
+ |-----------------------------------------|----------------------------------------------------------------------------------------------------|
94
+ | `.o-topper__content--background-box` | Create a background box around the element `.o-topper__content`. The background colour of the box |
95
+ | | will be defined based on the background of the topper |
96
+
90
97
  ## Sass
91
98
 
92
99
  To include all o-topper CSS include `oTopper`:
@@ -149,28 +156,14 @@ To include o-topper styles granularly specify which elements, themes, and colour
149
156
  )
150
157
  ));
151
158
  ```
152
-
153
- ## JavaScript
154
-
155
- ### Mapping Content to Topper
156
-
157
- This component exports a JavaScript helper from [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper). Use this helper to select the correct topper for an article given a JSON-formatteed FT article and flags.
158
-
159
- **Note:** This helper is deeply tied to the FT.com content store, and includes hardcoded UUIDs and business logic.
160
-
161
- ```js
162
- import { mapContentToTopper } from '@financial-times/o-topper';
163
-
164
- const topper = mapContentToTopper(ftArticle, flags);
165
- ```
166
-
167
159
  ## Migration
168
160
 
169
161
  State | Major Version | Last Minor Release | Migration guide |
170
162
  :---: | :---: | :---: | :---:
171
- ✨ active | 5 | N/A | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
172
- ⚠ maintained | 4 | 4.0 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
173
- ⚠ maintained | 3 | 3.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
163
+ ✨ active | 6 | N/A | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
164
+ ⚠ maintained | 5 | N/A | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
165
+ ╳ deprecated | 4 | 4.0 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
166
+ ╳ deprecated | 3 | 3.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
174
167
  ╳ deprecated | 2 | 2.7 | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
175
168
  ╳ deprecated | 1 | 1.2 | - |
176
169
 
package/demos/src/deep-landscape-left.mustache CHANGED
@@ -1,3 +1,6 @@
1
+ <h2>
2
+ Text Shadow + Slate background
3
+ </h2>
1
4
  <div class="o-topper o-topper--deep-landscape o-topper--color-slate">
2
5
  <div class="o-topper__content o-topper__content--text-shadow">
3
6
  <div class="o-topper__tags">
@@ -19,6 +22,82 @@
19
22
  <source media="(min-width: 1441px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/6f323aa7-692e-4b0d-a3e2-ee1c708bdf72.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/dc1370be-2472-44af-89e3-3dde23ad2f34.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=2 2x">
20
23
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/6f323aa7-692e-4b0d-a3e2-ee1c708bdf72.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
21
24
  </picture>
22
- <figcaption class="o-topper__image-caption">S @FT</figcaption>
25
+ <figcaption class="o-topper__image-credit">S @FT</figcaption>
23
26
  </figure>
24
27
  </div>
28
+
29
+ <h2>Background Box + Slate background</h2>
30
+
31
+ <div class="o-topper o-topper--deep-landscape o-topper--color-slate">
32
+ <div class="o-topper__content o-topper__content--background-box">
33
+ <div class="o-topper__tags">
34
+ <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
35
+ </div>
36
+ <h1 class="o-topper__headline o-topper__headline--large" data-trackable="header">
37
+ <span class="article-classifier__gap">Feeling the strain: stress and anxiety weigh on world’s workers</span>
38
+ </h1>
39
+ <div class="o-topper__standfirst">Henry Marsh and Stephen Westaby on ‘100 per cent mortality’, the embattled NHS and why self-deception is a clinical skill</div>
40
+ </div>
41
+
42
+ <div class="o-topper__background"></div>
43
+
44
+ <figure class="o-topper__visual">
45
+ <picture class="o-topper__picture">
46
+ <source media="(min-width: 491px) and (max-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f7f44900-0eaf-4b3c-ba74-cd6f893ffd0b.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1220&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f7f44900-0eaf-4b3c-ba74-cd6f893ffd0b.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1220&amp;dpr=2 2x">
47
+ <source media="(max-width: 490px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/3408836a-5079-4a4c-9b19-ad54d18aa5d1.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/3408836a-5079-4a4c-9b19-ad54d18aa5d1.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490&amp;dpr=2 2x">
48
+ <source media="(min-width: 1221px) and (max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/dc1370be-2472-44af-89e3-3dde23ad2f34.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/dc1370be-2472-44af-89e3-3dde23ad2f34.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440&amp;dpr=2 2x">
49
+ <source media="(min-width: 1441px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/6f323aa7-692e-4b0d-a3e2-ee1c708bdf72.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/dc1370be-2472-44af-89e3-3dde23ad2f34.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=2 2x">
50
+ <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/6f323aa7-692e-4b0d-a3e2-ee1c708bdf72.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
51
+ </picture>
52
+ <figcaption class="o-topper__image-credit">S @FT</figcaption>
53
+ </figure>
54
+ </div>
55
+
56
+ <h2>White background</h2>
57
+
58
+ <div class="o-topper o-topper--deep-landscape o-topper--color-white">
59
+ <div class="o-topper__content">
60
+ <div class="o-topper__tags">
61
+ <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
62
+ </div>
63
+ <h1 class="o-topper__headline o-topper__headline--large" data-trackable="header">
64
+ <span class="article-classifier__gap">Feeling the strain: stress and anxiety weigh on world’s workers</span>
65
+ </h1>
66
+ <div class="o-topper__standfirst">Henry Marsh and Stephen Westaby on ‘100 per cent mortality’, the embattled NHS and why self-deception is a clinical skill</div>
67
+ </div>
68
+
69
+ <div class="o-topper__background"></div>
70
+
71
+ <figure class="o-topper__visual">
72
+ <picture class="o-topper__picture"><source media="(min-width: 981px) and (max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/357e5a48-a1e5-47d6-9eed-2db9537f2c1f.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/357e5a48-a1e5-47d6-9eed-2db9537f2c1f.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440&amp;dpr=2 2x"><source media="(min-width: 1441px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/357e5a48-a1e5-47d6-9eed-2db9537f2c1f.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/357e5a48-a1e5-47d6-9eed-2db9537f2c1f.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=2 2x"><source media="(max-width: 490px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f88eea18-54f1-4d59-9b7f-2672c42e3be5.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f88eea18-54f1-4d59-9b7f-2672c42e3be5.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490&amp;dpr=2 2x"><source media="(min-width: 491px) and (max-width: 980px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f88eea18-54f1-4d59-9b7f-2672c42e3be5.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=980&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f88eea18-54f1-4d59-9b7f-2672c42e3be5.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=980&amp;dpr=2 2x"><img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/357e5a48-a1e5-47d6-9eed-2db9537f2c1f.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440"></picture>
73
+ <figcaption class="o-topper__image-credit">S @FT</figcaption>
74
+ </figure>
75
+ </div>
76
+
77
+ <h2>Background Box + White background</h2>
78
+
79
+ <div class="o-topper o-topper--deep-landscape o-topper--color-white">
80
+ <div class="o-topper__content o-topper__content--text-shadow o-topper__content--background-box">
81
+ <div class="o-topper__tags">
82
+ <a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
83
+ </div>
84
+ <h1 class="o-topper__headline o-topper__headline--large" data-trackable="header">
85
+ <span class="article-classifier__gap">Feeling the strain: stress and anxiety weigh on world’s workers</span>
86
+ </h1>
87
+ <div class="o-topper__standfirst">Henry Marsh and Stephen Westaby on ‘100 per cent mortality’, the embattled NHS and why self-deception is a clinical skill</div>
88
+ </div>
89
+
90
+ <div class="o-topper__background"></div>
91
+
92
+ <figure class="o-topper__visual">
93
+ <picture class="o-topper__picture">
94
+ <source media="(min-width: 491px) and (max-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f7f44900-0eaf-4b3c-ba74-cd6f893ffd0b.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1220&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/f7f44900-0eaf-4b3c-ba74-cd6f893ffd0b.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1220&amp;dpr=2 2x">
95
+ <source media="(max-width: 490px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/3408836a-5079-4a4c-9b19-ad54d18aa5d1.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/3408836a-5079-4a4c-9b19-ad54d18aa5d1.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490&amp;dpr=2 2x">
96
+ <source media="(min-width: 1221px) and (max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/dc1370be-2472-44af-89e3-3dde23ad2f34.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/dc1370be-2472-44af-89e3-3dde23ad2f34.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440&amp;dpr=2 2x">
97
+ <source media="(min-width: 1441px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/6f323aa7-692e-4b0d-a3e2-ee1c708bdf72.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=1 1x, https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/dc1370be-2472-44af-89e3-3dde23ad2f34.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1920&amp;dpr=2 2x">
98
+ <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/6f323aa7-692e-4b0d-a3e2-ee1c708bdf72.jpg?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
99
+ </picture>
100
+ <figcaption class="o-topper__image-credit">S @FT</figcaption>
101
+ </figure>
102
+ </div>
103
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-topper",
3
- "version": "5.7.4",
3
+ "version": "6.0.0",
4
4
  "description": "Article header styling",
5
5
  "keywords": [
6
6
  "topper",
@@ -13,7 +13,6 @@
13
13
  },
14
14
  "license": "MIT",
15
15
  "type": "module",
16
- "browser": "main.js",
17
16
  "scripts": {
18
17
  "start": "npx serve ./demos/local",
19
18
  "build": "bash ../../scripts/component/build.bash",
@@ -35,9 +34,6 @@
35
34
  "@financial-times/o-normalise": "^3.3.0",
36
35
  "@financial-times/o-typography": "^7.2.0"
37
36
  },
38
- "dependencies": {
39
- "@financial-times/n-map-content-to-topper": "^3.2.0"
40
- },
41
37
  "engines": {
42
38
  "npm": "^7 || ^8"
43
39
  },
package/src/scss/_mixins.scss CHANGED
@@ -164,7 +164,7 @@
164
164
  .o-topper__headline--large {
165
165
  @include oEditorialTypographyHeadline();
166
166
  position: relative; //so it appears above the full width background
167
- margin-bottom: oSpacingByIncrement(7);
167
+ margin-bottom: oSpacingByIncrement(4);
168
168
  }
169
169
  }
170
170
 
package/src/scss/themes/_deep-landscape.scss CHANGED
@@ -32,6 +32,11 @@
32
32
  text-shadow: 2px 3px 4px rgba(18,18,18,0.4);
33
33
  }
34
34
  }
35
+ .o-topper__content--background-box {
36
+ padding: oSpacingByName('s4');
37
+ margin-bottom: oSpacingByName('s6');
38
+ background-color: if($foreground == white, rgb(18,18,18,0.4), rgb(255,255,255,0.4));
39
+ }
35
40
  }
36
41
  }
37
42
 
package/main.js DELETED
@@ -1,3 +0,0 @@
1
- import mapContentToTopper from '@financial-times/n-map-content-to-topper';
2
-
3
- export default mapContentToTopper;