Add image to PostLink

4 files changed, 52 insertions, 19 deletions

diff --git a/components/Posts/PostLink.stories.js b/components/Posts/PostLink.stories.js
index 9b12c29..5fdfb6f 100644
--- a/components/Posts/PostLink.stories.js
+++ b/components/Posts/PostLink.stories.js
@@ -7,7 +7,9 @@ export const postLink = {
   title: 'Test PostLink',
   description:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.',
-  route: '/kronika/2019/20/11/test'
+  route: '/kronika/2019/20/11/test',
+  image:
+    'https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
 }
 
 storiesOf('Posts/PostLink', module)
@@ -16,6 +18,13 @@ storiesOf('Posts/PostLink', module)
     return {
       components: { PostLink },
       template: `<post-link :title="title" :description="description" :route="route"/>`,
-      data: () => postLink
+      data: () => postLink,
+    }
+  })
+  .add('with image', () => {
+    return {
+      components: { PostLink },
+      template: `<post-link :title="title" :description="description" :route="route" :image="image"/>`,
+      data: () => postLink,
     }
   })
diff --git a/components/Posts/PostLink.vue b/components/Posts/PostLink.vue
index 8d0a669..5f7d5bf 100644
--- a/components/Posts/PostLink.vue
+++ b/components/Posts/PostLink.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="post-link">
     <a :href="route">
-      <div class="post-container">
-        <h4 class="post-title">{{ title }}</h4>
-        <p class="post-description">{{ shortenedDescription }}...</p>
+      <div>
+        <div class="image" :style="`background-image: url('${image}')`" />
+        <div class="post-container">
+          <h4 class="post-title">{{ title }}</h4>
+          <p class="post-description">{{ shortenedDescription }}...</p>
+        </div>
       </div>
     </a>
   </div>
@@ -15,23 +18,28 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     route: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
+    image: {
+      type: String,
+      required: false,
+      default: () => '/assets/og/default.jpg',
+    },
   },
   computed: {
     shortenedDescription() {
       const first30Words = this.description.split(' ').slice(0, 30)
       return first30Words.join(' ')
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -60,6 +68,7 @@ export default {
 .post-link .post-container {
   padding: 20px;
   height: 100%;
+  padding-top: 0;
 }
 
 .post-link .post-title {
@@ -71,4 +80,11 @@ export default {
   color: #484848;
   font-size: 0.9em;
 }
+
+.post-link .image {
+  height: 300px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
 </style>
diff --git a/components/Posts/PostList/PurePostList.stories.js b/components/Posts/PostList/PurePostList.stories.js
index e2c39de..0df4ce3 100644
--- a/components/Posts/PostList/PurePostList.stories.js
+++ b/components/Posts/PostList/PurePostList.stories.js
@@ -4,27 +4,34 @@ import { postLink } from '../PostLink.stories'
 
 import PurePostList from './PurePostList'
 
-export const posts = Array(5).fill(postLink)
+const postLinkNoImage = { ...postLink }
+delete postLinkNoImage['image']
+console.log(postLinkNoImage)
+
+export const posts = [
+  ...Array(3).fill(postLinkNoImage),
+  ...Array(5).fill(postLink),
+]
 
 storiesOf('Posts/PurePostList', module)
   .add('default', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts })
+      data: () => ({ posts }),
     }
   })
   .add('loading', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts" loading/>`,
-      data: () => ({ posts: [] })
+      data: () => ({ posts: [] }),
     }
   })
   .add('no posts', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts: [] })
+      data: () => ({ posts: [] }),
     }
   })
diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
index ace069f..c87b9dc 100644
--- a/components/Posts/PostList/PurePostList.vue
+++ b/components/Posts/PostList/PurePostList.vue
@@ -12,6 +12,7 @@
           :route="post.route"
           :title="post.title"
           :description="post.description"
+          :image="post.image"
         />
       </div>
     </transition>
@@ -27,14 +28,14 @@ export default {
   props: {
     posts: {
       type: Array,
-      required: true
+      required: true,
     },
     loading: {
       type: Boolean,
       required: false,
-      default: () => false
-    }
-  }
+      default: () => false,
+    },
+  },
 }
 </script>