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

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

# ArticleStrip

A summary of a Quartz article, typically used when linking to that article in a list, e.g., [Latest](https://qz.com/latest/), or when featuring an article, e.g., 'Read this next' on article pages.

## Usage guidelines

- **Do** use the ArticleStrip component to feature key information about an article when linking to it.
- **Do** nest each ArticleStrip inside a link (`<a>`) and list item (`<li>`) element when displaying a list of article links.

## Props

<Canvas>
	<Story
		args={{
			dateGmt: '2020-10-22T15:00:42',
			kicker: 'Lessons from language',
			thumbnailUrl: 'https://cms.qz.com/wp-content/uploads/2020/10/2020-10-07T071126Z_1691387157_RC2JDJ9CKQYM_RTRMADP_3_HEALTH-CORONAVIRUS-ITALY-GRANDAD-e1603314985764.jpg',
			title: 'IBM scientists hope to detect early signs of dementia using AI',
		}}
		name="Default"
	>
		{args => <ArticleStrip {...args} />}
	</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Small

<Canvas>
	<Story
		args={{
			dateGmt: '2020-10-22T02:31:44',
			edition: 'Quartz India',
			kicker: 'Gaming the space',
			size: 'small',
			thumbnailUrl: 'https://cms.qz.com/wp-content/uploads/2020/10/2009-05-23T120000Z_838732280_GM1E55O084W01_RTRMADP_3_CRICKET-IPL-e1602590703187.jpg',
			title: 'Flush with cash, India’s sports fantasy startups are gaining ground',
		}}
		name="Small"
	>
		{args => <ArticleStrip {...args} />}
	</Story>
</Canvas>

### Extra large

<Canvas>
	<Story
		args={{
			dateGmt: '2020-10-17T08:00:37',
			edition: 'Quartz Africa',
			kicker: 'South Africa replugged',
			size: 'extra-large',
			thumbnailUrl: 'https://cms.qz.com/wp-content/uploads/2020/10/2020-10-08T165034Z_848144848_RC2GEJ9SA1SA_RTRMADP_3_MINING-JHB-INDABA-ESKOM-e1602880878339.jpg',
			title: 'South Africa’s unusual electrical plugs and sockets are headed for retirement',
		}}
		name="XL"
	>
		{args => <ArticleStrip {...args} />}
	</Story>
</Canvas>

### Sponsor content (a.k.a. bulletin)

<Canvas>
	<Story
		args={{
			size: 'extra-large',
			sponsor: 'Citrix',
			thumbnailUrl: 'https://cms.qz.com/wp-content/uploads/2018/11/Citrix_AB1-Twitter-B.png',
			title: 'A renowned psychologist discusses the causes of FOMO in this audio interactive',
		}}
		name="Bulletin"
	>
		{args => <ArticleStrip {...args} />}
	</Story>
</Canvas>
