import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import CollapsibleText from '../CollapsibleText';
import { featuresMock } from '../../../../mocks/product/faq';

export const items = featuresMock.faqGroups.items;

<Meta title="Atoms/Collapsible Text" component={CollapsibleText} />

# CollapsibleText
<br />

## `CollapsibleTexts` are ideal to display content in the form of question/answer.
<br />

### Default
<Canvas>
    <Story name="Default">
        <CollapsibleText faqData={items[0].faqs[0]} />
    </Story>
</Canvas>


## Usage Example

```jsx
import CollapsibleText from '@appdirect/sfb-theme-components/src/atoms/collapsibleText/CollapsibleText';

<CollapsibleText faqData={{ question: 'What is this?', answer: 'A cool MDX document.'}} />

```
## Props

<ArgsTable of={CollapsibleText} />
