From a7e62ac0a2f2c0c4e71b2c085b2df8bfd1b3aeab Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Wed, 16 Mar 2022 13:22:38 -0700
Subject: [PATCH 1/5] WIP: Add language switcher for TargetIDE

WIP: Add language switcher for TargetIDE, remove hideSummary, fix test
---
 app/public/theme-settings.json                |  3 ---
 src/components/DocumentationTopic.vue         | 20 ++++++----------
 .../DocumentationTopic/DocumentationHero.vue  |  4 ----
 .../DocumentationTopic/DocumentationNav.vue   |  3 ++-
 .../Summary/Availability.vue                  |  6 +----
 .../Summary/LanguageSwitcher.vue              | 24 ++++++++++++-------
 .../DocumentationTopic/Summary/Section.vue    |  3 +--
 .../DocumentationTopic/Summary/Title.vue      |  8 +++++--
 .../components/DocumentationTopic.spec.js     | 23 ++++--------------
 9 files changed, 37 insertions(+), 57 deletions(-)

diff --git a/app/public/theme-settings.json b/app/public/theme-settings.json
index 729decd5e..4b841880e 100644
--- a/app/public/theme-settings.json
+++ b/app/public/theme-settings.json
@@ -54,9 +54,6 @@
   },
   "features": {
     "docs": {
-      "summary": {
-        "hide": false
-      },
       "navigator": {
         "enable": false
       }
diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index b6cca99b9..bb3683f0e 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -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) 2022 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
@@ -13,6 +13,12 @@
     <main class="main" id="main" role="main" tabindex="0">
       <DocumentationHero :type="symbolKind || role" :enhanceBackground="enhanceBackground">
         <slot name="above-title" />
+        <LanguageSwitcher
+          v-if="shouldShowLanguageSwitcher && isTargetIDE"
+          :interfaceLanguage="interfaceLanguage"
+          :objcPath="objcPath"
+          :swiftPath="swiftPath"
+        />
         <Title :eyebrow="roleHeading">{{ title }}</Title>
         <Abstract v-if="abstract" :content="abstract" />
         <div v-if="sampleCodeDownload">
@@ -23,14 +29,6 @@
           :platforms="platforms" :technologies="technologies"
         />
       </DocumentationHero>
-        <Summary v-if="!hideSummary && shouldShowLanguageSwitcher">
-          <LanguageSwitcher
-            v-if="shouldShowLanguageSwitcher"
-            :interfaceLanguage="interfaceLanguage"
-            :objcPath="objcPath"
-            :swiftPath="swiftPath"
-          />
-        </Summary>
         <div class="container">
           <Description :hasOverview="hasOverview">
             <RequirementMetadata
@@ -81,7 +79,6 @@
 <script>
 import Language from 'docc-render/constants/Language';
 import metadata from 'docc-render/mixins/metadata';
-import { getSetting } from 'docc-render/utils/theme-settings';
 
 import Aside from 'docc-render/components/ContentNode/Aside.vue';
 import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue';
@@ -97,7 +94,6 @@ import Relationships from './DocumentationTopic/Relationships.vue';
 import RequirementMetadata from './DocumentationTopic/Description/RequirementMetadata.vue';
 import Availability from './DocumentationTopic/Summary/Availability.vue';
 import SeeAlso from './DocumentationTopic/SeeAlso.vue';
-import Summary from './DocumentationTopic/Summary.vue';
 import Title from './DocumentationTopic/Title.vue';
 import Topics from './DocumentationTopic/Topics.vue';
 
@@ -134,7 +130,6 @@ export default {
     RequirementMetadata,
     Availability,
     SeeAlso,
-    Summary,
     Title,
     Topics,
   },
@@ -295,7 +290,6 @@ export default {
       abstract ? extractFirstParagraphText(abstract) : null
     ),
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
-    hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
     enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
     technologies({ modules = [], technology }) {
       const technologyList = modules.reduce((list, module) => {
diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index e7c456897..e0ed8147d 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -76,10 +76,6 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
   padding-bottom: 40px;
   position: relative;
 
-  @include breakpoint(small) {
-    text-align: center;
-  }
-
   // gradient
   &:before {
     content: '';
diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index e747cf5c2..65bbfdc95 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -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) 2022 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
@@ -49,6 +49,7 @@
         :currentTopicTags="currentTopicTags"
         :references="references"
       />
+        language toggle goes here?
       <slot name="tray-after" v-bind="{ breadcrumbCount }" />
     </template>
     <template slot="after-content">
diff --git a/src/components/DocumentationTopic/Summary/Availability.vue b/src/components/DocumentationTopic/Summary/Availability.vue
index c831e4f78..5f1704325 100644
--- a/src/components/DocumentationTopic/Summary/Availability.vue
+++ b/src/components/DocumentationTopic/Summary/Availability.vue
@@ -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) 2022 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
@@ -103,10 +103,6 @@ export default {
   flex-flow: row wrap;
   gap: 10px;
   margin-top: 20px;
-
-  @include breakpoint(small) {
-    justify-content: center;
-  }
 }
 
 .badge {
diff --git a/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue b/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue
index d4b7a5cb7..225f8d22b 100644
--- a/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue
+++ b/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue
@@ -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) 2022 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
@@ -122,28 +122,34 @@ export default {
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
+.language {
+  padding-bottom: 10px;
+  justify-content: right;
+}
+
 .language, .language-list {
+  @include font-styles(body-reduced);
   margin-top: 0;
   display: flex;
+  align-items: center;
 }
 
 .language-option {
   &.swift {
-    margin-right: 10px;
+    padding-right: 10px;
+    border-right: 1px solid var(--color-fill-gray-tertiary);
   }
 
-  @include breakpoint(small) {
-    margin-bottom: 0.25rem;
+  &.objc {
+    padding-left: 10px;
   }
 
   &.router-link-exact-active,
   &.active {
-    color: var(--colors-secondary-label, var(--color-secondary-label));
-  }
+    color: dark-color(figure-gray-secondary);
 
-  @include breakpoints-from(medium) {
-    &.swift {
-      border-right: 1px solid var(--color-fill-gray-tertiary);
+    .documentation-hero--disabled & {
+      color: var(--colors-secondary-label, var(--color-secondary-label));
     }
   }
 }
diff --git a/src/components/DocumentationTopic/Summary/Section.vue b/src/components/DocumentationTopic/Summary/Section.vue
index 08272bcd5..9fedf1732 100644
--- a/src/components/DocumentationTopic/Summary/Section.vue
+++ b/src/components/DocumentationTopic/Summary/Section.vue
@@ -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) 2022 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
@@ -19,7 +19,6 @@ export default { name: 'Section' };
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 .summary-section {
-  margin-right: 1.5rem;
 
   &:last-of-type {
     margin-right: 0;
diff --git a/src/components/DocumentationTopic/Summary/Title.vue b/src/components/DocumentationTopic/Summary/Title.vue
index 317e50d6a..3f3b7dcab 100644
--- a/src/components/DocumentationTopic/Summary/Title.vue
+++ b/src/components/DocumentationTopic/Summary/Title.vue
@@ -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) 2022 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
@@ -20,9 +20,13 @@ export default { name: 'Title' };
 @import 'docc-render/styles/_core.scss';
 
 .title {
-  color: var(--colors-text, var(--color-text));
+  color: dark-color(figure-gray);
   font-size: rem(14px);
   margin-right: 0.5rem;
   text-rendering: optimizeLegibility;
+
+  .documentation-hero--disabled & {
+    color: var(--colors-text, var(--color-text));
+  }
 }
 </style>
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index 742bc2797..518d1c0ac 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.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) 2022 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
@@ -9,16 +9,11 @@
 */
 
 import { shallowMount } from '@vue/test-utils';
-import { getSetting } from 'docc-render/utils/theme-settings';
 import DocumentationTopic from 'docc-render/components/DocumentationTopic.vue';
 import Language from 'docc-render/constants/Language';
 import { TopicTypes } from '@/constants/TopicTypes';
 import DocumentationHero from '@/components/DocumentationTopic/DocumentationHero.vue';
 
-jest.mock('docc-render/utils/theme-settings', () => ({
-  getSetting: jest.fn((_, fallback) => fallback),
-}));
-
 const {
   Abstract,
   ContentNode,
@@ -32,7 +27,6 @@ const {
   RequirementMetadata,
   Availability,
   SeeAlso,
-  Summary,
   Topics,
   Title,
   BetaLegalText,
@@ -285,9 +279,6 @@ describe('DocumentationTopic', () => {
     const description = wrapper.find(Description);
     expect(description.exists()).toBe(true);
 
-    const summary = wrapper.find(Summary);
-    expect(summary.exists()).toBe(true);
-
     expect(wrapper.find(PrimaryContent).exists()).toBe(true);
   });
 
@@ -347,21 +338,17 @@ describe('DocumentationTopic', () => {
       expect(wrapper.contains(RequirementMetadata)).toBe(true);
     });
 
-    it('hides the Summary, if the global settings say so', () => {
-      // this should really only mock the resolved value for the specific flag,
-      // but this is fine for now
-      getSetting.mockResolvedValueOnce(true);
-      wrapper = shallowMount(DocumentationTopic, { propsData });
-      expect(wrapper.find(Summary).exists()).toBe(false);
-    });
-
     it('renders a `Availability` with platforms data', () => {
       const list = wrapper.find(Availability);
       expect(list.exists()).toBe(true);
       expect(list.props('platforms')).toEqual(propsData.platforms);
     });
+  });
 
+  describe('isTargetIDE', () => {
+    const provide = { isTargetIDE: true };
     it('renders a `LanguageSwitcher`', () => {
+      wrapper = shallowMount(DocumentationTopic, { propsData, provide });
       const switcher = wrapper.find(LanguageSwitcher);
       expect(switcher.exists()).toBe(true);
       expect(switcher.props()).toEqual({

From 7ea422669c3a3a5081686199a197344bdbfcfefa Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Wed, 16 Mar 2022 23:29:52 -0700
Subject: [PATCH 2/5] Add `LanguageToggle` and test

Add `LanguageToggle` and test
---
 .../DocumentationTopic/DocumentationNav.vue   |  46 ++-
 .../DocumentationNav/LanguageToggle.vue       | 314 ++++++++++++++++++
 src/components/NavMenuItems.vue               |   3 +-
 src/styles/core/_nav.scss                     |   3 +-
 .../DocumentationNav.spec.js                  |  25 +-
 .../DocumentationNav/LanguageToggle.spec.js   | 257 ++++++++++++++
 tests/unit/views/DocumentationTopic.spec.js   |   5 +-
 7 files changed, 648 insertions(+), 5 deletions(-)
 create mode 100644 src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue
 create mode 100644 tests/unit/components/DocumentationTopic/DocumentationNav/LanguageToggle.spec.js

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 65bbfdc95..a756315ac 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -49,7 +49,17 @@
         :currentTopicTags="currentTopicTags"
         :references="references"
       />
-        language toggle goes here?
+      <NavMenuItems
+        class="nav-menu-settings"
+        :previousSiblingChildren="breadcrumbCount"
+      >
+        <LanguageToggle
+          v-if="interfaceLanguage && (swiftPath || objcPath)"
+          :interfaceLanguage="interfaceLanguage"
+          :objcPath="objcPath"
+          :swiftPath="swiftPath"
+        />
+      </NavMenuItems>
       <slot name="tray-after" v-bind="{ breadcrumbCount }" />
     </template>
     <template slot="after-content">
@@ -60,16 +70,20 @@
 
 <script>
 import NavBase from 'docc-render/components/NavBase.vue';
+import NavMenuItems from 'docc-render/components/NavMenuItems.vue';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
 import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
 import Hierarchy from './DocumentationNav/Hierarchy.vue';
+import LanguageToggle from './DocumentationNav/LanguageToggle.vue';
 
 export default {
   name: 'DocumentationNav',
   components: {
     SidenavIcon,
     NavBase,
+    NavMenuItems,
     Hierarchy,
+    LanguageToggle,
   },
   props: {
     title: {
@@ -108,6 +122,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    interfaceLanguage: {
+      type: String,
+      required: false,
+    },
+    objcPath: {
+      type: String,
+      required: false,
+    },
+    swiftPath: {
+      type: String,
+      required: false,
+    },
   },
   computed: {
     BreakpointName: () => BreakpointName,
@@ -165,6 +191,24 @@ $sidenav-icon-size: 19px;
   @include font-styles(documentation-nav);
   // vertically align the items
   padding-top: 0;
+
+  &-settings {
+    @include font-styles(nav-toggles);
+
+    @include breakpoint-only-largenav() {
+      margin-left: $nav-space-between-elements;
+    }
+
+    @include nav-in-breakpoint {
+      &:not([data-previous-menu-children-count="0"]) {
+        .nav-menu-setting:first-child {
+          border-top: 1px solid dark-color(figure-gray-tertiary);
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
 }
 
 .documentation-nav {
diff --git a/src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue b/src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue
new file mode 100644
index 000000000..d53b346c0
--- /dev/null
+++ b/src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue
@@ -0,0 +1,314 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2022 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
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+
+<template>
+  <NavMenuItemBase class="nav-menu-setting language-container">
+    <div :class="{ 'language-toggle-container': hasLanguages }">
+      <!-- Faux element to get width of select, with current element-->
+      <select
+        class="language-dropdown language-sizer"
+        ref="language-sizer"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <option selected>{{ currentLanguage.name }}</option>
+      </select>
+      <label
+        :for="hasLanguages ? 'language-toggle' : null"
+        class="nav-menu-setting-label"
+      >Language:</label>
+      <select
+        v-if="hasLanguages"
+        id="language-toggle"
+        class="language-dropdown nav-menu-link"
+        v-model="languageModel"
+        :style="`width: ${adjustedWidth}px`"
+        @change="pushRoute(currentLanguage.route)"
+      >
+        <option
+          v-for="language in languages"
+          :value="language.api"
+          :key="language.api"
+        >
+          {{ language.name }}
+        </option>
+      </select>
+      <span
+        v-else
+        class="nav-menu-toggle-none current-language"
+        aria-current="page"
+      >{{ currentLanguage.name }}</span>
+      <InlineChevronDownIcon v-if="hasLanguages" class="toggle-icon icon-inline" />
+    </div>
+    <div
+      v-if="hasLanguages"
+      class="language-list-container"
+    >
+      <span class="nav-menu-setting-label">Language:</span>
+      <ul class="language-list">
+        <li
+          v-for="language in languages"
+          class="language-list-item"
+          :key="language.api"
+        >
+          <span
+            v-if="language.api === languageModel"
+            :data-language="language.api"
+            aria-current="page"
+            class="current-language"
+          >
+            {{ language.name }}
+          </span>
+          <router-link
+            v-else
+            class="nav-menu-link"
+            :to="getRoute(language.route)"
+          >
+            {{ language.name }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </NavMenuItemBase>
+</template>
+
+<script>
+import { waitFrames } from 'docc-render/utils/loading';
+import Language from 'docc-render/constants/Language';
+import debounce from 'docc-render/utils/debounce';
+import NavMenuItemBase from 'docc-render/components/NavMenuItemBase.vue';
+import InlineChevronDownIcon from 'theme/components/Icons/InlineChevronDownIcon.vue';
+
+export default {
+  name: 'LanguageToggle',
+  components: { InlineChevronDownIcon, NavMenuItemBase },
+  inject: {
+    store: {
+      default() {
+        return {
+          setPreferredLanguage() {},
+        };
+      },
+    },
+  },
+  props: {
+    interfaceLanguage: {
+      type: String,
+      required: true,
+    },
+    objcPath: {
+      type: String,
+      required: false,
+    },
+    swiftPath: {
+      type: String,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      languageModel: null,
+      adjustedWidth: 0,
+    };
+  },
+  mounted() {
+    // on resize, re-calculate the width of the select.
+    const cb = debounce(() => {
+      this.calculateSelectWidth();
+    }, 150, true);
+    const orientationChangeCallback = async () => {
+      // we wait for 3 frames, as that is the minimum it takes for the transitions to finish
+      await waitFrames(3);
+      this.calculateSelectWidth();
+    };
+    window.addEventListener('resize', cb);
+    window.addEventListener('orientationchange', orientationChangeCallback);
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('resize', cb);
+      window.removeEventListener('orientationchange', orientationChangeCallback);
+    });
+  },
+  watch: {
+    interfaceLanguage: {
+      immediate: true,
+      handler(language) {
+        this.languageModel = language;
+      },
+    },
+    currentLanguage: {
+      immediate: true,
+      handler: 'calculateSelectWidth',
+    },
+  },
+  methods: {
+    /**
+     * Returns a formatted route object
+     * @param {{ query: string, path: string }} route - a config object passed by the render JSON
+     * @returns {{ path: (null|string), query: { language: (string|undefined) }}}
+     */
+    getRoute(route) {
+      // pass undefined to remove the query param if its Swift
+      const language = route.query === Language.swift.key.url ? undefined : route.query;
+      return {
+        // make sure we dont loose any extra query params on the way
+        query: { ...this.$route.query, language },
+        path: this.isCurrentPath(route.path) ? null : this.normalizePath(route.path),
+      };
+    },
+    pushRoute(route) {
+      // Persist the selected language as a preference in the store (backed by
+      // the browser's local storage so that it can be retrieved later for
+      // subsequent navigation without the query parameter present)
+      this.store.setPreferredLanguage(route.query);
+
+      // Navigate to the language variant page
+      this.$router.push(this.getRoute(route));
+    },
+    isCurrentPath(path) {
+      // the `.replace` call is needed since paths vended by the backend do not
+      // include a leading slash, while the router provided path does
+      return this.$route.path.replace(/^\//, '') === path;
+    },
+    normalizePath(path) {
+      // Sometimes `paths` data from `variants` are prefixed with a leading
+      // slash and sometimes they aren't
+      return path.startsWith('/') ? path : `/${path}`;
+    },
+    /**
+     * Calculated the width of the select by fetching it from the faux select.
+     * @return {Promise<void>}
+     */
+    async calculateSelectWidth() {
+      // await next tick, so we are sure the element is rendered.
+      await this.$nextTick();
+      this.adjustedWidth = this.$refs['language-sizer'].clientWidth + 6;
+    },
+  },
+  computed: {
+    languages() {
+      return [
+        {
+          name: Language.swift.name,
+          api: Language.swift.key.api,
+          route: {
+            path: this.swiftPath,
+            query: Language.swift.key.url,
+          },
+        },
+        {
+          name: Language.objectiveC.name,
+          api: Language.objectiveC.key.api,
+          route: {
+            path: this.objcPath,
+            query: Language.objectiveC.key.url,
+          },
+        },
+      ];
+    },
+    currentLanguage: ({ languages, languageModel }) => (
+      languages.find(lang => lang.api === languageModel)
+    ),
+    hasLanguages: ({ objcPath, swiftPath }) => swiftPath && objcPath,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'docc-render/styles/_core.scss';
+
+$dropdown-icon-padding: 11px;
+$nav-menu-toggle-label-margin: 6px;
+
+.nav-menu-setting-label {
+  margin-right: $nav-menu-label-margin;
+  white-space: nowrap;
+}
+
+.language {
+  &-dropdown {
+    -webkit-text-size-adjust: none;
+    appearance: none;
+    border: none;
+    background-color: transparent;
+    box-sizing: inherit;
+    // add left padding, but then nudge it back, so we have a consistent spacing with the label.
+    padding: 0 $dropdown-icon-padding 0 4px;
+    margin-left: -4px;
+    @include font-styles(nav-toggles);
+
+    // remove the default focus styles, and re-add them on keyboard navigation, only.
+    &:focus {
+      outline: none;
+    }
+
+    @include on-keyboard-focus() {
+      @include focus-outline();
+    }
+  }
+
+  &-sizer {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    padding: 0;
+  }
+
+  &-toggle {
+    &-container {
+      display: flex;
+      align-items: center;
+      padding-right: rem(3px);
+      position: relative;
+
+      @include nav-in-breakpoint() {
+        display: none;
+      }
+
+      .toggle-icon {
+        width: 0.6em;
+        height: 0.6em;
+        position: absolute;
+        right: 7px;
+      }
+    }
+
+    &-label {
+      margin-right: 2px;
+    }
+
+    &.nav-menu-toggle-label {
+      margin-right: $nav-menu-toggle-label-margin;
+    }
+  }
+}
+
+.language-list {
+  display: inline-block;
+  margin-top: 0;
+
+  &-container {
+    display: none;
+
+    @include nav-in-breakpoint() {
+      display: inline-block;
+    }
+  }
+
+  &-item {
+    display: inline-block;
+
+    &:not(:first-child) {
+      border-left: 1px solid dark-color(fill-gray-tertiary);
+      margin-left: $nav-menu-toggle-label-margin;
+      padding-left: $nav-menu-toggle-label-margin;
+    }
+  }
+}
+</style>
diff --git a/src/components/NavMenuItems.vue b/src/components/NavMenuItems.vue
index d2546bd0d..6ec9126c7 100644
--- a/src/components/NavMenuItems.vue
+++ b/src/components/NavMenuItems.vue
@@ -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) 2022 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
@@ -41,6 +41,7 @@ $vertical-padding: $nav-height-small - $nav-padding-small;
 .nav-menu-items {
   display: flex;
   justify-content: flex-end;
+  align-items: center;
 
   // adds a subtle fade-in animation effect on mobile
   @include nav-in-breakpoint {
diff --git a/src/styles/core/_nav.scss b/src/styles/core/_nav.scss
index 835b7e89b..56858b6df 100644
--- a/src/styles/core/_nav.scss
+++ b/src/styles/core/_nav.scss
@@ -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) 2022 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
@@ -60,6 +60,7 @@ $nav-space-hierarchy-elements: rem(3px);
 $nav-chevron-angle: 40deg;
 $nav-chevron-thickness: 1.5;
 $nav-chevron-transition: 0.3s linear transform;
+$nav-menu-label-margin: rem(6px);
 
 // Apply styles to animate the nav chevron downwards
 @mixin nav-chevron-animation {
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index dd8f95103..defb6b3df 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.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) 2022 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
@@ -23,6 +23,8 @@ jest.mock('docc-render/utils/FocusTrap');
 const {
   Hierarchy,
   NavBase,
+  LanguageToggle,
+  NavMenuItems,
 } = DocumentationNav.components;
 
 const stubs = {
@@ -59,6 +61,9 @@ describe('DocumentationNav', () => {
     currentTopicTags: [{
       type: 'foo',
     }],
+    interfaceLanguage: 'swift',
+    swiftPath: 'documentation/foo',
+    objcPath: 'documentation/foo',
     references,
   };
 
@@ -196,6 +201,24 @@ describe('DocumentationNav', () => {
     });
   });
 
+  it('renders a LanguageToggle', () => {
+    // make sure the LanguageToggle is inside the NavMenuItems
+    const menuItems = wrapper.find(NavMenuItems);
+    const toggle = menuItems.find(LanguageToggle);
+    expect(toggle.exists()).toBe(true);
+    expect(toggle.props()).toEqual({
+      interfaceLanguage: propsData.interfaceLanguage,
+      objcPath: propsData.swiftPath,
+      swiftPath: propsData.objcPath,
+    });
+  });
+
+  it('does not render a `LanguageToggle` when there is no swift nor objc path', () => {
+    expect(wrapper.contains(LanguageToggle)).toBe(true);
+    wrapper.setProps({ swiftPath: null, objcPath: null });
+    expect(wrapper.contains(LanguageToggle)).toBe(false);
+  });
+
   it('exposes a `after-content` slot ', () => {
     const afterContent = 'After Content';
     wrapper = shallowMount(DocumentationNav, {
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav/LanguageToggle.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav/LanguageToggle.spec.js
new file mode 100644
index 000000000..ffd62b0c1
--- /dev/null
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav/LanguageToggle.spec.js
@@ -0,0 +1,257 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2022 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
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+
+import { waitFrames } from 'docc-render/utils/loading';
+import { RouterLinkStub, shallowMount } from '@vue/test-utils';
+import Language from 'docc-render/constants/Language';
+import LanguageToggle
+  from 'docc-render/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue';
+import InlineChevronDownIcon from 'theme/components/Icons/InlineChevronDownIcon.vue';
+import { createEvent } from '../../../../../test-utils';
+
+const { NavMenuItemBase } = LanguageToggle.components;
+
+describe('LanguageToggle', () => {
+  let wrapper;
+
+  const propsData = {
+    interfaceLanguage: Language.swift.key.api,
+    objcPath: 'documentation/foo',
+    swiftPath: 'documentation/foo',
+    breadcrumbCount: 1,
+  };
+
+  const mocks = {
+    $route: {
+      path: '/documentation/foo',
+    },
+    $router: {
+      push: jest.fn(),
+    },
+  };
+
+  const provide = {
+    store: {
+      setPreferredLanguage: jest.fn(),
+    },
+  };
+
+  const stubs = {
+    'router-link': RouterLinkStub,
+  };
+
+  const createWrapper = (props = propsData, mocksData = mocks) => (
+    shallowMount(LanguageToggle, {
+      mocks: mocksData,
+      propsData: props,
+      provide,
+      stubs,
+    })
+  );
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  it('renders `NavMenuItemBase` at the root', () => {
+    const menuItemBase = wrapper.find(NavMenuItemBase);
+    expect(menuItemBase.exists()).toBe(true);
+    expect(menuItemBase.classes()).toContain('nav-menu-setting');
+    expect(menuItemBase.classes()).toContain('language-container');
+  });
+
+  it('renders the toggle element', () => {
+    const toggle = wrapper.find('#language-toggle');
+    expect(toggle.exists()).toBe(true);
+    expect(toggle.attributes('style')).toMatch(/width: [0-9]+px/);
+  });
+
+  it('renders a faux select element', () => {
+    const select = wrapper.find({ ref: 'language-sizer' });
+    expect(select.exists()).toBe(true);
+    expect(select.classes()).toEqual(['language-dropdown', 'language-sizer']);
+    expect(select.attributes()).toHaveProperty('aria-hidden', 'true');
+    expect(select.attributes()).toHaveProperty('tabindex', '-1');
+    const options = select.findAll('option');
+    expect(options).toHaveLength(1);
+    expect(options.at(0).attributes()).toHaveProperty('selected');
+    expect(options.at(0).text()).toBe(Language[propsData.interfaceLanguage].name);
+  });
+
+  it('renders an inline chevron icon', () => {
+    expect(wrapper.find('.language-toggle-container > .toggle-icon').is(InlineChevronDownIcon))
+      .toBe(true);
+  });
+
+  it('applies the faux select width on the language toggle, on select', async () => {
+    const sizer = wrapper.find({ ref: 'language-sizer' }).element;
+    const toggle = wrapper.find('#language-toggle');
+    // clientWidth is now 0
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 6px;');
+    Object.defineProperty(sizer, 'clientWidth', {
+      get: () => 20,
+    });
+    toggle.setValue(Language.objectiveC.key.api);
+    await wrapper.vm.$nextTick();
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 26px;');
+  });
+
+  it('applies the faux select width on the language toggle, on screen resize', async () => {
+    const sizer = wrapper.find({ ref: 'language-sizer' }).element;
+    const toggle = wrapper.find('#language-toggle');
+    Object.defineProperty(sizer, 'clientWidth', {
+      get: () => 20,
+    });
+    // clientWidth was 0
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 6px;');
+    const resizeEvent = createEvent('resize');
+    window.dispatchEvent(resizeEvent);
+    await wrapper.vm.$nextTick();
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 26px;');
+  });
+
+  it('applies the faux select width on the language toggle, on orientationchange', async () => {
+    const sizer = wrapper.find({ ref: 'language-sizer' }).element;
+    const toggle = wrapper.find('#language-toggle');
+    Object.defineProperty(sizer, 'clientWidth', {
+      get: () => 20,
+    });
+    // clientWidth was 0
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 6px;');
+    const orientationchangeEvent = createEvent('orientationchange');
+    window.dispatchEvent(orientationchangeEvent);
+    await waitFrames(3);
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 26px;');
+  });
+
+  it('does not render the chevron if it has no languages', () => {
+    wrapper.setProps({
+      objcPath: '',
+      swiftPath: '',
+    });
+    expect(wrapper.find('.language-toggle-container > .toggle-icon').exists()).toBe(false);
+  });
+
+  it('renders a span.nav-menu-toggle-none.current-language with only one variant', () => {
+    wrapper.setProps({ objcPath: undefined });
+    expect(wrapper.find('#language-toggle').exists()).toBe(false);
+
+    const current = wrapper.find('span.nav-menu-toggle-none.current-language');
+    expect(current.exists()).toBe(true);
+    // text content makes sure there are no new lines
+    expect(current.element.textContent).toBe(Language.swift.name);
+  });
+
+  it('renders options inside select for each language', () => {
+    const options = wrapper.findAll('#language-toggle option');
+    expect(options.length).toBe(2);
+
+    expect(options.at(0).attributes('value')).toBe(Language.swift.key.api);
+    expect(options.at(0).text()).toBe(Language.swift.name);
+
+    expect(options.at(1).attributes('value')).toBe(Language.objectiveC.key.api);
+    expect(options.at(1).text()).toBe(Language.objectiveC.name);
+  });
+
+  it('calls router and changes v-model when different option is selected', () => {
+    expect(wrapper.find('.current-language').text()).toBe(Language.swift.name);
+
+    wrapper.findAll('#language-toggle option').at(1).element.selected = true;
+    wrapper.find('#language-toggle').trigger('change');
+
+    expect(wrapper.find('.current-language').text()).toBe(Language.objectiveC.name);
+    expect(mocks.$router.push).toHaveBeenCalledWith({ path: null, query: { language: 'objc' } });
+    expect(provide.store.setPreferredLanguage).toHaveBeenCalledWith('objc');
+  });
+
+  it('renders `language-list-container` if page has more than a language', () => {
+    const listContainer = wrapper.find('.language-list-container');
+    expect(listContainer.exists()).toBe(true);
+  });
+
+  it('does not render `language-list-container` if page has only one language', () => {
+    wrapper.setProps({ objcPath: undefined });
+
+    const listContainer = wrapper.find('.language-list-container');
+    expect(listContainer.exists()).toBe(false);
+  });
+
+  it('renders `nav-menu-toggle-label` without spaces', () => {
+    const label = wrapper.find('span.nav-menu-setting-label');
+    expect(label.exists()).toBe(true);
+    // textContent makes sure there are no new lines or empty spaces
+    expect(label.element.textContent).toEqual('Language:');
+  });
+
+  it('renders `.nav-menu-setting-label` in `language-list-container` without spaces', () => {
+    const label = wrapper.find('label.nav-menu-setting-label');
+    expect(label.exists()).toBe(true);
+    expect(label.attributes()).toHaveProperty('for', 'language-toggle');
+    // textContent makes sure there are no new lines or empty spaces
+    expect(label.element.textContent).toEqual('Language:');
+  });
+
+  it('renders a `span.current-language` for the current language inside `language-list-container`', () => {
+    const currentLanguage = wrapper.find('.language-list-container').find('span.current-language');
+    expect(currentLanguage.exists()).toBe(true);
+    expect(currentLanguage.text()).toBe(Language.swift.name);
+  });
+
+  it('renders a link for the alternative language inside `language-list-container`', () => {
+    const link = wrapper.find('.language-list-container').find('a.nav-menu-link');
+    expect(link.exists()).toBe(true);
+    expect(link.text()).toBe(Language.objectiveC.name);
+    expect(link.props('to').query).toEqual({ language: Language.objectiveC.key.url });
+  });
+
+  it('clears out the language query if language is Swift', () => {
+    wrapper.setData({ languageModel: Language.objectiveC.key.api });
+
+    const link = wrapper.find('.language-list-container').find('a.nav-menu-link');
+    expect(link.props('to').query).toEqual({ language: undefined });
+  });
+
+  it('keeps extra query parameters when changing language', () => {
+    const query = {
+      foo: 'foo',
+      bar: 'bar',
+    };
+    const mocksWithQuery = {
+      ...mocks,
+      $route: {
+        path: '/documentation/foo',
+        query,
+      },
+    };
+    wrapper = createWrapper(undefined, mocksWithQuery);
+
+    const link = wrapper.find('.language-list-container').find('a.nav-menu-link');
+    expect(link.props('to').query).toEqual(expect.objectContaining(query));
+  });
+
+  it('renders different paths if languages have different paths', () => {
+    // Re-mount component to be able to update data() through new props
+    wrapper = createWrapper({ ...propsData, objcPath: 'documentation/bar' });
+
+    const link = wrapper.find('.language-list-container').find('a.nav-menu-link');
+    expect(link.props('to').path).toEqual('/documentation/bar');
+  });
+
+  it('changes the model, if the interfaceLanguage changes', () => {
+    // assert proper language name is shown
+    expect(wrapper.find('.current-language').text()).toBe(Language.swift.name);
+    // change the language from outside
+    wrapper.setProps({
+      interfaceLanguage: Language.objectiveC.key.api,
+    });
+    // assert the language changes as well
+    expect(wrapper.find('.current-language').text()).toBe(Language.objectiveC.name);
+  });
+});
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index ebec6fe2e..ad27e1e68 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.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) 2022 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
@@ -250,6 +250,9 @@ describe('DocumentationTopic', () => {
       isSymbolBeta: false,
       isSymbolDeprecated: false,
       isWideFormat: false,
+      interfaceLanguage: topicData.identifier.interfaceLanguage,
+      objcPath: topicData.variants[0].paths[0],
+      swiftPath: topicData.variants[1].paths[0],
     });
     expect(nav.attributes()).toMatchObject({
       interfacelanguage: 'swift',

From 86d8e25db6e629a2ab2b0383e63433735996348e Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Thu, 17 Mar 2022 00:36:08 -0700
Subject: [PATCH 3/5] fix padding-top

fix padding-top
---
 src/components/DocumentationTopic/DocumentationNav.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index a756315ac..831f73aa8 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -200,6 +200,8 @@ $sidenav-icon-size: 19px;
     }
 
     @include nav-in-breakpoint {
+      padding-top: 0;
+
       &:not([data-previous-menu-children-count="0"]) {
         .nav-menu-setting:first-child {
           border-top: 1px solid dark-color(figure-gray-tertiary);

From 6954cfc96b0f0ffbf82c617a43c03a81f363b13b Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Thu, 17 Mar 2022 09:52:33 -0700
Subject: [PATCH 4/5] Fix test and styling feedback

Fix test and styling feedback
---
 src/components/DocumentationTopic.vue         |  5 +-
 .../DocumentationTopic/DocumentationNav.vue   |  1 +
 src/components/DocumentationTopic/Summary.vue | 48 -------------------
 .../Summary/LanguageSwitcher.vue              |  2 +-
 src/components/NavMenuItems.vue               |  1 -
 .../components/DocumentationTopic.spec.js     | 18 ++++---
 .../DocumentationNav.spec.js                  |  6 +--
 .../DocumentationTopic/Summary.spec.js        | 29 -----------
 8 files changed, 16 insertions(+), 94 deletions(-)
 delete mode 100644 src/components/DocumentationTopic/Summary.vue
 delete mode 100644 tests/unit/components/DocumentationTopic/Summary.spec.js

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index bb3683f0e..ddedf533a 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -14,7 +14,7 @@
       <DocumentationHero :type="symbolKind || role" :enhanceBackground="enhanceBackground">
         <slot name="above-title" />
         <LanguageSwitcher
-          v-if="shouldShowLanguageSwitcher && isTargetIDE"
+          v-if="shouldShowLanguageSwitcher"
           :interfaceLanguage="interfaceLanguage"
           :objcPath="objcPath"
           :swiftPath="swiftPath"
@@ -289,7 +289,8 @@ export default {
     pageDescription: ({ abstract, extractFirstParagraphText }) => (
       abstract ? extractFirstParagraphText(abstract) : null
     ),
-    shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
+    shouldShowLanguageSwitcher:
+      ({ objcPath, swiftPath, isTargetIDE }) => objcPath && swiftPath && isTargetIDE,
     enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
     technologies({ modules = [], technology }) {
       const technologyList = modules.reduce((list, module) => {
diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
index 831f73aa8..31f22bce6 100644
--- a/src/components/DocumentationTopic/DocumentationNav.vue
+++ b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -59,6 +59,7 @@
           :objcPath="objcPath"
           :swiftPath="swiftPath"
         />
+        <slot name="menu-items" />
       </NavMenuItems>
       <slot name="tray-after" v-bind="{ breadcrumbCount }" />
     </template>
diff --git a/src/components/DocumentationTopic/Summary.vue b/src/components/DocumentationTopic/Summary.vue
deleted file mode 100644
index 6616716db..000000000
--- a/src/components/DocumentationTopic/Summary.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-  This source file is part of the Swift.org open source project
-
-  Copyright (c) 2021 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
-  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
--->
-
-<template>
-  <div class="summary">
-    <slot />
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Summary',
-};
-</script>
-
-<style scoped lang="scss">
-@import 'docc-render/styles/_core.scss';
-
-.summary {
-  @include font-styles(body-reduced);
-  color: var(--colors-secondary-label, var(--color-secondary-label));
-  padding: 11px 0;
-  background-color: var(--color-fill-gray-quaternary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  @include breakpoint(medium) {
-    padding-left: 2em;
-  }
-
-  @include breakpoint(small) {
-    flex-direction: column;
-    padding-left: 0;
-    margin-bottom: rem(40px);
-    grid-gap: rem(16px);
-    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  }
-}
-</style>
diff --git a/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue b/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue
index 225f8d22b..05dfe401c 100644
--- a/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue
+++ b/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue
@@ -124,7 +124,7 @@ export default {
 
 .language {
   padding-bottom: 10px;
-  justify-content: right;
+  justify-content: flex-end;
 }
 
 .language, .language-list {
diff --git a/src/components/NavMenuItems.vue b/src/components/NavMenuItems.vue
index 6ec9126c7..8368de712 100644
--- a/src/components/NavMenuItems.vue
+++ b/src/components/NavMenuItems.vue
@@ -41,7 +41,6 @@ $vertical-padding: $nav-height-small - $nav-padding-small;
 .nav-menu-items {
   display: flex;
   justify-content: flex-end;
-  align-items: center;
 
   // adds a subtle fade-in animation effect on mobile
   @include nav-in-breakpoint {
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index 518d1c0ac..7aaa8f0fc 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -345,17 +345,15 @@ describe('DocumentationTopic', () => {
     });
   });
 
-  describe('isTargetIDE', () => {
+  it('renders a `LanguageSwitcher` if TargetIDE', () => {
     const provide = { isTargetIDE: true };
-    it('renders a `LanguageSwitcher`', () => {
-      wrapper = shallowMount(DocumentationTopic, { propsData, provide });
-      const switcher = wrapper.find(LanguageSwitcher);
-      expect(switcher.exists()).toBe(true);
-      expect(switcher.props()).toEqual({
-        interfaceLanguage: propsData.interfaceLanguage,
-        objcPath: propsData.languagePaths.occ[0],
-        swiftPath: propsData.languagePaths.swift[0],
-      });
+    wrapper = shallowMount(DocumentationTopic, { propsData, provide });
+    const switcher = wrapper.find(LanguageSwitcher);
+    expect(switcher.exists()).toBe(true);
+    expect(switcher.props()).toEqual({
+      interfaceLanguage: propsData.interfaceLanguage,
+      objcPath: propsData.languagePaths.occ[0],
+      swiftPath: propsData.languagePaths.swift[0],
     });
   });
 
diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index defb6b3df..f1a82cb54 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -63,7 +63,7 @@ describe('DocumentationNav', () => {
     }],
     interfaceLanguage: 'swift',
     swiftPath: 'documentation/foo',
-    objcPath: 'documentation/foo',
+    objcPath: 'documentation/bar',
     references,
   };
 
@@ -208,8 +208,8 @@ describe('DocumentationNav', () => {
     expect(toggle.exists()).toBe(true);
     expect(toggle.props()).toEqual({
       interfaceLanguage: propsData.interfaceLanguage,
-      objcPath: propsData.swiftPath,
-      swiftPath: propsData.objcPath,
+      swiftPath: propsData.swiftPath,
+      objcPath: propsData.objcPath,
     });
   });
 
diff --git a/tests/unit/components/DocumentationTopic/Summary.spec.js b/tests/unit/components/DocumentationTopic/Summary.spec.js
deleted file mode 100644
index 63153961d..000000000
--- a/tests/unit/components/DocumentationTopic/Summary.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * This source file is part of the Swift.org open source project
- *
- * Copyright (c) 2021 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
- * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
-*/
-
-import { shallowMount } from '@vue/test-utils';
-import Summary from 'docc-render/components/DocumentationTopic/Summary.vue';
-
-describe('Summary', () => {
-  it('renders a `.summary` class at the root', () => {
-    const wrapper = shallowMount(Summary);
-
-    expect(wrapper.classes('summary')).toBe(true);
-  });
-
-  it('renders slot content', () => {
-    const wrapper = shallowMount(Summary, {
-      slots: { default: '<p>foobar</p>' },
-    });
-
-    expect(wrapper.contains('p')).toBe(true);
-    expect(wrapper.text()).toBe('foobar');
-  });
-});

From 6761db97ed4a2aa9b300e615d9eeb597c9052fe4 Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Thu, 17 Mar 2022 11:39:13 -0700
Subject: [PATCH 5/5] Add test for `menu-items` slot

Add test for `menu-items` slot
---
 .../DocumentationTopic/DocumentationNav.spec.js     | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
index f1a82cb54..bd34ea181 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js
@@ -219,6 +219,19 @@ describe('DocumentationNav', () => {
     expect(wrapper.contains(LanguageToggle)).toBe(false);
   });
 
+  it('exposes a `menu-items` slot ', () => {
+    const menuItems = 'Menu Items';
+    wrapper = shallowMount(DocumentationNav, {
+      stubs,
+      propsData,
+      mocks,
+      slots: {
+        'menu-items': menuItems,
+      },
+    });
+    expect(wrapper.text()).toContain(menuItems);
+  });
+
   it('exposes a `after-content` slot ', () => {
     const afterContent = 'After Content';
     wrapper = shallowMount(DocumentationNav, {