sqlmesh/web/common/src/components/Badge/Badge.stories.tsx at 2cd8f8bb28e7012be53360d8b914cbf19154f1e5 · SQLMesh/sqlmesh · 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
import type { Meta, StoryObj } from '@storybook/react-vite'

import type { Shape, Size } from '@sqlmesh-common/types'
import { Badge } from './Badge'

const meta: Meta<typeof Badge> = {
  title: 'Components/Badge',
  component: Badge,
}

export default meta
type Story = StoryObj<typeof Badge>

export const Default: Story = {
  args: {
    children: 'Default Badge',
  },
}

const sizes: Size[] = ['2xs', 'xs', 's', 'm', 'l', 'xl', '2xl']
const shapes: Shape[] = ['square', 'round', 'pill']

export const Sizes: Story = {
  render: args => (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {sizes.map(size => (
        <Badge
          key={size}
          size={size}
          {...args}
        >
          {size} Badge
        </Badge>
      ))}
    </div>
  ),
  args: {
    children: undefined,
  },
}

export const Shapes: Story = {
  render: args => (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {shapes.map(shape => (
        <Badge
          key={shape}
          shape={shape}
          {...args}
        >
          {shape} Badge
        </Badge>
      ))}
    </div>
  ),
  args: {
    children: undefined,
  },
}

export const Colors: Story = {
  render: args => (
    <div
      style={{
        display: 'flex',
        gap: 8,
        flexWrap: 'wrap',
        alignItems: 'center',
      }}
    >
      <Badge
        size="s"
        shape="pill"
        className="bg-[red] text-light"
        {...args}
      >
        Primary Badge
      </Badge>
      <Badge
        size="s"
        shape="pill"
        className="bg-[lightblue] text-prose"
        {...args}
      >
        Secondary Badge
      </Badge>
      <Badge
        size="s"
        shape="round"
        className="bg-[green] text-light"
        {...args}
      >
        Failed Badge
      </Badge>
      <Badge
        size="2xs"
        shape="round"
        className="bg-[orange] text-light"
        {...args}
      >
        Success Badge
      </Badge>
    </div>
  ),
  args: {
    children: undefined,
  },
}