blob: 1e470b1a7a6bca3cfc62ef0c3ddbbb6f6c1309bc (
plain)
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
|
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { Flip as FlipComponent } from './flip';
import { FlipSide } from './flip-side';
/**
* Flip - Storybook Meta
*/
export default {
title: 'Atoms/Flip',
component: FlipComponent,
argTypes: {},
} as ComponentMeta<typeof FlipComponent>;
const Template: ComponentStory<typeof FlipComponent> = (args) => (
<FlipComponent {...args} tabIndex={0} />
);
/**
* Images Stories - Horizontal Flipping
*/
export const Horizontal = Template.bind({});
Horizontal.args = {
children: (
<>
<FlipSide style={{ padding: '10px' }}>
Consequatur natus possimus quia consequatur placeat consectetur. Quia
vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est
cum et.
</FlipSide>
<FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
minima velit. Ad consequatur assumenda qui placeat aut consectetur
officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
autem non.
</FlipSide>
</>
),
};
/**
* Images Stories - Vertical Flipping
*/
export const Vertical = Template.bind({});
Vertical.args = {
children: (
<>
<FlipSide style={{ padding: '10px' }}>
Consequatur natus possimus quia consequatur placeat consectetur. Quia
vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est
cum et.
</FlipSide>
<FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
minima velit. Ad consequatur assumenda qui placeat aut consectetur
officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
autem non.
</FlipSide>
</>
),
direction: 'vertical',
};
|
