91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { Component } from "solid-js";
|
|
|
|
import { NotificationBubble } from "../../src/ts/components/common/NotificationBubble";
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/NotificationBubble",
|
|
component: NotificationBubble,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
variant: {
|
|
control: "select",
|
|
options: ["fromCorner", "atCorner", "center"],
|
|
},
|
|
show: { control: "boolean" },
|
|
},
|
|
decorators: [
|
|
(Story: Component) => (
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
width: "48px",
|
|
height: "48px",
|
|
"background-color": "var(--sub-alt-color)",
|
|
"border-radius": "8px",
|
|
}}
|
|
>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
});
|
|
|
|
export const FromCorner = meta.story({
|
|
args: {
|
|
variant: "fromCorner",
|
|
show: true,
|
|
},
|
|
});
|
|
|
|
export const AtCorner = meta.story({
|
|
args: {
|
|
variant: "atCorner",
|
|
show: true,
|
|
},
|
|
});
|
|
|
|
export const Center = meta.story({
|
|
args: {
|
|
variant: "center",
|
|
show: true,
|
|
},
|
|
});
|
|
|
|
export const AllVariants = meta.story({
|
|
decorators: [
|
|
() => (
|
|
<div style={{ display: "flex", gap: "32px" }}>
|
|
{(["fromCorner", "atCorner", "center"] as const).map((variant) => (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
"flex-direction": "column",
|
|
"align-items": "center",
|
|
gap: "8px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
width: "48px",
|
|
height: "48px",
|
|
"background-color": "var(--sub-alt-color)",
|
|
"border-radius": "8px",
|
|
}}
|
|
>
|
|
<NotificationBubble variant={variant} show />
|
|
</div>
|
|
<div style={{ "font-size": "12px", color: "var(--sub-color)" }}>
|
|
{variant}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
),
|
|
],
|
|
});
|