import SplitButton from '../SplitButton';

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

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

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

export const SplitButtonTemplate = args => (
  <div className="h-32 bg-primary-dark">
    <SplitButton {...args} />
  </div>
);

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

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

## Overview

SplitButton is a component that renders the SplitButtons.

<Canvas>
  <Story
    name="Overview"
    args={{
      primary: {
        id: 'Length',
        icon: 'tool-length',
        label: 'Length',
        type: 'tool',
        commandName: undefined,
        commandOptions: { toolName: 'Length' },
        tooltip: 'Length',
      },
      bState: {},
      secondary: {
        icon: 'chevron-down',
        label: '',
        isActive: true,
        tooltip: 'More Measure Tools',
      },
      items: [
        {
          id: 'Bidirectional',
          icon: 'tool-bidirectional',
          label: 'Bidirectional',
          type: 'tool',
          commandName: undefined,
          commandOptions: { toolName: 'Bidirectional' },
          tooltip: 'Bidirectional',
        },
      ],
    }}
  >
    {SplitButtonTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={SplitButton} />

## Contribute

<Footer componentRelativePath="SplitButton/__stories__/splitButton.stories.mdx" />
