Merge pull request #3377 from Human-Connection/3376-refactor-SearchPost-component

refactor: favor CSS over syleguide components SearchPost.vue
2025-12-13 07:45:56 +00:00 · 2020-04-07 16:50:40 +02:00 · 2020-04-07 16:50:40 +02:00 · a71384464a
commit a71384464a
parent 5cc3ef5faa ca5c1a5516
6 changed files with 63 additions and 83 deletions
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@ -5595,7 +5595,7 @@ jest-environment-node@^25.2.6:
    jest-util "^25.2.6"
    semver "^6.3.0"

-jest-get-type@^25.2.6:
+jest-get-type@^25.2.1, jest-get-type@^25.2.6:
  version "25.2.6"
  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
@ -5792,7 +5792,7 @@ jest-snapshot@^25.2.7:
    pretty-format "^25.2.6"
    semver "^6.3.0"

-jest-util@^25.2.6:
+jest-util@^25.2.3, jest-util@^25.2.6:
  version "25.2.6"
  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.2.6.tgz#3c1c95cdfd653126728b0ed861a86610e30d569c"
  integrity sha512-gpXy0H5ymuQ0x2qgl1zzHg7LYHZYUmDEq6F7lhHA8M0eIwDB2WteOcCnQsohl9c/vBKZ3JF2r4EseipCZz3s4Q==
@ -7467,7 +7467,7 @@ prettier@~2.0.2:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08"
  integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==

