@appearhere/bloom/components/Hero/Hero.story.js

Appear Here's pattern library and styleguide

import React from 'react';
import { storiesOf } from '@storybook/react';
import classnames from 'classnames';

import Hero from './Hero';
import SquareHero from './SquareHero';
import m from '../../globals/modifiers.css';

storiesOf('Hero', module)
  .add('Default', () => {
    const headingClasses = classnames(m.fontLgIv, m.fgWhite, m.uppercase, m.wideSpacing);

    const paraClasses = classnames(m.fontRegular, m.fgWhite);

    return (
      <Hero
        className={m.bgBlack}
        backgroundImage="https://unsplash.it/1600/1201"
        caption="A random image from unsplash"
      >
        <h1 className={headingClasses}>List a space, host an idea</h1>
        <p className={paraClasses}>
          Join the world’s leading online marketplace for short-term space.
        </p>
      </Hero>
    );
  })
  .add('Animated', () => {
    const headingClasses = classnames(m.fontLgIv, m.fgWhite, m.uppercase, m.wideSpacing);

    const paraClasses = classnames(m.fontRegular, m.fgWhite);

    return (
      <Hero
        className={m.bgBlack}
        backgroundImage="https://source.unsplash.com/random/1200x800"
        caption="A random image from unsplash"
        animate
      >
        <h1 className={headingClasses}>List a space, host an idea</h1>
        <p className={paraClasses}>
          Join the world’s leading online marketplace for short-term space.
        </p>
      </Hero>
    );
  })
  .add('<SquareHero />', () => (
    <SquareHero image="https://source.unsplash.com/random/1200x800" alt="">
      Curators, makers, rule breakers. Questioners & forward thinkers
    </SquareHero>
  ));