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 + icon before
<Canvas>
    <Story name="With + icon before">
        <Pricing price={34.76} prefixIcon="plus" symbol="$" frequency="Year" isEmphasis />
    </Story>
</Canvas>

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

### With limit label
<Canvas>
    <Story name="With limit label">
        <Pricing price={50.25} unit="user" frequency="month" symbol="$" limitLabel="For 1 User And Above" isEmphasis />
    </Story>
</Canvas>

### Multiple lines
<Canvas>
    <Story name="Multiple lines">
        <Pricing price={56.21} caption="From" symbol="$" frequency="Month" isEmphasis isMultipleLine />
    </Story>
</Canvas>

### Multiple lines and align right
<Canvas>
    <Story name="Multiple lines and align right">
        <Pricing price={326.92} caption="Starting At" symbol="$" frequency="Year" align="right" isEmphasis isMultipleLine />
    </Story>
</Canvas>

### Complex
<Canvas>
    <Story name="Complex">
        <Pricing
            price={326.92}
            prefixIcon="plus"
            caption="Starting At"
            frequency="Year"
            symbol="$"
            unit="User"
            limitLabel="For 1 User And Above"
            isEmphasis
            isMultipleLine
        />
    </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} />
