import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs';
import FormLabel from '../FormLabel';

<Meta
  title="Components/Forms/FormLabel"
  component={FormLabel}
  argTypes={{
    component: {
      name: 'component',
      description:
        'The component used for the root node. Either a string to use a HTML element or a component.',
      table: {
        type: {
          summary: 'elementType',
        },
        defaultValue: { summary: 'label' },
      },
      control: { type: null },
    },
    disabled: {
      name: 'disabled',
      description:
        'If true, the label should be displayed in a disabled state.',
      table: {
        type: {
          summary: 'true | false',
        },
        defaultValue: { summary: false },
      },
      control: {
        type: null,
      },
    },
  }}
/>

# FormLabel API

The API documentation of the FormLabel React component. Learn more about the props and the CSS customization points.

## Usage

<Canvas withSource="open">
  <Story name="usage">
    <FormLabel>Label Here!</FormLabel>
  </Story>
</Canvas>

## Props

<ArgsTable story="Usage" of="." />

## CSS

| Global class              | Description                                            |
| ------------------------- | ------------------------------------------------------ |
| .ods-form-label           | Styles applied to the root element.                    |
| .ods-form-label--disabled | Styles applied to the root element if disabled={true}. |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/FormLabel/FormLabel.tsx) for more detail.
