[r96943502] fix: address feedback

Author: marinaaisa

src/components/ContentNode.vue

@@ -11,7 +11,7 @@
 <script>
 import Aside from './ContentNode/Aside.vue';
 import CodeListing from './ContentNode/CodeListing.vue';
-import SectionTitle from './ContentNode/SectionTitle.vue';
+import LinkableHeading from './ContentNode/LinkableHeading.vue';
 import CodeVoice from './ContentNode/CodeVoice.vue';
 import DictionaryExample from './ContentNode/DictionaryExample.vue';
 import EndpointExample from './ContentNode/EndpointExample.vue';
@@ -25,7 +25,6 @@ import StrikeThrough from './ContentNode/StrikeThrough.vue';
 const BlockType = {
   aside: 'aside',
   codeListing: 'codeListing',
-  sectionTitle: 'sectionTitle',
   endpointExample: 'endpointExample',
   heading: 'heading',
   orderedList: 'orderedList',
@@ -232,9 +231,9 @@ function renderNode(createElement, references) {
     case BlockType.heading: {
       const props = {
         anchor: node.anchor,
-        tag: `h${node.level}`,
+        level: Number(node.level),
       };
-      return createElement(SectionTitle, { props }, node.text);
+      return createElement(LinkableHeading, { props }, node.text);
     }
     case BlockType.orderedList:
       return createElement('ol', {

src/components/ContentNode/SectionTitle.vue renamed to src/components/ContentNode/LinkableHeading.vue

@@ -10,8 +10,8 @@
 
 <template>
   <component
-   :id="!isTargetIDE ? id : null"
-   :is="tag"
+   :id="id"
+   :is="`h${level}`"
    class="section-title"
   >
     <a
@@ -28,8 +28,10 @@
 <script>
 import scrollToElement from 'docc-render/mixins/scrollToElement';
 
+const HeadingLevels = [1, 2, 3, 4, 5, 6];
+
 export default {
-  name: 'SectionTitle',
+  name: 'LinkableHeading',
   mixins: [scrollToElement],
   data() {
     return {
@@ -41,9 +43,10 @@ export default {
       type: String,
       required: false,
     },
-    tag: {
-      type: String,
-      default: () => 'h2',
+    level: {
+      type: Number,
+      default: () => 2,
+      validator: v => v in HeadingLevels,
     },
   },
   inject: {

src/components/DocumentationTopic/ContentTable.vue

@@ -15,19 +15,19 @@
     :title="title"
   >
     <div class="container">
-      <SectionTitle class="title" :anchor="anchor">{{ title }}</SectionTitle>
+      <LinkableHeading class="title" :anchor="anchor">{{ title }}</LinkableHeading>
       <slot />
     </div>
   </OnThisPageSection>
 </template>
 
 <script>
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import OnThisPageSection from './OnThisPageSection.vue';
 
 export default {
   name: 'ContentTable',
-  components: { OnThisPageSection, SectionTitle },
+  components: { OnThisPageSection, LinkableHeading },
   props: {
     anchor: {
       type: String,

src/components/DocumentationTopic/ContentTableSection.vue

@@ -12,7 +12,11 @@
   <div class="contenttable-section">
     <div class="section-title">
       <slot name="title">
-        <SectionTitle tag="h3" class="title" :anchor="anchor">{{ title }}</SectionTitle>
+        <LinkableHeading
+          :level="3"
+          class="title"
+          :anchor="anchorComputed"
+        >{{ title }}</LinkableHeading>
       </slot>
     </div>
     <div class="section-content">
@@ -24,20 +28,24 @@
 </template>
 
 <script>
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import { anchorize } from 'docc-render/utils/strings';
 
 export default {
   name: 'ContentTableSection',
-  components: { SectionTitle },
+  components: { LinkableHeading },
   props: {
     title: {
       type: String,
       required: true,
     },
+    anchor: {
+      type: String,
+      default: null,
+    },
   },
   computed: {
-    anchor: ({ title }) => anchorize(title),
+    anchorComputed: ({ title, anchor }) => anchor || anchorize(title),
   },
 };
 </script>

src/components/DocumentationTopic/PrimaryContent/Declaration.vue

@@ -14,7 +14,7 @@
     class="declaration"
     title="Declaration"
   >
-    <SectionTitle anchor="declaration">Declaration</SectionTitle>
+    <LinkableHeading anchor="declaration">Declaration</LinkableHeading>
     <template v-if="hasModifiedChanges">
       <DeclarationDiff
         :class="[changeClasses, multipleLinesClass]"
@@ -48,7 +48,7 @@
 <script>
 import ConditionalConstraints from 'docc-render/components/DocumentationTopic/ConditionalConstraints.vue';
 import OnThisPageSection from 'docc-render/components/DocumentationTopic/OnThisPageSection.vue';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 
 import DeclarationGroup from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue';
 import DeclarationDiff
@@ -66,7 +66,7 @@ export default {
     DeclarationSourceLink,
     ConditionalConstraints,
     OnThisPageSection,
-    SectionTitle,
+    LinkableHeading,
   },
   constants: { ChangeTypes, multipleLinesClass },
   inject: ['identifier', 'store'],

src/components/DocumentationTopic/PrimaryContent/Parameters.vue

@@ -14,7 +14,7 @@
     class="parameters"
     title="Parameters"
   >
-    <SectionTitle anchor="parameters">Parameters</SectionTitle>
+    <LinkableHeading anchor="parameters">Parameters</LinkableHeading>
     <dl>
       <template v-for="param in parameters">
         <dt class="param-name" :key="`${param.name}:name`">
@@ -31,14 +31,14 @@
 <script>
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import OnThisPageSection from 'docc-render/components/DocumentationTopic/OnThisPageSection.vue';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 
 export default {
   name: 'Parameters',
   components: {
     ContentNode,
     OnThisPageSection,
-    SectionTitle,
+    LinkableHeading,
   },
   props: {
     parameters: {

src/components/DocumentationTopic/PrimaryContent/PropertyTable.vue

@@ -10,7 +10,7 @@
 
 <template>
   <OnThisPageSection :anchor="anchor" :title="title">
-    <SectionTitle :anchor="anchor">{{ title }}</SectionTitle>
+    <LinkableHeading :anchor="anchor">{{ title }}</LinkableHeading>
     <ParametersTable :parameters="properties" :changes="propertyChanges" class="property-table">
       <template slot="symbol" slot-scope="{ name, type, content, changes, deprecated }">
         <div class="property-name" :class="{ deprecated: deprecated }">
@@ -60,7 +60,7 @@
 
 <script>
 import { anchorize } from 'docc-render/utils/strings';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 
@@ -84,7 +84,7 @@ export default {
     ContentNode,
     OnThisPageSection,
     ParametersTable,
-    SectionTitle,
+    LinkableHeading,
   },
   props: {
     title: {

src/components/DocumentationTopic/PrimaryContent/RestBody.vue

@@ -10,7 +10,7 @@
 
 <template>
   <OnThisPageSection :anchor="anchor" :title="title">
-    <SectionTitle :anchor="anchor">{{ title }}</SectionTitle>
+    <LinkableHeading :anchor="anchor">{{ title }}</LinkableHeading>
     <ParametersTable :parameters="[bodyParam]" :changes="bodyChanges" keyBy="key">
       <template slot="symbol" slot-scope="{ type, content, changes, name }">
         <PossiblyChangedType
@@ -84,7 +84,7 @@
 import { anchorize } from 'docc-render/utils/strings';
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import OnThisPageSection from 'docc-render/components/DocumentationTopic/OnThisPageSection.vue';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 
 import WordBreak from 'docc-render/components/WordBreak.vue';
 import apiChangesProvider from 'docc-render/mixins/apiChangesProvider';
@@ -108,7 +108,7 @@ export default {
     ContentNode,
     OnThisPageSection,
     ParametersTable,
-    SectionTitle,
+    LinkableHeading,
   },
   constants: { ChangesKey },
   props: {

src/components/DocumentationTopic/PrimaryContent/RestEndpoint.vue

@@ -10,15 +10,15 @@
 
 <template>
   <OnThisPageSection :anchor="anchor" :title="title">
-    <SectionTitle :anchor="anchor">{{ title }}</SectionTitle>
+    <LinkableHeading :anchor="anchor">{{ title }}</LinkableHeading>
     <DeclarationSource :tokens="tokens" />
   </OnThisPageSection>
 </template>
 
 <script>
 import { anchorize } from 'docc-render/utils/strings';
 import OnThisPageSection from 'docc-render/components/DocumentationTopic/OnThisPageSection.vue';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import DeclarationSource
   from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue';
 
@@ -30,7 +30,7 @@ export default {
   components: {
     DeclarationSource,
     OnThisPageSection,
-    SectionTitle,
+    LinkableHeading,
   },
   props: {
     title: {

src/components/DocumentationTopic/PrimaryContent/RestParameters.vue

@@ -10,7 +10,7 @@
 
 <template>
   <OnThisPageSection :anchor="anchor" :title="title">
-    <SectionTitle :anchor="anchor">{{ title }}</SectionTitle>
+    <LinkableHeading :anchor="anchor">{{ title }}</LinkableHeading>
     <ParametersTable :parameters="parameters" :changes="parameterChanges">
       <template slot="symbol" slot-scope="{ name, type, content, changes, deprecated }">
         <div class="param-name" :class="{ deprecated: deprecated }">
@@ -55,7 +55,7 @@
 import { anchorize } from 'docc-render/utils/strings';
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import OnThisPageSection from 'docc-render/components/DocumentationTopic/OnThisPageSection.vue';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 
 import WordBreak from 'docc-render/components/WordBreak.vue';
 import apiChangesProvider from 'docc-render/mixins/apiChangesProvider';
@@ -77,7 +77,7 @@ export default {
     ContentNode,
     OnThisPageSection,
     ParametersTable,
-    SectionTitle,
+    LinkableHeading,
   },
   props: {
     title: {

src/components/DocumentationTopic/PrimaryContent/RestResponses.vue

@@ -10,7 +10,7 @@
 
 <template>
   <OnThisPageSection :anchor="anchor" :title="title">
-    <SectionTitle :anchor="anchor">{{ title }}</SectionTitle>
+    <LinkableHeading :anchor="anchor">{{ title }}</LinkableHeading>
     <ParametersTable :parameters="responses" :changes="propertyChanges" key-by="status">
       <template slot="symbol" slot-scope="{ status, type, reason, content, changes }">
         <div class="response-name">
@@ -51,7 +51,7 @@
 
 <script>
 import { anchorize } from 'docc-render/utils/strings';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import OnThisPageSection from 'docc-render/components/DocumentationTopic/OnThisPageSection.vue';
 
@@ -69,7 +69,7 @@ export default {
     ContentNode,
     OnThisPageSection,
     ParametersTable,
-    SectionTitle,
+    LinkableHeading,
   },
   props: {
     title: {

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,11 +14,12 @@
       v-for="section in sectionsWithTopics"
       :key="section.title"
       :title="section.title"
+      :anchor="section.anchor"
     >
       <template v-if="wrapTitle" slot="title">
-        <SectionTitle tag="h3" :anchor="anchor" class="title">
+        <LinkableHeading :level="3" :anchor="anchor" class="title">
           <WordBreak>{{ section.title }}</WordBreak>
-        </SectionTitle>
+        </LinkableHeading>
       </template>
       <template v-if="section.abstract" slot="abstract">
         <ContentNode :content="section.abstract" />
@@ -41,7 +42,7 @@
 <script>
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import ContentTable from './ContentTable.vue';
 import ContentTableSection from './ContentTableSection.vue';
 import TopicsLinkBlock from './TopicsLinkBlock.vue';
@@ -61,7 +62,7 @@ export default {
     TopicsLinkBlock,
     ContentNode,
     ContentTableSection,
-    SectionTitle,
+    LinkableHeading,
   },
   props: {
     isSymbolDeprecated: Boolean,

src/mixins/scrollToElement.js

@@ -31,7 +31,7 @@ export default {
      * Always scroll to the element and focus it.
      * This ensures that the next tab target is inside
      * and that it is in view, even if the hash is in the url
-     * @returns {Promise<void>}
+     * @returns {Promise<Element>}
     */
     async handleFocusAndScroll(hash) {
       const element = document.getElementById(hash);

tests/unit/components/ContentNode.spec.js

@@ -20,7 +20,7 @@ import FigureCaption from 'docc-render/components/ContentNode/FigureCaption.vue'
 import InlineImage from 'docc-render/components/ContentNode/InlineImage.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import Table from 'docc-render/components/ContentNode/Table.vue';
-import SectionTitle from 'docc-render/components/ContentNode/SectionTitle.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import StrikeThrough from 'docc-render/components/ContentNode/StrikeThrough.vue';
 
 const { TableHeaderStyle } = ContentNode.constants;
@@ -153,17 +153,17 @@ describe('ContentNode', () => {
 
   describe('with type="heading"', () => {
     it('renders a <h*>', () => {
-      for (let level = 1; level <= 6; level += 1) {
+      for (let level = 1; level < 6; level += 1) {
         const wrapper = mountWithItem({
           type: 'heading',
           anchor: 'heading',
           level,
           text: 'heading',
         });
 
-        const sectionTitle = wrapper.find('.content').find(SectionTitle);
+        const sectionTitle = wrapper.find('.content').find(LinkableHeading);
         expect(sectionTitle.exists()).toBe(true);
-        expect(sectionTitle.attributes('tag')).toBe(`h${level}`);
+        expect(sectionTitle.props('level')).toBe(level);
         expect(sectionTitle.attributes('anchor')).toBe('heading');
         expect(sectionTitle.isEmpty()).toBe(false);
         expect(sectionTitle.text()).toContain('heading');