62 lines
1.2 KiB
TypeScript
62 lines
1.2 KiB
TypeScript
import { TemplateResult, html } from "lit";
|
|
|
|
import "../src/pendor-clock.js";
|
|
|
|
export default {
|
|
title: "PendorClock",
|
|
component: "pendor-clock",
|
|
argTypes: {
|
|
title: { control: "text" },
|
|
counter: { control: "number" },
|
|
textColor: { control: "color" },
|
|
},
|
|
};
|
|
|
|
interface Story<T> {
|
|
(args: T): TemplateResult;
|
|
args?: Partial<T>;
|
|
argTypes?: Record<string, unknown>;
|
|
}
|
|
|
|
interface ArgTypes {
|
|
title?: string;
|
|
counter?: number;
|
|
textColor?: string;
|
|
slot?: TemplateResult;
|
|
}
|
|
|
|
const Template: Story<ArgTypes> = ({
|
|
title = "Hello world",
|
|
counter = 5,
|
|
textColor,
|
|
slot,
|
|
}: ArgTypes) => html`
|
|
<pendor-clock
|
|
style="--pendor-clock-text-color: ${textColor || "black"}"
|
|
.title=${title}
|
|
.counter=${counter}
|
|
>
|
|
${slot}
|
|
</pendor-clock>
|
|
`;
|
|
|
|
export const Regular = Template.bind({});
|
|
|
|
export const CustomTitle = Template.bind({});
|
|
CustomTitle.args = {
|
|
title: "My title",
|
|
};
|
|
|
|
export const CustomCounter = Template.bind({});
|
|
CustomCounter.args = {
|
|
counter: 123456,
|
|
};
|
|
|
|
export const SlottedContent = Template.bind({});
|
|
SlottedContent.args = {
|
|
slot: html`<p>Slotted content</p>`,
|
|
};
|
|
SlottedContent.argTypes = {
|
|
slot: { table: { disable: true } },
|
|
};
|