import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import BannerIntroduction from './content/BannerIntroduction.mdx';
import argTypesDefault from './config';

import MBanner from '../../Banner';

<Meta title="Banner" component={MBanner} argTypes={argTypesDefault} />

export const BannerDefault = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MBanner },
  template: `
    <m-banner
      :text="text"
      :variant="variant"
      :has-icon="hasIcon"
      :icon-variant="iconVariant"
      :link-text="linkText"
      :link-href="linkHref"
      :open-link-new-tab="openLinkNewTab"
    />
  `
});

# Banner
<BannerIntroduction />
<Anchor storyId="banner--default-story"></Anchor>

## Default Banner

<Canvas>
  <Story
    name="Default"
    argTypes={{ ...argTypesDefault }}
    args={{
      text: "This is the default banner with text",
      linkText: "Action Link"
    }}
  >
    {BannerDefault.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

export const BannerWithSlot = (args) => ({
  components: { MBanner },
  template: `
    <m-banner>
      <div class="banner-text">
        This is a custom banner. 
      </div>
      <div class="banner-link">
        <a>Halo</a>
      </div>
    </m-banner>
  `
});

<Anchor storyId="banner--custom"></Anchor>

## Custom Banner
To use a custom banner, you need to implement the content inside default `<slot>`. You can follow the standard structure of Banner component in order to make the styling consistent. The standard structure of Banner component is like this:
```js
<div class="banner">
  <slot>
    <m-icon size="small" /> // see the Icon component for more detail
    <div class="banner-text">
      This is text
    </div>
    <div class="banner-link">
      <a>This is link</a>
    </div>
  </slot>
</div>
```

<Canvas>
  <Story name="Custom">
    {BannerWithSlot.bind({})}
  </Story>
</Canvas>