feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue

@@ -10,14 +10,14 @@ const twoItems = ref([
 const threeItems = ref([
   { label: 'Home', link: '#' },
   { label: 'Categories', link: '#' },
-  { label: 'Marketing', count: 6 },
+  { label: 'Marketing', count: 6, emoji: '📊' },
 ]);
 const longBreadcrumb = ref([
   { label: 'Home', link: '#' },
-  { label: 'Categories', link: '#' },
+  { label: 'Categories', link: '#', emoji: '📁' },
   { label: 'Marketing', link: '#' },
-  { label: 'Digital', link: '#' },
-  { label: 'Social Media', count: 12 },
+  { label: 'Digital', link: '#', emoji: '💻' },
+  { label: 'Social Media', count: 12, emoji: '📱' },
 ]);
 </script>
 

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 defineProps({
@@ -16,44 +18,43 @@ defineProps({
       );
     },
   },
-  countLabel: {
-    type: String,
-    default: '',
-  },
 });
 
+const emit = defineEmits(['click']);
+
 const { t } = useI18n();
+
+const onClick = event => {
+  emit('click', event);
+};
 </script>
 
 <template>
   <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
     <ol class="flex items-center mb-0">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="flex items-center gap-3"
-      >
-        <template v-if="index === items.length - 1">
-          <span class="text-sm text-slate-900 dark:text-slate-50">
-            {{
-              `${item.label}${item.count ? ` (${item.count} ${countLabel})` : ''}`
-            }}
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
+        <Button
+          v-if="index === 0"
+          :label="item.label"
+          variant="link"
+          text-variant="info"
+          class="!p-0 text-sm !font-normal hover:!no-underline max-w-56 !text-slate-300 dark:!text-slate-500 hover:!text-slate-700 dark:hover:!text-slate-100"
+          size="sm"
+          @click="onClick"
+        />
+        <template v-else>
+          <FluentIcon
+            icon="chevron-lucide-right"
+            size="18"
+            icon-lib="lucide"
+            class="flex-shrink-0 mx-2 text-slate-300 dark:text-slate-500"
+          />
+          <span
+            class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"
+          >
+            {{ item.emoji ? item.emoji : '' }} {{ item.label }}
           </span>
         </template>
-        <a
-          v-else
-          :href="item.link"
-          class="text-sm transition-colors duration-200 text-slate-300 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-100"
-        >
-          {{ item.label }}
-        </a>
-        <FluentIcon
-          v-if="index < items.length - 1"
-          icon="chevron-lucide-right"
-          size="18"
-          icon-lib="lucide"
-          class="flex-shrink-0 text-slate-300 dark:text-slate-500 ltr:mr-3 rtl:mr-0 rtl:ml-3"
-        />
       </li>
     </ol>
   </nav>