Follow @alina-beck's PR review suggestions

- Update styling
- Avoid nested tags
- Rename components with two names
- Add story

- Co-authored-by: Alina Beck <alina.beck@mail.com>

webapp/assets/_new/styles/tokens.scss

@@ -254,8 +254,7 @@ $size-width-paginate: 100px;
 
 $size-avatar-small: 34px;
 $size-avatar-base: 44px;
-$size-avatar-large: 64px;
+$size-avatar-large: 114px;
-$size-avatar-x-large: 114px;
 
 /**
  * @tokens Size Buttons
@@ -316,6 +315,7 @@ $z-index-dropdown: 8888;
 $z-index-page-submenu: 2500;
 $z-index-page-header: 2000;
 $z-index-page-sidebar: 1500;
+$z-index-hc-post-card-link: 5;
 $z-index-sticky: 100;
 $z-index-post-card-link: 5;
 

webapp/components/Comment/Comment.vue

@@ -12,13 +12,13 @@
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
     <ds-card :id="anchor" :class="{ 'comment--target': isTarget }">
       <ds-space margin-bottom="small" margin-top="small">
-        <hc-user :user="author" :date-time="comment.createdAt">
+        <user-teaser :user="author" :date-time="comment.createdAt">
           <template v-slot:dateTime>
             <ds-text v-if="comment.createdAt !== comment.updatedAt">
               ({{ $t('comment.edited') }})
             </ds-text>
           </template>
-        </hc-user>
+        </user-teaser>
         <client-only>
           <content-menu
             v-show="!openEditCommentMenu"
@@ -61,7 +61,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { COMMENT_MAX_UNTRUNCATED_LENGTH, COMMENT_TRUNCATE_TO_LENGTH } from '~/constants/comment'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCommentForm from '~/components/CommentForm/CommentForm'
@@ -82,7 +82,7 @@ export default {
     }
   },
   components: {
-    HcUser,
+    UserTeaser,
     ContentMenu,
     ContentViewer,
     HcCommentForm,

webapp/components/ContributionForm/ContributionForm.vue

@@ -38,7 +38,7 @@
 
         <ds-space />
         <client-only>
-          <hc-user :user="currentUser" :trunc="35" />
+          <user-teaser :user="currentUser" :trunc="35" />
         </client-only>
         <ds-space />
         <ds-input
@@ -122,14 +122,14 @@ import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
 import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import HcTeaserImage from '~/components/TeaserImage/TeaserImage'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   components: {
     HcEditor,
     HcCategoriesSelect,
     HcTeaserImage,
-    HcUser,
+    UserTeaser,
   },
   props: {
     contribution: { type: Object, default: () => {} },

webapp/components/Notification/Notification.vue

@@ -2,7 +2,7 @@
   <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
     <client-only>
       <ds-space margin-bottom="x-small">
-        <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
+        <user-teaser :user="from.author" :date-time="from.createdAt" :trunc="35" />
       </ds-space>
       <ds-text class="reason-text-for-test" color="soft">
         {{ $t(`notifications.reason.${notification.reason}`) }}
@@ -35,12 +35,12 @@
 </template>
 
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   name: 'Notification',
   components: {
-    HcUser,
+    UserTeaser,
   },
   props: {
     notification: {

webapp/components/NotificationsTable/NotificationsTable.story.js

@@ -4,7 +4,7 @@ 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'
+import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 
 helpers.init()
 export const notifications = [

webapp/components/NotificationsTable/NotificationsTable.vue

@@ -15,7 +15,7 @@
     <template #user="scope">
       <ds-space margin-bottom="base">
         <client-only>
-          <hc-user
+          <user-teaser
             :user="scope.row.from.author"
             :date-time="scope.row.from.createdAt"
             :trunc="35"
@@ -50,12 +50,12 @@
   <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
 </template>
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcEmpty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcUser,
+    UserTeaser,
     HcEmpty,
   },
   props: {

webapp/components/PostCard/PostCard.story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import HcPostCard from './PostCard.vue'
+import HcPostCard from './HcPostCard.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()

webapp/components/PostCard/PostCard.vue

@@ -3,7 +3,7 @@
     :lang="post.language"
     :image="post.image | proxyApiUrl"
     :class="{
-      'post-card': true,
+      'hc-post-card': true,
       'disabled-content': post.disabled,
       '--pinned': isPinned,
       '--blur-image': post.imageBlurred,
@@ -20,7 +20,7 @@
     <!-- Username, Image & Date of Post -->
     <div class="user-wrapper">
       <client-only>
-        <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
+        <user-teaser :user="post.author" :trunc="35" :date-time="post.createdAt" />
       </client-only>
       <hc-ribbon v-if="isPinned" class="ribbon--pinned" :text="$t('post.pinned')" />
       <hc-ribbon v-else :text="$t('post.name')" />
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcCategory from '~/components/Category'
 import HcRibbon from '~/components/Ribbon'
@@ -89,7 +89,7 @@ import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostH
 export default {
   name: 'HcPostCard',
   components: {
-    HcUser,
+    UserTeaser,
     HcCategory,
     HcRibbon,
     ContentMenu,
@@ -157,7 +157,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.post-card {
+.hc-post-card {
   justify-content: space-between;
   position: relative;
   z-index: 1;
@@ -190,7 +190,7 @@ export default {
     margin-top: $space-large;
   }
 
-  /* workaround to avoid jumping layout when hc-user is rendered */
+  /* workaround to avoid jumping layout when user-teaser is rendered */
   .user-wrapper {
     height: 36px;
   }

