pipesol-button 1.0.1-beta.3 → 1.0.1-beta.4
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.
|
@@ -25,5 +25,36 @@ export interface CircularIconLinkProps {
|
|
|
25
25
|
/** Estilo da borda. @default "2px solid transparent" */
|
|
26
26
|
border?: string;
|
|
27
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* **CircularIconLink**
|
|
30
|
+
*
|
|
31
|
+
* Componente que exibe um **ícone ou imagem dentro de um círculo clicável**,
|
|
32
|
+
* permitindo criar links visuais para redes sociais, sites ou qualquer URL externa.
|
|
33
|
+
*
|
|
34
|
+
* - Aceita ícones do Material UI (`<SvgIcon>`) ou imagens (`<img>`).
|
|
35
|
+
* - O círculo possui cor de fundo, padding e borda personalizáveis.
|
|
36
|
+
* - Ao clicar, abre o link em uma nova aba com `noopener noreferrer` por segurança.
|
|
37
|
+
*
|
|
38
|
+
* Exemplo de uso:
|
|
39
|
+
* ```tsx
|
|
40
|
+
* import { Instagram } from '@mui/icons-material';
|
|
41
|
+
*
|
|
42
|
+
* <CircularIconLink
|
|
43
|
+
* url="https://instagram.com/seuperfil"
|
|
44
|
+
* background_color="#E1306C"
|
|
45
|
+
* aria_label="Abrir Instagram"
|
|
46
|
+
* >
|
|
47
|
+
* <Instagram sx={{ color: 'white', fontSize: 24 }} />
|
|
48
|
+
* </CircularIconLink>
|
|
49
|
+
*
|
|
50
|
+
* <CircularIconLink
|
|
51
|
+
* url="https://example.com"
|
|
52
|
+
* background_color="#25D366"
|
|
53
|
+
* aria_label="Logo do site"
|
|
54
|
+
* >
|
|
55
|
+
* <img src="/logo.png" alt="Logo" width={24} height={24} />
|
|
56
|
+
* </CircularIconLink>
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
28
59
|
declare const CircularIconLink: React.FC<CircularIconLinkProps>;
|
|
29
60
|
export default CircularIconLink;
|
|
@@ -6,12 +6,43 @@ const StyledBox = styled(Box, {
|
|
|
6
6
|
shouldForwardProp: (prop) => !['background_color', 'padding', 'border'].includes(prop),
|
|
7
7
|
})(({ background_color, padding, border }) => ({
|
|
8
8
|
backgroundColor: background_color,
|
|
9
|
-
padding,
|
|
9
|
+
padding: padding,
|
|
10
10
|
borderRadius: '50%',
|
|
11
11
|
display: 'inline-block',
|
|
12
|
-
border,
|
|
12
|
+
border: border,
|
|
13
13
|
}));
|
|
14
|
-
|
|
14
|
+
/**
|
|
15
|
+
* **CircularIconLink**
|
|
16
|
+
*
|
|
17
|
+
* Componente que exibe um **ícone ou imagem dentro de um círculo clicável**,
|
|
18
|
+
* permitindo criar links visuais para redes sociais, sites ou qualquer URL externa.
|
|
19
|
+
*
|
|
20
|
+
* - Aceita ícones do Material UI (`<SvgIcon>`) ou imagens (`<img>`).
|
|
21
|
+
* - O círculo possui cor de fundo, padding e borda personalizáveis.
|
|
22
|
+
* - Ao clicar, abre o link em uma nova aba com `noopener noreferrer` por segurança.
|
|
23
|
+
*
|
|
24
|
+
* Exemplo de uso:
|
|
25
|
+
* ```tsx
|
|
26
|
+
* import { Instagram } from '@mui/icons-material';
|
|
27
|
+
*
|
|
28
|
+
* <CircularIconLink
|
|
29
|
+
* url="https://instagram.com/seuperfil"
|
|
30
|
+
* background_color="#E1306C"
|
|
31
|
+
* aria_label="Abrir Instagram"
|
|
32
|
+
* >
|
|
33
|
+
* <Instagram sx={{ color: 'white', fontSize: 24 }} />
|
|
34
|
+
* </CircularIconLink>
|
|
35
|
+
*
|
|
36
|
+
* <CircularIconLink
|
|
37
|
+
* url="https://example.com"
|
|
38
|
+
* background_color="#25D366"
|
|
39
|
+
* aria_label="Logo do site"
|
|
40
|
+
* >
|
|
41
|
+
* <img src="/logo.png" alt="Logo" width={24} height={24} />
|
|
42
|
+
* </CircularIconLink>
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
const CircularIconLink = ({ url, background_color = 'transparent', aria_label, padding = '4px', border = 'none', children, }) => {
|
|
15
46
|
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
47
|
};
|
|
17
48
|
export default CircularIconLink;
|
|
@@ -1 +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;
|
|
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;AAE9C,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,EAAE,OAAO;IAChB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC,CAAC;AAiCJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,gBAAgB,GAAoC,CAAC,EACzD,GAAG,EACH,gBAAgB,GAAC,aAAa,EAC9B,UAAU,EACV,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,MAAM,EACf,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,SAAS,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAC7E,KAAC,UAAU,kBAAa,UAAU,EAChC,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"}
|