import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

import Label from '.';
import Field from '../Field';
import FancyLabel from './docs.examples';
import ExampleForm from '../../../docs/ExampleForm';

<Meta title="Components|Label" component={Label} />

# Label

<Props of={Label} />

The `Label` will automatically connect the `htmlFor` attribute to a matching field
at this level in the form. If you have manually specified an ID on a field, this
component will not work, as it expects that IDs are handled by Freeform.

<Preview>
  <Story name="default">
    <ExampleForm defaultValues={{ myField: 'Hello world' }}>
      <Label htmlFor="myField">My Field's Label</Label>
      <Field name="myField" />
    </ExampleForm>
  </Story>
</Preview>

You can pass in a `component` property to render a different base element than `<label>`

```jsx
const FancyLabel = props => (
  <label {...props}><div style={{ border: '1px dotted' }}>{props.children}</div></label>
);
```

<Preview>
  <Story name="component">
    <ExampleForm defaultValues={{ myField: 'Hello world' }}>
      <Label htmlFor="myField" component={FancyLabel}>My Field's Label</Label>
      <Field name="myField" />
    </ExampleForm>
  </Story>
</Preview>

Properties other than component and htmlFor will be passed to the underlying component.

<Preview>
  <Story name="passthru">
    <ExampleForm defaultValues={{ myField: 'Hello world' }}>
      <Label htmlFor="myField" style={{ background: '#ccc', paddingRight: '20px' }}>My Field's Label</Label>
      <Field name="myField" />
    </ExampleForm>
  </Story>
</Preview>
