@pipelinesolucoes/button 1.1.1 → 1.2.0-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.
- package/README.md +9 -5
- package/dist/components/ActionButton.d.ts +3 -2
- package/dist/components/ActionButton.js +4 -4
- package/dist/components/ActionButton.js.map +1 -1
- package/dist/components/NavigationButton.d.ts +1 -1
- package/dist/components/NavigationButton.js +4 -40
- package/dist/components/NavigationButton.js.map +1 -1
- package/dist/components/NavigationLink.d.ts +1 -5
- package/dist/components/NavigationLink.js +5 -32
- package/dist/components/NavigationLink.js.map +1 -1
- package/dist/components/StyledButton.d.ts +10 -2
- package/dist/components/StyledButton.js +69 -19
- package/dist/components/StyledButton.js.map +1 -1
- package/dist/components/SubmitButton.d.ts +54 -0
- package/dist/components/SubmitButton.js +47 -0
- package/dist/components/SubmitButton.js.map +1 -0
- package/dist/components/WhatsAppFlutuante.d.ts +57 -0
- package/dist/components/WhatsAppFlutuante.js +63 -0
- package/dist/components/WhatsAppFlutuante.js.map +1 -0
- package/dist/index.d.ts +3 -6
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/dist/theme.d.ts +2 -2
- package/dist/theme.js +30 -32
- package/dist/theme.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/CommonForwardProps.d.ts +1 -1
- package/dist/types/CommonForwardProps.js +1 -0
- package/dist/types/CommonForwardProps.js.map +1 -1
- package/dist/types/style/CommonStyleProps.d.ts +2 -3
- package/package.json +9 -3
- package/dist/components/FormButtonGroup.d.ts +0 -55
- package/dist/components/FormButtonGroup.js +0 -78
- package/dist/components/FormButtonGroup.js.map +0 -1
- package/dist/components/WhatsAppIcon.d.ts +0 -28
- package/dist/components/WhatsAppIcon.js +0 -31
- package/dist/components/WhatsAppIcon.js.map +0 -1
- package/dist/mui-theme.d.ts +0 -27
- package/dist/mui-theme.js +0 -2
- package/dist/mui-theme.js.map +0 -1
- package/dist/pages/_app.d.ts +0 -2
- package/dist/pages/_app.js +0 -20
- package/dist/pages/_app.js.map +0 -1
- package/dist/pages/_document.d.ts +0 -9
- package/dist/pages/_document.js +0 -33
- package/dist/pages/_document.js.map +0 -1
- package/dist/types/style/BorderProps.d.ts +0 -5
- package/dist/types/style/BorderProps.js +0 -2
- package/dist/types/style/BorderProps.js.map +0 -1
- package/dist/types/style/ColorProps.d.ts +0 -6
- package/dist/types/style/ColorProps.js +0 -2
- package/dist/types/style/ColorProps.js.map +0 -1
- package/dist/types/style/LayoutProps.d.ts +0 -6
- package/dist/types/style/LayoutProps.js +0 -2
- package/dist/types/style/LayoutProps.js.map +0 -1
package/README.md
CHANGED
|
@@ -19,11 +19,15 @@ A biblioteca inclui os seguintes componentes:
|
|
|
19
19
|
- **DownloadButton**
|
|
20
20
|
Componente que renderiza um link estilizado como botão para **download de arquivos** usando a tag `<a>` com o atributo `download`, permitindo customização visual via props.
|
|
21
21
|
|
|
22
|
-
- **
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
- **
|
|
26
|
-
|
|
22
|
+
- **SubmitButton**
|
|
23
|
+
Botão de submit estilizado, baseado no tema e com tipografia configurável via `variant`.
|
|
24
|
+
|
|
25
|
+
- **WhatsAppFlutuante**
|
|
26
|
+
Componente flutuante de ação rápida para contato via WhatsApp.
|
|
27
|
+
Renderiza um botão circular fixo na tela utilizando o `Fab` do Material UI,
|
|
28
|
+
contendo o ícone oficial do WhatsApp. Ao ser clicado, abre uma nova aba
|
|
29
|
+
direcionando para a URL `https://wa.me/{whatsapp}`, iniciando a conversa
|
|
30
|
+
com o número informado.
|
|
27
31
|
|
|
28
32
|
- **NavigationLink**
|
|
29
33
|
Link de navegação reutilizável, estilizado com Material UI.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TypographyVariant } from "@mui/material/styles";
|
|
3
3
|
import { CommonStyleProps } from "../types/style/CommonStyleProps";
|
|
4
|
-
import { ButtonKind } from "
|
|
4
|
+
import { ButtonKind } from "@pipelinesolucoes/theme";
|
|
5
5
|
export interface ActionButtonProps extends CommonStyleProps {
|
|
6
6
|
kind?: ButtonKind;
|
|
7
7
|
text: string;
|
|
@@ -16,7 +16,7 @@ export interface ActionButtonProps extends CommonStyleProps {
|
|
|
16
16
|
*
|
|
17
17
|
* Uso da prop `kind`:
|
|
18
18
|
* - A prop `kind` aplica estilos automaticamente a partir dos tokens
|
|
19
|
-
* definidos no tema do projeto (`theme.
|
|
19
|
+
* definidos no tema do projeto (`theme.pipelinesolucoes?.buttons`) conforme README”.
|
|
20
20
|
* - Para utilizar `kind`, é necessário que o projeto implemente essa
|
|
21
21
|
* estrutura no `ThemeProvider`.
|
|
22
22
|
* - Caso o tema não possua essa configuração, o componente continuará
|
|
@@ -40,6 +40,7 @@ export interface ActionButtonProps extends CommonStyleProps {
|
|
|
40
40
|
* @param {string} [boxShadow="none"] Sombra do botão.
|
|
41
41
|
* @param {Function} onClick Evento de clique.
|
|
42
42
|
* @param {string} aria_label Texto para acessibilidade.
|
|
43
|
+
* @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
|
|
43
44
|
*
|
|
44
45
|
* @example
|
|
45
46
|
* ```tsx
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import Typography from "@mui/material/Typography";
|
|
3
2
|
import { StyledButtonKind } from "./StyledButton";
|
|
4
3
|
/**
|
|
5
4
|
* Botão estilizado baseado no tema e com tipografia configurável via `variant`.
|
|
6
5
|
*
|
|
7
6
|
* Uso da prop `kind`:
|
|
8
7
|
* - A prop `kind` aplica estilos automaticamente a partir dos tokens
|
|
9
|
-
* definidos no tema do projeto (`theme.
|
|
8
|
+
* definidos no tema do projeto (`theme.pipelinesolucoes?.buttons`) conforme README”.
|
|
10
9
|
* - Para utilizar `kind`, é necessário que o projeto implemente essa
|
|
11
10
|
* estrutura no `ThemeProvider`.
|
|
12
11
|
* - Caso o tema não possua essa configuração, o componente continuará
|
|
@@ -30,6 +29,7 @@ import { StyledButtonKind } from "./StyledButton";
|
|
|
30
29
|
* @param {string} [boxShadow="none"] Sombra do botão.
|
|
31
30
|
* @param {Function} onClick Evento de clique.
|
|
32
31
|
* @param {string} aria_label Texto para acessibilidade.
|
|
32
|
+
* @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
|
|
33
33
|
*
|
|
34
34
|
* @example
|
|
35
35
|
* ```tsx
|
|
@@ -40,8 +40,8 @@ import { StyledButtonKind } from "./StyledButton";
|
|
|
40
40
|
* />
|
|
41
41
|
* ```
|
|
42
42
|
*/
|
|
43
|
-
const ActionButton = ({ kind = "none", width
|
|
44
|
-
return (_jsx(StyledButtonKind, { kind: kind, width: width, height: height, padding: padding, margin: margin, disabled: disabled, startIcon: icon, onClick: onClick, background: background, backgroundHover: backgroundHover, colorText:
|
|
43
|
+
const ActionButton = ({ kind = "none", width, height, padding, margin, text, icon, disabled = false, onClick, background, backgroundHover, color, colorHover, borderRadius, boxShadow, variant, aria_label }) => {
|
|
44
|
+
return (_jsx(StyledButtonKind, { kind: kind, width: width, height: height, padding: padding, margin: margin, disabled: disabled, startIcon: icon, onClick: onClick, background: background, backgroundHover: backgroundHover, colorText: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": aria_label, variantButton: variant, children: text }));
|
|
45
45
|
};
|
|
46
46
|
ActionButton.displayName = "ActionButton";
|
|
47
47
|
export default ActionButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../src/components/ActionButton.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../src/components/ActionButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAelD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,YAAY,GAAgC,CAAC,EACjD,IAAI,GAAG,MAAM,EACb,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAU,EACX,EAAE,EAAE;IAEH,OAAO,CACL,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,gBACR,UAAU,EACtB,aAAa,EAAE,OAAO,YAErB,IAAI,GACY,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
-
import { ButtonKind } from "../types/pipesol-buttons";
|
|
4
3
|
import { CommonStyleProps } from "../types/style/CommonStyleProps";
|
|
4
|
+
import { ButtonKind } from '@pipelinesolucoes/theme';
|
|
5
5
|
interface NavigationButtonProps extends CommonStyleProps {
|
|
6
6
|
kind?: ButtonKind;
|
|
7
7
|
variant?: TypographyVariant;
|
|
@@ -1,42 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import { COMMON_STYLE_FORWARD_PROPS } from '../types/CommonForwardProps';
|
|
5
|
-
import { Typography } from '@mui/material';
|
|
6
|
-
const ButtonStyled = styled('a', {
|
|
7
|
-
shouldForwardProp: (prop) => !['kind', ...COMMON_STYLE_FORWARD_PROPS].includes(prop),
|
|
8
|
-
})(({ theme, kind, background, backgroundHover, colorText, colorHover, padding, borderRadius, border, width, margin, boxShadow, }) => {
|
|
9
|
-
var _a, _b;
|
|
10
|
-
let tokens;
|
|
11
|
-
switch (kind) {
|
|
12
|
-
case "primary":
|
|
13
|
-
case "secondary":
|
|
14
|
-
case "tertiary":
|
|
15
|
-
case "delete":
|
|
16
|
-
tokens = (_b = (_a = theme.pipesol) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b[kind];
|
|
17
|
-
break;
|
|
18
|
-
}
|
|
19
|
-
return {
|
|
20
|
-
width: width !== null && width !== void 0 ? width : 'auto',
|
|
21
|
-
margin: margin !== null && margin !== void 0 ? margin : '0',
|
|
22
|
-
padding: tokens ? tokens.padding : padding,
|
|
23
|
-
borderRadius: tokens ? tokens.borderRadius : borderRadius,
|
|
24
|
-
boxShadow: tokens ? tokens.boxShadow : boxShadow,
|
|
25
|
-
border,
|
|
26
|
-
textDecoration: 'none',
|
|
27
|
-
textTransform: 'none',
|
|
28
|
-
cursor: 'pointer',
|
|
29
|
-
textAlign: 'center',
|
|
30
|
-
background: tokens ? tokens.background : background,
|
|
31
|
-
color: tokens ? tokens.color : colorText,
|
|
32
|
-
'&:hover': {
|
|
33
|
-
background: tokens
|
|
34
|
-
? tokens.backgroundHover
|
|
35
|
-
: backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : background,
|
|
36
|
-
color: tokens ? tokens.colorHover : colorHover !== null && colorHover !== void 0 ? colorHover : colorText,
|
|
37
|
-
},
|
|
38
|
-
};
|
|
39
|
-
});
|
|
3
|
+
import { ButtonNavigationStyled } from './StyledButton';
|
|
40
4
|
/**
|
|
41
5
|
* Botão de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI.
|
|
42
6
|
*
|
|
@@ -81,11 +45,11 @@ const ButtonStyled = styled('a', {
|
|
|
81
45
|
* </NavigationButton>
|
|
82
46
|
* ```
|
|
83
47
|
*/
|
|
84
|
-
const NavigationButton = ({ url, text, kind = 'none', aria_label, background, backgroundHover,
|
|
48
|
+
const NavigationButton = ({ url, text, kind = 'none', aria_label, background, backgroundHover, color, colorHover, borderRadius, border, boxShadow, width, margin, padding, variant, }) => {
|
|
85
49
|
if (url.includes('http')) {
|
|
86
|
-
return (_jsx(
|
|
50
|
+
return (_jsx(ButtonNavigationStyled, { kind: kind, href: url, width: width, background: background, backgroundHover: backgroundHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", boxShadow: boxShadow, variantButton: variant, children: text }));
|
|
87
51
|
}
|
|
88
|
-
return (_jsx(
|
|
52
|
+
return (_jsx(ButtonNavigationStyled, { kind: kind, href: url, width: width, background: background, backgroundHover: backgroundHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, boxShadow: boxShadow, variantButton: variant, children: text }));
|
|
89
53
|
};
|
|
90
54
|
NavigationButton.displayName = 'NavigationButton';
|
|
91
55
|
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":"AAAA,YAAY,CAAC;;AAMb,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAUxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,gBAAgB,GAAoC,CAAC,EACzD,GAAG,EACH,IAAI,EACJ,IAAI,GAAG,MAAM,EACb,UAAU,EACV,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,GACR,EAAE,EAAE;IAEH,IAAI,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;QACzB,OAAO,CACL,KAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACF,UAAU,EACtB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,OAAO,YAErB,IAAI,GACkB,CAC1B,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACF,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,OAAO,YAErB,IAAI,GACkB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAClD,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
-
import {
|
|
4
|
-
import { ColorProps } from '../types/style/ColorProps';
|
|
5
|
-
export interface LinkStyleProps extends LayoutProps, ColorProps {
|
|
6
|
-
textDecoration: 'none' | 'underline';
|
|
7
|
-
}
|
|
3
|
+
import { LinkStyleProps } from './StyledButton';
|
|
8
4
|
interface NavigationLinkProps extends LinkStyleProps {
|
|
9
5
|
url: string;
|
|
10
6
|
aria_label: string;
|
|
@@ -1,34 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { styled } from '@mui/material/styles';
|
|
4
3
|
import { Typography } from '@mui/material';
|
|
5
|
-
|
|
6
|
-
shouldForwardProp: (prop) => ![
|
|
7
|
-
"width",
|
|
8
|
-
"height",
|
|
9
|
-
"padding",
|
|
10
|
-
"margin",
|
|
11
|
-
"background",
|
|
12
|
-
"backgroundHover",
|
|
13
|
-
"colorText",
|
|
14
|
-
"colorHover",
|
|
15
|
-
].includes(prop),
|
|
16
|
-
})(({ background, backgroundHover, colorText, colorHover, padding, width, margin, textDecoration }) => ({
|
|
17
|
-
width: width,
|
|
18
|
-
cursor: 'pointer',
|
|
19
|
-
textDecoration: textDecoration,
|
|
20
|
-
textTransform: 'none',
|
|
21
|
-
textAlign: 'center',
|
|
22
|
-
backgroundColor: background,
|
|
23
|
-
color: colorText,
|
|
24
|
-
padding: padding,
|
|
25
|
-
margin: margin,
|
|
26
|
-
'&:hover': {
|
|
27
|
-
backgroundColor: backgroundHover,
|
|
28
|
-
borderBottom: `1px solid ${colorHover}`,
|
|
29
|
-
color: colorHover,
|
|
30
|
-
},
|
|
31
|
-
}));
|
|
4
|
+
import { LinkStyled } from './StyledButton';
|
|
32
5
|
/**
|
|
33
6
|
* Componente que renderiza um link de navegação estilizado usando `styled` do Material UI.
|
|
34
7
|
* Ele aplica estilos customizáveis (layout e cores) e encapsula o texto com `Typography`.
|
|
@@ -86,15 +59,15 @@ const ButtonStyled = styled('a', {
|
|
|
86
59
|
* };
|
|
87
60
|
* ```
|
|
88
61
|
*/
|
|
89
|
-
const NavigationLink = ({ url, aria_label, background = 'transparent', backgroundHover,
|
|
62
|
+
const NavigationLink = ({ url, aria_label, background = 'transparent', backgroundHover, color, colorHover, textDecoration = 'none', width, margin = '0', padding = '0', text, variant = "body1", }) => {
|
|
90
63
|
const backgroundColor = background;
|
|
91
64
|
const backgroundColorHover = backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : backgroundColor;
|
|
92
|
-
const color_hover = colorHover ? colorHover : (
|
|
65
|
+
const color_hover = colorHover ? colorHover : (color !== null && color !== void 0 ? color : 'black');
|
|
93
66
|
if (url.indexOf('http') != -1) {
|
|
94
|
-
return (_jsx(
|
|
67
|
+
return (_jsx(LinkStyled, { href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, color: color, colorHover: color_hover, padding: padding, margin: margin, textDecoration: textDecoration, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", children: _jsx(Typography, { variant: variant, children: text }) }));
|
|
95
68
|
}
|
|
96
69
|
else {
|
|
97
|
-
return (_jsx(
|
|
70
|
+
return (_jsx(LinkStyled, { href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, color: color, colorHover: color_hover, padding: padding, margin: margin, "aria-label": aria_label, textDecoration: textDecoration, children: _jsx(Typography, { variant: variant, children: text }) }));
|
|
98
71
|
}
|
|
99
72
|
};
|
|
100
73
|
export default NavigationLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationLink.js","sourceRoot":"","sources":["../../src/components/NavigationLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"NavigationLink.js","sourceRoot":"","sources":["../../src/components/NavigationLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAkB,MAAM,gBAAgB,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AAEH,MAAM,cAAc,GAAkC,CAAC,EACrD,GAAG,EAAE,UAAU,EAAE,UAAU,GAAC,aAAa,EAAE,eAAe,EAC1D,KAAK,EAAE,UAAU,EAAE,cAAc,GAAG,MAAM,EAC1C,KAAK,EAAE,MAAM,GAAC,GAAG,EAAE,OAAO,GAAC,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,GAAK,EAAE,EAAE;IAE9D,MAAM,eAAe,GAAY,UAAU,CAAC;IAC5C,MAAM,oBAAoB,GAAY,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,eAAe,CAAC;IACzE,MAAM,WAAW,GAAY,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,OAAO,CAAC,CAAC;IAE1E,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QAE9B,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,eAAe,EAC3B,eAAe,EAAE,oBAAoB,EACrC,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,gBACjB,UAAU,EACvB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YACzB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,GAAc,GACtC,CACd,CAAC;IACJ,CAAC;SACG,CAAC;QAEH,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,eAAe,EAC3B,eAAe,EAAE,oBAAoB,EACrC,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,EACvB,cAAc,EAAE,cAAc,YAE9B,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,GAAc,GACtC,CACd,CAAC;IACJ,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
import { ButtonKind } from
|
|
1
|
+
import { ButtonKind, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
2
2
|
import { CommonStyleProps } from "../types/style/CommonStyleProps";
|
|
3
|
+
import { TypographyVariant } from "@mui/material";
|
|
3
4
|
export interface ButtonStyleProps extends CommonStyleProps {
|
|
4
5
|
kind: ButtonKind;
|
|
6
|
+
variantButton?: TypographyVariant | undefined;
|
|
5
7
|
}
|
|
6
|
-
export declare const StyledButtonKind: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "
|
|
8
|
+
export declare const StyledButtonKind: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "style" | "children" | "sx" | "className" | "tabIndex" | "classes" | "href" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ButtonStyleProps, {}, {}>;
|
|
9
|
+
export declare const ButtonNavigationStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ButtonStyleProps, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
|
|
10
|
+
export interface LinkStyleProps extends LayoutProps, ColorProps {
|
|
11
|
+
textDecoration: 'none' | 'underline';
|
|
12
|
+
variant?: TypographyVariant;
|
|
13
|
+
}
|
|
14
|
+
export declare const LinkStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LinkStyleProps, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
|
|
@@ -1,42 +1,92 @@
|
|
|
1
1
|
import { COMMON_STYLE_FORWARD_PROPS } from '../types/CommonForwardProps';
|
|
2
2
|
import { Button, styled } from "@mui/material";
|
|
3
3
|
export const StyledButtonKind = styled(Button, {
|
|
4
|
-
shouldForwardProp: (prop) => !["kind", ...COMMON_STYLE_FORWARD_PROPS].includes(prop),
|
|
5
|
-
})(({ theme, kind =
|
|
6
|
-
var _a, _b;
|
|
7
|
-
let tokens;
|
|
4
|
+
shouldForwardProp: (prop) => !["kind", "variantButton", ...COMMON_STYLE_FORWARD_PROPS].includes(prop),
|
|
5
|
+
})(({ theme, kind = 'none', width, height, padding, margin, background, backgroundHover, colorText, colorHover, borderRadius, boxShadow, variantButton }) => {
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7
|
+
let tokens = undefined;
|
|
8
8
|
switch (kind) {
|
|
9
|
+
case "none":
|
|
10
|
+
tokens = undefined;
|
|
11
|
+
break;
|
|
9
12
|
case "primary":
|
|
10
13
|
case "secondary":
|
|
11
14
|
case "tertiary":
|
|
12
15
|
case "delete":
|
|
13
|
-
tokens = (_b = (_a = theme.
|
|
16
|
+
tokens = (_c = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c[kind];
|
|
14
17
|
break;
|
|
15
18
|
}
|
|
16
|
-
|
|
19
|
+
const typo = (_h = (_e = (_d = (variantButton && theme.typography[variantButton])) !== null && _d !== void 0 ? _d : tokens === null || tokens === void 0 ? void 0 : tokens.typography) !== null && _e !== void 0 ? _e : (_g = (_f = theme.pipelinesolucoes) === null || _f === void 0 ? void 0 : _f.buttons) === null || _g === void 0 ? void 0 : _g.typography) !== null && _h !== void 0 ? _h : theme.typography.body1;
|
|
20
|
+
return Object.assign(Object.assign({
|
|
17
21
|
// Dimensões
|
|
18
|
-
width: width,
|
|
19
|
-
height: height,
|
|
20
|
-
margin: margin,
|
|
21
|
-
padding: tokens ? tokens.padding : padding,
|
|
22
|
+
width: width, height: height, margin: margin, padding: tokens ? tokens.padding : padding }, (typo !== null && typo !== void 0 ? typo : {})), {
|
|
22
23
|
// Visual
|
|
23
|
-
textTransform: "none",
|
|
24
|
-
borderRadius: tokens ? tokens.borderRadius : borderRadius,
|
|
25
|
-
boxShadow: tokens ? tokens.boxShadow : boxShadow,
|
|
24
|
+
textTransform: "none", borderRadius: tokens ? tokens.borderRadius : borderRadius, boxShadow: tokens ? tokens.boxShadow : boxShadow,
|
|
26
25
|
// Cores
|
|
27
|
-
background: tokens ? tokens.background : background,
|
|
28
|
-
color: tokens ? tokens.color : colorText,
|
|
29
|
-
"&:hover": {
|
|
26
|
+
background: tokens ? tokens.background : background, color: tokens ? tokens.color : colorText, "&:hover": {
|
|
30
27
|
background: tokens ? tokens.backgroundHover : (backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : background),
|
|
31
28
|
color: tokens ? tokens.colorHover : (colorHover !== null && colorHover !== void 0 ? colorHover : colorText),
|
|
32
29
|
boxShadow: tokens ? tokens.boxShadow : boxShadow,
|
|
33
|
-
},
|
|
30
|
+
},
|
|
34
31
|
// Estado disabled
|
|
35
32
|
"&.Mui-disabled": {
|
|
36
33
|
background: theme.palette.grey[300],
|
|
37
34
|
color: theme.palette.text.disabled,
|
|
38
35
|
boxShadow: "none",
|
|
39
|
-
}
|
|
40
|
-
|
|
36
|
+
} });
|
|
37
|
+
});
|
|
38
|
+
export const ButtonNavigationStyled = styled('a', {
|
|
39
|
+
shouldForwardProp: (prop) => !['kind', 'variantButton', ...COMMON_STYLE_FORWARD_PROPS].includes(prop),
|
|
40
|
+
})(({ theme, kind = 'none', height, background, backgroundHover, color, colorHover, padding, borderRadius, border, width, margin, boxShadow, variantButton }) => {
|
|
41
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
42
|
+
let tokens = undefined;
|
|
43
|
+
switch (kind) {
|
|
44
|
+
case "none":
|
|
45
|
+
tokens = undefined;
|
|
46
|
+
break;
|
|
47
|
+
case "primary":
|
|
48
|
+
case "secondary":
|
|
49
|
+
case "tertiary":
|
|
50
|
+
case "delete":
|
|
51
|
+
tokens = (_c = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c[kind];
|
|
52
|
+
break;
|
|
53
|
+
}
|
|
54
|
+
const typo = (_g = (_d = (variantButton && theme.typography[variantButton])) !== null && _d !== void 0 ? _d : (_f = (_e = theme.pipelinesolucoes) === null || _e === void 0 ? void 0 : _e.buttons) === null || _f === void 0 ? void 0 : _f.typography) !== null && _g !== void 0 ? _g : theme.typography.body1;
|
|
55
|
+
return Object.assign(Object.assign({
|
|
56
|
+
// Dimensões
|
|
57
|
+
width: width !== null && width !== void 0 ? width : 'auto', height: height, margin: margin !== null && margin !== void 0 ? margin : '0', padding: tokens ? tokens.padding : padding }, (typo !== null && typo !== void 0 ? typo : {})), {
|
|
58
|
+
// Visual
|
|
59
|
+
textTransform: "none", borderRadius: tokens ? tokens.borderRadius : borderRadius, boxShadow: tokens ? tokens.boxShadow : boxShadow, border, textDecoration: 'none', cursor: 'pointer', textAlign: 'center',
|
|
60
|
+
// Cores
|
|
61
|
+
background: tokens ? tokens.background : background, color: tokens ? tokens.color : color, '&:hover': {
|
|
62
|
+
background: tokens
|
|
63
|
+
? tokens.backgroundHover
|
|
64
|
+
: backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : background,
|
|
65
|
+
color: tokens ? tokens.colorHover : colorHover !== null && colorHover !== void 0 ? colorHover : color,
|
|
66
|
+
} });
|
|
67
|
+
});
|
|
68
|
+
;
|
|
69
|
+
export const LinkStyled = styled("a", {
|
|
70
|
+
shouldForwardProp: (prop) => ![
|
|
71
|
+
"width",
|
|
72
|
+
"height",
|
|
73
|
+
"padding",
|
|
74
|
+
"margin",
|
|
75
|
+
"background",
|
|
76
|
+
"backgroundHover",
|
|
77
|
+
"colorHover",
|
|
78
|
+
"variant",
|
|
79
|
+
"textDecoration",
|
|
80
|
+
].includes(prop),
|
|
81
|
+
})(({ theme, background, backgroundHover, color, colorHover, padding, width, margin, textDecoration = "none", variant, }) => {
|
|
82
|
+
var _a, _b, _c, _d, _e;
|
|
83
|
+
const typo = (_d = (_a = (variant && theme.typography[variant])) !== null && _a !== void 0 ? _a : (_c = (_b = theme.pipelinesolucoes) === null || _b === void 0 ? void 0 : _b.buttons) === null || _c === void 0 ? void 0 : _c.typography) !== null && _d !== void 0 ? _d : theme.typography.body1;
|
|
84
|
+
return Object.assign(Object.assign({}, typo), { display: "inline-block", width,
|
|
85
|
+
margin,
|
|
86
|
+
padding, cursor: "pointer", textDecoration, textTransform: "none", textAlign: "center", backgroundColor: background, color, "&:hover": {
|
|
87
|
+
backgroundColor: backgroundHover,
|
|
88
|
+
color: colorHover !== null && colorHover !== void 0 ? colorHover : color,
|
|
89
|
+
borderBottom: `1px solid ${(_e = colorHover !== null && colorHover !== void 0 ? colorHover : color) !== null && _e !== void 0 ? _e : "currentColor"}`,
|
|
90
|
+
} });
|
|
41
91
|
});
|
|
42
92
|
//# sourceMappingURL=StyledButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledButton.js","sourceRoot":"","sources":["../../src/components/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"StyledButton.js","sourceRoot":"","sources":["../../src/components/StyledButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CommonStyleProps } from "../types/style/CommonStyleProps";
|
|
3
|
+
import { ButtonKind } from "@pipelinesolucoes/theme";
|
|
4
|
+
import { TypographyVariant } from "@mui/material";
|
|
5
|
+
export interface SubmitButtonProps extends CommonStyleProps {
|
|
6
|
+
kind?: ButtonKind;
|
|
7
|
+
text: string;
|
|
8
|
+
aria_label: string;
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
variant?: TypographyVariant;
|
|
12
|
+
form?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Botão de submit estilizado baseado no tema e com tipografia configurável via `variant`.
|
|
16
|
+
*
|
|
17
|
+
* Uso da prop `kind`:
|
|
18
|
+
* - A prop `kind` aplica estilos automaticamente a partir dos tokens
|
|
19
|
+
* definidos no tema do projeto (`theme.pipelinesolucoes?.buttons`) conforme README”.
|
|
20
|
+
* - Para utilizar `kind`, é necessário que o projeto implemente essa
|
|
21
|
+
* estrutura no `ThemeProvider`.
|
|
22
|
+
* - Caso o tema não possua essa configuração, o componente continuará
|
|
23
|
+
* funcionando normalmente, utilizando apenas os valores informados
|
|
24
|
+
* via props ou os padrões do Material UI.
|
|
25
|
+
*
|
|
26
|
+
* @param {string} text Texto exibido dentro do botão.
|
|
27
|
+
* @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
|
|
28
|
+
* @param {React.ReactNode} icon Ícone opcional exibido antes do texto.
|
|
29
|
+
* @param {ButtonKind} [kind="none"] Token visual aplicado ao botão.
|
|
30
|
+
* @param {string} [width="auto"] Largura do botão.
|
|
31
|
+
* @param {string} [height="auto"] Altura do botão.
|
|
32
|
+
* @param {string} [padding="12px 20px"] Espaçamento interno.
|
|
33
|
+
* @param {string} [margin="0"] Margem externa.
|
|
34
|
+
* @param {boolean} [disabled=false] Estado desabilitado.
|
|
35
|
+
* @param {string} [background="transparent"] Cor de fundo.
|
|
36
|
+
* @param {string} backgroundHover Cor de fundo no hover.
|
|
37
|
+
* @param {string} colorText Cor do texto.
|
|
38
|
+
* @param {string} colorHover Cor do texto no hover.
|
|
39
|
+
* @param {string} [borderRadius="0"] Raio da borda.
|
|
40
|
+
* @param {string} [boxShadow="none"] Sombra do botão.
|
|
41
|
+
* @param {string} aria_label Texto para acessibilidade.
|
|
42
|
+
* @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```tsx
|
|
46
|
+
* <SubmitButton
|
|
47
|
+
* text="Enviar"
|
|
48
|
+
* variant="h6"
|
|
49
|
+
* onClick={() => console.log("clicou")}
|
|
50
|
+
* />
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
declare const SubmitButton: React.FC<SubmitButtonProps>;
|
|
54
|
+
export default SubmitButton;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { StyledButtonKind } from "./StyledButton";
|
|
3
|
+
/**
|
|
4
|
+
* Botão de submit estilizado baseado no tema e com tipografia configurável via `variant`.
|
|
5
|
+
*
|
|
6
|
+
* Uso da prop `kind`:
|
|
7
|
+
* - A prop `kind` aplica estilos automaticamente a partir dos tokens
|
|
8
|
+
* definidos no tema do projeto (`theme.pipelinesolucoes?.buttons`) conforme README”.
|
|
9
|
+
* - Para utilizar `kind`, é necessário que o projeto implemente essa
|
|
10
|
+
* estrutura no `ThemeProvider`.
|
|
11
|
+
* - Caso o tema não possua essa configuração, o componente continuará
|
|
12
|
+
* funcionando normalmente, utilizando apenas os valores informados
|
|
13
|
+
* via props ou os padrões do Material UI.
|
|
14
|
+
*
|
|
15
|
+
* @param {string} text Texto exibido dentro do botão.
|
|
16
|
+
* @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
|
|
17
|
+
* @param {React.ReactNode} icon Ícone opcional exibido antes do texto.
|
|
18
|
+
* @param {ButtonKind} [kind="none"] Token visual aplicado ao botão.
|
|
19
|
+
* @param {string} [width="auto"] Largura do botão.
|
|
20
|
+
* @param {string} [height="auto"] Altura do botão.
|
|
21
|
+
* @param {string} [padding="12px 20px"] Espaçamento interno.
|
|
22
|
+
* @param {string} [margin="0"] Margem externa.
|
|
23
|
+
* @param {boolean} [disabled=false] Estado desabilitado.
|
|
24
|
+
* @param {string} [background="transparent"] Cor de fundo.
|
|
25
|
+
* @param {string} backgroundHover Cor de fundo no hover.
|
|
26
|
+
* @param {string} colorText Cor do texto.
|
|
27
|
+
* @param {string} colorHover Cor do texto no hover.
|
|
28
|
+
* @param {string} [borderRadius="0"] Raio da borda.
|
|
29
|
+
* @param {string} [boxShadow="none"] Sombra do botão.
|
|
30
|
+
* @param {string} aria_label Texto para acessibilidade.
|
|
31
|
+
* @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* <SubmitButton
|
|
36
|
+
* text="Enviar"
|
|
37
|
+
* variant="h6"
|
|
38
|
+
* onClick={() => console.log("clicou")}
|
|
39
|
+
* />
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
const SubmitButton = ({ kind = "none", width = "auto", height = "auto", padding = "12px 20px", margin = "0", text, icon, disabled = false, background = "transparent", backgroundHover, color, colorHover, borderRadius = "0", boxShadow = "none", variant, aria_label, form }) => {
|
|
43
|
+
return (_jsx(StyledButtonKind, { type: "submit", form: form, kind: kind, width: width, height: height, padding: padding, margin: margin, disabled: disabled, startIcon: icon, background: background, backgroundHover: backgroundHover, colorText: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": aria_label, variantButton: variant, children: text }));
|
|
44
|
+
};
|
|
45
|
+
SubmitButton.displayName = "SubmitButton";
|
|
46
|
+
export default SubmitButton;
|
|
47
|
+
//# sourceMappingURL=SubmitButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../src/components/SubmitButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAelD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,YAAY,GAAgC,CAAC,EACjD,IAAI,GAAG,MAAM,EACb,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,OAAO,GAAG,WAAW,EACrB,MAAM,GAAG,GAAG,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,GAAG,GAAG,EAClB,SAAS,GAAG,MAAM,EAClB,OAAO,EACP,UAAU,EACV,IAAI,EACL,EAAE,EAAE;IAEH,OAAO,CACL,KAAC,gBAAgB,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,EACf,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,gBACR,UAAU,EACtB,aAAa,EAAE,OAAO,YAErB,IAAI,GACY,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Propriedades do componente `WhatsAppIcon`.
|
|
4
|
+
*/
|
|
5
|
+
export interface WhatsAppFlutuanteProps {
|
|
6
|
+
whatsapp: string;
|
|
7
|
+
right?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Componente flutuante de ação rápida para contato via WhatsApp.
|
|
11
|
+
*
|
|
12
|
+
* Renderiza um botão circular fixo na tela utilizando o `Fab` do Material UI,
|
|
13
|
+
* contendo o ícone oficial do WhatsApp. Ao ser clicado, abre uma nova aba
|
|
14
|
+
* direcionando para a URL `https://wa.me/{whatsapp}`, iniciando a conversa
|
|
15
|
+
* com o número informado.
|
|
16
|
+
*
|
|
17
|
+
* Principais funcionalidades:
|
|
18
|
+
* - Exibição de botão flutuante fixado no viewport.
|
|
19
|
+
* - Abertura segura de nova aba (`noopener,noreferrer`) para o WhatsApp.
|
|
20
|
+
* - Posicionamento horizontal configurável.
|
|
21
|
+
* - Aplicação de cor oficial do WhatsApp.
|
|
22
|
+
* - Controle de sobreposição via `z-index` elevado.
|
|
23
|
+
*
|
|
24
|
+
* @param {string} whatsapp
|
|
25
|
+
* Número de telefone que será utilizado para iniciar a conversa no WhatsApp.
|
|
26
|
+
*
|
|
27
|
+
* Regras obrigatórias:
|
|
28
|
+
* - Informar apenas dígitos.
|
|
29
|
+
* - Incluir código do país (DDI).
|
|
30
|
+
* - Não utilizar espaços, parênteses ou caracteres especiais.
|
|
31
|
+
*
|
|
32
|
+
* Exemplo válido (Brasil):
|
|
33
|
+
* `"5511999999999"`
|
|
34
|
+
*
|
|
35
|
+
* @param {string} [right='24px']
|
|
36
|
+
* Define a distância horizontal entre o botão e a borda direita da viewport.
|
|
37
|
+
*
|
|
38
|
+
* Aceita qualquer valor CSS válido:
|
|
39
|
+
* - `"24px"`
|
|
40
|
+
* - `"2rem"`
|
|
41
|
+
* - `"5%"`
|
|
42
|
+
*
|
|
43
|
+
* Ordem de prioridade:
|
|
44
|
+
* `right` → `'24px'`
|
|
45
|
+
*
|
|
46
|
+
* ─────────────────────────────────────────────
|
|
47
|
+
* @example Ajustando posição horizontal
|
|
48
|
+
*
|
|
49
|
+
* ```tsx
|
|
50
|
+
* <WhatsAppFlutuante
|
|
51
|
+
* whatsapp="5511999999999"
|
|
52
|
+
* right="40px"
|
|
53
|
+
* />
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
declare const WhatsAppFlutuante: React.FC<WhatsAppFlutuanteProps>;
|
|
57
|
+
export default WhatsAppFlutuante;
|