Update link styling and behaviour

feat(breadcrumb): update link styling and behaviour

- Changes to filled house icon on hover for the home link
- Breadcrumb links are now regular, with underline only on hover
- Adjusted link line height for `.ris-link1-bold` to 1.25 for consistency with non links
- Applied `word-break: break-all` to prevent word cutoff
- Fixed line clamp for items with links

src/primevue/breadcrumb/breadcrumb.stories.ts

@@ -4,24 +4,29 @@ 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 HomeFilledIcon from "~icons/material-symbols/home";
 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 },
+  render: () => ({
+    components: {
+      Breadcrumb,
+      HomeOutlineIcon,
+      ChevronRightIcon,
+      HomeFilledIcon,
+    },
     setup() {
       const items = ref([
         { label: "", type: "home", route: "/" },
-        { label: "Gesetze & Verordnungen", route: "/laws" },
+        { label: "Gesetze & VerordnungenGesetze", route: "/laws" },
         { label: "BGB Bürgerliches Gesetzbuch", route: "/bgb" },
         { label: "Buch 2", route: "/book-2" },
         { label: "Abschnitt 3" },
@@ -30,7 +35,9 @@ export const Default: Story = {
         { label: "§ 312e Verletzung von Informationspflichten über Kosten" },
       ]);
 
-      return { args, items };
+      const isHovered = ref(false);
+
+      return { items, isHovered };
     },
     template: html`
       <div class="card flex justify-center">
@@ -42,16 +49,21 @@ export const Default: Story = {
               :to="item.route"
               custom
             >
-              <a
-                :href="href"
-                v-bind="props.action"
-                @click="navigate"
-                class="line-clamp-1"
-              >
+              <a :href="href" v-bind="props.action" @click="navigate">
                 <template v-if="item.type === 'home'">
-                  <HomeOutlineIcon />
+                  <span
+                    @mouseenter="isHovered = true"
+                    @mouseleave="isHovered = false"
+                  >
+                    <template v-if="isHovered">
+                      <HomeFilledIcon />
+                    </template>
+                    <template v-else>
+                      <HomeOutlineIcon />
+                    </template>
+                  </span>
                 </template>
-                <template v-else> {{ item.label }} </template>
+                <span v-else class="line-clamp-1"> {{ item.label }} </span>
               </a>
             </router-link>
             <span v-else class="line-clamp-1">{{ item.label }}</span>

src/primevue/breadcrumb/breadcrumb.ts

@@ -2,38 +2,17 @@ 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,
-      },
-    };
+  list: {
+    class: tw`m-0 flex list-none flex-wrap items-center p-0 leading-none`,
   },
-  item: () => {
-    const base = tw`flex-no-wrap ris-label1-regular my-2 flex items-center`;
-    return {
-      class: {
-        [base]: true,
-      },
-    };
+  item: {
+    class: tw`flex-no-wrap ris-label1-regular my-2 flex items-center`,
   },
-  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,
-      },
-    };
+  itemLink: {
+    class: tw`ris-link1-regular inline-flex cursor-pointer items-center leading-tight no-underline outline-4 outline-offset-4 outline-blue-800 hover:underline focus:outline`,
   },
-  separator: () => {
-    return {
-      class: {
-        "flex items-center text-gray-600 mx-2": true,
-      },
-    };
+  separator: {
+    class: tw`mx-2 flex items-center text-gray-600`,
   },
 };