cms/packages/craftcms-cp/src/components/tooltip/tooltip.stories.ts at 45e024453dbb870d0de01dc2f272d0ace7672e8f · craftcms/cms · 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
74
75
76
77
78
import type {Meta, StoryObj} from '@storybook/web-components-vite';

import {html} from 'lit';

// import "@awesome.me/webawesome/dist/components/tooltip/tooltip.js";
import './tooltip.js';
import '../button/button.js';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta = {
  title: 'Components/Tooltip',
  component: 'craft-tooltip',
  args: {
    placement: 'top',
    content: 'This is some content within a tooltip',
  },
  parameters: {
    layout: 'centered',
  },
  render: function (args) {
    let style = '';
    if (args.maxWidth) {
      style = `--max-width: ${args.maxWidth};`;
    }

    return html`
      <c-tooltip
        placement="${args.placement}"
        style="${args.style}"
        for="my-button"
        >${args.content}</c-tooltip
      >
      <craft-button id="my-button">Hover me</craft-button>
    `;
  },
} satisfies Meta<any>;

export default meta;
type Story = StoryObj<any>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Playground: Story = {
  args: {
    placement: 'top',
  },
  argTypes: {
    style: {
      control: {
        type: 'text',
      },
    },
    content: {
      control: {
        type: 'text',
      },
    },
    placement: {
      control: {
        type: 'select',
      },
      options: [
        'top-start',
        'top',
        'top-end',
        'right-start',
        'right',
        'right-end',
        'bottom-end',
        'bottom',
        'bottom-start',
        'left-end',
        'left',
        'left-start',
      ],
      defaultValue: 'top',
    },
  },
};