@appearhere/bloom/components/Modal/WithCross.js

Appear Here's pattern library and styleguide

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

import Window from './Window';
import m from '../../globals/modifiers.css';
import noop from '../../utils/noop';
import css from './WithCross.css';
import Icon from '../Icon/Icon';
import BtnContainer from '../BtnContainer/BtnContainer';


/**
 * TODO: Figure out react-motion compatible focus trap
 */
class WindowWithCross extends Component {
  static propTypes = {
    children: PropTypes.node,
    onClose: PropTypes.func,
    variant: PropTypes.oneOf(['light', 'dark']),
  };

  static defaultProps = {
    onClose: noop,
    variant: 'light',
  };

  render() {
    const {
      children,
      onClose,
      variant,
      ...rest,
    } = this.props;

    return (
      <Window
        { ...rest }
        variant={ variant }
      >
        <BtnContainer className={ css.dismissContainer } onClick={ onClose }>
          <Icon className={ css.icon } name="cross" />
        </BtnContainer>
        <div className={ cx(css.inner, m.cf) }>
          { children }
        </div>
      </Window>
    );
  }
}

export default WindowWithCross;