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

import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { TabComponent }                         from '../angular/tab.component';


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


# Tab

<br/>



## Component API

<Props of={TabComponent} />




## Drupal

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

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='300px'
        args={{
            elementPath     : 'components/tab/_doc/template.drupal',
            navItems        : [
                { label:'Channel selection',                href:'/channelSelection', class:'active' },
                { label:'Premium and speciality channels',  href:'/premiumChannels', class:'' },
                { label:'Remote control',                   href:'/remoteControl', class:'' },
                { label:'Home network',                     href:'/homeNetwork', class:'' }
            ]
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<Canvas withSource='none'>
    <Story
        name='Drupal - Single Tab'
        height='300px'
        args={{
            elementPath     : 'components/tab/_doc/template.drupal',
            navItems        : [
                { label:'Channel selection',                href:'/channelSelection', class:'active' },
            ]
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>