pipesol-button 1.0.0-beta.1 → 1.0.1-beta.3
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/components/CircularIconLink.d.ts +29 -0
- package/dist/components/CircularIconLink.js +18 -0
- package/dist/components/CircularIconLink.js.map +1 -0
- package/dist/components/NavigationButton.d.ts +42 -3
- package/dist/components/NavigationButton.js +14 -12
- package/dist/components/NavigationButton.js.map +1 -1
- package/dist/components/NavigationLink.d.ts +16 -0
- package/dist/components/NavigationLink.js +43 -0
- package/dist/components/NavigationLink.js.map +1 -0
- package/dist/components/WhatsAppButton.d.ts +22 -0
- package/dist/components/WhatsAppButton.js +16 -0
- package/dist/components/WhatsAppButton.js.map +1 -1
- package/dist/components/WhatsAppIcon.d.ts +22 -0
- package/dist/components/WhatsAppIcon.js +14 -1
- package/dist/components/WhatsAppIcon.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
|
+
import { SvgIconProps } from '@mui/material';
|
|
3
|
+
/**
|
|
4
|
+
* Propriedades do componente `CircularIconLink`.
|
|
5
|
+
*/
|
|
6
|
+
export interface CircularIconLinkProps {
|
|
7
|
+
/**
|
|
8
|
+
* Ícone do Material UI (`<SvgIcon>`) ou uma imagem (`<img>`).
|
|
9
|
+
* Aceita:
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Instagram sx={{ color: 'white' }} />
|
|
12
|
+
* // ou
|
|
13
|
+
* <img src="/logo.png" alt="logo" width={24} height={24} />
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
children: ReactElement<HTMLImageElement> | ReactElement<SvgIconProps>;
|
|
17
|
+
/** URL a ser aberta em nova aba. */
|
|
18
|
+
url: string;
|
|
19
|
+
/** Cor de fundo do círculo. */
|
|
20
|
+
background_color: string;
|
|
21
|
+
/** Texto para acessibilidade (`aria-label`). */
|
|
22
|
+
aria_label: string;
|
|
23
|
+
/** Padding interno do círculo. @default "4px" */
|
|
24
|
+
padding?: string;
|
|
25
|
+
/** Estilo da borda. @default "2px solid transparent" */
|
|
26
|
+
border?: string;
|
|
27
|
+
}
|
|
28
|
+
declare const CircularIconLink: React.FC<CircularIconLinkProps>;
|
|
29
|
+
export default CircularIconLink;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Box, IconButton } from '@mui/material';
|
|
4
|
+
import { styled } from '@mui/material/styles';
|
|
5
|
+
const StyledBox = styled(Box, {
|
|
6
|
+
shouldForwardProp: (prop) => !['background_color', 'padding', 'border'].includes(prop),
|
|
7
|
+
})(({ background_color, padding, border }) => ({
|
|
8
|
+
backgroundColor: background_color,
|
|
9
|
+
padding,
|
|
10
|
+
borderRadius: '50%',
|
|
11
|
+
display: 'inline-block',
|
|
12
|
+
border,
|
|
13
|
+
}));
|
|
14
|
+
const CircularIconLink = ({ url, background_color, aria_label, padding = '4px', border = '2px solid transparent', children, }) => {
|
|
15
|
+
return (_jsx(StyledBox, { background_color: background_color, padding: padding, border: border, children: _jsx(IconButton, { "aria-label": aria_label, onClick: () => window.open(url, '_blank', 'noopener noreferrer'), children: children }) }));
|
|
16
|
+
};
|
|
17
|
+
export default CircularIconLink;
|
|
18
|
+
//# sourceMappingURL=CircularIconLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircularIconLink.js","sourceRoot":"","sources":["../../src/components/CircularIconLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,UAAU,EAAgB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAkC9C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACtE,CAAC,CAIC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,eAAe,EAAE,gBAAgB;IACjC,OAAO;IACP,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM;CACP,CAAC,CAAC,CAAC;AAEJ,MAAM,gBAAgB,GAAoC,CAAC,EACzD,GAAG,EACH,gBAAgB,EAChB,UAAU,EACV,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,uBAAuB,EAChC,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,SAAS,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAC7E,KAAC,UAAU,kBACG,UAAU,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,qBAAqB,CAAC,YAE/D,QAAQ,GACE,GACH,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,19 +1,58 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Propriedades do componente `NavigationButton`.
|
|
4
|
+
*/
|
|
2
5
|
interface NavigationButtonProps {
|
|
6
|
+
/**
|
|
7
|
+
* URL ou âncora para onde o botão deve navegar.
|
|
8
|
+
* - Se começar com `http`, abre em nova aba.
|
|
9
|
+
* - Caso contrário, é tratado como link interno/âncora.
|
|
10
|
+
*/
|
|
3
11
|
url: string;
|
|
12
|
+
/** Texto para acessibilidade (atributo `aria-label`). */
|
|
4
13
|
aria_label: string;
|
|
14
|
+
/** Cor de fundo padrão do botão (ex: `#1976d2` ou `transparent`). */
|
|
5
15
|
background_color?: string;
|
|
16
|
+
/** Cor de fundo quando o botão é focado/hover. Se não informado, usa a cor padrão. */
|
|
6
17
|
background_color_hover?: string;
|
|
18
|
+
/** Cor do texto padrão (ex: `#fff`). */
|
|
7
19
|
color: string;
|
|
20
|
+
/** Cor do texto no hover. Se não informado, usa a mesma cor padrão. */
|
|
8
21
|
color_hover?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Cor da borda (ex: `#1976d2`).
|
|
24
|
+
* @default "transparent"
|
|
25
|
+
*/
|
|
9
26
|
border_color?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Raio de borda (ex: `8px`, `50%`).
|
|
29
|
+
* @default "0"
|
|
30
|
+
*/
|
|
10
31
|
border_radius?: string;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
32
|
+
/**
|
|
33
|
+
* Sombra CSS (ex: `0 2px 4px rgba(0,0,0,0.2)`).
|
|
34
|
+
* @default "none"
|
|
35
|
+
*/
|
|
36
|
+
box_shadow?: string;
|
|
37
|
+
/** Largura do botão (ex: `200px`, `100%`). */
|
|
14
38
|
width: string;
|
|
39
|
+
/**
|
|
40
|
+
* Margem externa.
|
|
41
|
+
* @default "0"
|
|
42
|
+
*/
|
|
15
43
|
margin?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Padding interno.
|
|
46
|
+
* @default "8px 24px"
|
|
47
|
+
*/
|
|
48
|
+
padding?: string;
|
|
49
|
+
/** Conteúdo interno (texto ou elementos JSX). */
|
|
16
50
|
children: React.ReactNode;
|
|
17
51
|
}
|
|
52
|
+
/**
|
|
53
|
+
* Botão de navegação reutilizável.
|
|
54
|
+
* Cria um link estilizado que pode ser usado para redirecionar
|
|
55
|
+
* para páginas externas ou seções internas.
|
|
56
|
+
*/
|
|
18
57
|
declare const NavigationButton: React.FC<NavigationButtonProps>;
|
|
19
58
|
export default NavigationButton;
|
|
@@ -10,13 +10,12 @@ const ButtonStyled = styled('a', {
|
|
|
10
10
|
'padding',
|
|
11
11
|
'border_radius',
|
|
12
12
|
'border_color',
|
|
13
|
-
'border_color_underline',
|
|
14
13
|
'color_hover',
|
|
15
14
|
'width',
|
|
16
15
|
'margin',
|
|
17
16
|
'boxshadow',
|
|
18
17
|
].includes(prop),
|
|
19
|
-
})(({ background_color, background_color_hover, color, color_hover, padding, border_radius, border_color,
|
|
18
|
+
})(({ background_color, background_color_hover, color, color_hover, padding, border_radius, border_color, width, margin, boxshadow, }) => ({
|
|
20
19
|
width: width,
|
|
21
20
|
cursor: 'pointer',
|
|
22
21
|
textDecoration: 'none',
|
|
@@ -31,24 +30,27 @@ const ButtonStyled = styled('a', {
|
|
|
31
30
|
margin: margin,
|
|
32
31
|
'&:hover': {
|
|
33
32
|
backgroundColor: background_color_hover,
|
|
34
|
-
borderBottom: `1px solid ${border_color_underline}`,
|
|
35
33
|
color: color_hover,
|
|
36
34
|
},
|
|
37
35
|
}));
|
|
38
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Botão de navegação reutilizável.
|
|
38
|
+
* Cria um link estilizado que pode ser usado para redirecionar
|
|
39
|
+
* para páginas externas ou seções internas.
|
|
40
|
+
*/
|
|
41
|
+
const NavigationButton = ({ url, aria_label, background_color, background_color_hover, color, color_hover, border_radius = '0', border_color = 'transparent', box_shadow = 'none', width, margin = '0', padding = '8px 24px', children, }) => {
|
|
39
42
|
const backgroundColor = background_color !== null && background_color !== void 0 ? background_color : 'transparent';
|
|
40
43
|
const backgroundColorHover = background_color_hover !== null && background_color_hover !== void 0 ? background_color_hover : backgroundColor;
|
|
41
44
|
const colorHover = color_hover !== null && color_hover !== void 0 ? color_hover : color;
|
|
42
|
-
const borderRadius = border_radius
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
if (url.indexOf('http') != -1) {
|
|
48
|
-
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: borderColor, border_color_underline: borderColorUnderline, padding: padding, margin: marginButton, "aria-label": aria_label, target: "_blank", boxshadow: boxshadow, rel: "noopener noreferrer", children: children }));
|
|
45
|
+
const borderRadius = border_radius;
|
|
46
|
+
const marginButton = margin;
|
|
47
|
+
if (url.indexOf('http') !== -1) {
|
|
48
|
+
// Link externo: abre em nova aba
|
|
49
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: border_color, padding: padding, margin: marginButton, "aria-label": aria_label, target: "_blank", boxshadow: box_shadow, rel: "noopener noreferrer", children: children }));
|
|
49
50
|
}
|
|
50
51
|
else {
|
|
51
|
-
|
|
52
|
+
// Link interno ou âncora
|
|
53
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: border_color, padding: padding, margin: marginButton, "aria-label": aria_label, boxshadow: box_shadow, children: children }));
|
|
52
54
|
}
|
|
53
55
|
};
|
|
54
56
|
export default NavigationButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface NavigationLinkProps {
|
|
3
|
+
url: string;
|
|
4
|
+
aria_label: string;
|
|
5
|
+
background_color?: string;
|
|
6
|
+
background_color_hover?: string;
|
|
7
|
+
color: string;
|
|
8
|
+
color_hover?: string;
|
|
9
|
+
text_decoration: 'none' | 'underline';
|
|
10
|
+
width: string;
|
|
11
|
+
margin?: string;
|
|
12
|
+
padding?: string;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const NavigationLink: React.FC<NavigationLinkProps>;
|
|
16
|
+
export default NavigationLink;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { styled } from '@mui/material/styles';
|
|
4
|
+
const ButtonStyled = styled('a', {
|
|
5
|
+
shouldForwardProp: (prop) => ![
|
|
6
|
+
'background_color',
|
|
7
|
+
'background_color_hover',
|
|
8
|
+
'color',
|
|
9
|
+
'color_hover',
|
|
10
|
+
'padding',
|
|
11
|
+
'color_hover',
|
|
12
|
+
'width',
|
|
13
|
+
'margin',
|
|
14
|
+
].includes(prop),
|
|
15
|
+
})(({ background_color, background_color_hover, color, color_hover, padding, width, margin, }) => ({
|
|
16
|
+
width: width,
|
|
17
|
+
cursor: 'pointer',
|
|
18
|
+
textDecoration: 'none',
|
|
19
|
+
textTransform: 'none',
|
|
20
|
+
textAlign: 'center',
|
|
21
|
+
backgroundColor: background_color,
|
|
22
|
+
color: color,
|
|
23
|
+
padding: padding,
|
|
24
|
+
margin: margin,
|
|
25
|
+
'&:hover': {
|
|
26
|
+
backgroundColor: background_color_hover,
|
|
27
|
+
borderBottom: `1px solid ${color_hover}`,
|
|
28
|
+
color: color_hover,
|
|
29
|
+
},
|
|
30
|
+
}));
|
|
31
|
+
const NavigationLink = ({ url, aria_label, background_color = 'transparent', background_color_hover, color, color_hover, text_decoration = 'none', width, margin = '0', padding = '0', children }) => {
|
|
32
|
+
const backgroundColor = background_color;
|
|
33
|
+
const backgroundColorHover = background_color_hover !== null && background_color_hover !== void 0 ? background_color_hover : backgroundColor;
|
|
34
|
+
const colorHover = color_hover !== null && color_hover !== void 0 ? color_hover : color;
|
|
35
|
+
if (url.indexOf('http') != -1) {
|
|
36
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, padding: padding, margin: margin, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", children: children }));
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, padding: padding, margin: margin, "aria-label": aria_label, children: children }));
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
export default NavigationLink;
|
|
43
|
+
//# sourceMappingURL=NavigationLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationLink.js","sourceRoot":"","sources":["../../src/components/NavigationLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,EAAE;IAC/B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,kBAAkB;QAClB,wBAAwB;QACxB,OAAO;QACP,aAAa;QACb,SAAS;QACT,aAAa;QACb,OAAO;QACP,QAAQ;KACT,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAQC,CAAC,EACF,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,EAAE,CAAC,CAAC;IACL,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,MAAM;IACtB,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,QAAQ;IACnB,eAAe,EAAE,gBAAgB;IACjC,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,MAAM;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,sBAAsB;QACvC,YAAY,EAAE,aAAa,WAAW,EAAE;QACxC,KAAK,EAAE,WAAW;KACnB;CACF,CAAC,CAAC,CAAC;AAgBJ,MAAM,cAAc,GAAkC,CAAC,EACrD,GAAG,EAAE,UAAU,EAAE,gBAAgB,GAAC,aAAa,EAAE,sBAAsB,EACvE,KAAK,EAAE,WAAW,EAAE,eAAe,GAAG,MAAM,EAC5C,KAAK,EAAE,MAAM,GAAC,GAAG,EAAE,OAAO,GAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IAE5C,MAAM,eAAe,GAAY,gBAAgB,CAAC;IAClD,MAAM,oBAAoB,GAAY,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,eAAe,CAAC;IAChF,MAAM,UAAU,GAAY,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,CAAC;IAEjD,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QAE9B,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,eAAe,EACjC,sBAAsB,EAAE,oBAAoB,EAC5C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,EACvB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YACxB,QAAQ,GACI,CAChB,CAAC;IACJ,CAAC;SACG,CAAC;QAEH,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,eAAe,EACjC,sBAAsB,EAAE,oBAAoB,EAC5C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,YAEtB,QAAQ,GACI,CAChB,CAAC;IACJ,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Propriedades do componente `WhatsAppButton`.
|
|
4
|
+
*/
|
|
2
5
|
interface WhatsAppButtonProps {
|
|
6
|
+
/**
|
|
7
|
+
* Número de telefone para iniciar a conversa no WhatsApp.
|
|
8
|
+
*
|
|
9
|
+
* - Deve ser informado **apenas com dígitos**, incluindo o código do país.
|
|
10
|
+
* - Exemplo para Brasil: `"5511999999999"` (55 = DDI, 11 = DDD).
|
|
11
|
+
*/
|
|
3
12
|
whatsapp: string;
|
|
4
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* Botão flutuante do WhatsApp que abre uma conversa no **WhatsApp** em uma nova aba,
|
|
16
|
+
* usando o número fornecido na propriedade `whatsapp`.
|
|
17
|
+
*
|
|
18
|
+
* - Fica posicionado no canto inferior direito da tela.
|
|
19
|
+
* - Estilizado com a cor oficial do WhatsApp (#25D366).
|
|
20
|
+
* - Ao clicar, redireciona para `https://wa.me/{whatsapp}`
|
|
21
|
+
*
|
|
22
|
+
* Exemplo de uso:
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <WhatsAppButton whatsapp="5511999999999" />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
5
27
|
declare const WhatsAppButton: React.FC<WhatsAppButtonProps>;
|
|
6
28
|
export default WhatsAppButton;
|
|
@@ -14,7 +14,23 @@ const StyledFab = styled(Fab)({
|
|
|
14
14
|
backgroundColor: '#1EBE5D',
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
|
+
/**
|
|
18
|
+
* Botão flutuante do WhatsApp que abre uma conversa no **WhatsApp** em uma nova aba,
|
|
19
|
+
* usando o número fornecido na propriedade `whatsapp`.
|
|
20
|
+
*
|
|
21
|
+
* - Fica posicionado no canto inferior direito da tela.
|
|
22
|
+
* - Estilizado com a cor oficial do WhatsApp (#25D366).
|
|
23
|
+
* - Ao clicar, redireciona para `https://wa.me/{whatsapp}`
|
|
24
|
+
*
|
|
25
|
+
* Exemplo de uso:
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <WhatsAppButton whatsapp="5511999999999" />
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
17
30
|
const WhatsAppButton = ({ whatsapp }) => {
|
|
31
|
+
/**
|
|
32
|
+
* Abre uma nova aba com o link oficial `wa.me/{whatsapp}` para iniciar a conversa.
|
|
33
|
+
*/
|
|
18
34
|
const handleClick = () => {
|
|
19
35
|
window.open(`https://wa.me/${whatsapp}`, '_blank');
|
|
20
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsAppButton.js","sourceRoot":"","sources":["../../src/components/WhatsAppButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5B,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,IAAI;IACZ,eAAe,EAAE,SAAS;IAC1B,KAAK,EAAE,OAAO;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,SAAS;KAC3B;CACF,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"WhatsAppButton.js","sourceRoot":"","sources":["../../src/components/WhatsAppButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5B,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,IAAI;IACZ,eAAe,EAAE,SAAS;IAC1B,KAAK,EAAE,OAAO;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,SAAS;KAC3B;CACF,CAAC,CAAC;AAeH;;;;;;;;;;;;GAYG;AACH,MAAM,cAAc,GAAkC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE;;OAEG;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,iBAAiB,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,kBAAY,iBAAiB,EAAC,OAAO,EAAE,WAAW,YAC1D,KAAC,QAAQ,KAAG,GACF,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Propriedades do componente `WhatsAppIcon`.
|
|
4
|
+
*/
|
|
2
5
|
export interface WhatsAppIconProps {
|
|
6
|
+
/**
|
|
7
|
+
* Número de telefone para iniciar a conversa no WhatsApp.
|
|
8
|
+
*
|
|
9
|
+
* - Use **apenas dígitos**, incluindo o código do país.
|
|
10
|
+
* - Exemplo (Brasil): `"5511999999999"` (55 = DDI, 11 = DDD).
|
|
11
|
+
*/
|
|
3
12
|
whatsapp: string;
|
|
4
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* Ícone clicável do WhatsApp envolto em um container circular personalizável,
|
|
16
|
+
* que pode ser posicionado livremente em qualquer lugar da tela.
|
|
17
|
+
*
|
|
18
|
+
* - Ao clicar, abre uma nova aba com o link `https://wa.me/{whatsapp}`.
|
|
19
|
+
* - A cor de fundo do círculo é a cor oficial do WhatsApp (`#25D366`).
|
|
20
|
+
* - Ideal para ser usado dentro de layouts onde você controla o `position` via CSS/Box pai.
|
|
21
|
+
*
|
|
22
|
+
* Exemplo de uso:
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <WhatsAppIcon whatsapp="5511999999999" />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
5
27
|
declare const WhatsAppIcon: React.FC<WhatsAppIconProps>;
|
|
6
28
|
export default WhatsAppIcon;
|
|
@@ -11,8 +11,21 @@ const StyledBox = styled(Box, {
|
|
|
11
11
|
display: 'inline-block',
|
|
12
12
|
border: '2px solid transparent',
|
|
13
13
|
}));
|
|
14
|
+
/**
|
|
15
|
+
* Ícone clicável do WhatsApp envolto em um container circular personalizável,
|
|
16
|
+
* que pode ser posicionado livremente em qualquer lugar da tela.
|
|
17
|
+
*
|
|
18
|
+
* - Ao clicar, abre uma nova aba com o link `https://wa.me/{whatsapp}`.
|
|
19
|
+
* - A cor de fundo do círculo é a cor oficial do WhatsApp (`#25D366`).
|
|
20
|
+
* - Ideal para ser usado dentro de layouts onde você controla o `position` via CSS/Box pai.
|
|
21
|
+
*
|
|
22
|
+
* Exemplo de uso:
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <WhatsAppIcon whatsapp="5511999999999" />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
14
27
|
const WhatsAppIcon = ({ whatsapp }) => {
|
|
15
|
-
return (_jsx(StyledBox, { background_color:
|
|
28
|
+
return (_jsx(StyledBox, { background_color: "#25D366", children: _jsx(IconButton, { "aria-label": "icone whatsapp", onClick: () => window.open(`https://wa.me/${whatsapp}`, '_blank', 'noopener noreferrer'), children: _jsx(WhatsApp, { sx: { color: 'white', fontSize: 24 } }) }) }));
|
|
16
29
|
};
|
|
17
30
|
export default WhatsAppIcon;
|
|
18
31
|
//# sourceMappingURL=WhatsAppIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsAppIcon.js","sourceRoot":"","sources":["../../src/components/WhatsAppIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC5E,CAAC,CAA+B,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,eAAe,EAAE,gBAAgB;IACjC,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,uBAAuB;CAChC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"WhatsAppIcon.js","sourceRoot":"","sources":["../../src/components/WhatsAppIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC5E,CAAC,CAA+B,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,eAAe,EAAE,gBAAgB;IACjC,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,uBAAuB;CAChC,CAAC,CAAC,CAAC;AAeJ;;;;;;;;;;;;GAYG;AACH,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjE,OAAO,CACL,KAAC,SAAS,IAAC,gBAAgB,EAAC,SAAS,YACnC,KAAC,UAAU,kBACE,gBAAgB,EAC3B,OAAO,EAAE,GAAG,EAAE,CACZ,MAAM,CAAC,IAAI,CAAC,iBAAiB,QAAQ,EAAE,EAAE,QAAQ,EAAE,qBAAqB,CAAC,YAG3E,KAAC,QAAQ,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,GACvC,GACH,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
export { default as CircularIconLink } from './components/CircularIconLink';
|
|
1
2
|
export { default as NavigationButton } from './components/NavigationButton';
|
|
2
|
-
export { default as
|
|
3
|
+
export { default as NavigationLink } from './components/NavigationLink';
|
|
3
4
|
export { default as ScrollToTopButton } from './components/ScrollToTopButton';
|
|
4
5
|
export { default as WhatsAppButton } from './components/WhatsAppButton';
|
|
5
6
|
export { default as WhatsAppIcon } from './components/WhatsAppIcon';
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
export { default as CircularIconLink } from './components/CircularIconLink';
|
|
1
2
|
export { default as NavigationButton } from './components/NavigationButton';
|
|
2
|
-
export { default as
|
|
3
|
+
export { default as NavigationLink } from './components/NavigationLink';
|
|
3
4
|
export { default as ScrollToTopButton } from './components/ScrollToTopButton';
|
|
4
5
|
export { default as WhatsAppButton } from './components/WhatsAppButton';
|
|
5
6
|
export { default as WhatsAppIcon } from './components/WhatsAppIcon';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAC,MAAM,2BAA2B,CAAC"}
|