design-system/packages/components/src/Expander/Expander.stories.tsx at e8cf8dff2450560aa7a1fa0602ab58c8ee19b825 · ibexa/design-system · 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
import type { Meta, StoryObj } from '@storybook/react';
import { action } from 'storybook/actions';

import Expander from './Expander';

const meta: Meta<typeof Expander> = {
    component: Expander,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs', 'buttons'],
    argTypes: {
        hasIcon: {
            control: 'boolean',
        },
        isExpanded: {
            control: 'boolean',
        },
        type: {
            control: 'select',
            options: ['caret', 'triangle'],
        },
    },
    args: { onClick: action('on-click') },
};

export default meta;

type Story = StoryObj<typeof Expander>;

export const Default: Story = {
    name: 'Default',
    args: {
        collapseLabel: 'Show more',
        expandLabel: 'Show less',
    },
};

export const NoIcon: Story = {
    name: 'No Icon',
    args: {
        collapseLabel: 'Show more',
        expandLabel: 'Show less',
        hasIcon: false,
    },
};

export const Triangle: Story = {
    name: 'Triangle',
    args: {
        collapseLabel: 'Show more',
        expandLabel: 'Show less',
        type: 'triangle',
    },
};

export const NoLabel: Story = {
    name: 'No Label',
    args: {
        hasIcon: true,
    },
};

export const isExpanded: Story = {
    name: 'Is Expanded',
    args: {
        collapseLabel: 'Show more',
        expandLabel: 'Show less',
        isExpanded: true,
    },
};