@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.
- package/dist/esm/elements/Progress.js +1 -1
- package/dist/esm/styled/StyledDots.js +0 -13
- package/dist/esm/styled/StyledInline.js +2 -8
- package/dist/esm/styled/StyledLoadingPlaceholder.js +2 -5
- package/dist/esm/styled/StyledProgress.js +3 -9
- package/dist/esm/styled/StyledSVG.js +2 -5
- package/dist/esm/styled/StyledSkeleton.js +2 -5
- package/dist/esm/styled/StyledSpinnerCircle.js +0 -4
- package/dist/index.cjs.js +7 -43
- package/package.json +3 -3
|
@@ -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.
|
|
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 {
|
|
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.
|
|
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
|
|
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.
|
|
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,
|
|
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.
|
|
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.
|
|
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
|
|
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.
|
|
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,
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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": "
|
|
47
|
+
"gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
48
48
|
}
|