import {
  Meta,
  Story,
  Canvas,
  Primary,
  Controls,
  Unstyled,
  Source,
  Title,
} from '@storybook/addon-docs/blocks';
import { Accordion } from '../../src/lib/components/accordion/Accordion.component';

import * as Stories from './accordion.stories';

<Meta of={Stories} name="Guideline" />

# Accordion

Accordions are used to toggle the visibility of content.  
It is used to hide non essential information or to reduce the amount of information displayed on the screen.

## Style

Accordion component comes with a style prop that can be used to customize the appearance of the accordion content.
The default style of the accordion container only includes padding.

<Canvas of={Stories.WithCustomStyle} />

## Playground

<Canvas of={Stories.Playground} layout="fullscreen" />

<Controls of={Stories.Playground} />