@northslopetech/altitude-ui-references 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/manifest.json +25 -0
- package/dist/references/Badge.md +175 -0
- package/dist/references/Button.md +466 -0
- package/dist/references/Charts.md +233 -0
- package/dist/references/Checkbox.md +180 -0
- package/dist/references/Colors.md +512 -0
- package/dist/references/DatePicker.md +231 -0
- package/dist/references/DropdownMenu.md +192 -0
- package/dist/references/Field.md +733 -0
- package/dist/references/Icons.md +384 -0
- package/dist/references/Input.md +169 -0
- package/dist/references/PdfViewer.md +232 -0
- package/dist/references/Select.md +213 -0
- package/dist/references/Sidebar.md +527 -0
- package/dist/references/Table.md +406 -0
- package/dist/references/Tabs.md +233 -0
- package/dist/references/Textarea.md +245 -0
- package/dist/references/Tooltip.md +370 -0
- package/dist/references/Typography.md +456 -0
- package/dist/references/Upload.md +179 -0
- package/package.json +28 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "1.1.0",
|
|
3
|
+
"generatedAt": "2025-12-02T02:25:02.012Z",
|
|
4
|
+
"components": [
|
|
5
|
+
"Badge",
|
|
6
|
+
"Button",
|
|
7
|
+
"Charts",
|
|
8
|
+
"Checkbox",
|
|
9
|
+
"Colors",
|
|
10
|
+
"DatePicker",
|
|
11
|
+
"DropdownMenu",
|
|
12
|
+
"Field",
|
|
13
|
+
"Icons",
|
|
14
|
+
"Input",
|
|
15
|
+
"PdfViewer",
|
|
16
|
+
"Select",
|
|
17
|
+
"Sidebar",
|
|
18
|
+
"Table",
|
|
19
|
+
"Tabs",
|
|
20
|
+
"Textarea",
|
|
21
|
+
"Tooltip",
|
|
22
|
+
"Typography",
|
|
23
|
+
"Upload"
|
|
24
|
+
]
|
|
25
|
+
}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
# Badge Reference
|
|
2
|
+
|
|
3
|
+
## Usage Examples
|
|
4
|
+
|
|
5
|
+
The following are Storybook stories defining valid usage patterns for Badge.
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
9
|
+
import { Badge, Typography } from "@northslopetech/altitude-ui";
|
|
10
|
+
|
|
11
|
+
const meta: Meta<typeof Badge> = {
|
|
12
|
+
title: "Components/Badge",
|
|
13
|
+
component: Badge,
|
|
14
|
+
parameters: {
|
|
15
|
+
layout: "centered",
|
|
16
|
+
docs: {
|
|
17
|
+
description: {
|
|
18
|
+
component:
|
|
19
|
+
"A versatile badge component built with the Northslope Design System tokens. Features primary, secondary, accent, success, warning, and error variants for displaying status, categories, or labels.",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
tags: ["autodocs"],
|
|
24
|
+
argTypes: {
|
|
25
|
+
variant: {
|
|
26
|
+
control: { type: "select" },
|
|
27
|
+
options: [
|
|
28
|
+
"primary",
|
|
29
|
+
"secondary",
|
|
30
|
+
"accent",
|
|
31
|
+
"neutral",
|
|
32
|
+
"success",
|
|
33
|
+
"warning",
|
|
34
|
+
"error",
|
|
35
|
+
],
|
|
36
|
+
description: "The visual style variant of the badge",
|
|
37
|
+
},
|
|
38
|
+
children: {
|
|
39
|
+
control: { type: "text" },
|
|
40
|
+
description: "The content of the badge",
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
args: {
|
|
44
|
+
children: "Badge",
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export default meta;
|
|
49
|
+
type Story = StoryObj<typeof meta>;
|
|
50
|
+
|
|
51
|
+
export const Default: Story = {
|
|
52
|
+
render: (args) => (
|
|
53
|
+
<div className="space-y-8">
|
|
54
|
+
<div style={{ marginBottom: "32px" }}>
|
|
55
|
+
<Typography
|
|
56
|
+
variant="label-xs-bold"
|
|
57
|
+
className="inline-block px-4 py-2 mb-6 uppercase"
|
|
58
|
+
style={{ backgroundColor: "#000", color: "#fff" }}
|
|
59
|
+
>
|
|
60
|
+
Default Badge
|
|
61
|
+
</Typography>
|
|
62
|
+
<Typography
|
|
63
|
+
variant="body-sm"
|
|
64
|
+
style={{ color: "var(--color-secondary)" }}
|
|
65
|
+
>
|
|
66
|
+
The primary badge component in its default state.
|
|
67
|
+
</Typography>
|
|
68
|
+
</div>
|
|
69
|
+
<Badge variant={args.variant}>{args.children}</Badge>
|
|
70
|
+
</div>
|
|
71
|
+
),
|
|
72
|
+
args: {
|
|
73
|
+
variant: "primary",
|
|
74
|
+
children: "Badge",
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export const BadgeVariants: Story = {
|
|
79
|
+
render: () => (
|
|
80
|
+
<div className="space-y-8">
|
|
81
|
+
<div style={{ marginBottom: "32px" }}>
|
|
82
|
+
<Typography
|
|
83
|
+
variant="label-xs-bold"
|
|
84
|
+
className="inline-block px-4 py-2 mb-6 uppercase"
|
|
85
|
+
style={{ backgroundColor: "#000", color: "#fff" }}
|
|
86
|
+
>
|
|
87
|
+
Badge variants
|
|
88
|
+
</Typography>
|
|
89
|
+
<Typography
|
|
90
|
+
variant="body-sm"
|
|
91
|
+
style={{ color: "var(--color-secondary)" }}
|
|
92
|
+
>
|
|
93
|
+
All available badge variants with their respective styling and use
|
|
94
|
+
cases.
|
|
95
|
+
</Typography>
|
|
96
|
+
</div>
|
|
97
|
+
<div className="flex flex-wrap items-start" style={{ gap: "4rem" }}>
|
|
98
|
+
<div className="flex flex-col items-center gap-4">
|
|
99
|
+
<Badge variant={"primary"}>Badge</Badge>
|
|
100
|
+
<Typography
|
|
101
|
+
variant="label-xs-bold"
|
|
102
|
+
style={{ color: "rgba(0, 0, 0, 0.3)" }}
|
|
103
|
+
>
|
|
104
|
+
PRIMARY
|
|
105
|
+
</Typography>
|
|
106
|
+
</div>
|
|
107
|
+
<div className="flex flex-col items-center gap-4">
|
|
108
|
+
<Badge variant={"secondary"}>Badge</Badge>
|
|
109
|
+
<Typography
|
|
110
|
+
variant="label-xs-bold"
|
|
111
|
+
style={{ color: "rgba(0, 0, 0, 0.3)" }}
|
|
112
|
+
>
|
|
113
|
+
SECONDARY
|
|
114
|
+
</Typography>
|
|
115
|
+
</div>
|
|
116
|
+
<div className="flex flex-col items-center gap-4">
|
|
117
|
+
<Badge variant={"accent"}>Badge</Badge>
|
|
118
|
+
<Typography
|
|
119
|
+
variant="label-xs-bold"
|
|
120
|
+
style={{ color: "rgba(0, 0, 0, 0.3)" }}
|
|
121
|
+
>
|
|
122
|
+
ACCENT
|
|
123
|
+
</Typography>
|
|
124
|
+
</div>
|
|
125
|
+
<div className="flex flex-col items-center gap-4">
|
|
126
|
+
<Badge variant={"neutral"}>Badge</Badge>
|
|
127
|
+
<Typography
|
|
128
|
+
variant="label-xs-bold"
|
|
129
|
+
style={{ color: "rgba(0, 0, 0, 0.3)" }}
|
|
130
|
+
>
|
|
131
|
+
NEUTRAL
|
|
132
|
+
</Typography>
|
|
133
|
+
</div>
|
|
134
|
+
<div className="flex flex-col items-center gap-4">
|
|
135
|
+
<Badge variant={"success"}>Badge</Badge>
|
|
136
|
+
<Typography
|
|
137
|
+
variant="label-xs-bold"
|
|
138
|
+
style={{ color: "rgba(0, 0, 0, 0.3)" }}
|
|
139
|
+
>
|
|
140
|
+
SUCCESS
|
|
141
|
+
</Typography>
|
|
142
|
+
</div>
|
|
143
|
+
<div className="flex flex-col items-center gap-4">
|
|
144
|
+
<Badge variant={"warning"}>Badge</Badge>
|
|
145
|
+
<Typography
|
|
146
|
+
variant="label-xs-bold"
|
|
147
|
+
style={{ color: "rgba(0, 0, 0, 0.3)" }}
|
|
148
|
+
>
|
|
149
|
+
WARNING
|
|
150
|
+
</Typography>
|
|
151
|
+
</div>
|
|
152
|
+
<div className="flex flex-col items-center gap-4">
|
|
153
|
+
<Badge variant={"error"}>Badge</Badge>
|
|
154
|
+
<Typography
|
|
155
|
+
variant="label-xs-bold"
|
|
156
|
+
style={{ color: "rgba(0, 0, 0, 0.3)" }}
|
|
157
|
+
>
|
|
158
|
+
ERROR
|
|
159
|
+
</Typography>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
),
|
|
164
|
+
parameters: {
|
|
165
|
+
controls: { disable: true },
|
|
166
|
+
docs: {
|
|
167
|
+
description: {
|
|
168
|
+
story:
|
|
169
|
+
"All badge variants: Primary (blue), Secondary (outlined), Accent (light blue), Success (green), Warning (yellow), and Error (red).",
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
},
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
```
|
|
@@ -0,0 +1,466 @@
|
|
|
1
|
+
# Button Reference
|
|
2
|
+
|
|
3
|
+
## Usage Examples
|
|
4
|
+
|
|
5
|
+
The following are Storybook stories defining valid usage patterns for Button.
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
9
|
+
import { Button, Typography } from "@northslopetech/altitude-ui";
|
|
10
|
+
import { ChevronLeft, X } from "@northslopetech/altitude-ui";
|
|
11
|
+
|
|
12
|
+
const meta: Meta<typeof Button> = {
|
|
13
|
+
title: "Components/Button",
|
|
14
|
+
component: Button,
|
|
15
|
+
parameters: {
|
|
16
|
+
layout: "centered",
|
|
17
|
+
docs: {
|
|
18
|
+
description: {
|
|
19
|
+
component:
|
|
20
|
+
"A versatile button component built with the Northslope Design System tokens. Features primary, outline, destructive, destructive subtle, ghost, and icon variants with multiple states and sizes.",
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
tags: ["autodocs"],
|
|
25
|
+
argTypes: {
|
|
26
|
+
variant: {
|
|
27
|
+
control: { type: "select" },
|
|
28
|
+
options: [
|
|
29
|
+
"default",
|
|
30
|
+
"destructive",
|
|
31
|
+
"destructive-subtle",
|
|
32
|
+
"outline",
|
|
33
|
+
"ghost",
|
|
34
|
+
"link",
|
|
35
|
+
],
|
|
36
|
+
description: "The visual style variant of the button",
|
|
37
|
+
},
|
|
38
|
+
size: {
|
|
39
|
+
control: { type: "select" },
|
|
40
|
+
options: ["sm", "default", "lg", "icon"],
|
|
41
|
+
description: "The size of the button",
|
|
42
|
+
},
|
|
43
|
+
disabled: {
|
|
44
|
+
control: { type: "boolean" },
|
|
45
|
+
description: "Whether the button is disabled",
|
|
46
|
+
},
|
|
47
|
+
children: {
|
|
48
|
+
control: { type: "text" },
|
|
49
|
+
description: "The content of the button",
|
|
50
|
+
},
|
|
51
|
+
icon: {
|
|
52
|
+
control: { type: "text" },
|
|
53
|
+
description: "Icon to display in the button",
|
|
54
|
+
},
|
|
55
|
+
iconPosition: {
|
|
56
|
+
control: { type: "select" },
|
|
57
|
+
options: ["left", "right"],
|
|
58
|
+
description: "Position of the icon relative to the text",
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
args: {
|
|
62
|
+
children: "Button label",
|
|
63
|
+
},
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export default meta;
|
|
67
|
+
type Story = StoryObj<typeof meta>;
|
|
68
|
+
|
|
69
|
+
export const Default: Story = {
|
|
70
|
+
render: (args) => (
|
|
71
|
+
<div className="space-y-8">
|
|
72
|
+
<div style={{ marginBottom: "32px" }}>
|
|
73
|
+
<Typography
|
|
74
|
+
variant="label-xs-bold"
|
|
75
|
+
className="inline-block px-4 py-2 mb-6 uppercase"
|
|
76
|
+
style={{
|
|
77
|
+
backgroundColor: "var(--color-base-black)",
|
|
78
|
+
color: "var(--color-base-white)",
|
|
79
|
+
}}
|
|
80
|
+
>
|
|
81
|
+
Default Button
|
|
82
|
+
</Typography>
|
|
83
|
+
<Typography
|
|
84
|
+
variant="body-sm"
|
|
85
|
+
style={{ color: "var(--color-secondary)" }}
|
|
86
|
+
>
|
|
87
|
+
The primary button component in its default state with medium size and
|
|
88
|
+
primary variant.
|
|
89
|
+
</Typography>
|
|
90
|
+
</div>
|
|
91
|
+
<Button
|
|
92
|
+
variant={args.variant}
|
|
93
|
+
size={args.size}
|
|
94
|
+
disabled={args.disabled}
|
|
95
|
+
icon={args.icon ? <ChevronLeft /> : undefined}
|
|
96
|
+
iconPosition={args.iconPosition}
|
|
97
|
+
>
|
|
98
|
+
{args.children}
|
|
99
|
+
</Button>
|
|
100
|
+
</div>
|
|
101
|
+
),
|
|
102
|
+
args: {
|
|
103
|
+
variant: "default",
|
|
104
|
+
size: "default",
|
|
105
|
+
disabled: false,
|
|
106
|
+
children: "Button label",
|
|
107
|
+
},
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export const ButtonTypes: Story = {
|
|
111
|
+
render: () => (
|
|
112
|
+
<div className="space-y-8">
|
|
113
|
+
<div style={{ marginBottom: "32px" }}>
|
|
114
|
+
<Typography
|
|
115
|
+
variant="label-xs-bold"
|
|
116
|
+
className="inline-block px-4 py-2 mb-6 uppercase"
|
|
117
|
+
style={{
|
|
118
|
+
backgroundColor: "var(--color-base-black)",
|
|
119
|
+
color: "var(--color-base-white)",
|
|
120
|
+
}}
|
|
121
|
+
>
|
|
122
|
+
Button Types
|
|
123
|
+
</Typography>
|
|
124
|
+
<Typography
|
|
125
|
+
variant="body-sm"
|
|
126
|
+
style={{ color: "var(--color-secondary)" }}
|
|
127
|
+
>
|
|
128
|
+
All available button variants with their respective styling and use
|
|
129
|
+
cases.
|
|
130
|
+
</Typography>
|
|
131
|
+
</div>
|
|
132
|
+
<div className="flex flex-wrap items-start" style={{ gap: "4rem" }}>
|
|
133
|
+
<div className="flex flex-col items-center gap-4">
|
|
134
|
+
<Button variant="default" size="default">
|
|
135
|
+
Button label
|
|
136
|
+
</Button>
|
|
137
|
+
<Typography
|
|
138
|
+
variant="label-xs-bold"
|
|
139
|
+
style={{ color: "var(--color-secondary)" }}
|
|
140
|
+
>
|
|
141
|
+
PRIMARY
|
|
142
|
+
</Typography>
|
|
143
|
+
</div>
|
|
144
|
+
<div className="flex flex-col items-center gap-4">
|
|
145
|
+
<Button variant="outline" size="default">
|
|
146
|
+
Button label
|
|
147
|
+
</Button>
|
|
148
|
+
<Typography
|
|
149
|
+
variant="label-xs-bold"
|
|
150
|
+
style={{ color: "var(--color-secondary)" }}
|
|
151
|
+
>
|
|
152
|
+
OUTLINE
|
|
153
|
+
</Typography>
|
|
154
|
+
</div>
|
|
155
|
+
<div className="flex flex-col items-center gap-4">
|
|
156
|
+
<Button variant="destructive" size="default">
|
|
157
|
+
Button label
|
|
158
|
+
</Button>
|
|
159
|
+
<Typography
|
|
160
|
+
variant="label-xs-bold"
|
|
161
|
+
style={{ color: "var(--color-secondary)" }}
|
|
162
|
+
>
|
|
163
|
+
DESTRUCTIVE
|
|
164
|
+
</Typography>
|
|
165
|
+
</div>
|
|
166
|
+
<div className="flex flex-col items-center gap-4">
|
|
167
|
+
<Button variant="destructive-subtle" size="default">
|
|
168
|
+
Button label
|
|
169
|
+
</Button>
|
|
170
|
+
<Typography
|
|
171
|
+
variant="label-xs-bold"
|
|
172
|
+
style={{ color: "var(--color-secondary)" }}
|
|
173
|
+
>
|
|
174
|
+
DESTRUCTIVE SUBTLE
|
|
175
|
+
</Typography>
|
|
176
|
+
</div>
|
|
177
|
+
<div className="flex flex-col items-center gap-4">
|
|
178
|
+
<Button variant="ghost" size="default">
|
|
179
|
+
Button label
|
|
180
|
+
</Button>
|
|
181
|
+
<Typography
|
|
182
|
+
variant="label-xs-bold"
|
|
183
|
+
style={{ color: "var(--color-secondary)" }}
|
|
184
|
+
>
|
|
185
|
+
GHOST
|
|
186
|
+
</Typography>
|
|
187
|
+
</div>
|
|
188
|
+
<div className="flex flex-col items-center gap-4">
|
|
189
|
+
<Button variant="link" size="default">
|
|
190
|
+
Button label
|
|
191
|
+
</Button>
|
|
192
|
+
<Typography
|
|
193
|
+
variant="label-xs-bold"
|
|
194
|
+
style={{ color: "var(--color-secondary)" }}
|
|
195
|
+
>
|
|
196
|
+
LINK
|
|
197
|
+
</Typography>
|
|
198
|
+
</div>
|
|
199
|
+
<div className="flex flex-col items-center gap-4">
|
|
200
|
+
<Button
|
|
201
|
+
variant="default"
|
|
202
|
+
size="default"
|
|
203
|
+
icon={<ChevronLeft />}
|
|
204
|
+
iconPosition="left"
|
|
205
|
+
>
|
|
206
|
+
Button label
|
|
207
|
+
</Button>
|
|
208
|
+
<Typography
|
|
209
|
+
variant="label-xs-bold"
|
|
210
|
+
style={{ color: "var(--color-secondary)" }}
|
|
211
|
+
>
|
|
212
|
+
LEFT ICON
|
|
213
|
+
</Typography>
|
|
214
|
+
</div>
|
|
215
|
+
<div className="flex flex-col items-center gap-4">
|
|
216
|
+
<Button variant="outline" size="icon">
|
|
217
|
+
<X />
|
|
218
|
+
</Button>
|
|
219
|
+
<Typography
|
|
220
|
+
variant="label-xs-bold"
|
|
221
|
+
style={{ color: "var(--color-secondary)" }}
|
|
222
|
+
>
|
|
223
|
+
ICON
|
|
224
|
+
</Typography>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
),
|
|
229
|
+
parameters: {
|
|
230
|
+
controls: { disable: true },
|
|
231
|
+
docs: {
|
|
232
|
+
description: {
|
|
233
|
+
story:
|
|
234
|
+
"All button type variants: Primary (blue), Outline, Destructive (red), Destructive Subtle, Ghost (subtle), and Icon size for icon-only buttons.",
|
|
235
|
+
},
|
|
236
|
+
},
|
|
237
|
+
},
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
export const ButtonStates: Story = {
|
|
241
|
+
render: () => (
|
|
242
|
+
<div className="space-y-8">
|
|
243
|
+
<div style={{ marginBottom: "32px" }}>
|
|
244
|
+
<Typography
|
|
245
|
+
variant="label-xs-bold"
|
|
246
|
+
className="inline-block px-4 py-2 mb-6 uppercase"
|
|
247
|
+
style={{
|
|
248
|
+
backgroundColor: "var(--color-base-black)",
|
|
249
|
+
color: "var(--color-base-white)",
|
|
250
|
+
}}
|
|
251
|
+
>
|
|
252
|
+
Button States
|
|
253
|
+
</Typography>
|
|
254
|
+
<Typography
|
|
255
|
+
variant="body-sm"
|
|
256
|
+
style={{ color: "var(--color-secondary)" }}
|
|
257
|
+
>
|
|
258
|
+
Interactive states showing how buttons respond to user interactions.
|
|
259
|
+
</Typography>
|
|
260
|
+
</div>
|
|
261
|
+
<div className="flex flex-wrap items-start" style={{ gap: "4rem" }}>
|
|
262
|
+
<div className="flex flex-col items-center gap-4">
|
|
263
|
+
<Button variant="default" size="default">
|
|
264
|
+
Button label
|
|
265
|
+
</Button>
|
|
266
|
+
<Typography
|
|
267
|
+
variant="label-xs-bold"
|
|
268
|
+
style={{ color: "var(--color-secondary)" }}
|
|
269
|
+
>
|
|
270
|
+
DEFAULT
|
|
271
|
+
</Typography>
|
|
272
|
+
</div>
|
|
273
|
+
<div className="flex flex-col items-center gap-4">
|
|
274
|
+
<div
|
|
275
|
+
className="inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-light shadow-sm h-10 rounded-md px-3 py-2 min-w-[125px] cursor-default pointer-events-none"
|
|
276
|
+
style={{
|
|
277
|
+
font: "var(--typography-label-md-bold)",
|
|
278
|
+
filter: "brightness(60%)",
|
|
279
|
+
}}
|
|
280
|
+
>
|
|
281
|
+
Button label
|
|
282
|
+
</div>
|
|
283
|
+
<Typography
|
|
284
|
+
variant="label-xs-bold"
|
|
285
|
+
style={{ color: "var(--color-secondary)" }}
|
|
286
|
+
>
|
|
287
|
+
HOVER
|
|
288
|
+
</Typography>
|
|
289
|
+
</div>
|
|
290
|
+
<div className="flex flex-col items-center gap-4">
|
|
291
|
+
<div
|
|
292
|
+
className="inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-light shadow-sm h-10 rounded-md px-3 py-2 min-w-[125px] cursor-default pointer-events-none"
|
|
293
|
+
style={{
|
|
294
|
+
font: "var(--typography-label-md-bold)",
|
|
295
|
+
filter: "brightness(80%)",
|
|
296
|
+
}}
|
|
297
|
+
>
|
|
298
|
+
Button label
|
|
299
|
+
</div>
|
|
300
|
+
<Typography
|
|
301
|
+
variant="label-xs-bold"
|
|
302
|
+
style={{ color: "var(--color-secondary)" }}
|
|
303
|
+
>
|
|
304
|
+
PRESSED
|
|
305
|
+
</Typography>
|
|
306
|
+
</div>
|
|
307
|
+
<div className="flex flex-col items-center gap-4">
|
|
308
|
+
<Button
|
|
309
|
+
variant="default"
|
|
310
|
+
size="default"
|
|
311
|
+
className="ring-2 ring-blue-400"
|
|
312
|
+
>
|
|
313
|
+
Button label
|
|
314
|
+
</Button>
|
|
315
|
+
<Typography
|
|
316
|
+
variant="label-xs-bold"
|
|
317
|
+
style={{ color: "var(--color-secondary)" }}
|
|
318
|
+
>
|
|
319
|
+
FOCUS
|
|
320
|
+
</Typography>
|
|
321
|
+
<Typography
|
|
322
|
+
variant="body-xs"
|
|
323
|
+
className="max-w-[100px] leading-tight italic mt-1"
|
|
324
|
+
style={{ color: "var(--color-secondary)" }}
|
|
325
|
+
>
|
|
326
|
+
Only enabled when tab is used
|
|
327
|
+
</Typography>
|
|
328
|
+
</div>
|
|
329
|
+
<div className="flex flex-col items-center gap-4">
|
|
330
|
+
<Button variant="default" size="default" disabled>
|
|
331
|
+
Button label
|
|
332
|
+
</Button>
|
|
333
|
+
<Typography
|
|
334
|
+
variant="label-xs-bold"
|
|
335
|
+
style={{ color: "var(--color-secondary)" }}
|
|
336
|
+
>
|
|
337
|
+
DISABLED
|
|
338
|
+
</Typography>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
),
|
|
343
|
+
parameters: {
|
|
344
|
+
controls: { disable: true },
|
|
345
|
+
docs: {
|
|
346
|
+
description: {
|
|
347
|
+
story:
|
|
348
|
+
"All button states using design tokens: Default (ColorButtonPrimaryDefault), Hover (ColorButtonPrimaryHover with ColorButtonOverlayHover), Pressed (ColorButtonPrimaryPressed with ColorButtonOverlayPressed), Focus (blue ring), and Disabled (reduced opacity).",
|
|
349
|
+
},
|
|
350
|
+
},
|
|
351
|
+
},
|
|
352
|
+
};
|
|
353
|
+
|
|
354
|
+
export const ButtonSizes: Story = {
|
|
355
|
+
render: () => (
|
|
356
|
+
<div className="space-y-8">
|
|
357
|
+
<div style={{ marginBottom: "32px" }}>
|
|
358
|
+
<Typography
|
|
359
|
+
variant="label-xs-bold"
|
|
360
|
+
className="inline-block px-4 py-2 mb-6 uppercase"
|
|
361
|
+
style={{
|
|
362
|
+
backgroundColor: "var(--color-base-black)",
|
|
363
|
+
color: "var(--color-base-white)",
|
|
364
|
+
}}
|
|
365
|
+
>
|
|
366
|
+
Button Sizes
|
|
367
|
+
</Typography>
|
|
368
|
+
<Typography
|
|
369
|
+
variant="body-sm"
|
|
370
|
+
style={{ color: "var(--color-secondary)" }}
|
|
371
|
+
>
|
|
372
|
+
Available button sizes with their dimensions, typography, and spacing
|
|
373
|
+
specifications.
|
|
374
|
+
</Typography>
|
|
375
|
+
</div>
|
|
376
|
+
<div className="flex flex-wrap items-start" style={{ gap: "4rem" }}>
|
|
377
|
+
<div className="text-center space-y-4">
|
|
378
|
+
<Button variant="default" size="lg">
|
|
379
|
+
Button label
|
|
380
|
+
</Button>
|
|
381
|
+
<div>
|
|
382
|
+
<Typography
|
|
383
|
+
variant="label-xs-bold"
|
|
384
|
+
className="mb-2"
|
|
385
|
+
style={{ color: "var(--color-secondary)" }}
|
|
386
|
+
>
|
|
387
|
+
LARGE (48PX HIGH)
|
|
388
|
+
</Typography>
|
|
389
|
+
<Typography
|
|
390
|
+
variant="body-xs"
|
|
391
|
+
className="leading-relaxed"
|
|
392
|
+
style={{ color: "var(--color-secondary)" }}
|
|
393
|
+
>
|
|
394
|
+
Text: Label-MD
|
|
395
|
+
<br />
|
|
396
|
+
Padding: 16px
|
|
397
|
+
<br />
|
|
398
|
+
Corner radius: 8px
|
|
399
|
+
</Typography>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
<div className="text-center space-y-4">
|
|
403
|
+
<Button variant="default" size="default">
|
|
404
|
+
Button label
|
|
405
|
+
</Button>
|
|
406
|
+
<div>
|
|
407
|
+
<Typography
|
|
408
|
+
variant="label-xs-bold"
|
|
409
|
+
className="mb-2"
|
|
410
|
+
style={{ color: "var(--color-secondary)" }}
|
|
411
|
+
>
|
|
412
|
+
MEDIUM (40PX HIGH)
|
|
413
|
+
</Typography>
|
|
414
|
+
<Typography
|
|
415
|
+
variant="body-xs"
|
|
416
|
+
className="leading-relaxed"
|
|
417
|
+
style={{ color: "var(--color-secondary)" }}
|
|
418
|
+
>
|
|
419
|
+
Text: Label-MD
|
|
420
|
+
<br />
|
|
421
|
+
Padding: 12 px
|
|
422
|
+
<br />
|
|
423
|
+
Corner radius: 8px
|
|
424
|
+
</Typography>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
<div className="text-center space-y-4">
|
|
428
|
+
<Button variant="default" size="sm">
|
|
429
|
+
Button label
|
|
430
|
+
</Button>
|
|
431
|
+
<div>
|
|
432
|
+
<Typography
|
|
433
|
+
variant="label-xs-bold"
|
|
434
|
+
className="mb-2"
|
|
435
|
+
style={{ color: "var(--color-secondary)" }}
|
|
436
|
+
>
|
|
437
|
+
SMALL (32PX HIGH)
|
|
438
|
+
</Typography>
|
|
439
|
+
<Typography
|
|
440
|
+
variant="body-xs"
|
|
441
|
+
className="leading-relaxed"
|
|
442
|
+
style={{ color: "var(--color-secondary)" }}
|
|
443
|
+
>
|
|
444
|
+
Text: Label-SM
|
|
445
|
+
<br />
|
|
446
|
+
Padding: 8 px
|
|
447
|
+
<br />
|
|
448
|
+
Corner radius: 6px
|
|
449
|
+
</Typography>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
</div>
|
|
453
|
+
</div>
|
|
454
|
+
),
|
|
455
|
+
parameters: {
|
|
456
|
+
controls: { disable: true },
|
|
457
|
+
docs: {
|
|
458
|
+
description: {
|
|
459
|
+
story:
|
|
460
|
+
"Three button sizes: Large (48px), Medium (40px), and Small (32px) with corresponding padding and border radius.",
|
|
461
|
+
},
|
|
462
|
+
},
|
|
463
|
+
},
|
|
464
|
+
};
|
|
465
|
+
|
|
466
|
+
```
|