feat: add NeDropdown component

src/components/NeCard.vue

@@ -0,0 +1,112 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import NeSkeleton from './NeSkeleton.vue'
+import NeInlineNotification from './NeInlineNotification.vue'
+import NeDropdown, { type NeDropdownItem } from './NeDropdown.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Array<string>,
+    default: () => []
+  },
+  loading: {
+    type: Boolean
+  },
+  skeletonLines: {
+    type: Number,
+    default: 4
+  },
+  errorTitle: {
+    type: String,
+    default: ''
+  },
+  errorDescription: {
+    type: String,
+    default: ''
+  },
+  menuItems: {
+    type: Array<NeDropdownItem>,
+    default: () => []
+  },
+  alternateBackground: {
+    type: Boolean
+  }
+})
+
+defineEmits(['titleClick'])
+</script>
+
+<template>
+  <div
+    :class="[
+      `overflow-hidden px-4 py-5 text-sm text-gray-700 dark:text-gray-200 sm:rounded-lg sm:px-6 sm:shadow`,
+      props.alternateBackground ? 'bg-gray-50 dark:bg-gray-900' : 'bg-white dark:bg-gray-950'
+    ]"
+  >
+    <!-- header -->
+    <div class="flex justify-between">
+      <!-- title -->
+      <h3
+        v-if="title || $slots.title"
+        class="mb-3 font-semibold leading-6 text-gray-900 dark:text-gray-50"
+      >
+        <span v-if="title">
+          {{ title }}
+        </span>
+        <slot v-if="$slots.title" name="title"></slot>
+        <span v-if="$slots.titleTooltip" class="ml-1">
+          <slot name="titleTooltip"></slot>
+        </span>
+      </h3>
+      <!-- top-right slot (e.g. for kebab menu) -->
+      <div
+        v-if="$slots.topRight || menuItems?.length"
+        class="relative -right-1.5 -top-1.5 flex items-center"
+      >
+        <div v-if="$slots.topRight">
+          <slot name="topRight"></slot>
+        </div>
+        <!-- top-right menu -->
+        <div v-if="menuItems?.length">
+          <NeDropdown :items="menuItems" :align-to-right="true" />
+        </div>
+      </div>
+    </div>
+    <!-- description and content -->
+    <div class="flex flex-row items-center justify-between">
+      <div class="grow">
+        <NeSkeleton v-if="loading" :lines="skeletonLines"></NeSkeleton>
+        <NeInlineNotification
+          v-else-if="errorTitle"
+          kind="error"
+          :title="errorTitle"
+          :description="errorDescription"
+        />
+        <template v-else>
+          <div v-if="description" class="mb-3 text-gray-500 dark:text-gray-400">
+            {{ description }}
+          </div>
+          <slot></slot>
+        </template>
+      </div>
+      <FontAwesomeIcon
+        v-if="icon?.length"
+        :icon="icon"
+        class="ml-4 h-6 w-6 shrink-0 text-gray-400 dark:text-gray-600"
+      />
+    </div>
+  </div>
+</template>

src/main.ts

@@ -23,6 +23,7 @@ export { default as NeTableRow } from '@/components/NeTableRow.vue'
 export { default as NeTableCell } from '@/components/NeTableCell.vue'
 export { default as NeCombobox } from '@/components/NeCombobox.vue'
 export { default as NeDropdown } from '@/components/NeDropdown.vue'
+export { default as NeCard } from '@/components/NeCard.vue'
 
 // types
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'

stories/NeCard.stories.ts

@@ -0,0 +1,222 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { NeCard, NeTooltip, NeButton } from '../src/main'
+import { faHeart } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+library.add(faHeart)
+
+const meta = {
+  title: 'Visual/NeCard',
+  component: NeCard,
+  tags: ['autodocs'],
+  args: {
+    title: 'Card title',
+    description: '',
+    icon: [],
+    loading: false,
+    skeletonLines: 4,
+    errorTitle: '',
+    errorDescription: '',
+    menuItems: [],
+    alternateBackground: false
+  }
+} satisfies Meta<typeof NeCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate =
+  '<NeCard v-bind="args">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</NeCard>'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {}
+}
+
+const titleSlotTemplate = `<NeCard v-bind="args">
+  <template #title>
+    <span>Card title</span>
+    <span class='ml-1 text-gray-500 dark:text-gray-400'>
+      (with slot)
+    </span>
+  </template>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+</NeCard>`
+
+export const TitleSlot: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: titleSlotTemplate
+  }),
+  args: { title: '' }
+}
+
+export const WithDescription: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { description: 'Card description' }
+}
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { icon: ['fas', 'heart'] }
+}
+
+export const Loading: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { loading: true }
+}
+
+export const Error: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    errorTitle: 'Cannot retrieve data',
+    errorDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+  }
+}
+
+const templateWithTooltip =
+  '<NeCard v-bind="args">\
+      <template #titleTooltip>\
+        <NeTooltip>\
+          <template #content>Tooltip</template>\
+        </NeTooltip>\
+      </template>\
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
+    </NeCard>'
+
+export const WithTooltip: Story = {
+  render: (args) => ({
+    components: { NeCard, NeTooltip },
+    setup() {
+      return { args }
+    },
+    template: templateWithTooltip
+  }),
+  args: {}
+}
+
+export const WithMenu: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    menuItems: [
+      {
+        id: 'edit',
+        label: 'Edit'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        danger: true
+      }
+    ]
+  }
+}
+
+const templateWithTopRightSlot = `<NeCard v-bind="args">
+  <template #topRight>
+    <NeButton kind='tertiary'>Button</NeButton>
+  </template>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</NeCard>`
+
+export const WithTopRightSlot: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithTopRightSlot
+  }),
+  args: {}
+}
+
+export const WithMenuAndTopRightSlot: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithTopRightSlot
+  }),
+  args: {
+    menuItems: [
+      {
+        id: 'edit',
+        label: 'Edit'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        danger: true
+      }
+    ]
+  }
+}
+
+const alternateBackgroundTemplate = `
+  <div class="bg-white dark:bg-gray-950 p-12 flex flex-col text-sm gap-6">
+    <div class="text-gray-700 dark:text-gray-200">
+      Alternate background is useful to get contrast when the card is placed in a container with the same background as the default card background
+    </div>
+    <NeCard v-bind="args" :alternateBackground="false">
+      Card with default background
+    </NeCard>
+    <NeCard v-bind="args">
+      Card with alternate background
+    </NeCard>
+  </div>`
+
+export const AlternateBackground: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: alternateBackgroundTemplate
+  }),
+  args: {
+    alternateBackground: true
+  }
+}