@financial-times/o-teaser 6.4.0 → 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.
Files changed (24) hide show
  1. package/CHANGELOG.md +50 -36
  2. package/MIGRATION.md +20 -1
  3. package/README.md +35 -21
  4. package/demos/src/demo.scss +21 -4
  5. package/main.scss +28 -30
  6. package/package.json +44 -47
  7. package/src/scss/_mixins.scss +4 -5
  8. package/src/scss/_variables.scss +3 -3
  9. package/src/scss/elements/_default.scss +35 -13
  10. package/src/scss/elements/_promoted.scss +11 -5
  11. package/src/scss/elements/_related-items.scss +19 -8
  12. package/src/scss/elements/_syndication.scss +9 -9
  13. package/src/scss/elements/_timestamp.scss +48 -10
  14. package/src/scss/themes/_audio.scss +5 -5
  15. package/src/scss/themes/_hero.scss +61 -30
  16. package/src/scss/themes/_large.scss +36 -24
  17. package/src/scss/themes/_live.scss +2 -2
  18. package/src/scss/themes/_package.scss +86 -37
  19. package/src/scss/themes/_small.scss +35 -32
  20. package/src/scss/themes/_standard.scss +18 -17
  21. package/src/scss/themes/_top-stories.scss +20 -8
  22. package/src/scss/themes/_video.scss +8 -8
  23. package/src/scss/_color-use-cases.scss +0 -68
  24. package/src/scss/_deprecated.scss +0 -65
package/CHANGELOG.md CHANGED
@@ -1,115 +1,129 @@
1
1
  # Changelog
2
2
 
3
- ## [6.4.0](https://github.com/Financial-Times/origami/compare/o-teaser-v6.3.0...o-teaser-v6.4.0) (2024-04-03)
3
+ ## [7.0.0](https://github.com/Financial-Times/origami/compare/o-teaser-v6.4.1...o-teaser-v7.0.0) (2025-02-20)
4
4
 
5
+ ### ⚠ BREAKING CHANGES
5
6
 
6
- ### Features
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)
7
20
 
