aural-ui 2.1.21 → 3.0.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/README.md +71 -6
- package/dist/components/drawer/index.tsx +4 -2
- package/dist/components/textarea/index.tsx +5 -4
- package/dist/icons/circular-play-icon/CircularPlayIcon.stories.tsx +525 -0
- package/dist/icons/circular-play-icon/index.tsx +33 -0
- package/dist/icons/circular-play-icon/meta.ts +8 -0
- package/dist/icons/index.ts +2 -0
- package/dist/icons/scroll-down-icon/ScrollDownIcon.stories.tsx +535 -0
- package/dist/icons/scroll-down-icon/index.tsx +32 -0
- package/dist/icons/scroll-down-icon/meta.ts +8 -0
- package/dist/index.cjs +61 -61
- package/dist/index.js +61 -61
- package/package.json +16 -15
|
@@ -0,0 +1,535 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
3
|
+
|
|
4
|
+
import { ScrollDownIcon } from "."
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof ScrollDownIcon> = {
|
|
7
|
+
title: "Icons/ScrollDownIcon",
|
|
8
|
+
component: ScrollDownIcon,
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: "fullscreen",
|
|
11
|
+
backgrounds: {
|
|
12
|
+
default: "dark",
|
|
13
|
+
values: [
|
|
14
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
15
|
+
{ name: "darker", value: "#000000" },
|
|
16
|
+
{ name: "light", value: "#ffffff" },
|
|
17
|
+
],
|
|
18
|
+
},
|
|
19
|
+
docs: {
|
|
20
|
+
page: () => (
|
|
21
|
+
<>
|
|
22
|
+
<style>
|
|
23
|
+
{`
|
|
24
|
+
.sbdocs-wrapper { padding: 0 !important; max-width: none !important; background: transparent !important; }
|
|
25
|
+
.sbdocs-content { max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
|
|
26
|
+
.docs-story, .sbdocs { background: transparent !important; }
|
|
27
|
+
body, #storybook-docs { background: #0a0a0a !important; }
|
|
28
|
+
.sbdocs-preview { background: transparent !important; border: none !important; }
|
|
29
|
+
.sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 { color: white !important; }
|
|
30
|
+
.sbdocs-p, .sbdocs-li { color: rgba(255, 255, 255, 0.7) !important; }
|
|
31
|
+
.sbdocs-code { background: rgba(255, 255, 255, 0.1) !important; color: rgba(168, 85, 247, 1) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
|
|
32
|
+
.sbdocs-pre { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
|
|
33
|
+
.sbdocs-table { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
|
|
34
|
+
.sbdocs-table th { background: rgba(255, 255, 255, 0.05) !important; color: white !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
|
|
35
|
+
.sbdocs-table td { color: rgba(255, 255, 255, 0.7) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }
|
|
36
|
+
`}
|
|
37
|
+
</style>
|
|
38
|
+
|
|
39
|
+
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900">
|
|
40
|
+
<div className="relative overflow-hidden border-b border-white/10 bg-black/20 backdrop-blur-xl">
|
|
41
|
+
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-pink-500/10" />
|
|
42
|
+
<div className="relative !mx-auto max-w-7xl px-6 py-16">
|
|
43
|
+
<div className="!space-y-6 text-center">
|
|
44
|
+
<div className="!mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border border-purple-500/30 bg-gradient-to-br from-purple-500/20 to-pink-500/20">
|
|
45
|
+
<ScrollDownIcon className="h-12 w-12 text-white" />
|
|
46
|
+
</div>
|
|
47
|
+
<h1 className="!text-fm-primary text-5xl font-bold">
|
|
48
|
+
ScrollDownIcon
|
|
49
|
+
</h1>
|
|
50
|
+
<p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
|
|
51
|
+
A double-chevron scroll-down icon for scroll hints,
|
|
52
|
+
"see more" prompts, and navigation. Built with
|
|
53
|
+
accessibility in mind using Radix UI's AccessibleIcon
|
|
54
|
+
wrapper.
|
|
55
|
+
</p>
|
|
56
|
+
<div className="flex items-center justify-center gap-8 pt-8">
|
|
57
|
+
<div className="text-center">
|
|
58
|
+
<div className="text-3xl font-bold text-purple-300">
|
|
59
|
+
Scroll
|
|
60
|
+
</div>
|
|
61
|
+
<div className="text-sm text-white/60">
|
|
62
|
+
Scroll hint / see more
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div className="h-8 w-px bg-white/20" />
|
|
66
|
+
<div className="text-center">
|
|
67
|
+
<div className="text-3xl font-bold text-pink-300">
|
|
68
|
+
Accessible
|
|
69
|
+
</div>
|
|
70
|
+
<div className="text-sm text-white/60">
|
|
71
|
+
Screen reader friendly
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
<div className="h-8 w-px bg-white/20" />
|
|
75
|
+
<div className="text-center">
|
|
76
|
+
<div className="text-3xl font-bold text-indigo-300">
|
|
77
|
+
Minimal
|
|
78
|
+
</div>
|
|
79
|
+
<div className="text-sm text-white/60">
|
|
80
|
+
Clean stroke design
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
|
|
89
|
+
<div className="!space-y-8">
|
|
90
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
91
|
+
Quick Start
|
|
92
|
+
</h2>
|
|
93
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
94
|
+
<div className="!space-y-4">
|
|
95
|
+
<h3 className="text-xl font-semibold !text-purple-300">
|
|
96
|
+
Basic Usage
|
|
97
|
+
</h3>
|
|
98
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
99
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
100
|
+
{`import { ScrollDownIcon } from "@icons/scroll-down-icon"
|
|
101
|
+
|
|
102
|
+
function ScrollHint() {
|
|
103
|
+
return (
|
|
104
|
+
<div className="flex justify-center py-4">
|
|
105
|
+
<ScrollDownIcon className="h-8 w-8 text-white" />
|
|
106
|
+
</div>
|
|
107
|
+
)
|
|
108
|
+
}`}
|
|
109
|
+
</pre>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div className="!space-y-4">
|
|
113
|
+
<h3 className="text-xl font-semibold !text-purple-300">
|
|
114
|
+
Live Preview
|
|
115
|
+
</h3>
|
|
116
|
+
<div className="flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
|
|
117
|
+
<ScrollDownIcon className="h-10 w-10 text-white" />
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div className="!space-y-8">
|
|
124
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
125
|
+
Props & Configuration
|
|
126
|
+
</h2>
|
|
127
|
+
<div className="overflow-hidden rounded-lg border border-white/10 bg-white/5">
|
|
128
|
+
<div className="bg-white/5 p-4">
|
|
129
|
+
<h3 className="text-xl font-semibold !text-white">Props</h3>
|
|
130
|
+
</div>
|
|
131
|
+
<table className="!my-0 w-full">
|
|
132
|
+
<thead className="bg-white/5">
|
|
133
|
+
<tr className="border-b border-white/10">
|
|
134
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
135
|
+
Prop
|
|
136
|
+
</th>
|
|
137
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
138
|
+
Type
|
|
139
|
+
</th>
|
|
140
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
141
|
+
Default
|
|
142
|
+
</th>
|
|
143
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
144
|
+
Description
|
|
145
|
+
</th>
|
|
146
|
+
</tr>
|
|
147
|
+
</thead>
|
|
148
|
+
<tbody>
|
|
149
|
+
<tr className="!bg-black/10">
|
|
150
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
151
|
+
withAccessibility
|
|
152
|
+
</td>
|
|
153
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
154
|
+
boolean
|
|
155
|
+
</td>
|
|
156
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
157
|
+
true
|
|
158
|
+
</td>
|
|
159
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
160
|
+
Whether to wrap the icon with accessibility feature
|
|
161
|
+
</td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
164
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
165
|
+
width
|
|
166
|
+
</td>
|
|
167
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
168
|
+
number | string
|
|
169
|
+
</td>
|
|
170
|
+
<td className="px-6 py-4 text-sm !text-white/50">26</td>
|
|
171
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
172
|
+
Width of the icon
|
|
173
|
+
</td>
|
|
174
|
+
</tr>
|
|
175
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
176
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
177
|
+
height
|
|
178
|
+
</td>
|
|
179
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
180
|
+
number | string
|
|
181
|
+
</td>
|
|
182
|
+
<td className="px-6 py-4 text-sm !text-white/50">26</td>
|
|
183
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
184
|
+
Height of the icon
|
|
185
|
+
</td>
|
|
186
|
+
</tr>
|
|
187
|
+
<tr className="border-b border-white/5">
|
|
188
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
189
|
+
stroke
|
|
190
|
+
</td>
|
|
191
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
192
|
+
string
|
|
193
|
+
</td>
|
|
194
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
195
|
+
white (in SVG)
|
|
196
|
+
</td>
|
|
197
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
198
|
+
Stroke color; use className (e.g. text-white) to
|
|
199
|
+
override
|
|
200
|
+
</td>
|
|
201
|
+
</tr>
|
|
202
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
203
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
204
|
+
strokeWidth
|
|
205
|
+
</td>
|
|
206
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
207
|
+
string | number
|
|
208
|
+
</td>
|
|
209
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
210
|
+
1.17857
|
|
211
|
+
</td>
|
|
212
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
213
|
+
Width of the stroke
|
|
214
|
+
</td>
|
|
215
|
+
</tr>
|
|
216
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
217
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
218
|
+
className
|
|
219
|
+
</td>
|
|
220
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
221
|
+
string
|
|
222
|
+
</td>
|
|
223
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
224
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
225
|
+
CSS classes for styling
|
|
226
|
+
</td>
|
|
227
|
+
</tr>
|
|
228
|
+
<tr className="!bg-black/10">
|
|
229
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
230
|
+
...svgProps
|
|
231
|
+
</td>
|
|
232
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
233
|
+
SVGProps
|
|
234
|
+
</td>
|
|
235
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
236
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
237
|
+
All standard SVG element props
|
|
238
|
+
</td>
|
|
239
|
+
</tr>
|
|
240
|
+
</tbody>
|
|
241
|
+
</table>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<div className="!space-y-8">
|
|
246
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
247
|
+
Size Variations
|
|
248
|
+
</h2>
|
|
249
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
250
|
+
<div className="flex items-end justify-center gap-6 rounded-lg bg-black/20 p-6">
|
|
251
|
+
<div className="text-center">
|
|
252
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-4 w-4 text-white" />
|
|
253
|
+
<span className="text-xs text-white/60">16px</span>
|
|
254
|
+
</div>
|
|
255
|
+
<div className="text-center">
|
|
256
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-6 w-6 text-white" />
|
|
257
|
+
<span className="text-xs text-white/60">24px</span>
|
|
258
|
+
</div>
|
|
259
|
+
<div className="text-center">
|
|
260
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-8 w-8 text-white" />
|
|
261
|
+
<span className="text-xs text-white/60">32px</span>
|
|
262
|
+
</div>
|
|
263
|
+
<div className="text-center">
|
|
264
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-10 w-10 text-white" />
|
|
265
|
+
<span className="text-xs text-white/60">40px</span>
|
|
266
|
+
</div>
|
|
267
|
+
<div className="text-center">
|
|
268
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-12 w-12 text-white" />
|
|
269
|
+
<span className="text-xs text-white/60">48px</span>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<div className="!space-y-8">
|
|
276
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
277
|
+
Usage Examples
|
|
278
|
+
</h2>
|
|
279
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
280
|
+
<div className="!space-y-4">
|
|
281
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
282
|
+
Scroll hint
|
|
283
|
+
</h3>
|
|
284
|
+
<div className="flex flex-col items-center gap-2 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
285
|
+
<span className="text-sm text-white/70">
|
|
286
|
+
Scroll for more
|
|
287
|
+
</span>
|
|
288
|
+
<ScrollDownIcon className="h-8 w-8 text-white/80" />
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
<div className="!space-y-4">
|
|
292
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
293
|
+
Hero CTA
|
|
294
|
+
</h3>
|
|
295
|
+
<div className="flex flex-col items-center gap-4 rounded-lg border border-white/10 bg-white/5 p-8">
|
|
296
|
+
<h4 className="text-lg font-semibold text-white">
|
|
297
|
+
Welcome
|
|
298
|
+
</h4>
|
|
299
|
+
<p className="text-center text-sm text-white/70">
|
|
300
|
+
Explore below
|
|
301
|
+
</p>
|
|
302
|
+
<button className="flex items-center justify-center rounded-full border border-white/20 bg-white/5 p-2 transition-colors hover:bg-white/10">
|
|
303
|
+
<ScrollDownIcon className="h-6 w-6 text-white" />
|
|
304
|
+
</button>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<div className="!space-y-8">
|
|
311
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
312
|
+
Accessibility
|
|
313
|
+
</h2>
|
|
314
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
315
|
+
<ul className="!space-y-2 text-sm !text-white/70">
|
|
316
|
+
<li>
|
|
317
|
+
Uses Radix UI AccessibleIcon with label "Scroll down
|
|
318
|
+
icon"
|
|
319
|
+
</li>
|
|
320
|
+
<li>
|
|
321
|
+
When used in a button, add aria-label e.g. "Scroll
|
|
322
|
+
down" or "See more content"
|
|
323
|
+
</li>
|
|
324
|
+
<li>
|
|
325
|
+
Ensure sufficient touch target size for interactive use
|
|
326
|
+
</li>
|
|
327
|
+
</ul>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
<div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
|
|
333
|
+
<div className="!mx-auto max-w-7xl px-6 py-8">
|
|
334
|
+
<div className="!space-y-4 text-center">
|
|
335
|
+
<p className="!text-white/60">
|
|
336
|
+
ScrollDownIcon is part of the Aural UI icon library for
|
|
337
|
+
scroll and navigation hints.
|
|
338
|
+
</p>
|
|
339
|
+
<p className="text-sm !text-white/40">
|
|
340
|
+
Uses Radix UI AccessibleIcon for screen reader
|
|
341
|
+
compatibility.
|
|
342
|
+
</p>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
</>
|
|
348
|
+
),
|
|
349
|
+
},
|
|
350
|
+
},
|
|
351
|
+
tags: ["autodocs"],
|
|
352
|
+
argTypes: {
|
|
353
|
+
width: {
|
|
354
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
355
|
+
description: "Width of the icon in pixels",
|
|
356
|
+
},
|
|
357
|
+
height: {
|
|
358
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
359
|
+
description: "Height of the icon in pixels",
|
|
360
|
+
},
|
|
361
|
+
withAccessibility: {
|
|
362
|
+
control: "boolean",
|
|
363
|
+
description: "Whether to wrap the icon with accessibility features",
|
|
364
|
+
},
|
|
365
|
+
stroke: {
|
|
366
|
+
control: "color",
|
|
367
|
+
description: "Stroke color of the icon",
|
|
368
|
+
},
|
|
369
|
+
strokeWidth: {
|
|
370
|
+
control: { type: "range", min: 0.5, max: 3, step: 0.25 },
|
|
371
|
+
description: "Width of the stroke",
|
|
372
|
+
},
|
|
373
|
+
className: {
|
|
374
|
+
control: "text",
|
|
375
|
+
description: "CSS classes for styling",
|
|
376
|
+
},
|
|
377
|
+
},
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
export default meta
|
|
381
|
+
type Story = StoryObj<typeof ScrollDownIcon>
|
|
382
|
+
|
|
383
|
+
const storyParameters = {
|
|
384
|
+
backgrounds: {
|
|
385
|
+
default: "dark",
|
|
386
|
+
values: [
|
|
387
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
388
|
+
{ name: "darker", value: "#000000" },
|
|
389
|
+
],
|
|
390
|
+
},
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
export const Default: Story = {
|
|
394
|
+
args: {
|
|
395
|
+
width: 26,
|
|
396
|
+
height: 26,
|
|
397
|
+
className: "text-white",
|
|
398
|
+
withAccessibility: true,
|
|
399
|
+
},
|
|
400
|
+
parameters: storyParameters,
|
|
401
|
+
render: (args) => (
|
|
402
|
+
<div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
403
|
+
<ScrollDownIcon {...args} />
|
|
404
|
+
</div>
|
|
405
|
+
),
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
export const SizeVariations: Story = {
|
|
409
|
+
parameters: {
|
|
410
|
+
...storyParameters,
|
|
411
|
+
docs: {
|
|
412
|
+
description: {
|
|
413
|
+
story: "ScrollDownIcon in different sizes for scroll hints and CTAs.",
|
|
414
|
+
},
|
|
415
|
+
},
|
|
416
|
+
},
|
|
417
|
+
render: () => (
|
|
418
|
+
<div className="flex h-64 min-h-dvh items-center justify-center gap-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
419
|
+
<div className="text-center">
|
|
420
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-4 w-4 text-white" />
|
|
421
|
+
<span className="text-xs text-white/60">16px</span>
|
|
422
|
+
</div>
|
|
423
|
+
<div className="text-center">
|
|
424
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-6 w-6 text-white" />
|
|
425
|
+
<span className="text-xs text-white/60">24px</span>
|
|
426
|
+
</div>
|
|
427
|
+
<div className="text-center">
|
|
428
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-8 w-8 text-white" />
|
|
429
|
+
<span className="text-xs text-white/60">32px</span>
|
|
430
|
+
</div>
|
|
431
|
+
<div className="text-center">
|
|
432
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-10 w-10 text-white" />
|
|
433
|
+
<span className="text-xs text-white/60">40px</span>
|
|
434
|
+
</div>
|
|
435
|
+
<div className="text-center">
|
|
436
|
+
<ScrollDownIcon className="!mx-auto mb-2 h-12 w-12 text-white" />
|
|
437
|
+
<span className="text-xs text-white/60">48px</span>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
),
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
export const ColorVariations: Story = {
|
|
444
|
+
parameters: {
|
|
445
|
+
...storyParameters,
|
|
446
|
+
docs: {
|
|
447
|
+
description: {
|
|
448
|
+
story: "ScrollDownIcon with different colors for context and branding.",
|
|
449
|
+
},
|
|
450
|
+
},
|
|
451
|
+
},
|
|
452
|
+
render: () => (
|
|
453
|
+
<div className="grid min-h-dvh grid-cols-2 items-center justify-center gap-6 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:grid-cols-4">
|
|
454
|
+
<div className="text-center">
|
|
455
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-purple-500/30 bg-purple-500/20">
|
|
456
|
+
<ScrollDownIcon className="h-8 w-8 text-white" />
|
|
457
|
+
</div>
|
|
458
|
+
<div className="text-sm font-medium text-white">Primary</div>
|
|
459
|
+
</div>
|
|
460
|
+
<div className="text-center">
|
|
461
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-gray-500/30 bg-gray-500/20">
|
|
462
|
+
<ScrollDownIcon className="h-8 w-8 text-gray-200" />
|
|
463
|
+
</div>
|
|
464
|
+
<div className="text-sm font-medium text-white">Neutral</div>
|
|
465
|
+
</div>
|
|
466
|
+
<div className="text-center">
|
|
467
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-white/20 bg-white/10">
|
|
468
|
+
<ScrollDownIcon className="h-8 w-8 text-white/90" />
|
|
469
|
+
</div>
|
|
470
|
+
<div className="text-sm font-medium text-white">Overlay</div>
|
|
471
|
+
</div>
|
|
472
|
+
<div className="text-center">
|
|
473
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-pink-500/30 bg-pink-500/20">
|
|
474
|
+
<ScrollDownIcon className="h-8 w-8 text-white" />
|
|
475
|
+
</div>
|
|
476
|
+
<div className="text-sm font-medium text-white">Accent</div>
|
|
477
|
+
</div>
|
|
478
|
+
</div>
|
|
479
|
+
),
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
export const UsageExamples: Story = {
|
|
483
|
+
parameters: {
|
|
484
|
+
...storyParameters,
|
|
485
|
+
docs: {
|
|
486
|
+
description: {
|
|
487
|
+
story: "Real-world usage: scroll hint and hero CTA.",
|
|
488
|
+
},
|
|
489
|
+
},
|
|
490
|
+
},
|
|
491
|
+
render: () => (
|
|
492
|
+
<div className="min-h-dvh !space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
493
|
+
<div className="!space-y-2">
|
|
494
|
+
<h3 className="text-sm font-medium text-white">Scroll hint</h3>
|
|
495
|
+
<div className="flex flex-col items-center gap-2 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
496
|
+
<span className="text-sm text-white/70">Scroll for more</span>
|
|
497
|
+
<ScrollDownIcon className="h-8 w-8 text-white/80" />
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
<div className="!space-y-2">
|
|
501
|
+
<h3 className="text-sm font-medium text-white">Hero CTA</h3>
|
|
502
|
+
<div className="flex flex-col items-center gap-4 rounded-lg border border-white/10 bg-white/5 p-8">
|
|
503
|
+
<h4 className="text-lg font-semibold text-white">Welcome</h4>
|
|
504
|
+
<p className="text-center text-sm text-white/70">Explore below</p>
|
|
505
|
+
<button className="flex items-center justify-center rounded-full border border-white/20 bg-white/5 p-2 transition-colors hover:bg-white/10">
|
|
506
|
+
<ScrollDownIcon className="h-6 w-6 text-white" />
|
|
507
|
+
</button>
|
|
508
|
+
</div>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
),
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
export const Playground: Story = {
|
|
515
|
+
parameters: {
|
|
516
|
+
...storyParameters,
|
|
517
|
+
docs: {
|
|
518
|
+
description: {
|
|
519
|
+
story: "Interactive playground for ScrollDownIcon.",
|
|
520
|
+
},
|
|
521
|
+
},
|
|
522
|
+
},
|
|
523
|
+
args: {
|
|
524
|
+
width: 26,
|
|
525
|
+
height: 26,
|
|
526
|
+
className: "text-white",
|
|
527
|
+
},
|
|
528
|
+
render: (args) => (
|
|
529
|
+
<div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
530
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
531
|
+
<ScrollDownIcon {...args} />
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
),
|
|
535
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
|
|
3
|
+
|
|
4
|
+
export const ScrollDownIcon = (
|
|
5
|
+
props: React.SVGProps<SVGSVGElement> & { withAccessibility?: boolean }
|
|
6
|
+
) => {
|
|
7
|
+
const { withAccessibility = true, ...svgProps } = props
|
|
8
|
+
|
|
9
|
+
const svg = (
|
|
10
|
+
<svg
|
|
11
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
+
width="26"
|
|
13
|
+
height="26"
|
|
14
|
+
viewBox="0 0 26 26"
|
|
15
|
+
fill="none"
|
|
16
|
+
{...svgProps}
|
|
17
|
+
>
|
|
18
|
+
<path
|
|
19
|
+
d="M8.38098 14.1429L12.5715 18.3334L16.7619 14.1429M8.38098 6.80957L12.5715 11L16.7619 6.80957"
|
|
20
|
+
stroke="currentColor"
|
|
21
|
+
strokeWidth="1.17857"
|
|
22
|
+
strokeLinecap="square"
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
if (withAccessibility) {
|
|
28
|
+
return <AccessibleIcon label="Scroll down icon">{svg}</AccessibleIcon>
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return svg
|
|
32
|
+
}
|