Add onClick prop to destination listing cards

appearhere · Mar 31, 2017 · 0b00814 · 0b00814
1 parent 363600b
commit 0b00814
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/components/Cards/Cards.story.js b/components/Cards/Cards.story.js
@@ -135,6 +135,33 @@ storiesOf('Cards', module)
       href="#"
     />
   ))
+  .add('PlaceListingCard with onClick', () => (
+    <PlaceListingCard
+      price="$10,000,000"
+      priceUnit="/day"
+      priceFromLabel="from"
+      location="Shoreditch, London"
+      size="1000 sqft"
+      name="BOXPARK"
+      images={
+        [{
+          src: 'https://source.unsplash.com/random/500x500',
+          alt: 'hello',
+        }, {
+          src: 'https://source.unsplash.com/random/500x503',
+          alt: 'hello2',
+        }, {
+          src: 'https://source.unsplash.com/random/500x502',
+          alt: 'hello',
+        }, {
+          src: 'https://source.unsplash.com/random/500x501',
+          alt: 'hello2',
+        }]
+      }
+      spaceDetail="2 available spaces"
+      onClick={ action('place click') }
+    />
+  ))
   .add('EditorialCard', () => (
     <EditorialCard
       title="Mulberry Street"

diff --git a/components/Cards/DestinationListingCard/DestinationListingCard.js b/components/Cards/DestinationListingCard/DestinationListingCard.js
@@ -29,6 +29,7 @@ export default class DestinationListingCard extends Component {
     accessibilityPrevLabel: PropTypes.string,
     carouselOverlay: PropTypes.node,
     information: PropTypes.array,
+    onClick: PropTypes.func,
   };
 
   static defaultProps = {
@@ -79,6 +80,7 @@ export default class DestinationListingCard extends Component {
       carouselClassName,
       carouselOverlay,
       information,
+      onClick,
     } = this.props;
 
     return (
@@ -109,7 +111,7 @@ export default class DestinationListingCard extends Component {
               dragging={ false }
             >
               { images.map(({ src, alt }) => (
-                <a href={ href } key={ src }>
+                <a href={ href } key={ src } onClick={ onClick }>
                   <FittedImage
                     className={ css.image }
                     src={ src }
@@ -120,7 +122,7 @@ export default class DestinationListingCard extends Component {
             </Carousel>
           </div>
         </div>
-        <a href={ href } className={ cx(css.body, bodyClassName) }>
+        <a href={ href } className={ cx(css.body, bodyClassName) } onClick={ onClick }>
           <div className={ css.name }>
             { priceFromLabel && <span className={ css.priceFromLabel }>{ priceFromLabel }</span> }
             <span className={ css.price }>{ price }</span>