anima-ds-nucleus 1.0.3 → 1.0.5
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/anima-ds-nucleus.css +1 -1
- package/dist/anima-ds.cjs.js +124 -57
- package/dist/anima-ds.esm.js +6591 -5067
- package/package.json +10 -2
- package/src/assets/nucleus-logo.svg +3 -0
- package/src/components/Atoms/LogoHexa/LogoHexa.jsx +34 -0
- package/src/components/Atoms/LogoHexa/LogoHexa.stories.jsx +36 -0
- package/src/components/Atoms/Typography/Typography.jsx +4 -0
- package/src/components/Atoms/Typography/Typography.stories.jsx +37 -1
- package/src/components/DataDisplay/Card/Card.jsx +117 -24
- package/src/components/DataDisplay/Card/Card.stories.jsx +119 -35
- package/src/components/DataDisplay/Card/CardError.jsx +142 -0
- package/src/components/DataDisplay/Card/CardSkeleton.jsx +96 -0
- package/src/components/DataDisplay/Card/CardTituloCorto.jsx +62 -0
- package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx +80 -0
- package/src/components/DataDisplay/Card/CardTituloLargo.jsx +62 -0
- package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx +77 -0
- package/src/components/DataDisplay/Card/CardVacia.jsx +111 -0
- package/src/components/Layout/Header/HeaderConBuscador.stories.jsx +8 -0
- package/src/components/Layout/Header/HeaderCore.jsx +314 -85
- package/src/components/Layout/Header/HeaderCore.stories.jsx +25 -21
- package/src/components/Layout/Header/HeaderGeneral.jsx +92 -0
- package/src/components/Layout/Header/HeaderGeneral.stories.jsx +64 -0
- package/src/components/Layout/Header/HeaderPoint.jsx +120 -0
- package/src/components/Layout/Header/HeaderPoint.stories.jsx +110 -0
- package/src/components/Layout/NavPoint/NavPoint.jsx +64 -0
- package/src/components/Layout/NavPoint/NavPoint.stories.jsx +52 -0
- package/src/components/Layout/Sidebar/SidebarCore.jsx +524 -91
- package/src/components/Layout/Sidebar/SidebarCore.stories.jsx +76 -1
- package/src/components/Layout/Sidebar/SidebarPoint.jsx +264 -59
- package/src/components/Layout/Sidebar/SidebarPoint.stories.jsx +69 -0
- package/src/index.js +12 -3
- package/src/style.css +25 -0
- package/src/components/Layout/Header/Header.jsx +0 -50
- package/src/components/Layout/Header/Header.stories.jsx +0 -36
- package/src/components/Layout/Sidebar/Sidebar.jsx +0 -230
- package/src/components/Layout/Sidebar/Sidebar.stories.jsx +0 -90
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
export const CardSkeleton = ({
|
|
2
|
+
className = '',
|
|
3
|
+
...props
|
|
4
|
+
}) => {
|
|
5
|
+
return (
|
|
6
|
+
<div
|
|
7
|
+
className={`bg-white ${className}`}
|
|
8
|
+
style={{
|
|
9
|
+
width: '379.5px',
|
|
10
|
+
height: '476px',
|
|
11
|
+
borderRadius: '14px',
|
|
12
|
+
border: '1px solid #0000001A',
|
|
13
|
+
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
14
|
+
opacity: 1
|
|
15
|
+
}}
|
|
16
|
+
{...props}
|
|
17
|
+
>
|
|
18
|
+
<style>{`
|
|
19
|
+
@keyframes skeleton-pulse {
|
|
20
|
+
0%, 100% {
|
|
21
|
+
background-color: #DDDDDD;
|
|
22
|
+
}
|
|
23
|
+
50% {
|
|
24
|
+
background-color: #AAAAAA;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
.skeleton-animation {
|
|
28
|
+
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
29
|
+
}
|
|
30
|
+
`}</style>
|
|
31
|
+
<div className="h-full flex flex-col">
|
|
32
|
+
{/* Header skeleton - placeholder para el título */}
|
|
33
|
+
<div
|
|
34
|
+
style={{
|
|
35
|
+
width: '379.5px',
|
|
36
|
+
height: '60px',
|
|
37
|
+
paddingTop: '24px',
|
|
38
|
+
paddingRight: '24px',
|
|
39
|
+
paddingBottom: '6px',
|
|
40
|
+
paddingLeft: '24px',
|
|
41
|
+
opacity: 1
|
|
42
|
+
}}
|
|
43
|
+
>
|
|
44
|
+
<div
|
|
45
|
+
className="rounded skeleton-animation"
|
|
46
|
+
style={{
|
|
47
|
+
backgroundColor: '#DDDDDD',
|
|
48
|
+
height: '20px',
|
|
49
|
+
width: '200px'
|
|
50
|
+
}}
|
|
51
|
+
></div>
|
|
52
|
+
</div>
|
|
53
|
+
{/* Body skeleton - 3 placeholders grandes */}
|
|
54
|
+
<div
|
|
55
|
+
className="flex-1"
|
|
56
|
+
style={{
|
|
57
|
+
paddingLeft: '24px',
|
|
58
|
+
paddingRight: '24px',
|
|
59
|
+
paddingBottom: '24px',
|
|
60
|
+
display: 'flex',
|
|
61
|
+
flexDirection: 'column',
|
|
62
|
+
gap: '16px'
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
<div
|
|
66
|
+
className="rounded skeleton-animation"
|
|
67
|
+
style={{
|
|
68
|
+
backgroundColor: '#DDDDDD',
|
|
69
|
+
height: '80px',
|
|
70
|
+
width: '100%'
|
|
71
|
+
}}
|
|
72
|
+
></div>
|
|
73
|
+
<div
|
|
74
|
+
className="rounded skeleton-animation"
|
|
75
|
+
style={{
|
|
76
|
+
backgroundColor: '#DDDDDD',
|
|
77
|
+
height: '80px',
|
|
78
|
+
width: '100%'
|
|
79
|
+
}}
|
|
80
|
+
></div>
|
|
81
|
+
<div
|
|
82
|
+
className="rounded skeleton-animation"
|
|
83
|
+
style={{
|
|
84
|
+
backgroundColor: '#DDDDDD',
|
|
85
|
+
height: '80px',
|
|
86
|
+
width: '100%'
|
|
87
|
+
}}
|
|
88
|
+
></div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export default CardSkeleton;
|
|
96
|
+
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { Typography } from '../../Atoms/Typography/Typography';
|
|
2
|
+
|
|
3
|
+
export const CardTituloCorto = ({
|
|
4
|
+
title = "Notificaciones",
|
|
5
|
+
children,
|
|
6
|
+
className = '',
|
|
7
|
+
...props
|
|
8
|
+
}) => {
|
|
9
|
+
return (
|
|
10
|
+
<div
|
|
11
|
+
className={`bg-white ${className}`}
|
|
12
|
+
style={{
|
|
13
|
+
width: '379.5px',
|
|
14
|
+
height: '476px',
|
|
15
|
+
borderRadius: '14px',
|
|
16
|
+
border: '1px solid #0000001A',
|
|
17
|
+
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
18
|
+
opacity: 1
|
|
19
|
+
}}
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<div
|
|
23
|
+
style={{
|
|
24
|
+
width: '379.5px',
|
|
25
|
+
height: '60px',
|
|
26
|
+
paddingTop: '24px',
|
|
27
|
+
paddingRight: '24px',
|
|
28
|
+
paddingBottom: '6px',
|
|
29
|
+
paddingLeft: '24px',
|
|
30
|
+
opacity: 1
|
|
31
|
+
}}
|
|
32
|
+
className="flex items-start justify-between"
|
|
33
|
+
>
|
|
34
|
+
<div
|
|
35
|
+
style={{
|
|
36
|
+
width: '331.5px',
|
|
37
|
+
height: '30px',
|
|
38
|
+
opacity: 1
|
|
39
|
+
}}
|
|
40
|
+
>
|
|
41
|
+
<Typography
|
|
42
|
+
variant="body-md"
|
|
43
|
+
className="color-gray-700"
|
|
44
|
+
>
|
|
45
|
+
{title}
|
|
46
|
+
</Typography>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
{children && (
|
|
50
|
+
<div className="px-4 pb-4">
|
|
51
|
+
{children}
|
|
52
|
+
</div>
|
|
53
|
+
)}
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default CardTituloCorto;
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { Typography } from '../../Atoms/Typography/Typography';
|
|
2
|
+
|
|
3
|
+
export const CardTituloCortoMasEstado = ({
|
|
4
|
+
title = "Notificaciones",
|
|
5
|
+
status = "3 nuevas",
|
|
6
|
+
children,
|
|
7
|
+
className = '',
|
|
8
|
+
...props
|
|
9
|
+
}) => {
|
|
10
|
+
return (
|
|
11
|
+
<div
|
|
12
|
+
className={`bg-white ${className}`}
|
|
13
|
+
style={{
|
|
14
|
+
width: '379.5px',
|
|
15
|
+
height: '476px',
|
|
16
|
+
borderRadius: '14px',
|
|
17
|
+
border: '1px solid #0000001A',
|
|
18
|
+
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
19
|
+
opacity: 1
|
|
20
|
+
}}
|
|
21
|
+
{...props}
|
|
22
|
+
>
|
|
23
|
+
<div
|
|
24
|
+
style={{
|
|
25
|
+
width: '379.5px',
|
|
26
|
+
height: '60px',
|
|
27
|
+
paddingTop: '24px',
|
|
28
|
+
paddingRight: '24px',
|
|
29
|
+
paddingBottom: '6px',
|
|
30
|
+
paddingLeft: '24px',
|
|
31
|
+
opacity: 1
|
|
32
|
+
}}
|
|
33
|
+
className="flex items-start justify-between"
|
|
34
|
+
>
|
|
35
|
+
<div
|
|
36
|
+
style={{
|
|
37
|
+
width: '331.5px',
|
|
38
|
+
height: '30px',
|
|
39
|
+
opacity: 1
|
|
40
|
+
}}
|
|
41
|
+
>
|
|
42
|
+
<Typography
|
|
43
|
+
variant="body-md"
|
|
44
|
+
className="color-gray-700"
|
|
45
|
+
>
|
|
46
|
+
{title}
|
|
47
|
+
</Typography>
|
|
48
|
+
</div>
|
|
49
|
+
<span
|
|
50
|
+
className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
|
|
51
|
+
style={{
|
|
52
|
+
width: '90px',
|
|
53
|
+
height: '24px',
|
|
54
|
+
borderRadius: '12px',
|
|
55
|
+
paddingTop: '2px',
|
|
56
|
+
paddingRight: '12px',
|
|
57
|
+
paddingBottom: '4px',
|
|
58
|
+
paddingLeft: '12px',
|
|
59
|
+
backgroundColor: '#E6F7F0',
|
|
60
|
+
color: '#2D5C63',
|
|
61
|
+
opacity: 1
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
{status}
|
|
65
|
+
</span>
|
|
66
|
+
</div>
|
|
67
|
+
{children && (
|
|
68
|
+
<div className="px-4 pb-4">
|
|
69
|
+
{children}
|
|
70
|
+
</div>
|
|
71
|
+
)}
|
|
72
|
+
</div>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export default CardTituloCortoMasEstado;
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { Typography } from '../../Atoms/Typography/Typography';
|
|
2
|
+
|
|
3
|
+
export const CardTituloLargo = ({
|
|
4
|
+
title = "Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",
|
|
5
|
+
children,
|
|
6
|
+
className = '',
|
|
7
|
+
...props
|
|
8
|
+
}) => {
|
|
9
|
+
return (
|
|
10
|
+
<div
|
|
11
|
+
className={`bg-white ${className}`}
|
|
12
|
+
style={{
|
|
13
|
+
width: '379.5px',
|
|
14
|
+
height: '476px',
|
|
15
|
+
borderRadius: '14px',
|
|
16
|
+
border: '1px solid #0000001A',
|
|
17
|
+
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
18
|
+
opacity: 1
|
|
19
|
+
}}
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<div
|
|
23
|
+
style={{
|
|
24
|
+
width: '379.5px',
|
|
25
|
+
height: '60px',
|
|
26
|
+
paddingTop: '24px',
|
|
27
|
+
paddingRight: '24px',
|
|
28
|
+
paddingBottom: '6px',
|
|
29
|
+
paddingLeft: '24px',
|
|
30
|
+
opacity: 1
|
|
31
|
+
}}
|
|
32
|
+
className="flex items-start justify-between"
|
|
33
|
+
>
|
|
34
|
+
<div
|
|
35
|
+
style={{
|
|
36
|
+
width: '331.5px',
|
|
37
|
+
height: '30px',
|
|
38
|
+
opacity: 1
|
|
39
|
+
}}
|
|
40
|
+
>
|
|
41
|
+
<Typography
|
|
42
|
+
variant="body-md"
|
|
43
|
+
className="color-gray-700"
|
|
44
|
+
>
|
|
45
|
+
{title}
|
|
46
|
+
</Typography>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
{children && (
|
|
50
|
+
<div className="px-4 pb-4">
|
|
51
|
+
{children}
|
|
52
|
+
</div>
|
|
53
|
+
)}
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default CardTituloLargo;
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { Typography } from '../../Atoms/Typography/Typography';
|
|
2
|
+
|
|
3
|
+
export const CardTituloLargoMasEstado = ({
|
|
4
|
+
title = "Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",
|
|
5
|
+
status = "3 nuevas",
|
|
6
|
+
children,
|
|
7
|
+
className = '',
|
|
8
|
+
...props
|
|
9
|
+
}) => {
|
|
10
|
+
return (
|
|
11
|
+
<div
|
|
12
|
+
className={`bg-white ${className}`}
|
|
13
|
+
style={{
|
|
14
|
+
width: '379.5px',
|
|
15
|
+
height: '476px',
|
|
16
|
+
borderRadius: '14px',
|
|
17
|
+
border: '1px solid #0000001A',
|
|
18
|
+
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
19
|
+
opacity: 1
|
|
20
|
+
}}
|
|
21
|
+
{...props}
|
|
22
|
+
>
|
|
23
|
+
<div
|
|
24
|
+
style={{
|
|
25
|
+
width: '379.5px',
|
|
26
|
+
height: '90px',
|
|
27
|
+
paddingTop: '24px',
|
|
28
|
+
paddingRight: '24px',
|
|
29
|
+
paddingBottom: '6px',
|
|
30
|
+
paddingLeft: '24px',
|
|
31
|
+
opacity: 1
|
|
32
|
+
}}
|
|
33
|
+
className="flex items-start justify-between"
|
|
34
|
+
>
|
|
35
|
+
<div
|
|
36
|
+
style={{
|
|
37
|
+
width: '241.5px',
|
|
38
|
+
height: '60px',
|
|
39
|
+
opacity: 1
|
|
40
|
+
}}
|
|
41
|
+
>
|
|
42
|
+
<Typography
|
|
43
|
+
variant="body-md"
|
|
44
|
+
className="color-gray-700"
|
|
45
|
+
>
|
|
46
|
+
{title}
|
|
47
|
+
</Typography>
|
|
48
|
+
</div>
|
|
49
|
+
<span
|
|
50
|
+
className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
|
|
51
|
+
style={{
|
|
52
|
+
width: '90px',
|
|
53
|
+
height: '24px',
|
|
54
|
+
borderRadius: '12px',
|
|
55
|
+
paddingTop: '2px',
|
|
56
|
+
paddingRight: '12px',
|
|
57
|
+
paddingBottom: '4px',
|
|
58
|
+
paddingLeft: '12px',
|
|
59
|
+
backgroundColor: '#E6F7F0',
|
|
60
|
+
color: '#2D5C63',
|
|
61
|
+
opacity: 1
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
{status}
|
|
65
|
+
</span>
|
|
66
|
+
</div>
|
|
67
|
+
{children && (
|
|
68
|
+
<div className="px-4 pb-4">
|
|
69
|
+
{children}
|
|
70
|
+
</div>
|
|
71
|
+
)}
|
|
72
|
+
</div>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export default CardTituloLargoMasEstado;
|
|
77
|
+
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { Icon } from '../../Atoms/Icon/Icon';
|
|
2
|
+
import { Typography } from '../../Atoms/Typography/Typography';
|
|
3
|
+
|
|
4
|
+
export const CardVacia = ({
|
|
5
|
+
title = "Notificaciones",
|
|
6
|
+
className = '',
|
|
7
|
+
...props
|
|
8
|
+
}) => {
|
|
9
|
+
return (
|
|
10
|
+
<div
|
|
11
|
+
className={`bg-white ${className}`}
|
|
12
|
+
style={{
|
|
13
|
+
width: '379.5px',
|
|
14
|
+
height: '476px',
|
|
15
|
+
borderRadius: '14px',
|
|
16
|
+
border: '1px solid #0000001A',
|
|
17
|
+
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
18
|
+
opacity: 1
|
|
19
|
+
}}
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<div
|
|
23
|
+
style={{
|
|
24
|
+
width: '379.5px',
|
|
25
|
+
height: '60px',
|
|
26
|
+
paddingTop: '24px',
|
|
27
|
+
paddingRight: '24px',
|
|
28
|
+
paddingBottom: '6px',
|
|
29
|
+
paddingLeft: '24px',
|
|
30
|
+
opacity: 1
|
|
31
|
+
}}
|
|
32
|
+
className="flex items-start justify-between"
|
|
33
|
+
>
|
|
34
|
+
<div
|
|
35
|
+
style={{
|
|
36
|
+
width: '331.5px',
|
|
37
|
+
height: '30px',
|
|
38
|
+
opacity: 1
|
|
39
|
+
}}
|
|
40
|
+
>
|
|
41
|
+
<Typography
|
|
42
|
+
variant="body-md"
|
|
43
|
+
className="color-gray-700"
|
|
44
|
+
>
|
|
45
|
+
{title}
|
|
46
|
+
</Typography>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div
|
|
50
|
+
className="flex flex-col items-center justify-center"
|
|
51
|
+
style={{
|
|
52
|
+
paddingTop: '80px',
|
|
53
|
+
paddingBottom: '24px',
|
|
54
|
+
minHeight: 'calc(476px - 60px)',
|
|
55
|
+
display: 'flex',
|
|
56
|
+
justifyContent: 'flex-start'
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
<div
|
|
60
|
+
className="mb-4 flex items-center justify-center"
|
|
61
|
+
style={{
|
|
62
|
+
width: '63.99068069458008px',
|
|
63
|
+
height: '64px',
|
|
64
|
+
borderRadius: '12px',
|
|
65
|
+
paddingTop: '8px',
|
|
66
|
+
paddingRight: '8px',
|
|
67
|
+
paddingBottom: '8px',
|
|
68
|
+
paddingLeft: '8px',
|
|
69
|
+
backgroundColor: '#E6F7F0',
|
|
70
|
+
opacity: 1
|
|
71
|
+
}}
|
|
72
|
+
>
|
|
73
|
+
<Icon
|
|
74
|
+
name="HandThumbDownIcon"
|
|
75
|
+
variant="24-outline"
|
|
76
|
+
size={32}
|
|
77
|
+
className="color-gray-900"
|
|
78
|
+
/>
|
|
79
|
+
</div>
|
|
80
|
+
<Typography
|
|
81
|
+
variant="h5"
|
|
82
|
+
className="color-gray-900 mb-2"
|
|
83
|
+
style={{
|
|
84
|
+
fontFamily: 'IBM Plex Sans',
|
|
85
|
+
fontWeight: 400,
|
|
86
|
+
fontStyle: 'normal',
|
|
87
|
+
fontSize: '24px',
|
|
88
|
+
lineHeight: '36px',
|
|
89
|
+
letterSpacing: '0px',
|
|
90
|
+
textAlign: 'center'
|
|
91
|
+
}}
|
|
92
|
+
>
|
|
93
|
+
UPS...
|
|
94
|
+
</Typography>
|
|
95
|
+
<Typography
|
|
96
|
+
variant="body-lg"
|
|
97
|
+
className="color-gray-700 text-center"
|
|
98
|
+
style={{
|
|
99
|
+
fontSize: '18px',
|
|
100
|
+
lineHeight: '27px'
|
|
101
|
+
}}
|
|
102
|
+
>
|
|
103
|
+
Parece que esta tarjeta no contiene información.
|
|
104
|
+
</Typography>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
);
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export default CardVacia;
|
|
111
|
+
|