@kaizen/components 1.65.0 → 1.66.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.
- package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.cjs +6 -42
- package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.module.css.cjs +10 -0
- package/dist/cjs/Loading/LoadingSpinner/subcomponents/SpinnerIcon.cjs +80 -0
- package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.mjs +6 -42
- package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.module.css.mjs +8 -0
- package/dist/esm/Loading/LoadingSpinner/subcomponents/SpinnerIcon.mjs +72 -0
- package/dist/styles.css +57 -38
- package/dist/types/Loading/LoadingSpinner/LoadingSpinner.d.ts +2 -2
- package/dist/types/Loading/LoadingSpinner/subcomponents/SpinnerIcon.d.ts +5 -0
- package/dist/types/Loading/LoadingSpinner/subcomponents/index.d.ts +1 -0
- package/package.json +9 -9
- package/src/Loading/LoadingSpinner/LoadingSpinner.module.css +32 -0
- package/src/Loading/LoadingSpinner/LoadingSpinner.tsx +10 -54
- package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx +7 -2
- package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stickersheet.stories.tsx +2 -1
- package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stories.tsx +19 -0
- package/src/Loading/LoadingSpinner/subcomponents/SpinnerIcon.tsx +87 -0
- package/src/Loading/LoadingSpinner/subcomponents/index.ts +1 -0
- package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx +2 -2
- package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.module.scss.cjs +0 -7
- package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.module.scss.mjs +0 -5
- package/src/Loading/LoadingSpinner/LoadingSpinner.module.scss +0 -16
|
@@ -4,7 +4,8 @@ var tslib = require('tslib');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var classnames = require('classnames');
|
|
6
6
|
var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.cjs');
|
|
7
|
-
var
|
|
7
|
+
var SpinnerIcon = require('./subcomponents/SpinnerIcon.cjs');
|
|
8
|
+
var LoadingSpinner_module = require('./LoadingSpinner.module.css.cjs');
|
|
8
9
|
function _interopDefault(e) {
|
|
9
10
|
return e && e.__esModule ? e : {
|
|
10
11
|
default: e
|
|
@@ -25,48 +26,11 @@ var LoadingSpinner = function (_a) {
|
|
|
25
26
|
classNameOverride = _a.classNameOverride,
|
|
26
27
|
props = tslib.__rest(_a, ["accessibilityLabel", "size", "classNameOverride"]);
|
|
27
28
|
return React__default.default.createElement("div", tslib.__assign({
|
|
28
|
-
|
|
29
|
-
className: classnames__default.default(LoadingSpinner_module.loadingSpinner, classNameOverride),
|
|
29
|
+
className: classnames__default.default(LoadingSpinner_module.loadingSpinner, LoadingSpinner_module[size], classNameOverride),
|
|
30
30
|
role: "status"
|
|
31
|
-
}, props), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibilityLabel),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
viewBox: "0 0 48 48",
|
|
35
|
-
width: 48,
|
|
36
|
-
fill: "none",
|
|
37
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
38
|
-
}, React__default.default.createElement("circle", {
|
|
39
|
-
cx: "24",
|
|
40
|
-
cy: "24",
|
|
41
|
-
r: "22.5",
|
|
42
|
-
stroke: "currentColor",
|
|
43
|
-
strokeWidth: "3",
|
|
44
|
-
strokeOpacity: "0.3"
|
|
45
|
-
}), React__default.default.createElement("path", {
|
|
46
|
-
fillRule: "evenodd",
|
|
47
|
-
clipRule: "evenodd",
|
|
48
|
-
fill: "currentColor",
|
|
49
|
-
d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
|
|
50
|
-
})) : React__default.default.createElement("svg", {
|
|
51
|
-
className: LoadingSpinner_module.spinner,
|
|
52
|
-
"aria-hidden": "true",
|
|
53
|
-
viewBox: "0 0 24 24",
|
|
54
|
-
width: 24,
|
|
55
|
-
fill: "none",
|
|
56
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
57
|
-
}, React__default.default.createElement("circle", {
|
|
58
|
-
cx: "12",
|
|
59
|
-
cy: "12",
|
|
60
|
-
r: "9",
|
|
61
|
-
stroke: "currentColor",
|
|
62
|
-
strokeWidth: "2",
|
|
63
|
-
strokeOpacity: "0.3"
|
|
64
|
-
}), React__default.default.createElement("path", {
|
|
65
|
-
fillRule: "evenodd",
|
|
66
|
-
clipRule: "evenodd",
|
|
67
|
-
fill: "currentColor",
|
|
68
|
-
d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
|
|
69
|
-
})));
|
|
31
|
+
}, props), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibilityLabel), React__default.default.createElement(SpinnerIcon.SpinnerIcon, {
|
|
32
|
+
size: size
|
|
33
|
+
}));
|
|
70
34
|
};
|
|
71
35
|
LoadingSpinner.displayName = "LoadingSpinner";
|
|
72
36
|
exports.LoadingSpinner = LoadingSpinner;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var styles = {
|
|
4
|
+
"loadingSpinner": "LoadingSpinner-module_loadingSpinner__Zc2mJ",
|
|
5
|
+
"xs": "LoadingSpinner-module_xs__y46OT",
|
|
6
|
+
"sm": "LoadingSpinner-module_sm__nkmIa",
|
|
7
|
+
"md": "LoadingSpinner-module_md__OWP2-",
|
|
8
|
+
"spinner": "LoadingSpinner-module_spinner__BKrX0"
|
|
9
|
+
};
|
|
10
|
+
module.exports = styles;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var LoadingSpinner_module = require('../LoadingSpinner.module.css.cjs');
|
|
5
|
+
function _interopDefault(e) {
|
|
6
|
+
return e && e.__esModule ? e : {
|
|
7
|
+
default: e
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
11
|
+
var SmallSpinnerIcon = function () {
|
|
12
|
+
return React__default.default.createElement("svg", {
|
|
13
|
+
className: LoadingSpinner_module.spinner,
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
viewBox: "0 0 24 24",
|
|
16
|
+
fill: "none",
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
18
|
+
}, React__default.default.createElement("circle", {
|
|
19
|
+
cx: "12",
|
|
20
|
+
cy: "12",
|
|
21
|
+
r: "9",
|
|
22
|
+
stroke: "currentColor",
|
|
23
|
+
strokeWidth: "2",
|
|
24
|
+
strokeOpacity: "0.3"
|
|
25
|
+
}), React__default.default.createElement("path", {
|
|
26
|
+
fillRule: "evenodd",
|
|
27
|
+
clipRule: "evenodd",
|
|
28
|
+
fill: "currentColor",
|
|
29
|
+
d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
|
|
30
|
+
}));
|
|
31
|
+
};
|
|
32
|
+
var MediumSpinnerIcon = function () {
|
|
33
|
+
return React__default.default.createElement("svg", {
|
|
34
|
+
className: LoadingSpinner_module.spinner,
|
|
35
|
+
"aria-hidden": "true",
|
|
36
|
+
viewBox: "0 0 48 48",
|
|
37
|
+
fill: "none",
|
|
38
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
39
|
+
}, React__default.default.createElement("circle", {
|
|
40
|
+
cx: "24",
|
|
41
|
+
cy: "24",
|
|
42
|
+
r: "22.5",
|
|
43
|
+
stroke: "currentColor",
|
|
44
|
+
strokeWidth: "3",
|
|
45
|
+
strokeOpacity: "0.3"
|
|
46
|
+
}), React__default.default.createElement("path", {
|
|
47
|
+
fillRule: "evenodd",
|
|
48
|
+
clipRule: "evenodd",
|
|
49
|
+
fill: "currentColor",
|
|
50
|
+
d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
|
|
51
|
+
}));
|
|
52
|
+
};
|
|
53
|
+
var ExtraSmallSpinnerIcon = function () {
|
|
54
|
+
return React__default.default.createElement("svg", {
|
|
55
|
+
className: LoadingSpinner_module.spinner,
|
|
56
|
+
viewBox: "0 0 16 16",
|
|
57
|
+
fill: "none",
|
|
58
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
59
|
+
}, React__default.default.createElement("circle", {
|
|
60
|
+
opacity: "0.3",
|
|
61
|
+
cx: "8",
|
|
62
|
+
cy: "8",
|
|
63
|
+
r: "6",
|
|
64
|
+
stroke: "currentColor",
|
|
65
|
+
strokeWidth: "2"
|
|
66
|
+
}), React__default.default.createElement("path", {
|
|
67
|
+
d: "M14 8C14 4.68629 11.3137 2 8 2",
|
|
68
|
+
stroke: "currentColor",
|
|
69
|
+
strokeWidth: "2",
|
|
70
|
+
strokeLinecap: "round",
|
|
71
|
+
strokeLinejoin: "round"
|
|
72
|
+
}));
|
|
73
|
+
};
|
|
74
|
+
var SpinnerIcon = function (_a) {
|
|
75
|
+
var size = _a.size;
|
|
76
|
+
if (size === "xs") return React__default.default.createElement(ExtraSmallSpinnerIcon, null);
|
|
77
|
+
if (size === "sm") return React__default.default.createElement(SmallSpinnerIcon, null);
|
|
78
|
+
return React__default.default.createElement(MediumSpinnerIcon, null);
|
|
79
|
+
};
|
|
80
|
+
exports.SpinnerIcon = SpinnerIcon;
|
|
@@ -2,7 +2,8 @@ import { __rest, __assign } from 'tslib';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
|
|
5
|
-
import
|
|
5
|
+
import { SpinnerIcon } from './subcomponents/SpinnerIcon.mjs';
|
|
6
|
+
import styles from './LoadingSpinner.module.css.mjs';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093253/Loading+Spinner Guidance} |
|
|
@@ -17,48 +18,11 @@ const LoadingSpinner = /*#__PURE__*/function () {
|
|
|
17
18
|
classNameOverride = _a.classNameOverride,
|
|
18
19
|
props = __rest(_a, ["accessibilityLabel", "size", "classNameOverride"]);
|
|
19
20
|
return /*#__PURE__*/React.createElement("div", __assign({
|
|
20
|
-
|
|
21
|
-
className: classnames(styles.loadingSpinner, classNameOverride),
|
|
21
|
+
className: classnames(styles.loadingSpinner, styles[size], classNameOverride),
|
|
22
22
|
role: "status"
|
|
23
|
-
}, props), /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel),
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
viewBox: "0 0 48 48",
|
|
27
|
-
width: 48,
|
|
28
|
-
fill: "none",
|
|
29
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
30
|
-
}, /*#__PURE__*/React.createElement("circle", {
|
|
31
|
-
cx: "24",
|
|
32
|
-
cy: "24",
|
|
33
|
-
r: "22.5",
|
|
34
|
-
stroke: "currentColor",
|
|
35
|
-
strokeWidth: "3",
|
|
36
|
-
strokeOpacity: "0.3"
|
|
37
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
38
|
-
fillRule: "evenodd",
|
|
39
|
-
clipRule: "evenodd",
|
|
40
|
-
fill: "currentColor",
|
|
41
|
-
d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
|
|
42
|
-
}))) : ( /*#__PURE__*/React.createElement("svg", {
|
|
43
|
-
className: styles.spinner,
|
|
44
|
-
"aria-hidden": "true",
|
|
45
|
-
viewBox: "0 0 24 24",
|
|
46
|
-
width: 24,
|
|
47
|
-
fill: "none",
|
|
48
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
49
|
-
}, /*#__PURE__*/React.createElement("circle", {
|
|
50
|
-
cx: "12",
|
|
51
|
-
cy: "12",
|
|
52
|
-
r: "9",
|
|
53
|
-
stroke: "currentColor",
|
|
54
|
-
strokeWidth: "2",
|
|
55
|
-
strokeOpacity: "0.3"
|
|
56
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
57
|
-
fillRule: "evenodd",
|
|
58
|
-
clipRule: "evenodd",
|
|
59
|
-
fill: "currentColor",
|
|
60
|
-
d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
|
|
61
|
-
}))));
|
|
23
|
+
}, props), /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel), /*#__PURE__*/React.createElement(SpinnerIcon, {
|
|
24
|
+
size: size
|
|
25
|
+
}));
|
|
62
26
|
};
|
|
63
27
|
LoadingSpinner.displayName = "LoadingSpinner";
|
|
64
28
|
return LoadingSpinner;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var styles = {
|
|
2
|
+
"loadingSpinner": "LoadingSpinner-module_loadingSpinner__Zc2mJ",
|
|
3
|
+
"xs": "LoadingSpinner-module_xs__y46OT",
|
|
4
|
+
"sm": "LoadingSpinner-module_sm__nkmIa",
|
|
5
|
+
"md": "LoadingSpinner-module_md__OWP2-",
|
|
6
|
+
"spinner": "LoadingSpinner-module_spinner__BKrX0"
|
|
7
|
+
};
|
|
8
|
+
export { styles as default };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styles from '../LoadingSpinner.module.css.mjs';
|
|
3
|
+
var SmallSpinnerIcon = function () {
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
5
|
+
className: styles.spinner,
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
10
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
11
|
+
cx: "12",
|
|
12
|
+
cy: "12",
|
|
13
|
+
r: "9",
|
|
14
|
+
stroke: "currentColor",
|
|
15
|
+
strokeWidth: "2",
|
|
16
|
+
strokeOpacity: "0.3"
|
|
17
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
18
|
+
fillRule: "evenodd",
|
|
19
|
+
clipRule: "evenodd",
|
|
20
|
+
fill: "currentColor",
|
|
21
|
+
d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
var MediumSpinnerIcon = function () {
|
|
25
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
26
|
+
className: styles.spinner,
|
|
27
|
+
"aria-hidden": "true",
|
|
28
|
+
viewBox: "0 0 48 48",
|
|
29
|
+
fill: "none",
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
31
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
32
|
+
cx: "24",
|
|
33
|
+
cy: "24",
|
|
34
|
+
r: "22.5",
|
|
35
|
+
stroke: "currentColor",
|
|
36
|
+
strokeWidth: "3",
|
|
37
|
+
strokeOpacity: "0.3"
|
|
38
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
39
|
+
fillRule: "evenodd",
|
|
40
|
+
clipRule: "evenodd",
|
|
41
|
+
fill: "currentColor",
|
|
42
|
+
d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
45
|
+
var ExtraSmallSpinnerIcon = function () {
|
|
46
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
47
|
+
className: styles.spinner,
|
|
48
|
+
viewBox: "0 0 16 16",
|
|
49
|
+
fill: "none",
|
|
50
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
51
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
52
|
+
opacity: "0.3",
|
|
53
|
+
cx: "8",
|
|
54
|
+
cy: "8",
|
|
55
|
+
r: "6",
|
|
56
|
+
stroke: "currentColor",
|
|
57
|
+
strokeWidth: "2"
|
|
58
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
59
|
+
d: "M14 8C14 4.68629 11.3137 2 8 2",
|
|
60
|
+
stroke: "currentColor",
|
|
61
|
+
strokeWidth: "2",
|
|
62
|
+
strokeLinecap: "round",
|
|
63
|
+
strokeLinejoin: "round"
|
|
64
|
+
}));
|
|
65
|
+
};
|
|
66
|
+
var SpinnerIcon = function (_a) {
|
|
67
|
+
var size = _a.size;
|
|
68
|
+
if (size === "xs") return /*#__PURE__*/React.createElement(ExtraSmallSpinnerIcon, null);
|
|
69
|
+
if (size === "sm") return /*#__PURE__*/React.createElement(SmallSpinnerIcon, null);
|
|
70
|
+
return /*#__PURE__*/React.createElement(MediumSpinnerIcon, null);
|
|
71
|
+
};
|
|
72
|
+
export { SpinnerIcon };
|
package/dist/styles.css
CHANGED
|
@@ -33,6 +33,39 @@
|
|
|
33
33
|
.MenuItem-module_item__DPerF[data-disabled] {
|
|
34
34
|
opacity: 0.3;
|
|
35
35
|
}
|
|
36
|
+
.Menu-module_menu__iHYqh {
|
|
37
|
+
background-color: var(--color-white);
|
|
38
|
+
color: var(--color-purple-800);
|
|
39
|
+
width: 248px;
|
|
40
|
+
max-height: 22rem;
|
|
41
|
+
overflow: auto;
|
|
42
|
+
padding-block: var(--spacing-6);
|
|
43
|
+
outline: none;
|
|
44
|
+
border-radius: var(--border-solid-border-radius);
|
|
45
|
+
box-shadow: var(--shadow-large-box-shadow);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.Menu-module_menu__iHYqh .react-aria-Header {
|
|
49
|
+
font-family: var(--typography-heading-6-font-family);
|
|
50
|
+
font-size: var(--typography-heading-6-font-size);
|
|
51
|
+
letter-spacing: var(--typography-heading-6-letter-spacing);
|
|
52
|
+
font-weight: var(--typography-heading-6-font-weight);
|
|
53
|
+
line-height: var(--typography-heading-6-line-height);
|
|
54
|
+
padding: var(--spacing-6) 10px;
|
|
55
|
+
margin-inline: var(--spacing-6);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 1px;
|
|
61
|
+
background-color: var(--border-solid-border-color);
|
|
62
|
+
content: "";
|
|
63
|
+
display: block;
|
|
64
|
+
margin-block: var(--spacing-6);
|
|
65
|
+
}
|
|
66
|
+
.Focusable-module_focusableWrapper__NfuIi {
|
|
67
|
+
display: inline-flex;
|
|
68
|
+
}
|
|
36
69
|
.Button-module_button__QOSYH {
|
|
37
70
|
--button-min-height-width: var(--spacing-48);
|
|
38
71
|
--button-padding-x: calc(
|
|
@@ -121,39 +154,6 @@
|
|
|
121
154
|
--button-icon-size: var(--spacing-16);
|
|
122
155
|
gap: var(--spacing-8);
|
|
123
156
|
}
|
|
124
|
-
.Focusable-module_focusableWrapper__NfuIi {
|
|
125
|
-
display: inline-flex;
|
|
126
|
-
}
|
|
127
|
-
.Menu-module_menu__iHYqh {
|
|
128
|
-
background-color: var(--color-white);
|
|
129
|
-
color: var(--color-purple-800);
|
|
130
|
-
width: 248px;
|
|
131
|
-
max-height: 22rem;
|
|
132
|
-
overflow: auto;
|
|
133
|
-
padding-block: var(--spacing-6);
|
|
134
|
-
outline: none;
|
|
135
|
-
border-radius: var(--border-solid-border-radius);
|
|
136
|
-
box-shadow: var(--shadow-large-box-shadow);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.Menu-module_menu__iHYqh .react-aria-Header {
|
|
140
|
-
font-family: var(--typography-heading-6-font-family);
|
|
141
|
-
font-size: var(--typography-heading-6-font-size);
|
|
142
|
-
letter-spacing: var(--typography-heading-6-letter-spacing);
|
|
143
|
-
font-weight: var(--typography-heading-6-font-weight);
|
|
144
|
-
line-height: var(--typography-heading-6-line-height);
|
|
145
|
-
padding: var(--spacing-6) 10px;
|
|
146
|
-
margin-inline: var(--spacing-6);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
|
|
150
|
-
width: 100%;
|
|
151
|
-
height: 1px;
|
|
152
|
-
background-color: var(--border-solid-border-color);
|
|
153
|
-
content: "";
|
|
154
|
-
display: block;
|
|
155
|
-
margin-block: var(--spacing-6);
|
|
156
|
-
}
|
|
157
157
|
/** THIS IS AN AUTOGENERATED FILE **/
|
|
158
158
|
/** THIS IS AN AUTOGENERATED FILE **/
|
|
159
159
|
/** THIS IS AN AUTOGENERATED FILE **/
|
|
@@ -1098,20 +1098,39 @@
|
|
|
1098
1098
|
white-space: nowrap;
|
|
1099
1099
|
width: 1px;
|
|
1100
1100
|
}
|
|
1101
|
-
|
|
1102
|
-
|
|
1101
|
+
.LoadingSpinner-module_loadingSpinner__Zc2mJ {
|
|
1102
|
+
--loading-spinner-size: 48px;
|
|
1103
|
+
|
|
1103
1104
|
display: flex;
|
|
1105
|
+
width: var(--loading-spinner-size);
|
|
1106
|
+
height: var(--loading-spinner-size);
|
|
1104
1107
|
}
|
|
1105
1108
|
|
|
1106
|
-
.LoadingSpinner-
|
|
1107
|
-
|
|
1109
|
+
.LoadingSpinner-module_xs__y46OT {
|
|
1110
|
+
--loading-spinner-size: 16px;
|
|
1108
1111
|
}
|
|
1109
1112
|
|
|
1110
|
-
|
|
1113
|
+
.LoadingSpinner-module_sm__nkmIa {
|
|
1114
|
+
--loading-spinner-size: 24px;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
.LoadingSpinner-module_md__OWP2- {
|
|
1118
|
+
--loading-spinner-size: 48px;
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
.LoadingSpinner-module_spinner__BKrX0 {
|
|
1122
|
+
animation: LoadingSpinner-module_spinner__BKrX0 var(--animation-duration-deliberate)
|
|
1123
|
+
var(--animation-easing-function-ease-in-out) infinite;
|
|
1124
|
+
width: 100%;
|
|
1125
|
+
height: 100%;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
@keyframes LoadingSpinner-module_spinner__BKrX0 {
|
|
1111
1129
|
100% {
|
|
1112
1130
|
transform: rotate(360deg);
|
|
1113
1131
|
}
|
|
1114
1132
|
}
|
|
1133
|
+
|
|
1115
1134
|
/** THIS IS AN AUTOGENERATED FILE **/
|
|
1116
1135
|
/** THIS IS AN AUTOGENERATED FILE **/
|
|
1117
1136
|
/** THIS IS AN AUTOGENERATED FILE **/
|
|
@@ -3,9 +3,9 @@ import { OverrideClassName } from "../../types/OverrideClassName";
|
|
|
3
3
|
export type LoadingSpinnerProps = {
|
|
4
4
|
accessibilityLabel: string;
|
|
5
5
|
/**
|
|
6
|
-
* Generally use "md" unless spinner is inside a form field
|
|
6
|
+
* Generally use "md" unless spinner is inside a form field. @default "md"
|
|
7
7
|
*/
|
|
8
|
-
size?: "sm" | "md";
|
|
8
|
+
size?: "xs" | "sm" | "md";
|
|
9
9
|
} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>;
|
|
10
10
|
/**
|
|
11
11
|
* {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093253/Loading+Spinner Guidance} |
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./SpinnerIcon";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.66.1",
|
|
4
4
|
"description": "Kaizen component library",
|
|
5
5
|
"author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
|
|
6
6
|
"homepage": "https://cultureamp.design",
|
|
@@ -58,15 +58,15 @@
|
|
|
58
58
|
"date-fns": "^4.1.0",
|
|
59
59
|
"lodash.debounce": "^4.0.8",
|
|
60
60
|
"nanobus": "^4.5.0",
|
|
61
|
-
"prosemirror-commands": "^1.6.
|
|
61
|
+
"prosemirror-commands": "^1.6.1",
|
|
62
62
|
"prosemirror-history": "^1.4.1",
|
|
63
63
|
"prosemirror-inputrules": "^1.4.0",
|
|
64
64
|
"prosemirror-keymap": "^1.2.2",
|
|
65
|
-
"prosemirror-model": "^1.
|
|
65
|
+
"prosemirror-model": "^1.23.0",
|
|
66
66
|
"prosemirror-schema-basic": "^1.2.3",
|
|
67
67
|
"prosemirror-schema-list": "^1.4.1",
|
|
68
68
|
"prosemirror-state": "^1.4.3",
|
|
69
|
-
"prosemirror-transform": "^1.10.
|
|
69
|
+
"prosemirror-transform": "^1.10.2",
|
|
70
70
|
"prosemirror-utils": "^1.2.2",
|
|
71
71
|
"prosemirror-view": "^1.34.3",
|
|
72
72
|
"react-animate-height": "^3.2.3",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"react-textfit": "^1.1.1",
|
|
82
82
|
"resize-observer-polyfill": "^1.5.1",
|
|
83
83
|
"tsx": "^4.19.1",
|
|
84
|
-
"use-debounce": "^10.0.
|
|
84
|
+
"use-debounce": "^10.0.4",
|
|
85
85
|
"uuid": "^10.0.0"
|
|
86
86
|
},
|
|
87
87
|
"dependenciesComments": {
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"devDependencies": {
|
|
91
91
|
"@cultureamp/frontend-apis": "^10.0.0",
|
|
92
92
|
"@cultureamp/i18n-react-intl": "^2.6.3",
|
|
93
|
-
"@tanstack/react-query": "^5.59.
|
|
93
|
+
"@tanstack/react-query": "^5.59.13",
|
|
94
94
|
"@testing-library/dom": "^10.4.0",
|
|
95
95
|
"@types/jest-axe": "^3.5.9",
|
|
96
96
|
"@types/lodash.debounce": "^4.0.9",
|
|
@@ -106,13 +106,13 @@
|
|
|
106
106
|
"postcss": "^8.4.47",
|
|
107
107
|
"postcss-cli": "^11.0.0",
|
|
108
108
|
"postcss-import": "^16.1.0",
|
|
109
|
-
"postcss-preset-env": "^10.0.
|
|
109
|
+
"postcss-preset-env": "^10.0.7",
|
|
110
110
|
"postcss-scss": "^4.0.9",
|
|
111
|
-
"query-string": "^9.1.
|
|
111
|
+
"query-string": "^9.1.1",
|
|
112
112
|
"react": "^18.3.1",
|
|
113
113
|
"react-dom": "^18.3.1",
|
|
114
114
|
"react-highlight": "^0.15.0",
|
|
115
|
-
"react-intl": "^6.
|
|
115
|
+
"react-intl": "^6.8.0",
|
|
116
116
|
"rollup": "^4.24.0",
|
|
117
117
|
"sass": "^1.77.8",
|
|
118
118
|
"serialize-query-params": "^2.0.2",
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.loadingSpinner {
|
|
2
|
+
--loading-spinner-size: 48px;
|
|
3
|
+
|
|
4
|
+
display: flex;
|
|
5
|
+
width: var(--loading-spinner-size);
|
|
6
|
+
height: var(--loading-spinner-size);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.xs {
|
|
10
|
+
--loading-spinner-size: 16px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.sm {
|
|
14
|
+
--loading-spinner-size: 24px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.md {
|
|
18
|
+
--loading-spinner-size: 48px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.spinner {
|
|
22
|
+
animation: spinner var(--animation-duration-deliberate)
|
|
23
|
+
var(--animation-easing-function-ease-in-out) infinite;
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@keyframes spinner {
|
|
29
|
+
100% {
|
|
30
|
+
transform: rotate(360deg);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -2,14 +2,15 @@ import React, { HTMLAttributes } from "react"
|
|
|
2
2
|
import classnames from "classnames"
|
|
3
3
|
import { VisuallyHidden } from "~components/VisuallyHidden"
|
|
4
4
|
import { OverrideClassName } from "~components/types/OverrideClassName"
|
|
5
|
-
import
|
|
5
|
+
import { SpinnerIcon } from "./subcomponents"
|
|
6
|
+
import styles from "./LoadingSpinner.module.css"
|
|
6
7
|
|
|
7
8
|
export type LoadingSpinnerProps = {
|
|
8
9
|
accessibilityLabel: string
|
|
9
10
|
/**
|
|
10
|
-
* Generally use "md" unless spinner is inside a form field
|
|
11
|
+
* Generally use "md" unless spinner is inside a form field. @default "md"
|
|
11
12
|
*/
|
|
12
|
-
size?: "sm" | "md"
|
|
13
|
+
size?: "xs" | "sm" | "md"
|
|
13
14
|
} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>
|
|
14
15
|
|
|
15
16
|
/**
|
|
@@ -23,61 +24,16 @@ export const LoadingSpinner = ({
|
|
|
23
24
|
...props
|
|
24
25
|
}: LoadingSpinnerProps): JSX.Element => (
|
|
25
26
|
<div
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
className={classnames(
|
|
28
|
+
styles.loadingSpinner,
|
|
29
|
+
styles[size],
|
|
30
|
+
classNameOverride
|
|
31
|
+
)}
|
|
28
32
|
role="status"
|
|
29
33
|
{...props}
|
|
30
34
|
>
|
|
31
35
|
<VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
|
|
32
|
-
{size
|
|
33
|
-
<svg
|
|
34
|
-
className={styles.spinner}
|
|
35
|
-
aria-hidden="true"
|
|
36
|
-
viewBox="0 0 48 48"
|
|
37
|
-
width={48} // Ideally we'd use spacing tokens converted to unitless values
|
|
38
|
-
fill="none"
|
|
39
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
40
|
-
>
|
|
41
|
-
<circle
|
|
42
|
-
cx="24"
|
|
43
|
-
cy="24"
|
|
44
|
-
r="22.5"
|
|
45
|
-
stroke="currentColor"
|
|
46
|
-
strokeWidth="3"
|
|
47
|
-
strokeOpacity="0.3"
|
|
48
|
-
/>
|
|
49
|
-
<path
|
|
50
|
-
fillRule="evenodd"
|
|
51
|
-
clipRule="evenodd"
|
|
52
|
-
fill="currentColor"
|
|
53
|
-
d="M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
|
|
54
|
-
/>
|
|
55
|
-
</svg>
|
|
56
|
-
) : (
|
|
57
|
-
<svg
|
|
58
|
-
className={styles.spinner}
|
|
59
|
-
aria-hidden="true"
|
|
60
|
-
viewBox="0 0 24 24"
|
|
61
|
-
width={24} // Ideally we'd use spacing tokens converted to unitless values
|
|
62
|
-
fill="none"
|
|
63
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
64
|
-
>
|
|
65
|
-
<circle
|
|
66
|
-
cx="12"
|
|
67
|
-
cy="12"
|
|
68
|
-
r="9"
|
|
69
|
-
stroke="currentColor"
|
|
70
|
-
strokeWidth="2"
|
|
71
|
-
strokeOpacity="0.3"
|
|
72
|
-
/>
|
|
73
|
-
<path
|
|
74
|
-
fillRule="evenodd"
|
|
75
|
-
clipRule="evenodd"
|
|
76
|
-
fill="currentColor"
|
|
77
|
-
d="M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
|
|
78
|
-
/>
|
|
79
|
-
</svg>
|
|
80
|
-
)}
|
|
36
|
+
<SpinnerIcon size={size} />
|
|
81
37
|
</div>
|
|
82
38
|
)
|
|
83
39
|
|
|
@@ -31,12 +31,17 @@ When inside a button, it is intended to have the same color as the label text.
|
|
|
31
31
|
|
|
32
32
|
### ClassNameOverride
|
|
33
33
|
|
|
34
|
-
Override styles such as the colour of the spinner using `classNameOverride`.
|
|
34
|
+
Override styles, such as the colour of the spinner using `classNameOverride`.
|
|
35
35
|
|
|
36
36
|
<Canvas of={LoadingSpinnerStories.ClassNameOverride} />
|
|
37
37
|
|
|
38
|
+
Below is an example of how to apply the current color tokens used in designs.
|
|
39
|
+
|
|
40
|
+
<Canvas of={LoadingSpinnerStories.Colors} />
|
|
41
|
+
|
|
38
42
|
### Size
|
|
39
43
|
|
|
40
|
-
Generally use `"md"` (default value) unless spinner is inside a form field.
|
|
44
|
+
Generally use `"md"` (default value) unless spinner is inside a form field, in which case use `sm`. The `xs` size is for buttons or content dense layouts.
|
|
41
45
|
|
|
42
46
|
<Canvas of={LoadingSpinnerStories.Size} />
|
|
47
|
+
|
|
@@ -18,10 +18,11 @@ const StickerSheetTemplate: StickerSheetStory = {
|
|
|
18
18
|
render: ({ isReversed }) => (
|
|
19
19
|
<StickerSheet isReversed={isReversed}>
|
|
20
20
|
<StickerSheet.Header
|
|
21
|
-
headings={['Size "sm"', 'Size "md"', "Custom
|
|
21
|
+
headings={['Size "xs"', 'Size "sm"', 'Size "md"', "Custom color"]}
|
|
22
22
|
/>
|
|
23
23
|
<StickerSheet.Body>
|
|
24
24
|
<StickerSheet.Row>
|
|
25
|
+
<LoadingSpinner accessibilityLabel="Loading" size="xs" />
|
|
25
26
|
<LoadingSpinner accessibilityLabel="Loading" size="sm" />
|
|
26
27
|
<LoadingSpinner accessibilityLabel="Loading" size="md" />
|
|
27
28
|
<LoadingSpinner
|
|
@@ -28,9 +28,28 @@ export const ClassNameOverride: Story = {
|
|
|
28
28
|
args: { classNameOverride: "text-green-400" },
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
export const Colors: Story = {
|
|
32
|
+
render: args => (
|
|
33
|
+
<>
|
|
34
|
+
<LoadingSpinner {...args} classNameOverride="text-green-400" />
|
|
35
|
+
<LoadingSpinner {...args} classNameOverride="text-purple-800" />
|
|
36
|
+
<LoadingSpinner {...args} classNameOverride="text-blue-500" />
|
|
37
|
+
<LoadingSpinner {...args} classNameOverride="text-red-500" />
|
|
38
|
+
</>
|
|
39
|
+
),
|
|
40
|
+
decorators: [
|
|
41
|
+
Story => (
|
|
42
|
+
<div className="flex gap-24">
|
|
43
|
+
<Story />
|
|
44
|
+
</div>
|
|
45
|
+
),
|
|
46
|
+
],
|
|
47
|
+
}
|
|
48
|
+
|
|
31
49
|
export const Size: Story = {
|
|
32
50
|
render: args => (
|
|
33
51
|
<>
|
|
52
|
+
<LoadingSpinner {...args} size="xs" />
|
|
34
53
|
<LoadingSpinner {...args} size="sm" />
|
|
35
54
|
<LoadingSpinner {...args} size="md" />
|
|
36
55
|
</>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import styles from "../LoadingSpinner.module.css"
|
|
3
|
+
|
|
4
|
+
const SmallSpinnerIcon = (): JSX.Element => (
|
|
5
|
+
<svg
|
|
6
|
+
className={styles.spinner}
|
|
7
|
+
aria-hidden="true"
|
|
8
|
+
viewBox="0 0 24 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
12
|
+
<circle
|
|
13
|
+
cx="12"
|
|
14
|
+
cy="12"
|
|
15
|
+
r="9"
|
|
16
|
+
stroke="currentColor"
|
|
17
|
+
strokeWidth="2"
|
|
18
|
+
strokeOpacity="0.3"
|
|
19
|
+
/>
|
|
20
|
+
<path
|
|
21
|
+
fillRule="evenodd"
|
|
22
|
+
clipRule="evenodd"
|
|
23
|
+
fill="currentColor"
|
|
24
|
+
d="M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
|
|
25
|
+
/>
|
|
26
|
+
</svg>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
const MediumSpinnerIcon = (): JSX.Element => (
|
|
30
|
+
<svg
|
|
31
|
+
className={styles.spinner}
|
|
32
|
+
aria-hidden="true"
|
|
33
|
+
viewBox="0 0 48 48"
|
|
34
|
+
fill="none"
|
|
35
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
36
|
+
>
|
|
37
|
+
<circle
|
|
38
|
+
cx="24"
|
|
39
|
+
cy="24"
|
|
40
|
+
r="22.5"
|
|
41
|
+
stroke="currentColor"
|
|
42
|
+
strokeWidth="3"
|
|
43
|
+
strokeOpacity="0.3"
|
|
44
|
+
/>
|
|
45
|
+
<path
|
|
46
|
+
fillRule="evenodd"
|
|
47
|
+
clipRule="evenodd"
|
|
48
|
+
fill="currentColor"
|
|
49
|
+
d="M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
|
|
50
|
+
/>
|
|
51
|
+
</svg>
|
|
52
|
+
)
|
|
53
|
+
|
|
54
|
+
const ExtraSmallSpinnerIcon = (): JSX.Element => (
|
|
55
|
+
<svg
|
|
56
|
+
className={styles.spinner}
|
|
57
|
+
viewBox="0 0 16 16"
|
|
58
|
+
fill="none"
|
|
59
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
60
|
+
>
|
|
61
|
+
<circle
|
|
62
|
+
opacity="0.3"
|
|
63
|
+
cx="8"
|
|
64
|
+
cy="8"
|
|
65
|
+
r="6"
|
|
66
|
+
stroke="currentColor"
|
|
67
|
+
strokeWidth="2"
|
|
68
|
+
/>
|
|
69
|
+
<path
|
|
70
|
+
d="M14 8C14 4.68629 11.3137 2 8 2"
|
|
71
|
+
stroke="currentColor"
|
|
72
|
+
strokeWidth="2"
|
|
73
|
+
strokeLinecap="round"
|
|
74
|
+
strokeLinejoin="round"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
)
|
|
78
|
+
|
|
79
|
+
type SpinnerIconProps = {
|
|
80
|
+
size: "xs" | "sm" | "md"
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export const SpinnerIcon = ({ size }: SpinnerIconProps): JSX.Element => {
|
|
84
|
+
if (size === "xs") return <ExtraSmallSpinnerIcon />
|
|
85
|
+
if (size === "sm") return <SmallSpinnerIcon />
|
|
86
|
+
return <MediumSpinnerIcon />
|
|
87
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./SpinnerIcon"
|
|
@@ -82,7 +82,7 @@ const StickerSheetTemplate: StickerSheetStory = {
|
|
|
82
82
|
<ArrowForwardIcon role="presentation" />
|
|
83
83
|
</Button>
|
|
84
84
|
<Button size="small" isDisabled>
|
|
85
|
-
<LoadingSpinner size="
|
|
85
|
+
<LoadingSpinner size="xs" accessibilityLabel="submitting label" />
|
|
86
86
|
</Button>
|
|
87
87
|
</StickerSheet.Row>
|
|
88
88
|
<StickerSheet.Row rowTitle="Icon only small">
|
|
@@ -93,7 +93,7 @@ const StickerSheetTemplate: StickerSheetStory = {
|
|
|
93
93
|
<TrashIcon role="img" aria-label="Remove label" />
|
|
94
94
|
</Button>
|
|
95
95
|
<Button size="small" isDisabled>
|
|
96
|
-
<LoadingSpinner size="
|
|
96
|
+
<LoadingSpinner size="xs" accessibilityLabel="Removing label" />
|
|
97
97
|
</Button>
|
|
98
98
|
</StickerSheet.Row>
|
|
99
99
|
</StickerSheet.Body>
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
@import "~@kaizen/design-tokens/sass/animation";
|
|
2
|
-
|
|
3
|
-
.loadingSpinner {
|
|
4
|
-
display: flex;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.spinner {
|
|
8
|
-
animation: spinner $animation-duration-deliberate
|
|
9
|
-
$animation-easing-function-ease-in-out infinite;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@keyframes spinner {
|
|
13
|
-
100% {
|
|
14
|
-
transform: rotate(360deg);
|
|
15
|
-
}
|
|
16
|
-
}
|