Include Relationship section in minimized mode (#868) rdar://81022077

Include Relationship section in minimized mode (#868) rdar://81022077

Author: hqhhuang

src/components/DocumentationTopic.vue

@@ -129,7 +129,6 @@
               :source="remoteSource"
               :sections="primaryContentSectionsSanitized"
             />
-            <ViewMore v-if="shouldShowViewMoreLink" :url="viewMoreLink" />
           </div>
           <Topics
             v-if="shouldRenderTopicSection"
@@ -145,15 +144,21 @@
             :isSymbolBeta="isSymbolBeta"
           />
           <Relationships
-            v-if="relationshipsSections && !enableMinimized"
+            v-if="relationshipsSections"
             :sections="relationshipsSections"
+            :enableMinimized="enableMinimized"
           />
           <!-- NOTE: see also may contain information about other apis, so we cannot
           pass deprecation and beta information -->
           <SeeAlso
             v-if="seeAlsoSections && !enableMinimized"
             :sections="seeAlsoSections"
           />
+          <ViewMore
+            v-if="shouldShowViewMoreLink"
+            :url="viewMoreLink"
+            class="minimized-container"
+          />
         </div>
         <template v-if="enableOnThisPageNav">
           <OnThisPageStickyContainer v-show="isOnThisPageNavVisible">
@@ -831,6 +836,11 @@ $space-size: 15px;
     --aside-border-radius: 6px;
     --code-border-radius: 6px;
 
+    &:not(.declarations-container) {
+      padding-left: 1.4rem;
+      padding-right: 1.4rem;
+    }
+
     .description {
       margin-bottom: 1.5em;
     }
@@ -904,11 +914,6 @@ $space-size: 15px;
   }
 }
 
-.full-width-container .doc-content .minimized-container {
-  padding-left: 1.4rem;
-  padding-right: 1.4rem;
-}
-
 :deep() {
   .no-primary-content {
     // remove border-top for first section of the page

src/components/DocumentationTopic/ContentTable.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -10,7 +10,7 @@
 
 <template>
   <section class="contenttable alt-light">
-    <div class="container">
+    <div :class="['container', { 'minimized-container': enableMinimized }]">
       <LinkableHeading class="title" :anchor="anchor">{{ title }}</LinkableHeading>
       <slot />
     </div>
@@ -32,21 +32,36 @@ export default {
       type: String,
       required: true,
     },
+    enableMinimized: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
-.container {
+.container:not(.minimized-container) {
   @include dynamic-content-container;
-  padding-bottom: $section-spacing-single-side;
+}
+
+.container {
+  --section-spacing-single-side: #{$section-spacing-single-side};
+  &.minimized-container {
+    --section-spacing-single-side: 1.5em;
+
+    .contenttable-section {
+      padding-top: var(--section-spacing-single-side);
+    }
+  }
+  padding-bottom: var(--section-spacing-single-side);
 }
 
 .title {
   @include font-styles(heading-2-reduced);
-  padding-top: $section-spacing-single-side;
+  padding-top: var(--section-spacing-single-side);
   border-top-color: var(--color-grid);
   border-top-style: solid;
   border-top-width: var(--content-table-title-border-width, 1px);

src/components/DocumentationTopic/Relationships.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -12,6 +12,7 @@
   <ContentTable
     :anchor="contentSectionData.anchor"
     :title="$t(contentSectionData.title)"
+    :enableMinimized="enableMinimized"
   >
     <Section
       v-for="section in sectionsWithSymbols"
@@ -44,6 +45,10 @@ export default {
       type: Array,
       required: true,
     },
+    enableMinimized: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     contentSectionData: () => MainContentSectionAnchors.relationships,

tests/unit/components/DocumentationTopic.spec.js

@@ -692,6 +692,7 @@ describe('DocumentationTopic', () => {
     const viewMore = wrapper.find(ViewMore);
     expect(viewMore.exists()).toBe(true);
     expect(viewMore.props('url')).toEqual('/documentation/swift'); // normalized path
+    expect(viewMore.classes()).toContain('minimized-container');
 
     // should not render `ViewMore` in non-minimized mode
     wrapper.setProps({ enableMinimized: false });
@@ -984,10 +985,7 @@ describe('DocumentationTopic', () => {
     const relationships = wrapper.find(Relationships);
     expect(relationships.exists()).toBe(true);
     expect(relationships.props('sections')).toBe(relationshipsSections);
-
-    // Minimized view should not render Relationships
-    wrapper.setProps({ enableMinimized: true });
-    expect(wrapper.find(Relationships).exists()).toBe(false);
+    expect(relationships.props('enableMinimized')).toBe(false);
   });
 
   it('renders `Relationships` before `SeeAlso`', () => {

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

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -45,4 +45,12 @@ describe('ContentTable', () => {
     expect(p.exists()).toBe(true);
     expect(p.html()).toBe(slots.default);
   });
+
+  it('renders `minimized-container` class if in minimized mode', () => {
+    const container = wrapper.find('.container');
+    expect(container.classes()).not.toContain('minimized-container');
+
+    wrapper.setProps({ enableMinimized: true });
+    expect(container.classes()).toContain('minimized-container');
+  });
 });

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

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -79,6 +79,7 @@ describe('Relationships', () => {
     expect(table.props()).toEqual({
       anchor: 'relationships',
       title: 'sections.relationships',
+      enableMinimized: false,
     });
   });