From 521b0a0b8eb615361f3ec53b9cea9a9c3326c585 Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Fri, 26 Jul 2024 15:45:25 +0000
Subject: [PATCH] feat: add DocumentUserActions

---
 components.d.ts                               |  2 +
 .../DocumentUserActions.vue                   | 51 +++++++++++++++++++
 .../DocumentUserActionsEntry.vue              | 21 ++++++++
 .../DocumentUserActions.stories.js            | 26 ++++++++++
 .../DocumentUserActionsEntry.stories.js       | 12 +++++
 5 files changed, 112 insertions(+)
 create mode 100644 src/components/Document/DocumentUserActions/DocumentUserActions.vue
 create mode 100644 src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue
 create mode 100644 src/stories/components/Document/DocumentUserActions/DocumentUserActions.stories.js
 create mode 100644 src/stories/components/Document/DocumentUserActions/DocumentUserActionsEntry.stories.js

diff --git a/components.d.ts b/components.d.ts
index 7b794abea7..dcb9886eae 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -133,6 +133,8 @@ declare module 'vue' {
     DocumentThumbnail: typeof import('./src/components/Document/DocumentThumbnail.vue')['default']
     DocumentTranslatedContent: typeof import('./src/components/DocumentTranslatedContent.vue')['default']
     DocumentTypeCard: typeof import('./src/components/DocumentTypeCard.vue')['default']
+    DocumentUserActions: typeof import('./src/components/Document/DocumentUserActions/DocumentUserActions.vue')['default']
+    DocumentUserActionsEntry: typeof import('./src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue')['default']
     DocumentViewerAudio: typeof import('./src/components/Document/DocumentViewer/DocumentViewerAudio.vue')['default']
     DocumentViewerImage: typeof import('./src/components/Document/DocumentViewer/DocumentViewerImage.vue')['default']
     DocumentViewerJson: typeof import('./src/components/Document/DocumentViewer/DocumentViewerJson.vue')['default']
diff --git a/src/components/Document/DocumentUserActions/DocumentUserActions.vue b/src/components/Document/DocumentUserActions/DocumentUserActions.vue
new file mode 100644
index 0000000000..f86a46a28f
--- /dev/null
+++ b/src/components/Document/DocumentUserActions/DocumentUserActions.vue
@@ -0,0 +1,51 @@
+<template>
+  <b-button-group class="document-user-actions">
+    <document-user-actions-entry v-if="showTags" :hide-label="hideLabels" icon="tag" label="Tags" value="3+" />
+    <document-user-actions-entry
+      v-if="showComments"
+      :hide-label="hideLabels"
+      icon="chats-teardrop"
+      label="Comments"
+      value="3+"
+    />
+    <document-user-actions-entry
+      v-if="showRecommended"
+      :hide-label="hideLabels"
+      icon="user-gear"
+      label="Recommended by"
+      value="3+"
+    />
+    <document-user-actions-entry v-if="showFolders" :hide-label="hideLabels" icon="folder" label="Folder" value="3+" />
+    <document-user-actions-entry v-if="showNotes" :hide-label="hideLabels" icon="note-blank" label="Notes" value="3+" />
+  </b-button-group>
+</template>
+<script setup>
+import DocumentUserActionsEntry from '@/components/Document/DocumentUserActions/DocumentUserActionsEntry'
+defineOptions({ name: 'DocumentUserActions' })
+defineProps({
+  showTags: {
+    type: Boolean,
+    default: true
+  },
+  showComments: {
+    type: Boolean,
+    default: false
+  },
+  showRecommended: {
+    type: Boolean,
+    default: false
+  },
+  showFolders: {
+    type: Boolean,
+    default: false
+  },
+  showNotes: {
+    type: Boolean,
+    default: false
+  },
+  hideLabels: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
diff --git a/src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue b/src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue
new file mode 100644
index 0000000000..7cd20177ee
--- /dev/null
+++ b/src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue
@@ -0,0 +1,21 @@
+<template>
+  <icon-button
+    class="document-user-actions-entry bg-action-subtle text-action border-0"
+    variant="outline-action"
+    :icon-left="icon"
+    :label="value"
+    :aria-describedby="label"
+  />
+</template>
+<script setup>
+import IconButton from '@/components/IconButton'
+defineOptions({ name: 'DocumentUserActionsEntry' })
+defineProps({
+  label: { type: String, required: true },
+  value: { type: String, required: true },
+  icon: { type: String, required: true },
+  first: { type: Boolean }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/stories/components/Document/DocumentUserActions/DocumentUserActions.stories.js b/src/stories/components/Document/DocumentUserActions/DocumentUserActions.stories.js
new file mode 100644
index 0000000000..93328df081
--- /dev/null
+++ b/src/stories/components/Document/DocumentUserActions/DocumentUserActions.stories.js
@@ -0,0 +1,26 @@
+import DocumentUserActions from '@/components/Document/DocumentUserActions/DocumentUserActions'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserActions',
+  tags: ['autodocs'],
+  component: DocumentUserActions,
+  args: {
+    showTags: true,
+    showComments: false,
+    showRecommended: false,
+    showFolders: false,
+    showNotes: false,
+    hideLabels: false
+  }
+}
+
+export const Default = {}
+export const Complete = {
+  args: {
+    showTags: true,
+    showComments: true,
+    showRecommended: true,
+    showFolders: true,
+    showNotes: true
+  }
+}
diff --git a/src/stories/components/Document/DocumentUserActions/DocumentUserActionsEntry.stories.js b/src/stories/components/Document/DocumentUserActions/DocumentUserActionsEntry.stories.js
new file mode 100644
index 0000000000..dbcb6e36a9
--- /dev/null
+++ b/src/stories/components/Document/DocumentUserActions/DocumentUserActionsEntry.stories.js
@@ -0,0 +1,12 @@
+import DocumentUserActionsEntry from '@/components/Document/DocumentUserActions/DocumentUserActionsEntry'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserActionsEntry',
+  tags: ['autodocs'],
+  component: DocumentUserActionsEntry,
+  args: {}
+}
+
+export const Default = {
+  args: { icon: 'tag', label: 'Tag', value: '3' }
+}