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


<Meta
    title='Components/Banner'
    component={BannerComponent}
    decorators={[
        moduleMetadata({ declarations: [BannerComponent, TwigContainerComponent]})
    ]}
    argTypes={{
        iconName    : {
            defaultValue: 'credit-return',
            control: {
                type: 'select',
                options: ['', ...illustrationIcons.map(a => a.list).flat().sort()]
            }
        },
        isClickable : {
            defaultValue : true
        }
    }}
/>


# Banner

<br/>



## Component API

<Props of={BannerComponent} />



## Drupal implementation example

#### Clickable banner with icon
```jsx
{% include '@bf-components/banner/twig/index.twig' with {
    href        : 'https://videotron.com',
    title       : 'Galaxy Buds Live',
    paragraph   : 'Free with any purchase of this phone, valuted at $239.38.',
    iconName    : 'mobile-multiline',
    badge       : 'FREE',
    isClickable : 'true'
    class       : 'mb-4',
} only %}
```

#### Banner with icon and link
```jsx
{% include '@bf-components/banner/twig/index.twig' with {
    //...
    linkLabel   : 'Some conditions may apply',
    isClickable : 'false',
} only %}
```

#### Banner with image
```jsx
{% include '@bf-components/banner/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://videotron.com',
            title       : 'Galaxy Buds Live',
            paragraph   : 'Free with any purchase of this phone, valuted at $239.38.',
            image       : {
                src: 'https://videotron.com/images/assets/helix-equipment.png',
                alt: 'Alt description'
            },
            badge       : 'FREE',
            class       : 'mb-4',
}

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