@desynova-digital/components 9.1.44 → 9.1.45
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/_helpers/utils.js +4 -4
- package/atoms/cardV2/cardV2.js +5 -5
- package/atoms/cardV2/content.js +6 -6
- package/atoms/cardV2/thumbnail.js +10 -10
- package/atoms/draftInputText/draftInputText.js +40 -40
- package/atoms/icon/icons.json +1836 -1836
- package/atoms/loader/CircleLoader.jsx +93 -93
- package/atoms/loader/ShimmerComponent/CollabShimmerCard.js +14 -3
- package/atoms/loader/ShimmerComponent/CollabShimmerCard.jsx +39 -39
- package/atoms/loader/ShimmerComponent/CollabShimmerCardTray.jsx +24 -24
- package/atoms/loader/ShimmerComponent/FiltersShimmer.jsx +19 -19
- package/atoms/loader/ShimmerComponent/GraphDetailShimmer.jsx +31 -31
- package/atoms/loader/ShimmerComponent/GraphTitleShimmer.jsx +23 -23
- package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.jsx +23 -23
- package/atoms/loader/ShimmerComponent/Shimmer.jsx +48 -48
- package/atoms/loader/ThreeDotLoader.jsx +51 -51
- package/atoms/loader/spinningLoader.jsx +69 -69
- package/atoms/sideBar/sidebar.js +3 -3
- package/atoms/sideBar/sidebar.jsx +262 -262
- package/atoms/timeCodeInput/timeCodeMainInput.js +7 -7
- package/atoms/videoCard/videoCard.js +3 -3
- package/molecules/errorScreen/TableErrorScreen.jsx +85 -85
- package/molecules/errorScreen/errorScreen.js +9 -9
- package/molecules/errorScreen/errorScreen.jsx +149 -149
- package/molecules/filter/filter.js +38 -38
- package/molecules/richTextInput/RichTextInput.js +8 -8
- package/package.json +2 -2
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { colors } from "@desynova-digital/tokens";
|
|
4
|
-
const LoaderBox = styled.div`
|
|
5
|
-
display: inline-block;
|
|
6
|
-
|
|
7
|
-
& span {
|
|
8
|
-
display: inline-block;
|
|
9
|
-
width: 20px;
|
|
10
|
-
height: 20px;
|
|
11
|
-
border-radius: 100%;
|
|
12
|
-
background-color: ${(props) => colors[props.theme].label.boxBackground};
|
|
13
|
-
margin: 0px 5px;
|
|
14
|
-
opacity: 0;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
& span:nth-child(1) {
|
|
18
|
-
animation: opacitychange 1s ease-in-out infinite;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
& span:nth-child(2) {
|
|
22
|
-
animation: opacitychange 1s ease-in-out 0.33s infinite;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
& span:nth-child(3) {
|
|
26
|
-
animation: opacitychange 1s ease-in-out 0.66s infinite;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@keyframes opacitychange {
|
|
30
|
-
0%,
|
|
31
|
-
100% {
|
|
32
|
-
opacity: 0;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
60% {
|
|
36
|
-
opacity: 1;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
`;
|
|
40
|
-
|
|
41
|
-
const ThreeDotLoader = (props) => {
|
|
42
|
-
return (
|
|
43
|
-
<LoaderBox theme={props.theme} className="loader three-dot-loader">
|
|
44
|
-
<span />
|
|
45
|
-
<span />
|
|
46
|
-
<span />
|
|
47
|
-
</LoaderBox>
|
|
48
|
-
);
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export default ThreeDotLoader;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { colors } from "@desynova-digital/tokens";
|
|
4
|
+
const LoaderBox = styled.div`
|
|
5
|
+
display: inline-block;
|
|
6
|
+
|
|
7
|
+
& span {
|
|
8
|
+
display: inline-block;
|
|
9
|
+
width: 20px;
|
|
10
|
+
height: 20px;
|
|
11
|
+
border-radius: 100%;
|
|
12
|
+
background-color: ${(props) => colors[props.theme].label.boxBackground};
|
|
13
|
+
margin: 0px 5px;
|
|
14
|
+
opacity: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
& span:nth-child(1) {
|
|
18
|
+
animation: opacitychange 1s ease-in-out infinite;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
& span:nth-child(2) {
|
|
22
|
+
animation: opacitychange 1s ease-in-out 0.33s infinite;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
& span:nth-child(3) {
|
|
26
|
+
animation: opacitychange 1s ease-in-out 0.66s infinite;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes opacitychange {
|
|
30
|
+
0%,
|
|
31
|
+
100% {
|
|
32
|
+
opacity: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
60% {
|
|
36
|
+
opacity: 1;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
`;
|
|
40
|
+
|
|
41
|
+
const ThreeDotLoader = (props) => {
|
|
42
|
+
return (
|
|
43
|
+
<LoaderBox theme={props.theme} className="loader three-dot-loader">
|
|
44
|
+
<span />
|
|
45
|
+
<span />
|
|
46
|
+
<span />
|
|
47
|
+
</LoaderBox>
|
|
48
|
+
);
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export default ThreeDotLoader;
|
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import { colors } from "@desynova-digital/tokens";
|
|
4
|
-
const LoaderBox = styled.div`
|
|
5
|
-
position: relative;
|
|
6
|
-
display: flex;
|
|
7
|
-
justify-content: center;
|
|
8
|
-
height: ${(props) => (props.size === "small" ? "30px" : "50px")};
|
|
9
|
-
.parentBox {
|
|
10
|
-
position: relative;
|
|
11
|
-
width: ${(props) => (props.size === "small" ? "28.5714px" : "38.5714px")};
|
|
12
|
-
height: ${(props) => (props.size === "small" ? "28.5714px" : "38.5714px")};
|
|
13
|
-
animation: spin 0.6s 0s infinite linear;
|
|
14
|
-
animation-fill-mode: forwards;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.ball {
|
|
18
|
-
width: 4.28571px;
|
|
19
|
-
height: 4.28571px;
|
|
20
|
-
border-radius: 100%;
|
|
21
|
-
background-color: ${(props) =>
|
|
22
|
-
props.background ? `${props.background}` : `${colors[props.theme].label.spinLoader}`};
|
|
23
|
-
opacity: 0.8;
|
|
24
|
-
position: absolute;
|
|
25
|
-
top: 12.8571px;
|
|
26
|
-
animation: spin 0.6s 0s 0s infinite linear;
|
|
27
|
-
animation-fill-mode: forwards;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.circle {
|
|
31
|
-
width: ${(props) => (props.size === "small" ? "20px" : "30px")};
|
|
32
|
-
height: ${(props) => (props.size === "small" ? "20px" : "30px")};
|
|
33
|
-
border-radius: 100%;
|
|
34
|
-
border: ${(props) =>
|
|
35
|
-
props.background
|
|
36
|
-
? `4.28571px solid ${props.background}`
|
|
37
|
-
: `4.28571px solid ${colors[props.theme].label.spinLoader}`};
|
|
38
|
-
opacity: 0.2;
|
|
39
|
-
box-sizing: content-box;
|
|
40
|
-
position: absolute;
|
|
41
|
-
top: 50%;
|
|
42
|
-
left: 50%;
|
|
43
|
-
transform: translate(-50%, -50%);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@-webkit-keyframes spin {
|
|
47
|
-
100% {
|
|
48
|
-
-webkit-transform: rotate(360deg);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@keyframes spin {
|
|
53
|
-
100% {
|
|
54
|
-
transform: rotate(360deg);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
`;
|
|
58
|
-
const SpinningLoader = ({ size, background,theme }) => {
|
|
59
|
-
return (
|
|
60
|
-
<LoaderBox theme={theme} size={size} background={background}>
|
|
61
|
-
<div className="parentBox">
|
|
62
|
-
<div className="ball" />
|
|
63
|
-
<div className="circle" />
|
|
64
|
-
</div>
|
|
65
|
-
</LoaderBox>
|
|
66
|
-
);
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
export default SpinningLoader;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { colors } from "@desynova-digital/tokens";
|
|
4
|
+
const LoaderBox = styled.div`
|
|
5
|
+
position: relative;
|
|
6
|
+
display: flex;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
height: ${(props) => (props.size === "small" ? "30px" : "50px")};
|
|
9
|
+
.parentBox {
|
|
10
|
+
position: relative;
|
|
11
|
+
width: ${(props) => (props.size === "small" ? "28.5714px" : "38.5714px")};
|
|
12
|
+
height: ${(props) => (props.size === "small" ? "28.5714px" : "38.5714px")};
|
|
13
|
+
animation: spin 0.6s 0s infinite linear;
|
|
14
|
+
animation-fill-mode: forwards;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ball {
|
|
18
|
+
width: 4.28571px;
|
|
19
|
+
height: 4.28571px;
|
|
20
|
+
border-radius: 100%;
|
|
21
|
+
background-color: ${(props) =>
|
|
22
|
+
props.background ? `${props.background}` : `${colors[props.theme].label.spinLoader}`};
|
|
23
|
+
opacity: 0.8;
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 12.8571px;
|
|
26
|
+
animation: spin 0.6s 0s 0s infinite linear;
|
|
27
|
+
animation-fill-mode: forwards;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.circle {
|
|
31
|
+
width: ${(props) => (props.size === "small" ? "20px" : "30px")};
|
|
32
|
+
height: ${(props) => (props.size === "small" ? "20px" : "30px")};
|
|
33
|
+
border-radius: 100%;
|
|
34
|
+
border: ${(props) =>
|
|
35
|
+
props.background
|
|
36
|
+
? `4.28571px solid ${props.background}`
|
|
37
|
+
: `4.28571px solid ${colors[props.theme].label.spinLoader}`};
|
|
38
|
+
opacity: 0.2;
|
|
39
|
+
box-sizing: content-box;
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 50%;
|
|
42
|
+
left: 50%;
|
|
43
|
+
transform: translate(-50%, -50%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@-webkit-keyframes spin {
|
|
47
|
+
100% {
|
|
48
|
+
-webkit-transform: rotate(360deg);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@keyframes spin {
|
|
53
|
+
100% {
|
|
54
|
+
transform: rotate(360deg);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
const SpinningLoader = ({ size, background,theme }) => {
|
|
59
|
+
return (
|
|
60
|
+
<LoaderBox theme={theme} size={size} background={background}>
|
|
61
|
+
<div className="parentBox">
|
|
62
|
+
<div className="ball" />
|
|
63
|
+
<div className="circle" />
|
|
64
|
+
</div>
|
|
65
|
+
</LoaderBox>
|
|
66
|
+
);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export default SpinningLoader;
|
package/atoms/sideBar/sidebar.js
CHANGED
|
@@ -38,9 +38,9 @@ var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_tem
|
|
|
38
38
|
return _tokens.colors[props.theme].sideBar.themeColor;
|
|
39
39
|
});
|
|
40
40
|
|
|
41
|
-
/**
|
|
42
|
-
* @component
|
|
43
|
-
* @name SideBar
|
|
41
|
+
/**
|
|
42
|
+
* @component
|
|
43
|
+
* @name SideBar
|
|
44
44
|
*/
|
|
45
45
|
var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
46
46
|
function SideBar(props) {
|