@zendeskgarden/react-loaders 8.69.3 → 8.69.4

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 (3) hide show
  1. package/dist/index.cjs.js +14 -26
  2. package/dist/index.esm.js +14 -26
  3. package/package.json +3 -3
package/dist/index.cjs.js CHANGED
@@ -49,17 +49,15 @@ const StyledDotsCircle = styled__default.default.circle.attrs({
49
49
  StyledDotsCircle.defaultProps = {
50
50
  theme: reactTheming.DEFAULT_THEME
51
51
  };
52
+ const animationStyles = (animationName, props) => {
53
+ return styled.css(["animation:", " ", "ms linear infinite;"], animationName, props.duration);
54
+ };
52
55
  const StyledDotsCircleOne = styled__default.default(StyledDotsCircle).attrs({
53
56
  cx: 9
54
57
  }).withConfig({
55
58
  displayName: "StyledDots__StyledDotsCircleOne",
56
59
  componentId: "sc-1ltah7e-1"
57
- })(["animation:", ";"], _ref => {
58
- let {
59
- duration
60
- } = _ref;
61
- return styled.css(["", " ", "ms linear infinite"], dotOneKeyframes, duration);
62
- });
60
+ })(["", ";"], props => animationStyles(dotOneKeyframes, props));
63
61
  StyledDotsCircleOne.defaultProps = {
64
62
  theme: reactTheming.DEFAULT_THEME
65
63
  };
@@ -68,12 +66,7 @@ const StyledDotsCircleTwo = styled__default.default(StyledDotsCircle).attrs(() =
68
66
  })).withConfig({
69
67
  displayName: "StyledDots__StyledDotsCircleTwo",
70
68
  componentId: "sc-1ltah7e-2"
71
- })(["animation:", ";"], _ref2 => {
72
- let {
73
- duration
74
- } = _ref2;
75
- return styled.css(["", " ", "ms linear infinite"], dotTwoKeyframes, duration);
76
- });
69
+ })(["", ";"], props => animationStyles(dotTwoKeyframes, props));
77
70
  StyledDotsCircleTwo.defaultProps = {
78
71
  theme: reactTheming.DEFAULT_THEME
79
72
  };
@@ -82,12 +75,7 @@ const StyledDotsCircleThree = styled__default.default(StyledDotsCircle).attrs(()
82
75
  })).withConfig({
83
76
  displayName: "StyledDots__StyledDotsCircleThree",
84
77
  componentId: "sc-1ltah7e-3"
85
- })(["animation:", ";"], _ref3 => {
86
- let {
87
- duration
88
- } = _ref3;
89
- return styled.css(["", " ", "ms linear infinite"], dotThreeKeyframes, duration);
90
- });
78
+ })(["", ";"], props => animationStyles(dotThreeKeyframes, props));
91
79
  StyledDotsCircleThree.defaultProps = {
92
80
  theme: reactTheming.DEFAULT_THEME
93
81
  };
