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

import illustrationIcons            from '../../../../../../../public/icons/list/illustrations.json';
import { contentLists, contentListsNoTitle }    from './data';
import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { CardComponent }                        from '../angular/card.component';


<Meta
    title='Components/Card'
    component={CardComponent}
    decorators={[
        moduleMetadata({ declarations: [CardComponent, TwigContainerComponent]})
    ]}
    argTypes={{
        cardVariant: {
            table: { disable: true }
        },
        titleTag: {
            table: { defaultValue: { summary: 'h1' } },
        },
        isDisabled: {
            table: { defaultValue: { summary: false } },
        },
        reversed: {
            table: { defaultValue: { summary: false } },
        },
        language: {
            table: { defaultValue: { summary: 'en' } },
        },
        iconName: {
            defaultValue: '',
            control: {
                type: 'select',
                options: ['', 'placeholder', ...illustrationIcons.map(a => a.list).flat().sort()]
            }
        },
    }}
/>


# Card

<br/>



## Component API

<Props of={CardComponent} />



## Drupal implementation example

```jsx
// There are 3 kinds of Cards:
{% include '@bf-components/card/twig/plan.twig' with {...} %}
{% include '@bf-components/card/twig/phone.twig' with {...} %}
{% include '@bf-components/card/twig/protection.twig' with {...} %}

// Card Plan example:
{% include '@bf-components/card/twig/plan.twig' with {
    isDisabled      : false,
    upperTitle      : 'upperTitle',
    subtitle        : 'subtitle',
    title           : 'All-Inclusive 12 GB Mobile',
    description_html: '<p>Empty <i>description</i> property to display this <strong>html content</strong>.</p>',
    link            : {
        label           : 'Learn more',
        href            : 'www.videotron.com',
    },
    badge           : {
        label           : 'PROMOTION',
        hierarchy       : 'primary',
        noUppercase     : false,
    },
    // Or use the shortcut:
    // Note: To do that in Storybook `Badge` controls, you have to write double quotes around your string.
    // badge           : 'PROMOTION',
    contentLists    : [
        {
            title       : 'TV',
            description : '40 channels',
            content     : [
                {
                    label: 'Free and Unlimited Go after 10Go',
                    icon: 'unlimited',
                },
                {
                    label: '100 GB annual data in Canada',
                    icon: 'support',
                },
                {
                    label: 'Club illico included',
                    icon: 'forfait-tv-le-fan-de-films-et-series',
                },
            ],
        },
        {
            title       : 'Internet',
            description : 'Unlimited',
            content     : [
                {
                    label: 'Utilisation illimité',
                    icon: 'forfait-tv-le-fan-de-films-et-series',
                },
                {
                    label: 'Vitesse de téléchargement jusqu\'à 100mbit/s',
                    icon: 'forfait-tv-le-fan-de-films-et-series',
                },

            ],
        }
    ],
    price           : {
        upperTitle      : 'From',
        dollar          : 86,
        cent            : 99,
        details         : '/month',
        promotion       : {
            priceStriked    : 40.99,
            priceSaved      : 10,
            savedLabel      : 'You saved :',
            superscript     : 1,
            direction       : 'horizontal',
        }
    },
    buttons         : [
        {
            label       : 'Add a phone with this plan',
            hierarchy   : 'primary-alt',
            reverse     : true,
            href        : 'www.videotron.com',
        },
        {
            label       : 'BUY only this PLAN',
            hierarchy   : 'tertiary',
            href        : 'www.videotron.com',
        }
    ],
    message             : 'Only plans with a minimum of $40.00 per month are available with that phone.',
    language            : 'en'
} only %}

// Card Phone example:
{% include '@bf-components/card/twig/phone.twig' with {
    ...
    image : {
        src             : '/images/_docs/iphone-12-pro-max.png',
        alt             : 'iPhone 12 Mini',
        badgeIconName   : 'security'
    },
    title : 'iPhone 12 Mini',
    detailsColors : [
        { value :'4B4A46', name : 'Lorem' },
        { value :'2C4651', name : 'Ipsum' },
        { value :'D4BBA5', name : 'Dolor' },
        { value :'C0C0C0', name : 'Amet' },
    ],
    detailsStorage : ['128 Go', '256 Go'],
    messageLink : {
        href            : '',
        label           : 'Choose another Plan',
        class           : ''
    }
    contentBadge : {
            label       : 'Lorem Ipsum',
            hierarchy   : 'tertiary',
            angle       : '',
            iconName    : '',
            class       : '',
    }
} only %}
```



