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

import { contentListsData }                     from './data';
import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { BlockSelectionComponent }                       from '../angular/block-selection.component';


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

# Block Selection

<br/>



## Component API

<Props of={BlockSelectionComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/block-selection/twig/index.twig' with {
    title : 'My selection',
    titleTag : 'p',
    isCollapsableOnMobile : true,
    isCollapsedByDefaultOnMobile : false,
    topLink : {
        href : 'www.videotron.com',
        label : 'FINALIZE',
    },
    contentLists : [
        {
            title : 'No device',
            link : {
                href : 'www.videotron.com',
                label : 'ADD A PHONE',
            }
        },
        {
            title : 'Samsung Galaxy Note 20 Utra 5G',
            description : 'Navy Blue, 128 Go',
            price : '$24.00',
            priceInfo : '/ month',
            saving : '$30.00',
            fullPrice : '$150.00',
        },
        {
            title : 'All-inclusive 12 GB Mobile',
            description : 'Lorem ipsum',
            price : '$55.00',
        }
    ],
    totalPrice : {
        label : 'Total',
        details : 'Plus applicable taxes',
        price : '$80.00',
        priceInfo : '/ month',
        priceDetails : '(for 24 month)',
    },
    class : '',
} only %}
```



## Drupal

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

export const commonProps = {
    elementPath                     : 'components/block-selection/_doc/template.drupal',
    title                           : 'My selection',
    titleTag                        : 'p',
    isCollapsableOnMobile           : true,
    isCollapsedByDefaultOnMobile    : false,
    topLink             : {
        href                : 'www.videotron.com',
        label               : 'FINALIZE',
    },
    contentLists        : contentListsData,
    totalPrice          : {
        label               : 'Total',
        details             : 'Plus applicable taxes',
        price               : '$80.00',
        priceInfo           : '/ month',
        priceDetails        : '(for 24 month)',
    },
    class               : '',
}

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='600px'
        args={{
            ...commonProps
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>