import { Meta, Props } from '@storybook/addon-docs/blocks'
import ConditionField from './'
import { ConditionFieldAddButton } from './ConditionField.AddButton'
import ConditionFieldGroup from './ConditionField.Group'
import ConditionFieldOr from './ConditionField.Or'
import ConditionFieldStatic from './ConditionField.Static'

<Meta
  title="Utilities/UI Convenience/Condition Blocks/ConditionField"
  component={ConditionField}
/>

# ConditionField

A ConditionField is a single item that renders within a `Condition`.

### Props

<ArgsTable of={ConditionField} />

## ConditionField.Group

A ConditionField.Group contains children ConditionField components, and automatically renders a [Condition.Operator](../Condition) between each ConditionField.

### Props

<ArgsTable of={ConditionFieldGroup} />

## Condition.Static

A ConditionField.Static is used to render text next to components like [Inputs](../Input) or [Selects](../Select). This component is an enhanced variant of [Input.Static](../Input).

### Props

<ArgsTable of={ConditionFieldStatic} />

## ConditionField.AddButton

A ConditionField.AddButton renders an "And" or "Or" interface. It is an action used to add [Conditions](../Condition) or ConditionFields. This component is used internally by [Conditions](../Condition) and ConditionFields.

### Props

<ArgsTable of={ConditionFieldAddButton} />
