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

import { Text } from '..';

import { HelpText } from './help-text';

# HelpText

The `HelpText` is used as feedback text under a form field including error, success, warning or info messages

<Canvas>
  <Story id="components-componentlibrary-helptext--default-story" />
</Canvas>

## Props

The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props

<ArgsTable of={HelpText} />

`HelpText` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props

<ArgsTable of={Text} />

### Children

`HelpText` renders as a `<p>` tag if the child is a `string` or a `<div>` if the child is an `object`.

```jsx
import { Size, IconColor } from '../../../helpers/constants/design-system';
import { HelpText, Icon, ICON_NAMES } from '../../component-library';

<HelpText>Plain text</HelpText> // renders as <p>Plain text</p>
<HelpText>
  <span>Text and icon</span>
  <Icon
    marginLeft={1}
    color={IconColor.iconAlternative}
    name={ICON_NAMES.WARNING}
    size={Size.inherit}
  />
</HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div>
```

### Severity

Use the `severity` prop and `SEVERITIES` object to change the severity of the `HelpText`

<Canvas>
  <Story id="components-componentlibrary-helptext--severity-story" />
</Canvas>

```jsx
import { SEVERITIES } from '../../../helpers/constants/design-system';
import { HelpText } from '../../component-library';

<HelpText>HelpText without severity prop</HelpText>
<HelpText severity={SEVERITIES.DANGER}>
  HelpText with severity: SEVERITY.DANGER
</HelpText>
<HelpText severity={SEVERITIES.SUCCESS}>
  HelpText with severity: SEVERITY.SUCCESS
</HelpText>
<HelpText severity={SEVERITIES.WARNING}>
  HelpText with severity: SEVERITY.WARNING
</HelpText>
<HelpText severity={SEVERITIES.INFO}>
  HelpText with severity: SEVERITY.INFO
</HelpText>
```

### Color

It may be useful to change the color of the `HelpText`. Use the `color` prop and the `Color` object to change the color of the `HelpText`. Defaults to `Color.textDefault`.

<Canvas>
  <Story id="components-componentlibrary-helptext--color-story" />
</Canvas>

```jsx
import { Color } from '../../../helpers/constants/design-system';
import { HelpText } from '../../component-library';

<HelpText color={TextColor.textDefault}>
  This HelpText default color is TextColor.textDefault
</HelpText>
<HelpText color={TextColor.textAlternative}>
  This HelpText color is TextColor.textAlternative
</HelpText>
<HelpText color={TextColor.textMuted}>
  This HelpText color is TextColor.textMuted
</HelpText>
```