feat: add document action button

src/components/DocumentActionButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <icon-button
+    :id="btnId"
+    :icon-left="iconName"
+    :icon-left-weight="iconWeight"
+    class="btn"
+    :class="btnClassDefinition"
+    :tooltip-placement="tooltipPlacement"
+    :label="label"
+    hide-label
+    :disabled="disabled"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import uniqueId from 'lodash/uniqueId'
+
+import IconButton from '@/components/IconButton'
+
+defineOptions({ name: 'DocumentActionsButton' })
+const props = defineProps({
+  /**
+   * Icon name
+   */
+  iconName: {
+    type: String,
+    required: true
+  },
+  /**
+   * Button label
+   */
+  label: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Class to apply to the action button
+   */
+  btnClass: {
+    type: String,
+    default: 'btn-link btn-sm'
+  },
+  /**
+   * Button is filled
+   */
+  isFilled: {
+    type: Boolean
+  },
+  /**
+   * Class to apply to the action button when document is filled
+   */
+  filledBtnClass: {
+    type: String,
+    default: 'starred'
+  },
+  /**
+   * Class to apply to the action button when document is filled
+   */
+  tooltipPlacement: {
+    type: String,
+    default: 'top'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const btnId = uniqueId('action-btn-')
+const btnClassDefinition = computed(() => {
+  return {
+    [props.btnClass]: props.isFilled,
+    ...classAttributeToObject(props.btnClass)
+  }
+})
+function classAttributeToObject(str) {
+  const list = str.split(' ')
+  return Object.assign({}, ...list.map((key) => ({ [key]: true })))
+}
+
+const iconWeight = computed(() => (props.isFilled ? 'fill' : 'regular'))
+</script>

src/stories/components/DocumentActions.stories.js

@@ -0,0 +1,51 @@
+import IconButton from '@/components/IconButton'
+import DocumentActionsGroup from '@/components/DocumentActionsGroup.vue'
+
+export default {
+  components: { DocumentActionsGroup },
+  title: 'Components/DocumentActions',
+  component: IconButton,
+  tags: ['autodocs'],
+  render: (args) => ({
+    components: {
+      DocumentActionsGroup
+    },
+    setup() {
+      return {
+        args
+      }
+    },
+    template: `
+      <document-actions-group v-bind="args" />
+    `
+  })
+}
+
+export const Default = {
+  args: {
+    document: {
+      routerParams: {},
+      contentType: '',
+      contentTypeLabel: '',
+      fullUrl: '',
+      fullRootUrl: '',
+      title: '',
+      content: '',
+      root: { contentType: '' }
+    },
+    vertical: false,
+    tooltipsPlacement: 'top',
+    displayDownloadOptions: false,
+    isDownloadAllowed: false,
+    starBtnClass: 'btn-link btn-sm',
+    starredBtnClass: 'starred',
+    downloadBtnClass: 'btn-link btn-sm',
+    downloadBtnGroupClass: '',
+    popupBtnClass: 'btn-link btn-sm',
+    starBtnLabel: false,
+    downloadBtnLabel: false,
+    popupBtnLabel: false,
+    noBtnGroup: false,
+    isStarred: false
+  }
+}