Add anchors to ContentTableSection

src/components/DocumentationTopic/ContentTableSection.vue

@@ -12,7 +12,7 @@
   <div class="contenttable-section">
     <div class="section-title">
       <slot name="title">
-        <h3 class="title">{{ title }}</h3>
+        <h3 class="title" :id="anchor">{{ title }}</h3>
       </slot>
     </div>
     <div class="section-content">
@@ -31,6 +31,10 @@ export default {
       type: String,
       required: true,
     },
+    anchor: {
+      type: String,
+      default: null,
+    },
   },
 };
 </script>

src/components/DocumentationTopic/Relationships.vue

@@ -17,6 +17,7 @@
       v-for="section in sectionsWithSymbols"
       :key="section.type"
       :title="section.title"
+      :anchor="section.anchor"
     >
       <List :symbols="section.symbols" :type="section.type" />
     </Section>

src/components/DocumentationTopic/TopicsTable.vue

@@ -14,6 +14,7 @@
       v-for="section in sectionsWithTopics"
       :key="section.title"
       :title="section.title"
+      :anchor="section.anchor"
     >
       <template v-if="wrapTitle" slot="title">
         <WordBreak tag="h3" class="title">

tests/unit/components/DocumentationTopic/ContentTableSection.spec.js

@@ -32,6 +32,15 @@ describe('ContentTableSection', () => {
     expect(title.text()).toBe(propsData.title);
   });
 
+  it('renders an `id` if `anchor` is provided', () => {
+    const title = wrapper.find('.title');
+    expect(title.attributes('id')).toBe(undefined);
+    wrapper.setProps({
+      anchor: 'foo-bar',
+    });
+    expect(title.attributes('id')).toBe('foo-bar');
+  });
+
   it('renders a slot for a title', () => {
     wrapper = shallowMount(ContentTableSection, {
       propsData,

tests/unit/components/DocumentationTopic/Relationships.spec.js

@@ -47,6 +47,7 @@ describe('Relationships', () => {
           foo.identifier,
           bar.identifier,
         ],
+        anchor: 'inherits-from',
       },
       {
         type: 'conformsTo',
@@ -83,6 +84,7 @@ describe('Relationships', () => {
 
     const firstSection = sections.at(0);
     expect(firstSection.props('title')).toBe(propsData.sections[0].title);
+    expect(firstSection.props('anchor')).toBe(propsData.sections[0].anchor);
     const firstList = firstSection.find(List);
     expect(firstList.exists()).toBe(true);
     expect(firstList.props('symbols')).toEqual([
@@ -93,6 +95,7 @@ describe('Relationships', () => {
 
     const lastSection = sections.at(1);
     expect(lastSection.props('title')).toBe(propsData.sections[1].title);
+    expect(lastSection.props('anchor')).toBe(null);
     const lastList = lastSection.find(List);
     expect(lastList.exists()).toBe(true);
     expect(lastList.props('symbols')).toEqual([baz]);

tests/unit/components/DocumentationTopic/TopicsTable.spec.js

@@ -44,6 +44,7 @@ describe('TopicsTable', () => {
         abstract: [{ type: 'text', text: 'foo abstract' }],
         discussion: { type: 'content', content: [{ type: 'text', text: 'foo discussion' }] },
         identifiers: [foo.identifier, 'bar'],
+        anchor: 'foobar',
       },
       {
         title: 'Baz',
@@ -77,7 +78,9 @@ describe('TopicsTable', () => {
     const sections = wrapper.findAll(ContentTableSection);
     expect(sections.length).toBe(propsData.sections.length);
     expect(sections.at(0).props('title')).toBe(propsData.sections[0].title);
+    expect(sections.at(0).props('anchor')).toBe(propsData.sections[0].anchor);
     expect(sections.at(1).props('title')).toBe(propsData.sections[1].title);
+    expect(sections.at(1).props('anchor')).toBe(null);
   });
 
   it('renders a `TopicsLinkBlock` for each topic with reference data in a section', () => {