Show categories translated in all places and even in tooltips

Show `#` symbol in front of hashtags.
Minor design changes on posts more info page.

webapp/components/Hashtag/Hashtag.spec.js

@@ -1,15 +1,15 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Styleguide from '@human-connection/styleguide'
-import Tag from './'
+import Hashtag from './Hashtag'
 
 const localVue = createLocalVue()
 localVue.use(Styleguide)
 
-describe('Tag', () => {
+describe('Hashtag', () => {
   let id
 
   let Wrapper = () => {
-    return shallowMount(Tag, {
+    return shallowMount(Hashtag, {
       localVue,
       propsData: {
         id,

webapp/components/Hashtag/Hashtag.vue

@@ -1,13 +1,10 @@
 <template>
-  <ds-tag>
-    <ds-icon name="tag" />
-    {{ id }}
-  </ds-tag>
+  <ds-tag>#{{ id }}</ds-tag>
 </template>
 
 <script>
 export default {
-  name: 'HcTag',
+  name: 'HcHashtag',
   props: {
     id: { type: String, required: true },
   },

webapp/components/Hashtag/Readme.md

@@ -3,5 +3,5 @@
 Tag "Liebe"
 
 ```
-<hc-tag name="Liebe" />
+<hc-hashtag name="Liebe" />
 ```

webapp/components/PostCard/index.vue

@@ -35,7 +35,7 @@
           v-for="category in post.categories"
           :key="category.id"
           v-tooltip="{
-            content: category.name,
+            content: $t(`contribution.category.name.${category.slug}`),
             placement: 'bottom-start',
             delay: { show: 500 },
           }"

webapp/graphql/Fragments.js

@@ -52,6 +52,7 @@ export const postFragment = lang => gql`
     }
     categories {
       id
+      slug
       name
       icon
     }

webapp/pages/post/_id/_slug/index.vue

@@ -29,16 +29,15 @@
         <hc-category
           v-for="category in post.categories"
           :key="category.id"
-          v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
           :icon="category.icon"
-          :name="category.name"
+          :name="$t(`contribution.category.name.${category.slug}`)"
         />
       </div>
       <ds-space margin-bottom="small" />
       <!-- Tags -->
       <div v-if="post.tags && post.tags.length" class="tags">
         <ds-space margin="xx-small" />
-        <hc-tag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
+        <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
       </div>
       <ds-space margin-top="x-large">
         <ds-flex :gutter="{ lg: 'small' }">
@@ -77,7 +76,7 @@
 <script>
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
-import HcTag from '~/components/Tag'
+import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu'
 import HcUser from '~/components/User/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
@@ -94,8 +93,8 @@ export default {
     mode: 'out-in',
   },
   components: {
-    HcTag,
     HcCategory,
+    HcHashtag,
     HcUser,
     HcShoutButton,
     ContentMenu,

webapp/pages/post/_id/_slug/more-info.vue

@@ -7,30 +7,17 @@
       <!-- <ds-icon name="compass" /> -->
       {{ $t('post.moreInfo.titleOfCategoriesSection') }}
     </h3>
-    <div class="tags">
-      <ds-icon
-        v-for="category in post.categories"
-        :key="category.id"
-        v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
-        :name="category.icon"
-        size="large"
-      />
-      &nbsp;
-      <!--<ds-tag
-        v-for="category in post.categories"
-      :key="category.id"><ds-icon :name="category.icon" /> {{ category.name }}</ds-tag>-->
-    </div>
+    <hc-category
+      v-for="category in post.categories"
+      :key="category.id"
+      :icon="category.icon"
+      :name="$t(`contribution.category.name.${category.slug}`)"
+    />
     <template v-if="post.tags && post.tags.length">
       <h3>
-        <!-- <ds-icon name="tags" /> -->
         {{ $t('post.moreInfo.titleOfHashtagsSection') }}
       </h3>
-      <div class="tags">
-        <ds-tag v-for="tag in post.tags" :key="tag.id">
-          <ds-icon name="tag" />
-          {{ tag.name }}
-        </ds-tag>
-      </div>
+      <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
     </template>
     <h3>{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}</h3>
     <ds-section>
@@ -49,8 +36,10 @@
 </template>
 
 <script>
-import HcPostCard from '~/components/PostCard'
 import HcEmpty from '~/components/Empty.vue'
+import HcPostCard from '~/components/PostCard'
+import HcCategory from '~/components/Category'
+import HcHashtag from '~/components/Hashtag/Hashtag'
 import { relatedContributions } from '~/graphql/PostQuery'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
@@ -62,6 +51,8 @@ export default {
   },
   components: {
     HcPostCard,
+    HcCategory,
+    HcHashtag,
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,