import globalThis from 'global';
import { moduleMetadata } from '@storybook/angular';
import { Meta, Story, Canvas } from '@storybook/addon-docs';

export const Button = globalThis.Components.Button;

<Meta
  title="angular/angular-mdx"
  component={Button}
  decorators={[moduleMetadata({ declarations: [Button] })]}
/>

# Angular-specific MDX Stories

<Canvas>
  <Story name="Angular Story">
    {{
      template: `<storybook-framework-button [label]="text" (onClick)="onClick($event)"></storybook-framework-button>`,
      props: {
        text: 'hello button',
        onClick: () => {},
      },
    }}
  </Story>
</Canvas>
