import { moduleMetadata }                       from '@storybook/angular';
import { Canvas, Meta, Story, Props }           from '@storybook/addon-docs';
import interfaceIcons                           from '../../../../../../../public/icons/list/interfaces.json';
import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { ButtonIconComponent }                  from '../angular/button-icon.component';


<Meta
    title='Components/Button Icon'
    component={ButtonIconComponent}
    decorators={[
        moduleMetadata({ declarations: [ButtonIconComponent, TwigContainerComponent]})
    ]}
    argTypes={{
        icon: {
            control: {
                type: 'select',
                options: ['', ...interfaceIcons.map(a => a.list).flat().sort()]
            }
        },
    }}
/>


# Button Icon

<br/>



## Component API

<Props of={ButtonIconComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/button-icon/twig/index.twig' with {
    icon : 'placeholder'
} only %}

// With a badge
{% include '@bf-components/button-icon/twig/index.twig' with {
    badgeLabel : '3'
} only %}

// With a link instead of a button
{% include '@bf-components/button-icon/twig/index.twig' with {
    href : '#'
} %}

// Disabled
{% include '@bf-components/button-icon/twig/index.twig' with {
    isDisabled : true
} %}
```



## Drupal

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

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='300px'
        args={{
            elementPath : 'components/button-icon/_doc/template.drupal',
            icon        : 'cart'
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>