@zendeskgarden/react-loaders 9.13.0 → 9.14.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 (8) hide show
  1. package/dist/esm/elements/Progress.js +1 -1
  2. package/dist/esm/styled/StyledInline.js +7 -10
  3. package/dist/esm/styled/StyledLoadingPlaceholder.js +1 -1
  4. package/dist/esm/styled/StyledProgress.js +8 -20
  5. package/dist/esm/styled/StyledSVG.js +7 -10
  6. package/dist/esm/styled/StyledSkeleton.js +1 -1
  7. package/dist/index.cjs.js +22 -40
  8. package/package.json +4 -4
package/dist/esm/elements/Progress.js CHANGED
@@ -31,7 +31,7 @@ const Progress = React.forwardRef(({
31
31
  return (
32
32
  React.createElement(StyledProgressBackground, Object.assign({
33
33
  "data-garden-id": COMPONENT_ID$1,
34
- "data-garden-version": '9.13.0',
34
+ "data-garden-version": '9.14.1',
35
35
  "aria-valuemax": 100,
36
36
  "aria-valuemin": 0,
37
37
  "aria-valuenow": percentage,
package/dist/esm/styled/StyledInline.js CHANGED
@@ -5,21 +5,18 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { keyframes, css } from 'styled-components';
8
- import { componentStyles, getColor } from '@zendeskgarden/react-theming';
8
+ import { componentStyles, getHueColor } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const COMPONENT_ID$3 = 'loaders.inline';
11
11
  const colorStyles = ({
12
12
  theme,
13
13
  $color
14
14
  }) => {
15
- const options = $color.includes('.') ? {
16
- variable: $color,
17
- theme
18
- } : {
19
- hue: $color,
20
- theme
21
- };
22
- return css(["color:", ";"], getColor(options));
15
+ const color = getHueColor({
16
+ theme,
17
+ value: $color
18
+ });
19
+ return css(["color:", ";"], color);
23
20
  };
24
21
  const retrieveAnimation = ({
25
22
  theme
@@ -34,7 +31,7 @@ const StyledCircle = styled.circle.attrs({
34
31
  })([""]);
35
32
  const StyledInline = styled.svg.attrs(props => ({
36
33
  'data-garden-id': COMPONENT_ID$3,
37
- 'data-garden-version': '9.13.0',
34
+ 'data-garden-version': '9.14.1',
38
35
  viewBox: '0 0 16 4',
39
36
  width: props.$size,
40
37
  height: props.$size * 0.25
package/dist/esm/styled/StyledLoadingPlaceholder.js CHANGED
@@ -25,7 +25,7 @@ const sizeStyles$1 = ({
25
25
  };
26
26
  const StyledLoadingPlaceholder = styled.div.attrs({
27
27
  'data-garden-id': COMPONENT_ID$5,
28
- 'data-garden-version': '9.13.0',
28
+ 'data-garden-version': '9.14.1',
29
29
  role: 'progressbar'
30
30
  }).withConfig({
31
31
  displayName: "StyledLoadingPlaceholder",
package/dist/esm/styled/StyledProgress.js CHANGED
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
- import { componentStyles, getColor } from '@zendeskgarden/react-theming';
8
+ import { componentStyles, getColor, getHueColor } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const sizeToHeight = ($size, theme) => {
11
11
  switch ($size) {
@@ -21,7 +21,7 @@ const sizeToBorderRadius = ($size, theme) => sizeToHeight($size, theme) / 2;
21
21
  const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
22
22
  const colorStyles$2 = ({
23
23
  theme,
24
- $color
24
+ $color = 'border.successEmphasis'
25
25
  }) => {
26
26
  const backgroundColor = getColor({
27
27
  theme,
@@ -34,27 +34,15 @@ const colorStyles$2 = ({
34
34
  hue: 'white'
35
35
  }
36
36
  });
37
- let options;
38
- if ($color) {
39
- options = $color.includes('.') ? {
40
- variable: $color,
41
- theme
42
- } : {
43
- hue: $color,
44
- theme
45
- };
46
- } else {
47
- options = {
48
- variable: 'border.successEmphasis',
49
- theme
50
- };
51
- }
52
- const foregroundColor = getColor(options);
37
+ const foregroundColor = getHueColor({
38
+ theme,
39
+ value: $color
40
+ });
53
41
  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
54
42
  };
55
43
  const StyledProgressBackground = styled.div.attrs({
56
44
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
57
- 'data-garden-version': '9.13.0'
45
+ 'data-garden-version': '9.14.1'
58
46
  }).withConfig({
59
47
  displayName: "StyledProgress__StyledProgressBackground",
60
48
  componentId: "sc-2g8w4s-0"
@@ -62,7 +50,7 @@ const StyledProgressBackground = styled.div.attrs({
62
50
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
63
51
  const StyledProgressIndicator = styled.div.attrs({
64
52
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
65
- 'data-garden-version': '9.13.0'
53
+ 'data-garden-version': '9.14.1'
66
54
  }).withConfig({
67
55
  displayName: "StyledProgress__StyledProgressIndicator",
68
56
  componentId: "sc-2g8w4s-1"
package/dist/esm/styled/StyledSVG.js CHANGED
@@ -6,21 +6,18 @@
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
8
  import { getValueAndUnit } from 'polished';
9
- import { componentStyles, getColor } from '@zendeskgarden/react-theming';
9
+ import { componentStyles, getHueColor } from '@zendeskgarden/react-theming';
10
10
  import { delayedVisibilityKeyframes } from '../utils/animations.js';
11
11
 
12
12
  const colorStyles$1 = ({
13
13
  theme,
14
14
  $color = 'inherit'
15
15
  }) => {
16
- const options = $color.includes('.') ? {
17
- variable: $color,
18
- theme
19
- } : {
20
- hue: $color,
21
- theme
22
- };
23
- return css(["color:", ";"], getColor(options));
16
+ const color = getHueColor({
17
+ theme,
18
+ value: $color
19
+ });
20
+ return css(["color:", ";"], color);
24
21
  };
25
22
  const sizeStyles = ({
26
23
  $containerWidth = '1em',
@@ -45,7 +42,7 @@ const delayedVisibilityStyles = ({
45
42
  return undefined;
46
43
  };
47
44
  const StyledSVG = styled.svg.attrs(props => ({
48
- 'data-garden-version': '9.13.0',
45
+ 'data-garden-version': '9.14.1',
49
46
  xmlns: 'http://www.w3.org/2000/svg',
50
47
  focusable: 'false',
51
48
  viewBox: `0 0 ${props.$width} ${props.$height}`,
package/dist/esm/styled/StyledSkeleton.js CHANGED
@@ -50,7 +50,7 @@ const gradientStyles = props => {
50
50
  };
51
51
  const StyledSkeleton = styled.div.attrs({
52
52
  'data-garden-id': COMPONENT_ID$4,
53
- 'data-garden-version': '9.13.0'
53
+ 'data-garden-version': '9.14.1'
54
54
  }).withConfig({
55
55
  displayName: "StyledSkeleton",
56
56
  componentId: "sc-1raozze-0"
package/dist/index.cjs.js CHANGED
@@ -70,7 +70,7 @@ const sizeStyles$1 = ({
70
70
  };
71
71
  const StyledLoadingPlaceholder = styled__default.default.div.attrs({
72
72
  'data-garden-id': COMPONENT_ID$5,
73
- 'data-garden-version': '9.13.0',
73
+ 'data-garden-version': '9.14.1',
74
74
  role: 'progressbar'
75
75
  }).withConfig({
76
76
  displayName: "StyledLoadingPlaceholder",
@@ -91,7 +91,7 @@ const sizeToBorderRadius = ($size, theme) => sizeToHeight($size, theme) / 2;
91
91
  const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
92
92
  const colorStyles$2 = ({
93
93
  theme,
94
- $color
94
+ $color = 'border.successEmphasis'
95
95
  }) => {
96
96
  const backgroundColor = reactTheming.getColor({
97
97
  theme,
@@ -104,27 +104,15 @@ const colorStyles$2 = ({
104
104
  hue: 'white'
105
105
  }
106
106
  });
107
- let options;
108
- if ($color) {
109
- options = $color.includes('.') ? {
110
- variable: $color,
111
- theme
112
- } : {
113
- hue: $color,
114
- theme
115
- };
116
- } else {
117
- options = {
118
- variable: 'border.successEmphasis',
119
- theme
120
- };
121
- }
122
- const foregroundColor = reactTheming.getColor(options);
107
+ const foregroundColor = reactTheming.getHueColor({
108
+ theme,
109
+ value: $color
110
+ });
123
111
  return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
124
112
  };
125
113
  const StyledProgressBackground = styled__default.default.div.attrs({
126
114
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
127
- 'data-garden-version': '9.13.0'
115
+ 'data-garden-version': '9.14.1'
128
116
  }).withConfig({
129
117
  displayName: "StyledProgress__StyledProgressBackground",
130
118
  componentId: "sc-2g8w4s-0"
@@ -132,7 +120,7 @@ const StyledProgressBackground = styled__default.default.div.attrs({
132
120
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
133
121
  const StyledProgressIndicator = styled__default.default.div.attrs({
134
122
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
135
- 'data-garden-version': '9.13.0'
123
+ 'data-garden-version': '9.14.1'
136
124
  }).withConfig({
137
125
  displayName: "StyledProgress__StyledProgressIndicator",
138
126
  componentId: "sc-2g8w4s-1"
@@ -181,7 +169,7 @@ const gradientStyles = props => {
181
169
  };
182
170
  const StyledSkeleton = styled__default.default.div.attrs({
183
171
  'data-garden-id': COMPONENT_ID$4,
184
- 'data-garden-version': '9.13.0'
172
+ 'data-garden-version': '9.14.1'
185
173
  }).withConfig({
186
174
  displayName: "StyledSkeleton",
187
175
  componentId: "sc-1raozze-0"
@@ -206,14 +194,11 @@ const colorStyles$1 = ({
206
194
  theme,
207
195
  $color = 'inherit'
208
196
  }) => {
209
- const options = $color.includes('.') ? {
210
- variable: $color,
211
- theme
212
- } : {
213
- hue: $color,
214
- theme
215
- };
216
- return styled.css(["color:", ";"], reactTheming.getColor(options));
197
+ const color = reactTheming.getHueColor({
198
+ theme,
199
+ value: $color
200
+ });
201
+ return styled.css(["color:", ";"], color);
217
202
  };
218
203
  const sizeStyles = ({
219
204
  $containerWidth = '1em',
@@ -238,7 +223,7 @@ const delayedVisibilityStyles = ({
238
223
  return undefined;
239
224
  };
240
225
  const StyledSVG = styled__default.default.svg.attrs(props => ({
241
- 'data-garden-version': '9.13.0',
226
+ 'data-garden-version': '9.14.1',
242
227
  xmlns: 'http://www.w3.org/2000/svg',
243
228
  focusable: 'false',
244
229
  viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -253,14 +238,11 @@ const colorStyles = ({
253
238
  theme,
254
239
  $color
255
240
  }) => {
256
- const options = $color.includes('.') ? {
257
- variable: $color,
258
- theme
259
- } : {
260
- hue: $color,
261
- theme
262
- };
263
- return styled.css(["color:", ";"], reactTheming.getColor(options));
241
+ const color = reactTheming.getHueColor({
242
+ theme,
243
+ value: $color
244
+ });
245
+ return styled.css(["color:", ";"], color);
264
246
  };
265
247
  const retrieveAnimation = ({
266
248
  theme
@@ -275,7 +257,7 @@ const StyledCircle = styled__default.default.circle.attrs({
275
257
  })([""]);
276
258
  const StyledInline = styled__default.default.svg.attrs(props => ({
277
259
  'data-garden-id': COMPONENT_ID$3,
278
- 'data-garden-version': '9.13.0',
260
+ 'data-garden-version': '9.14.1',
279
261
  viewBox: '0 0 16 4',
280
262
  width: props.$size,
281
263
  height: props.$size * 0.25
@@ -338,7 +320,7 @@ const Progress = React__default.default.forwardRef(({
338
320
  return (
339
321
  React__default.default.createElement(StyledProgressBackground, Object.assign({
340
322
  "data-garden-id": COMPONENT_ID$1,
341
- "data-garden-version": '9.13.0',
323
+ "data-garden-version": '9.14.1',
342
324
  "aria-valuemax": 100,
343
325
  "aria-valuemin": 0,
344
326
  "aria-valuenow": percentage,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-loaders",
3
- "version": "9.13.0",
3
+ "version": "9.14.1",
4
4
  "description": "Components relating to loaders in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -26,13 +26,13 @@
26
26
  "prop-types": "^15.5.7"
27
27
  },
28
28
  "peerDependencies": {
29
- "@zendeskgarden/react-theming": ">=9.0.0",
29
+ "@zendeskgarden/react-theming": ">=9.14.0",
30
30
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
31
31
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
32
32
  "styled-components": "^5.3.1 || ^6.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.13.0"
35
+ "@zendeskgarden/react-theming": "^9.14.1"
36
36
  },
37
37
  "keywords": [
38
38
  "components",
@@ -44,5 +44,5 @@
44
44
  "access": "public"
45
45
  },
46
46
  "zendeskgarden:src": "src/index.ts",
47
- "gitHead": "74cc076e1e82a1ee20df7733a9663c6096eefd83"
47
+ "gitHead": "76ad45c73a241922f1aac6239c0ae535e8f1a240"
48
48
  }