import ButtonGroup from '../ButtonGroup';
import Button from '../../Button';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import {
  createComponentTemplate,
  createStoryMetaSettings,
} from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: ButtonGroup,
  title: 'Components/ButtonGroup',
};

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

export const buttonGroupTemplate = args => (
  <ButtonGroup {...args}>
    <Button>One</Button>
    <Button>Two</Button>
    <Button>Three</Button>
  </ButtonGroup>
);

<Heading
  title="ButtonGroup"
  componentRelativePath="ButtonGroup/ButtonGroup.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

ButtonGroup is a container for a group of buttons.

<Canvas>
  <Story name="Overview">{buttonGroupTemplate.bind({})}</Story>
</Canvas>

## Props

<ArgsTable of={ButtonGroup} />

## Usage

### Variants

There are three different variants of ButtonGroup:

<Canvas>
  <Story name="Variants">
    <div className="flex flex-col space-y-2">
      <ButtonGroup variant="text">
        <Button>Text</Button>
        <Button>Text</Button>
        <Button>Text</Button>
      </ButtonGroup>
      <ButtonGroup variant="outlined">
        <Button>Outlined</Button>
        <Button>Outlined</Button>
        <Button>Outlined</Button>
      </ButtonGroup>
      <ButtonGroup variant="contained">
        <Button>Contained</Button>
        <Button>Contained</Button>
        <Button>Contained</Button>
      </ButtonGroup>
    </div>
  </Story>
</Canvas>

### Orientation

You can change the orientation of the buttons in the group by setting the
`orientation` prop.

<Canvas>
  <Story name="Orientation Horizontal">
    <ButtonGroup orientation="horizontal">
      <Button>Horizontal-1</Button>
      <Button>Horizontal-2</Button>
    </ButtonGroup>
  </Story>
</Canvas>

Or vertical

<Canvas>
  <Story name="Orientation Vertical">
    <ButtonGroup orientation="vertical">
      <Button>Vertical-1</Button>
      <Button>Vertical-2</Button>
    </ButtonGroup>
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="ButtonGroup/__stories__/buttonGroup.stories.mdx" />
