refactor: rename empty component files and tags

cypress/support/step_definitions/User.Mute/the_list_of_posts_of_this_user_is_empty.js

@@ -2,5 +2,5 @@ import { Then } from "@badeball/cypress-cucumber-preprocessor";
 
 Then("the list of posts of this user is empty", () => {
   cy.get(".base-card").not(".post-link");
-  cy.get(".main-container").find(".ds-space.hc-empty");
+  cy.get(".main-container").find(".ds-space.empty");
 });

webapp/components/Empty/Empty.spec.js

@@ -38,7 +38,7 @@ describe('Empty.vue', () => {
       it('renders that message', () => {
         propsData.message = 'this is a custom message for Empty component'
         wrapper = Wrapper()
-        expect(wrapper.find('.hc-empty-message').text()).toEqual(propsData.message)
+        expect(wrapper.find('.empty-message').text()).toEqual(propsData.message)
       })
     })
 
@@ -46,7 +46,7 @@ describe('Empty.vue', () => {
       it('sets margin to that margin', () => {
         propsData.margin = 'xxx-small'
         wrapper = Wrapper()
-        expect(wrapper.find('.hc-empty').attributes().margin).toEqual(propsData.margin)
+        expect(wrapper.find('.empty').attributes().margin).toEqual(propsData.margin)
       })
     })
   })

webapp/components/Empty/Empty.story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
@@ -11,14 +11,14 @@ storiesOf('Empty', module)
   .add(
     'tasks icon with message',
     () => ({
-      components: { HcEmpty },
+      components: { Empty },
-      template: '<hc-empty icon="tasks" message="Sorry, there are no ... available." />',
+      template: '<empty icon="tasks" message="Sorry, there are no ... available." />',
     }),
     {
       notes: "Possible icons include 'messages', 'events', 'alert', 'tasks', 'docs', and 'file'",
     },
   )
   .add('default icon, no message', () => ({
-    components: { HcEmpty },
+    components: { Empty },
-    template: '<hc-empty />',
+    template: '<empty />',
   }))

webapp/components/Empty/Empty.vue

@@ -1,15 +1,15 @@
 <template>
-  <ds-space class="hc-empty" centered :margin="margin">
+  <ds-space class="empty" centered :margin="margin">
     <ds-text>
       <img
         :src="iconPath"
         width="80"
-        class="hc-empty-icon"
+        class="empty-icon"
         style="margin-bottom: 5px"
         alt="Empty"
       />
       <br />
