add linkComponent prop on vue

components/DocMenu/vue/DocMenu.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { DefineComponent } from 'vue'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
 import DocGroup from './_DocGroup.vue'
 import DocLink from './_DocLink.vue'
@@ -7,20 +8,32 @@ withDefaults(
   defineProps<{
     items: (NavItemLink | NavGroup)[]
     collapsible?: boolean
+    linkComponent?: DefineComponent | 'a'
   }>(),
   {
+    linkComponent: 'a',
     collapsible: true,
-  }
+  },
 )
 </script>
 
 <template>
   <ul class="overflow-y-hidden list-none p-0">
     <template v-for="item in items">
       <li v-if="'items' in item" class="relative list-none p-0">
-        <DocGroup :group="item" :depth="0" :collapsible="collapsible" />
+        <DocGroup
+          :group="item"
+          :depth="0"
+          :collapsible="collapsible"
+          :link-component="linkComponent"
+        />
       </li>
-      <DocLink v-else :item="item" :collapsible="collapsible" />
+      <DocLink
+        v-else
+        :item="item"
+        :collapsible="collapsible"
+        :link-component="linkComponent"
+      />
     </template>
   </ul>
 </template>

components/DocMenu/vue/DocMenuVue.cy.tsx

@@ -1,12 +1,50 @@
 /// <reference types="cypress" />
+import { type DefineComponent, defineComponent } from 'vue'
 import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import type { NavGroup, NavItemLink } from '../constants'
-import DocMenuStory from './DocMenu.rootstory'
+import DocMenu from './DocMenu.vue'
+
+const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
+  defineComponent({
+    props: {
+      href: String,
+    },
+    setup(props, { slots }) {
+      return () => (
+        <div>
+          {slots.default?.()} + href: {props.href}
+        </div>
+      )
+    },
+  })
 
 describe('<DocMenu/>', () => {
+  it('renders', () => {
+    mount(() => <DocMenu items={[{ href: '/foo', label: 'Foo' }]} />)
+    cy.get('ul').should('exist')
+  })
+
+  it('renders the custom link components', () => {
+    mount(() => (
+      <DocMenu
+        items={[
+          {
+            label: 'Baaaaaaz',
+            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+          },
+        ]}
+        linkComponent={CustomLinkVue}
+      />
+    ))
+    cy.findByText('Bar').click()
+    cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
+  })
+
   function mountStory(items: (NavItemLink | NavGroup)[] = []) {
-    mount(() => <DocMenuStory items={items} />)
+    mount(() => {
+      return <DocMenu items={items} />
+    })
   }
   assertions(mountStory)
 })

components/DocMenu/vue/_DocGroup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, Ref, ref } from 'vue'
+import { computed, type DefineComponent, Ref, ref } from 'vue'
 import { IconChevronDownSmall } from '@cypress-design/vue-icon'
 import { NavGroup, classes } from '@cypress-design/constants-docmenu'
 import DocLink from './_DocLink.vue'
@@ -9,6 +9,7 @@ const props = withDefaults(
   defineProps<{
     group: NavGroup
     collapsible: boolean
+    linkComponent: DefineComponent | 'a'
     depth?: number
   }>(),
   {
@@ -120,9 +121,16 @@ const Head = computed(() =>
           :group="item"
           :depth="depth + 1"
           :collapsible="props.collapsible"
+          :link-component="props.linkComponent"
         />
       </li>
-      <DocLink v-else :item="item" :depth="depth" :collapsible="collapsible" />
+      <DocLink
+        v-else
+        :item="item"
+        :depth="depth"
+        :collapsible="collapsible"
+        :link-component="props.linkComponent"
+      />
     </template>
   </ul>
 </template>

components/DocMenu/vue/_DocLink.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
+import type { DefineComponent } from 'vue'
 import type { NavItemLink } from '@cypress-design/constants-docmenu'
 
 withDefaults(
   defineProps<{
     item: NavItemLink
-    depth?: number
     collapsible: boolean
+    depth?: number
+    linkComponent: DefineComponent | 'a'
   }>(),
   {
     depth: -1,
@@ -20,7 +22,8 @@ withDefaults(
       'pl-[16px]': depth >= 0,
     }"
   >
-    <a
+    <component
+      :is="linkComponent"
       class="group relative block w-full pl-[24px]"
       :class="{
         'text-indigo-500': item.active,
@@ -40,6 +43,6 @@ withDefaults(
         }"
       />
       {{ item.label }}
-    </a>
+    </component>
   </li>
 </template>