import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from "@storybook/addon-actions"
import BaseHeading from '@/elements/content/BaseHeading.vue'

<Meta title="Elements|Heading" component={BaseHeading} />

# Heading

<Props of={BaseHeading} />

<Preview>
  <Story name="Heading">
    {{
        components: { BaseHeading },
        template: 
          `<div>
            <base-heading>
                Hello world!
            </base-heading>
          </div>`
    }}
  </Story>
</Preview>

## Sizes

Headings can have three sizes:

- `small`
- `medium`,
- `large`

The default size is `medium`

<Preview>
  <Story name="Sizes">
    {{
        components: { BaseHeading },
        template: 
          `<div>
            <base-heading size="small">
              Small heading title
            </base-heading>
            <br>
            <base-heading size="medium">
              Medium heading title
            </base-heading>
            <br>
            <base-heading size="large">
              Large heading title
            </base-heading>
          </div>`
    }}
  </Story>
</Preview>