@zendeskgarden/react-loaders 9.0.0-next.24 → 9.0.0-next.25

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.
@@ -31,7 +31,7 @@ const Progress = React.forwardRef((_ref, ref) => {
31
31
  return (
32
32
  React.createElement(StyledProgressBackground, Object.assign({
33
33
  "data-garden-id": COMPONENT_ID,
34
- "data-garden-version": '9.0.0-next.24',
34
+ "data-garden-version": '9.0.0-next.25',
35
35
  "aria-valuemax": 100,
36
36
  "aria-valuemin": 0,
37
37
  "aria-valuenow": percentage,
@@ -6,7 +6,6 @@
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
8
  import { dotOneKeyframes, dotTwoKeyframes, dotThreeKeyframes } from '../utils/animations.js';
9
- import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
10
9
 
11
10
  const StyledDotsCircle = styled.circle.attrs({
12
11
  cy: 36,
@@ -15,9 +14,6 @@ const StyledDotsCircle = styled.circle.attrs({
15
14
  displayName: "StyledDots__StyledDotsCircle",
16
15
  componentId: "sc-1ltah7e-0"
17
16
  })([""]);
18
- StyledDotsCircle.defaultProps = {
19
- theme: DEFAULT_THEME
20
- };
21
17
  const animationStyles = (animationName, props) => {
22
18
  return css(["animation:", " ", "ms linear infinite;"], animationName, props.duration);
23
19
  };
@@ -27,26 +23,17 @@ const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
27
23
  displayName: "StyledDots__StyledDotsCircleOne",
28
24
  componentId: "sc-1ltah7e-1"
29
25
  })(["", ";"], props => animationStyles(dotOneKeyframes, props));
30
- StyledDotsCircleOne.defaultProps = {
31
- theme: DEFAULT_THEME
32
- };
33
26
  const StyledDotsCircleTwo = styled(StyledDotsCircle).attrs(() => ({
34
27
  cx: 40
35
28
  })).withConfig({
36
29
  displayName: "StyledDots__StyledDotsCircleTwo",
37
30
  componentId: "sc-1ltah7e-2"
38
31
  })(["", ";"], props => animationStyles(dotTwoKeyframes, props));
39
- StyledDotsCircleTwo.defaultProps = {
40
- theme: DEFAULT_THEME
41
- };
42
32
  const StyledDotsCircleThree = styled(StyledDotsCircle).attrs(() => ({
43
33
  cx: 71
44
34
  })).withConfig({
45
35
  displayName: "StyledDots__StyledDotsCircleThree",
46
36
  componentId: "sc-1ltah7e-3"
47
37
  })(["", ";"], props => animationStyles(dotThreeKeyframes, props));
48
- StyledDotsCircleThree.defaultProps = {
49
- theme: DEFAULT_THEME
50
- };
51
38
 
52
39
  export { StyledDotsCircleOne, StyledDotsCircleThree, StyledDotsCircleTwo };
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { keyframes } from 'styled-components';
8
- import { DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const COMPONENT_ID = 'loaders.inline';
11
11
  const retrieveAnimation = _ref => {
@@ -22,12 +22,9 @@ const StyledCircle = styled.circle.attrs({
22
22
  displayName: "StyledInline__StyledCircle",
23
23
  componentId: "sc-fxsb9l-0"
24
24
  })([""]);
25
- StyledCircle.defaultProps = {
26
- theme: DEFAULT_THEME
27
- };
28
25
  const StyledInline = styled.svg.attrs(props => ({
29
26
  'data-garden-id': COMPONENT_ID,
30
- 'data-garden-version': '9.0.0-next.24',
27
+ 'data-garden-version': '9.0.0-next.25',
31
28
  viewBox: '0 0 16 4',
32
29
  width: props.size,
33
30
  height: props.size * 0.25
@@ -35,8 +32,5 @@ const StyledInline = styled.svg.attrs(props => ({
35
32
  displayName: "StyledInline",
36
33
  componentId: "sc-fxsb9l-1"
37
34
  })(["color:", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], props => props.color, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => retrieveComponentStyles(COMPONENT_ID, props));
38
- StyledInline.defaultProps = {
39
- theme: DEFAULT_THEME
40
- };
41
35
 
42
36
  export { StyledCircle, StyledInline };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const COMPONENT_ID = 'loaders.loading_placeholder';
11
11
  const StyledLoadingPlaceholder = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.24',
13
+ 'data-garden-version': '9.0.0-next.25',
14
14
  role: 'progressbar'
15
15
  }).withConfig({
16
16
  displayName: "StyledLoadingPlaceholder",
17
17
  componentId: "sc-x3bwsx-0"
18
18
  })(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], props => props.width || '1em', props => props.height || '0.9em', props => props.fontSize, props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledLoadingPlaceholder.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledLoadingPlaceholder };
@@ -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 { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const sizeToHeight = (size, theme) => {
11
11
  switch (size) {
@@ -43,27 +43,21 @@ const colorStyles = _ref => {
43
43
  };
44
44
  const StyledProgressBackground = styled.div.attrs(props => ({
45
45
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
46
- 'data-garden-version': '9.0.0-next.24',
46
+ 'data-garden-version': '9.0.0-next.25',
47
47
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
48
48
  })).withConfig({
49
49
  displayName: "StyledProgress__StyledProgressBackground",
50
50
  componentId: "sc-2g8w4s-0"
51
51
  })(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => props.borderRadius, colorStyles, props => retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
52
- StyledProgressBackground.defaultProps = {
53
- theme: DEFAULT_THEME
54
- };
55
52
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
56
53
  const StyledProgressIndicator = styled.div.attrs(props => ({
57
54
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
58
- 'data-garden-version': '9.0.0-next.24',
55
+ 'data-garden-version': '9.0.0-next.25',
59
56
  height: props.height || sizeToHeight(props.size, props.theme),
60
57
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
61
58
  })).withConfig({
62
59
  displayName: "StyledProgress__StyledProgressIndicator",
63
60
  componentId: "sc-2g8w4s-1"
64
61
  })(["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));
65
- StyledProgressIndicator.defaultProps = {
66
- theme: DEFAULT_THEME
67
- };
68
62
 
69
63
  export { StyledProgressBackground, StyledProgressIndicator };
@@ -5,10 +5,10 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const StyledSVG = styled.svg.attrs(props => ({
11
- 'data-garden-version': '9.0.0-next.24',
11
+ 'data-garden-version': '9.0.0-next.25',
12
12
  xmlns: 'http://www.w3.org/2000/svg',
13
13
  width: props.width,
14
14
  height: props.height,
@@ -19,8 +19,5 @@ const StyledSVG = styled.svg.attrs(props => ({
19
19
  displayName: "StyledSVG",
20
20
  componentId: "sc-1xtc3kx-0"
21
21
  })(["width:", ";height:", ";color:", ";font-size:", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.color || 'inherit', props => props.fontSize || 'inherit', props => retrieveComponentStyles(props.dataGardenId, props));
22
- StyledSVG.defaultProps = {
23
- theme: DEFAULT_THEME
24
- };
25
22
 
26
23
  export { StyledSVG };
@@ -5,7 +5,7 @@
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 { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
8
+ import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const COMPONENT_ID = 'loaders.skeleton';
11
11
  const fadeInAnimation = keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
@@ -52,13 +52,10 @@ const gradientStyles = props => {
52
52
  };
53
53
  const StyledSkeleton = styled.div.attrs({
54
54
  'data-garden-id': COMPONENT_ID,
55
- 'data-garden-version': '9.0.0-next.24'
55
+ 'data-garden-version': '9.0.0-next.25'
56
56
  }).withConfig({
57
57
  displayName: "StyledSkeleton",
58
58
  componentId: "sc-1raozze-0"
59
59
  })(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";background-color:", ";width:", ";height:", ";overflow:hidden;line-height:", ";&::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, props => props.theme.borderRadii.md, getBackgroundColor, props => props.$width, props => props.$height, props => getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5), animationStyles, gradientStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
60
- StyledSkeleton.defaultProps = {
61
- theme: DEFAULT_THEME
62
- };
63
60
 
64
61
  export { StyledSkeleton };
@@ -5,7 +5,6 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
8
 
10
9
  const StyledSpinnerCircle = styled.circle.attrs(props => ({
11
10
  cx: 40,
@@ -21,8 +20,5 @@ const StyledSpinnerCircle = styled.circle.attrs(props => ({
21
20
  displayName: "StyledSpinnerCircle",
22
21
  componentId: "sc-o4kd70-0"
23
22
  })([""]);
24
- StyledSpinnerCircle.defaultProps = {
25
- theme: DEFAULT_THEME
26
- };
27
23
 
28
24
  export { StyledSpinnerCircle };
package/dist/index.cjs.js CHANGED
@@ -29,9 +29,6 @@ const StyledDotsCircle = styled__default.default.circle.attrs({
29
29
  displayName: "StyledDots__StyledDotsCircle",
30
30
  componentId: "sc-1ltah7e-0"
31
31
  })([""]);
32
- StyledDotsCircle.defaultProps = {
33
- theme: reactTheming.DEFAULT_THEME
34
- };
35
32
  const animationStyles$1 = (animationName, props) => {
36
33
  return styled.css(["animation:", " ", "ms linear infinite;"], animationName, props.duration);
37
34
  };
@@ -41,40 +38,28 @@ const StyledDotsCircleOne = styled__default.default(StyledDotsCircle).attrs({
41
38
  displayName: "StyledDots__StyledDotsCircleOne",
42
39
  componentId: "sc-1ltah7e-1"
43
40
  })(["", ";"], props => animationStyles$1(dotOneKeyframes, props));
44
- StyledDotsCircleOne.defaultProps = {
45
- theme: reactTheming.DEFAULT_THEME
46
- };
47
41
  const StyledDotsCircleTwo = styled__default.default(StyledDotsCircle).attrs(() => ({
48
42
  cx: 40
49
43
  })).withConfig({
50
44
  displayName: "StyledDots__StyledDotsCircleTwo",
51
45
  componentId: "sc-1ltah7e-2"
52
46
  })(["", ";"], props => animationStyles$1(dotTwoKeyframes, props));
53
- StyledDotsCircleTwo.defaultProps = {
54
- theme: reactTheming.DEFAULT_THEME
55
- };
56
47
  const StyledDotsCircleThree = styled__default.default(StyledDotsCircle).attrs(() => ({
57
48
  cx: 71
58
49
  })).withConfig({
59
50
  displayName: "StyledDots__StyledDotsCircleThree",
60
51
  componentId: "sc-1ltah7e-3"
61
52
  })(["", ";"], props => animationStyles$1(dotThreeKeyframes, props));
62
- StyledDotsCircleThree.defaultProps = {
63
- theme: reactTheming.DEFAULT_THEME
64
- };
65
53
 
66
54
  const COMPONENT_ID$5 = 'loaders.loading_placeholder';
67
55
  const StyledLoadingPlaceholder = styled__default.default.div.attrs({
68
56
  'data-garden-id': COMPONENT_ID$5,
69
- 'data-garden-version': '9.0.0-next.24',
57
+ 'data-garden-version': '9.0.0-next.25',
70
58
  role: 'progressbar'
71
59
  }).withConfig({
72
60
  displayName: "StyledLoadingPlaceholder",
73
61
  componentId: "sc-x3bwsx-0"
74
62
  })(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], props => props.width || '1em', props => props.height || '0.9em', props => props.fontSize, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
75
- StyledLoadingPlaceholder.defaultProps = {
76
- theme: reactTheming.DEFAULT_THEME
77
- };
78
63
 
79
64
  const sizeToHeight = (size, theme) => {
80
65
  switch (size) {
@@ -112,28 +97,22 @@ const colorStyles = _ref => {
112
97
  };
113
98
  const StyledProgressBackground = styled__default.default.div.attrs(props => ({
114
99
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
115
- 'data-garden-version': '9.0.0-next.24',
100
+ 'data-garden-version': '9.0.0-next.25',
116
101
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
117
102
  })).withConfig({
118
103
  displayName: "StyledProgress__StyledProgressBackground",
119
104
  componentId: "sc-2g8w4s-0"
120
105
  })(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => props.borderRadius, colorStyles, props => reactTheming.retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
121
- StyledProgressBackground.defaultProps = {
122
- theme: reactTheming.DEFAULT_THEME
123
- };
124
106
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
125
107
  const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
126
108
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
127
- 'data-garden-version': '9.0.0-next.24',
109
+ 'data-garden-version': '9.0.0-next.25',
128
110
  height: props.height || sizeToHeight(props.size, props.theme),
129
111
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
130
112
  })).withConfig({
131
113
  displayName: "StyledProgress__StyledProgressIndicator",
132
114
  componentId: "sc-2g8w4s-1"
133
115
  })(["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));
134
- StyledProgressIndicator.defaultProps = {
135
- theme: reactTheming.DEFAULT_THEME
136
- };
137
116
 
138
117
  const COMPONENT_ID$4 = 'loaders.skeleton';
139
118
  const fadeInAnimation = styled.keyframes(["0%,60%{opacity:0;}100%{opacity:1;}"]);
@@ -180,14 +159,11 @@ const gradientStyles = props => {
180
159
  };
181
160
  const StyledSkeleton = styled__default.default.div.attrs({
182
161
  'data-garden-id': COMPONENT_ID$4,
183
- 'data-garden-version': '9.0.0-next.24'
162
+ 'data-garden-version': '9.0.0-next.25'
184
163
  }).withConfig({
185
164
  displayName: "StyledSkeleton",
186
165
  componentId: "sc-1raozze-0"
187
166
  })(["display:inline-block;position:relative;animation:", " 750ms linear;border-radius:", ";background-color:", ";width:", ";height:", ";overflow:hidden;line-height:", ";&::before{position:absolute;top:0;width:1000px;height:100%;content:'';", " ", "}", ";"], fadeInAnimation, props => props.theme.borderRadii.md, getBackgroundColor, props => props.$width, props => props.$height, props => reactTheming.getLineHeight(props.theme.fontSizes.sm, props.theme.space.base * 5), animationStyles, gradientStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
188
- StyledSkeleton.defaultProps = {
189
- theme: reactTheming.DEFAULT_THEME
190
- };
191
167
 
192
168
  const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
193
169
  cx: 40,
@@ -203,12 +179,9 @@ const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
203
179
  displayName: "StyledSpinnerCircle",
204
180
  componentId: "sc-o4kd70-0"
205
181
  })([""]);
206
- StyledSpinnerCircle.defaultProps = {
207
- theme: reactTheming.DEFAULT_THEME
208
- };
209
182
 
210
183
  const StyledSVG = styled__default.default.svg.attrs(props => ({
211
- 'data-garden-version': '9.0.0-next.24',
184
+ 'data-garden-version': '9.0.0-next.25',
212
185
  xmlns: 'http://www.w3.org/2000/svg',
213
186
  width: props.width,
214
187
  height: props.height,
@@ -219,9 +192,6 @@ const StyledSVG = styled__default.default.svg.attrs(props => ({
219
192
  displayName: "StyledSVG",
220
193
  componentId: "sc-1xtc3kx-0"
221
194
  })(["width:", ";height:", ";color:", ";font-size:", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.color || 'inherit', props => props.fontSize || 'inherit', props => reactTheming.retrieveComponentStyles(props.dataGardenId, props));
222
- StyledSVG.defaultProps = {
223
- theme: reactTheming.DEFAULT_THEME
224
- };
225
195
 
226
196
  const COMPONENT_ID$3 = 'loaders.inline';
227
197
  const retrieveAnimation = _ref => {
@@ -238,12 +208,9 @@ const StyledCircle = styled__default.default.circle.attrs({
238
208
  displayName: "StyledInline__StyledCircle",
239
209
  componentId: "sc-fxsb9l-0"
240
210
  })([""]);
241
- StyledCircle.defaultProps = {
242
- theme: reactTheming.DEFAULT_THEME
243
- };
244
211
  const StyledInline = styled__default.default.svg.attrs(props => ({
245
212
  'data-garden-id': COMPONENT_ID$3,
246
- 'data-garden-version': '9.0.0-next.24',
213
+ 'data-garden-version': '9.0.0-next.25',
247
214
  viewBox: '0 0 16 4',
248
215
  width: props.size,
249
216
  height: props.size * 0.25
@@ -251,9 +218,6 @@ const StyledInline = styled__default.default.svg.attrs(props => ({
251
218
  displayName: "StyledInline",
252
219
  componentId: "sc-fxsb9l-1"
253
220
  })(["color:", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], props => props.color, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
254
- StyledInline.defaultProps = {
255
- theme: reactTheming.DEFAULT_THEME
256
- };
257
221
 
258
222
  const COMPONENT_ID$2 = 'loaders.dots';
259
223
  const Dots = React.forwardRef((_ref, ref) => {
@@ -345,7 +309,7 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
345
309
  return (
346
310
  React__default.default.createElement(StyledProgressBackground, Object.assign({
347
311
  "data-garden-id": COMPONENT_ID$1,
348
- "data-garden-version": '9.0.0-next.24',
312
+ "data-garden-version": '9.0.0-next.25',
349
313
  "aria-valuemax": 100,
350
314
  "aria-valuemin": 0,
351
315
  "aria-valuenow": percentage,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-loaders",
3
- "version": "9.0.0-next.24",
3
+ "version": "9.0.0-next.25",
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": "^5.3.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.0.0-next.24"
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.25"
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": "36ac3913276188edf8d187a9861be7ba765e487a"
47
+ "gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
48
48
  }