@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.
Files changed (11) hide show
  1. package/CHANGELOG.md +56 -45
  2. package/MIGRATION.md +19 -2
  3. package/README.md +126 -90
  4. package/demos/src/demo.scss +32 -14
  5. package/main.scss +38 -26
  6. package/origami.json +17 -51
  7. package/package.json +34 -37
  8. package/src/scss/_brand.scss +28 -28
  9. package/src/scss/_colors.scss +0 -5
  10. package/src/scss/_mixins.scss +36 -26
  11. package/src/scss/_placeholders.scss +10 -6
package/demos/src/demo.scss CHANGED
@@ -1,10 +1,9 @@
1
- @import "../../main";
1
+ @import '../../main';
2
2
 
3
3
  @include oLabels();
4
- @import '@financial-times/o-fonts/main';
5
- @include oFonts();
6
4
  @import '@financial-times/o-normalise/main';
7
5
  @include oNormalise();
6
+ @import "@financial-times/o-colors/main";
8
7
 
9
8
  body {
10
9
  padding: 1rem;
@@ -21,38 +20,57 @@ html {
21
20
  }
22
21
 
23
22
  .demo-scale-m1 {
24
- @include oTypographySans($scale: -1);
23
+ @include oPrivateTypographySans($scale: -1);
25
24
  }
26
25
  .demo-scale-0 {
27
- @include oTypographySans($scale: 0);
26
+ @include oPrivateTypographySans($scale: 0);
28
27
  }
29
28
  .demo-scale-1 {
30
- @include oTypographySans($scale: 1);
29
+ @include oPrivateTypographySans($scale: 1);
31
30
  }
32
31
  .demo-scale-2 {
33
- @include oTypographySans($scale: 3);
32
+ @include oPrivateTypographySans($scale: 3);
34
33
  }
35
34
 
36
35
  // custom standard label markup
37
36
  .my-label {
38
- @include oLabelsContent($opts: (
39
- 'base': true
40
- ));
37
+ @include oLabelsContent(
38
+ $opts: (
39
+ 'base': true,
40
+ )
41
+ );
41
42
  }
42
43
 
43
44
  // custom indicator label markup
44
45
  .my-indicator-label {
45
- @include oLabelsIndicatorContent($opts: ('block': true));
46
+ @include oLabelsIndicatorContent(
47
+ $opts: (
48
+ 'block': true,
49
+ )
50
+ );
46
51
  }
47
52
 
48
53
  .my-indicator-label--live {
49
- @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'live'));
54
+ @include oLabelsIndicatorContent(
55
+ $opts: (
56
+ 'block': true,
57
+ 'modifier': 'live',
58
+ )
59
+ );
50
60
  }
51
61
 
52
62
  .my-indicator-label__status {
53
- @include oLabelsIndicatorContent($opts: ('element': 'status'));
63
+ @include oLabelsIndicatorContent(
64
+ $opts: (
65
+ 'element': 'status',
66
+ )
67
+ );
54
68
  }
55
69
 
56
70
  .my-indicator-label__date {
57
- @include oLabelsIndicatorContent($opts: ('element': 'timestamp'));
71
+ @include oLabelsIndicatorContent(
72
+ $opts: (
73
+ 'element': 'timestamp',
74
+ )
75
+ );
58
76
  }
package/main.scss CHANGED
@@ -1,15 +1,12 @@
1
1
  @import '@financial-times/math';
2
- @import '@financial-times/o-spacing/main';
3
2
  @import '@financial-times/o-brand/main';
4
- @import "@financial-times/o-colors/main";
5
- @import "@financial-times/o-typography/main";
6
- @import "@financial-times/o-editorial-typography/main";
3
+ @import '@financial-times/o-private-foundation/main';
7
4
 
8
- @import "src/scss/colors";
9
- @import "src/scss/brand";
10
- @import "src/scss/variables";
11
- @import "src/scss/placeholders";
12
- @import "src/scss/mixins";
5
+ @import 'src/scss/colors';
6
+ @import 'src/scss/brand';
7
+ @import 'src/scss/variables';
8
+ @import 'src/scss/placeholders';
9
+ @import 'src/scss/mixins';
13
10
 
14
11
  /// Outputs all available features and styles for labels.
15
12
  ///
@@ -26,17 +23,19 @@
26
23
  /// @example scss - Timestamp label with inverse modifier class
27
24
  /// @include oLabels($opts: ('timestamp': ('inverse': true));
28
25
  /// @access public
