import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductFeaturedQuotes from '../ProductFeaturedQuotes';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { reviewsMock } from '../../../../mocks/product/reviews';
import { LAYOUT_HORIZONTAL } from '../../../constants/layouts';
import * as ProductFeaturedQuotesStories from './ProductFeaturedQuotes.stories';

<Meta of={ProductFeaturedQuotesStories} />

# ProductFeaturedQuotes

<br />

## `ProductFeaturedQuotes` are used to display featured quotes about a product.

<br />

### Default

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

### Horizontal

<Canvas>
  <Story of={ProductFeaturedQuotesStories.Horizontal} />
</Canvas>

### Custom logo size

<Canvas>
  <Story of={ProductFeaturedQuotesStories.CustomLogoSize} />
</Canvas>

### Custom logo spacing

<Canvas>
  <Story of={ProductFeaturedQuotesStories.CustomLogoSpacing} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="reviewsData" code={reviewsMock} />

```jsx
import ProductFeaturedQuotes
from '@appdirect/sfb-theme-components/src/components/product-featured-quotes/ProductFeaturedQuotes';

<ProductFeaturedQuotes data={reviewsData} />

```

## Props

<ArgsTable of={ProductFeaturedQuotes} />
