Merge pull request #10 from hqhhuang/remove-hero-from-symbol

New Hero/Introduction section design: Remove Dark Hero from symbol pages

Fixes: rdar://89970711

Author: mportiz08

src/components/DocumentationTopic.vue

@@ -11,7 +11,7 @@
 <template>
   <div class="doc-topic">
     <main class="main" id="main" role="main" tabindex="0">
-      <DocumentationHero :type="symbolKind || role">
+      <DocumentationHero :type="symbolKind || role" :enhanceBackground="enhanceBackground">
         <slot name="above-title" />
         <Title :eyebrow="roleHeading">{{ title }}</Title>
         <Abstract v-if="abstract" :content="abstract" />
@@ -52,6 +52,7 @@
         </Summary>
         <PrimaryContent
           v-if="primaryContentSections && primaryContentSections.length"
+          :class="{ 'with-border': !enhanceBackground }"
           :conformance="conformance"
           :sections="primaryContentSections"
         />
@@ -300,6 +301,7 @@ export default {
     ),
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
     hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
+    enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
   },
   methods: {
     normalizePath(path) {

src/components/DocumentationTopic/DocumentationHero.vue

@@ -9,9 +9,18 @@
 -->
 
 <template>
-  <div class="documentation-hero" :style="styles">
-    <NavigatorLeafIcon :type="type" key="first" class="background-icon first-icon" with-colors />
-    <NavigatorLeafIcon :type="type" key="second" class="background-icon second-icon" with-colors />
+  <div
+    :class="['documentation-hero', { 'documentation-hero--disabled': !enhanceBackground }]"
+    :style="styles"
+  >
+    <NavigatorLeafIcon
+      v-if="enhanceBackground" :type="type"
+      key="first" class="background-icon first-icon" with-colors
+    />
+    <NavigatorLeafIcon
+      v-if="enhanceBackground" :type="type"
+      key="second" class="background-icon second-icon" with-colors
+    />
     <div class="documentation-hero__content">
       <slot />
     </div>
@@ -31,6 +40,10 @@ export default {
       type: String,
       required: true,
     },
+    enhanceBackground: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     // get the alias, if any, and fallback to the `teal` color
@@ -53,7 +66,7 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
 
 .documentation-hero {
   background: dark-color(fill);
-  color: light-color(fill);
+  color: dark-color(figure-gray);
   overflow: hidden;
   text-align: left;
   padding-top: rem(40px);
@@ -127,4 +140,17 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
     @include dynamic-content-container;
   }
 }
+
+.documentation-hero--disabled {
+  background: none;
+  color: var(--colors-text, var(--color-text));
+
+  &:before {
+    content: none;
+  }
+
+  &:after {
+    content: none;
+  }
+}
 </style>

src/components/DocumentationTopic/PrimaryContent.vue

@@ -150,7 +150,7 @@ export default {
 }
 
 .primary-content {
-  &::before {
+  &.with-border::before {
     border-top-color: var(--colors-grid, var(--color-grid));
     border-top-style: solid;
     border-top-width: 1px;

src/components/DocumentationTopic/Title.vue

@@ -35,14 +35,22 @@ export default {
 
 .eyebrow {
   @include font-styles(eyebrow-reduced);
-  color: light-color(fill-gray-tertiary);
+  color: dark-color(figure-gray-secondary);
   display: block;
   margin-bottom: rem(20px);
+
+  .documentation-hero--disabled & {
+    color: var(--colors-secondary-label, var(--color-secondary-label));
+  }
 }
 
 .title {
   @include font-styles(headline-reduced);
-  color: light-color(fill);
+  color: dark-color(figure-gray);
   margin-bottom: rem(12px);
+
+  .documentation-hero--disabled & {
+    color: var(--colors-header-text, var(--color-header-text));
+  }
 }
 </style>

tests/unit/components/DocumentationTopic.spec.js

@@ -205,19 +205,36 @@ describe('DocumentationTopic', () => {
     expect(main.attributes('tabindex')).toBe('0');
   });
 
-  it('renders a `DocumentationHero`', () => {
+  it('renders a `DocumentationHero`, enabled', () => {
     const hero = wrapper.find(DocumentationHero);
     expect(hero.exists()).toBe(true);
-    expect(hero.props()).toEqual({ type: propsData.symbolKind });
+    expect(hero.props()).toEqual({ type: propsData.symbolKind, enhanceBackground: true });
   });
 
-  it('renders a `DocumentationHero`, with a the `role`, if no symbolKind', () => {
+  it('renders a `DocumentationHero`, enabled, with a the `role`, if no symbolKind', () => {
     wrapper.setProps({
       role: TopicTypes.article,
       symbolKind: '',
     });
     const hero = wrapper.find(DocumentationHero);
-    expect(hero.props()).toEqual({ type: TopicTypes.article });
+    expect(hero.props()).toEqual({ type: TopicTypes.article, enhanceBackground: true });
+  });
+
+  it('render a `DocumentationHero`, enabled, if top-level technology page', () => {
+    wrapper.setProps({
+      role: TopicTypes.collection,
+      symbolKind: 'module',
+    });
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props()).toEqual({ type: TopicTypes.module, enhanceBackground: true });
+  });
+
+  it('render a `DocumentationHero`, disabled, if symbol page', () => {
+    wrapper.setProps({
+      symbolKind: 'protocol',
+    });
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props()).toEqual({ type: TopicTypes.protocol, enhanceBackground: false });
   });
 
   it('renders a `Title`', () => {

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

@@ -20,6 +20,7 @@ import NavigatorLeafIcon from '@/components/Navigator/NavigatorLeafIcon.vue';
 
 const defaultProps = {
   type: TopicTypes.class,
+  enhanceBackground: true,
 };
 
 const createWrapper = ({ propsData, ...others } = {}) => shallowMount(DocumentationHero, {
@@ -34,7 +35,7 @@ const createWrapper = ({ propsData, ...others } = {}) => shallowMount(Documentat
 });
 
 describe('DocumentationHero', () => {
-  it('renders the DocumentationHero', () => {
+  it('renders the DocumentationHero, enabled', () => {
     const wrapper = createWrapper();
     const allIcons = wrapper.findAll(NavigatorLeafIcon);
     expect(allIcons).toHaveLength(2);
@@ -73,4 +74,19 @@ describe('DocumentationHero', () => {
       '--accent-color': `var(--color-type-icon-${TopicTypeColors.teal}, var(--color-figure-gray-secondary))`,
     });
   });
+
+  it('renders the DocumentationHero, disabled', () => {
+    const wrapper = createWrapper();
+    wrapper.setProps({
+      enhanceBackground: false,
+    });
+    // assert no icon
+    const allIcons = wrapper.findAll(NavigatorLeafIcon);
+    expect(allIcons).toHaveLength(0);
+    // assert slot
+    expect(wrapper.find('.default-slot').text()).toBe('Default Slot');
+    expect(wrapper.vm.styles).toEqual({
+      '--accent-color': `var(--color-type-icon-${TopicTypeColorsMap[defaultProps.type]}, var(--color-figure-gray-secondary))`,
+    });
+  });
 });