Allow customTag in NavigatorCardItem

Author: marinaaisa

src/components/Navigator/NavigatorCardItem.vue

@@ -184,6 +184,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    customTag: {
+      type: String,
+      require: false,
+    },
   },
   idState() {
     return {
@@ -204,7 +208,11 @@ export default {
     ),
     isBeta: ({ item: { beta } }) => !!beta,
     isDeprecated: ({ item: { deprecated } }) => !!deprecated,
-    refComponent: ({ isGroupMarker }) => (isGroupMarker ? 'h3' : Reference),
+    refComponent: ({ isGroupMarker, customTag }) => {
+      if (customTag) return customTag;
+      if (isGroupMarker) return 'h3';
+      return Reference;
+    },
   },
   methods: {
     toggleTree() {

tests/unit/components/Navigator/NavigatorCardItem.spec.js

@@ -86,6 +86,16 @@ describe('NavigatorCardItem', () => {
     expect(cardItem.attributes('data-nesting-index')).toBe(String(defaultProps.item.depth));
   });
 
+  it('renders a custom tag for the leaf-link if customTag is defined', () => {
+    const wrapper = createWrapper({
+      propsData: {
+        customTag: 'button',
+      },
+    });
+    const leafLink = wrapper.find('.leaf-link');
+    expect(leafLink.is('button')).toBe(true);
+  });
+
   it('renders the NavigationCardItem with an icon override', () => {
     const navigatorReferences = {
       iconRef: {