@appearhere/bloom/components/Cards/PlaceListingCard/PlaceListingCard.js

Appear Here's pattern library and styleguide

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

import PictureCard from '../PictureCard/PictureCard';

import css from './PlaceListingCard.css';

const PlaceListingCard = (props) => {
  const {
    imageSrc,
    href,
    priceFromLabel,
    price,
    priceUnit,
    name,
    location,
    spaceDetail,
    onClick,
    className,
    ...rest,
  } = props;

  const hasCompleteInfo = location && spaceDetail;

  return (
    <PictureCard
      { ...rest }
      href={ href }
      onClick={ onClick }
      className={ cx(css.root, className) }
      src={ imageSrc }
      overlayClassName={ css.overlay }
    >
      <div className={ css.body }>
        <div className={ css.name }>
          { priceFromLabel && <span className={ css.priceFromLabel }>{ priceFromLabel }</span> }
          <span className={ css.price }>{ price }</span>
          { '\u00a0' }
          <span className={ css.priceUnit }>{ priceUnit }</span>
        </div>
        <div className={ css.name }>{ name }</div>
        <div className={ css.additionalInformationBlock }>
          <span
            className={ css.additionalInformationItem }
            style={ {
              maxWidth: hasCompleteInfo ? 'calc(50% - 1rem)' : '100%',
            } }
          >
            { location }
          </span>
          { hasCompleteInfo ? <span className={ css.spacer }>•</span> : null }
          <span
            className={ css.additionalInformationItem }
            style={ {
              maxWidth: hasCompleteInfo ? 'calc(50% - 1rem)' : '100%',
            } }
          >
            { spaceDetail }
          </span>
        </div>
      </div>
    </PictureCard>
  );
};

PlaceListingCard.propTypes = {
  imageSrc: PropTypes.string.isRequired,
  href: PropTypes.string,
  priceFromLabel: PropTypes.string,
  className: PropTypes.string,
  price: PropTypes.node,
  priceUnit: PropTypes.node,
  name: PropTypes.node,
  location: PropTypes.node,
  spaceDetail: PropTypes.node,
  onClick: PropTypes.func,
};

PlaceListingCard.defaultProps = {
  priceFromLabel: 'from',
};

export default PlaceListingCard;