## Drupal

export const commonProps = {
    isDisabled      : false,
    upperTitle      : 'upperTitle',
    subtitle        : 'subtitle',
    title           : 'All-Inclusive 12 GB Mobile',
    description_html: '<p>Empty <i>description</i> property to display this <strong>html content</strong>.</p>',
    link            : {
        label           : 'Learn more',
        href            : 'www.videotron.com',
    },
    badge           : {
        label           : 'PROMOTION'
    },
    contentLists    : contentLists,
    price           : {
        upperTitle      : 'From',
        dollar          : 86,
        cent            : 99,
        details         : '/month',
        promotion       : {
            priceStriked    : 40.99,
            priceSaved      : 10,
            savedLabel      : 'You saved :',
            superscript     : 1,
            direction       : 'horizontal',
        }
    },
    buttons           : [
        {
            label       : 'Add a phone with this plan',
            hierarchy   : 'primary-alt',
            reverse     : true,
            href        : 'www.videotron.com',
        },
        {
            label       : 'BUY only this PLAN',
            hierarchy   : 'tertiary',
            href        : 'www.videotron.com',
        }
    ],
    message             : 'Only plans with a minimum of $40.00 per month are available with that phone.',
    language            : 'en',
};

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

<Canvas withSource='none'>
    <Story
        name='Drupal - Plan'
        height='800px'
        args={{
            elementPath : 'components/card/_doc/template.drupal',
            ...commonProps,
            cardVariant : 'plan',
            isDisabled  : false,
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<Canvas withSource='none'>
    <Story
        name='Drupal - Plan Disabled'
        height='800px'
        args={{
            ...commonProps,
            cardVariant : 'plan',
            isDisabled  : true,
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<Canvas withSource='none'>
    <Story
        name='Drupal - Plan Selected'
        height='800px'
        args={{
            ...commonProps,
            cardVariant     : 'plan',
            upperTitle      : undefined,
            contentLists    : contentListsNoTitle,
            buttons           : [
                {
                    label       : 'Choose this plan',
                    hierarchy   : 'primary-alt',
                    href        : 'www.videotron.com',
                }
            ],
            message             : undefined,
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<!-- badge           : 'PROMOTION', -->

export const phoneCommonProps = {
    badge           : {
        label           : 'Promotion'
    },
    image           : {
        src             : '/images/_docs/iphone-12-pro-max.png',
        alt             : 'iPhone 12 Mini',
        badgeIconName   : 'security'
    },
    visualBackgroundColor : '',
    title           : 'iPhone 12 Mini',
    subtitle        : 'subtitle',
    detailsColors   : [
        { value :'4B4A46', name : 'Lorem' },
        { value :'2C4651', name : 'Ipsum' },
        { value :'D4BBA5', name : 'Dolor' },
        { value :'C0C0C0', name : 'Amet' },
    ],
    detailsStorage : ['128 Go', '256 Go'],
    price           : {
        upperTitle      : 'From',
        dollar          : 86,
        cent            : 99,
        details         : '/month',
        promotion       : {
            priceStriked    : 40.99,
            priceSaved      : 10,
            savedLabel      : 'You saved :',
            superscript     : 1,
            direction       : 'horizontal',
        }
    },
    note                : 'Plan + Phone: from $150/month (24 months)<br/>No upfront payment',
    buttons             : [
        {
            label           : 'Configurate',
            hierarchy       : 'primary-alt',
            href            : 'www.videotron.com',
        }
    ],
    contentBadge : {
            label       : 'Lorem Ipsum',
            hierarchy   : 'tertiary',
            angle       : '',
            iconName    : 'credit-return',
    }
};

<Canvas withSource='none'>
    <Story
        name='Drupal - Phone'
        height='800px'
        args={{
            elementPath     : 'components/card/_doc/template.drupal',
            cardVariant     : 'phone',
            ...phoneCommonProps
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<Canvas withSource='none'>
    <Story
        name='Drupal - Phone Disabled'
        height='800px'
        args={{
            elementPath     : 'components/card/_doc/template.drupal',
            cardVariant     : 'phone',
            ...phoneCommonProps,
            isDisabled      : true,
            message         : 'Not available with this plan.',
            messageLink     : {
                url             : '',
                label           : 'Choose another Plan',
                class           : ''
            }
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<Canvas withSource='none'>
    <Story
        name='Drupal - Protection'
        height='800px'
        args={{
            elementPath     : 'components/card/_doc/template.drupal',
            cardVariant     : 'protection',
            badge           : {
                label           : 'Promotion'
            },
            iconName        : 'apple',
            visualBackgroundColor : '',
            title           : 'Apple Care+ for iPhone',
            subtitle        : 'subtitle',
            price           : {
                upperTitle      : 'From',
                dollar          : 86,
                cent            : 99,
                details         : '/month',
                promotion       : {
                    priceStriked    : 40.99,
                    priceSaved      : 10,
                    savedLabel      : 'You saved :',
                    superscript     : 1,
                    direction       : 'horizontal',
                }
            },
            message           : 'Lorem ipsum dolor this protection.',
            buttons           : [
                {
                    label       : 'Add this protection',
                    hierarchy   : 'primary-alt',
                    href        : 'www.videotron.com',
                }
            ]
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<Canvas withSource='none'>
    <Story
        name='Drupal - Increment'
        height='800px'
        args={{
            elementPath     : 'components/card/_doc/template.drupal',
            cardVariant     : 'increment',
            title           : 'Label Ipsum',
            subtitle        : 'subtitle',
            description_html: '<p>Empty <i>description</i> property to display this <strong>html content</strong>.</p>',
            price           : {
                upperTitle      : 'From',
                dollar          : 86,
                cent            : 99,
                details         : '/month',
                promotion       : {
                    priceStriked    : 40.99,
                    priceSaved      : 10,
                    savedLabel      : 'You saved :',
                    superscript     : 1,
                    direction       : 'horizontal',
                }
            },
            message         : 'Lorem ipsum dolor this message.',
            inputIncrement  : {
                min             : 0,
                max             : 5,
                value           : 0,
                inputId         : 'my-input-id',
                ariaLabel       : 'my aria-label',
                errorMessage    : 'Value should be between 0 and 5',
            },
            buttons         : [
                {
                    label           : 'Add to plan',
                    hierarchy       : 'primary-alt',
                    href            : 'www.videotron.com',
                }
            ]
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>


export const comboCommonProps = {
    badge           : {
        label           : 'Promotion'
    },
    image           : {
        src             : '/images/_docs/iphone-12-pro-max.png',
        alt             : 'iPhone 12 Mini',
    },
    comboLabel      : '250 Go',
    visualBackgroundColor : '',
    title           : 'iPhone 12 Mini',
    subtitle        : 'subtitle',
    price           : {
        upperTitle      : 'From',
        dollar          : 86,
        cent            : 99,
        details         : '/month',
        promotion       : {
            priceStriked    : 40.99,
            priceSaved      : 10,
            savedLabel      : 'You saved :',
            superscript     : 1,
            direction       : 'horizontal',
        }
    },
    note                : 'Plan + Phone: from $150/month (24 months)<br/>No upfront payment',
    buttons             : [
        {
            label           : 'Configurate',
            hierarchy       : 'primary-alt',
            href            : 'www.videotron.com',
        }
    ],
    contentBadge : {
            label       : 'Lorem Ipsum',
            hierarchy   : 'tertiary',
            angle       : '',
            iconName    : 'credit-return',
    }
};

<Canvas
    withSource='none'
    style={{ height: '800px' }}
>
    <Story
        name='Drupal - Combo'
        args={{
            elementPath     : 'components/card/_doc/template.drupal',
            cardVariant     : 'combo',
            ...comboCommonProps
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

## Component API

<Props of={CardComponent} />

## More info

https://www.figma.com/file/7bTmk29aCBl7rCFszffYPr/DS---Components-%26-styles?node-id=6113%3A705