import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import AtomsShowcase from '../AtomsShowcase';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as AtomsShowcaseStories from './AtomsShowcase.stories';

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 of={AtomsShowcaseStories} />

# AtomsShowcase

<br />

## `AtomsShowcases` are used to demo the capabilities of sfb-theme-components.

<br />

### Default

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

## Usage Example

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(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} />