-pretty-format@^25.2.6:
+pretty-format@^25.2.3, pretty-format@^25.2.6:
  version "25.2.6"
  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.2.6.tgz#542a1c418d019bbf1cca2e3620443bc1323cb8d7"
  integrity sha512-DEiWxLBaCHneffrIT4B+TpMvkV9RNvvJrd3lY9ew1CEQobDzEXmYT1mg0hJhljZty7kCc10z13ohOFAE8jrUDg==
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
@ -26,6 +26,13 @@ storiesOf('Generic/CounterIcon', module)
    `,
  }))

+  .add('soft', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="42" soft />
+    `,
+  }))
+
  .add('count is 0', () => ({
    components: { CounterIcon },
    template: `
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
@ -11,6 +11,7 @@ export default {
    icon: { type: String, required: true },
    count: { type: Number, required: true },
    danger: { type: Boolean, default: false },
+    soft: { type: Boolean, default: false },
  },
  computed: {
    cappedCount() {
@ -18,7 +19,8 @@ export default {
    },
    counterClass() {
      let counterClass = 'count'
-      if (this.danger) counterClass += ' --danger'
+      if (this.soft) counterClass += ' --soft'
+      else if (this.danger) counterClass += ' --danger'
      if (this.count === 0) counterClass += ' --inactive'

      return counterClass
@ -58,6 +60,11 @@ export default {
    &.--inactive {
      background-color: $color-neutral-60;
    }
+
+    &.--soft {
+      background-color: $color-neutral-90;
+      color: $text-color-soft;
+    }
  }
 }
 </style>
--- a/webapp/components/generic/SearchPost/SearchPost.spec.js
+++ b/webapp/components/generic/SearchPost/SearchPost.spec.js
@ -1,11 +1,11 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import SearchPost from './SearchPost.vue'

 const localVue = global.localVue
 localVue.filter('dateTime', (d) => d)

 describe('SearchPost.vue', () => {
-  let mocks, wrapper, propsData
+  let mocks, wrapper, propsData, counts
  beforeEach(() => {
    mocks = {
      $t: jest.fn((string) => string),
@ -22,43 +22,32 @@ describe('SearchPost.vue', () => {
      },
    }
    wrapper = Wrapper()
+    counts = wrapper.find('.search-post > .metadata > .counts')
  })

  const Wrapper = () => {
-    return shallowMount(SearchPost, { mocks, localVue, propsData })
+    return mount(SearchPost, { mocks, localVue, propsData })
  }

  describe('shallowMount', () => {
    it('renders post title', () => {
-      expect(wrapper.find('.search-option-label').text()).toMatch('Post Title')
+      expect(wrapper.find('.search-post > .label').text()).toMatch('Post Title')
    })

    it('renders post commentsCount', () => {
-      expect(
-        wrapper
-          .find('.search-post-meta')
-          .findAll('span')
-          .filter((item) => item.text() === '3')
-          .exists(),
-      ).toBe(true)
+      expect(counts.text()).toContain(propsData.option.commentsCount)
    })

    it('renders post shoutedCount', () => {
-      expect(
-        wrapper
-          .find('.search-post-meta')
-          .findAll('span')
-          .filter((item) => item.text() === '6')
-          .exists(),
-      ).toBe(true)
+      expect(counts.text()).toContain(propsData.option.shoutedCount)
    })

    it('renders post author', () => {
-      expect(wrapper.find('.search-post-author').text()).toContain('Post Author')
+      expect(wrapper.find('.search-post > .metadata').text()).toContain('Post Author')
    })

    it('renders post createdAt', () => {
-      expect(wrapper.find('.search-post-author').text()).toContain('23.08.2019')
+      expect(wrapper.find('.search-post > .metadata').text()).toContain('23.08.2019')
    })
  })
 })
--- a/webapp/components/generic/SearchPost/SearchPost.vue
+++ b/webapp/components/generic/SearchPost/SearchPost.vue
@ -1,34 +1,23 @@
 <template>
-  <ds-flex class="search-post">
-    <ds-flex-item class="search-option-label">
-      <ds-text>{{ option.title | truncate(70) }}</ds-text>
-    </ds-flex-item>
-    <ds-flex-item class="search-option-meta" width="280px">
-      <ds-flex>
-        <ds-flex-item>
-          <ds-text size="small" color="softer" class="search-post-meta">
-            <span class="comments-count">
-              {{ option.commentsCount }}
-              <base-icon name="comments" />
-            </span>
-            <span class="shouted-count">
-              {{ option.shoutedCount }}
-              <base-icon name="bullhorn" />
-            </span>
-          </ds-text>
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-text size="small" color="softer" align="right" class="search-post-author">
-            {{ option.author.name | truncate(32) }} -
-            {{ option.createdAt | dateTime('dd.MM.yyyy') }}
-          </ds-text>
-        </ds-flex-item>
-      </ds-flex>
-    </ds-flex-item>
-  </ds-flex>
+  <section class="search-post">
+    <p class="label">{{ option.title | truncate(70) }}</p>
+    <div class="metadata">
+      <span class="counts">
+        <counter-icon icon="comments" :count="option.commentsCount" soft />
+        <counter-icon icon="bullhorn" :count="option.shoutedCount" soft />
+      </span>
+      {{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
+    </div>
+  </section>
 </template>
+
 <script>
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+
 export default {
+  components: {
+    CounterIcon,
+  },
  name: 'SearchPost',
  props: {
    option: { type: Object, required: true },
@ -37,35 +26,23 @@ export default {
 </script>
 <style lang="scss">
 .search-post {
-  width: 100%;
-}
-.search-option-label {
-  align-self: center;
-  padding-left: $space-x-small;
-}
-.search-option-meta {
-  align-self: center;
-  .ds-flex {
+  display: flex;
+
+  > .label {
+    flex-grow: 1;
+    padding: 0 $space-x-small;
+  }
+
+  > .metadata {
+    display: flex;
    flex-direction: column;
+    align-items: flex-end;
+    color: $text-color-softer;
+    font-size: $font-size-small;
+
+    > .counts > .counter-icon {
+      margin: 0 $space-x-small;
+    }
  }
 }
-.search-post-meta {
-  float: right;
-  padding-top: 2px;
-  white-space: nowrap;
-  word-wrap: none;
-  .base-icon {
-    vertical-align: sub;
-  }
-}
-.shouted-count {
-  width: 36px;
-  display: inline-block;
-  text-align: right;
-  font-weight: $font-weight-bold;
-}
-.comments-count {
-  text-align: right;
-  font-weight: $font-weight-bold;
-}
 </style>
--- a/webapp/components/generic/SearchableInput/SearchableInput.story.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.story.js
@ -13,7 +13,7 @@ export const searchResults = [
    title: 'User Post by Jenny',
    value: 'User Post by Jenny',
    shoutedCount: 0,
-    commentCount: 4,
+    commentsCount: 4,
    createdAt: '2019-11-13T03:03:16.155Z',
    author: {
      id: 'u3',
@ -28,7 +28,7 @@ export const searchResults = [
    title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
    value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
    shoutedCount: 0,
-    commentCount: 0,
+    commentsCount: 0,
    createdAt: '2019-11-13T03:00:45.478Z',
    author: {
      id: 'u6',
@ -43,7 +43,7 @@ export const searchResults = [
    title: 'This is post #7',
    value: 'This is post #7',
    shoutedCount: 1,
-    commentCount: 1,
+    commentsCount: 1,
    createdAt: '2019-11-13T03:00:23.098Z',
    author: {
      id: 'u6',
@ -58,7 +58,7 @@ export const searchResults = [
    title: 'This is post #12',
    value: 'This is post #12',
    shoutedCount: 0,
-    commentCount: 12,
+    commentsCount: 12,
    createdAt: '2019-11-13T03:00:23.098Z',
    author: {
      id: 'u6',