Skip to content

Commit 20b6939

Browse files
yoshi6jpyoshi6jp
authored
feat(Alert): Support V3 (#370)
1 parent 7aad5f9 commit 20b6939

3 files changed

Lines changed: 174 additions & 149 deletions

File tree

‎src/Alert/Alert.stories.tsx‎

Lines changed: 171 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -15,150 +15,153 @@ export default {
1515
} as Meta
1616

1717
export const Default: Story<AlertProps> = (args) => {
18-
return <Alert {...args}>Lorem ipsum dolor sit amet, consectetur adip!</Alert>
18+
return (
19+
<Alert
20+
{...args}
21+
icon={
22+
<svg
23+
xmlns="http://www.w3.org/2000/svg"
24+
fill="none"
25+
viewBox="0 0 24 24"
26+
className="stroke-info shrink-0 w-6 h-6"
27+
>
28+
<path
29+
strokeLinecap="round"
30+
strokeLinejoin="round"
31+
strokeWidth="2"
32+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
33+
></path>
34+
</svg>
35+
}
36+
>
37+
<span>12 unread messages. Tap to see.</span>
38+
</Alert>
39+
)
40+
}
41+
Default.args = {}
42+
43+
export const InfoColor: Story<AlertProps> = (args) => {
44+
return (
45+
<Alert
46+
{...args}
47+
icon={
48+
<svg
49+
xmlns="http://www.w3.org/2000/svg"
50+
fill="none"
51+
viewBox="0 0 24 24"
52+
className="stroke-current shrink-0 w-6 h-6"
53+
>
54+
<path
55+
strokeLinecap="round"
56+
strokeLinejoin="round"
57+
strokeWidth="2"
58+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
59+
></path>
60+
</svg>
61+
}
62+
>
63+
<span>New software update available.</span>
64+
</Alert>
65+
)
66+
}
67+
InfoColor.args = {
68+
status: 'info',
69+
}
70+
71+
export const SuccessColor: Story<AlertProps> = (args) => {
72+
return (
73+
<Alert
74+
{...args}
75+
icon={
76+
<svg
77+
xmlns="http://www.w3.org/2000/svg"
78+
className="stroke-current shrink-0 h-6 w-6"
79+
fill="none"
80+
viewBox="0 0 24 24"
81+
>
82+
<path
83+
strokeLinecap="round"
84+
strokeLinejoin="round"
85+
strokeWidth="2"
86+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
87+
/>
88+
</svg>
89+
}
90+
>
91+
<span>Your purchase has been confirmed!</span>
92+
</Alert>
93+
)
94+
}
95+
SuccessColor.args = {
96+
status: 'success',
1997
}
20-
Default.args = {
21-
icon: (
22-
<svg
23-
xmlns="http://www.w3.org/2000/svg"
24-
fill="none"
25-
viewBox="0 0 24 24"
26-
stroke="#2196f3"
27-
className="w-6 h-6 mx-2"
98+
99+
export const WarningColor: Story<AlertProps> = (args) => {
100+
return (
101+
<Alert
102+
{...args}
103+
icon={
104+
<svg
105+
xmlns="http://www.w3.org/2000/svg"
106+
className="stroke-current shrink-0 h-6 w-6"
107+
fill="none"
108+
viewBox="0 0 24 24"
109+
>
110+
<path
111+
strokeLinecap="round"
112+
strokeLinejoin="round"
113+
strokeWidth="2"
114+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
115+
/>
116+
</svg>
117+
}
28118
>
29-
<path
30-
strokeLinecap="round"
31-
strokeLinejoin="round"
32-
strokeWidth="2"
33-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
34-
></path>
35-
</svg>
36-
),
119+
<span>Warning: Invalid email address!</span>
120+
</Alert>
121+
)
122+
}
123+
WarningColor.args = {
124+
status: 'warning',
37125
}
38126

39-
export const Colors: Story<AlertProps> = (args) => {
127+
export const ErrorColor: Story<AlertProps> = (args) => {
40128
return (
41-
<div className="flex flex-col gap-y-2">
42-
<Alert
43-
{...args}
44-
icon={
45-
<svg
46-
xmlns="http://www.w3.org/2000/svg"
47-
fill="none"
48-
viewBox="0 0 24 24"
49-
className="w-6 h-6 mx-2 stroke-current"
50-
>
51-
<path
52-
strokeLinecap="round"
53-
strokeLinejoin="round"
54-
strokeWidth="2"
55-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
56-
></path>
57-
</svg>
58-
}
59-
>
60-
Lorem ipsum dolor sit amet, consectetur adip!
61-
</Alert>
62-
<Alert
63-
{...args}
64-
status="info"
65-
icon={
66-
<svg
67-
xmlns="http://www.w3.org/2000/svg"
68-
fill="none"
69-
viewBox="0 0 24 24"
70-
className="w-6 h-6 mx-2 stroke-current"
71-
>
72-
<path
73-
strokeLinecap="round"
74-
strokeLinejoin="round"
75-
strokeWidth="2"
76-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
77-
></path>
78-
</svg>
79-
}
80-
>
81-
Lorem ipsum dolor sit amet, consectetur adip!
82-
</Alert>
83-
<Alert
84-
{...args}
85-
status="success"
86-
icon={
87-
<svg
88-
xmlns="http://www.w3.org/2000/svg"
89-
fill="none"
90-
viewBox="0 0 24 24"
91-
className="w-6 h-6 mx-2 stroke-current"
92-
>
93-
<path
94-
strokeLinecap="round"
95-
strokeLinejoin="round"
96-
strokeWidth="2"
97-
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
98-
></path>
99-
</svg>
100-
}
101-
>
102-
Lorem ipsum dolor sit amet, consectetur adip!
103-
</Alert>
104-
<Alert
105-
{...args}
106-
status="warning"
107-
icon={
108-
<svg
109-
xmlns="http://www.w3.org/2000/svg"
110-
fill="none"
111-
viewBox="0 0 24 24"
112-
className="w-6 h-6 mx-2 stroke-current"
113-
>
114-
<path
115-
strokeLinecap="round"
116-
strokeLinejoin="round"
117-
strokeWidth="2"
118-
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
119-
></path>
120-
</svg>
121-
}
122-
>
123-
Lorem ipsum dolor sit amet, consectetur adip!
124-
</Alert>
125-
<Alert
126-
{...args}
127-
status="error"
128-
icon={
129-
<svg
130-
xmlns="http://www.w3.org/2000/svg"
131-
fill="none"
132-
viewBox="0 0 24 24"
133-
className="w-6 h-6 mx-2 stroke-current"
134-
>
135-
<path
136-
strokeLinecap="round"
137-
strokeLinejoin="round"
138-
strokeWidth="2"
139-
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
140-
></path>
141-
</svg>
142-
}
143-
>
144-
Lorem ipsum dolor sit amet, consectetur adip!
145-
</Alert>
146-
</div>
129+
<Alert
130+
{...args}
131+
icon={
132+
<svg
133+
xmlns="http://www.w3.org/2000/svg"
134+
className="stroke-current shrink-0 h-6 w-6"
135+
fill="none"
136+
viewBox="0 0 24 24"
137+
>
138+
<path
139+
strokeLinecap="round"
140+
strokeLinejoin="round"
141+
strokeWidth="2"
142+
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
143+
/>
144+
</svg>
145+
}
146+
>
147+
<span>Error! Task failed successfully.</span>
148+
</Alert>
147149
)
148150
}
151+
ErrorColor.args = {
152+
status: 'error',
153+
}
149154

150-
export const CustomContents: Story<AlertProps> = ({
151-
color = 'info',
152-
...args
153-
}) => {
155+
export const WithButtons: Story<AlertProps> = (args) => {
154156
return (
155157
<Alert
158+
{...args}
156159
icon={
157160
<svg
158161
xmlns="http://www.w3.org/2000/svg"
159162
fill="none"
160163
viewBox="0 0 24 24"
161-
className="w-6 h-6 mx-2 stroke-current"
164+
className="stroke-info shrink-0 w-6 h-6"
162165
>
163166
<path
164167
strokeLinecap="round"
@@ -168,17 +171,49 @@ export const CustomContents: Story<AlertProps> = ({
168171
></path>
169172
</svg>
170173
}
171-
color={color}
174+
>
175+
<span>we use cookies for no reason.</span>
176+
<div className="space-x-1">
177+
<Button size="sm">Deny</Button>
178+
<Button size="sm" color="primary">
179+
Accept
180+
</Button>
181+
</div>
182+
</Alert>
183+
)
184+
}
185+
WithButtons.args = {
186+
className: 'shadow-lg',
187+
}
188+
189+
export const WithTitleAndDescription: Story<AlertProps> = (args) => {
190+
return (
191+
<Alert
172192
{...args}
193+
icon={
194+
<svg
195+
xmlns="http://www.w3.org/2000/svg"
196+
fill="none"
197+
viewBox="0 0 24 24"
198+
className="stroke-info shrink-0 w-6 h-6"
199+
>
200+
<path
201+
strokeLinecap="round"
202+
strokeLinejoin="round"
203+
strokeWidth="2"
204+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
205+
></path>
206+
</svg>
207+
}
173208
>
174-
<div className="w-full flex-row justify-between gap-2">
175-
<h3 className="text-lg font-bold">This is a custom alert!</h3>
176-
<h4>Some information about the alert...</h4>
209+
<div>
210+
<h3 className="font-bold">New message!</h3>
211+
<div className="text-xs">You have 1 unread message</div>
177212
</div>
178-
<Button>Dismiss</Button>
213+
<Button size="sm">See</Button>
179214
</Alert>
180215
)
181216
}
182-
CustomContents.args = {
183-
status: 'info',
217+
WithTitleAndDescription.args = {
218+
className: 'shadow-lg',
184219
}

‎src/Alert/Alert.test.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,6 @@ describe('Alert', () => {
1818
expect(screen.getByRole('alert')).toHaveClass('alert-success')
1919
})
2020

21-
it('renders an innerClassName', () => {
22-
render(<Alert innerClassName="font-bold">Test</Alert>)
23-
expect(within(screen.getByRole('alert')).getByText(/test/i)).toHaveClass(
24-
'font-bold'
25-
)
26-
})
27-
2821
it('should be able to access the native div', () => {
2922
const alertRef = createRef<HTMLDivElement>()
3023
render(<Alert ref={alertRef} />)

‎src/Alert/Alert.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,11 @@ export type AlertProps = React.HTMLAttributes<HTMLDivElement> &
88
IComponentBaseProps & {
99
icon?: ReactNode
1010
status?: ComponentStatus
11-
innerClassName?: string
1211
}
1312

1413
const Alert = forwardRef<HTMLDivElement, AlertProps>(
1514
(
16-
{ children, icon, status, dataTheme, className, innerClassName, ...props },
15+
{ children, icon, status, dataTheme, className, ...props },
1716
ref
1817
): JSX.Element => {
1918
const classes = twMerge(
@@ -35,10 +34,8 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
3534
data-theme={dataTheme}
3635
className={classes}
3736
>
38-
<div className={twMerge('flex-1', innerClassName)}>
39-
{icon}
40-
{children}
41-
</div>
37+
{icon}
38+
{children}
4239
</div>
4340
)
4441
}

0 commit comments

Comments
 (0)