import { moduleMetadata }                       from '@storybook/angular';
import { Canvas, Meta, Story, Props }  from '@storybook/addon-docs';

import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { TileComponent }                        from '../angular/tile.component';


<Meta
    title='Components/Tile'
    component={TileComponent}
    decorators={[
        moduleMetadata({ declarations: [TileComponent, TwigContainerComponent]})
    ]}
    argTypes={{}}
/>


# Tile

<br/>



## Component API

<Props of={TileComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/tile/twig/index.twig' with {
    content : 'Tile label',
} only %}
```



## Drupal

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

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='600px'
        args={{
            elementPath     : 'components/tile/_doc/template.drupal',
            class           : '',
            content         : `<div class='d-flex flex-column'>
    <img src='/logo/google.svg' />
</div>`,
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>


<Canvas withSource='none'>
    <Story
        name='Drupal - List example'
        height='600px'
        args={{
            elementPath     : 'components/tile/_doc/list.drupal',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>