import type { Meta, StoryObj } from "@storybook/react-vite"; import * as React from "react"; import { Button, ButtonLink } from "../button"; import { Body, H1, H2, H3, P } from "../typography"; import { Outline, Solid } from "./icon"; const meta: Meta = { title: "Icon/Icon", parameters: { docs: { description: { component: `Heroicons (https://heroicons.com/) are used for this project, wrappers are provided by the icon component which finalizes the styling. Please use the wrapped versions instead of importing Heroicons directly. FIXME: Auto-completion might not fully work. import { Outline, Solid } from "maykin-ui/icon"; `, }, }, }, }; export default meta; type Story = StoryObj; export const AllIcons: Story = { args: {}, render: () => { return ( <>

Outline (click to copy)

{Object.entries(Outline).map(([name, Icon]) => ( navigator.clipboard.writeText(``)} /> ))}

Solid (click to copy)

{Object.entries(Solid).map(([name, Icon]) => ( navigator.clipboard.writeText(``)} /> ))} ); }, }; export const IconsInButtons: Story = { args: {}, render: () => { return ( <> Click me! Click me! ); }, }; export const IconsInTypographicComponents: Story = { args: {}, render: () => { return (

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

); }, };