/
index.tsx
125 lines (113 loc) · 2.24 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import cx from "classnames";
import React, { ButtonHTMLAttributes } from "react";
import css from "./index.module.css";
type VariantProps = {
red?: boolean;
green?: boolean;
dark?: boolean;
pill?: boolean;
white?: boolean;
gradient?: boolean;
size?: "small" | "medium" | "large";
};
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
type Props = ButtonProps & VariantProps;
function Button({
children,
className,
red = false,
green = false,
dark = false,
pill = false,
white = false,
gradient = false,
...props
}: Props) {
return (
<button
className={cx(
css.button,
{
[css.red]: red,
[css.green]: green,
[css.dark]: dark,
[css.pill]: pill,
[css.white]: white,
[css.gradient]: gradient,
[css.small]: props.size === "small",
},
className,
)}
type="button"
data-testid="default-button"
// These props need to come last
{...props}
>
{children}
</button>
);
}
function Outlined({
children,
className,
pill = false,
...props
}: ButtonProps & { pill?: boolean }) {
return (
<button
className={cx(css.outlined, { [css.pill]: pill }, className)}
type="button"
// These props need to come last
{...props}
>
{children}
</button>
);
}
Button.Outlined = Outlined;
type LinkProps = Props & {
underlined?: boolean;
};
function Link({
children,
className,
red = false,
green = false,
dark = false,
underlined = false,
...props
}: LinkProps) {
return (
<button
className={cx(
css.link,
{
[css.redText]: red,
[css.greenText]: green,
[css.darkText]: dark,
[css.underlined]: underlined,
},
className,
)}
type="button"
// These props need to come last
{...props}
>
{children}
</button>
);
}
Button.Link = Link;
type GroupProps = {
children: React.ReactNode;
className?: string;
};
function Group({ children, className }: GroupProps) {
return (
<div className={cx(css.group, className)} aria-label="button-group">
{children}
</div>
);
}
Button.Group = Group;
export default Button;