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"
         >{{ title }}</LinkableHeading>
       </slot>
@@ -46,6 +46,7 @@ export default {
   },
   computed: {
     anchorComputed: ({ title, anchor }) => anchor || anchorize(title),
+    className: () => 'contenttable-title',
   },
 };
 </script>
@@ -66,7 +67,7 @@ export default {
   }
 }
 
-/deep/ .title {
+/deep/ .contenttable-title {
   @include font-styles(label);
 }
 
@@ -85,7 +86,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,8 +16,8 @@
       :title="section.title"
       :anchor="section.anchor"
     >
-      <template v-if="wrapTitle" slot="title">
-        <LinkableHeading :level="3" :anchor="section.anchor" class="title">
+      <template v-if="wrapTitle" #title="{ className }">
+        <LinkableHeading :level="3" :anchor="section.anchor" :class="className">
           <WordBreak>{{ section.title }}</WordBreak>
         </LinkableHeading>
       </template>

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

@@ -33,7 +33,7 @@ describe('ContentTableSection', () => {
     const title = div.find(LinkableHeading);
     expect(title.exists()).toBe(true);
     expect(title.props('level')).toBe(3);
-    expect(title.classes('title')).toBe(true);
+    expect(title.classes()).toContain('contenttable-title');
     expect(title.text()).toContain(propsData.title);
   });
 
@@ -49,12 +49,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,
+      },
     });
   });
 
@@ -172,5 +175,6 @@ describe('TopicsTable', () => {
     expect(linkableHeading.exists()).toBe(true);
     expect(linkableHeading.props('level')).toBe(3);
     expect(linkableHeading.attributes('anchor')).toBe(propsData.sections[0].anchor);
+    expect(linkableHeading.classes()).toContain('contenttable-title');
   });
 });