import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import CollapsibleText from '../CollapsibleText';
import { featuresMock } from '../../../../mocks/product/faq';
import * as CollapsibleTextStories from './CollapsibleText.stories';

export const items = featuresMock.faqGroups.items;

<Meta of={CollapsibleTextStories} />

# CollapsibleText

<br />

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

<br />

### Default

<Canvas>
  <Story of={CollapsibleTextStories.Default} />
</Canvas>

### Expandable

<Canvas>
  <Story of={CollapsibleTextStories.Expandable} />
</Canvas>

## Usage Example

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

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

```

## Props

<ArgsTable of={CollapsibleText} />
