pipesol-button 1.0.1-beta.10 → 1.0.1-beta.11
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.
|
@@ -1,62 +1,114 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
3
|
+
* Interface de propriedades para o componente `DownloadButton`.
|
|
4
|
+
*
|
|
5
|
+
* Use este botão para disponibilizar o download de um arquivo mantendo
|
|
6
|
+
* controle total sobre cores, raio de borda, sombra, dimensões e ícone.
|
|
7
|
+
*
|
|
8
|
+
* As propriedades marcadas com `@default` indicam o valor que será utilizado
|
|
9
|
+
* quando a prop não for fornecida ao componente.
|
|
4
10
|
*/
|
|
5
11
|
export interface DownloadButtonProps {
|
|
6
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* URL do arquivo a ser baixado.
|
|
14
|
+
*/
|
|
7
15
|
file: string;
|
|
8
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Nome do arquivo que será salvo no disco.
|
|
18
|
+
*/
|
|
9
19
|
fileName: string;
|
|
10
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* Cor de fundo do botão.
|
|
22
|
+
* @default "#1976d2"
|
|
23
|
+
*/
|
|
11
24
|
background?: string;
|
|
12
|
-
/**
|
|
25
|
+
/**
|
|
26
|
+
* Cor de fundo exibida no estado hover.
|
|
27
|
+
* @default "#1565c0"
|
|
28
|
+
*/
|
|
13
29
|
backgroundHover?: string;
|
|
14
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* Cor do texto do botão.
|
|
32
|
+
* @default "#fff"
|
|
33
|
+
*/
|
|
15
34
|
color?: string;
|
|
16
|
-
/**
|
|
35
|
+
/**
|
|
36
|
+
* Cor do texto exibida no estado hover.
|
|
37
|
+
* Se não informada, herda a mesma cor definida em `color`.
|
|
38
|
+
*/
|
|
17
39
|
colorHover?: string;
|
|
18
|
-
/**
|
|
40
|
+
/**
|
|
41
|
+
* Raio da borda do botão (qualquer valor CSS válido).
|
|
42
|
+
* @default "8px"
|
|
43
|
+
*/
|
|
19
44
|
borderRadius?: string;
|
|
20
|
-
/**
|
|
45
|
+
/**
|
|
46
|
+
* Sombra do botão (valor CSS de box-shadow).
|
|
47
|
+
* @default "none"
|
|
48
|
+
*/
|
|
21
49
|
boxShadow?: string;
|
|
22
|
-
/**
|
|
50
|
+
/**
|
|
51
|
+
* Ícone opcional exibido à esquerda do conteúdo.
|
|
52
|
+
*/
|
|
23
53
|
icon?: React.ReactNode;
|
|
24
|
-
/**
|
|
54
|
+
/**
|
|
55
|
+
* Conteúdo textual do botão (recomendado utilizar `Typography`).
|
|
56
|
+
*/
|
|
25
57
|
children: React.ReactNode;
|
|
26
58
|
/**
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
59
|
+
* Texto de acessibilidade que descreve a função do botão
|
|
60
|
+
* para leitores de tela (atributo `aria-label`).
|
|
61
|
+
*/
|
|
30
62
|
arialLabel: string;
|
|
63
|
+
/**
|
|
64
|
+
* Largura do botão (valor CSS).
|
|
65
|
+
* @default "auto"
|
|
66
|
+
*/
|
|
67
|
+
width?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Altura do botão (valor CSS).
|
|
70
|
+
* @default "fit-content"
|
|
71
|
+
*/
|
|
72
|
+
height?: string;
|
|
31
73
|
}
|
|
32
74
|
/**
|
|
33
|
-
* Botão de download customizável com suporte a ícone e
|
|
75
|
+
* Botão de download customizável com suporte a ícone e conteúdo centralizado.
|
|
34
76
|
* O texto deve ser passado via `Typography` como children.
|
|
35
77
|
*
|
|
36
|
-
*
|
|
37
|
-
* @param {string}
|
|
38
|
-
* @param {string}
|
|
39
|
-
* @param {string} [
|
|
40
|
-
* @param {string} [
|
|
41
|
-
* @param {string} [
|
|
42
|
-
* @param {string} [
|
|
43
|
-
* @param {string} [
|
|
44
|
-
* @param {string}
|
|
45
|
-
* @param {
|
|
46
|
-
* @param {React.ReactNode}
|
|
78
|
+
* ### Parâmetros
|
|
79
|
+
* @param {string} file URL do arquivo a ser baixado.
|
|
80
|
+
* @param {string} fileName Nome do arquivo que será salvo.
|
|
81
|
+
* @param {string} [background="#1976d2"] Cor de fundo padrão do botão. **@default** "#1976d2"
|
|
82
|
+
* @param {string} [backgroundHover="#1565c0"] Cor de fundo no hover. **@default** "#1565c0"
|
|
83
|
+
* @param {string} [color="#fff"] Cor do texto padrão. **@default** "#fff"
|
|
84
|
+
* @param {string} [colorHover] Cor do texto no hover (herda `color` quando ausente).
|
|
85
|
+
* @param {string} [borderRadius="8px"] Raio da borda do botão. **@default** "8px"
|
|
86
|
+
* @param {string} [boxShadow="none"] Sombra do botão. **@default** "none"
|
|
87
|
+
* @param {string} arialLabel Texto de acessibilidade (atributo `aria-label`).
|
|
88
|
+
* @param {React.ReactNode} [icon] Ícone opcional exibido à esquerda do conteúdo.
|
|
89
|
+
* @param {React.ReactNode} children Conteúdo do botão (ex.: `Typography`).
|
|
90
|
+
* @param {string} [width="auto"] Largura do botão (valor CSS). **@default** "auto"
|
|
91
|
+
* @param {string} [height="fit-content"] Altura do botão (valor CSS). **@default** "fit-content"
|
|
47
92
|
*
|
|
48
93
|
* @example
|
|
49
94
|
* ```tsx
|
|
95
|
+
* import { Typography } from '@mui/material';
|
|
96
|
+
* import { Download as DownloadIcon } from '@mui/icons-material';
|
|
97
|
+
*
|
|
50
98
|
* <DownloadButton
|
|
51
99
|
* file="/docs/manual.pdf"
|
|
52
100
|
* fileName="manual.pdf"
|
|
101
|
+
* arialLabel="Baixar manual do produto"
|
|
53
102
|
* background="#28a745"
|
|
54
103
|
* backgroundHover="#218838"
|
|
55
104
|
* color="#fff"
|
|
56
105
|
* borderRadius="12px"
|
|
106
|
+
* boxShadow="0 2px 8px rgba(0,0,0,0.15)"
|
|
107
|
+
* width="220px"
|
|
108
|
+
* height="44px"
|
|
57
109
|
* icon={<DownloadIcon />}
|
|
58
110
|
* >
|
|
59
|
-
* <Typography>Baixar Manual</Typography>
|
|
111
|
+
* <Typography variant="button">Baixar Manual</Typography>
|
|
60
112
|
* </DownloadButton>
|
|
61
113
|
* ```
|
|
62
114
|
*/
|
|
@@ -8,8 +8,12 @@ const StyledLink = styled('a', {
|
|
|
8
8
|
'colorHover',
|
|
9
9
|
'borderRadius',
|
|
10
10
|
'boxShadow',
|
|
11
|
+
'width',
|
|
12
|
+
'height'
|
|
11
13
|
].includes(prop),
|
|
12
|
-
})(({ background, backgroundHover, color, colorHover, borderRadius, boxShadow }) => ({
|
|
14
|
+
})(({ background, backgroundHover, color, colorHover, borderRadius, boxShadow, width, height }) => ({
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
13
17
|
display: 'inline-flex',
|
|
14
18
|
alignItems: 'center',
|
|
15
19
|
justifyContent: 'center',
|
|
@@ -28,38 +32,48 @@ const StyledLink = styled('a', {
|
|
|
28
32
|
},
|
|
29
33
|
}));
|
|
30
34
|
/**
|
|
31
|
-
* Botão de download customizável com suporte a ícone e
|
|
35
|
+
* Botão de download customizável com suporte a ícone e conteúdo centralizado.
|
|
32
36
|
* O texto deve ser passado via `Typography` como children.
|
|
33
37
|
*
|
|
34
|
-
*
|
|
35
|
-
* @param {string}
|
|
36
|
-
* @param {string}
|
|
37
|
-
* @param {string} [
|
|
38
|
-
* @param {string} [
|
|
39
|
-
* @param {string} [
|
|
40
|
-
* @param {string} [
|
|
41
|
-
* @param {string} [
|
|
42
|
-
* @param {string}
|
|
43
|
-
* @param {
|
|
44
|
-
* @param {React.ReactNode}
|
|
38
|
+
* ### Parâmetros
|
|
39
|
+
* @param {string} file URL do arquivo a ser baixado.
|
|
40
|
+
* @param {string} fileName Nome do arquivo que será salvo.
|
|
41
|
+
* @param {string} [background="#1976d2"] Cor de fundo padrão do botão. **@default** "#1976d2"
|
|
42
|
+
* @param {string} [backgroundHover="#1565c0"] Cor de fundo no hover. **@default** "#1565c0"
|
|
43
|
+
* @param {string} [color="#fff"] Cor do texto padrão. **@default** "#fff"
|
|
44
|
+
* @param {string} [colorHover] Cor do texto no hover (herda `color` quando ausente).
|
|
45
|
+
* @param {string} [borderRadius="8px"] Raio da borda do botão. **@default** "8px"
|
|
46
|
+
* @param {string} [boxShadow="none"] Sombra do botão. **@default** "none"
|
|
47
|
+
* @param {string} arialLabel Texto de acessibilidade (atributo `aria-label`).
|
|
48
|
+
* @param {React.ReactNode} [icon] Ícone opcional exibido à esquerda do conteúdo.
|
|
49
|
+
* @param {React.ReactNode} children Conteúdo do botão (ex.: `Typography`).
|
|
50
|
+
* @param {string} [width="auto"] Largura do botão (valor CSS). **@default** "auto"
|
|
51
|
+
* @param {string} [height="fit-content"] Altura do botão (valor CSS). **@default** "fit-content"
|
|
45
52
|
*
|
|
46
53
|
* @example
|
|
47
54
|
* ```tsx
|
|
55
|
+
* import { Typography } from '@mui/material';
|
|
56
|
+
* import { Download as DownloadIcon } from '@mui/icons-material';
|
|
57
|
+
*
|
|
48
58
|
* <DownloadButton
|
|
49
59
|
* file="/docs/manual.pdf"
|
|
50
60
|
* fileName="manual.pdf"
|
|
61
|
+
* arialLabel="Baixar manual do produto"
|
|
51
62
|
* background="#28a745"
|
|
52
63
|
* backgroundHover="#218838"
|
|
53
64
|
* color="#fff"
|
|
54
65
|
* borderRadius="12px"
|
|
66
|
+
* boxShadow="0 2px 8px rgba(0,0,0,0.15)"
|
|
67
|
+
* width="220px"
|
|
68
|
+
* height="44px"
|
|
55
69
|
* icon={<DownloadIcon />}
|
|
56
70
|
* >
|
|
57
|
-
* <Typography>Baixar Manual</Typography>
|
|
71
|
+
* <Typography variant="button">Baixar Manual</Typography>
|
|
58
72
|
* </DownloadButton>
|
|
59
73
|
* ```
|
|
60
74
|
*/
|
|
61
|
-
const DownloadButton = ({ file, fileName, background, backgroundHover, color, colorHover, borderRadius, boxShadow, arialLabel, icon, children, }) => {
|
|
62
|
-
return (_jsxs(StyledLink, { href: file, download: fileName, background: background, backgroundHover: backgroundHover, color: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": arialLabel, children: [icon && _jsx("span", { children: icon }), children] }));
|
|
75
|
+
const DownloadButton = ({ width = 'auto', height = 'fit-content', file, fileName, background, backgroundHover, color, colorHover, borderRadius, boxShadow, arialLabel, icon, children, }) => {
|
|
76
|
+
return (_jsxs(StyledLink, { href: file, download: fileName, background: background, backgroundHover: backgroundHover, color: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": arialLabel, width: width, height: height, children: [icon && _jsx("span", { children: icon }), children] }));
|
|
63
77
|
};
|
|
64
78
|
DownloadButton.displayName = 'DownloadButton';
|
|
65
79
|
export default DownloadButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DownloadButton.js","sourceRoot":"","sources":["../../src/components/DownloadButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"DownloadButton.js","sourceRoot":"","sources":["../../src/components/DownloadButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAuF9C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IAC7B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,YAAY;QACZ,iBAAiB;QACjB,OAAO;QACP,YAAY;QACZ,cAAc;QACd,WAAW;QACX,OAAO;QACP,QAAQ;KACT,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CASC,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAClG,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,GAAG,EAAE,KAAK;IACV,UAAU,EAAE,UAAU,IAAI,SAAS;IACnC,KAAK,EAAE,KAAK,IAAI,MAAM;IACtB,YAAY,EAAE,YAAY,IAAI,KAAK;IACnC,SAAS,EAAE,SAAS,IAAI,MAAM;IAC9B,OAAO,EAAE,UAAU;IACnB,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,eAAe;IAC3B,SAAS,EAAE;QACT,UAAU,EAAE,eAAe,IAAI,SAAS;QACxC,KAAK,EAAE,UAAU,IAAI,KAAK,IAAI,MAAM;KACrC;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,cAAc,GAAkC,CAAC,EACrD,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,aAAa,EACtB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,gBACR,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,aAEb,IAAI,IAAI,yBAAO,IAAI,GAAQ,EAC3B,QAAQ,IACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,eAAe,cAAc,CAAC"}
|