29
- @mixin oLabels($opts: (
30
- 'sizes': $_o-labels-standard-sizes,
31
- 'states': $_o-labels-standard-states,
32
- 'indicators': (
33
- 'status': $_o-labels-indicator-status,
34
- 'inverse': true,
35
- ),
36
- 'timestamp': (
37
- 'inverse': true
26
+ @mixin oLabels(
27
+ $opts: (
28
+ 'sizes': $_o-labels-standard-sizes,
29
+ 'states': $_o-labels-standard-states,
30
+ 'indicators': (
31
+ 'status': $_o-labels-indicator-status,
32
+ 'inverse': true,
33
+ ),
34
+ 'timestamp': (
35
+ 'inverse': true,
36
+ ),
38
37
  )
39
- )) {
38
+ ) {
40
39
  // Get standard labels to include
41
40
  $standard-label-sizes: map-get($opts, 'sizes');
42
41
  $standard-label-states: map-get($opts, 'states');
@@ -92,16 +91,29 @@
92
91
  // Indicator label styles
93
92
  @if $indicator-label-status and _oLabelsSupports('indicators') {
94
93
  .o-labels-indicator {
95
- @include oLabelsIndicatorContent($opts: ('block': true));
94
+ @include oLabelsIndicatorContent(
95
+ $opts: (
96
+ 'block': true,
97
+ )
98
+ );
96
99
  }
97
100
 
98
101
  .o-labels-indicator__status {
99
- @include oLabelsIndicatorContent($opts: ('element': 'status'));
102
+ @include oLabelsIndicatorContent(
103
+ $opts: (
104
+ 'element': 'status',
105
+ )
106
+ );
100
107
  }
101
108
 
102
109
  @each $indicator-status in $indicator-label-status {
103
110
  .o-labels-indicator--#{$indicator-status} {
104
- @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': $indicator-status));
111
+ @include oLabelsIndicatorContent(
112
+ $opts: (
113
+ 'block': true,
114
+ 'modifier': $indicator-status,
115
+ )
116
+ );
105
117
  }
106
118
  }
107
119
 
@@ -112,16 +124,16 @@
112
124
  }
113
125
 
114
126
  .o-labels-indicator.o-labels-indicator--badge {
115
- padding: oSpacingByName('s1') oSpacingByName('s2');
127
+ padding: oPrivateSpacingByName('s1') oPrivateSpacingByName('s2');
116
128
  font-weight: oFontsWeight('bold');
117
- color: oColorsByName('white');
129
+ color: oPrivateFoundationGet('o3-color-palette-white');
118
130
  border-radius: div(2, 16) * 1rem;
119
131
  &.o-labels-indicator--live {
120
- background: oColorsByName('crimson');
132
+ background: oPrivateFoundationGet('o3-color-palette-crimson');
121
133
  }
122
134
 
123
135
  &.o-labels-indicator--closed {
124
- background: oColorsByName('black-60');
136
+ background: oPrivateFoundationGet('o3-color-palette-black-60');
125
137
  }
126
138
  }
127
139
 
package/origami.json CHANGED
@@ -1,11 +1,7 @@
1
1
  {
2
2
  "origamiType": "component",
3
3
  "origamiVersion": "2.0",
4
- "brands": [
5
- "core",
6
- "internal",
7
- "whitelabel"
8
- ],
4
+ "brands": ["core", "internal", "whitelabel"],
9
5
  "support": "https://github.com/Financial-Times/origami/issues/new?labels=o-labels,components",
10
6
  "supportContact": {
11
7
  "email": "origami.support@ft.com",
@@ -32,9 +28,7 @@
32
28
  "description": "States used to differentiate between types of content.",
33
29
  "template": "/demos/src/states.mustache",
34
30
  "data": "demos/src/data/states-content.json",
35
- "brands": [
36
- "core"
37
- ]
31
+ "brands": ["core"]
38
32
  },
39
33
  {
40
34
  "name": "lifecycle-states",
@@ -42,9 +36,7 @@
42
36
  "description": "States used to represent stages in the product lifecycle.",
43
37
  "template": "/demos/src/states.mustache",
44
38
  "data": "demos/src/data/states-lifecycle.json",
45
- "brands": [
46
- "core"
47
- ]
39
+ "brands": ["core"]
48
40
  },
49
41
  {
50
42
  "name": "service-tier-states",
@@ -52,9 +44,7 @@
52
44
  "description": "States used to represent the different service support tiers.",
53
45
  "template": "/demos/src/states.mustache",
54
46
  "data": "demos/src/data/states-service-tier.json",
55
- "brands": [
56
- "internal"
57
- ]
47
+ "brands": ["internal"]
58
48
  },
59
49
  {
60
50
  "name": "support-status-states",
@@ -62,9 +52,7 @@
62
52
  "description": "States used to represent the different support levels of Origami components.",
63
53
  "template": "/demos/src/states.mustache",
64
54
  "data": "demos/src/data/states-support-status.json",
65
- "brands": [
66
- "internal"
67
- ]
55
+ "brands": ["internal"]
68
56
  },
69
57
  {
70
58
  "name": "palette-states",
@@ -72,23 +60,19 @@
72
60
  "description": "Colour palette based states do not specify a particular usecase, and may be used flexibility.",
73
61
  "template": "/demos/src/states.mustache",
74
62
  "data": "demos/src/data/color-palette-states.json",
75
- "brands": [
76
- "internal"
77
- ]
63
+ "brands": ["internal"]
78
64
  },
79
65
  {
80
66
  "name": "typography",
81
67
  "title": "Typography",
82
- "description": "Labels sitting in line with text that's styled with o-typography.",
68
+ "description": "Labels sitting in line with text.",
83
69
  "template": "/demos/src/typography.mustache"
84
70
  },
85
71
  {
86
72
  "name": "indicators",
87
73
  "title": "Indicators",
88
74
  "description": "",
89
- "brands": [
90
- "core"
91
- ],
75
+ "brands": ["core"],
92
76
  "template": "/demos/src/indicators.mustache"
93
77
  },
94
78
  {
@@ -96,14 +80,10 @@
96
80
  "title": "Inverse Indicators",
97
81
  "description": "",
98
82
  "data": {
99
- "modifiers": [
100
- "inverse"
101
- ]
83
+ "modifiers": ["inverse"]
102
84
  },
103
85
  "documentClasses": "demo-inverse",
104
- "brands": [
105
- "core"
106
- ],
86
+ "brands": ["core"],
107
87
  "template": "/demos/src/indicators.mustache"
108
88
  },
109
89
  {
@@ -111,31 +91,23 @@
111
91
  "title": "Badge Indicators",
112
92
  "description": "",
113
93
  "data": {
114
- "modifiers": [
115
- "badge"
116
- ]
94
+ "modifiers": ["badge"]
117
95
  },
118
- "brands": [
119
- "core"
120
- ],
96
+ "brands": ["core"],
121
97
  "template": "/demos/src/indicators-badge.mustache"
122
98
  },
123
99
  {
124
100
  "name": "indicators-sizes",
125
101
  "title": "Indicator Sizes",
126
102
  "description": "All indicator labels adapt to the set font size. This demo shows using custom CSS to set the font size of indicator labels.",
127
- "brands": [
128
- "core"
129
- ],
103
+ "brands": ["core"],
130
104
  "template": "/demos/src/indicators-sizes.mustache"
131
105
  },
132
106
  {
133
107
  "name": "timestamp",
134
108
  "title": "Timestamp",
135
109
  "description": "",
136
- "brands": [
137
- "core"
138
- ],
110
+ "brands": ["core"],
139
111
  "template": "/demos/src/timestamp.mustache"
140
112
  },
141
113
  {
@@ -143,14 +115,10 @@
143
115
  "title": "Inverse Timestamp",
144
116
  "description": "",
145
117
  "data": {
146
- "modifiers": [
147
- "inverse"
148
- ]
118
+ "modifiers": ["inverse"]
149
119
  },
150
120
  "documentClasses": "demo-inverse",
151
- "brands": [
152
- "core"
153
- ],
121
+ "brands": ["core"],
154
122
  "template": "/demos/src/timestamp.mustache"
155
123
  },
156
124
  {
@@ -169,9 +137,7 @@
169
137
  "data": {
170
138
  "indicator": true
171
139
  },
172
- "brands": [
173
- "core"
174
- ],
140
+ "brands": ["core"],
175
141
  "hidden": true
176
142
  },
177
143
  {
package/package.json CHANGED
@@ -1,39 +1,36 @@
1
1
  {
2
- "name": "@financial-times/o-labels",
3
- "version": "6.5.8",
4
- "description": "Labels for content classification or to emphasise a value. Provides customisation options with the FT colour palette.",
5
- "keywords": [
6
- "label",
7
- "tag"
8
- ],
9
- "homepage": "https://registry.origami.ft.com/components/o-labels",
10
- "bugs": {
11
- "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-labels,components",
12
- "email": "origami.support@ft.com"
13
- },
14
- "license": "MIT",
15
- "type": "module",
16
- "scripts": {
17
- "start": "npx serve ./demos/local",
18
- "build": "bash ../../scripts/component/build.bash",
19
- "test": "bash ../../scripts/component/test.bash",
20
- "debug:js": "bash ../../scripts/component/debug-js.bash",
21
- "lint": "bash ../../scripts/component/lint.bash",
22
- "watch": "bash ../../scripts/component/watch.bash"
23
- },
24
- "peerDependencies": {
25
- "@financial-times/o-brand": "^4.1.0",
26
- "@financial-times/o-colors": "^6.5.0",
27
- "@financial-times/o-editorial-typography": "^2.0.1",
28
- "@financial-times/o-spacing": "^3.0.0",
29
- "@financial-times/o-typography": "^7.4.1"
30
- },
31
- "devDependencies": {
32
- "@financial-times/o-fonts": "^5.2.0",
33
- "@financial-times/o-normalise": "^3.3.0"
34
- },
35
- "engines": {
36
- "npm": ">7"
37
- },
38
- "private": false
2
+ "name": "@financial-times/o-labels",
3
+ "version": "7.0.1",
4
+ "description": "Labels for content classification or to emphasise a value. Provides customisation options with the FT colour palette.",
5
+ "keywords": [
6
+ "label",
7
+ "tag"
8
+ ],
9
+ "homepage": "https://registry.origami.ft.com/components/o-labels",
10
+ "bugs": {
11
+ "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-labels,components",
12
+ "email": "origami.support@ft.com"
13
+ },
14
+ "license": "MIT",
15
+ "type": "module",
16
+ "scripts": {
17
+ "start": "npx serve ./demos/local",
18
+ "build": "bash ../../scripts/component/build.bash",
19
+ "test": "bash ../../scripts/component/test.bash",
20
+ "debug:js": "bash ../../scripts/component/debug-js.bash",
21
+ "lint": "bash ../../scripts/component/lint.bash",
22
+ "watch": "bash ../../scripts/component/watch.bash"
23
+ },
24
+ "peerDependencies": {
25
+ "@financial-times/o-brand": "^4.1.0",
26
+ "@financial-times/o-private-foundation": "^1.0.0"
27
+ },
28
+ "devDependencies": {
29
+ "@financial-times/o-date": "^7.0.0",
30
+ "@financial-times/o-normalise": "^3.3.2"
31
+ },
32
+ "engines": {
33
+ "npm": ">7"
34
+ },
35
+ "private": false
39
36
  }
package/src/scss/_brand.scss CHANGED
@@ -14,16 +14,16 @@
14
14
  // Define shared brand configurations
15
15
  $_o-labels-shared-brand-config: (
16
16
  font-scale: -1,
17
- padding-vertical: oSpacingByName('s1'),
18
- padding-horizontal: oSpacingByName('s2'),
17
+ padding-vertical: oPrivateSpacingByName('s1'),
18
+ padding-horizontal: oPrivateSpacingByName('s2'),
19
19
  border-width: 1px,
20
20
  'big': (
21
21
  font-scale: 0,
22
- padding-vertical: oSpacingByName('s2'),
23
- padding-horizontal: oSpacingByName('s2')
22
+ padding-vertical: oPrivateSpacingByName('s2'),
23
+ padding-horizontal: oPrivateSpacingByName('s2')
24
24
  ),
25
25
  'small': (
26
- font-scale: -2,
26
+ font-scale: -1,
27
27
  padding-vertical: 2px,
28
28
  padding-horizontal: 4px
29
29
  )
@@ -33,21 +33,21 @@ $_o-labels-shared-brand-config: (
33
33
  @if oBrandIs('core') {
34
34
  @include oBrandDefine('o-labels', 'core', (
35
35
  'variables': map-merge($_o-labels-shared-brand-config, (
36
- text-color: oColorsByName('black'),
37
- background-color: oColorsByName('wheat'),
36
+ text-color: oPrivateFoundationGet('o3-color-palette-black'),
37
+ background-color: oPrivateFoundationGet('o3-color-palette-wheat'),
38
38
  'content-commercial': (
39
- background-color: oColorsByName('o-labels/commercial-content')
39
+ background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', $percentage: 83.334)
40
40
  ),
41
41
  'content-premium': (
42
- background-color: oColorsByName('black')
42
+ background-color: oPrivateFoundationGet('o3-color-palette-black')
43
43
  ),
44
44
  'lifecycle-beta': (
45
- background-color: oColorsByName('paper'),
46
- border-color: oColorsByName('black-20'),
47
- text-color: oColorsByName('black-80'),
45
+ background-color: oPrivateFoundationGet('o3-color-palette-paper'),
46
+ border-color: oPrivateFoundationGet('o3-color-palette-black-20'),
47
+ text-color: oPrivateFoundationGet('o3-color-palette-black-80'),
48
48
  text-transform: uppercase,
49
- padding-vertical: oSpacingByName('s1'),
50
- padding-horizontal: oSpacingByName('s3'),
49
+ padding-vertical: oPrivateSpacingByName('s1'),
50
+ padding-horizontal: oPrivateSpacingByName('s3'),
51
51
  )
52
52
  )),
53
53
  'supports-variants': (
@@ -66,21 +66,21 @@ $_o-labels-shared-brand-config: (
66
66
  @if oBrandIs('internal') {
67
67
  @include oBrandDefine('o-labels', 'internal', (
68
68
  'variables': map-merge($_o-labels-shared-brand-config, (
69
- background-color: oColorsMix('black', 'white', 10),
69
+ background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10),
70
70
  'support-active': (
71
- background-color: oColorsMix('jade', 'black', 70)
71
+ background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
72
72
  ),
73
73
  'support-dead': (
74
- background-color: oColorsByName('black')
74
+ background-color: oPrivateFoundationGet('o3-color-palette-black')
75
75
  ),
76
76
  'support-deprecated': (
77
- background-color: oColorsByName('crimson')
77
+ background-color: oPrivateFoundationGet('o3-color-palette-crimson')
78
78
  ),
79
79
  'support-experimental': (
80
- background-color: oColorsByName('lemon')
80
+ background-color: oPrivateFoundationGet('o3-color-palette-lemon')
81
81
  ),
82
82
  'support-maintained': (
83
- background-color: oColorsMix('jade', 'black', 70)
83
+ background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
84
84
  ),
85
85
  'tier-bronze': (
86
86
  // NOTE: service tiers not in o-colors yet, will be moved if another
@@ -103,25 +103,25 @@ $_o-labels-shared-brand-config: (
103
103
  background-color: #c0c0c0
104
104
  ),
105
105
  'oxford': (
106
- background-color: oColorsByName('oxford')
106
+ background-color: oPrivateFoundationGet('o3-color-palette-oxford')
107
107
  ),
108
108
  'teal': (
109
- background-color: oColorsByName('teal')
109
+ background-color: oPrivateFoundationGet('o3-color-palette-teal-50')
110
110
  ),
111
111
  'lemon': (
112
- background-color: oColorsByName('lemon')
112
+ background-color: oPrivateFoundationGet('o3-color-palette-lemon')
113
113
  ),
114
114
  'slate': (
115
- background-color: oColorsByName('slate')
115
+ background-color: oPrivateFoundationGet('o3-color-palette-slate')
116
116
  ),
117
117
  'jade': (
118
- background-color: oColorsByName('jade')
118
+ background-color: oPrivateFoundationGet('o3-color-palette-jade')
119
119
  ),
120
120
  'crimson': (
121
- background-color: oColorsByName('crimson')
121
+ background-color: oPrivateFoundationGet('o3-color-palette-crimson')
122
122
  ),
123
123
  'mandarin': (
124
- background-color: oColorsByName('mandarin')
124
+ background-color: oPrivateFoundationGet('o3-color-palette-mandarin')
125
125
  )
126
126
  )),
127
127
  'supports-variants': (
@@ -151,7 +151,7 @@ $_o-labels-shared-brand-config: (
151
151
  @if oBrandIs('whitelabel') {
152
152
  @include oBrandDefine('o-labels', 'whitelabel', (
153
153
  'variables': map-merge($_o-labels-shared-brand-config, (
154
- background-color: oColorsMix('black', 'white', 10)
154
+ background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10)
155
155
  )),
156
156
  'supports-variants': (
157
157
  'big',
package/src/scss/_colors.scss CHANGED
@@ -1,5 +0,0 @@
1
- // Set commercial content colour. The precise jade mix maintains the same colour
2
- // as was previously generated with an o-colors tone.
3
- @if oBrandIs('core') {
4
- @include oColorsSetColor('o-labels/commercial-content', oColorsMix('jade', 'black', $percentage: 83.334));
5
- }