import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { select } from '@storybook/addon-knobs'
import { FormGroup, FormLabel, Input } from '../'
import Form from './'

<Meta
  title="Components/Forms/Form"
  component={Form}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A9307',
    },
  }}
/>

# Form

A Form component is a wrapper that will wrap around children like `<FormGroup>` and show save, cancel, and delete actions at the bottom using `Form.Actions` (see below).

<Canvas>
  <Story name="default">
    <Form
      actionDirection={select(
        'actionDirection',
        { left: 'left', right: 'right' },
        'right'
      )}
      cancelText="Cancel Changes"
      destroyText="Delete Item"
      saveText="Save Entry"
      onCancel={() => console.log('cancel')}
      onDestroy={() => console.log('delete')}
    >
      <FormGroup>
        <FormLabel label="Site Name">
          <Input />
        </FormLabel>
      </FormGroup>
    </Form>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Form} />

## Form.Actions

This component is a presentational wrapper used to render action buttons within a `Form`.

### Props

<ArgsTable of={Form.Actions} />

### Example

```jsx
<Form.Actions
  cancel={<Button>Discard Changes</Button>}
  className="Entry Form"
  delete={<Button>Delete</Button>}
  direction="left"
  save={<Button>Save Changes</Button>}
/>
```
