124 lines
3.1 KiB
TypeScript
124 lines
3.1 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { Component } from "solid-js";
|
|
|
|
import { Balloon } from "../../src/ts/components/common/Balloon";
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/Balloon",
|
|
component: Balloon as Component,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
text: { control: "text" },
|
|
position: {
|
|
control: "select",
|
|
options: ["up", "down", "left", "right"],
|
|
},
|
|
break: { control: "boolean" },
|
|
length: {
|
|
control: "select",
|
|
options: ["small", "medium", "large", "xlarge", "fit"],
|
|
},
|
|
inline: { control: "boolean" },
|
|
},
|
|
});
|
|
|
|
export const Default = meta.story(() => (
|
|
<Balloon text="Tooltip text">
|
|
<span style={{ color: "var(--text-color)", cursor: "pointer" }}>
|
|
Hover me
|
|
</span>
|
|
</Balloon>
|
|
));
|
|
|
|
export const AllPositions = meta.story(() => (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
"grid-template-columns": "repeat(2, 1fr)",
|
|
gap: "48px",
|
|
padding: "64px",
|
|
color: "var(--text-color)",
|
|
}}
|
|
>
|
|
<Balloon text="Tooltip above" position="up">
|
|
<span style={{ cursor: "pointer" }}>Up</span>
|
|
</Balloon>
|
|
<Balloon text="Tooltip below" position="down">
|
|
<span style={{ cursor: "pointer" }}>Down</span>
|
|
</Balloon>
|
|
<Balloon text="Tooltip left" position="left">
|
|
<span style={{ cursor: "pointer" }}>Left</span>
|
|
</Balloon>
|
|
<Balloon text="Tooltip right" position="right">
|
|
<span style={{ cursor: "pointer" }}>Right</span>
|
|
</Balloon>
|
|
</div>
|
|
));
|
|
|
|
export const Lengths = meta.story(() => (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
"flex-direction": "column",
|
|
gap: "32px",
|
|
padding: "64px",
|
|
color: "var(--text-color)",
|
|
}}
|
|
>
|
|
<Balloon text="Short" length="small">
|
|
<span style={{ cursor: "pointer" }}>Small</span>
|
|
</Balloon>
|
|
<Balloon text="A medium length tooltip message" length="medium">
|
|
<span style={{ cursor: "pointer" }}>Medium</span>
|
|
</Balloon>
|
|
<Balloon
|
|
text="A longer tooltip message that takes up more space"
|
|
length="large"
|
|
>
|
|
<span style={{ cursor: "pointer" }}>Large</span>
|
|
</Balloon>
|
|
<Balloon
|
|
text="An extra large tooltip with a lot of text content inside it"
|
|
length="xlarge"
|
|
>
|
|
<span style={{ cursor: "pointer" }}>XLarge</span>
|
|
</Balloon>
|
|
<Balloon text="Fits content" length="fit">
|
|
<span style={{ cursor: "pointer" }}>Fit</span>
|
|
</Balloon>
|
|
</div>
|
|
));
|
|
|
|
export const Inline = meta.story(() => (
|
|
<p style={{ color: "var(--text-color)" }}>
|
|
This is text with a{" "}
|
|
<Balloon text="Inline tooltip" inline>
|
|
<span
|
|
style={{
|
|
color: "var(--main-color)",
|
|
cursor: "pointer",
|
|
"text-decoration": "underline",
|
|
}}
|
|
>
|
|
inline element
|
|
</span>
|
|
</Balloon>{" "}
|
|
inside a sentence.
|
|
</p>
|
|
));
|
|
|
|
export const WithBreak = meta.story(() => (
|
|
<Balloon
|
|
text="This is a very long tooltip message that should break into multiple lines when displayed"
|
|
break
|
|
length="medium"
|
|
>
|
|
<span style={{ color: "var(--text-color)", cursor: "pointer" }}>
|
|
Hover for multiline tooltip
|
|
</span>
|
|
</Balloon>
|
|
));
|