31 lines
690 B
TypeScript
31 lines
690 B
TypeScript
|
import { html, TemplateResult } from 'lit';
|
||
|
|
import '../src/fridge-magnets.js';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'FridgeMagnets',
|
||
|
|
component: 'fridge-magnets',
|
||
|
|
argTypes: {
|
||
|
|
backgroundColor: { control: 'color' },
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
interface Story<T> {
|
||
|
|
(args: T): TemplateResult;
|
||
|
|
args?: Partial<T>;
|
||
|
|
argTypes?: Record<string, unknown>;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ArgTypes {
|
||
|
|
header?: string;
|
||
|
|
backgroundColor?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Template: Story<ArgTypes> = ({ header, backgroundColor = 'white' }: ArgTypes) => html`
|
||
|
|
<fridge-magnets style="--fridge-magnets-background-color: ${backgroundColor}" .header=${header}></fridge-magnets>
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const App = Template.bind({});
|
||
|
|
App.args = {
|
||
|
|
header: 'My app',
|
||
|
|
};
|