Add storybook

4 files changed, 101 insertions, 15 deletions

diff --git a/components/PostLink.stories.js b/components/PostLink.stories.js
new file mode 100644
index 0000000..71d04ed
--- /dev/null
+++ b/components/PostLink.stories.js
@@ -0,0 +1,27 @@
+import { storiesOf } from '@storybook/vue'
+
+import PostLink from './PostLink'
+
+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'
+}
+
+const center = () => {
+  return {
+    template:
+      '<div style="display: flex; align-items: center; justify-content: center"><story/></div>'
+  }
+}
+
+storiesOf('PostLink', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { PostLink },
+      template: `<post-link :title="title" :description="description" :route="route"/>`,
+      data: () => postLink
+    }
+  })
diff --git a/components/ChroniclePost.vue b/components/PostLink.vue
index 7b2c527..b0aeb5a 100644
--- a/components/ChroniclePost.vue
+++ b/components/PostLink.vue
@@ -1,15 +1,17 @@
 <template>
-  <a :href="route" class="post">
-    <div>
-      <h4 class="post-title">{{title}}</h4>
-      <p class="post-description">{{shortenedDescription}}...</p>
-    </div>
-  </a>
+  <div class="post-link">
+    <a :href="route">
+      <div class="post-container">
+        <h4 class="post-title">{{title}}</h4>
+        <p class="post-description">{{shortenedDescription}}...</p>
+      </div>
+    </a>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'ChroniclePost',
+  name: 'PostLink',
   props: {
     title: {
       type: String,
@@ -34,26 +36,29 @@ export default {
 </script>
 
 <style scoped>
-.post {
+.post-link {
   margin: 20px;
   flex-basis: 410px;
+  max-width: 410px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  background: #ffffff;
+  text-align: left;
+}
+
+.post-link > a {
   text-decoration: none;
 }
 
-.post > div {
-  background: #ffffff;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+.post-link .post-container {
   padding: 20px;
-
-  text-align: left;
 }
 
-.post-title {
+.post-link .post-title {
   color: #181818;
   font-size: 1.3em;
 }
 
-.post-description {
+.post-link .post-description {
   color: #484848;
   font-size: 0.9em;
 }
diff --git a/components/PurePostList.stories.js b/components/PurePostList.stories.js
new file mode 100644
index 0000000..134cd68
--- /dev/null
+++ b/components/PurePostList.stories.js
@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/vue'
+
+import { postLink } from './PostLink.stories'
+
+import PurePostList from './PurePostList'
+
+export const posts = Array(5).fill(postLink)
+console.log(posts)
+
+storiesOf('PurePostList', module).add('default', () => {
+  return {
+    components: { PurePostList },
+    template: `<pure-post-list :posts="posts"/>`,
+    data: () => ({ posts })
+  }
+})
diff --git a/components/PurePostList.vue b/components/PurePostList.vue
new file mode 100644
index 0000000..a93360d
--- /dev/null
+++ b/components/PurePostList.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div v-if="posts" class="post-list">
+      <post-link
+        v-for="(post, index) in posts"
+        :key="index"
+        :route="post.route"
+        :title="post.title"
+        :description="post.description"
+      />
+    </div>
+    <div v-else>Brak wpisów</div>
+  </div>
+</template>
+
+<script>
+import PostLink from './PostLink'
+
+export default {
+  name: 'PurePostList',
+  components: { PostLink },
+  props: {
+    posts: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 900px;
+}
+</style>
\ No newline at end of file