Skip to content

Commit 8c2fad4

Browse files
bsmiley1bsmiley1
committed
Add storybook
1 parent 6d523eb commit 8c2fad4

File tree

1 file changed

+111
-0
lines changed

1 file changed

+111
-0
lines changed

‎packages/@react-spectrum/tabs/stories/Tabs.stories.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@ OrientationVertical.story = {
5454
name: 'orientation: vertical'
5555
};
5656

57+
export const OrientationVerticalWrap = () => renderWithVerticalWrap({minWidth: 90, wrap: true});
58+
59+
OrientationVerticalWrap.story = {
60+
name: 'orientation: vertical, wrap: true'
61+
};
62+
5763
export const DensityCompact = () => render({density: 'compact'});
5864

5965
DensityCompact.story = {
@@ -739,6 +745,111 @@ function renderWithFalsyKey(props = {}) {
739745
);
740746
}
741747

748+
function renderWithVerticalWrap(props = {}) {
749+
return (
750+
<Tabs
751+
orientation="vertical"
752+
aria-label="Tab example"
753+
maxWidth={500}
754+
onSelectionChange={action('onSelectionChange')}>
755+
<TabList {...props}>
756+
<Item key="val1">User Profile Settings</Item>
757+
<Item key="val2">Notification Preferences</Item>
758+
<Item key="val3">Tab 3</Item>
759+
<Item key="val4">Tab 4</Item>
760+
<Item key="val5">Tab 5</Item>
761+
</TabList>
762+
<TabPanels>
763+
<Item key="val1">
764+
<Heading>Tab Body 1</Heading>
765+
<Text>
766+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do
767+
magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui
768+
adipisicing. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure
769+
irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do
770+
reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo
771+
ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit
772+
ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod
773+
voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt
774+
occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit
775+
magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse
776+
enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim
777+
duis esse reprehenderit.
778+
</Text>
779+
</Item>
780+
<Item key="val2">
781+
<Heading>Tab Body 2</Heading>
782+
<Text>
783+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do
784+
magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui
785+
adipisicing. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure
786+
irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do
787+
reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo
788+
ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit
789+
ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod
790+
voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt
791+
occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit
792+
magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse
793+
enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim
794+
duis esse reprehenderit.
795+
</Text>
796+
</Item>
797+
<Item key="val3">
798+
<Heading>Tab Body 3</Heading>
799+
<Text>
800+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do
801+
magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui
802+
adipisicing. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure
803+
irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do
804+
reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo
805+
ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit
806+
ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod
807+
voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt
808+
occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit
809+
magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse
810+
enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim
811+
duis esse reprehenderit.
812+
</Text>
813+
</Item>
814+
<Item key="val4">
815+
<Heading>Tab Body 4</Heading>
816+
<Text>
817+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do
818+
magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui
819+
adipisicing. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure
820+
irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do
821+
reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo
822+
ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit
823+
ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod
824+
voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt
825+
occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit
826+
magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse
827+
enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim
828+
duis esse reprehenderit.
829+
</Text>
830+
</Item>
831+
<Item key="val5">
832+
<Heading>Tab Body 5</Heading>
833+
<Text>
834+
Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do
835+
magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui
836+
adipisicing. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure
837+
irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do
838+
reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo
839+
ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit
840+
ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod
841+
voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt
842+
occaecat quis do. Consequat adipisicing irure Lorem commodo officia sint id. Velit sit
843+
magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse
844+
enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim
845+
duis esse reprehenderit.
846+
</Text>
847+
</Item>
848+
</TabPanels>
849+
</Tabs>
850+
);
851+
}
852+
742853
interface DynamicTabItem {
743854
name: string,
744855
children: ReactNode,

0 commit comments

Comments
 (0)