webapp/components/UserTeaser/UserTeaser.story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import User from '~/components/User/User.vue'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
@@ -53,25 +53,25 @@ export const user = {
   socialMedia: [],
 }
 
-storiesOf('User', module)
+storiesOf('UserTeaser', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('available', () => ({
-    components: { User },
+    components: { UserTeaser },
     store: helpers.store,
     data: () => ({
       user,
     }),
-    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+    template: '<user-teaser :user="user" :trunc="35" :date-time="new Date()" />',
   }))
   .add('has edited something', () => ({
-    components: { User },
+    components: { UserTeaser },
     store: helpers.store,
     data: () => ({
       user,
     }),
     template: `
-    <user :user="user" :trunc="35" :date-time="new Date()">
+    <user-teaser :user="user" :trunc="35" :date-time="new Date()">
       <template v-slot:dateTime>
         - HEY! I'm edited
       </template>
@@ -79,10 +79,10 @@ storiesOf('User', module)
     `,
   }))
   .add('anonymous', () => ({
-    components: { User },
+    components: { UserTeaser },
     store: helpers.store,
     data: () => ({
       user: null,
     }),
-    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+    template: '<user-teaser :user="user" :trunc="35" :date-time="new Date()" />',
   }))

webapp/components/UserTeaser/UserTeaser.vue

@@ -1,26 +1,22 @@
 <template>
-  <div class="user" v-if="displayAnonymous">
+  <div class="user-teaser" v-if="displayAnonymous">
     <user-avatar v-if="showAvatar" />
-    <div>
+    <span class="username">{{ $t('profile.userAnonym') }}</span>
-      <b class="username">{{ $t('profile.userAnonym') }}</b>
-    </div>
   </div>
   <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
     <template #default="{ openMenu, closeMenu, isOpen }">
       <nuxt-link
         :to="userLink"
-        :class="['user', isOpen && 'active']"
+        :class="['user-teaser', isOpen && 'active']"
         @mouseover.native="showPopover ? openMenu(true) : () => {}"
         @mouseleave.native="closeMenu(true)"
       >
-        <user-avatar v-if="showAvatar" :user="user" />
+        <user-avatar v-if="showAvatar" :user="user" size="small" />
         <div class="user-info">
-          <ds-text>
+          <span class="user-slug">
-            <b>{{ userSlug }}</b>
+            {{ userSlug }}
-          </ds-text>
+            <span class="username">{{ userName | truncate(18) }}</span>
-          <ds-text class="username" align="left" size="small" color="soft">
+          </span>
-            {{ userName | truncate(18) }}
-          </ds-text>
           <ds-text class="date-time" align="left" size="small" color="soft">
             <template v-if="dateTime">
               <base-icon name="clock" />
@@ -82,7 +78,6 @@
             />
           </ds-flex-item>
         </ds-flex>
-        <!--<ds-space margin-bottom="x-small" />-->
       </div>
     </template>
   </dropdown>
@@ -98,7 +93,7 @@ import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import Dropdown from '~/components/Dropdown'
 
 export default {
-  name: 'HcUser',
+  name: 'UserTeaser',
   components: {
     HcRelativeDateTime,
     HcFollowButton,
@@ -152,31 +147,31 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
-.user {
+.user-teaser {
   display: flex;
   flex-wrap: nowrap;
-}
+  z-index: $z-index-hc-post-card-link;
+  position: relative;
 
-.user-info {
+  > .user-info {
-  display: flex;
-  flex-direction: column;
-
-  > .ds-text {
     display: flex;
-    margin: 0 0 $space-xxx-small $space-xx-small;
+    flex-direction: column;
-  }
 
-  &:hover,
+    > .ds-text {
-  &.active {
+      display: flex;
-    z-index: 999;
+      margin: 0 0 $space-xxx-small $space-xx-small;
-  }
+    }
-}
 
-.date-time {
+    > .user-slug {
-  > .base-icon {
+      white-space: nowrap;
-    align-self: center;
+      text-overflow: ellipsis;
-    margin: $space-xxx-small $space-xxx-small 0 0;
+      margin: 0 0 $space-xxx-small $space-xx-small;
+    }
+  }
+  .username {
+    color: $text-color-soft;
+    font-size: $font-size-small;
   }
 }
 </style>

webapp/components/_new/generic/UserAvatar/UserAvatar.story.js

@@ -0,0 +1,57 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import StoryRouter from 'storybook-vue-router'
+import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import helpers from '~/storybook/helpers'
+import { user } from '~/components/UserTeaser/UserTeaser.story.js'
+
+helpers.init()
+const anonymousUser = {
+  ...user,
+  name: 'Anonymous',
+  avatar: null,
+}
+const userWithoutAvatar = {
+  ...user,
+  avatar: null,
+  name: 'Ana Paula Nunes Marques',
+}
+storiesOf('UserAvatar', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .addDecorator(StoryRouter())
+  .add('with image', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user,
+    }),
+    template: '<user-avatar :user="user" />',
+  }))
+  .add('without image, anonymous user', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: anonymousUser,
+    }),
+    template: '<user-avatar :user="user" />',
+  }))
+  .add('without image, user initials', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: userWithoutAvatar,
+    }),
+    template: '<user-avatar :user="user" />',
+  }))
+  .add('small', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user,
+    }),
+    template: '<user-avatar :user="user" size="small"/>',
+  }))
+  .add('large', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user,
+    }),
+    template: '<user-avatar :user="user" size="large"/>',
+  }))

