94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { Component, createSignal } from "solid-js";
|
|
|
|
import { AnimeShow } from "../../src/ts/components/common/anime/AnimeShow";
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/Anime/AnimeShow",
|
|
component: AnimeShow as Component<{
|
|
when: boolean;
|
|
slide?: true;
|
|
duration?: number;
|
|
class?: string;
|
|
}>,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
when: { control: "boolean" },
|
|
slide: { control: "boolean" },
|
|
duration: { control: "number" },
|
|
},
|
|
});
|
|
|
|
export const FadeToggle = meta.story({
|
|
args: {
|
|
when: true,
|
|
children: (
|
|
<div style={{ color: "var(--text-color)", padding: "16px" }}>
|
|
This content fades in and out
|
|
</div>
|
|
),
|
|
},
|
|
});
|
|
|
|
export const SlideToggle = meta.story({
|
|
args: {
|
|
when: true,
|
|
slide: true,
|
|
duration: 250,
|
|
children: (
|
|
<div style={{ color: "var(--text-color)", padding: "16px" }}>
|
|
This content slides in and out
|
|
</div>
|
|
),
|
|
},
|
|
});
|
|
|
|
export const InteractiveDemo = meta.story({
|
|
render: () => {
|
|
const [show, setShow] = createSignal(true);
|
|
return (
|
|
<div>
|
|
<button
|
|
style={{
|
|
padding: "8px 16px",
|
|
cursor: "pointer",
|
|
"background-color": "var(--sub-alt-color)",
|
|
color: "var(--text-color)",
|
|
border: "none",
|
|
"border-radius": "8px",
|
|
"margin-bottom": "16px",
|
|
}}
|
|
onClick={() => setShow((prev) => !prev)}
|
|
>
|
|
Toggle ({show() ? "visible" : "hidden"})
|
|
</button>
|
|
<div style={{ display: "flex", gap: "24px" }}>
|
|
<div>
|
|
<div style={{ "font-size": "12px", color: "var(--sub-color)" }}>
|
|
Fade
|
|
</div>
|
|
<AnimeShow when={show()}>
|
|
<div style={{ color: "var(--text-color)", padding: "16px" }}>
|
|
Fade content
|
|
</div>
|
|
</AnimeShow>
|
|
</div>
|
|
<div>
|
|
<div style={{ "font-size": "12px", color: "var(--sub-color)" }}>
|
|
Slide
|
|
</div>
|
|
<AnimeShow when={show()} slide duration={250}>
|
|
<div style={{ color: "var(--text-color)", padding: "16px" }}>
|
|
Slide content
|
|
</div>
|
|
</AnimeShow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
});
|