@financial-times/o-labels 6.5.8 → 7.0.1
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 +56 -45
- package/MIGRATION.md +19 -2
- package/README.md +126 -90
- package/demos/src/demo.scss +32 -14
- package/main.scss +38 -26
- package/origami.json +17 -51
- package/package.json +34 -37
- package/src/scss/_brand.scss +28 -28
- package/src/scss/_colors.scss +0 -5
- package/src/scss/_mixins.scss +36 -26
- package/src/scss/_placeholders.scss +10 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,149 +1,160 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## [
|
|
3
|
+
## [7.0.1](https://github.com/Financial-Times/origami/compare/o-labels-v7.0.0...o-labels-v7.0.1) (2025-04-16)
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
### Bug Fixes
|
|
7
7
|
|
|
8
|
-
*
|
|
8
|
+
* o-forms theme issue ([159797d](https://github.com/Financial-Times/origami/commit/159797d5a9945426b2c14e6846d9f72c194e1cdb))
|
|
9
|
+
* update ORIGAMI_STORYBOOK_BRAND to STORYBOOK_BRAND ([e5bed4a](https://github.com/Financial-Times/origami/commit/e5bed4a3988e10cbae4384cfda573cb295b3d238))
|
|
9
10
|
|
|
10
|
-
## [
|
|
11
|
+
## [7.0.0](https://github.com/Financial-Times/origami/compare/o-labels-v6.5.8...o-labels-v7.0.0) (2025-02-20)
|
|
12
|
+
|
|
13
|
+
### ⚠ BREAKING CHANGES
|
|
14
|
+
|
|
15
|
+
This introduces a new design language and visually breaking changes. Including mobile optimised typography, icons, and buttons (see [MIGRATION.md](./MIGRATION.md)).
|
|
16
|
+
|
|
17
|
+
#### Origami 3: Principles, Purpose, and Impact
|
|
18
|
+
|
|
19
|
+
For anyone in P&T. We covered what’s new in Origami 3 (o3), why it matters, and what’s next.
|
|
20
|
+
|
|
21
|
+
[Slides](https://docs.google.com/presentation/d/1Qs8RHpMrDxxP5LyrVlnsUHnS3AriRK5-IboUeneRyMs/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/1OMW9zdTOEUvWyW1trsFqL3XhpTejYelO/view)
|
|
22
|
+
|
|
23
|
+
#### Origami 3: Bridging design & code
|
|
24
|
+
|
|
25
|
+
For designers and engineers alike. How to work with design guidelines, design foundations, and techniques for designer–engineer collaboration.
|
|
26
|
+
|
|
27
|
+
[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)
|
|
11
28
|
|
|
29
|
+
#### Origami 3: Engineers’ Deep Dive
|
|
30
|
+
|
|
31
|
+
We got into the technical detail. Working with Origami CSS (no more Sass), custom elements, JSX templates, etc.
|
|
32
|
+
|
|
33
|
+
[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)
|
|
34
|
+
|
|
35
|
+
## [6.5.8](https://github.com/Financial-Times/origami/compare/o-labels-v6.5.7...o-labels-v6.5.8) (2023-10-27)
|
|
12
36
|
|
|
13
37
|
### Bug Fixes
|
|
14
38
|
|
|
15
|
-
|
|
39
|
+
- Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
|
|
16
40
|
|
|
17
|
-
|
|
41
|
+
## [6.5.7](https://github.com/Financial-Times/origami/compare/o-labels-v6.5.6...o-labels-v6.5.7) (2023-08-25)
|
|
42
|
+
|
|
43
|
+
### Bug Fixes
|
|
44
|
+
|
|
45
|
+
- update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
|
|
18
46
|
|
|
47
|
+
### [6.5.6](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.5...o-labels-v6.5.6) (2023-07-20)
|
|
19
48
|
|
|
20
49
|
### Bug Fixes
|
|
21
50
|
|
|
22
|
-
|
|
51
|
+
- correct table syntax ([86ff070](https://www.github.com/Financial-Times/origami/commit/86ff070848b001751bf36b67b83b5d1c4567a6f8))
|
|
23
52
|
|
|
24
53
|
### [6.5.5](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.4...o-labels-v6.5.5) (2023-07-14)
|
|
25
54
|
|
|
26
|
-
|
|
27
55
|
### Bug Fixes
|
|
28
56
|
|
|
29
|
-
|
|
57
|
+
- migrate text input designer docs to readme ([d6c0d26](https://www.github.com/Financial-Times/origami/commit/d6c0d2685bd7f07762deb08f341185140b4cbf74))
|
|
30
58
|
|
|
31
59
|
### [6.5.4](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.3...o-labels-v6.5.4) (2023-04-28)
|
|
32
60
|
|
|
33
|
-
|
|
34
61
|
### Bug Fixes
|
|
35
62
|
|
|
36
|
-
|
|
63
|
+
- 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))
|
|
37
64
|
|
|
38
65
|
### [6.5.3](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.2...o-labels-v6.5.3) (2022-12-21)
|
|
39
66
|
|
|
40
|
-
|
|
41
67
|
### Bug Fixes
|
|
42
68
|
|
|
43
|
-
|
|
69
|
+
- require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
|
|
44
70
|
|
|
45
71
|
### [6.5.2](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.1...o-labels-v6.5.2) (2022-12-06)
|
|
46
72
|
|
|
47
|
-
|
|
48
73
|
### Bug Fixes
|
|
49
74
|
|
|
50
|
-
|
|
75
|
+
- revert "remove blinking animation from live label" ([#908](https://www.github.com/Financial-Times/origami/issues/908)) ([1ad2768](https://www.github.com/Financial-Times/origami/commit/1ad2768834dd74117367ab1b21d5fec604eb9b92))
|
|
51
76
|
|
|
52
77
|
### [6.5.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.0...o-labels-v6.5.1) (2022-10-31)
|
|
53
78
|
|
|
54
|
-
|
|
55
79
|
### Bug Fixes
|
|
56
80
|
|
|
57
|
-
|
|
81
|
+
- remove blinking animation from live label ([6bb0da6](https://www.github.com/Financial-Times/origami/commit/6bb0da6545915d455e6046626602776368162394))
|
|
58
82
|
|
|
59
83
|
## [6.5.0](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.4.1...o-labels-v6.5.0) (2022-10-20)
|
|
60
84
|
|
|
61
|
-
|
|
62
85
|
### Features
|
|
63
86
|
|
|
64
|
-
|
|
65
|
-
|
|
87
|
+
- Add support for a "badged" variant of live and close labels. ([a5e4a98](https://www.github.com/Financial-Times/origami/commit/a5e4a98a7c2021b31f6f98ce26df9eee031ec754))
|
|
88
|
+
- o-labels, support custom labels with tsx templates ([2191c7c](https://www.github.com/Financial-Times/origami/commit/2191c7cfb165e8f2c77b288a2c02a5242b3795e5))
|
|
66
89
|
|
|
67
90
|
### [6.4.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.4.0...o-labels-v6.4.1) (2022-10-17)
|
|
68
91
|
|
|
69
|
-
|
|
70
92
|
### Bug Fixes
|
|
71
93
|
|
|
72
|
-
|
|
94
|
+
- storybook build / brand unique stories ([7942d0a](https://www.github.com/Financial-Times/origami/commit/7942d0a8c6ad5f4b8564276deccf5878855acc49))
|
|
73
95
|
|
|
74
96
|
## [6.4.0](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.3.1...o-labels-v6.4.0) (2022-10-12)
|
|
75
97
|
|
|
76
|
-
|
|
77
98
|
### Features
|
|
78
99
|
|
|
79
|
-
|
|
80
|
-
|
|
100
|
+
- o-labels, make tsx public ([0b0a298](https://www.github.com/Financial-Times/origami/commit/0b0a2988b80a58ac6d61026187272983702e73cc))
|
|
81
101
|
|
|
82
102
|
### Bug Fixes
|
|
83
103
|
|
|
84
|
-
|
|
104
|
+
- Update o-label tsx and stories ([5ce516b](https://www.github.com/Financial-Times/origami/commit/5ce516bdf9c71e713367db063766e7f8e1d569d3))
|
|
85
105
|
|
|
86
106
|
### [6.3.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.3.0...o-labels-v6.3.1) (2022-10-12)
|
|
87
107
|
|
|
88
|
-
|
|
89
108
|
### Bug Fixes
|
|
90
109
|
|
|
91
|
-
|
|
110
|
+
- fix labels deployment ([a3e2182](https://www.github.com/Financial-Times/origami/commit/a3e21820b5b287073728ed8629c79cc3797caea5))
|
|
92
111
|
|
|
93
112
|
## [6.3.0](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.2.2...o-labels-v6.3.0) (2022-10-10)
|
|
94
113
|
|
|
95
|
-
|
|
96
114
|
### Features
|
|
97
115
|
|
|
98
|
-
|
|
116
|
+
- wip add stories for o-labels demos ([fa53f7d](https://www.github.com/Financial-Times/origami/commit/fa53f7de0c2f2eae1ca1d760faee4b39844e0fd9))
|
|
99
117
|
|
|
100
118
|
### [6.2.2](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.2.1...o-labels-v6.2.2) (2022-01-24)
|
|
101
119
|
|
|
102
|
-
|
|
103
120
|
### Bug Fixes
|
|
104
121
|
|
|
105
|
-
|
|
122
|
+
- o-labels error when relative type/spacing variables are enabled ([1e89475](https://www.github.com/Financial-Times/origami/commit/1e89475b5faaf1e619e60c3b18049a31947293cf))
|
|
106
123
|
|
|
107
124
|
### [6.2.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.2.0...o-labels-v6.2.1) (2022-01-13)
|
|
108
125
|
|
|
109
|
-
|
|
110
126
|
### Bug Fixes
|
|
111
127
|
|
|
112
|
-
|
|
128
|
+
- expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
|
|
113
129
|
|
|
114
130
|
## [6.2.0](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.1.1...o-labels-v6.2.0) (2021-11-24)
|
|
115
131
|
|
|
116
|
-
|
|
117
132
|
### Features
|
|
118
133
|
|
|
119
|
-
|
|
134
|
+
- allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
|
|
120
135
|
|
|
121
136
|
### [6.1.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.1.0...o-labels-v6.1.1) (2021-11-08)
|
|
122
137
|
|
|
123
|
-
|
|
124
138
|
### Bug Fixes
|
|
125
139
|
|
|
126
|
-
|
|
140
|
+
- pin components to latest o-brand, or greater ([3a6ccea](https://www.github.com/Financial-Times/origami/commit/3a6ccea1e838e4a2003322ca1f855d0b87b26b60))
|
|
127
141
|
|
|
128
142
|
## [6.1.0](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.0.2...o-labels-v6.1.0) (2021-11-08)
|
|
129
143
|
|
|
130
|
-
|
|
131
144
|
### Features
|
|
132
145
|
|
|
133
|
-
|
|
146
|
+
- Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
|
|
134
147
|
|
|
135
148
|
### [6.0.2](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.0.1...o-labels-v6.0.2) (2021-11-02)
|
|
136
149
|
|
|
137
|
-
|
|
138
150
|
### Bug Fixes
|
|
139
151
|
|
|
140
|
-
|
|
152
|
+
- Update `o-brand` in components, replace "master" with "core" ([322617e](https://www.github.com/Financial-Times/origami/commit/322617ea80f30a6825d9c36872e05574b871ea82))
|
|
141
153
|
|
|
142
154
|
### [6.0.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.0.0...o-labels-v6.0.1) (2021-09-21)
|
|
143
155
|
|
|
144
|
-
|
|
145
156
|
### Bug Fixes
|
|
146
157
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
158
|
+
- Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
|
|
159
|
+
- update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
|
|
160
|
+
- update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
|
package/MIGRATION.md
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
1
|
-
# Migration
|
|
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)
|
|
2
19
|
|
|
3
20
|
## Migrating from v5 to v6
|
|
4
21
|
|
|
@@ -16,7 +33,7 @@ its dependencies. See [the Bower config for these](./bower.json).
|
|
|
16
33
|
|
|
17
34
|
## Migrating from v3 to v4
|
|
18
35
|
|
|
19
|
-
- The `oLabels` mixin parameters have been changed, and all of the
|
|
36
|
+
- The `oLabels` mixin parameters have been changed, and all of the mixins have changed significantly. See the [Sass documentation](README.md#sass) for how to use the new and updated mixins
|
|
20
37
|
- The following states have been removed. The decision to remove was based on a search of the various codebases using o-labels, if you need one of the removed states then please contact us and we'll add it back:
|
|
21
38
|
- `active`: This state has been removed entirely
|
|
22
39
|
- `brand`: This state has been removed entirely
|
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ Check out [how to include Origami components in your project](https://origami.ft
|
|
|
17
17
|
## Label Types
|
|
18
18
|
|
|
19
19
|
There are three types of label:
|
|
20
|
+
|
|
20
21
|
- [A standard label](#standard-label), the default.
|
|
21
22
|
- [An indicator label](#indicator-label).
|
|
22
23
|
- [A timestamp label](#timestamp-label).
|
|
@@ -29,8 +30,8 @@ The standard label is used for content classification or to emphasise a value. F
|
|
|
29
30
|
|
|
30
31
|
This table outlines the possible standard label sizes.
|
|
31
32
|
|
|
32
|
-
| Size | Description | Brand support
|
|
33
|
-
|
|
33
|
+
| Size | Description | Brand support |
|
|
34
|
+
| ----- | ------------------------------------------- | -------------------------- |
|
|
34
35
|
| big | Label with increased font size and padding. | core, internal, whitelabel |
|
|
35
36
|
| small | Label with decreased font size and padding. | core, internal, whitelabel |
|
|
36
37
|
|
|
@@ -39,10 +40,10 @@ This table outlines the possible standard label sizes.
|
|
|
39
40
|
This table outlines the possible standard label states. Custom states may also be created.
|
|
40
41
|
|
|
41
42
|
| State | Description | Brand support |
|
|
42
|
-
|
|
43
|
-
| content-commercial | Used to identify paid posts or promoted content. | core
|
|
44
|
-
| content-premium | Used to identify premium content. | core
|
|
45
|
-
| lifecycle-beta | Used to identify a feature that's in beta. | core
|
|
43
|
+
| -------------------- | ------------------------------------------------------------- | ------------- |
|
|
44
|
+
| content-commercial | Used to identify paid posts or promoted content. | core |
|
|
45
|
+
| content-premium | Used to identify premium content. | core |
|
|
46
|
+
| lifecycle-beta | Used to identify a feature that's in beta. | core |
|
|
46
47
|
| support-active | Used to indicate that a component is actively maintained. | internal |
|
|
47
48
|
| support-maintained | Used to indicate that a component is maintained. | internal |
|
|
48
49
|
| support-experimental | Used to indicate that a component is an experimental feature. | internal |
|
|
@@ -63,33 +64,36 @@ This table outlines the possible standard label states. Custom states may also b
|
|
|
63
64
|
### Indicator Label
|
|
64
65
|
|
|
65
66
|
The indicator label is used to show story status with new, updated, and live variants. The indicator label only supports the core brand but [internal brand support is under consideration](https://github.com/Financial-Times/o-labels/issues/58).
|
|
67
|
+
|
|
66
68
|
#### Indicator Label Status
|
|
67
69
|
|
|
68
70
|
This table outlines the possible indicator label statuses:
|
|
69
71
|
|
|
70
|
-
| Indicator
|
|
71
|
-
|
|
72
|
-
| live
|
|
73
|
-
| closed
|
|
74
|
-
| new
|
|
75
|
-
| updated
|
|
72
|
+
| Indicator | Description | Brand support |
|
|
73
|
+
| --------- | ---------------------------------------- | ------------- |
|
|
74
|
+
| live | Indicate a story is live. | core |
|
|
75
|
+
| closed | Indicate a live story is no longer live. | core |
|
|
76
|
+
| new | Indicate a story is new. | core |
|
|
77
|
+
| updated | Indicate a story has been updated. | core |
|
|
76
78
|
|
|
77
79
|
E.g. for a live label:
|
|
78
80
|
|
|
79
81
|
```html
|
|
80
82
|
<span class="o-labels-indicator o-labels-indicator--live">
|
|
81
|
-
|
|
83
|
+
<span class="o-labels-indicator__status">live</span>
|
|
82
84
|
</span>
|
|
83
85
|
```
|
|
84
86
|
|
|
85
87
|
The live and closed labels also support a more prominent badge variant:
|
|
88
|
+
|
|
86
89
|
```html
|
|
87
90
|
<span
|
|
88
|
-
|
|
91
|
+
class="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse o-labels-indicator--badge"
|
|
89
92
|
>
|
|
90
|
-
|
|
93
|
+
<span class="o-labels-indicator__status">live</span>
|
|
91
94
|
</span>
|
|
92
95
|
```
|
|
96
|
+
|
|
93
97
|
### Timestamp Label
|
|
94
98
|
|
|
95
99
|
The timestamp label is used to show article status in place of an indicator label when the article is not new, updated, or live. The timestamp label only supports the core brand.
|
|
@@ -118,8 +122,10 @@ Labels can also have one of several states. The available states depend on which
|
|
|
118
122
|
The following core brand states are used to categorise content, mostly on FT.com:
|
|
119
123
|
|
|
120
124
|
```html
|
|
121
|
-
<span class="o-labels o-labels--content-commercial">Paid Post</span> (used for
|
|
122
|
-
|
|
125
|
+
<span class="o-labels o-labels--content-commercial">Paid Post</span> (used for
|
|
126
|
+
paid post and promoted content)
|
|
127
|
+
<span class="o-labels o-labels--content-premium">Premium</span> (used for
|
|
128
|
+
premium-only content)
|
|
123
129
|
```
|
|
124
130
|
|
|
125
131
|
The following state is used to indicate that a feature is in a beta state:
|
|
@@ -162,43 +168,44 @@ The internal brand may also use colour palette based states, these do not specif
|
|
|
162
168
|
### Indicator Label Markup
|
|
163
169
|
|
|
164
170
|
Indicator labels have one of three statuses:
|
|
171
|
+
|
|
165
172
|
- `live`
|
|
166
173
|
- `closed`
|
|
167
174
|
- `updated`
|
|
168
175
|
- `new`
|
|
169
176
|
|
|
170
177
|
Use the following markup for a live label:
|
|
178
|
+
|
|
171
179
|
```html
|
|
172
180
|
<span class="o-labels-indicator o-labels-indicator--live">
|
|
173
|
-
|
|
174
|
-
live
|
|
175
|
-
</span>
|
|
181
|
+
<span class="o-labels-indicator__status"> live </span>
|
|
176
182
|
</span>
|
|
177
183
|
```
|
|
178
184
|
|
|
179
185
|
Use the modifier class `o-labels-indicator--closed` for a closed label:
|
|
186
|
+
|
|
180
187
|
```html
|
|
181
188
|
<span class="o-labels-indicator o-labels-indicator--closed">
|
|
182
|
-
|
|
183
|
-
closed
|
|
184
|
-
</span>
|
|
189
|
+
<span class="o-labels-indicator__status"> closed </span>
|
|
185
190
|
</span>
|
|
186
191
|
```
|
|
187
192
|
|
|
188
193
|
For an updated or new label use the associated modifier class, e.g. `o-labels-indicator--updated`, and add a child element `o-labels-indicator__timestamp` to show the new/updated time. We recommend using [o-date](https://registry.origami.ft.com/components/o-date) to format the timestamp element.
|
|
194
|
+
|
|
189
195
|
```html
|
|
190
196
|
<span class="o-labels-indicator o-labels-indicator--new">
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
197
|
+
<span class="o-labels-indicator__status"> new </span>
|
|
198
|
+
<span class="o-labels-indicator__timestamp">
|
|
199
|
+
<!-- demo `time` element only (the datetime is not 1 hour ago) -->
|
|
200
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm"
|
|
201
|
+
>1 hour ago</time
|
|
202
|
+
>
|
|
203
|
+
</span>
|
|
198
204
|
</span>
|
|
199
205
|
```
|
|
200
206
|
|
|
201
207
|
Indicator labels also support an inverse theme for use on dark backgrounds. To use an inverse theme add the `o-labels-indicator--inverse` class to your markup.
|
|
208
|
+
|
|
202
209
|
```diff
|
|
203
210
|
-<span class="o-labels-indicator o-labels-indicator--live">
|
|
204
211
|
+<span class="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse">
|
|
@@ -214,8 +221,10 @@ To include a timestamp label use the following markup. Note the timestamp label
|
|
|
214
221
|
|
|
215
222
|
```html
|
|
216
223
|
<span class="o-labels-timestamp o-labels-timestamp--inverse">
|
|
217
|
-
|
|
218
|
-
|
|
224
|
+
<!-- demo `time` element only -->
|
|
225
|
+
<time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm"
|
|
226
|
+
>February 29 2016</time
|
|
227
|
+
>
|
|
219
228
|
</span>
|
|
220
229
|
```
|
|
221
230
|
|
|
@@ -234,40 +243,41 @@ Or pass an options map `$opts` argument to output just the label styles you need
|
|
|
234
243
|
- sizes: a list of standard label sizes to output (see [available sizes](#standard-label-sizes))
|
|
235
244
|
- states: a list of standard label states to output (see [available states](#standard-label-states)))
|
|
236
245
|
- indicators
|
|
237
|
-
|
|
238
|
-
|
|
246
|
+
- status: a list of indicator label statuses to output (see [available statuses](#indicator-label-status))
|
|
247
|
+
- inverse
|
|
239
248
|
- timestamp
|
|
240
|
-
|
|
249
|
+
- inverse
|
|
241
250
|
|
|
242
251
|
```scss
|
|
243
|
-
@include oLabels(
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
'content-commercial',
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
252
|
+
@include oLabels(
|
|
253
|
+
$opts: (
|
|
254
|
+
// standard label sizes to output
|
|
255
|
+
// e.g. .o-labels--big
|
|
256
|
+
'sizes': ('big'),
|
|
257
|
+
// standard label states to output
|
|
258
|
+
// e.g. .o-labels--content-commercial
|
|
259
|
+
'states': ('content-commercial', 'content-premium'),
|
|
260
|
+
// indicator label labels to output
|
|
261
|
+
// .o-labels-indicator
|
|
262
|
+
'indicators':
|
|
263
|
+
(
|
|
264
|
+
// indicator label statuses to output
|
|
265
|
+
// .o-labels-indicator--live
|
|
266
|
+
'status': ('live'),
|
|
267
|
+
// whether to output the indicator label inverse style
|
|
268
|
+
// .o-labels-indicator--inverse
|
|
269
|
+
'inverse': true
|
|
270
|
+
),
|
|
271
|
+
// output the timestamp label label
|
|
272
|
+
// .o-labels-timestamp
|
|
273
|
+
'timestamp':
|
|
274
|
+
(
|
|
275
|
+
// whether to output the timestamp label inverse style
|
|
276
|
+
// .o-labels-timestamp--inverse
|
|
277
|
+
'inverse': true
|
|
278
|
+
),
|
|
269
279
|
)
|
|
270
|
-
)
|
|
280
|
+
);
|
|
271
281
|
```
|
|
272
282
|
|
|
273
283
|
### Custom Standard Label State
|
|
@@ -276,14 +286,18 @@ Use `oLabelsAddState` mixin to add a custom label state for the standard label.
|
|
|
276
286
|
|
|
277
287
|
```scss
|
|
278
288
|
// outputs a class .o-labels--citrus-fruit
|
|
279
|
-
@include oLabelsAddState(
|
|
280
|
-
|
|
281
|
-
|
|
289
|
+
@include oLabelsAddState(
|
|
290
|
+
'citrus-fruit',
|
|
291
|
+
(
|
|
292
|
+
background-color: oColorsByName('lemon'),
|
|
293
|
+
)
|
|
294
|
+
);
|
|
282
295
|
```
|
|
283
296
|
|
|
284
297
|
### Custom Markup
|
|
285
298
|
|
|
286
299
|
When it's not possible to use an `o-labels` CSS class, for example within another Origami component, use:
|
|
300
|
+
|
|
287
301
|
- `oLabelsContent` to output a standard label with a custom class.
|
|
288
302
|
- `oLabelsIndicatorContent` to output an indicator label with a custom class.
|
|
289
303
|
- `oLabelsTimestampContent` to output a timestamp label with a custom class.
|
|
@@ -295,26 +309,32 @@ If it is possible to use `o-labels` classes we recommend [oLabels](#sass) and [o
|
|
|
295
309
|
`oLabelsContent` accepts an `$opts` argument which is a map of options. To output styles required by all labels set "base" to "true". Then set the labels "[sizes](#size)" and its "[state](#states)". Any of these options may be output independently.
|
|
296
310
|
|
|
297
311
|
To output an existing label:
|
|
312
|
+
|
|
298
313
|
```scss
|
|
299
314
|
.o-example-my-label {
|
|
300
|
-
@include oLabelsContent(
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
315
|
+
@include oLabelsContent(
|
|
316
|
+
$opts: (
|
|
317
|
+
'base': true,
|
|
318
|
+
'size': 'big',
|
|
319
|
+
'state': 'tier-gold',
|
|
320
|
+
)
|
|
321
|
+
);
|
|
305
322
|
}
|
|
306
323
|
```
|
|
307
324
|
|
|
308
325
|
To output a custom label:
|
|
326
|
+
|
|
309
327
|
```scss
|
|
310
328
|
.o-example-my-custom-label {
|
|
311
|
-
@include oLabelsContent(
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
'
|
|
329
|
+
@include oLabelsContent(
|
|
330
|
+
$opts: (
|
|
331
|
+
'base': true,
|
|
332
|
+
'size': 'big',
|
|
333
|
+
'state': (
|
|
334
|
+
'background-color': oColorsByName('lemon'),
|
|
335
|
+
),
|
|
316
336
|
)
|
|
317
|
-
)
|
|
337
|
+
);
|
|
318
338
|
}
|
|
319
339
|
```
|
|
320
340
|
|
|
@@ -325,39 +345,55 @@ As styles for the indicator label apply to multiple html elements, the `oLabelsI
|
|
|
325
345
|
```scss
|
|
326
346
|
// equivalent to .o-labels-indicator
|
|
327
347
|
.my-indicator-label {
|
|
328
|
-
@include oLabelsIndicatorContent(
|
|
348
|
+
@include oLabelsIndicatorContent(
|
|
349
|
+
$opts: (
|
|
350
|
+
'block': true,
|
|
351
|
+
)
|
|
352
|
+
);
|
|
329
353
|
}
|
|
330
354
|
// equivalent to .o-labels-indicator--live
|
|
331
355
|
.my-indicator-label--live {
|
|
332
|
-
@include oLabelsIndicatorContent(
|
|
356
|
+
@include oLabelsIndicatorContent(
|
|
357
|
+
$opts: (
|
|
358
|
+
'block': true,
|
|
359
|
+
'modifier': 'live',
|
|
360
|
+
)
|
|
361
|
+
);
|
|
333
362
|
}
|
|
334
363
|
// equivalent to .o-labels-indicator__status
|
|
335
364
|
.my-indicator-label__status {
|
|
336
|
-
@include oLabelsIndicatorContent(
|
|
365
|
+
@include oLabelsIndicatorContent(
|
|
366
|
+
$opts: (
|
|
367
|
+
'element': 'status',
|
|
368
|
+
)
|
|
369
|
+
);
|
|
337
370
|
}
|
|
338
371
|
// equivalent to .o-labels-indicator__timestamp
|
|
339
372
|
.my-indicator-label__timestamp {
|
|
340
|
-
@include oLabelsIndicatorContent(
|
|
373
|
+
@include oLabelsIndicatorContent(
|
|
374
|
+
$opts: (
|
|
375
|
+
'element': 'timestamp',
|
|
376
|
+
)
|
|
377
|
+
);
|
|
341
378
|
}
|
|
342
379
|
```
|
|
343
380
|
|
|
344
381
|
## Migration guide
|
|
345
382
|
|
|
346
|
-
|
|
|
347
|
-
|
|
348
|
-
|
|
|
349
|
-
|
|
|
350
|
-
|
|
|
351
|
-
| ╳ deprecated
|
|
352
|
-
| ╳ deprecated
|
|
353
|
-
|
|
|
354
|
-
|
|
383
|
+
| State | Major Version | Last Minor Release | Migration guide |
|
|
384
|
+
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
|
|
385
|
+
| ⚠ maintained | 7 | N/A | [migrate to v7](MIGRATION.md#migrating-from-v6-to-v7) |
|
|
386
|
+
| ╳ deprecated | 6 | 6.5 | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
|
|
387
|
+
| ╳ deprecated | 5 | 5.2 | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
|
|
388
|
+
| ╳ deprecated | 4 | N/A | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
|
|
389
|
+
| ╳ deprecated | 3 | 3.1.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
|
|
390
|
+
| ╳ deprecated | 2 | 2.1.0 | N/A |
|
|
391
|
+
| ╳ deprecated | 1 | 1.0.6 | N/A |
|
|
355
392
|
|
|
356
393
|
## Contact
|
|
357
394
|
|
|
358
395
|
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-labels/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).
|
|
359
396
|
|
|
360
|
-
|
|
361
397
|
## Licence
|
|
362
398
|
|
|
363
399
|
This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
|