1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { useToggle } from '../../../utils/hooks';
import { Button } from '../buttons';
import { Overlay } from './overlay';
/**
* Overlay - Storybook Meta
*/
export default {
title: 'Atoms/Overlay',
component: Overlay,
argTypes: {},
} as ComponentMeta<typeof Overlay>;
const Template: ComponentStory<typeof Overlay> = ({ isVisible, ...props }) => {
const [isActive, toggle] = useToggle(isVisible);
return (
<div>
<p>
Itaque reprehenderit sint rerum placeat et sapiente similique ut
distinctio. Libero illo reprehenderit qui quaerat dolorem. Officiis
asperiores sapiente eaque. Aut numquam porro quasi delectus excepturi
aut eaque et. Commodi et necessitatibus provident blanditiis rem qui
atque.
</p>
<p>
Aut architecto vitae dolor hic explicabo iure quia quae beatae.
Exercitationem nulla dignissimos doloribus sunt at nisi. A modi quasi
est sed quas repellendus vel sed dolores. Sed neque aperiam adipisci eos
autem. Libero omnis quis aut quas omnis magni harum et.
</p>
<Button onClick={toggle}>Open overlay</Button>
<Overlay {...props} isVisible={isActive} onClick={toggle} />
</div>
);
};
/**
* Overlay Stories - Hidden
*/
export const Hidden = Template.bind({});
Hidden.args = {
children: (
<div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
Some modal contents.
</div>
),
isVisible: false,
};
/**
* Overlay Stories - Visible
*/
export const Visible = Template.bind({});
Visible.args = {
children: (
<div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
Some modal contents.
</div>
),
isVisible: true,
};
|
