src/components/atoms/flip/flip.stories.tsx


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

import type { Meta, StoryObj } from '@storybook/react';
import { Flip } from './flip';
import { FlipSide } from './flip-side';

const meta = {
  component: Flip,
  title: 'Atoms/Flip',
} satisfies Meta<typeof Flip>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Horizontal: Story = {
  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>
      </>
    ),
  },
};

export const Vertical: Story = {
  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',
  },
};