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

import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { BreadcrumbComponent }                  from '../angular/breadcrumb.component';


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


# Breadcrumb

<br/>



## Drupal implementation example

```jsx
<nav aria-label='breadcrumb'>
    <ol class='breadcrumb'>
        <li class='breadcrumb-item'><a href='#'>Home</a></li>
        <li class='breadcrumb-item active' aria-current='page'>Library</li>
    </ol>
</nav>
```



## Drupal

> There is no Breadcrumb Drupal component in Bifrost.
> Please use <a class='bf-link' target='_blank' href='https://getbootstrap.com/docs/4.0/components/breadcrumb/'>Bootstrap syntax</a>.


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

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='400px'
        args={{
            elementPath     : 'components/breadcrumb/_doc/template.drupal',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>