Add flexible footer container to <DestinationListingCard />

Destination listing card now accepts children, allowing the addition of actions and other information to them
appearhere · Sep 1, 2017 · 7036739 · 7036739
1 parent 459ee4d
commit 7036739
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 47 deletions.
diff --git a/components/Cards/Cards.story.js b/components/Cards/Cards.story.js
@@ -136,6 +136,33 @@ storiesOf('Cards', module)
       href="#"
     />
   ))
+  .add('SpaceListingCard with additional actions', () => (
+    <SpaceListingCard
+      price="$10,000,000"
+      priceUnit="/day"
+      location="Shoreditch, London"
+      size="1000 sqft"
+      name="Bold Street Shop"
+      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',
+        }]
+      }
+      href="#"
+    >
+      <button>Save space</button>
+    </SpaceListingCard>
+  ))
   .add('CondensedSpaceCard', () => (
     <CondensedSpaceCard
       price="$10,000,000"

diff --git a/components/Cards/DestinationListingCard/DestinationListingCard.css b/components/Cards/DestinationListingCard/DestinationListingCard.css
@@ -115,7 +115,7 @@
 }
 
 .body {
-  padding: var(--size-medium);
+  padding: var(--size-regular);
   display: block;
   background-color: var(--color-white);
   color: var(--color-greyDarker);
@@ -127,6 +127,15 @@
   overflow: hidden;
 }
 
+.footer {
+  margin-top: var(--size-regular);
+}
+
+.bodyLink {
+  text-decoration: none;
+  color: var(--color-greyDarker);
+}
+
 .title {
   display: flex;
   justify-content: space-between;

diff --git a/components/Cards/DestinationListingCard/DestinationListingCard.js b/components/Cards/DestinationListingCard/DestinationListingCard.js
@@ -32,6 +32,7 @@ export default class DestinationListingCard extends Component {
     information: PropTypes.array,
     onClick: PropTypes.func,
     fixedHeight: PropTypes.bool,
+    children: PropTypes.node,
   };
 
   static defaultProps = {
@@ -86,6 +87,7 @@ export default class DestinationListingCard extends Component {
       information,
       onClick,
       fixedHeight,
+      children,
       ...rest,
     } = this.props;
 
@@ -135,54 +137,61 @@ export default class DestinationListingCard extends Component {
             </Carousel>
           </div>
         </div>
-        <a href={ href } className={ cx(css.body, bodyClassName) } onClick={ onClick }>
-          <div className={ css.title }>
-            <div className={ css.priceContainer }>
-              { priceFromLabel &&
-                <span className={ css.priceFromLabel }>
-                  { priceFromLabel }
-                </span> }
-              <span className={ css.price }>
-                { price }
-              </span>
-              { '\u00a0' }
-              <span className={ css.priceUnit }>
-                { priceUnit }
-              </span>
+        <div className={ cx(css.body, bodyClassName) }>
+          <a href={ href } onClick={ onClick } className={ css.bodyLink }>
+            <div className={ css.title }>
+              <div className={ css.priceContainer }>
+                { priceFromLabel &&
+                  <span className={ css.priceFromLabel }>
+                    { priceFromLabel }
+                  </span> }
+                <span className={ css.price }>
+                  { price }
+                </span>
+                { '\u00a0' }
+                <span className={ css.priceUnit }>
+                  { priceUnit }
+                </span>
+              </div>
+              { badge }
             </div>
-            { badge }
-          </div>
-          <div className={ css.name }>{ name }</div>
-          <div className={ css.additionalInformationBlock }>
-            {
-              information
-                .filter(info => info)
-                .map(info => <span>{ info }</span>)
-                .reduce((accu, elem, i, arr) => {
-                  const wrappedEl = (
-                    <span
-                      key={ `info-${i}` }
-                      className={ css.additionalInformationItem }
-                      style={ {
-                        maxWidth: `calc(${100 / arr.length}% - 1rem)`,
-                      } }
-                    >
-                      { elem }
-                    </span>
-                  );
-                  const spacer = (
-                    <span key={ `info-spacer-${i}` } className={ css.spacer }>•</span>
-                  );
+            <div className={ css.name }>{ name }</div>
+            <div className={ css.additionalInformationBlock }>
+              {
+                information
+                  .filter(info => info)
+                  .map(info => <span>{ info }</span>)
+                  .reduce((accu, elem, i, arr) => {
+                    const wrappedEl = (
+                      <span
+                        key={ `info-${i}` }
+                        className={ css.additionalInformationItem }
+                        style={ {
+                          maxWidth: `calc(${100 / arr.length}% - 1rem)`,
+                        } }
+                      >
+                        { elem }
+                      </span>
+                    );
+                    const spacer = (
+                      <span key={ `info-spacer-${i}` } className={ css.spacer }>•</span>
+                    );
 
-                  return accu === null
-                    ? [wrappedEl]
-                    : [...accu, spacer, wrappedEl];
-                },
-                  null,
-                )
-            }
-          </div>
-        </a>
+                    return accu === null
+                      ? [wrappedEl]
+                      : [...accu, spacer, wrappedEl];
+                  },
+                    null,
+                  )
+              }
+            </div>
+          </a>
+          { children && (
+            <div className={ css.footer }>
+              { children }
+            </div>
+          ) }
+        </div>
       </div>
     );
   }