wca-designsystem 1.0.15 → 1.0.17
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/package.json +1 -1
- package/src/components/molecules/CardInicial/index.tsx +3 -1
- package/src/components/molecules/CardInicial/styles.ts +10 -2
- package/src/components/molecules/MosaicoCritica/MosaicoCritica.stories.tsx +32 -0
- package/src/components/molecules/MosaicoCritica/index.tsx +107 -0
- package/src/components/molecules/MosaicoCritica/styles.ts +38 -0
package/package.json
CHANGED
|
@@ -40,7 +40,9 @@ const CardInicial = ({
|
|
|
40
40
|
background: acessoPermitido ? color : theme.colors.gray['500'],
|
|
41
41
|
}}
|
|
42
42
|
>
|
|
43
|
-
|
|
43
|
+
|
|
44
|
+
<Icone width={45} height={45} svg={icone} fill={theme.colors.white} />
|
|
45
|
+
|
|
44
46
|
</S.CardInicialHeader>
|
|
45
47
|
|
|
46
48
|
<S.CardInicialBody>
|
|
@@ -15,29 +15,37 @@ export const CardInicialWrapper = styled.div`
|
|
|
15
15
|
export const CardInicialHeader = styled.div`
|
|
16
16
|
${() => css`
|
|
17
17
|
width: auto;
|
|
18
|
-
max-width:
|
|
19
|
-
padding:
|
|
18
|
+
max-width: 320px;
|
|
19
|
+
padding: 10px 0;
|
|
20
20
|
border-radius: 8px 8px 0 0;
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
23
23
|
justify-content: center;
|
|
24
24
|
`}
|
|
25
|
+
|
|
25
26
|
`;
|
|
26
27
|
|
|
27
28
|
export const CardInicialBody = styled.div`
|
|
28
29
|
${({ theme }) => css`
|
|
30
|
+
margin-top: 10px;
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: 8px;
|
|
29
34
|
text-align: center;
|
|
30
35
|
background-color: ${theme.colors.white};
|
|
36
|
+
padding: 0 12px;
|
|
31
37
|
|
|
32
38
|
h2 {
|
|
33
39
|
font-size: ${theme.sizes.large};
|
|
34
40
|
font-weight: 700;
|
|
41
|
+
margin: 0;
|
|
35
42
|
}
|
|
36
43
|
|
|
37
44
|
p {
|
|
38
45
|
font-size: ${theme.sizes.small};
|
|
39
46
|
font-weight: 300;
|
|
40
47
|
color: ${theme.colors.blackSti};
|
|
48
|
+
margin: 0;
|
|
41
49
|
}
|
|
42
50
|
`}
|
|
43
51
|
`;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Meta } from '@storybook/react/*';
|
|
3
|
+
import MosaicoCritica from '.';
|
|
4
|
+
import '@mantine/charts/styles.css';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Components/moleculas/MosaicoCritica',
|
|
8
|
+
component: MosaicoCritica,
|
|
9
|
+
} as Meta;
|
|
10
|
+
|
|
11
|
+
const props = {
|
|
12
|
+
uf: 'MG',
|
|
13
|
+
nome: '9999 | NOME COMPLETO COM CÓDIGOS ASSOCIADOS',
|
|
14
|
+
saldo: '1000.0',
|
|
15
|
+
canal: '02 - DIGITAL',
|
|
16
|
+
media: '1560.0',
|
|
17
|
+
critica: '1220.0',
|
|
18
|
+
absorcao: '221.0',
|
|
19
|
+
desdobramento: '1200.0',
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const Template: any = (args: any) => (
|
|
23
|
+
<>
|
|
24
|
+
<MosaicoCritica {...args} />
|
|
25
|
+
</>
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
export const MosaicoCriticaStory = Template.bind();
|
|
29
|
+
|
|
30
|
+
MosaicoCriticaStory.args = {
|
|
31
|
+
...props,
|
|
32
|
+
};
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import * as S from './styles';
|
|
3
|
+
import { theme } from '../../../styles/theme';
|
|
4
|
+
import { Box, Flex } from '@mantine/core';
|
|
5
|
+
import IconeBotao from '../../atomos/IconeBotao';
|
|
6
|
+
import Icone from '../../atomos/Icone';
|
|
7
|
+
import alocar from '../../../assets/imagens/icons/Mais.svg';
|
|
8
|
+
import retirar from '../../../assets/imagens/icons/Menos.svg';
|
|
9
|
+
|
|
10
|
+
interface MosaicoCriticaProps {
|
|
11
|
+
color?: string;
|
|
12
|
+
nome?: string;
|
|
13
|
+
uf?: string;
|
|
14
|
+
canal?: string;
|
|
15
|
+
saldo?: string;
|
|
16
|
+
media?: string;
|
|
17
|
+
absorcao?: string;
|
|
18
|
+
critica?: string;
|
|
19
|
+
desdobramento?: string;
|
|
20
|
+
onClickAlocar: () => void;
|
|
21
|
+
onClickRetirar: () => void;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const MosaicoCritica = ({
|
|
25
|
+
uf,
|
|
26
|
+
nome,
|
|
27
|
+
saldo,
|
|
28
|
+
canal,
|
|
29
|
+
media,
|
|
30
|
+
critica,
|
|
31
|
+
absorcao,
|
|
32
|
+
desdobramento,
|
|
33
|
+
onClickAlocar,
|
|
34
|
+
onClickRetirar,
|
|
35
|
+
color = theme.colors.purpleSec,
|
|
36
|
+
}: MosaicoCriticaProps) => {
|
|
37
|
+
return (
|
|
38
|
+
<S.MosaicoCriticaContainer color={color}>
|
|
39
|
+
<Flex align={'center'} justify={'space-between'} gap={30}>
|
|
40
|
+
<Box className="texto-info">
|
|
41
|
+
<div>
|
|
42
|
+
<b>NOME:</b> {nome}
|
|
43
|
+
</div>
|
|
44
|
+
<div>
|
|
45
|
+
<b>UF:</b> {uf}
|
|
46
|
+
</div>
|
|
47
|
+
<div>
|
|
48
|
+
<b>CANAL DE DISTRIBUIÇÃO:</b> {canal}
|
|
49
|
+
</div>
|
|
50
|
+
</Box>
|
|
51
|
+
|
|
52
|
+
<Box mx={20} flex={1}>
|
|
53
|
+
<Flex justify={'space-between'} gap={5}>
|
|
54
|
+
<S.MosaicoCriticaCard color={color}>
|
|
55
|
+
<div className="value">{desdobramento ?? '-'}</div>
|
|
56
|
+
<div className="text">Desdobramento</div>
|
|
57
|
+
</S.MosaicoCriticaCard>
|
|
58
|
+
|
|
59
|
+
<S.MosaicoCriticaCard color={color}>
|
|
60
|
+
<div className="value">{media ?? '-'}</div>
|
|
61
|
+
<div className="text">Média</div>
|
|
62
|
+
</S.MosaicoCriticaCard>
|
|
63
|
+
|
|
64
|
+
<S.MosaicoCriticaCard color={color}>
|
|
65
|
+
<div className="value">{critica ?? '-'}</div>
|
|
66
|
+
<div className="text">Crítica</div>
|
|
67
|
+
</S.MosaicoCriticaCard>
|
|
68
|
+
|
|
69
|
+
<S.MosaicoCriticaCard color={color}>
|
|
70
|
+
<div className="value">{absorcao ?? '-'}</div>
|
|
71
|
+
<div className="text">Absorção</div>
|
|
72
|
+
</S.MosaicoCriticaCard>
|
|
73
|
+
|
|
74
|
+
<S.MosaicoCriticaCard color={color}>
|
|
75
|
+
<div className="value">{saldo ?? '-'}</div>
|
|
76
|
+
<div className="text">Saldo</div>
|
|
77
|
+
</S.MosaicoCriticaCard>
|
|
78
|
+
</Flex>
|
|
79
|
+
</Box>
|
|
80
|
+
|
|
81
|
+
<Box>
|
|
82
|
+
<Flex gap={10}>
|
|
83
|
+
<IconeBotao
|
|
84
|
+
toolTipInfo="Alocar"
|
|
85
|
+
tipo="table"
|
|
86
|
+
color={color}
|
|
87
|
+
onClick={onClickAlocar}
|
|
88
|
+
>
|
|
89
|
+
<Icone svg={alocar} fill={color} width={14} height={14} />
|
|
90
|
+
</IconeBotao>
|
|
91
|
+
|
|
92
|
+
<IconeBotao
|
|
93
|
+
toolTipInfo="Retirar"
|
|
94
|
+
tipo="table"
|
|
95
|
+
color={color}
|
|
96
|
+
onClick={onClickRetirar}
|
|
97
|
+
>
|
|
98
|
+
<Icone svg={retirar} fill={color} width={14} height={14} />
|
|
99
|
+
</IconeBotao>
|
|
100
|
+
</Flex>
|
|
101
|
+
</Box>
|
|
102
|
+
</Flex>
|
|
103
|
+
</S.MosaicoCriticaContainer>
|
|
104
|
+
);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export default MosaicoCritica;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
|
|
3
|
+
export const MosaicoCriticaContainer = styled.div`
|
|
4
|
+
${({ color }) => css`
|
|
5
|
+
border: 1px solid ${color};
|
|
6
|
+
border-left: 6px solid ${color};
|
|
7
|
+
border-radius: 5px;
|
|
8
|
+
padding: 10px;
|
|
9
|
+
padding-right: 15px;
|
|
10
|
+
|
|
11
|
+
.texto-info {
|
|
12
|
+
color: ${color};
|
|
13
|
+
font-size: 13px;
|
|
14
|
+
}
|
|
15
|
+
`}
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
export const MosaicoCriticaCard = styled.div`
|
|
19
|
+
${({ color }) => css`
|
|
20
|
+
width: 100%;
|
|
21
|
+
max-width: 150px;
|
|
22
|
+
background: #eeeeee;
|
|
23
|
+
color: ${color};
|
|
24
|
+
padding: 5px;
|
|
25
|
+
border-radius: 5px;
|
|
26
|
+
text-align: center;
|
|
27
|
+
|
|
28
|
+
.value {
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
font-size: 20px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.text {
|
|
34
|
+
font-size: 13px;
|
|
35
|
+
color: gray;
|
|
36
|
+
}
|
|
37
|
+
`}
|
|
38
|
+
`;
|