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: String,
       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 === TopicStyles.compactGrid
+        || topicSectionsStyle === TopicStyles.detailedGrid
+      ) {
+        return false;
+      }
+      return symbolKind ? (symbolKind === 'module') : true;
+    },
     shortHero: ({
       roleHeading,
       abstract,

tests/unit/components/DocumentationTopic.spec.js

@@ -276,6 +276,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: TopicStyles.detailedGrid });
+    expect(hero.props('enhanceBackground')).toBe(false);
+    wrapper.setProps({ topicSectionsStyle: TopicStyles.compactGrid });
+    expect(hero.props('enhanceBackground')).toBe(false);
+  });
+
   it('renders a `Title`', () => {
     const hero = wrapper.find(DocumentationHero);
 
@@ -446,7 +462,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 = [