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 { ButtonComponent }                      from '../angular/button.component';


<Meta
    title='Components/Button'
    component={ButtonComponent}
    decorators={[
        moduleMetadata({ declarations: [ButtonComponent, TwigContainerComponent]})
    ]}
    argTypes={{
        hierarchy: {
            defaultValue: '',
            control: {
                type: 'select',
                options: ['', 'primary', 'primary-alt', 'secondary', 'tertiary' ]
            }
        },
        iconName: {
            defaultValue: '',
            control: {
                type: 'select',
                options: ['', 'placeholder', ...interfaceIcons.map(a => a.list).flat().sort()]
            }
        },
        iconPosition: {
            defaultValue: '',
            control: {
                type: 'select',
                options: ['', 'left', 'right']
            }
        },
    }}
/>


# Button

<br/>



## Component API

<Props of={ButtonComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/button/twig/index.twig' with {
    label           : 'Button label',
    hierarchy       : 'primary',
    isDisabled      : false,
    isLoading       : false,
    iconName        : 'placeholder',
    iconPosition    : 'right',
    class           : 'mt-3',
} only %}
```


## Drupal

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

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='700px'
        args={{
            elementPath     : 'components/button/_doc/template.drupal',
            class           : 'ml-4 mb-3',
            dataDismiss     : 'dataDismiss',
            dataToggle      : 'dataToggle',
            dataTarget      : 'dataTarget',
            ariaControls    : 'ariaControls',
            ariaExpanded    : 'ariaExpanded',
            ariaLabel       : 'ariaLabel',
            extraAttribute  : 'extraAttribute',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>


<Canvas withSource='none'>
    <Story
        name='Drupal - CSS only'
        height='700px'
        args={{
            elementPath : 'components/button/_doc/css-only.drupal',
            class       : 'ml-4 mb-3',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>