From 424eaa9e8098cef762b1a2a7565d37944bb25306 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 21 Oct 2019 18:25:12 +0200
Subject: Add storybook

---
 components/ChroniclePost.vue       | 60 -----------------------------------
 components/PostLink.stories.js     | 27 ++++++++++++++++
 components/PostLink.vue            | 65 ++++++++++++++++++++++++++++++++++++++
 components/PurePostList.stories.js | 16 ++++++++++
 components/PurePostList.vue        | 38 ++++++++++++++++++++++
 5 files changed, 146 insertions(+), 60 deletions(-)
 delete mode 100644 components/ChroniclePost.vue
 create mode 100644 components/PostLink.stories.js
 create mode 100644 components/PostLink.vue
 create mode 100644 components/PurePostList.stories.js
 create mode 100644 components/PurePostList.vue

(limited to 'components')

diff --git a/components/ChroniclePost.vue b/components/ChroniclePost.vue
deleted file mode 100644
index 7b2c527..0000000
--- a/components/ChroniclePost.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <a :href="route" class="post">
-    <div>
-      <h4 class="post-title">{{title}}</h4>
-      <p class="post-description">{{shortenedDescription}}...</p>
-    </div>
-  </a>
-</template>
-
-<script>
-export default {
-  name: 'ChroniclePost',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    description: {
-      type: String,
-      default: ''
-    },
-    route: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    shortenedDescription() {
-      const first30Words = this.description.split(' ').slice(0, 30)
-      return first30Words.join(' ')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.post {
-  margin: 20px;
-  flex-basis: 410px;
-  text-decoration: none;
-}
-
-.post > div {
-  background: #ffffff;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
-  padding: 20px;
-
-  text-align: left;
-}
-
-.post-title {
-  color: #181818;
-  font-size: 1.3em;
-}
-
-.post-description {
-  color: #484848;
-  font-size: 0.9em;
-}
-</style>
\ No newline at end of file
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/PostLink.vue b/components/PostLink.vue
new file mode 100644
index 0000000..b0aeb5a
--- /dev/null
+++ b/components/PostLink.vue
@@ -0,0 +1,65 @@
+<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>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PostLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    route: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    shortenedDescription() {
+      const first30Words = this.description.split(' ').slice(0, 30)
+      return first30Words.join(' ')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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-link .post-container {
+  padding: 20px;
+}
+
+.post-link .post-title {
+  color: #181818;
+  font-size: 1.3em;
+}
+
+.post-link .post-description {
+  color: #484848;
+  font-size: 0.9em;
+}
+</style>
\ No newline at end of file
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
-- 
cgit 1.4.1