webapp/components/_new/generic/UserAvatar/UserAvatar.vue

@@ -1,16 +1,8 @@
 <template>
-  <div :class="[`size-${this.size}`, 'user-avatar']">
+  <div :class="[`--${this.size}`, 'user-avatar', { 'no-image': !hasImage || error }]">
-    <span v-if="!hasImage || error" class="no-image">
+    <img v-if="hasImage && !error" :src="user.avatar | proxyApiUrl" @error="onError" />
-      <span class="flex-item">
+    <base-icon name="eye-slash" v-else-if="isAnonymous" />
-        <template v-if="isAnonymous">
+    <span v-else>{{ userInitials }}</span>
-          <base-icon name="eye-slash" />
-        </template>
-        <template v-else>
-          {{ userInitials }}
-        </template>
-      </span>
-    </span>
-    <img v-if="user && user.avatar && !error" :src="user.avatar | proxyApiUrl" @error="onError" />
   </div>
 </template>
 
@@ -22,7 +14,7 @@ export default {
       type: String,
       default: 'base',
       validator: value => {
-        return value.match(/(small|base|large|x-large)/)
+        return value.match(/(small|base|large)/)
       },
     },
     user: { type: Object, default: null },
@@ -37,7 +29,7 @@ export default {
       return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
     },
     hasImage() {
-      return Boolean(this.user && this.user.avatar) && !this.error
+      return Boolean(this.user && this.user.avatar)
     },
     userInitials() {
       const { name } = this.user || 'Anonymous'
@@ -69,38 +61,28 @@ export default {
     margin-top: -0.1em;
   }
 
-  &.size-small {
+  &.--small {
     width: $size-avatar-small;
     height: $size-avatar-small;
   }
-  &.size-base {
+  &.--base {
     border-width: 1px;
     width: $size-avatar-base;
     height: $size-avatar-base;
   }
-  &.size-large {
+  &.--large {
     width: $size-avatar-large;
     height: $size-avatar-large;
+    font-size: $font-size-xx-large;
   }
-  &.size-x-large {
+  &.no-image {
-    width: $size-avatar-x-large;
-    height: $size-avatar-x-large;
-  }
-  .no-image {
-    height: 100%;
     display: flex;
     flex-wrap: wrap;
     border-radius: 50%;
+    align-items: center;
+    justify-content: center;
     background-color: $background-color-secondary;
     color: $text-color-primary-inverse;
   }
-
-  .no-image .flex-item {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0 auto;
-    align-self: center;
-    display: table;
-  }
 }
 </style>

webapp/components/features/FiledReportsTable/FiledReportsTable.vue

@@ -7,7 +7,7 @@
     condensed
   >
     <template #submitter="scope">
-      <hc-user
+      <user-teaser
         :user="scope.row.submitter"
         :showAvatar="false"
         :showPopover="false"
@@ -29,12 +29,12 @@
   </ds-table>
 </template>
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcRelativeDateTime from '~/components/RelativeDateTime'
 
 export default {
   components: {
-    HcUser,
+    UserTeaser,
     HcRelativeDateTime,
   },
   props: {

webapp/components/features/ReportList/ReportList.story.js

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { action } from '@storybook/addon-actions'
 import { post } from '~/components/PostCard/PostCard.story.js'
-import { user } from '~/components/User/User.story.js'
+import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 import helpers from '~/storybook/helpers'
 import ReportList from './ReportList'
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'

webapp/components/features/ReportRow/ReportRow.vue

@@ -19,7 +19,12 @@
       <!-- Content Column -->
       <td class="ds-table-col" data-test="report-content">
         <client-only v-if="isUser">
-          <hc-user :user="report.resource" :showAvatar="false" :trunc="30" :showPopover="false" />
+          <user-teaser
+            :user="report.resource"
+            :showAvatar="false"
+            :trunc="30"
+            :showPopover="false"
+          />
         </client-only>
         <nuxt-link v-else class="title" :to="linkTarget">
           {{ linkText | truncate(50) }}
@@ -29,7 +34,7 @@
       <!-- Author Column -->
       <td class="ds-table-col" data-test="report-author">
         <client-only v-if="!isUser">
-          <hc-user
+          <user-teaser
             :user="report.resource.author"
             :showAvatar="false"
             :trunc="30"
@@ -46,7 +51,7 @@
           {{ statusText }}
         </span>
         <client-only v-if="isReviewed">
-          <hc-user
+          <user-teaser
             :user="moderatorOfLatestReview"
             :showAvatar="false"
             :trunc="30"
@@ -85,12 +90,12 @@
 
 <script>
 import FiledReportsTable from '~/components/features/FiledReportsTable/FiledReportsTable'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   components: {
     FiledReportsTable,
-    HcUser,
+    UserTeaser,
   },
   props: {
     report: {

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

@@ -19,11 +19,11 @@
           @click="blurred = !blurred"
         />
       </aside>
-      <hc-user :user="post.author" :date-time="post.createdAt">
+      <user-teaser :user="post.author" :date-time="post.createdAt">
         <template v-slot:dateTime>
           <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
         </template>
-      </hc-user>
+      </user-teaser>
       <client-only>
         <content-menu
           placement="bottom-end"
@@ -101,7 +101,7 @@ import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import HcCommentForm from '~/components/CommentForm/CommentForm'
 import HcCommentList from '~/components/CommentList/CommentList'
@@ -119,7 +119,7 @@ export default {
   components: {
     HcCategory,
     HcHashtag,
-    HcUser,
+    UserTeaser,
     HcShoutButton,
     ContentMenu,
     HcCommentForm,

webapp/pages/profile/_id/_slug.vue

@@ -11,9 +11,9 @@
           style="position: relative; height: auto;"
         >
           <hc-upload v-if="myProfile" :user="user">
-            <user-avatar :user="user" class="profile-avatar" size="x-large"></user-avatar>
+            <user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
           </hc-upload>
-          <user-avatar v-else :user="user" class="profile-avatar" size="x-large" />
+          <user-avatar v-else :user="user" class="profile-avatar" size="large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -99,7 +99,7 @@
             <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <client-only>
-                <user :user="follow" :trunc="15" />
+                <user-teaser :user="follow" :trunc="15" />
               </client-only>
             </ds-space>
             <ds-space v-if="user.followingCount - user.following.length" margin="small">
@@ -129,7 +129,7 @@
             <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <client-only>
-                <user :user="follow" :trunc="15" />
+                <user-teaser :user="follow" :trunc="15" />
               </client-only>
             </ds-space>
             <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
@@ -271,7 +271,7 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
-import User from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcPostCard from '~/components/PostCard/PostCard.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
@@ -297,9 +297,8 @@ const tabToFilterMapping = ({ tab, id }) => {
 }
 
 export default {
-  name: 'HcUserProfile',
   components: {
-    User,
+    UserTeaser,
     HcPostCard,
     HcFollowButton,
     HcCountTo,
@@ -516,7 +515,6 @@ export default {
   }
 }
 .profile-avatar.user-avatar {
-  display: block;
   margin: auto;
   margin-top: -60px;
 }