Skip to content

Commit b102f07

Browse files
yoshi6jpyoshi6jp
authored
feat(Badge): Add badge of neutral color (#367)
* feat(Button): support different html tags * feat(Button): improve type system * test(Button): Omit generics from the test code. * feat(Dropdown): Add Details Element * fix import * fix type * feat(Dropdown): Add Details Element * feat(Collapse): Add collapse details * feat(Badge): Add badge of neutral color
1 parent 28737c3 commit b102f07

18 files changed

Lines changed: 836 additions & 229 deletions

‎src/Badge/Badge.stories.tsx‎

Lines changed: 128 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -10,74 +10,56 @@ export default {
1010
} as Meta
1111

1212
export const Default: Story<BadgeProps> = (args) => {
13-
return <Badge {...args}>Example</Badge>
13+
return <Badge {...args}>Badge</Badge>
1414
}
1515
Default.args = {}
1616

17-
export const Colors: Story<BadgeProps> = (args) => {
17+
export const BrandColors: Story<BadgeProps> = (args) => {
1818
return (
19-
<div>
20-
<div>
21-
<Badge {...args}>neutral</Badge>
22-
<Badge {...args} color="primary">
23-
primary
24-
</Badge>
25-
<Badge {...args} color="secondary">
26-
secondary
27-
</Badge>
28-
<Badge {...args} color="accent">
29-
accent
30-
</Badge>
31-
<Badge {...args} color="ghost">
32-
ghost
33-
</Badge>
34-
</div>
35-
<div>
36-
<Badge {...args} color="success">
37-
success
38-
</Badge>
39-
<Badge {...args} color="info">
40-
info
41-
</Badge>
42-
<Badge {...args} color="warning">
43-
warning
44-
</Badge>
45-
<Badge {...args} color="error">
46-
error
47-
</Badge>
48-
</div>
19+
<div className="flex gap-2 items-center">
20+
<Badge {...args}>default</Badge>
21+
<Badge {...args} color="neutral">
22+
neutral
23+
</Badge>
24+
<Badge {...args} color="primary">
25+
primary
26+
</Badge>
27+
<Badge {...args} color="secondary">
28+
secondary
29+
</Badge>
30+
<Badge {...args} color="accent">
31+
accent
32+
</Badge>
33+
<Badge {...args} color="ghost">
34+
ghost
35+
</Badge>
4936
</div>
5037
)
5138
}
52-
Colors.args = {
53-
className: 'm-1'
54-
}
5539

5640
export const Outline: Story<BadgeProps> = (args) => {
5741
return (
58-
<div>
59-
<Badge {...args} variant="outline">
60-
neutral
61-
</Badge>
62-
<Badge {...args} color="primary" variant="outline">
42+
<div className="flex gap-2 items-center">
43+
<Badge {...args}>default</Badge>
44+
<Badge {...args} color="primary">
6345
primary
6446
</Badge>
65-
<Badge {...args} color="secondary" variant="outline">
47+
<Badge {...args} color="secondary">
6648
secondary
6749
</Badge>
68-
<Badge {...args} color="accent" variant="outline">
50+
<Badge {...args} color="accent">
6951
accent
7052
</Badge>
7153
</div>
7254
)
7355
}
7456
Outline.args = {
75-
className: 'm-1'
57+
variant: 'outline',
7658
}
7759

7860
export const Sizes: Story<BadgeProps> = (args) => {
7961
return (
80-
<div>
62+
<div className="flex gap-2 items-center">
8163
<Badge {...args} size="lg">
8264
987,654
8365
</Badge>
@@ -93,9 +75,6 @@ export const Sizes: Story<BadgeProps> = (args) => {
9375
</div>
9476
)
9577
}
96-
Sizes.args = {
97-
className: 'm-1'
98-
}
9978

10079
export const Empty: Story<BadgeProps> = (args) => {
10180
return (
@@ -107,17 +86,112 @@ export const Empty: Story<BadgeProps> = (args) => {
10786
</div>
10887
)
10988
}
110-
Empty.args = {}
89+
Empty.args = {
90+
color: 'primary',
91+
}
11192

112-
export const BadgeInText: Story<BadgeProps> = (args) => {
93+
export const StateColors: Story<BadgeProps> = (args) => {
11394
return (
11495
<div className="flex gap-2 items-center">
115-
<h2 className="text-xl gap-2">
116-
Heading{' '}
96+
<Badge {...args} color="info">
97+
<svg
98+
xmlns="http://www.w3.org/2000/svg"
99+
fill="none"
100+
viewBox="0 0 24 24"
101+
className="inline-block w-4 h-4 stroke-current"
102+
>
103+
<path
104+
strokeLinecap="round"
105+
strokeLinejoin="round"
106+
strokeWidth="2"
107+
d="M6 18L18 6M6 6l12 12"
108+
></path>
109+
</svg>
110+
info
111+
</Badge>
112+
<Badge {...args} color="success">
113+
<svg
114+
xmlns="http://www.w3.org/2000/svg"
115+
fill="none"
116+
viewBox="0 0 24 24"
117+
className="inline-block w-4 h-4 stroke-current"
118+
>
119+
<path
120+
strokeLinecap="round"
121+
strokeLinejoin="round"
122+
strokeWidth="2"
123+
d="M6 18L18 6M6 6l12 12"
124+
></path>
125+
</svg>
126+
success
127+
</Badge>
128+
<Badge {...args} color="warning">
129+
<svg
130+
xmlns="http://www.w3.org/2000/svg"
131+
fill="none"
132+
viewBox="0 0 24 24"
133+
className="inline-block w-4 h-4 stroke-current"
134+
>
135+
<path
136+
strokeLinecap="round"
137+
strokeLinejoin="round"
138+
strokeWidth="2"
139+
d="M6 18L18 6M6 6l12 12"
140+
></path>
141+
</svg>
142+
warning
143+
</Badge>
144+
<Badge {...args} color="error">
145+
<svg
146+
xmlns="http://www.w3.org/2000/svg"
147+
fill="none"
148+
viewBox="0 0 24 24"
149+
className="inline-block w-4 h-4 stroke-current"
150+
>
151+
<path
152+
strokeLinecap="round"
153+
strokeLinejoin="round"
154+
strokeWidth="2"
155+
d="M6 18L18 6M6 6l12 12"
156+
></path>
157+
</svg>
158+
error
159+
</Badge>
160+
</div>
161+
)
162+
}
163+
StateColors.args = {
164+
className: 'gap-2',
165+
}
166+
167+
export const BadgeInText: Story<BadgeProps> = (args) => {
168+
return (
169+
<div className="flex flex-col gap-2 items-center">
170+
<h2 className="text-xl">
171+
Heading
117172
<Badge {...args} size="lg">
118173
NEW
119174
</Badge>
120175
</h2>
176+
<h3 className="text-xl">
177+
Heading
178+
<Badge {...args} size="md">
179+
NEW
180+
</Badge>
181+
</h3>
182+
<h4 className="text-base">
183+
Heading
184+
<Badge {...args} size="sm">
185+
NEW
186+
</Badge>
187+
</h4>
188+
189+
<h5 className="text-sm">
190+
Heading
191+
<Badge {...args} size="xs">
192+
NEW
193+
</Badge>
194+
</h5>
121195
</div>
122196
)
123197
}
@@ -126,13 +200,13 @@ BadgeInText.args = {}
126200
export const BadgeInAButton: Story<BadgeProps> = (args) => {
127201
return (
128202
<div className="flex gap-2 items-center">
129-
<Button className="gap-2">
203+
<Button>
130204
Inbox
131205
<Badge {...args}>+99</Badge>
132206
</Button>
133-
<Button className="gap-2">
207+
<Button>
134208
Inbox
135-
<Badge {...args} color="primary">
209+
<Badge {...args} color="secondary">
136210
+99
137211
</Badge>
138212
</Button>

‎src/Badge/Badge.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
3737
'badge-sm': size === 'sm',
3838
'badge-xs': size === 'xs',
3939
'badge-outline': variant === 'outline' || outline,
40+
'badge-neutral': color === 'neutral',
4041
'badge-primary': color === 'primary',
4142
'badge-secondary': color === 'secondary',
4243
'badge-accent': color === 'accent',

0 commit comments

Comments
 (0)