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

import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { BlockHighlightComponent }              from '../angular/block-highlight.component';


<Meta
    title='Components/Block Highlight'
    component={BlockHighlightComponent}
    decorators={[
        moduleMetadata({ declarations: [BlockHighlightComponent, TwigContainerComponent]}),
    ]}
    argTypes={{
        titleTag: {
            table: { defaultValue: { summary: 'p' } },
        },
        blockBackgroundColor: {
            table: { defaultValue: { summary: 'ground' } },
            control: {
                type: 'select',
                defaultValue: 'ground'
            }
        }
    }}
/>

# Block Highlight

> 👉 &nbsp; Please, read [Full Documentation about Block-Highlight](https://zeroheight.com/79f1d3365/p/688590-block-highlight).

<br/>

## Component API

<Props of={BlockHighlightComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/block-highlight/twig/index.twig' with {
    image                   : {
        src : '/images/assets/helix-equipment.png'
    },
    visualBackgroundColor   : '#ff00ff',
    blockBackgroundColor    : 'underground',
    title                   : 'All the mobile accessories',
    titleTag                : 'h2',
    paragraph               : 'Find the perfect accessories for your device.',
    button                  : {
        label : 'Shop',
        class : ''
    },
    isFeatured              : false,
    reversed                : false,
    class                   : ''
} only %}
```


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

export const commonProps = {
    elementPath         : 'components/block-highlight/_doc/template.drupal',
    image               : {
        src : window.location.origin + '/images/placeholder/800x600.png',
        // src: 'https://i.stack.imgur.com/y9DpT.jpg'
    },
    title               : 'All the mobile accessories',
    paragraph           : 'Find the perfect accessories for your device.',
    button              : {
        label   : 'Shop',
        class   : ''
    },
    isFeatured          : false,
    class               : ''
}

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


<Canvas withSource='none'>
    <Story
        name='Drupal - Usage example'
        height='800px'
        args={{
            ...commonProps,
            elementPath : 'components/block-highlight/_doc/usage-example.drupal',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>