Refactor TabNavigator.story.js

webapp/components/_new/features/SearchResults/SearchResults.story.js

@@ -1,148 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import { withA11y } from '@storybook/addon-a11y'
-import SearchResults from './SearchResults'
-import TabNavigation from '~/components/_new/generic/TabNavigation/OldTabNavigation'
-import PostTeaser from '~/components/PostTeaser/PostTeaser'
-import UserTeaser from '~/components/UserTeaser/UserTeaser'
-import helpers from '~/storybook/helpers'
-import faker from 'faker'
-import { post } from '~/components/PostTeaser/PostTeaser.story.js'
-import { user } from '~/components/UserTeaser/UserTeaser.story.js'
-
-helpers.init()
-
-const postMock = (fields) => {
-  return {
-    ...post,
-    id: faker.random.uuid(),
-    createdAt: faker.date.past(),
-    updatedAt: faker.date.recent(),
-    deleted: false,
-    disabled: false,
-    typename: 'Post',
-    ...fields,
-  }
-}
-
-const userMock = (fields) => {
-  return {
-    ...user,
-    id: faker.random.uuid(),
-    createdAt: faker.date.past(),
-    updatedAt: faker.date.recent(),
-    deleted: false,
-    disabled: false,
-    typename: 'User',
-    ...fields,
-  }
-}
-
-const posts = [
-  postMock(),
-  postMock({ author: user }),
-  postMock({ title: faker.lorem.sentence() }),
-  postMock({ contentExcerpt: faker.lorem.paragraph() }),
-  postMock({ author: user }),
-  postMock({ title: faker.lorem.sentence() }),
-  postMock({ author: user }),
-]
-
-const users = [
-  userMock(),
-  userMock({ slug: 'louie-rider', name: 'Louie Rider' }),
-  userMock({ slug: 'louicinda-johnson', name: 'Louicinda Jonhson' }),
-  userMock({ slug: 'sam-louie', name: 'Sam Louie' }),
-  userMock({ slug: 'loucette', name: 'Loucette Rider' }),
-  userMock({ slug: 'louis', name: 'Louis' }),
-  userMock({ slug: 'louanna', name: 'Louanna' }),
-]
-
-storiesOf('SearchResults', module)
-  .addDecorator(withA11y)
-  .addDecorator(helpers.layout)
-  .add('given users', () => ({
-    components: { TabNavigation, PostTeaser, UserTeaser },
-    store: helpers.store,
-    data: () => ({
-      searchResults: users,
-      activeTab: 'users',
-    }),
-    computed: {
-      posts() {
-        return []
-      },
-      users() {
-        return this.searchResults
-      },
-      activeResources() {
-        if (this.activeTab === 'posts') return this.posts
-        else if (this.activeTab === 'users') return this.users
-      },
-      tabOptions() {
-        return [
-          { type: 'posts', title: `0 Posts` },
-          { type: 'users', title: `${users.length} Users` },
-        ]
-      },
-    },
-    template: `<div class="search-results">
-                <tab-navigation
-                  :tabs="tabOptions"
-                  :activeTab="activeTab"
-                  @switch-tab="tab => activeTab = tab"
-                />
-                <section>
-                  <ul v-if="activeResources.length">
-                    <li v-for="resource in activeResources" :key="resource.key" class="list">
-                      <post-teaser v-if="activeTab === 'posts'" :post="resource" />
-                      <base-card v-else-if="activeTab === 'users'" :wideContent="true">
-                        <user-teaser :user="resource" />
-                      </base-card>
-                    </li>
-                  </ul>
-                </section>
-              </div>`,
-  }))
-  .add('given posts', () => ({
-    components: { TabNavigation, PostTeaser, UserTeaser, SearchResults },
-    store: helpers.store,
-    data: () => ({
-      searchResults: posts,
-      activeTab: 'posts',
-    }),
-    computed: {
-      posts() {
-        return this.searchResults
-      },
-      users() {
-        return []
-      },
-      activeResources() {
-        if (this.activeTab === 'posts') return this.posts
-        else if (this.activeTab === 'users') return this.users
-      },
-      tabOptions() {
-        return [
-          { type: 'posts', title: `${posts.length} Posts` },
-          { type: 'users', title: `0 Users` },
-        ]
-      },
-    },
-    template: `<div class="search-results">
-                <tab-navigation
-                  :tabs="tabOptions"
-                  :activeTab="activeTab"
-                  @switch-tab="tab => activeTab = tab"
-                />
-                <section>
-                  <ul v-if="activeResources.length">
-                    <li v-for="resource in activeResources" :key="resource.key" class="list">
-                      <post-teaser v-if="activeTab === 'posts'" :post="resource" />
-                      <base-card v-else-if="activeTab === 'users'" :wideContent="true">
-                        <user-teaser :user="resource" />
-                      </base-card>
-                    </li>
-                  </ul>
-                </section>
-              </div>`,
-  }))

