53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { Component, JSXElement } from "solid-js";
|
|
|
|
import { Conditional } from "../../src/ts/components/common/Conditional";
|
|
|
|
type ConditionalProps = {
|
|
if: boolean;
|
|
then: JSXElement;
|
|
else?: JSXElement;
|
|
};
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/Conditional",
|
|
component: Conditional as Component<ConditionalProps>,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
if: { control: "boolean" },
|
|
},
|
|
});
|
|
|
|
export const Truthy = meta.story({
|
|
args: {
|
|
if: true,
|
|
then: <div style={{ color: "var(--text-color)" }}>Condition is true</div>,
|
|
else: <div style={{ color: "var(--error-color)" }}>Condition is false</div>,
|
|
},
|
|
});
|
|
|
|
export const Falsy = meta.story({
|
|
args: {
|
|
if: false,
|
|
then: <div style={{ color: "var(--text-color)" }}>Condition is true</div>,
|
|
else: <div style={{ color: "var(--error-color)" }}>Condition is false</div>,
|
|
},
|
|
});
|
|
|
|
export const NoFallback = meta.story({
|
|
args: {
|
|
if: true,
|
|
then: <div style={{ color: "var(--text-color)" }}>Visible content</div>,
|
|
},
|
|
});
|
|
|
|
export const FalsyNoFallback = meta.story({
|
|
args: {
|
|
if: false,
|
|
then: <div style={{ color: "var(--text-color)" }}>Hidden content</div>,
|
|
},
|
|
});
|