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

import { allLogoCategories }                from './data';
import { TwigContainerComponent }           from '../../../../utils/twig-container/twig-container.component';
import { LogoComponent }                    from '../angular/logo.component';


<Meta
    title='Components/Logo'
    component={LogoComponent}
    decorators={[
        moduleMetadata({ declarations: [LogoComponent, TwigContainerComponent]}),
    ]}
    argTypes={{
        name: {
            control: { type: 'select' },
            table: { defaultValue: { summary: 'videotron' } },
        },
        size: {
            control: { type: 'select' },
            table: { defaultValue: { summary: 'medium' } },
        },
        langcode: {
            control: {
                type: 'select'
            },
            table: { defaultValue: { summary: 'en' } },
        },
        reversed: {
            table: { defaultValue: { summary: false } },
        },
        allLogoCategories: {
            table: { disable: true }
        }
    }}
/>


# Logo

<br/>



## Component API

<Props of={LogoComponent} />




## Drupal implementation example

```jsx
{% include '@bf-components/logo/twig/index.twig' with {
    name        : 'business',
    size        : 'large',
    langcode    : 'en',
} only %}
```



## Drupal

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

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



## Drupal All Logos

<Canvas withSource='none'>
    <Story
        name='Drupal - All logos'
        height='800px'
        args={{
            elementPath : 'components/logo/_doc/template-all.drupal',
            allLogoCategories
        }}
    >
        {Drupal.bind()}
    </Story>
</Canvas>