webapp/components/_new/generic/TabNavigation/OldTabNavigation.vue

@@ -1,74 +0,0 @@
-<template>
-  <ul class="tab-navigation">
-    <li
-      v-for="tab in tabs"
-      :key="tab.type"
-      :class="[
-        activeTab === tab.type && '--active',
-        tab.disabled && '--disabled',
-        'tab',
-        tab.type + '-tab',
-      ]"
-      :style="tabWidth"
-      role="button"
-      :data-test="tab.type + '-tab'"
-      @click="$emit('switch-tab', tab.type)"
-    >
-      <ds-space margin="small">
-        {{ tab.count }}
-      </ds-space>
-    </li>
-  </ul>
-</template>
-
-<script>
-export default {
-  props: {
-    tabs: {
-      type: Array,
-      required: true,
-    },
-    activeTab: {
-      type: String,
-    },
-  },
-  computed: {
-    tabWidth() {
-      return 'width: ' + String(100.0 / this.tabs.length) + '%'
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.tab-navigation {
-  display: flex;
-  margin-top: $space-small;
-
-  > .tab {
-    font-weight: $font-weight-bold;
-    padding: $space-x-small $space-small;
-    margin-right: $space-xx-small;
-    border-radius: $border-radius-base $border-radius-base 0 0;
-    background: $color-neutral-100;
-    cursor: pointer;
-
-    &.--active {
-      background: $color-neutral-80;
-      border: none;
-    }
-
-    &.--disabled {
-      background: $background-color-disabled;
-      border: $border-size-base solid $color-neutral-80;
-      border-bottom: none;
-      pointer-events: none;
-      cursor: default;
-    }
-
-    &:hover:not(.--active) {
-      background: $color-neutral-85;
-    }
-  }
-}
-</style>

webapp/components/_new/generic/TabNavigation/TabNavigation.spec.js

@@ -19,19 +19,19 @@ describe('TabNavigation', () => {
       tabs: [
         {
           type: 'Post',
-          title: 'Post',
+          title: 'Posts',
           count: 12,
           disabled: false,
         },
         {
           type: 'User',
-          title: 'User',
+          title: 'Users',
           count: 9,
           disabled: false,
         },
         {
           type: 'Hashtag',
-          title: 'Hashtag',
+          title: 'Hashtags',
           count: 0,
           disabled: true,
         },

webapp/components/_new/generic/TabNavigation/TabNavigator.story.js

@@ -0,0 +1,187 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import HcEmpty from '~/components/Empty/Empty'
+import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
+import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
+import PostTeaser from '~/components/PostTeaser/PostTeaser'
+import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
+import HcHashtag from '~/components/Hashtag/Hashtag'
+import helpers from '~/storybook/helpers'
+import faker from 'faker'
+import { post } from '~/components/PostTeaser/PostTeaser.story.js'
+import { user } from '~/components/UserTeaser/UserTeaser.story.js'
+
+helpers.init()
+
+const postMock = (fields) => {
+  return {
+    ...post,
+    id: faker.random.uuid(),
+    createdAt: faker.date.past(),
+    updatedAt: faker.date.recent(),
+    deleted: false,
+    disabled: false,
+    typename: 'Post',
+    ...fields,
+  }
+}
+
+const userMock = (fields) => {
+  return {
+    ...user,
+    id: faker.random.uuid(),
+    createdAt: faker.date.past(),
+    updatedAt: faker.date.recent(),
+    deleted: false,
+    disabled: false,
+    typename: 'User',
+    ...fields,
+  }
+}
+
+const posts = [
+  postMock(),
+  postMock({ author: user }),
+  postMock({ title: faker.lorem.sentence() }),
+  postMock({ contentExcerpt: faker.lorem.paragraph() }),
+  postMock({ author: user }),
+  postMock({ title: faker.lorem.sentence() }),
+  postMock({ author: user }),
+]
+
+const users = [
+  userMock(),
+  userMock({ slug: 'louie-rider', name: 'Louie Rider' }),
+  userMock({ slug: 'louicinda-johnson', name: 'Louicinda Jonhson' }),
+  userMock({ slug: 'sam-louie', name: 'Sam Louie' }),
+  userMock({ slug: 'loucette', name: 'Loucette Rider' }),
+  userMock({ slug: 'louis', name: 'Louis' }),
+  userMock({ slug: 'louanna', name: 'Louanna' }),
+]
+
+storiesOf('TabNavigator', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('given search results of posts, users, hashtags', () => ({
+    components: {
+      TabNavigation,
+      HcEmpty,
+      MasonryGrid,
+      MasonryGridItem,
+      PostTeaser,
+      UserTeaser,
+      HcHashtag,
+    },
+    store: helpers.store,
+    data: () => ({
+      posts: posts,
+      users: users,
+      hashtags: [],
+
+      postCount: posts.length,
+      userCount: users.length,
+      hashtagCount: 0,
+
+      activeTab: 'Post',
+    }),
+    computed: {
+      activeResources() {
+        if (this.activeTab === 'Post') return this.posts
+        if (this.activeTab === 'User') return this.users
+        if (this.activeTab === 'Hashtag') return this.hashtags
+        return []
+      },
+      activeResourceCount() {
+        if (this.activeTab === 'Post') return this.postCount
+        if (this.activeTab === 'User') return this.userCount
+        if (this.activeTab === 'Hashtag') return this.hashtagCount
+        return 0
+      },
+      tabOptions() {
+        return [
+          {
+            type: 'Post',
+            title: this.$t('search.heading.Post', {}, this.postCount),
+            count: this.postCount,
+            disabled: this.postCount === 0,
+          },
+          {
+            type: 'User',
+            title: this.$t('search.heading.User', {}, this.userCount),
+            count: this.userCount,
+            disabled: this.userCount === 0,
+          },
+          {
+            type: 'Hashtag',
+            title: this.$t('search.heading.Tag', {}, this.hashtagCount),
+            count: this.hashtagCount,
+            disabled: this.hashtagCount === 0,
+          },
+        ]
+      },
+      searchCount() {
+        return this.postCount + this.userCount + this.hashtagCount
+      },
+    },
+    methods: {
+      switchTab(tabType) {
+        if (this.activeTab !== tabType) {
+          this.activeTab = tabType
+        }
+      },
+    },
+    template: `
+  <div id="search-results" class="search-results">
+    <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+      <masonry-grid>
+        <!-- tabs -->
+        <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switch-tab="switchTab" />
+
+        <!-- search results -->
+
+        <template v-if="!(!activeResourceCount || searchCount === 0)">
+          <!-- posts -->
+          <template v-if="activeTab === 'Post'">
+            <masonry-grid-item
+              v-for="post in activeResources"
+              :key="post.id"
+              :imageAspectRatio="post.image && post.image.aspectRatio"
+            >
+              <post-teaser
+                :post="post"
+                :width="{ base: '100%', md: '100%', xl: '50%' }"
+                @removePostFromList="posts = removePostFromList(post, posts)"
+                @pinPost="pinPost(post, refetchPostList)"
+                @unpinPost="unpinPost(post, refetchPostList)"
+              />
+            </masonry-grid-item>
+          </template>
+          <!-- users -->
+          <template v-if="activeTab === 'User'">
+            <ds-grid-item v-for="user in activeResources" :key="user.id" :row-span="2">
+              <base-card :wideContent="true">
+                <user-teaser :user="user" />
+              </base-card>
+            </ds-grid-item>
+          </template>
+          <!-- hashtags -->
+          <template v-if="activeTab === 'Hashtag'">
+            <ds-grid-item v-for="hashtag in activeResources" :key="hashtag.id" :row-span="2">
+              <base-card :wideContent="true">
+                <hc-hashtag :id="hashtag.id" />
+              </base-card>
+            </ds-grid-item>
+          </template>
+        </template>
+
+        <!-- no results -->
+        <ds-grid-item v-else :row-span="7" column-span="fullWidth">
+          <ds-space centered>
+            <hc-empty icon="tasks" :message="$t('search.no-results', { search })" />
+          </ds-space>
+        </ds-grid-item>
+      </masonry-grid>
+    </ds-flex-item>
+  </div>`,
+  }))