67 lines
1.3 KiB
TypeScript
67 lines
1.3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { expect } from 'storybook/test';
|
|
|
|
import { HTMLBlock } from './index';
|
|
|
|
const meta = {
|
|
title: 'Components/HTMLBlock',
|
|
component: HTMLBlock,
|
|
args: {
|
|
htmlString: `<p>Hello, world!</p>
|
|
<p><a href="#">A link</a></p>
|
|
<p>This should be filtered out: <button>Bye!</button></p>
|
|
<p>This also has emoji: 🖤</p>`,
|
|
},
|
|
argTypes: {
|
|
extraEmojis: {
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
onElement: {
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
onAttribute: {
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
},
|
|
render(args) {
|
|
return (
|
|
// Just for visual clarity in Storybook.
|
|
<HTMLBlock
|
|
{...args}
|
|
style={{
|
|
border: '1px solid black',
|
|
padding: '1rem',
|
|
minWidth: '300px',
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
// Force Twemoji to demonstrate emoji rendering.
|
|
parameters: {
|
|
state: {
|
|
meta: {
|
|
emoji_style: 'twemoji',
|
|
},
|
|
},
|
|
},
|
|
} satisfies Meta<typeof HTMLBlock>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
async play({ canvas }) {
|
|
const link = canvas.queryByRole('link');
|
|
await expect(link).toBeInTheDocument();
|
|
const button = canvas.queryByRole('button');
|
|
await expect(button).not.toBeInTheDocument();
|
|
},
|
|
};
|