import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { FaqComponent } from '../Faq';
import { getKnobs } from '../../../tools/knobsHelper';
import { featuresMock } from '../../../../mocks/product/faq';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';

export const faqSettings = {
    navBackgroundColor: 'The background color of the navigation panel.',
    navBorderColor: 'The border color of the navigation panel.',
    navSelectedColor: 'The background color of the selected item in the navigation panel.',
    navDividerVisible: 'Show/Hide the separators in the navigation section.',
    navPadding: 'The padding of the navigation panel.',
    qAndABackgroundColor: 'The background color of the QA section.',
    qAndASelectedColor: 'The background color of the selected question.',
    isExpandable: 'If set to true the QA section shows one answer at the time. If false all the answers are shown.',
    qAndADividerVisible: 'Show/Hide the separators in the QA section.',
    listPadding: 'The padding of the QA section.'
};

<Meta title="Components/Faq" component={FaqComponent} />

# Faq
<br />

## `Faqs` are ideal to create blocks of question/answers.
<br />

### Default
<Canvas>
    <Story name="Default">
        <FaqComponent data={featuresMock} settings={getKnobs(FaqComponent.schema().form)} />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet
    summary="faqData"
    code={featuresMock}
/>
<br />
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(FaqComponent.schema().form)}
/>

```jsx
import Faq from '@appdirect/sfb-theme-components/src/components/faq/Faq';

<FaqComponent data={faqData} settings={settingsData} />

```

## Props
<ArgsTable of={FaqComponent} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={faqSettings} />
</table>

### Form Output
<FormOutput code={FaqComponent.schema().form} />
