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

import { Text } from '..';

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="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

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

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

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

<HelpText>Plain text</HelpText>
<HelpText>
  Text and icon
      <Icon
        marginLeft={1}
        color={IconColor.inherit}
        name={ICON_NAMES.WARNING}
        size={Size.inherit}
      />
</HelpText>
```

### Error

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

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

```jsx
import { HelpText } from '../../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 `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';

<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
  <HelpText color={Color.textDefault} {...args}>
    This HelpText default color is Color.textDefault
  </HelpText>
  <HelpText color={Color.infoDefault} {...args}>
    This HelpText color is Color.infoDefault
  </HelpText>
  <HelpText color={Color.warningDefault} {...args}>
    This HelpText color is Color.warningDefault
  </HelpText>
  <HelpText color={Color.successDefault} {...args}>
    This HelpText color is Color.successDefault
  </HelpText>
</Box>;
```