import globalThis from 'global';
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import ButtonView from './views/ButtonView.svelte';
import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';

<Meta title="stories/renderers/svelte/svelte-mdx" />

# Svelte-specific MDX stories

## Primary

<Canvas>
  <Story name="Primary">
    {{
      Component: ButtonView,
      props: {
        primary: true,
        text: 'Primary text',
      },
    }}
  </Story>
</Canvas>

## Secondary

<Canvas>
  <Story name="Secondary">
    {{
      Component: ButtonView,
      props: {
        primary: false,
        text: 'Secondary text',
      },
    }}
  </Story>
</Canvas>

<Canvas>
  <Story name="WithDecorator" decorators={[() => BorderDecoratorRed]}>
    {{
      Component: ButtonView,
      props: {
        primary: false,
        text: 'Secondary text',
      },
    }}
  </Story>
</Canvas>