import { Canvas, ArgTypes } from '@storybook/blocks';
import { Layout, HorizontalGroup, VerticalGroup } from './Layout';
import { Button } from '../Button';
import { Select } from '../index';
import { ExampleFrame } from '../../utils/storybook/ExampleFrame';
import * as LayoutStories from './Layout.story';

# Layout

## Generic

Used for aligning items in specified orientation. Useful for multiple elements that need to be arranged in rows or columns.

Expects multiple elements as `children` prop. This is the base for more specialised `Horizontal-` and `VerticalGroup` components.

### Props

<ArgTypes of={Layout} />

## Horizontal

Used for horizontally aligning several elements (e.g. Button, Select) with a predefined spacing between them.

<Canvas of={LayoutStories.Horizontal} />

## Vertical

Used for vertically aligning several elements (e.g. Button, Select) with a predefined spacing between them.

<Canvas of={LayoutStories.Vertical} />
