From 7cde9e262f6256f690f538801ac5daa4879efc15 Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Fri, 4 Oct 2024 11:02:25 +0000
Subject: [PATCH] feat: add widget field facets entry

---
 components.d.ts                               |   2 +
 .../Widget/WidgetFieldFacetsEntry.vue         | 123 ++++++++++++++++++
 .../Widget/WidgetFieldFacetsEntry.stories.js  |  18 +++
 3 files changed, 143 insertions(+)
 create mode 100644 src/components/Widget/WidgetFieldFacetsEntry.vue
 create mode 100644 src/stories/components/Widget/WidgetFieldFacetsEntry.stories.js

diff --git a/components.d.ts b/components.d.ts
index 0e3aa242f2..f749cfd03f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -455,7 +455,9 @@ declare module 'vue' {
     WidgetDuplicates: typeof import('./src/components/Widget/WidgetDuplicates.vue')['default']
     WidgetEmpty: typeof import('./src/components/Widget/WidgetEmpty.vue')['default']
     WidgetEntities: typeof import('./src/components/Widget/WidgetEntities.vue')['default']
+    WidgetFieldFacetEntry: typeof import('./src/components/Widget/WidgetFieldFacetEntry.vue')['default']
     WidgetFieldFacets: typeof import('./src/components/Widget/WidgetFieldFacets.vue')['default']
+    WidgetFieldFacetsEntry: typeof import('./src/components/Widget/WidgetFieldFacetsEntry.vue')['default']
     WidgetFileBarometer: typeof import('./src/components/Widget/WidgetFileBarometer.vue')['default']
     WidgetListGroup: typeof import('./src/components/Widget/WidgetListGroup.vue')['default']
     WidgetNames: typeof import('./src/components/Widget/WidgetNames.vue')['default']
diff --git a/src/components/Widget/WidgetFieldFacetsEntry.vue b/src/components/Widget/WidgetFieldFacetsEntry.vue
new file mode 100644
index 0000000000..31b24713f1
--- /dev/null
+++ b/src/components/Widget/WidgetFieldFacetsEntry.vue
@@ -0,0 +1,123 @@
+<script setup>
+import { computed } from 'vue'
+import { round } from 'lodash'
+import { PhosphorIcon } from '@icij/murmur-next'
+
+import DisplayNumber from '@/components/Display/DisplayNumber'
+
+const {
+  count = 0,
+  total = 0,
+  to = null
+} = defineProps({
+  label: { type: String, required: true },
+  count: { type: Number },
+  total: { type: Number },
+  to: { type: Object }
+})
+
+const is = computed(() => {
+  return to ? 'router-link' : 'span'
+})
+
+const totalPercentage = computed(() => {
+  if (total > 0) {
+    return round((count / total) * 100, 2) + '%'
+  }
+  return '0%'
+})
+
+const barStyle = computed(() => {
+  return { width: totalPercentage.value }
+})
+</script>
+
+<template>
+  <component :is="is" class="widget-field-facets-entry" :to="to">
+    <div class="d-flex align-items-center flex-truncate">
+      <div class="widget-field-facets-entry__label text-truncate">
+        <slot>{{ label }}</slot>
+      </div>
+      <span class="widget-field-facets-entry__count ms-auto flex-shrink-0">
+        <phosphor-icon
+          name="magnifying-glass"
+          aria-hidden="true"
+          weight="bold"
+          class="me-2 flex-shrink-0 widget-field-facets-entry__count__icon"
+        />
+        <slot name="count" v-bind="{ count }">
+          <display-number :value="count" />
+        </slot>
+      </span>
+    </div>
+    <div class="widget-field-facets-entry__bar" :style="barStyle"></div>
+  </component>
+</template>
+
+<style lang="scss" scoped>
+@keyframes slidingBar {
+  0% {
+    max-width: 0;
+  }
+  100% {
+    max-width: 100%;
+  }
+}
+
+.widget-field-facets-entry {
+  color: var(--bs-body-color);
+  background: transparent;
+  padding: $spacer-xs 0 $spacer-sm;
+  position: relative;
+  display: block;
+
+  &[href] {
+    color: var(--bs-link-color);
+
+    &:hover .widget-field-facets-entry__count {
+      color: var(--bs-white);
+      background: var(--bs-action);
+      border-radius: var(--bs-border-radius);
+
+      &__icon {
+        visibility: visible;
+      }
+    }
+  }
+
+  &__count {
+    display: inline-flex;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    justify-content: space-between;
+    align-items: center;
+    padding: $spacer-xxs $spacer-xs;
+    font-weight: 500;
+    color: var(--bs-body-color);
+
+    &__icon {
+      color: inherit;
+      display: inline-flex;
+      visibility: hidden;
+    }
+  }
+
+  &__bar {
+    animation: slidingBar 200ms forwards;
+    height: 8px;
+    background: var(--bs-secondary-bg-subtle);
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    min-width: 1px;
+    max-width: 0;
+    border-radius: 0 4px 4px 0;
+  }
+
+  @for $i from 0 through 100 {
+    &:nth-child(#{$i}) &__bar {
+      animation-delay: $i * 50ms;
+    }
+  }
+}
+</style>
diff --git a/src/stories/components/Widget/WidgetFieldFacetsEntry.stories.js b/src/stories/components/Widget/WidgetFieldFacetsEntry.stories.js
new file mode 100644
index 0000000000..3030f4c162
--- /dev/null
+++ b/src/stories/components/Widget/WidgetFieldFacetsEntry.stories.js
@@ -0,0 +1,18 @@
+import { vueRouter } from 'storybook-vue3-router'
+
+import WidgetFieldFacetsEntry from '@/components/Widget/WidgetFieldFacetsEntry'
+
+export default {
+  title: 'Components/Widget/WidgetFieldFacetsEntry',
+  decorators: [vueRouter([{ name: 'search' }])],
+  component: WidgetFieldFacetsEntry,
+  tags: ['autodocs'],
+  args: {
+    label: 'English',
+    count: 6781,
+    total: 1e4,
+    to: { name: 'search' }
+  }
+}
+
+export const Default = {}