refactor: disable DocumentationHero background when topicSectionsStyle is a grid, or via a prop from DocumentationTopic

Author: Dobromir Hristov

src/components/DocumentationTopic.vue

@@ -281,6 +281,10 @@ export default {
       type: Array,
       required: false,
     },
+    disableHeroBackground: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.references change, the provided value
@@ -322,7 +326,18 @@ export default {
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath, isTargetIDE }) => (
       !!(objcPath && swiftPath && isTargetIDE)
     ),
-    enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
+    enhanceBackground: ({ symbolKind, disableHeroBackground, topicSectionsStyle }) => {
+      if (
+        // if the hero bg is forcefully disabled
+        disableHeroBackground
+        // or the topicSectionsStyle is a `grid` type
+        || topicSectionsStyle === TopicSectionsStyle.compactGrid
+        || topicSectionsStyle === TopicSectionsStyle.detailedGrid
+      ) {
+        return false;
+      }
+      return symbolKind ? (symbolKind === 'module') : true;
+    },
     shortHero: ({
       roleHeading,
       abstract,

tests/unit/components/DocumentationTopic.spec.js

@@ -291,6 +291,22 @@ describe('DocumentationTopic', () => {
     });
   });
 
+  it('renders a `DocumentationHero`, disabled, if `disableHeroBackground` prop is `true`', () => {
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props('enhanceBackground')).toBe(true);
+    wrapper.setProps({ disableHeroBackground: true });
+    expect(hero.props('enhanceBackground')).toBe(false);
+  });
+
+  it('renders a `DocumentationHero`, disabled, if the `topicSectionsStyle` is a grid type', () => {
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props('enhanceBackground')).toBe(true);
+    wrapper.setProps({ topicSectionsStyle: TopicSectionsStyle.detailedGrid });
+    expect(hero.props('enhanceBackground')).toBe(false);
+    wrapper.setProps({ topicSectionsStyle: TopicSectionsStyle.compactGrid });
+    expect(hero.props('enhanceBackground')).toBe(false);
+  });
+
   it('renders a `Title`', () => {
     const hero = wrapper.find(DocumentationHero);
 
@@ -461,7 +477,7 @@ describe('DocumentationTopic', () => {
     });
   });
 
-  it('renders `Topics` if there are topic sections, passing the `topicSectionStyles` over', () => {
+  it('renders `Topics` if there are topic sections, passing the `topicSectionsStyle` over', () => {
     expect(wrapper.contains(Topics)).toBe(false);
 
     const topicSections = [

tests/unit/views/DocumentationTopic.spec.js

@@ -542,6 +542,7 @@ describe('DocumentationTopic', () => {
         swift: ['documentation/swift'],
       },
       topicSectionsStyle: TopicSectionsStyle.list, // default value
+      disableHeroBackground: false,
     });
   });