File size: 1,561 Bytes
eb1202c | 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 | // @ts-nocheck
import { iconNames } from "./app-icons/types"
import * as mod from "./app-icon"
import { create } from "../storybook/scaffold"
const docs = `### Overview
Application icon renderer for known editor/terminal apps.
Use in provider or app selection lists.
### API
- Required: \`id\` (app icon name).
- Accepts standard img props except \`src\`.
### Variants and states
- Auto-switches themed icons when available.
### Behavior
- Watches color scheme changes to swap themed assets.
### Accessibility
- Provide \`alt\` text when the icon conveys meaning.
### Theming/tokens
- Uses \`data-component="app-icon"\`.
`
const story = create({ title: "UI/AppIcon", mod, args: { id: "vscode" } })
export default {
title: "UI/AppIcon",
id: "components-app-icon",
component: story.meta.component,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
argTypes: {
id: {
control: "select",
options: iconNames,
},
},
}
export const Basic = story.Basic
export const AllIcons = {
render: () => (
<div
style={{
display: "grid",
gap: "12px",
"grid-template-columns": "repeat(auto-fill, minmax(72px, 1fr))",
}}
>
{iconNames.map((id) => (
<div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
<mod.AppIcon id={id} alt={id} />
<div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{id}</div>
</div>
))}
</div>
),
}
|