8
- * add post modifier to teaser ([f4e0ffe](https://github.com/Financial-Times/origami/commit/f4e0ffe8d9d3f78b974a9cce1d816e0e1e4243c9))
21
+ #### Origami 3: Engineers’ Deep Dive
9
22
 
23
+ We got into the technical detail. Working with Origami CSS (no more Sass), custom elements, JSX templates, etc.
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.4.1](https://github.com/Financial-Times/origami/compare/o-teaser-v6.4.0...o-teaser-v6.4.1) (2024-04-15)
10
28
 
11
29
  ### Bug Fixes
12
30
 
13
- * fix lint ([469b08b](https://github.com/Financial-Times/origami/commit/469b08b5338e99af1e3ac6648ff640b08a3096a1))
31
+ - remove background color sky when opinoion on teaser with post modifier ([6cc7cd8](https://github.com/Financial-Times/origami/commit/6cc7cd8769cde60a66a6f8676121996524039076))
14
32
 
15
- ## [6.3.0](https://github.com/Financial-Times/origami/compare/o-teaser-v6.2.10...o-teaser-v6.3.0) (2024-03-18)
33
+ ## [6.4.0](https://github.com/Financial-Times/origami/compare/o-teaser-v6.3.0...o-teaser-v6.4.0) (2024-04-03)
34
+
35
+ ### Features
36
+
37
+ - add post modifier to teaser ([f4e0ffe](https://github.com/Financial-Times/origami/commit/f4e0ffe8d9d3f78b974a9cce1d816e0e1e4243c9))
38
+
39
+ ### Bug Fixes
40
+
41
+ - fix lint ([469b08b](https://github.com/Financial-Times/origami/commit/469b08b5338e99af1e3ac6648ff640b08a3096a1))
16
42
 
43
+ ## [6.3.0](https://github.com/Financial-Times/origami/compare/o-teaser-v6.2.10...o-teaser-v6.3.0) (2024-03-18)
17
44
 
18
45
  ### Features
19
46
 
20
- * increase teaser margin size for improved tapability ([c67c01d](https://github.com/Financial-Times/origami/commit/c67c01d55bd426ead426e2acc64cd97c15ef782c))
47
+ - increase teaser margin size for improved tapability ([c67c01d](https://github.com/Financial-Times/origami/commit/c67c01d55bd426ead426e2acc64cd97c15ef782c))
21
48
 
22
49
  ## [6.2.10](https://github.com/Financial-Times/origami/compare/o-teaser-v6.2.9...o-teaser-v6.2.10) (2023-11-09)
23
50
 
24
-
25
51
  ### Bug Fixes
26
52
 
27
- * update o-teaser tsx templates to use date-fns version 2 ([#1331](https://github.com/Financial-Times/origami/issues/1331)) ([c53316b](https://github.com/Financial-Times/origami/commit/c53316ba964378d4f9077e2250fc73b40e9d2ab7))
53
+ - update o-teaser tsx templates to use date-fns version 2 ([#1331](https://github.com/Financial-Times/origami/issues/1331)) ([c53316b](https://github.com/Financial-Times/origami/commit/c53316ba964378d4f9077e2250fc73b40e9d2ab7))
28
54
 
29
55
  ## [6.2.9](https://github.com/Financial-Times/origami/compare/o-teaser-v6.2.8...o-teaser-v6.2.9) (2023-10-27)
30
56
 
31
-
32
57
  ### Bug Fixes
33
58
 
34
- * Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
59
+ - Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
35
60
 
36
61
  ## [6.2.8](https://github.com/Financial-Times/origami/compare/o-teaser-v6.2.7...o-teaser-v6.2.8) (2023-08-25)
37
62
 
38
-
39
63
  ### Bug Fixes
40
64
 
41
- * update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
65
+ - update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
42
66
 
43
67
  ### [6.2.7](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.2.6...o-teaser-v6.2.7) (2023-04-28)
44
68
 
45
-
46
69
  ### Bug Fixes
47
70
 
48
- * 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))
71
+ - 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))
49
72
 
50
73
  ### [6.2.6](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.2.5...o-teaser-v6.2.6) (2023-03-23)
51
74
 
52
-
53
75
  ### Bug Fixes
54
76
 
55
- * o-teaser, update demo o-date dependnecy ([47cdd03](https://www.github.com/Financial-Times/origami/commit/47cdd033b5c311aeadf9e9744d7e25982a7a7a0c))
77
+ - o-teaser, update demo o-date dependnecy ([47cdd03](https://www.github.com/Financial-Times/origami/commit/47cdd033b5c311aeadf9e9744d7e25982a7a7a0c))
56
78
 
57
79
  ### [6.2.5](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.2.4...o-teaser-v6.2.5) (2023-01-20)
58
80
 
59
-
60
81
  ### Bug Fixes
61
82
 
62
- * ensure components depend on the latest o-normalise version ([e910236](https://www.github.com/Financial-Times/origami/commit/e910236454318ce1bf198a06da7e76c0893c9142))
83
+ - ensure components depend on the latest o-normalise version ([e910236](https://www.github.com/Financial-Times/origami/commit/e910236454318ce1bf198a06da7e76c0893c9142))
63
84
 
64
85
  ### [6.2.4](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.2.3...o-teaser-v6.2.4) (2022-12-21)
65
86
 
66
-
67
87
  ### Bug Fixes
68
88
 
69
- * o-teaser, image hero meta contrast ([6b39c4e](https://www.github.com/Financial-Times/origami/commit/6b39c4e2ef3e2765510468bd37d6ad6b26a56908))
70
- * require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
89
+ - o-teaser, image hero meta contrast ([6b39c4e](https://www.github.com/Financial-Times/origami/commit/6b39c4e2ef3e2765510468bd37d6ad6b26a56908))
90
+ - require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
71
91
 
72
92
  ### [6.2.3](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.2.2...o-teaser-v6.2.3) (2022-12-15)
73
93
 
74
-
75
94
  ### Bug Fixes
76
95
 
77
- * o-teaser, update demos to show focus states ([c0b0454](https://www.github.com/Financial-Times/origami/commit/c0b045475dbac8a2b89a4b496d9785b06bc74ebf))
96
+ - o-teaser, update demos to show focus states ([c0b0454](https://www.github.com/Financial-Times/origami/commit/c0b045475dbac8a2b89a4b496d9785b06bc74ebf))
78
97
 
79
98
  ### [6.2.2](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.2.1...o-teaser-v6.2.2) (2022-01-13)
80
99
 
81
-
82
100
  ### Bug Fixes
83
101
 
84
- * expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
102
+ - expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
85
103
 
86
104
  ### [6.2.1](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.2.0...o-teaser-v6.2.1) (2021-12-24)
87
105
 
88
-
89
106
  ### Bug Fixes
90
107
 
91
- * only output the o-teaser__tag link if a tag exists ([1ffadca](https://www.github.com/Financial-Times/origami/commit/1ffadca7d12f753cf949a935ced0ee0969703446))
92
- * run o-date in the demos to give the teasers a relative time ([9709af5](https://www.github.com/Financial-Times/origami/commit/9709af5472ea919c89a9311d4efe6183430e8864))
108
+ - only output the o-teaser\_\_tag link if a tag exists ([1ffadca](https://www.github.com/Financial-Times/origami/commit/1ffadca7d12f753cf949a935ced0ee0969703446))
109
+ - run o-date in the demos to give the teasers a relative time ([9709af5](https://www.github.com/Financial-Times/origami/commit/9709af5472ea919c89a9311d4efe6183430e8864))
93
110
 
94
111
  ## [6.2.0](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.1.0...o-teaser-v6.2.0) (2021-11-24)
95
112
 
96
-
97
113
  ### Features
98
114
 
99
- * allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
115
+ - allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
100
116
 
101
117
  ## [6.1.0](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.0.3...o-teaser-v6.1.0) (2021-11-08)
102
118
 
103
-
104
119
  ### Features
105
120
 
106
- * Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
121
+ - Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
107
122
 
108
123
  ### [6.0.3](https://www.github.com/Financial-Times/origami/compare/o-teaser-v6.0.2...o-teaser-v6.0.3) (2021-09-21)
109
124
 
110
-
111
125
  ### Bug Fixes
112
126
 
113
- * Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
114
- * update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
115
- * update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
127
+ - Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
128
+ - update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
129
+ - update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
package/MIGRATION.md CHANGED
@@ -1,10 +1,27 @@
1
1
  # Migration guide
2
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
+
3
20
  ## Migrating from v5 to v6
4
21
 
5
22
  v6 drops support for Bower and version 2 of the Origami Build Service.
6
23
 
7
- Follow [the migration guide on the Origami website](https://origami.ft.com/documentation/tutorials/bower-to-npm/).
24
+ Follow [the migration guide on the Origami website](https://origami.ft.com/documentation/tutorials/bower-to-npm/).
8
25
 
9
26
  ## Migrating from v4 to v5
10
27
 
@@ -15,6 +32,7 @@ v5 introduces the font FinancierDisplayWeb at medium weight and normal style. To
15
32
  ### Colours and Colour Usecases
16
33
 
17
34
  All [o-teaser colours and colour usecases](https://github.com/Financial-Times/o-teaser/blob/v3.5.9/src/scss/_color-use-cases.scss) have been renamed to include an o-colors namespace. For example:
35
+
18
36
  - `o-teaser` is now `o-teaser/base`
19
37
  - `fast-ft` is now `o-teaser/fast-ft`
20
38
  - `o-teaser-tag` is now `o-teaser/tag`
@@ -33,6 +51,7 @@ The deprecated `o-teaser-promoted-prefix` usecase has been removed. Include [o-l
33
51
  ### Markup
34
52
 
35
53
  Deprecated classes have been removed:
54
+
36
55
  - Replace `o-teaser--big-video` with `o-teaser--has-video`
37
56
  - Replace `o-teaser__duration` with `o-teaser__tag-suffix`
38
57
 
package/README.md CHANGED
@@ -26,9 +26,16 @@ The basic markup structure for a teaser will look something like this:
26
26
  <div class="o-teaser o-teaser--small">
27
27
  <div class="o-teaser__content">
28
28
  <a href="#" class="o-teaser__tag">World</a>
29
- <h2 class="o-teaser__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>
29
+ <h2 class="o-teaser__heading">
30
+ <a href="#">Japan sells negative yield 10-year bonds</a>
31
+ </h2>
30
32
  <div class="o-teaser__timestamp">
31
- <time data-o-component="o-date" class="o-teaser__timestamp-date" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
33
+ <time
34
+ data-o-component="o-date"
35
+ class="o-teaser__timestamp-date"
36
+ datetime="2016-02-29T12:35:48Z"
37
+ >2016-02-29T12:35:48Z</time
38
+ >
32
39
  </div>
33
40
  </div>
34
41
  </div>
@@ -38,14 +45,13 @@ Optionally include the [o-date](https://registry.origami.ft.com/components/o-dat
38
45
 
39
46
  Teasers support a wide array of [elements](#supported-elements) and can be customised using several [themes](#themes) and should be used as required. For a full list of examples including example markup, see [o-teaser in the Registry](http://registry.origami.ft.com/components/o-teaser).
40
47
 
41
-
42
48
  ### Images
43
49
 
44
50
  To add an image to a teaser, you should use the following markup structure:
45
51
 
46
52
  ```html
47
53
  <div class="o-teaser__image-container">
48
- <img src="{image-src}" class="o-teaser__image" alt="{alt text}"/>
54
+ <img src="{image-src}" class="o-teaser__image" alt="{alt text}" />
49
55
  </div>
50
56
  ```
51
57
 
@@ -54,12 +60,11 @@ To support lazy-loading of images you can use the `o-teaser__image-placeholder`
54
60
  ```html
55
61
  <div class="o-teaser__image-container">
56
62
  <div class="o-teaser__image-placeholder">
57
- <img src="{image-src}" class="o-teaser__image" alt="{alt text}"/>
63
+ <img src="{image-src}" class="o-teaser__image" alt="{alt text}" />
58
64
  </div>
59
65
  </div>
60
66
  ```
61
67
 
62
-
63
68
  ### Supported elements
64
69
 
65
70
  The following elements are supported by default:
@@ -78,10 +83,10 @@ The following elements are supported by default:
78
83
  .o-teaser__related-item # A single item of a related content list
79
84
  ```
80
85
 
81
-
82
86
  ## Sass
83
87
 
84
88
  To include styles for all teasers call `oTeaser`:
89
+
85
90
  ```scss
86
91
  @import '@financial-times/o-teaser/main';
87
92
 
@@ -91,10 +96,19 @@ To include styles for all teasers call `oTeaser`:
91
96
  Teasers are made up of various elements (e.g. heading, standfirst, timestamp) and a series of themes (e.g. small, large, video). Pass a list of `elements` and `themes` in an options `$opts` argument to include only the styles you need:
92
97
 
93
98
  ```scss
94
- @include oTeaser($opts:(
95
- 'elements': ('default', 'images'),
96
- 'themes': ('small', 'large', 'video')
97
- ));
99
+ @include oTeaser(
100
+ $opts: (
101
+ 'elements': (
102
+ 'default',
103
+ 'images',
104
+ ),
105
+ 'themes': (
106
+ 'small',
107
+ 'large',
108
+ 'video',
109
+ ),
110
+ )
111
+ );
98
112
  ```
99
113
 
100
114
  Elements are specified via groups, they include:
@@ -168,23 +182,23 @@ Uses the `o-teaser--audio` modifier.
168
182
 
169
183
  [View example on the Registry](http://registry.origami.ft.com/components/o-teaser#demo-audio)
170
184
 
171
-
172
185
  ## Migration guide
173
186
 
174
- State | Major Version | Last Minor Release | Migration guide |
175
- :---: | :---: | :---: | :---:
176
- ✨ active | 6 | N/A | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
177
- ⚠ maintained | 5 | 5.2 | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
178
- ╳ deprecated | 4 | 4.0 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
179
- ╳ deprecated | 3 | 3.5 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
180
- ╳ deprecated | 2 | 2.5 | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
181
- ╳ deprecated | 1 | 1.9 | - |
187
+ | State | Major Version | Last Minor Release | Migration guide |
188
+ | :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
189
+ | ⚠ maintained | 7 | N/A | [migrate to v7](MIGRATION.md#migrating-from-v6-to-v7) |
190
+ | ╳ deprecated | 6 | 6.4 | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
191
+ | ╳ deprecated | 5 | 5.2 | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
192
+ | ╳ deprecated | 4 | 4.0 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
193
+ | ╳ deprecated | 3 | 3.5 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
194
+ | ╳ deprecated | 2 | 2.5 | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
195
+ | ╳ deprecated | 1 | 1.9 | - |
182
196
 
183
197
  ## Contact
184
198
 
185
199
  If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-teaser/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).
186
200
 
187
- ***
201
+ ---
188
202
 
189
203
  ## Licence
190
204
 
package/demos/src/demo.scss CHANGED
@@ -1,7 +1,8 @@
1
+ @import '@financial-times/o-normalise/main';
1
2
  @import '../../main';
3
+ @import '@financial-times/o-colors/main';
2
4
 
3
5
  @include oNormalise();
4
- @include oFonts();
5
6
  @include oTeaser();
6
7
 
7
8
  body {
@@ -9,15 +10,31 @@ body {
9
10
  }
10
11
 
11
12
  .demo-container {
12
- @include oGridColspan((default: 12, M: 6, XL: 4));
13
+ @include oPrivateGridColspan(
14
+ (
15
+ default: 12,
16
+ M: 6,
17
+ XL: 4,
18
+ )
19
+ );
13
20
  width: 100%;
14
21
  padding: 20px;
15
22
 
16
23
  &--large {
17
- @include oGridColspan((default: 12, L: 4));
24
+ @include oPrivateGridColspan(
25
+ (
26
+ default: 12,
27
+ L: 4,
28
+ )
29
+ );
18
30
 
19
31
  &.demo-container--top-story {
20
- @include oGridColspan((default: 12, L: 12));
32
+ @include oPrivateGridColspan(
33
+ (
34
+ default: 12,
35
+ L: 12,
36
+ )
37
+ );
21
38
  }
22
39
  }
23
40
 
package/main.scss CHANGED
@@ -1,39 +1,37 @@
1
- @import "@financial-times/o-spacing/main";
2
- @import "@financial-times/o-colors/main";
3
- @import "@financial-times/o-grid/main";
4
- @import "@financial-times/o-icons/main";
5
- @import "@financial-times/o-typography/main";
6
- @import "@financial-times/o-labels/main";
7
- @import "@financial-times/o-normalise/main";
1
+ @import '@financial-times/o-private-foundation/main';
2
+ @import '@financial-times/o-icons/main';
3
+ @import '@financial-times/o-labels/main';
8
4
 
9
- @import "src/scss/color-use-cases";
10
- @import "src/scss/variables";
11
- @import "src/scss/mixins";
12
- @import "src/scss/deprecated";
5
+ @import 'src/scss/variables';
6
+ @import 'src/scss/mixins';
13
7
 
14
- @import "src/scss/elements/default";
15
- @import "src/scss/elements/images";
16
- @import "src/scss/elements/promoted";
17
- @import "src/scss/elements/related-items";
18
- @import "src/scss/elements/timestamp";
19
- @import "src/scss/elements/syndication";
20
- @import "src/scss/themes/small";
21
- @import "src/scss/themes/large";
22
- @import "src/scss/themes/audio";
23
- @import "src/scss/themes/video";
24
- @import "src/scss/themes/standard";
25
- @import "src/scss/themes/hero";
26
- @import "src/scss/themes/top-stories";
27
- @import "src/scss/themes/package";
28
- @import "src/scss/themes/live";
8
+ @import 'src/scss/elements/default';
9
+ @import 'src/scss/elements/images';
10
+ @import 'src/scss/elements/promoted';
11
+ @import 'src/scss/elements/related-items';
12
+ @import 'src/scss/elements/timestamp';
13
+ @import 'src/scss/elements/syndication';
14
+ @import 'src/scss/themes/small';
15
+ @import 'src/scss/themes/large';
16
+ @import 'src/scss/themes/audio';
17
+ @import 'src/scss/themes/video';
18
+ @import 'src/scss/themes/standard';
19
+ @import 'src/scss/themes/hero';
20
+ @import 'src/scss/themes/top-stories';
21
+ @import 'src/scss/themes/package';
22
+ @import 'src/scss/themes/live';
29
23
 
30
24
  /// Output all styles for teasers.
31
25
  ///
32
26
  /// @param {Map} $opts [all] - A map of teaser options. Includes an 'elements' key, to list which teaser elements will be used; and a 'themes' key, to list whilst themes will be used to modify the included teaser elements.
33
- @mixin oTeaser($opts: (
34
- 'elements': $_o-teaser-elements,
35
- 'themes': $_o-teaser-themes
36
- )) {
27
+ @mixin oTeaser(
28
+ $opts: (
29
+ 'elements': $_o-teaser-elements,
30
+ 'themes': $_o-teaser-themes,
31
+ )
32
+ ) {
33
+ @include oPrivateFoundation();
34
+
37
35
  $elements: map-get($opts, 'elements');
38
36
  $elements: if($elements, $elements, ());
39
37
 
package/package.json CHANGED
@@ -1,49 +1,46 @@
1
1
  {
2
- "name": "@financial-times/o-teaser",
3
- "version": "6.4.0",
4
- "description": "Provides styling for teaser elements, which contain information about an article and link through to it",
5
- "keywords": [
6
- "article",
7
- "teaser",
8
- "card",
9
- "link"
10
- ],
11
- "homepage": "https://registry.origami.ft.com/components/o-teaser",
12
- "bugs": {
13
- "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-teaser,components",
14
- "email": "origami.support@ft.com"
15
- },
16
- "license": "MIT",
17
- "type": "module",
18
- "scripts": {
19
- "start": "npx serve ./demos/local",
20
- "build": "bash ../../scripts/component/build.bash",
21
- "test": "bash ../../scripts/component/test.bash",
22
- "debug:js": "bash ../../scripts/component/debug-js.bash",
23
- "lint": "bash ../../scripts/component/lint.bash",
24
- "watch": "bash ../../scripts/component/watch.bash"
25
- },
26
- "peerDependencies": {
27
- "@financial-times/o-colors": "^6.5.0",
28
- "@financial-times/o-grid": "^6.0.0",
29
- "@financial-times/o-icons": "^7.0.1",
30
- "@financial-times/o-labels": "^6.0.0",
31
- "@financial-times/o-normalise": "^3.3.0",
32
- "@financial-times/o-spacing": "^3.0.0",
33
- "@financial-times/o-typography": "^7.4.1"
34
- },
35
- "devDependencies": {
36
- "@financial-times/o-date": "^6.0.0",
37
- "@financial-times/o-normalise": "^3.3.0"
38
- },
39
- "engines": {
40
- "npm": ">7"
41
- },
42
- "private": false,
43
- "dependencies": {
44
- "date-fns": "^2.30.0",
45
- "dateformat": "^3.0.3",
46
- "dompurify": "^2.3.9",
47
- "html-react-parser": "^3.0.1"
48
- }
2
+ "name": "@financial-times/o-teaser",
3
+ "version": "7.0.0",
4
+ "description": "Provides styling for teaser elements, which contain information about an article and link through to it",
5
+ "keywords": [
6
+ "article",
7
+ "teaser",
8
+ "card",
9
+ "link"
10
+ ],
11
+ "homepage": "https://registry.origami.ft.com/components/o-teaser",
12
+ "bugs": {
13
+ "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-teaser,components",
14
+ "email": "origami.support@ft.com"
15
+ },
16
+ "license": "MIT",
17
+ "type": "module",
18
+ "scripts": {
19
+ "start": "npx serve ./demos/local",
20
+ "build": "bash ../../scripts/component/build.bash",
21
+ "test": "bash ../../scripts/component/test.bash",
22
+ "debug:js": "bash ../../scripts/component/debug-js.bash",
23
+ "lint": "bash ../../scripts/component/lint.bash",
24
+ "watch": "bash ../../scripts/component/watch.bash"
25
+ },
26
+ "peerDependencies": {
27
+ "@financial-times/o-labels": "^7.0.0",
28
+ "@financial-times/o-private-foundation": "^1.0.0"
29
+ },
30
+ "devDependencies": {
31
+ "@financial-times/o-date": "^7.0.0",
32
+ "@financial-times/o-grid": "^6.1.8",
33
+ "@financial-times/o-colors": "^6.7.0",
34
+ "@financial-times/o-normalise": "^3.3.2"
35
+ },
36
+ "engines": {
37
+ "npm": ">7"
38
+ },
39
+ "private": false,
40
+ "dependencies": {
41
+ "date-fns": "^2.30.0",
42
+ "dateformat": "^3.0.3",
43
+ "dompurify": "^2.3.9",
44
+ "html-react-parser": "^3.0.1"
45
+ }
49
46
  }
package/src/scss/_mixins.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @import '@financial-times/o-private-foundation/src/scss/o-normalise/main';
1
2
  /// Includes the correct mixin for elements
2
3
  /// based on the group name passed
3
4
  ///
@@ -69,7 +70,7 @@
69
70
  @include _oTeaserStandfirst;
70
71
  }
71
72
  .o-teaser__visually-hidden {
72
- @include oNormaliseVisuallyHidden;
73
+ @include oPrivateNormaliseVisuallyHidden;
73
74
  }
74
75
  }
75
76
 
@@ -101,12 +102,10 @@
101
102
 
102
103
  .o-teaser--promoted-content {
103
104
  .o-teaser__heading a {
104
- @include oTypographyLink(
105
- $external: true,
106
- $include-base-styles: false,
105
+ @include oPrivateTypographyLinkThemeOverride(
107
106
  $theme: (
108
107
  'base': $_o-teaser-base-color,
109
- 'hover': $_o-teaser-focus-hover
108
+ 'hover': $_o-teaser-focus-hover,
110
109
  )
111
110
  );
112
111
  }
package/src/scss/_variables.scss CHANGED
@@ -12,17 +12,17 @@ $_o-teaser-elements: ('default', 'images', 'timestamp', 'promoted', 'related-ite
12
12
  /// Commonly used text colour.
13
13
  /// @type Color
14
14
  /// @access private
15
- $_o-teaser-base-color: oColorsByUsecase('o-teaser/base', 'text');
15
+ $_o-teaser-base-color: oPrivateFoundationGet('o3-color-palette-black');
16
16
 
17
17
  /// Commonly used hover/focus text colour.
18
18
  /// @type Color
19
19
  /// @access private
20
- $_o-teaser-focus-hover: oColorsMix($_o-teaser-base-color, $percentage: 55);
20
+ $_o-teaser-focus-hover: oPrivateColorsMix($_o-teaser-base-color, $percentage: 55);
21
21
 
22
22
  /// Commonly used text colour for muted copy, including visited text.
23
23
  /// @type Color
24
24
  /// @access private
25
- $_o-teaser-muted: oColorsMix($_o-teaser-base-color, $percentage: 60);
25
+ $_o-teaser-muted: oPrivateColorsMix($_o-teaser-base-color, $percentage: 60);
26
26
 
27
27
  /// @type Color
28
28
  /// @deprecated