Fix/issue filter buckets wording and collection item display in filte…

…rs (#1310)

* fix #1255: better translate item type

* fix #1210: add distinction between article count and matching results

* better highlight numbers with semi bold font

src/components/modules/FilterFacet.vue

@@ -215,6 +215,7 @@ export default defineComponent({
             items: filter.items.map(item => {
               if (this.bucketsIndex[item.uid]) {
                 return {
+                  ...this.bucketsIndex[item.uid].item,
                   ...item,
                   count: this.bucketsIndex[item.uid].count
                 }
@@ -243,7 +244,7 @@ export default defineComponent({
     bucketsIndex() {
       const index = {}
       this.facet.buckets.forEach(({ item, count }) => {
-        index[item.uid] = { count }
+        index[item.uid] = { count, item }
       })
       return index
     },

src/components/modules/FilterFacetBucket.vue

@@ -1,12 +1,28 @@
 <template>
   <div class="FilterFacetBucket d-flex text-small">
-    <b-form-checkbox v-model="isChecked" data-testid="filter-facet-bucket-checkbox"> </b-form-checkbox>
+    <b-form-checkbox v-model="isChecked" data-testid="filter-facet-bucket-checkbox">
+    </b-form-checkbox>
 
-    <item-selector hide-icon :uid="bucket.val" :item="bucket.item" :type="type" :searchIndex="searchIndex">
+    <item-selector
+      hide-icon
+      :uid="bucket.val"
+      :item="bucket.item"
+      :type="type"
+      :searchIndex="searchIndex"
+    >
       <item-label v-if="bucket.item" :item="bucket.item" :type="type" />
       <span class="FilterFacetBucket__label" v-else>{{ item }}</span>
       <span v-if="bucket.count > -1">
-        (<span v-html="$tc('numbers.results', bucket.count, { n: $n(bucket.count) })" />)
+        (<span
+          v-html="
+            $tc(
+              type === 'collection' ? 'numbers.articlesMatchingSearchFilters' : 'numbers.results',
+              bucket.count,
+              { n: $n(bucket.count) }
+            )
+          "
+        />
+        {{ type }})
       </span>
     </item-selector>
   </div>
@@ -21,23 +37,23 @@ export default {
   data: () => ({
     operators: ['or', 'and', 'not'],
     operator: 'or',
-    checked: false,
+    checked: false
   }),
   props: {
     bucket: {
-      type: Object,
+      type: Object
     },
     type: {
-      type: String,
+      type: String
     },
     isLoadingResults: {
       type: Boolean,
-      default: true,
+      default: true
     },
     searchIndex: {
       type: String,
-      default: 'search',
-    },
+      default: 'search'
+    }
   },
   computed: {
     isChecked: {
@@ -46,27 +62,27 @@ export default {
       },
       set(checked) {
         this.checked = checked
-        this.bucket.checked = checked  // eslint-disable-line
-        this.bucket.operator = this.operator  // eslint-disable-line
+        this.bucket.checked = checked // eslint-disable-line
+        this.bucket.operator = this.operator // eslint-disable-line
         this.$emit('toggle-bucket', this.bucket)
-      },
+      }
     },
     selectedOperator() {
       return this.$t(`operator.${this.operator}`)
-    },
+    }
   },
   methods: {
     selectOperator(operator) {
       this.operator = operator
-    },
+    }
   },
   components: {
     ItemSelector,
-    ItemLabel,
+    ItemLabel
   },
   mounted() {
     this.checked = !!this.bucket.checked
-  },
+  }
 }
 </script>
 
@@ -85,7 +101,8 @@ export default {
 }
 </style>
 
-<i18n lang="json">{
+<i18n lang="json">
+{
   "en": {
     "dates": {
       "lastModifiedDate": "Last-Modified-Date"
@@ -96,4 +113,5 @@ export default {
       "and": "include (AND)"
     }
   }
-}</i18n>
+}
+</i18n>

src/components/modules/FilterMonitor.vue

@@ -102,7 +102,15 @@
             <span v-if="!item.uid">...</span>
             <span v-if="item.count"
               >&nbsp;(<span
-                v-html="$tc('numbers.results', item.count, { n: $n(item.count) })"
+                v-html="
+                  $tc(
+                    type === 'collection'
+                      ? 'numbers.articlesMatchingSearchFilters'
+                      : 'numbers.results',
+                    item.count,
+                    { n: $n(item.count) }
+                  )
+                "
               />)&nbsp;</span
             >
           </item-selector>

src/i18n/messages.js

@@ -21,8 +21,8 @@ export default {
         ob: 'obituary',
         tb: 'tables',
         section: 'section',
-        uc: 'unclassified content',
-        page: 'No article segmentation',
+        uc: 'unclassified items',
+        page: 'no article segmentation',
         death_notice: 'obituary (other)',
         weather: 'weather forecast',
         w: 'weather news (other)',
@@ -283,13 +283,13 @@ export default {
         optionsDescription: 'Total number of articles per day'
       },
       type: {
-        title: 'Article content type | Article content types | Article content types',
+        title: 'Item type | Item types | Item types',
         optionsTitle: 'Article content type',
-        filterTitle: 'article type',
+        filterTitle: 'item types',
         filtered: 'results are filtered when:',
-        selected: 'filter results if <b>one of {count} selected</b> article types applies',
-        description: 'check one or more article types to filter results',
-        empty: 'No articles types available',
+        selected: 'filter results if the item type is <b>one of {count} selected</b>',
+        description: 'check one or more item types to filter results',
+        empty: 'No item types available',
         context: {
           include: 'tagged as',
           exclude: '<b>NOT</b> tagged as'

src/styles/style.css

@@ -166,6 +166,13 @@ h6.dropdown-header {
   font-variation-settings: 'wght' 450;
 }
 
+b {
+  font-weight: var(--impresso-wght-bold);
+  font-variation-settings: 'wght' var(--impresso-wght-bold);
+}
+span.number {
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
+}
 label {
   font-variant: normal;
   font-family: var(--bs-font-sans-serif);