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

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React, { createElement } from 'react';
import cx from 'classnames';

import FittedImage from '../FittedImage/FittedImage';
import VideoWithRichPoster from '../VideoWithRichPoster/VideoWithRichPoster';

import defaultCss from './SquareHero.css';

const SquareHero = (props) => {
  const {
    children,
    image,
    videoProps,
    alt,
    css,
    className,
    level,
    headingSide,
    ...rest
  } = props;

  const rootClass = cx(
    defaultCss.root,
    videoProps ? defaultCss.videoRoot : defaultCss.imageRoot,
    defaultCss[headingSide],
    className
  );

  return (
    <div
      {...rest}
      className={rootClass}
    >
      <div className={cx(defaultCss.mediaContainer, css.image)}>
        { videoProps
          ? <VideoWithRichPoster {...videoProps} className={cx(defaultCss.video, css.video)} />
          : <FittedImage className={defaultCss.image} src={image} alt={alt} />
        }
      </div>
      <div className={cx(defaultCss.square, css.square)}>
        { createElement(
          `h${level}`, {
            className: cx(defaultCss.title),
          }, children
        ) }
      </div>
    </div>
  );
};

SquareHero.propTypes = {
  children: PropTypes.node.isRequired,
  image: (props, propName, descriptiveName, location) => {
    const name = descriptiveName || 'ANONYMOUS';

    if (!props.videoProps) {
      const type = typeof props[propName];
      const expected = 'string';

      if (type !== expected) {
        return new Error(
          `Invalid ${location} \`${propName}\` of type \`${type}\` ` +
          `supplied to \`${name}\`, expected \`${expected}\`.`
        );
      }
    }

    return null;
  },
  alt: PropTypes.string,
  className: PropTypes.string,
  css: PropTypes.shape({
    square: PropTypes.string,
    image: PropTypes.string,
    video: PropTypes.string,
  }),
  level: PropTypes.number,
  headingSide: PropTypes.oneOf(['left', 'right']),
  videoProps: PropTypes.shape({
    videoClassName: PropTypes.string,
    posterClassName: PropTypes.string,
    posterSrc: PropTypes.node.isRequired,
    videoSrc: PropTypes.node.isRequired,
  }),
};

SquareHero.defaultProps = {
  css: {
    square: '',
    image: '',
  },
  level: 1,
  headingSide: 'left',
};

export default SquareHero;