import readme from './readme.md'

export default {
  title: 'Badge',
  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
    notes: { readme },
  },
  argTypes: {
    text: {
      name: 'Text',
      table: { category: 'Props' },
      defaultValue: 'Info',
      control: { type: 'text' }
    },
    type: {
      name: 'Type',
      table: { category: 'Props' },
      defaultValue: 'info',
      control: { type: 'select', options: ['info', 'promo'] }
    },
    position: {
      name: 'Position',
      table: { category: 'Props' },
      defaultValue: 'left',
      control: { type: 'select', options: ['left', 'right'] }
    }
  }
}

export const normal = (args) => (`
  <div class="card">
    <ibk-badge type="${args.type}"
      text="${args.text}"
      position="${args.position}"></ibk-badge>
  </div>

  <style>
    .card {
      margin: 20px;
      border: 1px solid #ececec;
      border-radius: 4px;
      width: 250px;
      height: 200px;
      background-color: white;
    }
  </style>
`)