120 lines
2.8 KiB
TypeScript
120 lines
2.8 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
|
|
import { Fa } from "../../src/ts/components/common/Fa";
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/Fa",
|
|
component: Fa,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
icon: { control: "text" },
|
|
variant: {
|
|
control: "select",
|
|
options: ["solid", "regular", "brand"],
|
|
},
|
|
fixedWidth: { control: "boolean" },
|
|
spin: { control: "boolean" },
|
|
size: { control: "number" },
|
|
class: { control: "text" },
|
|
},
|
|
});
|
|
|
|
export const Default = meta.story({
|
|
args: {
|
|
icon: "fa-cog",
|
|
variant: "solid",
|
|
},
|
|
});
|
|
|
|
export const Spinning = meta.story({
|
|
args: {
|
|
icon: "fa-circle-notch",
|
|
variant: "solid",
|
|
spin: true,
|
|
},
|
|
});
|
|
|
|
export const FixedWidth = meta.story({
|
|
args: {
|
|
icon: "fa-home",
|
|
variant: "solid",
|
|
fixedWidth: true,
|
|
},
|
|
});
|
|
|
|
export const CustomSize = meta.story({
|
|
args: {
|
|
icon: "fa-star",
|
|
variant: "solid",
|
|
size: 3,
|
|
},
|
|
});
|
|
|
|
export const Brand = meta.story({
|
|
args: {
|
|
icon: "fa-discord",
|
|
variant: "brand",
|
|
size: 2,
|
|
},
|
|
});
|
|
|
|
export const AllVariants = meta.story({
|
|
render: () => (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
"grid-template-columns": "auto repeat(3, 1fr)",
|
|
gap: "16px",
|
|
"align-items": "center",
|
|
"font-size": "1.5em",
|
|
}}
|
|
>
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }} />
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
|
|
Solid
|
|
</div>
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
|
|
Regular
|
|
</div>
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
|
|
Brand
|
|
</div>
|
|
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
|
|
Default
|
|
</div>
|
|
<Fa icon="fa-cog" variant="solid" />
|
|
<Fa icon="fa-circle" variant="regular" />
|
|
<Fa icon="fa-discord" variant="brand" />
|
|
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
|
|
Fixed Width
|
|
</div>
|
|
<Fa icon="fa-cog" variant="solid" fixedWidth />
|
|
<Fa icon="fa-circle" variant="regular" fixedWidth />
|
|
<Fa icon="fa-discord" variant="brand" fixedWidth />
|
|
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
|
|
Spinning
|
|
</div>
|
|
<Fa icon="fa-circle-notch" variant="solid" spin />
|
|
<Fa icon="fa-circle-notch" variant="solid" spin />
|
|
<div />
|
|
|
|
<div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
|
|
Sizes
|
|
</div>
|
|
<div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
|
|
<Fa icon="fa-star" variant="solid" size={1} />
|
|
<Fa icon="fa-star" variant="solid" size={2} />
|
|
<Fa icon="fa-star" variant="solid" size={3} />
|
|
</div>
|
|
<div />
|
|
<div />
|
|
</div>
|
|
),
|
|
});
|