Add NotificationsTable story, refactor code

- Use percentages for width on all columns to help with resonsiveness
- export constants from other stories to dry code out

webapp/components/NotificationsTable/NotificationsTable.story.js

@@ -0,0 +1,86 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import { action } from '@storybook/addon-actions'
+import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
+import helpers from '~/storybook/helpers'
+import { post } from '~/components/PostCard/PostCard.story.js'
+import { user } from '~/components/User/User.story.js'
+
+helpers.init()
+const notifications = [
+  {
+    read: true,
+    reason: 'mentioned_in_post',
+    createdAt: '2019-10-29T15:36:02.106Z',
+    from: {
+      __typename: 'Post',
+      ...post,
+    },
+    __typename: 'NOTIFIED',
+    index: 9,
+  },
+  {
+    read: false,
+    reason: 'mentioned_in_comment',
+    createdAt: '2019-10-29T15:38:25.199Z',
+    from: {
+      __typename: 'Comment',
+      id: 'b6b38937-3efc-4d5e-b12c-549e4d6551a5',
+      createdAt: '2019-10-29T15:38:25.184Z',
+      updatedAt: '2019-10-29T15:38:25.184Z',
+      disabled: false,
+      deleted: false,
+      content:
+        '<p><a class="mention" href="/profile/u1" data-mention-id="u1" target="_blank">@peter-lustig</a> </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna ac placerat. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nibh praesent tristique magna sit amet purus gravida quis blandit. Magna eget est lorem ipsum dolor. In fermentum posuere urna nec. Eleifend donec pretium vulputate sapien nec sagittis aliquam. Augue interdum velit euismod in pellentesque. Id diam maecenas ultricies mi eget mauris pharetra. Donec pretium vulputate sapien nec. Dolor morbi non arcu risus quis varius quam quisque. Blandit turpis cursus in hac habitasse. Est ultricies integer quis auctor elit sed vulputate mi sit. Nunc consequat interdum varius sit amet mattis vulputate enim. Semper feugiat nibh sed pulvinar. Eget felis eget nunc lobortis mattis aliquam. Ultrices vitae auctor eu augue. Tellus molestie nunc non blandit massa enim nec dui. Pharetra massa massa ultricies mi quis hendrerit dolor. Nisl suscipit adipiscing bibendum est ultricies integer.</p>',
+      contentExcerpt:
+        '<p><a href="/profile/u1" target="_blank">@peter-lustig</a> </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra …</p>',
+      author: { ...user },
+      ...post,
+    },
+    __typename: 'NOTIFIED',
+    index: 1,
+  },
+  {
+    read: false,
+    reason: 'mentioned_in_comment',
+    createdAt: '2019-10-29T15:38:13.422Z',
+    from: {
+      __typename: 'Comment',
+      id: 'b91f4d4d-b178-4e42-9764-7fbcbf097f4c',
+      createdAt: '2019-10-29T15:38:13.41Z',
+      updatedAt: '2019-10-29T15:38:13.41Z',
+      disabled: false,
+      deleted: false,
+      content:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna ac placerat. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nibh praesent tristique magna sit amet purus gravida quis blandit. Magna eget est lorem ipsum dolor. In fermentum posuere urna nec. Eleifend donec pretium vulputate sapien nec sagittis aliquam. Augue interdum velit euismod in pellentesque. Id diam maecenas ultricies mi eget mauris pharetra. Donec pretium vulputate sapien nec. Dolor morbi non arcu risus quis varius quam quisque. Blandit turpis cursus in hac habitasse. Est ultricies integer quis auctor elit sed vulputate mi sit. Nunc consequat interdum varius sit amet mattis vulputate enim. Semper feugiat nibh sed pulvinar. Eget felis eget nunc lobortis mattis aliquam. Ultrices vitae auctor eu augue. Tellus molestie nunc non blandit massa enim nec dui. Pharetra massa massa ultricies mi quis hendrerit dolor. Nisl suscipit adipiscing bibendum est ultricies integer.</p><p><a class="mention" href="/profile/u1" data-mention-id="u1" target="_blank">@peter-lustig</a> </p><p></p>',
+      contentExcerpt:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna ac …</p>',
+      author: { ...user },
+      ...post,
+    },
+    __typename: 'NOTIFIED',
+    index: 2,
+  },
+]
+storiesOf('NotificationsTable', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('with notifications', () => ({
+    components: { NotificationsTable },
+    store: helpers.store,
+    data: () => ({
+      notifications,
+    }),
+    methods: {
+      markNotificationAsRead: action('markNotificationAsRead'),
+    },
+    template: `<notifications-table
+                @markNotificationAsRead="markNotificationAsRead"
+                :notifications="notifications"
+              />`,
+  }))
+  .add('without notifications', () => ({
+    components: { NotificationsTable },
+    store: helpers.store,
+    template: `<notifications-table />`,
+  }))

webapp/components/NotificationsTable/NotificationsTable.vue

@@ -66,14 +66,20 @@ export default {
       return {
         icon: {
           label: ' ',
-          width: '60px',
+          width: '5',
         },
         user: {
           label: this.$t('notifications.user'),
-          width: '33.333%',
+          width: '45%',
+        },
+        post: {
+          label: this.$t('notifications.post'),
+          width: '25%',
+        },
+        content: {
+          label: this.$t('notifications.content'),
+          width: '25%',
         },
-        post: this.$t('notifications.post'),
-        content: this.$t('notifications.content'),
       }
     },
   },

webapp/components/PostCard/PostCard.story.js

@@ -5,7 +5,7 @@ import helpers from '~/storybook/helpers'
 
 helpers.init()
 
-const post = {
+export const post = {
   id: 'd23a4265-f5f7-4e17-9f86-85f714b4b9f8',
   title: 'Very nice Post Title',
   contentExcerpt: '<p>My post content</p>',

webapp/components/User/User.story.js

@@ -5,7 +5,7 @@ import helpers from '~/storybook/helpers'
 
 helpers.init()
 
-const user = {
+export const user = {
   id: 'u6',
   slug: 'louie',
   name: 'Louie',