Figure.stories.jsx

import React from 'react';
import { storiesOf } from '@storybook/react';
import withPaidPostArticle from '../../../../../.storybook/withPaidPostArticle';
import withPlacement from '../../../../../.storybook/withPlacement';

import Figure from '../Figure';
import { paragraphs as lipsum } from '../../../../utils/placeholders/lorem-ipsum.json';
import breakpoints from '../../../../utils/layout/breakpoints.json';

const srcObj = {
  [breakpoints.compact]: 'http://placehold.it/480x480',
  [breakpoints.regular]: 'http://placehold.it/1152x1152',
};

const testProps = {
  title: 'Test Title',
  subtitle: 'Test Subtitle',
  caption: 'This is a caption for a figure.',
  credit: 'Larry Ipsum',
  src: srcObj,
};

storiesOf('Figure', module)
  .addDecorator(withPlacement())
  .addDecorator(withPaidPostArticle())
  .add('with all props (story)', () => (
    <Figure
      src={testProps.src}
      title={<span>An <em>Expressive</em> Figure Title</span>}
      subtitle="Introduce the Figure or Offer a Call to Action"
      caption={`${lipsum[3].substr(0, 180)}.`}
      credit="Larry Ipsum"
      center
      circle
    />
  ))
  .add('with a Picture (story)', () => (
    <Figure src={testProps.src} title={<span>An <em>Expressive</em> Figure Title</span>} />
  ));

withPaidPostArticle and withPlacement each wrap the component in wrapper components. Each decorator also uses @storybook/addon-knobs.