@appearhere/bloom/components/Moment/Moment.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';

import Wrapper from '../Wrapper/Wrapper';

import css from './Moment.css';
import Icon from '../Icon/Icon';

const Moment = ({ icon, title, children, className }) => (
  <Wrapper className={ cx(css.root, className) }>
    <div className={ css.inner }>
      <div className={ css.header }>
        <Icon name={ icon } className={ css.icon } />
        <div className={ css.title }>{ title }</div>
      </div>
      <div className={ css.body }>
        { children }
      </div>
    </div>
  </Wrapper>
);

Moment.propTypes = {
  icon: PropTypes.string,
  title: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
};

Moment.defaultProps = {
  icon: 'tick-c',
};

export default Moment;