import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import AtomsShowcase from '../AtomsShowcase';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';

export const atomShowcaseSettings = {
    title: 'The title to display.',
    description: 'The description or content of the component.',
    ctaButton: 'Show/Hide a CTA button.',
    ctaButtonLabel: 'The text for the button label.',
    headerType: 'The type of header used by the title h1 to h5.',
    descriptionSize: 'The size used in the description (bigger, standard, smaller).',
    textStyling: 'The text style used in the description (bold, italic, strikethrough, underline).',
    textOpacity: 'The opacity of the description (From 0 to 1).'
};

<Meta title="Components/AtomsShowcase" component={AtomsShowcase} />

# AtomsShowcase
<br />

## `AtomsShowcases` are used to demo the capabilities of sfb-theme-components.
<br />

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


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

```jsx
import AtomsShowcase from '@appdirect/sfb-theme-components/src/components/atoms-showcase/AtomsShowcase';

<AtomsShowcase settings={settingsData} />

```

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

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

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