-      <ds-text v-show="message" class="hc-empty-message" color="softer">
+      <ds-text v-show="message" class="empty-message" color="softer">
         {{ message }}
       </ds-text>
     </ds-text>
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'HcEmpty',
+  name: 'Empty',
   props: {
     /**
      * Icon that should be shown
@@ -55,7 +55,7 @@ export default {
 </script>
 
 <style lang="scss">
-.hc-empty-icon {
+.empty-icon {
   padding-bottom: $font-space-large;
 }
 </style>

webapp/components/NotificationsTable/NotificationsTable.spec.js

@@ -48,8 +48,8 @@ describe('NotificationsTable.vue', () => {
     })
 
     describe('no notifications', () => {
-      it('renders HcEmpty component', () => {
+      it('renders Empty component', () => {
-        expect(wrapper.find('.hc-empty').exists()).toBe(true)
+        expect(wrapper.find('.empty').exists()).toBe(true)
       })
     })
 

webapp/components/NotificationsTable/NotificationsTable.vue

@@ -97,11 +97,11 @@
       </ds-grid-item>
     </ds-grid>
   </div>
-  <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
+  <empty v-else icon="alert" :message="$t('notifications.empty')" />
 </template>
 <script>
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 import BaseCard from '../_new/generic/BaseCard/BaseCard.vue'
 import mobile from '~/mixins/mobile'
 
@@ -110,7 +110,7 @@ const maxMobileWidth = 768 // at this point the table breaks down
 export default {
   components: {
     UserTeaser,
-    HcEmpty,
+    Empty,
     BaseCard,
   },
   mixins: [mobile(maxMobileWidth)],

webapp/components/Registration/RegistrationSlideNoPublic.vue

@@ -1,18 +1,18 @@
 <template>
   <ds-space centered>
-    <hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
+    <empty icon="events" :message="$t('components.registration.signup.unavailable')" />
     <slot></slot>
     <ds-space margin="xxx-small" />
   </ds-space>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   name: 'RegistrationSlideNoPublic',
   components: {
-    HcEmpty,
+    Empty,
   },
   props: {
     sliderData: { type: Object, required: true },

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

@@ -50,8 +50,8 @@ describe('SearchResults', () => {
 
     describe('searchResults', () => {
       describe('contains no results', () => {
-        it('renders hc-empty component', () => {
+        it('renders empty component', () => {
-          expect(wrapper.find('.hc-empty').exists()).toBe(true)
+          expect(wrapper.find('.empty').exists()).toBe(true)
         })
       })
 

webapp/components/_new/features/SearchResults/SearchResults.vue

@@ -98,7 +98,7 @@
         <!-- 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 })" />
+            <empty icon="tasks" :message="$t('search.no-results', { search })" />
           </ds-space>
         </ds-grid-item>
       </masonry-grid>
@@ -109,7 +109,7 @@
 <script>
 import postListActions from '~/mixins/postListActions'
 import { searchPosts, searchUsers, searchGroups, searchHashtags } from '~/graphql/Search.js'
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
 import PostTeaser from '~/components/PostTeaser/PostTeaser'
@@ -123,7 +123,7 @@ export default {
   name: 'SearchResults',
   components: {
     TabNavigation,
-    HcEmpty,
+    Empty,
     MasonryGrid,
     MasonryGridItem,
     PostTeaser,

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

@@ -1,7 +1,7 @@
 import faker from '@faker-js/faker'
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
 import PostTeaser from '~/components/PostTeaser/PostTeaser'
@@ -66,7 +66,7 @@ storiesOf('TabNavigator', module)
   .add('given search results of posts, users, hashtags', () => ({
     components: {
       TabNavigation,
-      HcEmpty,
+      Empty,
       MasonryGrid,
       MasonryGridItem,
       PostTeaser,
@@ -178,7 +178,7 @@ storiesOf('TabNavigator', module)
             <!-- 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 })" />
+                <empty icon="tasks" :message="$t('search.no-results', { search })" />
               </ds-space>
             </ds-grid-item>
           </masonry-grid>

webapp/components/features/ReportsTable/ReportsTable.vue

@@ -28,16 +28,16 @@
       <report-row :key="report.id" :report="report" @confirm-report="$emit('confirm', report)" />
     </template>
   </table>
-  <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
+  <empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 import ReportRow from '~/components/features/ReportRow/ReportRow'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
     ReportRow,
   },
   props: {

webapp/pages/admin/notifications.vue

@@ -1,16 +1,16 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('admin.notifications.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <empty icon="tasks" message="Coming Soon…" />
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
   },
 }
 </script>

webapp/pages/admin/organizations.vue

@@ -1,16 +1,16 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('admin.organizations.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <empty icon="tasks" message="Coming Soon…" />
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
   },
 }
 </script>

webapp/pages/admin/pages.vue

@@ -1,16 +1,16 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('admin.pages.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <empty icon="tasks" message="Coming Soon…" />
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
   },
 }
 </script>

webapp/pages/admin/settings.vue

@@ -1,16 +1,16 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('admin.settings.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <empty icon="tasks" message="Coming Soon…" />
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
   },
 }
 </script>

webapp/pages/index.vue

@@ -121,7 +121,7 @@
       </template>
       <template v-else>
         <ds-grid-item :row-span="2" column-span="fullWidth">
-          <hc-empty icon="docs" />
+          <empty icon="docs" />
           <ds-text align="center">{{ $t('index.no-results') }}</ds-text>
           <ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
         </ds-grid-item>
@@ -140,7 +140,7 @@ import postListActions from '~/mixins/postListActions'
 import mobile from '~/mixins/mobile'
 import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
 import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter.vue'
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
@@ -158,7 +158,7 @@ export default {
     DonationInfo,
     HashtagsFilter,
     PostTeaser,
-    HcEmpty,
+    Empty,
     MasonryGrid,
     MasonryGridItem,
     FilterMenuComponent,

webapp/pages/profile/_id/_slug.vue

@@ -168,7 +168,7 @@
           </template>
           <template v-else>
             <ds-grid-item column-span="fullWidth">
-              <hc-empty margin="xx-large" icon="file" />
+              <empty margin="xx-large" icon="file" />
             </ds-grid-item>
           </template>
         </masonry-grid>
@@ -189,7 +189,7 @@ import HcFollowButton from '~/components/Button/FollowButton'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import FollowList, { followListVisibleCount } from '~/components/features/ProfileList/FollowList'
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
@@ -218,7 +218,7 @@ export default {
     HcFollowButton,
     HcCountTo,
     HcBadges,
-    HcEmpty,
+    Empty,
     ProfileAvatar,
     ContentMenu,
     AvatarUploader,

webapp/pages/registration.spec.js

@@ -90,7 +90,7 @@ describe('Registration', () => {
       it('no "method" query in URI show "RegistrationSlideNoPublic"', async () => {
         mocks.$route.query = {}
         wrapper = await Wrapper()
-        expect(wrapper.find('.hc-empty').exists()).toBe(true)
+        expect(wrapper.find('.empty').exists()).toBe(true)
         expect(wrapper.find('.enter-invite').exists()).toBe(false)
         expect(wrapper.find('.enter-email').exists()).toBe(false)
       })
@@ -127,13 +127,13 @@ describe('Registration', () => {
         it('no "inviteCode" query in URI', async () => {
           mocks.$route.query = { method: 'invite-code' }
           wrapper = await Wrapper()
-          expect(wrapper.find('.hc-empty').exists()).toBe(true)
+          expect(wrapper.find('.empty').exists()).toBe(true)
         })
 
         it('"inviteCode=ABCDEF" query in URI', async () => {
           mocks.$route.query = { method: 'invite-code', inviteCode: 'ABCDEF' }
           wrapper = await Wrapper()
-          expect(wrapper.find('.hc-empty').exists()).toBe(true)
+          expect(wrapper.find('.empty').exists()).toBe(true)
         })
       })
     })

webapp/pages/settings/invites.vue

@@ -1,16 +1,16 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('settings.invites.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <empty icon="tasks" message="Coming Soon…" />
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
   },
 }
 </script>

webapp/pages/settings/languages.vue

@@ -1,16 +1,16 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('settings.languages.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <empty icon="tasks" message="Coming Soon…" />
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
   },
 }
 </script>

webapp/pages/settings/my-organizations.vue

@@ -1,16 +1,16 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('settings.organizations.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <empty icon="tasks" message="Coming Soon…" />
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import Empty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcEmpty,
+    Empty,
   },
 }
 </script>