refactor: do rename the ContentTableSection title to reduce polluting child .title classes.

Author: Dobromir Hristov

src/components/DocumentationTopic/ContentTableSection.vue

@@ -11,10 +11,10 @@
 <template>
   <div class="contenttable-section">
     <div class="section-title">
-      <slot name="title">
+      <slot name="title" :className="className">
         <LinkableHeading
           :level="3"
-          class="title"
+          :class="className"
           :anchor="anchorComputed"
           :register-on-this-page="false"
         >{{ title }}</LinkableHeading>
@@ -47,6 +47,7 @@ export default {
   },
   computed: {
     anchorComputed: ({ title, anchor }) => anchor || anchorize(title),
+    className: () => 'contenttable-title',
   },
 };
 </script>
@@ -67,7 +68,7 @@ export default {
   }
 }
 
-/deep/ .title {
+/deep/ .contenttable-title {
   @include font-styles(label);
 }
 
@@ -86,7 +87,7 @@ export default {
     }
   }
 
-  /deep/ .title {
+  /deep/ .contenttable-title {
     margin: 0 0 $contenttable-spacing-single-side 0;
     padding-bottom: 0.5rem;
   }

src/components/DocumentationTopic/TopicsTable.vue

@@ -16,11 +16,11 @@
       :title="section.title"
       :anchor="section.anchor"
     >
-      <template v-if="wrapTitle" slot="title">
+      <template v-if="wrapTitle" #title="{ className }">
         <LinkableHeading
           :level="3"
           :anchor="section.anchor"
-          class="title"
+          :class="className"
           :register-on-this-page="false"
         >
           <WordBreak>{{ section.title }}</WordBreak>

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

@@ -34,7 +34,7 @@ describe('ContentTableSection', () => {
     expect(title.exists()).toBe(true);
     expect(title.props('level')).toBe(3);
     expect(title.props('registerOnThisPage')).toBe(false);
-    expect(title.classes('title')).toBe(true);
+    expect(title.classes()).toContain('contenttable-title');
     expect(title.text()).toContain(propsData.title);
   });
 
@@ -50,12 +50,12 @@ describe('ContentTableSection', () => {
   it('renders a slot for a title', () => {
     wrapper = shallowMount(ContentTableSection, {
       propsData,
-      slots: {
-        title: '<div class="title">Title Text</div>',
+      scopedSlots: {
+        title: '<div :class="props.className">Title Text</div>',
       },
     });
     const div = wrapper.find('.section-title');
-    const title = div.find('.title');
+    const title = div.find('.contenttable-title');
     expect(title.text()).toEqual('Title Text');
   });
 

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

@@ -66,6 +66,9 @@ describe('TopicsTable', () => {
     wrapper = shallowMount(TopicsTable, {
       propsData,
       provide,
+      stubs: {
+        ContentTableSection,
+      },
     });
   });
 
@@ -173,5 +176,6 @@ describe('TopicsTable', () => {
     expect(linkableHeading.props('level')).toBe(3);
     expect(linkableHeading.props('registerOnThisPage')).toBe(false);
     expect(linkableHeading.attributes('anchor')).toBe(propsData.sections[0].anchor);
+    expect(linkableHeading.classes()).toContain('contenttable-title');
   });
 });