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


<Meta
    title='Components/Row Button'
    component={RowButtonComponent}
    decorators={[
        moduleMetadata({ declarations: [RowButtonComponent, TwigContainerComponent]})
    ]}
    argTypes={{
        iconName: {
            defaultValue: 'credit-return',
            control: {
                type: 'select',
                options: ['', ...illustrationIcons.map(a => a.list).flat().sort()]
            }
        },
        size: {
            table: { defaultValue: { summary: 'large' } }
        }
    }}
/>


# Row Button

<br/>



## Component API

<Props of={RowButtonComponent} />



## Drupal implementation example

<br/>

#### List of Row Buttons

Wrap your <b>Row Buttons</b> with CSS classes `.bf-list .bf-list--divider` in order to display dividers between them.

```jsx
<ul class='bf-list bf-list--divider'>
    <li class='w-100'>
        {% include '@bf-components/row-button/twig/index.twig' with {
            href        : 'https://example.com',
            title       : 'Private viewing',
            paragraph   : 'Contribute to the ambiance of your spaces.',
            class       : 'mb-4',
        } only %}
    </li>
</ul>
```

#### Row Button only
```jsx
{% include '@bf-components/row-button/twig/index.twig' with {
    href        : 'https://example.com',
    title       : 'Private viewing',
    paragraph   : 'Contribute to the ambiance of your spaces.',
    class       : 'mb-4',
} only %}
```

#### Row Button with icon
```jsx
{% include '@bf-components/row-button/twig/index.twig' with {
    // ...
    iconName    : 'mobile-multiline',
} only %}
```

#### Row Button with image
```jsx
{% include '@bf-components/row-button/twig/index.twig' with {
    // ...
    image       : {
        src: 'https://videotron.com/images/assets/helix-equipment.png',
        alt: 'Alt description'
    },
} only %}
```

## Drupal

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

export const commonProps= {
    href        : 'https://example.com',
    title       : '',
    paragraph   : 'Contribute to the ambiance of your spaces.',
    image       : {
        src: 'https://videotron.com/images/assets/helix-equipment.png',
        alt: 'Alt description'
    },
    class       : '',
}

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