import BmsBadge from './BmsBadge.vue';

export default {
  title: 'Composants/feedback/Badge',
  component: BmsBadge,
};

const Template = (args) => ({
  components: {
    BmsBadge,
  },
  setup() {
    return { args };
  },
  template: `
    <br><b>Default</b><br>
    <BmsBadge v-bind="{pending:42}"><a>500</a></BmsBadge>
    <br>
    <br><b>Not pending</b><br>
    <BmsBadge v-bind="{pending:0}"><a>500</a></BmsBadge>
    <br>
    <br> <b>Danger</b><br>
    <BmsBadge v-bind="{pending:42,color:'danger'}"><a>500</a></BmsBadge>
    <br>
    <br> <b>Too small and warn</b><br>
    <BmsBadge v-bind="{pending:1,color:'warning'}"><a>500</a></BmsBadge>
    <br>
    <br> <b>Too long and default color</b><br>
    <BmsBadge v-bind="{pending:666,color:'default'}"><a>what ever you want here</a></BmsBadge>
  `,
});

export const BmsBadgeStory = Template.bind({});
