feat(breadcrumb): add breadcrumb component

RISDEV-4998

package.json

@@ -89,6 +89,7 @@
     "prettier": "~3.3.3",
     "prettier-plugin-tailwindcss": "~0.6.6",
     "storybook": "~8.2.9",
+    "storybook-vue3-router": "^5.0.0",
     "tailwindcss": "~3.4.10",
     "typescript": "~5.5.4",
     "typescript-eslint": "~8.2.0",

src/primevue/breadcrumb/breadcrumb.stories.ts

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import Breadcrumb from "primevue/breadcrumb";
+import { html } from "@/lib/tags.ts";
+import { ref } from "vue";
+import { vueRouter } from "storybook-vue3-router";
+import HomeOutlineIcon from "~icons/material-symbols/home-outline";
+import ChevronRightIcon from "~icons/material-symbols/chevron-right";
+
+const meta: Meta<typeof Breadcrumb> = {
+  component: Breadcrumb,
+  tags: ["autodocs"],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Breadcrumb, HomeOutlineIcon, ChevronRightIcon },
+    setup() {
+      const items = ref([
+        { label: "", type: "home", route: "/" },
+        { label: "Gesetze & Verordnungen", route: "/laws" },
+        { label: "BGB Bürgerliches Gesetzbuch", route: "/bgb" },
+        { label: "Buch 2", route: "/book-2" },
+        { label: "Abschnitt 3" },
+        { label: "Untertitel 2" },
+        { label: "Kapitel 2" },
+        { label: "§ 312e Verletzung von Informationspflichten über Kosten" },
+      ]);
+
+      return { args, items };
+    },
+    template: html`
+      <div class="card flex justify-center">
+        <Breadcrumb :model="items">
+          <template #item="{ item, props }">
+            <router-link
+              v-if="item.route"
+              v-slot="{ href, navigate }"
+              :to="item.route"
+              custom
+            >
+              <a :href="href" v-bind="props.action" @click="navigate">
+                <span v-if="item.type === 'home'">
+                  <HomeOutlineIcon />
+                </span>
+                <span v-else> {{ item.label }} </span>
+              </a>
+            </router-link>
+            <span v-else>{{ item.label }}</span>
+          </template>
+          <template #separator>
+            <ChevronRightIcon />
+          </template>
+        </Breadcrumb>
+      </div>
+    `,
+  }),
+  decorators: [
+    vueRouter(), // This adds basic router functionality for the story
+  ],
+};

src/primevue/breadcrumb/breadcrumb.ts

@@ -0,0 +1,40 @@
+import { BreadcrumbPassThroughOptions } from "primevue/breadcrumb";
+import { tw } from "@/lib/tags.ts";
+
+const breadcrumb: BreadcrumbPassThroughOptions = {
+  list: () => {
+    const base = tw`m-0 flex list-none flex-wrap items-center p-0 leading-none`;
+    return {
+      class: {
+        [base]: true,
+      },
+    };
+  },
+  item: () => {
+    const base = tw`flex-no-wrap my-2 flex items-center`;
+    return {
+      class: {
+        [base]: true,
+      },
+    };
+  },
+  itemLink: () => {
+    const states = tw`outline-4 outline-offset-4 outline-blue-800 focus:outline`;
+    return {
+      class: {
+        "underline ris-link1-bold cursor-pointer inline-flex items-center":
+          true,
+        [states]: true,
+      },
+    };
+  },
+  separator: () => {
+    return {
+      class: {
+        "flex items-center text-gray-600 mx-2": true,
+      },
+    };
+  },
+};
+
+export default breadcrumb;

src/primevue/index.ts

@@ -17,6 +17,7 @@ import textarea from "./textarea/textarea";
 import toast from "./toast/toast";
 import select from "./select/select";
 import inputMask from "./inputMask/inputMask";
+import breadcrumb from "@/primevue/breadcrumb/breadcrumb";
 
 import { deDE } from "@/config/locale";
 
@@ -38,6 +39,7 @@ export const RisUiTheme = {
   autocomplete,
   select,
   inputMask,
+  breadcrumb,
 };
 
 export const RisUiLocale = {