import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { CurrencyInput } from './currency-input.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="CurrencyInput" component={CurrencyInput} />

# Currency Input

- [Form Input Accessibility
  Tips](/?path=/story/components-inputs-accessibility-tips--page)

The CurrencyInput component can be used just like a regular TextInput,
but additionally supports a `currency` prop, and requires numbers for `value` and `placeholder` instead of strings.

## Stories

### Default

<Canvas>
  <Story id="components-inputs-currencyinput--default" />
</Canvas>

### Large

<Canvas>
  <Story id="components-inputs-currencyinput--large" />
</Canvas>

### Without Value

<Canvas>
  <Story id="components-inputs-currencyinput--without-value" />
</Canvas>

### Externally Updated Value

<Canvas>
  <Story id="components-inputs-currencyinput--externally-updated-value" />
</Canvas>

## Supported Property Mixins

Margin-only spacing:

<Canvas>
  <Story id="components-inputs-currencyinput--mixins-margin-only-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-inputs-currencyinput--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={CurrencyInput} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A66"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/forms/currency-input"
  type="github"
/>
