1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/modal-overlay/modal-overlay.stories.tsx

45 lines
1.0 KiB
TypeScript
Raw Normal View History

2023-03-23 14:36:09 +01:00
import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ModalOverlay } from './modal-overlay';
import README from './README.mdx';
export default {
title: 'Components/ComponentLibrary/ModalOverlay',
component: ModalOverlay,
parameters: {
docs: {
page: README,
},
},
argTypes: {
className: {
control: 'text',
},
onClick: {
action: 'onClick',
},
},
} as ComponentMeta<typeof ModalOverlay>;
const Template: ComponentStory<typeof ModalOverlay> = (args) => (
<ModalOverlay {...args} />
);
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const OnClick: ComponentStory<typeof ModalOverlay> = (args) => {
const [open, setOpen] = useState(false);
const handleOnClick = () => {
setOpen(!open);
};
return (
<>
<button onClick={handleOnClick}>Show modal overlay</button>
{open && <ModalOverlay {...args} onClick={handleOnClick} />}
</>
);
};