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

import { contentLists, contentListsNoTitle }    from './data';
import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { CardComponent }                        from '../angular/card.component';


<Meta
    title='Components/Card/API exposed'
    component={CardComponent}
    decorators={[
        moduleMetadata({ declarations: [CardComponent, TwigContainerComponent]})
    ]}
/>

export const Drupal = (args) => ({
    component: TwigContainerComponent,
    props: {
        elementPath : 'components/card/_doc/template.drupal',
        ...args,
    }
});


# Card Plan - API exposed

<Canvas withSource='none'>
    <Story
        name='Drupal - Plan - API exposed'
        height='800px'
        args={{
            cardVariant     : 'plan',
            contentLists    : [
                {
                    title       : 'contentLists.title',
                    description : 'contentLists.description',
                    content     : [
                        {
                            label: 'contentLists.content.label',
                            icon: 'placeholder',
                        }
                    ]
                },
                {
                    title       : 'contentLists.title',
                    description : 'contentLists.description',
                    content     : [
                        {
                            label: 'contentLists.content.label',
                            icon: 'placeholder',
                        }
                    ]
                }
            ],
            price           : {
                upperTitle      : 'price.upperTitle',
                upfront         : {
                    label         : 'price.upfront.label',
                    dollar        : 'price.upfront.dollar',
                },
                dollar          : 'price.dollar',
                cent            : 'price.cent',
                promotion       : {
                    priceStriked  : 'price.promotion.priceStriked',
                    priceSaved    : 'price.promotion.priceSaved',
                    savedLabel    : 'price.promotion.savedLabel',
                    superscript   : 'price.promotion.superscript',
                    direction     : 'price.promotion.direction',
                },
                details         : 'price.details',
                message         : 'price.message',
                infosSupp       : 'price.infosSupp',
                boxAlignement   : 'price.boxAlignement',
                dashed          : 'price.dashed',
                saved           : 'price.saved',
            },
            badge           : {
                label           : 'badge'
            },
            link            : {
                label           : 'link.label',
                href            : '/'
            },
            iconName        : 'apple',
            upperTitle      : 'upperTitle',
            title           : 'title',
            subtitle        : 'subtitle',
            description     : 'description',
            message         : 'message',
            messageLink     : {
                label           : 'messageLink.label',
                href            : '/'
            },
            note            : 'note',
            buttons           : [
                {
                    label       : 'button.label',
                    hierarchy   : 'primary-alt',
                    href        : 'www.videotron.com',
                },
                {
                    label       : 'button.label',
                    href        : 'www.videotron.com',
                }
            ],
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>