import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { CurrencyFormatter } from './currency-formatter.component';

<Meta
  title="Components/Typography/CurrencyFormatter"
  component={CurrencyFormatter}
/>

# CurrencyFormatter

The currency formatting component uses React International `<FormattedNumber />` under the hood.
It has some defaults in place but these can be overridden.

Please see the [React International docs](https://formatjs.io/guides/message-syntax/#number-type) for details.

## Normal

<Canvas>
  <Story id="components-typography-currencyformatter--normal" />
</Canvas>

## Zero Decimal Places

<Canvas>
  <Story id="components-typography-currencyformatter--round-to-whole" />
</Canvas>

## Plus Icon Added If Positive

<Canvas>
  <Story id="components-typography-currencyformatter--plus-sign-if-positive" />
</Canvas>

## Plus Icon But Negative Value

<Canvas>
  <Story id="components-typography-currencyformatter--plus-sign-but-value-is-negative" />
</Canvas>