import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { ContainerUI } from './EditableField.storiesHelpers'
import EditableField from '.'
import { EditableFieldComposite } from './'

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

# EditableFieldComposite

This component allows the grouping and in-lining of multiple single value Editable Fields.

`EditableFieldComposite` is in essence a Higher Order Component that decorates its children to enable grouping them.

<Canvas>
  <Story name="EditableField Composite">
    <ContainerUI>
      <EditableFieldComposite placeholder="Add a name">
        <EditableField
          label="First Name"
          name="first_name"
          type="text"
          placeholder="First Name"
          value="Johnny"
        />
        <EditableField
          label="Last Name"
          name="last_name"
          type="text"
          placeholder="Last Name"
          value="Cash"
        />
      </EditableFieldComposite>
    </ContainerUI>
  </Story>
</Canvas>

#### Reference

- **Designer**: Jared
- **Engineering**: Juan Pablo
- **Usage**: Customer properties/profile

<br />
<br />

### Props

<ArgsTable of={EditableFieldComposite} />

### Stories

#### EditableField Composite empty

<Canvas>
  <Story name="EditableField Composite empty">
    <ContainerUI>
      <EditableFieldComposite placeholder="Add a pet">
        <EditableField
          label="Animal"
          name="animal"
          type="text"
          placeholder="Animal"
        />
        <EditableField
          label="Name"
          name="name"
          type="text"
          placeholder="name"
        />
      </EditableFieldComposite>
    </ContainerUI>
  </Story>
</Canvas>

#### EditableField Composite large

<Canvas>
  <Story name="EditableField Composite large">
    <ContainerUI>
      <EditableFieldComposite placeholder="Add a name" size="lg">
        <EditableField
          label="First Name"
          name="first_name"
          type="text"
          placeholder="First Name"
          value="Johnny"
          onInputFocus={() => {
            console.log('execute!')
          }}
        />
        <EditableField
          label="Last Name"
          name="last_name"
          type="text"
          placeholder="Last Name"
          value="Cash"
        />
      </EditableFieldComposite>
    </ContainerUI>
  </Story>
</Canvas>
