import Info from '../info';
import { Label } from './Label';

export default {
  component: Label,
  title: 'Forms/Label',
};

export const Basic = () => {
  return (
    <>
      <p>
        Avoid using <code>Label</code> component directly (unless for some custom use cases), for
        form control labels and descriptions / info messages, please use <code>Field</code>{' '}
        component
        <pre>{'<Field label={..} description={..} required={..}>'}</pre>
      </p>
      <Label className="m-b-2">Text Input</Label>
      <Label className="m-b-2">
        <Label.Optional>Text Input</Label.Optional>
      </Label>
      <Label>
        <Label.Optional>Text Input with Description</Label.Optional>
      </Label>
      <Label.Description className="m-b-2">This a field Description</Label.Description>
      <Label>
        <div>
          Text Input with Description{' '}
          <Info content="This is some help in popover" aria-label="The aria label" />
        </div>
      </Label>
      <Label.Description className="m-b-2">This a field Description</Label.Description>
      <Label>
        <Label.Optional>
          Text Input with Description{' '}
          <Info content="This is some help in popover" aria-label="The aria label" />{' '}
        </Label.Optional>
      </Label>
      <Label.Description className="m-b-2">This a field Description</Label.Description>
    </>
  );
};