import { Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Layout, HorizontalGroup, VerticalGroup } from "./Layout";
import { Button } from "../Button";
import { Select } from "../index";

# 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

<Props of={Layout} />

## Horizontal

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

<Preview>
  <HorizontalGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </HorizontalGroup>
</Preview>
<Preview>
  <HorizontalGroup>
    <Select
      width={25}
      onChange={() => {}}
      options={[
        { value: 1, label: "Option 1" },
        { value: 2, label: "Option 2" },
      ]}
    />
    <Select
      width={25}
      onChange={() => {}}
      options={[
        { value: 1, label: "Option 1" },
        { value: 2, label: "Option 2" },
      ]}
    />
    <Select
      width={25}
      onChange={() => {}}
      options={[
        { value: 1, label: "Option 1" },
        { value: 2, label: "Option 2" },
      ]}
    />
  </HorizontalGroup>
</Preview>

## Vertical

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

<Preview>
  <VerticalGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </VerticalGroup>
</Preview>
<Preview>
  <VerticalGroup justify="center">
    <Select
      width={25}
      onChange={() => {}}
      options={[
        { value: 1, label: "Option 1" },
        { value: 2, label: "Option 2" },
      ]}
    />
    <Select
      width={25}
      onChange={() => {}}
      options={[
        { value: 1, label: "Option 1" },
        { value: 2, label: "Option 2" },
      ]}
    />
    <Select
      width={25}
      onChange={() => {}}
      options={[
        { value: 1, label: "Option 1" },
        { value: 2, label: "Option 2" },
      ]}
    />
  </VerticalGroup>
</Preview>