design-system/packages/components/src/Icon/Icon.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import type { Meta, StoryObj } from '@storybook/react';

import { ICON_SIZE_VALUES } from './Icon.types';
import Icon from './Icon';

const meta: Meta<typeof Icon> = {
    component: Icon,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs', 'foundation'],
    argTypes: {
        name: {
            control: 'text',
        },
        customPath: {
            control: 'text',
        },
        cssClass: {
            control: 'text',
        },
        size: {
            control: 'select',
            options: Object.values(ICON_SIZE_VALUES),
        },
    },
};

export default meta;

type Story = StoryObj<typeof Icon>;

export const IconNamed: Story = {
    name: 'Icon',
    args: {
        name: 'bookmark',
    },
};

export const IconTiny: Story = {
    name: 'Icon Tiny',
    args: {
        name: 'bookmark',
        size: 'tiny',
    },
};

export const IconTinySmall: Story = {
    name: 'Icon Tiny-Small',
    args: {
        name: 'bookmark',
        size: 'tiny-small',
    },
};

export const IconSmall: Story = {
    name: 'Icon Small',
    args: {
        name: 'bookmark',
        size: 'small',
    },
};

export const IconSmallMedium: Story = {
    name: 'Icon Small-Medium',
    args: {
        name: 'bookmark',
        size: 'small-medium',
    },
};

export const IconMedium: Story = {
    name: 'Icon Medium',
    args: {
        name: 'bookmark',
        size: 'medium',
    },
};

export const IconMediumLarge: Story = {
    name: 'Icon Medium-Large',
    args: {
        name: 'bookmark',
        size: 'medium-large',
    },
};

export const IconLarge: Story = {
    name: 'Icon Large',
    args: {
        name: 'bookmark',
        size: 'large',
    },
};

export const IconExtraLarge: Story = {
    name: 'Icon Extra-Large',
    args: {
        name: 'bookmark',
        size: 'extra-large',
    },
};

export const IconCustomPath: Story = {
    name: 'Icon with custom path',
    args: {
        customPath: './img/all-icons.svg#browse',
    },
};

export const IconCssClass: Story = {
    name: 'Icon with css class',
    args: {
        name: 'bookmark',
        cssClass: 'ids-icon ids-icon--primary',
    },
};