From 62f4f127aa869890e36ff5904ba2837cfaab7e80 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 16 Oct 2024 01:29:50 +0530
Subject: [PATCH] feat: Add new breadcrumb component (#10268)

---
 .../breadcrumb/Breadcrumb.story.vue           | 63 +++++++++++++++++++
 .../components-next/breadcrumb/Breadcrumb.vue | 60 ++++++++++++++++++
 .../dashboard/i18n/locale/en/components.json  |  3 +
 3 files changed, 126 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
 create mode 100644 app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
new file mode 100644
index 000000000..c248bbd2b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { ref } from 'vue';
+import Breadcrumb from './Breadcrumb.vue';
+
+const singleItem = ref([{ label: 'Home', link: '#' }]);
+const twoItems = ref([
+  { label: 'Home', link: '#' },
+  { label: 'Categories', link: '#' },
+]);
+const threeItems = ref([
+  { label: 'Home', link: '#' },
+  { label: 'Categories', link: '#' },
+  { label: 'Marketing', count: 6 },
+]);
+const longBreadcrumb = ref([
+  { label: 'Home', link: '#' },
+  { label: 'Categories', link: '#' },
+  { label: 'Marketing', link: '#' },
+  { label: 'Digital', link: '#' },
+  { label: 'Social Media', count: 12 },
+]);
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/Breadcrumb"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Single Item">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="singleItem" />
+      </div>
+    </Variant>
+
+    <Variant title="Two Items">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="twoItems" />
+      </div>
+    </Variant>
+
+    <Variant title="Three Items with Count">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="threeItems" count-label="articles" />
+      </div>
+    </Variant>
+
+    <Variant title="Long Breadcrumb">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <Breadcrumb :items="longBreadcrumb" count-label="articles" />
+      </div>
+    </Variant>
+
+    <Variant title="RTL Support">
+      <div dir="rtl">
+        <div class="w-full p-4 bg-white dark:bg-slate-900">
+          <Breadcrumb :items="threeItems" count-label="articles" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
new file mode 100644
index 000000000..37c66735b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { defineProps } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+defineProps({
+  items: {
+    type: Array,
+    required: true,
+    validator: value => {
+      return value.every(
+        item =>
+          typeof item.label === 'string' &&
+          (item.link === undefined || typeof item.link === 'string') &&
+          (item.count === undefined || typeof item.count === 'number')
+      );
+    },
+  },
+  countLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+</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})` : ''}`
+            }}
+          </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>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 988c2fe18..40846d2b0 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -2,5 +2,8 @@
   "PAGINATION_FOOTER": {
     "SHOWING": "Showing {startItem} - {endItem} of {totalItems} items",
     "CURRENT_PAGE_INFO": "{currentPage} of {totalPages} pages"
+  },
+  "BREADCRUMB": {
+    "ARIA_LABEL": "Breadcrumb"
   }
 }