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

<Meta title="Atoms/Pricing" component={Pricing} />

# Pricing
<br />

## `Pricings` allows diferent ways of displaying prices.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Pricing price={45.11} caption="Starting At" frequency="Year" symbol="$" />
    </Story>
</Canvas>

### Formatted Price
<Canvas>
    <Story name="Formatted price">
        <Pricing formattedPrice="$19.00" />
    </Story>
</Canvas>

### With emphasis
<Canvas>
    <Story name="With emphasis">
        <Pricing price={124.22} caption="From" frequency="Month" symbol="$" isEmphasis />
    </Story>
</Canvas>

### With unit
<Canvas>
    <Story name="With unit">
        <Pricing price={50.25} unit="user" frequency="month" symbol="$" isEmphasis />
    </Story>
</Canvas>

### Multiple lines
<Canvas>
    <Story name="Multiple lines">
        <div style={{ display: 'flex' }}>
            <div style={{ flexGrow: 1 }}>
                <span style={{ display: 'block', fontWeight: 700, marginBottom: '40px' }}>Align Left</span>
                <Pricing price={56.21} caption="From" symbol="$" frequency="Month" isEmphasis isMultipleLine />
            </div>
            <div>
                <span style={{ display: 'block', fontWeight: 700, marginBottom: '40px', textAlign: 'right' }}>Align Right</span>
                <Pricing price={326.92} caption="Starting At" symbol="$" frequency="Year" align="right" isEmphasis isMultipleLine />
            </div>
        </div>
    </Story>
</Canvas>

### Uppercase first letter
<Canvas>
    <Story name="Uppercase first letter">
        <Pricing price={50.25} unit="USER" frequency="MONTH" symbol="$" uppercaseFirstLetter />
    </Story>
</Canvas>

## Usage Example
```jsx
import Pricing from '@appdirect/sfb-theme-components/src/atoms/pricing/Pricing';

<Pricing price={45.11} caption="Starting At" frequency="Year" symbol="$" />
```

## Props
<ArgsTable of={Pricing} />
