import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, select, text } from '@storybook/addon-knobs'
import HelpText from './'

<Meta title="Components/Text/HelpText" component={HelpText} />

# HelpText

A HelpText component is a light-weight text wrapper enhanced with a collection of aesthetic modifiers. HelpText is typically used with form elements / components.

<Canvas>
  <Story name="default">
    <HelpText
      shade={select(
        'Shade',
        {
          default: 'default',
          subtle: 'subtle',
          slightlyMuted: 'slightlyMuted',
          muted: 'muted',
          faint: 'faint',
          extraMuted: 'extraMuted',
        },
        'default'
      )}
      size={select(
        'Size',
        {
          10: '10',
          11: '11',
          12: '12',
          13: '13',
          14: '14',
          15: '15',
          20: '20',
          48: '48',
        },
        '13'
      )}
      state={select(
        'State',
        {
          default: '',
          error: 'error',
          success: 'success',
          warning: 'warning',
        },
        ''
      )}
      isCompact={boolean('isCompact', false)}
    >
      I am help text. Behold my text.
    </HelpText>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: HSDS (multiple components), HsApp (beacon, saved replies)

<br />
<br />

### Props

<ArgsTable of={HelpText} />
