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

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

# HelpText

The `HelpText` is intended to be used as the help or error text under a form element

<Canvas>
  <Story id="ui-components-component-library-help-text-help-text-stories-js--default-story" />
</Canvas>

## Props

The `HelpText` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.

<ArgsTable of={HelpText} />

### Children

The `children` of the `HelpText` can be plain text or react nodes.

<Canvas>
  <Story id="ui-components-component-library-help-text-help-text-stories-js--children" />
</Canvas>

```jsx
import { SIZES, COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { HelpText } from '../../ui/components/component-library';

<HelpText>Plain text</HelpText>
<HelpText>
  Text and icon
  <Icon
    marginLeft={1}
    color={COLORS.INHERIT}
    name={ICON_NAMES.WARNING_FILLED}
    size={SIZES.AUTO}
  />
</HelpText>
```

### Error

Use the `error` prop to show the `HelpText` in error state.

<Canvas>
  <Story id="ui-components-component-library-help-text-help-text-stories-js--error-story" />
</Canvas>

```jsx
import { HelpText } from '../../ui/components/component-library';

<HelpText error>This HelpText in error state</HelpText>;
```

### Color

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

<Canvas>
  <Story id="ui-components-component-library-help-text-help-text-stories-js--color" />
</Canvas>

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

<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
  <HelpText color={COLORS.TEXT_DEFAULT}>
    The HelpText default color is COLORS.TEXT_DEFAULT
  </HelpText>
  <HelpText color={COLORS.INFO_DEFAULT}>
    This HelpText color is COLORS.INFO_DEFAULT
  </HelpText>
  <HelpText color={COLORS.WARNING_DEFAULT}>
    This HelpText color is COLORS.WARNING_DEFAULT
  </HelpText>
  <HelpText color={COLORS.SUCCESS_DEFAULT}>
    This HelpText color is COLORS.SUCCESS_DEFAULT
  </HelpText>
</Box>;
```