import React, { PropTypes } from 'react';

import css from './CondensedSpaceCard.css';

import LeftRight from '../../LeftRight/LeftRight';
import FittedImage from '../../FittedImage/FittedImage';

const CondensedSpaceCard = (props) => {
  const {
    href,
    images,
    name,
    price,
    priceFromLabel,
    priceUnit,
  } = props;

  /* eslint-disable react/jsx-no-target-blank */
  return (
    <a
      href={ href }
      className={ css.root }
      title={ name }
      target="_blank"
    >
      <LeftRight
        primarySide="left"
        leftChildren={
          images.length > 0 && (
            <FittedImage
              className={ css.image }
              src={ images[0].src }
              alt={ images[0].alt }
            />
          )
        }
        rightChildren={
          <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>
        }
      />
    </a>
  );
  /* eslint-enable react/jsx-no-target-blank */
};

CondensedSpaceCard.propTypes = {
  href: PropTypes.string,
  images: PropTypes.array,
  name: PropTypes.string,
  price: PropTypes.string,
  priceFromLabel: PropTypes.string,
  priceUnit: PropTypes.string,
};

CondensedSpaceCard.defaultProps = {
  images: [],
};

export default CondensedSpaceCard;

@@ -34,16 +34,45 @@
 'react';
+%0Aimport cx from 'classnames';
 %0A%0Aimport
@@ -347,16 +347,31 @@
 ceUnit,%0A
+    className,%0A
   %7D = pr
@@ -485,16 +485,19 @@
 e=%7B 
+cx(
 css.root
  %7D%0A 
@@ -492,16 +492,28 @@
 css.root
+, className)
  %7D%0A     
@@ -1501,24 +1501,55 @@
 pes.string,%0A
+  className: PropTypes.string,%0A
   priceFromL

Allow passing of className prop to CondensedSpaceCard