Add slots to Navigator Components (#789) rdar://119614739

Add slots to Navigator Components (#789) rdar://119614739

Author: hqhhuang

src/components/Navigator/BaseNavigatorCardItem.vue

@@ -26,6 +26,9 @@
       <div class="title-container">
         <slot name="title-container" />
       </div>
+      <div class="content-container">
+        <slot name="content-container" />
+      </div>
     </div>
   </div>
 </template>

src/components/Navigator/NavigatorCard.vue

@@ -71,6 +71,7 @@
               :item="item"
               :isRendered="active"
               :filter-pattern="filterPattern"
+              :filter-text="debouncedFilter"
               :is-active="item.uid === activeUID"
               :is-bold="activePathMap[item.uid]"
               :expanded="openNodes[item.uid]"
@@ -129,7 +130,7 @@ import {
   SIDEBAR_ITEM_SIZE,
 } from 'docc-render/constants/sidebar';
 import { safeHighlightPattern } from 'docc-render/utils/search-utils';
-import NavigatorCardItem from 'docc-render/components/Navigator/NavigatorCardItem.vue';
+import NavigatorCardItem from 'theme/components/Navigator/NavigatorCardItem.vue';
 import BaseNavigatorCard from 'docc-render/components/Navigator/BaseNavigatorCard.vue';
 import { TopicTypes } from 'docc-render/constants/TopicTypes';
 import FilterInput from 'docc-render/components/Filter/FilterInput.vue';

src/components/Navigator/NavigatorCardItem.vue

@@ -105,6 +105,9 @@
       <Badge v-if="isDeprecated" variant="deprecated" />
       <Badge v-else-if="isBeta" variant="beta" />
     </template>
+    <template #content-container>
+      <slot name="card-item-content" />
+    </template>
   </BaseNavigatorCardItem>
 </template>
 
@@ -152,6 +155,10 @@ export default {
       type: RegExp,
       default: undefined,
     },
+    filterText: {
+      type: String,
+      default: null,
+    },
     isActive: {
       type: Boolean,
       default: false,
@@ -263,7 +270,7 @@ $chevron-width: $nav-card-horizontal-spacing;
 
 .is-group {
   .leaf-link {
-    color: var(--color-figure-gray-secondary);
+    color: var(--color-figure-gray-tertiary);
     font-weight: $font-weight-semibold;
     // groups dont need the overlay
     &:after {

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

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2022 Apple Inc. and the Swift project authors
+ * Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -79,4 +79,15 @@ describe('BaseNavigatorCardItem', () => {
     expect(wrapper.find('.title-container').exists()).toBe(true);
     expect(wrapper.find('.title-container-slot').exists()).toBe(true);
   });
+
+  it('renders a slot for content-container', () => {
+    wrapper = shallowMount(BaseNavigatorCardItem, {
+      slots: {
+        'content-container': '<div class="content-container-slot"></div>',
+      },
+    });
+
+    expect(wrapper.find('.content-container').exists()).toBe(true);
+    expect(wrapper.find('.content-container-slot').exists()).toBe(true);
+  });
 });

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

@@ -273,6 +273,7 @@ describe('NavigatorCard', () => {
       isActive: false,
       isRendered: false,
       filterPattern: null,
+      filterText: '',
       isFocused: false,
       isBold: true,
       item: root0,
@@ -574,6 +575,7 @@ describe('NavigatorCard', () => {
         isFocused: false,
         item,
         filterPattern: null,
+        filterText: '',
         isRendered: false,
         apiChange: null,
         enableFocus: false,
@@ -2143,6 +2145,7 @@ describe('NavigatorCard', () => {
         apiChange: null,
         expanded: true,
         filterPattern: null,
+        filterText: '',
         isActive: true,
         isBold: true,
         isFocused: true,
@@ -2168,6 +2171,7 @@ describe('NavigatorCard', () => {
         apiChange: null,
         expanded: true,
         filterPattern: null,
+        filterText: '',
         isActive: true,
         isBold: true,
         isFocused: true,

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

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -538,5 +538,14 @@ describe('NavigatorCardItem', () => {
       expect(waitFrames).toHaveBeenCalledWith(8);
       expect(document.activeElement).not.toEqual(wrapper.element);
     });
+
+    it('exposes a #card-item-content slot', () => {
+      const wrapper = createWrapper({
+        scopedSlots: {
+          'card-item-content': '<div class="card-item-content">CustomNavigatorCardItemContentComponent</div>',
+        },
+      });
+      expect(wrapper.find('.card-item-content').text()).toBe('CustomNavigatorCardItemContentComponent');
+    });
   });
 });