@financial-times/o-labels 6.5.4 → 6.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +33 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
### [6.5.5](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.4...o-labels-v6.5.5) (2023-07-14)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* migrate text input designer docs to readme ([d6c0d26](https://www.github.com/Financial-Times/origami/commit/d6c0d2685bd7f07762deb08f341185140b4cbf74))
|
|
9
|
+
|
|
3
10
|
### [6.5.4](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.5.3...o-labels-v6.5.4) (2023-04-28)
|
|
4
11
|
|
|
5
12
|
|
package/README.md
CHANGED
|
@@ -10,6 +10,12 @@ Labels for content classification, to emphasise a value, or highlight a status.
|
|
|
10
10
|
- [Contact](#contact)
|
|
11
11
|
- [Licence](#licence)
|
|
12
12
|
|
|
13
|
+
Labels allow users to:
|
|
14
|
+
|
|
15
|
+
- Differentiate between content types.
|
|
16
|
+
- Create urgency for time-sensitive content.
|
|
17
|
+
- Understand that a product is still in an experimental stage.
|
|
18
|
+
|
|
13
19
|
## Usage
|
|
14
20
|
|
|
15
21
|
Check out [how to include Origami components in your project](https://origami.ft.com/docs/components/#including-origami-components-in-your-project) to get started with `o-labels`.
|
|
@@ -25,6 +31,11 @@ There are three types of label:
|
|
|
25
31
|
|
|
26
32
|
The standard label is used for content classification or to emphasise a value. For example to highlight commercial or premium content for the core brand, or to highlight a service tier in internal products. Custom labels may be created.
|
|
27
33
|
|
|
34
|
+
#### Usage
|
|
35
|
+
|
|
36
|
+
✅ Do: Place underneath the headline ([Figma](https://www.figma.com/file/rIWBCOOiVoBZA7EBqnlmpB?embed_host=notion&kind=&node-id=56%3A46&viewer=1))
|
|
37
|
+
|
|
38
|
+
❌ Don't: Place at the end of headline, as it breaks alignment and reduces ability to scan. ([Figma](https://www.figma.com/file/rIWBCOOiVoBZA7EBqnlmpB?embed_host=notion&kind=&node-id=85%3A114&viewer=1))
|
|
28
39
|
#### Standard Label Sizes
|
|
29
40
|
|
|
30
41
|
This table outlines the possible standard label sizes.
|
|
@@ -63,6 +74,20 @@ This table outlines the possible standard label states. Custom states may also b
|
|
|
63
74
|
### Indicator Label
|
|
64
75
|
|
|
65
76
|
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).
|
|
77
|
+
|
|
78
|
+
#### Usage
|
|
79
|
+
|
|
80
|
+
This can be used for a number of use cases:
|
|
81
|
+
|
|
82
|
+
a. to indicate relative time of publishing
|
|
83
|
+
|
|
84
|
+
✅ Do: Place after stand-first (or title if stand-first doesn't exist). ([Figma](https://www.figma.com/file/rIWBCOOiVoBZA7EBqnlmpB?embed_host=notion&kind=&node-id=85%3A60&viewer=1))
|
|
85
|
+
|
|
86
|
+
❌ Don't: Place alongside topic tag, as the hierarchy and colours create visual conflict. ([Figma](https://www.figma.com/file/rIWBCOOiVoBZA7EBqnlmpB?embed_host=notion&kind=&node-id=85%3A148&viewer=1))
|
|
87
|
+
|
|
88
|
+
b. to create urgency on time sensitive content ([Figma](https://www.figma.com/file/rIWBCOOiVoBZA7EBqnlmpB?embed_host=notion&kind=&node-id=85%3A1&viewer=1))
|
|
89
|
+
|
|
90
|
+
|
|
66
91
|
#### Indicator Label Status
|
|
67
92
|
|
|
68
93
|
This table outlines the possible indicator label statuses:
|
|
@@ -343,14 +368,14 @@ As styles for the indicator label apply to multiple html elements, the `oLabelsI
|
|
|
343
368
|
|
|
344
369
|
## Migration guide
|
|
345
370
|
|
|
346
|
-
State
|
|
347
|
-
|
|
348
|
-
✨ active
|
|
349
|
-
✨ active
|
|
350
|
-
⚠ maintained
|
|
351
|
-
╳ deprecated
|
|
352
|
-
╳ deprecated
|
|
353
|
-
╳ deprecated | 1 | 1.0.6 | N/A |
|
|
371
|
+
| State | Major Version | Last Minor Release | Migration guide |
|
|
372
|
+
|:-------------:| :---: | :---: | :---:|
|
|
373
|
+
| ✨ active | 6 | N/A | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
|
|
374
|
+
| ✨ active | 5 | 5.2 | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
|
|
375
|
+
| ⚠ maintained | 4 | N/A | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
|
|
376
|
+
| ╳ deprecated | 3 | 3.1.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
|
|
377
|
+
| ╳ deprecated | 2 | 2.1.0 | N/A |
|
|
378
|
+
| ╳ deprecated | 1 | 1.0.6 | N/A |
|
|
354
379
|
|
|
355
380
|
|
|
356
381
|
## Contact
|
package/package.json
CHANGED