You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.2 KiB
50 lines
1.2 KiB
2 years ago
|
import { ComponentMeta } from '@storybook/react';
|
||
|
|
import { Button, SlideOut, SlideOutEnterFrom, SlideOutSize } from '@tih/ui';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
|
||
|
|
const slideOutEnterFrom: ReadonlyArray<SlideOutEnterFrom> = ['start', 'end'];
|
||
|
|
const slideOutSize: ReadonlyArray<SlideOutSize> = ['sm', 'md', 'lg', 'xl'];
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'SlideOut',
|
||
|
|
component: SlideOut,
|
||
|
|
argTypes: {
|
||
|
|
title: {
|
||
|
|
control: 'text',
|
||
|
|
},
|
||
|
|
enterFrom: {
|
||
|
|
options: slideOutEnterFrom,
|
||
|
|
control: { type: 'select' },
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
options: slideOutSize,
|
||
|
|
control: { type: 'select' },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
} as ComponentMeta<typeof SlideOut>;
|
||
|
|
|
||
|
|
export function Basic({ children, enterFrom, size, title }) {
|
||
|
|
const [isShown, setIsShown] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Button label="Open" variant="primary" onClick={() => setIsShown(true)} />
|
||
|
|
<SlideOut
|
||
|
|
enterFrom={enterFrom}
|
||
|
|
isShown={isShown}
|
||
|
|
size={size}
|
||
|
|
title={title}
|
||
|
|
onClose={() => setIsShown(false)}>
|
||
|
|
{children}
|
||
|
|
</SlideOut>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Basic.args = {
|
||
|
|
title: 'Navigation',
|
||
|
|
children: <div className="p-4">Hello World</div>,
|
||
|
|
enterFrom: 'end',
|
||
|
|
size: 'md',
|
||
|
|
};
|