nodejs.org/packages/ui-components/src/Common/Tooltip/index.stories.tsx at 95a9ce2c152fe6a1b88dde31d68c81f0ab85d542 · nodejs/nodejs.org · GitHub

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
64
65
66
67
68
69
70
71
72
73
import type { Meta as MetaObj, StoryObj } from '@storybook/react';

import Tooltip from '#ui/Common/Tooltip';

type Story = StoryObj<typeof Tooltip>;
type Meta = MetaObj<typeof Tooltip>;

const defaultProps = {
  children: <a>Rocket Turtle</a>,
  content: <div className="p-3">🚀 🐢</div>,
};

export const Default: Story = {
  args: defaultProps,
};

export const Warning: Story = {
  args: {
    ...defaultProps,
    kind: 'warning',
  },
};

export const Error: Story = {
  args: {
    ...defaultProps,
    kind: 'error',
  },
};

export const LeftSide: Story = {
  args: {
    ...defaultProps,
    side: 'left',
  },
  decorators: [
    Story => (
      <div className="flex w-72 justify-end">
        <Story />
      </div>
    ),
  ],
};

export const RightSide: Story = {
  args: {
    ...defaultProps,
    side: 'left',
  },
  decorators: [
    Story => (
      <div className="flex w-72 justify-start">
        <Story />
      </div>
    ),
  ],
};

export const TopSide: Story = {
  args: {
    ...defaultProps,
    side: 'top',
  },
  decorators: [
    Story => (
      <div className="flex h-72 items-end">
        <Story />
      </div>
    ),
  ],
};

export default { component: Tooltip } as Meta;