import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Pricing from '../Pricing';
import * as PricingStories from './Pricing.stories';

<Meta of={PricingStories} />

# Pricing

<br />

## `Pricings` allows diferent ways of displaying prices.

<br />

### Default

<Canvas>
  <Story of={PricingStories.Default} />
</Canvas>

### Formatted Price

<Canvas>
  <Story of={PricingStories.FormattedPrice} />
</Canvas>

### With emphasis

<Canvas>
  <Story of={PricingStories.WithEmphasis} />
</Canvas>

### With unit

<Canvas>
  <Story of={PricingStories.WithUnit} />
</Canvas>

### Multiple lines

<Canvas>
  <Story of={PricingStories.MultipleLines} />
</Canvas>

### Uppercase first letter

<Canvas>
  <Story of={PricingStories.UppercaseFirstLetter} />
</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} />
