import { moduleMetadata } from '@storybook/angular';
import { Canvas, Meta, Story, Props } from '@storybook/addon-docs';
import illustrationIcons            from '../../../../../../../public/icons/list/illustrations.json';
import { TwigContainerComponent }   from '../../../../utils/twig-container/twig-container.component';
import { BadgeComponent }           from '../angular/badge.component';
import { BadgeTemplate }            from './template.angular.ts';


<Meta
    title='Components/Badge'
    component={BadgeComponent}
    decorators={[
        moduleMetadata({ declarations: [BadgeComponent, BadgeTemplate, TwigContainerComponent]}),
    ]}
    argTypes={{
        hierarchy: {
            table:   { defaultValue: { summary: 'secondary' } },
            control: { type: 'select' }
        },
        angle: {
            control: { type: 'select' }
        },
        noUppercase: {
            table:  { defaultValue: { summary: false } },
        },
        iconName: {
            defaultValue: '',
            control: {
                type: 'select',
                options: ['', 'placeholder', ...illustrationIcons.map(a => a.list).flat().sort()]
            }
        },
    }}
/>


# Badge

<br/>



## Component API
<Props of={BadgeComponent} />




## Drupal implementation example

```jsx
{% include '@bf-components/badge/twig/index.twig' with {
    label       : 'Free',
    class       : 'my-2',
    hierarchy   : 'primary'
    iconName    : 'camera'
} only %}
```



## Drupal

export const Drupal = (args) => ({
    component: TwigContainerComponent,
    props: args,
});

<Canvas
    withSource='none'
    style={{ height: '600px' }}
>
    <Story
        name='Drupal'
        args={{
            elementPath : 'components/badge/_doc/template.drupal',
            class       : 'my-2',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

## Angular

export const Angular = (args) => ({
    component: BadgeTemplate,
    props: args,
});

<Canvas
    withSource='none'
    style={{ height: '600px' }}
>
    <Story
        name='Angular'
        args={{
            classes : 'my-2'
        }}
    >
        {Angular.bind({})}
    </Story>
</Canvas>