@integrigo/integrigo-ui 1.2.3 → 1.2.6
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/lib/components/atoms/Button/Button.d.ts +2 -2
- package/lib/index.esm.js +8 -2
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +8 -2
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/Button/Button.tsx +30 -20
- package/src/components/atoms/Icon/Icon.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import styled from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
3
|
|
|
4
|
-
export interface ButtonProps
|
|
4
|
+
export interface ButtonProps
|
|
5
|
+
extends React.DetailedHTMLProps<
|
|
6
|
+
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
7
|
+
HTMLButtonElement
|
|
8
|
+
> {
|
|
5
9
|
primary?: boolean;
|
|
6
10
|
ghost?: boolean;
|
|
7
|
-
size?:
|
|
11
|
+
size?: "small" | "medium" | "large";
|
|
8
12
|
}
|
|
9
13
|
|
|
10
|
-
export const Button = styled.button<Omit<ButtonProps,
|
|
14
|
+
export const Button = styled.button<Omit<ButtonProps, "label">>`
|
|
11
15
|
background-color: transparent;
|
|
12
16
|
border: none;
|
|
13
|
-
border-radius: var(--padding-
|
|
14
|
-
padding: var(--padding-
|
|
17
|
+
border-radius: var(--padding-xl);
|
|
18
|
+
padding: var(--padding-m) var(--padding-l);
|
|
15
19
|
font-weight: var(--font-bold);
|
|
16
20
|
font-size: var(--font-size-l);
|
|
17
21
|
cursor: pointer;
|
|
@@ -19,36 +23,42 @@ export const Button = styled.button<Omit<ButtonProps, 'label'>>`
|
|
|
19
23
|
position: relative;
|
|
20
24
|
|
|
21
25
|
&:before {
|
|
22
|
-
content:
|
|
26
|
+
content: "";
|
|
23
27
|
position: absolute;
|
|
24
28
|
left: 0;
|
|
25
29
|
top: 0;
|
|
26
30
|
width: calc(100% - 4px);
|
|
27
31
|
height: calc(100% - 4px);
|
|
28
|
-
background-color: ${p =>
|
|
29
|
-
|
|
30
|
-
border
|
|
32
|
+
background-color: ${(p) =>
|
|
33
|
+
p.primary && !p.ghost ? "var(--color-orange)" : "transparent"};
|
|
34
|
+
border: ${(p) => (p.ghost ? "none" : "2px solid var(--color-orange)")};
|
|
35
|
+
border-radius: var(--padding-xl);
|
|
31
36
|
z-index: -1;
|
|
32
37
|
transition: opacity var(--transition-speed);
|
|
33
38
|
}
|
|
34
39
|
|
|
35
|
-
&:focus,
|
|
36
|
-
|
|
40
|
+
&:focus,
|
|
41
|
+
&:active {
|
|
42
|
+
color: ${(p) =>
|
|
43
|
+
p.primary && !p.ghost ? "var(--color-white)" : "var(--color-navy)"};
|
|
37
44
|
outline: none;
|
|
38
45
|
}
|
|
39
46
|
|
|
40
|
-
&:focus:before,
|
|
41
|
-
|
|
42
|
-
|
|
47
|
+
&:focus:before,
|
|
48
|
+
&:active:before {
|
|
49
|
+
background-color: ${(p) =>
|
|
50
|
+
p.primary && !p.ghost ? "var(--color-green)" : "transparent"};
|
|
51
|
+
border: ${(p) => (p.ghost ? "none" : "2px solid var(--color-green)")};
|
|
43
52
|
}
|
|
44
53
|
|
|
45
54
|
&:hover:before {
|
|
46
55
|
opacity: 0.5;
|
|
47
56
|
}
|
|
48
57
|
|
|
49
|
-
&:hover:focus:before,
|
|
50
|
-
|
|
58
|
+
&:hover:focus:before,
|
|
59
|
+
&:hover:active:before {
|
|
60
|
+
opacity: 1;
|
|
51
61
|
}
|
|
52
|
-
|
|
62
|
+
`;
|
|
53
63
|
|
|
54
|
-
Button.displayName =
|
|
64
|
+
Button.displayName = "Button";
|
|
@@ -8,7 +8,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
|
|
8
8
|
import * as SolidIcons from "@fortawesome/free-solid-svg-icons";
|
|
9
9
|
import * as BrandIcons from "@fortawesome/free-brands-svg-icons";
|
|
10
10
|
|
|
11
|
-
const ICONS = ["bars", "plus", "minus"];
|
|
11
|
+
const ICONS = ["bars", "plus", "minus", "phone", "envelope"];
|
|
12
12
|
const SOCIAL_ICONS = ["facebook", "instagram", "linkedin"];
|
|
13
13
|
|
|
14
14
|
type IconType = typeof ICONS[number];
|