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

<Meta title="Content/Blockquote" component={Blockquote} />

# Blockquote

A stylized blockquote that accentuates a quote from a larger body of text. Renders an HTML `<blockquote>` tag.

## Usage guidelines

- **Do not** use the `Blockquote` component if the text is not a direct quote from a person or source material.
- **Do** include the citation in the body of blockquote whenever possible

## Props

<Props of={Blockquote} />

## Stories

### Default

<Canvas>
	<Story
		args={{
			children: <><p>The subscription to Quartz was probably my best investment of 2019. Your journalism is one of a kind, local on a global scale, actual and never boring.</p><p>— Davide M., Director of Product Development</p></>
		}}
		name="Default"
	>
		{args => (
			<div style={{
				fontSize: '20px',
			}}>
				<Blockquote {...args} />
			</div>
		)}
	</Story>
</Canvas>