From 6475458fe83638ae73e3c8fbc8332cafa3fdd6d7 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Sat, 16 Nov 2019 22:56:19 +0100
Subject: [PATCH] Add Basic Story For SearchInput I had to remove `|
 dateTime('dd.MM.yyyy')` in line 61 of the vue file due to issues with $i18n
 which surely can be easyly solved. The idea is, that `results` is an object
 which contains the keys `posts` and `users`. The values are arrays with the
 search results.

---
 .../SearchInput/SearchInput.story.js          | 80 +++++++++++++++++++
 webapp/components/SearchInput/SearchInput.vue |  3 +-
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 webapp/components/SearchInput/SearchInput.story.js

diff --git a/webapp/components/SearchInput/SearchInput.story.js b/webapp/components/SearchInput/SearchInput.story.js
new file mode 100644
index 000000000..515222d41
--- /dev/null
+++ b/webapp/components/SearchInput/SearchInput.story.js
@@ -0,0 +1,80 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import SearchInput from './SearchInput.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+export const results = {
+  posts: [
+    {
+      id: 'de100841-2336-4b01-a574-f1bd2c0b262a',
+      slug: 'user-post-by-jenny',
+      label: 'User Post by Jenny',
+      value: 'User Post by Jenny',
+      shoutedCount: 0,
+      createdAt: '2019-11-13T03:03:16.155Z',
+      author: {
+        id: 'u3',
+        name: 'Jenny Rostock',
+        slug: 'jenny-rostock',
+      },
+    },
+    {
+      id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
+      slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
+      label: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+      value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+      shoutedCount: 0,
+      createdAt: '2019-11-13T03:00:45.478Z',
+      author: {
+        id: 'u6',
+        name: 'Louie',
+        slug: 'louie',
+      },
+    },
+    {
+      id: 'p7',
+      slug: 'this-is-post-7',
+      label: 'This is post #7',
+      value: 'This is post #7',
+      shoutedCount: 1,
+      createdAt: '2019-11-13T03:00:23.098Z',
+      author: {
+        id: 'u6',
+        name: 'Louie',
+        slug: 'louie',
+      },
+    },
+    {
+      id: 'p12',
+      slug: 'this-is-post-12',
+      label: 'This is post #12',
+      value: 'This is post #12',
+      shoutedCount: 0,
+      createdAt: '2019-11-13T03:00:23.098Z',
+      author: {
+        id: 'u6',
+        name: 'Louie',
+        slug: 'louie',
+      },
+    },
+  ],
+}
+
+storiesOf('Search Input', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('test', () => ({
+    components: { SearchInput },
+    store: helpers.store,
+    data: () => ({
+      results: results.posts,
+    }),
+    template: `
+      <search-input
+        :results="results"
+        :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+      />
+    `,
+  }))
diff --git a/webapp/components/SearchInput/SearchInput.vue b/webapp/components/SearchInput/SearchInput.vue
index b1b967355..61e1a8649 100644
--- a/webapp/components/SearchInput/SearchInput.vue
+++ b/webapp/components/SearchInput/SearchInput.vue
@@ -58,7 +58,8 @@
                   <ds-flex-item>
                     <ds-text size="small" color="softer" align="right">
                       {{ option.author.name | truncate(32) }} -
-                      {{ option.createdAt | dateTime('dd.MM.yyyy') }}
+                      {{ option.createdAt }}
+                      <!-- removed  | dateTime('dd.MM.yyyy') -->
                     </ds-text>
                   </ds-flex-item>
                 </ds-flex>