feat: Add the new Article card component (#10269)

app/javascript/dashboard/components-next/CardLayout.vue

@@ -0,0 +1,16 @@
+<script setup>
+const emit = defineEmits(['click']);
+const handleClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col w-full gap-3 px-6 py-5 group/cardLayout rounded-2xl bg-slate-25 dark:bg-slate-800/50"
+    @click="handleClick"
+  >
+    <slot name="header" />
+    <slot name="footer" />
+  </div>
+</template>

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue

@@ -0,0 +1,56 @@
+<script setup>
+import ArticleCard from './ArticleCard.vue';
+
+const articles = [
+  {
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: '2 days ago',
+    author: 'Michael',
+    category: '⚡️ Marketing',
+    views: 400,
+  },
+  {
+    title: 'Setting up your first Help Center portal',
+    status: '',
+    updatedAt: '1 week ago',
+    author: 'John',
+    category: '🛠️ Development',
+    views: 1400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 4300,
+  },
+];
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/HelpCenter/ArticleCard"
+    :layout="{ type: 'grid', width: '700px' }"
+  >
+    <Variant title="Article Card">
+      <div
+        v-for="(article, index) in articles"
+        :key="index"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
+      >
+        <ArticleCard
+          :title="article.title"
+          :status="article.status"
+          :author="article.author"
+          :category="article.category"
+          :views="article.views"
+          :updated-at="article.updatedAt"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+  },
+  author: {
+    type: String,
+    required: true,
+  },
+  category: {
+    type: String,
+    required: true,
+  },
+  views: {
+    type: Number,
+    required: true,
+  },
+  updatedAt: {
+    type: String,
+    required: true,
+  },
+});
+
+const isOpen = ref(false);
+
+const menuItems = computed(() => {
+  const baseItems = [{ label: 'Delete', action: 'delete', icon: 'delete' }];
+  const menuOptions = {
+    archived: [
+      { label: 'Publish', action: 'publish', icon: 'checkmark' },
+      { label: 'Draft', action: 'draft', icon: 'draft' },
+    ],
+    draft: [
+      { label: 'Publish', action: 'publish', icon: 'checkmark' },
+      { label: 'Archive', action: 'archive', icon: 'archive' },
+    ],
+    '': [
+      // Empty string represents published status
+      { label: 'Draft', action: 'draft', icon: 'draft' },
+      { label: 'Archive', action: 'archive', icon: 'archive' },
+    ],
+  };
+  return [...(menuOptions[props.status] || menuOptions['']), ...baseItems];
+});
+
+const statusTextColor = computed(() => {
+  switch (props.status) {
+    case 'archived':
+      return '!text-slate-600 dark:!text-slate-200';
+    case 'draft':
+      return '!text-amber-700 dark:!text-amber-400';
+    default:
+      return '!text-teal-700 dark:!text-teal-400';
+  }
+});
+
+const statusText = computed(() => {
+  switch (props.status) {
+    case 'archived':
+      return 'Archived';
+    case 'draft':
+      return 'Draft';
+    default:
+      return 'Published';
+  }
+});
+
+const handleAction = () => {
+  isOpen.value = false;
+};
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <CardLayout>
+    <template #header>
+      <div class="flex justify-between gap-1">
+        <span class="text-base text-slate-900 dark:text-slate-50 line-clamp-1">
+          {{ title }}
+        </span>
+        <div class="relative group">
+          <Button
+            variant="ghost"
+            size="sm"
+            class="text-xs bg-slate-50 !font-normal group-hover:bg-slate-100/50 dark:group-hover:bg-slate-700/50 !h-6 dark:bg-slate-800 rounded-md border-0 !px-2 !py-0.5"
+            :label="statusText"
+            :class="statusTextColor"
+            @click="isOpen = !isOpen"
+          />
+          <OnClickOutside @trigger="isOpen = false">
+            <DropdownMenu
+              v-if="isOpen"
+              :menu-items="menuItems"
+              class="right-0 mt-2 xl:left-0 top-full"
+              @action="handleAction"
+            />
+          </OnClickOutside>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex items-center justify-between gap-4">
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-1">
+            <div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
+            <span class="text-sm text-slate-500 dark:text-slate-400">
+              {{ author }}
+            </span>
+          </div>
+          <span
+            class="block text-sm whitespace-nowrap text-slate-500 dark:text-slate-400"
+          >
+            {{ category }}
+          </span>
+          <div
+            class="inline-flex items-center gap-1 text-slate-500 dark:text-slate-400 whitespace-nowrap"
+          >
+            <FluentIcon icon="eye-show" size="18" />
+            <span class="text-sm"> {{ views }} views </span>
+          </div>
+        </div>
+        <span class="text-sm text-slate-600 dark:text-slate-400 line-clamp-1">
+          {{ updatedAt }}
+        </span>
+      </div>
+    </template>
+  </CardLayout>
+</template>