import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

import { Banner } from './Banner';

<Meta
  title="molecules/Banner"
  component={Banner}
  parameters={{ actions: { argTypesRegex: '^on.*' } }}
  argTypes={{
    type: {
      control: {
        type: 'select',
        options: ['success', 'info', 'action', 'warning', 'error', 'clear']
      }
    }
  }}
/>

# Banner

Banners!

<Canvas>
  <Story name="Default" args={{ label: 'Default', type: 'info' }}>
    {(props) => <Banner {...props} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Extended"
    args={{ label: 'Default', type: 'info', extended: true, children: 'Extended text' }}>
    {(props) => <Banner {...props}>{props.children}</Banner>}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Non-extendable"
    args={{
      label: 'Default',
      type: 'info',
      extended: true,
      extendable: false,
      children: 'Extended text'
    }}>
    {(props) => <Banner {...props}>{props.children}</Banner>}
  </Story>
</Canvas>

<Canvas>
  <Story name="More props" args={{ label: 'More props', type: 'info', mb: '0', p: '0', pb: '0' }}>
    {(props) => <Banner {...props} />}
  </Story>
</Canvas>