import { Meta, Story, ArgsTable, Title, Subtitle, Description } from '@storybook/addon-docs/blocks';
import  MCollapsableContent  from './index.vue';

<Meta
  title='Components/CollapsableContent'
  component={MCollapsableContent}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MCollapsableContent },
  data:()=>({
    isLocalOpen:true
  }),
  created(){
    this.isLocalOpen=this.isOpen;
  },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <button
      class="btn btn-primary"
      @click="isLocalOpen=!isLocalOpen" >
      {{isLocalOpen?'Cerrar':'Abrir'}}
    </button>
    <m-collapsable-content
      :is-open="isLocalOpen"
      :classes="classes+' mt-4'">
      <div class="px-5 py-4">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Nobis beatae illum dolor rerum pariatur nesciunt accusantium,
          dignissimos culpa earum quia placeat qui voluptatum, sunt consectetur
          eveniet, iure veritatis provident repudiandae.
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Nobis beatae illum dolor rerum pariatur nesciunt accusantium,
          dignissimos culpa earum quia placeat qui voluptatum, sunt consectetur
          eveniet, iure veritatis provident repudiandae.
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Nobis beatae illum dolor rerum pariatur nesciunt accusantium,
          dignissimos culpa earum quia placeat qui voluptatum, sunt consectetur
          eveniet, iure veritatis provident repudiandae.
        </p>
      </div>
    </m-collapsable-content>
  </div>`
});

<Title />
<Subtitle />
<Description />

<Story
  name='Basic'
  args={{
    classes: 'bg-primary text-white'
  }}
  parameters={{
    storysource: { disabled: true },
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Basic" />

## Usage

1.- Import the component

```javascript
import { MCollapsableContent } from '@modyo/financial-commons';
```

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MCollapsableContent
  },

  ...
}
```

3.- Write your component implementation


```html
<m-collapsable-content
  :is-open="isOpen">
  Content
</m-collapsable-content>
```