@financial-times/o-labels 6.1.0 → 6.2.2

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 (11) hide show
  1. package/.prettierrc.toml +8 -0
  2. package/CHANGELOG.md +28 -0
  3. package/MIGRATION.md +1 -1
  4. package/README.md +2 -2
  5. package/demos/src/demo.scss +4 -0
  6. package/demos/src/indicators-sizes.mustache +8 -8
  7. package/demos/src/indicators.mustache +2 -2
  8. package/demos/src/timestamp.mustache +1 -1
  9. package/origami.json +1 -5
  10. package/package.json +10 -4
  11. package/src/scss/_mixins.scss +3 -3
package/.prettierrc.toml ADDED
@@ -0,0 +1,8 @@
1
+ printWidth = 80
2
+ trailingComma = "es5"
3
+ semi = true
4
+ singleQuote = true
5
+ useTabs = true
6
+ bracketSpacing = false
7
+ jsxBracketSameLine = true
8
+ arrowParens = "avoid"
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # Changelog
2
2
 
3
+ ### [6.2.2](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.2.1...o-labels-v6.2.2) (2022-01-24)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * o-labels error when relative type/spacing variables are enabled ([1e89475](https://www.github.com/Financial-Times/origami/commit/1e89475b5faaf1e619e60c3b18049a31947293cf))
9
+
10
+ ### [6.2.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.2.0...o-labels-v6.2.1) (2022-01-13)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
16
+
17
+ ## [6.2.0](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.1.1...o-labels-v6.2.0) (2021-11-24)
18
+
19
+
20
+ ### Features
21
+
22
+ * allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
23
+
24
+ ### [6.1.1](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.1.0...o-labels-v6.1.1) (2021-11-08)
25
+
26
+
27
+ ### Bug Fixes
28
+
29
+ * pin components to latest o-brand, or greater ([3a6ccea](https://www.github.com/Financial-Times/origami/commit/3a6ccea1e838e4a2003322ca1f855d0b87b26b60))
30
+
3
31
  ## [6.1.0](https://www.github.com/Financial-Times/origami/compare/o-labels-v6.0.2...o-labels-v6.1.0) (2021-11-08)
4
32
 
5
33
 
package/MIGRATION.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  Support for Bower and version 2 of the Origami Build Service have been removed.
6
6
 
7
- Follow [the migration guide on the Origami website](https://origami.ft.com/docs/tutorials/bower-to-npm/).
7
+ Follow [the migration guide on the Origami website](https://origami.ft.com/documentation/tutorials/bower-to-npm/).
8
8
 
9
9
  ## Migrating from v4 to v5
10
10
 
package/README.md CHANGED
@@ -178,7 +178,7 @@ For an updated or new label use the associated modifier class, e.g. `o-labels-in
178
178
  </span>
179
179
  <time class="o-labels-indicator__timestamp">
180
180
  <!-- demo `time` element only (the datetime is not 1 hour ago) -->
181
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
181
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
182
182
  </time>
183
183
  </span>
184
184
  ```
@@ -200,7 +200,7 @@ To include a timestamp label use the following markup. Note the timestamp label
200
200
  ```html
201
201
  <time class="o-labels-timestamp o-labels-timestamp--inverse">
202
202
  <!-- demo `time` element only -->
203
- <time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm" aria-label="February 29 2016">February 29 2016</time>
203
+ <time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm">February 29 2016</time>
204
204
  </time>
205
205
  ```
206
206
 
package/demos/src/demo.scss CHANGED
@@ -1,6 +1,10 @@
1
1
  @import "../../main";
2
2
 
3
3
  @include oLabels();
4
+ @import '@financial-times/o-fonts/main';
5
+ @include oFonts();
6
+ @import '@financial-times/o-normalise/main';
7
+ @include oNormalise();
4
8
 
5
9
  body {
6
10
  padding: 1rem;
package/demos/src/indicators-sizes.mustache CHANGED
@@ -20,7 +20,7 @@
20
20
  </span>
21
21
  <time class="o-labels-indicator__timestamp">
22
22
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
23
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
23
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
24
24
  </time>
25
25
  </span>
26
26
 
@@ -32,7 +32,7 @@
32
32
  </span>
33
33
  <time class="o-labels-indicator__timestamp">
34
34
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
35
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
35
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
36
36
  </time>
37
37
  </span>
38
38
 
@@ -60,7 +60,7 @@
60
60
  </span>
61
61
  <time class="o-labels-indicator__timestamp">
62
62
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
63
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
63
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
64
64
  </time>
65
65
  </span>
66
66
 
@@ -72,7 +72,7 @@
72
72
  </span>
73
73
  <time class="o-labels-indicator__timestamp">
74
74
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
75
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
75
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
76
76
  </time>
77
77
  </span>
78
78
 
@@ -100,7 +100,7 @@
100
100
  </span>
101
101
  <time class="o-labels-indicator__timestamp">
102
102
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
103
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
103
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
104
104
  </time>
105
105
  </span>
106
106
 
@@ -112,7 +112,7 @@
112
112
  </span>
113
113
  <time class="o-labels-indicator__timestamp">
114
114
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
115
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
115
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
116
116
  </time>
117
117
  </span>
118
118
 
@@ -140,7 +140,7 @@
140
140
  </span>
141
141
  <time class="o-labels-indicator__timestamp">
142
142
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
143
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
143
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
144
144
  </time>
145
145
  </span>
146
146
 
@@ -152,6 +152,6 @@
152
152
  </span>
153
153
  <time class="o-labels-indicator__timestamp">
154
154
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
155
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
155
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
156
156
  </time>
157
157
  </span>
package/demos/src/indicators.mustache CHANGED
@@ -20,7 +20,7 @@
20
20
  </span>
21
21
  <time class="o-labels-indicator__timestamp">
22
22
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
23
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
23
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
24
24
  </time>
25
25
  </span>
26
26
 
@@ -32,6 +32,6 @@
32
32
  </span>
33
33
  <time class="o-labels-indicator__timestamp">
34
34
  <!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
35
- <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
35
+ <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm">1 hour ago</time>
36
36
  </time>
37
37
  </span>
package/demos/src/timestamp.mustache CHANGED
@@ -1,4 +1,4 @@
1
1
  <time class="o-labels-timestamp{{#modifiers}} o-labels-timestamp--{{.}}{{/modifiers}}">
2
2
  <!-- demo datetime: see o-date for formatting -->
3
- <time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm" aria-label="February 29 2016">February 29 2016</time>
3
+ <time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm">February 29 2016</time>
4
4
  </time>
package/origami.json CHANGED
@@ -17,11 +17,7 @@
17
17
  "optional": []
18
18
  },
19
19
  "demosDefaults": {
20
- "sass": "demos/src/demo.scss",
21
- "dependencies": [
22
- "o-fonts@^5.0.0",
23
- "o-normalise@^3.0.0"
24
- ]
20
+ "sass": "demos/src/demo.scss"
25
21
  },
26
22
  "demos": [
27
23
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-labels",
3
- "version": "6.1.0",
3
+ "version": "6.2.2",
4
4
  "description": "Labels for content classification or to emphasise a value. Provides customisation options with the FT colour palette.",
5
5
  "keywords": [
6
6
  "label",
@@ -20,17 +20,23 @@
20
20
  "lint": "bash ../../scripts/component/lint.bash"
21
21
  },
22
22
  "peerDependencies": {
23
- "@financial-times/o-brand": "^4.0.2",
23
+ "@financial-times/o-brand": "^4.1.0",
24
24
  "@financial-times/o-colors": "^6.0.1",
25
25
  "@financial-times/o-editorial-typography": "^2.0.1",
26
26
  "@financial-times/o-spacing": "^3.0.0",
27
27
  "@financial-times/o-typography": "^7.0.1"
28
28
  },
29
+ "devDependencies": {
30
+ "@financial-times/o-fonts": "^5.2.0",
31
+ "@financial-times/o-normalise": "^3.2.0"
32
+ },
29
33
  "engines": {
30
- "npm": "^7"
34
+ "npm": "^7 || ^8"
31
35
  },
32
36
  "volta": {
33
37
  "node": "14.16.1",
34
38
  "npm": "7.11.1"
35
- }
39
+ },
40
+ "percy": true,
41
+ "private": false
36
42
  }
package/src/scss/_mixins.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  box-sizing: border-box;
17
17
  margin: 0;
18
18
  text-decoration: none;
19
- padding: (_oLabelsGet('padding-vertical') - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal') - _oLabelsGet('border-width'));
19
+ padding: calc(#{_oLabelsGet('padding-vertical')} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal')} - #{_oLabelsGet('border-width')});
20
20
  color: _oLabelsGet('text-color');
21
21
  background-color: _oLabelsGet('background-color');
22
22
  border: solid _oLabelsGet('border-width') transparent;
@@ -175,7 +175,7 @@
175
175
  @if $scale {
176
176
  @include oTypographySans($scale, $line-height: 1, $include-font-family: false);
177
177
  }
178
- padding: (_oLabelsGet('padding-vertical', $size) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $size) - _oLabelsGet('border-width'));
178
+ padding: calc(#{_oLabelsGet('padding-vertical', $size)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $size)} - #{_oLabelsGet('border-width')});
179
179
  }
180
180
 
181
181
  /// Styles for a state.
@@ -195,7 +195,7 @@
195
195
 
196
196
  // Set the spacing
197
197
  @if _oLabelsGet('padding-vertical', $variant) and _oLabelsGet('padding-horizontal', $variant) {
198
- padding: (_oLabelsGet('padding-vertical', $variant) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $variant) - _oLabelsGet('border-width'));
198
+ padding: calc(#{_oLabelsGet('padding-vertical', $variant)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $variant)} - #{_oLabelsGet('border-width')});
199
199
  }
200
200
  }
201
201