@@ -95,7 +83,7 @@ StyledDotsCircleThree.defaultProps = {
95
83
  const COMPONENT_ID$5 = 'loaders.loading_placeholder';
96
84
  const StyledLoadingPlaceholder = styled__default.default.div.attrs({
97
85
  'data-garden-id': COMPONENT_ID$5,
98
- 'data-garden-version': '8.69.3',
86
+ 'data-garden-version': '8.69.4',
99
87
  role: 'progressbar'
100
88
  }).withConfig({
101
89
  displayName: "StyledLoadingPlaceholder",
@@ -119,7 +107,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
119
107
  const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
120
108
  const StyledProgressBackground = styled__default.default.div.attrs(props => ({
121
109
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
122
- 'data-garden-version': '8.69.3',
110
+ 'data-garden-version': '8.69.4',
123
111
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
124
112
  })).withConfig({
125
113
  displayName: "StyledProgress__StyledProgressBackground",
@@ -131,13 +119,13 @@ StyledProgressBackground.defaultProps = {
131
119
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
132
120
  const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
133
121
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
134
- 'data-garden-version': '8.69.3',
122
+ 'data-garden-version': '8.69.4',
135
123
  height: props.height || sizeToHeight(props.size, props.theme),
136
124
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
137
125
  })).withConfig({
138
126
  displayName: "StyledProgress__StyledProgressIndicator",
139
127
  componentId: "sc-2g8w4s-1"
140
- })(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentColor;width:", "%;height:", "px;", ""], props => props.borderRadius, props => props.value, props => props.height, props => reactTheming.retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
128
+ })(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentcolor;width:", "%;height:", "px;", ""], props => props.borderRadius, props => props.value, props => props.height, props => reactTheming.retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
141
129
  StyledProgressIndicator.defaultProps = {
142
130
  theme: reactTheming.DEFAULT_THEME
143
131
  };
@@ -174,7 +162,7 @@ const retrieveSkeletonGradient = _ref3 => {
174
162
  };
175
163
  const StyledSkeleton = styled__default.default.div.attrs({
176
164
  'data-garden-id': COMPONENT_ID$4,
177
- 'data-garden-version': '8.69.3'
165
+ 'data-garden-version': '8.69.4'
178
166
  }).withConfig({
179
167
  displayName: "StyledSkeleton",
180
168
  componentId: "sc-1raozze-0"
@@ -202,7 +190,7 @@ StyledSpinnerCircle.defaultProps = {
202
190
  };
203
191
 
204
192
  const StyledSVG = styled__default.default.svg.attrs(props => ({
205
- 'data-garden-version': '8.69.3',
193
+ 'data-garden-version': '8.69.4',
206
194
  xmlns: 'http://www.w3.org/2000/svg',
207
195
  width: props.width,
208
196
  height: props.height,
@@ -232,7 +220,7 @@ StyledCircle.defaultProps = {
232
220
  };
233
221
  const StyledInline = styled__default.default.svg.attrs(props => ({
234
222
  'data-garden-id': COMPONENT_ID$3,
235
- 'data-garden-version': '8.69.3',
223
+ 'data-garden-version': '8.69.4',
236
224
  viewBox: '0 0 16 4',
237
225
  width: props.size,
238
226
  height: props.size * 0.25
@@ -334,7 +322,7 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
334
322
  return (
335
323
  React__default.default.createElement(StyledProgressBackground, _extends({
336
324
  "data-garden-id": COMPONENT_ID$1,
337
- "data-garden-version": '8.69.3',
325
+ "data-garden-version": '8.69.4',
338
326
  "aria-valuemax": 100,
339
327
  "aria-valuemin": 0,
340
328
  "aria-valuenow": percentage,
package/dist/index.esm.js CHANGED
@@ -41,17 +41,15 @@ const StyledDotsCircle = styled.circle.attrs({
41
41
  StyledDotsCircle.defaultProps = {
42
42
  theme: DEFAULT_THEME
43
43
  };
44
+ const animationStyles = (animationName, props) => {
45
+ return css(["animation:", " ", "ms linear infinite;"], animationName, props.duration);
46
+ };
44
47
  const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
45
48
  cx: 9
46
49
  }).withConfig({
47
50
  displayName: "StyledDots__StyledDotsCircleOne",
48
51
  componentId: "sc-1ltah7e-1"
49
- })(["animation:", ";"], _ref => {
50
- let {
51
- duration
52
- } = _ref;
53
- return css(["", " ", "ms linear infinite"], dotOneKeyframes, duration);
54
- });
52
+ })(["", ";"], props => animationStyles(dotOneKeyframes, props));
55
53
  StyledDotsCircleOne.defaultProps = {
56
54
  theme: DEFAULT_THEME
57
55
  };
@@ -60,12 +58,7 @@ const StyledDotsCircleTwo = styled(StyledDotsCircle).attrs(() => ({
60
58
  })).withConfig({
61
59
  displayName: "StyledDots__StyledDotsCircleTwo",
62
60
  componentId: "sc-1ltah7e-2"
63
- })(["animation:", ";"], _ref2 => {
64
- let {
65
- duration
66
- } = _ref2;
67
- return css(["", " ", "ms linear infinite"], dotTwoKeyframes, duration);
68
- });
61
+ })(["", ";"], props => animationStyles(dotTwoKeyframes, props));
69
62
  StyledDotsCircleTwo.defaultProps = {
70
63
  theme: DEFAULT_THEME
71
64
  };
@@ -74,12 +67,7 @@ const StyledDotsCircleThree = styled(StyledDotsCircle).attrs(() => ({
74
67
  })).withConfig({
75
68
  displayName: "StyledDots__StyledDotsCircleThree",
76
69
  componentId: "sc-1ltah7e-3"
77
- })(["animation:", ";"], _ref3 => {
78
- let {
79
- duration
80
- } = _ref3;
81
- return css(["", " ", "ms linear infinite"], dotThreeKeyframes, duration);
82
- });
70
+ })(["", ";"], props => animationStyles(dotThreeKeyframes, props));
83
71
  StyledDotsCircleThree.defaultProps = {
84
72
  theme: DEFAULT_THEME
85
73
  };
@@ -87,7 +75,7 @@ StyledDotsCircleThree.defaultProps = {
87
75
  const COMPONENT_ID$5 = 'loaders.loading_placeholder';
88
76
  const StyledLoadingPlaceholder = styled.div.attrs({
89
77
  'data-garden-id': COMPONENT_ID$5,
90
- 'data-garden-version': '8.69.3',
78
+ 'data-garden-version': '8.69.4',
91
79
  role: 'progressbar'
92
80
  }).withConfig({
93
81
  displayName: "StyledLoadingPlaceholder",
@@ -111,7 +99,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
111
99
  const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
112
100
  const StyledProgressBackground = styled.div.attrs(props => ({
113
101
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
114
- 'data-garden-version': '8.69.3',
102
+ 'data-garden-version': '8.69.4',
115
103
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
116
104
  })).withConfig({
117
105
  displayName: "StyledProgress__StyledProgressBackground",
@@ -123,13 +111,13 @@ StyledProgressBackground.defaultProps = {
123
111
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
124
112
  const StyledProgressIndicator = styled.div.attrs(props => ({
125
113
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
126
- 'data-garden-version': '8.69.3',
114
+ 'data-garden-version': '8.69.4',
127
115
  height: props.height || sizeToHeight(props.size, props.theme),
128
116
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
129
117
  })).withConfig({
130
118
  displayName: "StyledProgress__StyledProgressIndicator",
131
119
  componentId: "sc-2g8w4s-1"
132
- })(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentColor;width:", "%;height:", "px;", ""], props => props.borderRadius, props => props.value, props => props.height, props => retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
120
+ })(["transition:width 0.1s ease-in-out;border-radius:", "px;background:currentcolor;width:", "%;height:", "px;", ""], props => props.borderRadius, props => props.value, props => props.height, props => retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props));
133
121
  StyledProgressIndicator.defaultProps = {
134
122
  theme: DEFAULT_THEME
135
123
  };
@@ -166,7 +154,7 @@ const retrieveSkeletonGradient = _ref3 => {
166
154
  };
167
155
  const StyledSkeleton = styled.div.attrs({
168
156
  'data-garden-id': COMPONENT_ID$4,
169
- 'data-garden-version': '8.69.3'
157
+ 'data-garden-version': '8.69.4'
170
158
  }).withConfig({
171
159
  displayName: "StyledSkeleton",
172
160
  componentId: "sc-1raozze-0"
@@ -194,7 +182,7 @@ StyledSpinnerCircle.defaultProps = {
194
182
  };
195
183
 
196
184
  const StyledSVG = styled.svg.attrs(props => ({
197
- 'data-garden-version': '8.69.3',
185
+ 'data-garden-version': '8.69.4',
198
186
  xmlns: 'http://www.w3.org/2000/svg',
199
187
  width: props.width,
200
188
  height: props.height,
@@ -224,7 +212,7 @@ StyledCircle.defaultProps = {
224
212
  };
225
213
  const StyledInline = styled.svg.attrs(props => ({
226
214
  'data-garden-id': COMPONENT_ID$3,
227
- 'data-garden-version': '8.69.3',
215
+ 'data-garden-version': '8.69.4',
228
216
  viewBox: '0 0 16 4',
229
217
  width: props.size,
230
218
  height: props.size * 0.25
@@ -326,7 +314,7 @@ const Progress = React.forwardRef((_ref, ref) => {
326
314
  return (
327
315
  React.createElement(StyledProgressBackground, _extends({
328
316
  "data-garden-id": COMPONENT_ID$1,
329
- "data-garden-version": '8.69.3',
317
+ "data-garden-version": '8.69.4',
330
318
  "aria-valuemax": 100,
331
319
  "aria-valuemin": 0,
332
320
  "aria-valuenow": percentage,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-loaders",
3
- "version": "8.69.3",
3
+ "version": "8.69.4",
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>",
@@ -32,7 +32,7 @@
32
32
  "styled-components": "^4.2.0 || ^5.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^8.69.3"
35
+ "@zendeskgarden/react-theming": "^8.69.4"
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": "c861fbeb70120b66b05d2ce3a26ccf3047659aa0"
47
+ "gitHead": "4911fa867a3c7e72f0c78dcea8748893c3070c17"
48
48
  }