@cloudflare/component-label 3.2.58 → 3.3.3

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 (5) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/es/Label.js +81 -47
  3. package/index.d.ts +1 -0
  4. package/lib/Label.js +58 -25
  5. package/package.json +5 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,50 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.3.3](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-label@3.3.2...@cloudflare/component-label@3.3.3) (2021-09-22)
7
+
8
+ **Note:** Version bump only for package @cloudflare/component-label
9
+
10
+
11
+
12
+
13
+
14
+ ## [3.3.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-label@3.3.1...@cloudflare/component-label@3.3.2) (2021-09-22)
15
+
16
+ **Note:** Version bump only for package @cloudflare/component-label
17
+
18
+
19
+
20
+
21
+
22
+ ## [3.3.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-label@3.3.0...@cloudflare/component-label@3.3.1) (2021-09-22)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * **component-label:** UI-4682 Fix pulse bug ([917fdde](http://stash.cfops.it:7999/fe/stratus/commits/917fdde))
28
+
29
+
30
+
31
+
32
+
33
+ # [3.3.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-label@3.2.58...@cloudflare/component-label@3.3.0) (2021-09-21)
34
+
35
+
36
+ ### Bug Fixes
37
+
38
+ * **component-label:** UI-4631 Add missing package ([c130f70](http://stash.cfops.it:7999/fe/stratus/commits/c130f70))
39
+ * **component-label:** UI-4631 Update label colors for dark mode ([1c84c4f](http://stash.cfops.it:7999/fe/stratus/commits/1c84c4f))
40
+
41
+
42
+ ### Features
43
+
44
+ * **component-label:** LOUI-2695: add type for pulse prop ([b6f8203](http://stash.cfops.it:7999/fe/stratus/commits/b6f8203))
45
+
46
+
47
+
48
+
49
+
6
50
  ## [3.2.58](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-label@3.2.57...@cloudflare/component-label@3.2.58) (2021-09-17)
7
51
 
8
52
  **Note:** Version bump only for package @cloudflare/component-label
package/es/Label.js CHANGED
@@ -15,28 +15,56 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
15
15
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
16
16
 
17
17
  import PropTypes from 'prop-types';
18
+ import { isDarkMode } from '@cloudflare/style-const';
18
19
  import { createStyledComponent } from '@cloudflare/style-container';
19
20
  import { transparentize } from 'polished';
20
- const hueColors = {
21
- gray: {
22
- bg: 'gray.8',
23
- color: 'gray.1'
24
- },
25
- blue: {
26
- bg: 'blue.8',
27
- color: 'blue.1'
28
- },
29
- green: {
30
- bg: 'green.8',
31
- color: 'green.0'
32
- },
33
- orange: {
34
- bg: 'orange.8',
35
- color: 'orange.1'
36
- },
37
- red: {
38
- bg: 'red.8',
39
- color: 'red.1'
21
+
22
+ const hueColors = hue => {
23
+ switch (hue) {
24
+ case 'red':
25
+ return isDarkMode() ? {
26
+ backgroundColor: 'red.3',
27
+ color: 'gray.9'
28
+ } : {
29
+ backgroundColor: 'red.8',
30
+ color: 'red.1'
31
+ };
32
+
33
+ case 'blue':
34
+ return isDarkMode() ? {
35
+ backgroundColor: 'blue.3',
36
+ color: 'blue.9'
37
+ } : {
38
+ backgroundColor: 'blue.8',
39
+ color: 'blue.1'
40
+ };
41
+
42
+ case 'green':
43
+ return isDarkMode() ? {
44
+ backgroundColor: 'green.3',
45
+ color: 'gray.9'
46
+ } : {
47
+ backgroundColor: 'green.8',
48
+ color: 'green.0'
49
+ };
50
+
51
+ case 'orange':
52
+ return isDarkMode() ? {
53
+ backgroundColor: 'orange.2',
54
+ color: 'gray.9'
55
+ } : {
56
+ backgroundColor: 'orange.8',
57
+ color: 'orange.1'
58
+ };
59
+
60
+ default:
61
+ return isDarkMode() ? {
62
+ backgroundColor: 'gray.2',
63
+ color: 'gray.9'
64
+ } : {
65
+ backgroundColor: 'gray.8',
66
+ color: 'gray.1'
67
+ };
40
68
  }
41
69
  };
42
70
 
@@ -53,34 +81,40 @@ const styles = ({
53
81
  theme,
54
82
  hue = 'gray',
55
83
  pulse = false
56
- }) => _objectSpread({
57
- alignItems: 'center',
58
- borderRadius: '50px',
59
- color: hueColors[hue].color,
60
- display: 'inline-flex',
61
- fontSize: 1,
62
- fontWeight: 400,
63
- lineHeight: theme.lineHeights.solid,
64
- userSelect: 'none',
65
- whiteSpace: 'nowrap',
66
- px: 2,
67
- py: 1,
68
- backgroundColor: hueColors[hue].bg
69
- }, pulse && {
70
- animationName: {
71
- '0%': {
72
- boxShadow: `0 0 0 0 ${transparentize(0.4, toHexString(hueColors[hue].bg, theme))}`
73
- },
74
- '70%': {
75
- boxShadow: `0 0 0 10px ${transparentize(1, toHexString(hueColors[hue].bg, theme))}`
84
+ }) => {
85
+ const _hueColors = hueColors(hue),
86
+ color = _hueColors.color,
87
+ backgroundColor = _hueColors.backgroundColor;
88
+
89
+ return _objectSpread({
90
+ alignItems: 'center',
91
+ borderRadius: '50px',
92
+ color,
93
+ display: 'inline-flex',
94
+ fontSize: 1,
95
+ fontWeight: 400,
96
+ lineHeight: theme.lineHeights.solid,
97
+ userSelect: 'none',
98
+ whiteSpace: 'nowrap',
99
+ px: 2,
100
+ py: 1,
101
+ backgroundColor
102
+ }, pulse && {
103
+ animationName: {
104
+ '0%': {
105
+ boxShadow: `0 0 0 0 ${transparentize(0.4, toHexString(backgroundColor, theme))}`
106
+ },
107
+ '70%': {
108
+ boxShadow: `0 0 0 10px ${transparentize(1, toHexString(backgroundColor, theme))}`
109
+ },
110
+ '100%': {
111
+ boxShadow: `0 0 0 0 ${transparentize(1, toHexString(backgroundColor, theme))}`
112
+ }
76
113
  },
77
- '100%': {
78
- boxShadow: `0 0 0 0 ${transparentize(1, toHexString(hueColors[hue].bg, theme))}`
79
- }
80
- },
81
- animationDuration: '2s',
82
- animationIterationCount: 'infinite'
83
- });
114
+ animationDuration: '2s',
115
+ animationIterationCount: 'infinite'
116
+ });
117
+ };
84
118
 
85
119
  const Label = createStyledComponent(styles, 'span');
86
120
  Label.propTypes = {
package/index.d.ts CHANGED
@@ -6,6 +6,7 @@ export type LabelHue = 'gray' | 'blue' | 'green' | 'orange' | 'red';
6
6
  export interface LabelProps {
7
7
  hue?: LabelHue;
8
8
  style?: React.CSSProperties;
9
+ pulse?: boolean;
9
10
  }
10
11
 
11
12
  export class Label extends React.Component<LabelProps & TfelaMProps> {}
package/lib/Label.js CHANGED
@@ -7,6 +7,8 @@ exports.default = void 0;
7
7
 
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
 
10
+ var _styleConst = require("@cloudflare/style-const");
11
+
10
12
  var _styleContainer = require("@cloudflare/style-container");
11
13
 
12
14
  var _polished = require("polished");
@@ -29,26 +31,52 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
29
31
 
30
32
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
31
33
 
32
- var hueColors = {
33
- gray: {
34
- bg: 'gray.8',
35
- color: 'gray.1'
36
- },
37
- blue: {
38
- bg: 'blue.8',
39
- color: 'blue.1'
40
- },
41
- green: {
42
- bg: 'green.8',
43
- color: 'green.0'
44
- },
45
- orange: {
46
- bg: 'orange.8',
47
- color: 'orange.1'
48
- },
49
- red: {
50
- bg: 'red.8',
51
- color: 'red.1'
34
+ var hueColors = function hueColors(hue) {
35
+ switch (hue) {
36
+ case 'red':
37
+ return (0, _styleConst.isDarkMode)() ? {
38
+ backgroundColor: 'red.3',
39
+ color: 'gray.9'
40
+ } : {
41
+ backgroundColor: 'red.8',
42
+ color: 'red.1'
43
+ };
44
+
45
+ case 'blue':
46
+ return (0, _styleConst.isDarkMode)() ? {
47
+ backgroundColor: 'blue.3',
48
+ color: 'blue.9'
49
+ } : {
50
+ backgroundColor: 'blue.8',
51
+ color: 'blue.1'
52
+ };
53
+
54
+ case 'green':
55
+ return (0, _styleConst.isDarkMode)() ? {
56
+ backgroundColor: 'green.3',
57
+ color: 'gray.9'
58
+ } : {
59
+ backgroundColor: 'green.8',
60
+ color: 'green.0'
61
+ };
62
+
63
+ case 'orange':
64
+ return (0, _styleConst.isDarkMode)() ? {
65
+ backgroundColor: 'orange.2',
66
+ color: 'gray.9'
67
+ } : {
68
+ backgroundColor: 'orange.8',
69
+ color: 'orange.1'
70
+ };
71
+
72
+ default:
73
+ return (0, _styleConst.isDarkMode)() ? {
74
+ backgroundColor: 'gray.2',
75
+ color: 'gray.9'
76
+ } : {
77
+ backgroundColor: 'gray.8',
78
+ color: 'gray.1'
79
+ };
52
80
  }
53
81
  };
54
82
 
@@ -67,10 +95,15 @@ var styles = function styles(_ref) {
67
95
  hue = _ref$hue === void 0 ? 'gray' : _ref$hue,
68
96
  _ref$pulse = _ref.pulse,
69
97
  pulse = _ref$pulse === void 0 ? false : _ref$pulse;
98
+
99
+ var _hueColors = hueColors(hue),
100
+ color = _hueColors.color,
101
+ backgroundColor = _hueColors.backgroundColor;
102
+
70
103
  return _objectSpread({
71
104
  alignItems: 'center',
72
105
  borderRadius: '50px',
73
- color: hueColors[hue].color,
106
+ color: color,
74
107
  display: 'inline-flex',
75
108
  fontSize: 1,
76
109
  fontWeight: 400,
@@ -79,17 +112,17 @@ var styles = function styles(_ref) {
79
112
  whiteSpace: 'nowrap',
80
113
  px: 2,
81
114
  py: 1,
82
- backgroundColor: hueColors[hue].bg
115
+ backgroundColor: backgroundColor
83
116
  }, pulse && {
84
117
  animationName: {
85
118
  '0%': {
86
- boxShadow: "0 0 0 0 ".concat((0, _polished.transparentize)(0.4, toHexString(hueColors[hue].bg, theme)))
119
+ boxShadow: "0 0 0 0 ".concat((0, _polished.transparentize)(0.4, toHexString(backgroundColor, theme)))
87
120
  },
88
121
  '70%': {
89
- boxShadow: "0 0 0 10px ".concat((0, _polished.transparentize)(1, toHexString(hueColors[hue].bg, theme)))
122
+ boxShadow: "0 0 0 10px ".concat((0, _polished.transparentize)(1, toHexString(backgroundColor, theme)))
90
123
  },
91
124
  '100%': {
92
- boxShadow: "0 0 0 0 ".concat((0, _polished.transparentize)(1, toHexString(hueColors[hue].bg, theme)))
125
+ boxShadow: "0 0 0 0 ".concat((0, _polished.transparentize)(1, toHexString(backgroundColor, theme)))
93
126
  }
94
127
  },
95
128
  animationDuration: '2s',
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-label",
3
3
  "description": "Cloudflare Label Component",
4
- "version": "3.2.58",
4
+ "version": "3.3.3",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,8 +11,9 @@
11
11
  "access": "public"
12
12
  },
13
13
  "dependencies": {
14
- "@cloudflare/style-container": "^7.4.0",
15
- "@cloudflare/types": "^6.8.21",
14
+ "@cloudflare/style-const": "^5.0.1",
15
+ "@cloudflare/style-container": "^7.4.3",
16
+ "@cloudflare/types": "^6.8.22",
16
17
  "polished": "^1.9.3",
17
18
  "prop-types": "^15.6.0"
18
19
  },
@@ -30,5 +31,5 @@
30
31
  "test-coverage": "stratus test --coverage",
31
32
  "test-watch": "stratus test --watch"
32
33
  },
33
- "gitHead": "bc6771eca21284483f36f77a265d7e5ac79a76a8"
34
+ "gitHead": "b85ff5329b50da2ad71586f3cecf47b4f1d94f2b"
34
35
  }