Skip to content

Commit c867952

Browse files
yoycodeyoycode
committed
🔧 modify: update storybook #81 
1 parent de45d76 commit c867952

1 file changed

Lines changed: 114 additions & 3 deletions

File tree

‎packages/tabs/stories/tabs.stories.jsx‎

Lines changed: 114 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import { Tabs } from '../src';
23

34
export default {
@@ -35,7 +36,7 @@ export const Basic = () => (
3536

3637
export const variant = () => (
3738
<>
38-
<Tabs variant="underline">
39+
<Tabs variant="underline" size="lg">
3940
<Tabs.List>
4041
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
4142
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
@@ -49,7 +50,21 @@ export const variant = () => (
4950
<Tabs.Content value="tab2">content2</Tabs.Content>
5051
<Tabs.Content value="tab3">content3</Tabs.Content>
5152
</Tabs>
52-
<Tabs variant="enclosed">
53+
<Tabs variant="enclosed" size="lg">
54+
<Tabs.List>
55+
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
56+
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
57+
<Tabs.Trigger value="tab3">tab3</Tabs.Trigger>
58+
</Tabs.List>
59+
<Tabs.Content value="tab1">
60+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas rem ab, cum repellat perspiciatis distinctio
61+
doloremque at sint beatae omnis sapiente reiciendis dicta quae veniam. Unde consequatur voluptates maxime
62+
cupiditate!
63+
</Tabs.Content>
64+
<Tabs.Content value="tab2">content2</Tabs.Content>
65+
<Tabs.Content value="tab3">content3</Tabs.Content>
66+
</Tabs>
67+
<Tabs variant="unstyled" size="lg">
5368
<Tabs.List>
5469
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
5570
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
@@ -109,7 +124,7 @@ export const onChange = () => {
109124

110125
export const disabled = () => {
111126
return (
112-
<Tabs variant="enclosed">
127+
<Tabs variant="enclosed" baseColor="grey-lighten2">
113128
<Tabs.List>
114129
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
115130
<Tabs.Trigger value="tab2" disabled>
@@ -147,6 +162,57 @@ export const lazy = () => {
147162
);
148163
};
149164

165+
export const color = () => {
166+
return (
167+
<>
168+
<Tabs variant="enclosed" accentColor="primary-500" baseColor="primary-100">
169+
<Tabs.List>
170+
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
171+
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
172+
<Tabs.Trigger value="tab3">tab3</Tabs.Trigger>
173+
</Tabs.List>
174+
<Tabs.Content value="tab1">
175+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas rem ab, cum repellat perspiciatis distinctio
176+
doloremque at sint beatae omnis sapiente reiciendis dicta quae veniam. Unde consequatur voluptates maxime
177+
cupiditate!
178+
</Tabs.Content>
179+
<Tabs.Content value="tab2">content2</Tabs.Content>
180+
<Tabs.Content value="tab3">content3</Tabs.Content>
181+
</Tabs>
182+
<br />
183+
<Tabs variant="underline" accentColor="primary-500" baseColor="primary-100">
184+
<Tabs.List>
185+
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
186+
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
187+
<Tabs.Trigger value="tab3">tab3</Tabs.Trigger>
188+
</Tabs.List>
189+
<Tabs.Content value="tab1">
190+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas rem ab, cum repellat perspiciatis distinctio
191+
doloremque at sint beatae omnis sapiente reiciendis dicta quae veniam. Unde consequatur voluptates maxime
192+
cupiditate!
193+
</Tabs.Content>
194+
<Tabs.Content value="tab2">content2</Tabs.Content>
195+
<Tabs.Content value="tab3">content3</Tabs.Content>
196+
</Tabs>
197+
<br />
198+
<Tabs variant="unstyled" accentColor="primary-500" baseColor="primary-100">
199+
<Tabs.List>
200+
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
201+
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
202+
<Tabs.Trigger value="tab3">tab3</Tabs.Trigger>
203+
</Tabs.List>
204+
<Tabs.Content value="tab1">
205+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas rem ab, cum repellat perspiciatis distinctio
206+
doloremque at sint beatae omnis sapiente reiciendis dicta quae veniam. Unde consequatur voluptates maxime
207+
cupiditate!
208+
</Tabs.Content>
209+
<Tabs.Content value="tab2">content2</Tabs.Content>
210+
<Tabs.Content value="tab3">content3</Tabs.Content>
211+
</Tabs>
212+
</>
213+
);
214+
};
215+
150216
export const size = () => {
151217
return (
152218
<>
@@ -240,6 +306,51 @@ export const size = () => {
240306
<Tabs.Content value="tab3">content3</Tabs.Content>
241307
</Tabs>
242308
<br />
309+
<Tabs variant="unstyled" size="sm">
310+
<Tabs.List>
311+
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
312+
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
313+
<Tabs.Trigger value="tab3">tab3</Tabs.Trigger>
314+
</Tabs.List>
315+
<Tabs.Content value="tab1">
316+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas rem ab, cum repellat perspiciatis distinctio
317+
doloremque at sint beatae omnis sapiente reiciendis dicta quae veniam. Unde consequatur voluptates maxime
318+
cupiditate!
319+
</Tabs.Content>
320+
<Tabs.Content value="tab2">content2</Tabs.Content>
321+
<Tabs.Content value="tab3">content3</Tabs.Content>
322+
</Tabs>
323+
<br />
324+
<Tabs variant="unstyled" size="md">
325+
<Tabs.List>
326+
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
327+
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
328+
<Tabs.Trigger value="tab3">tab3</Tabs.Trigger>
329+
</Tabs.List>
330+
<Tabs.Content value="tab1">
331+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas rem ab, cum repellat perspiciatis distinctio
332+
doloremque at sint beatae omnis sapiente reiciendis dicta quae veniam. Unde consequatur voluptates maxime
333+
cupiditate!
334+
</Tabs.Content>
335+
<Tabs.Content value="tab2">content2</Tabs.Content>
336+
<Tabs.Content value="tab3">content3</Tabs.Content>
337+
</Tabs>
338+
<br />
339+
<Tabs variant="unstyled" size="lg">
340+
<Tabs.List>
341+
<Tabs.Trigger value="tab1">tab1</Tabs.Trigger>
342+
<Tabs.Trigger value="tab2">tab2</Tabs.Trigger>
343+
<Tabs.Trigger value="tab3">tab3</Tabs.Trigger>
344+
</Tabs.List>
345+
<Tabs.Content value="tab1">
346+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas rem ab, cum repellat perspiciatis distinctio
347+
doloremque at sint beatae omnis sapiente reiciendis dicta quae veniam. Unde consequatur voluptates maxime
348+
cupiditate!
349+
</Tabs.Content>
350+
<Tabs.Content value="tab2">content2</Tabs.Content>
351+
<Tabs.Content value="tab3">content3</Tabs.Content>
352+
</Tabs>
353+
<br />
243354
</>
244355
);
245356
};

0 commit comments

Comments
 (0)