Remove Technology list from the ribbon to use badges

src/components/Badge.vue

@@ -67,6 +67,7 @@ $badge-border-radius: $border-radius - 1px !default;
     --badge-color: var(--badge-dark-color);
   }
 
+  /* nav bar badge */
   &-deprecated {
     @include badge-variation(deprecated);
   }

src/components/DocumentationTopic.vue

@@ -18,16 +18,12 @@
         <div v-if="sampleCodeDownload">
           <DownloadButton class="sample-download" :action="sampleCodeDownload.action" />
         </div>
-        <Availability v-if="platforms" :platforms="platforms" />
+        <Availability
+          v-if="(platforms || []).length || (technologies || []).length"
+          :platforms="platforms" :technologies="technologies"
+        />
       </DocumentationHero>
-        <Summary v-if="!hideSummary">
-          <TechnologyList v-if="modules" :technologies="modules" />
-          <TechnologyList
-            v-if="extendsTechnology"
-            class="extends-technology"
-            title="Extends"
-            :technologies="[{ name: extendsTechnology }]"
-          />
+        <Summary v-if="!hideSummary && shouldShowLanguageSwitcher">
           <LanguageSwitcher
             v-if="shouldShowLanguageSwitcher"
             :interfaceLanguage="interfaceLanguage"
@@ -96,7 +92,6 @@ import ContentNode from './DocumentationTopic/ContentNode.vue';
 import CallToActionButton from './CallToActionButton.vue';
 import DefaultImplementations from './DocumentationTopic/DefaultImplementations.vue';
 import Description from './DocumentationTopic/Description.vue';
-import TechnologyList from './DocumentationTopic/Summary/TechnologyList.vue';
 import PrimaryContent from './DocumentationTopic/PrimaryContent.vue';
 import Relationships from './DocumentationTopic/Relationships.vue';
 import RequirementMetadata from './DocumentationTopic/Description/RequirementMetadata.vue';
@@ -133,7 +128,6 @@ export default {
     DefaultImplementations,
     Description,
     DownloadButton: CallToActionButton,
-    TechnologyList,
     LanguageSwitcher,
     PrimaryContent,
     Relationships,
@@ -229,9 +223,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    extendsTechnology: {
-      type: String,
-    },
     tags: {
       type: Array,
       required: true,
@@ -260,6 +251,10 @@ export default {
       type: String,
       default: '',
     },
+    technology: {
+      type: Object,
+      required: true,
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.references change, the provided value
@@ -302,6 +297,16 @@ export default {
     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) => {
+        list.push(module.name);
+        return list.concat(module.relatedModules || []);
+      }, []);
+      // show modules if page belongs to/require multiple technologies
+      // or if name doesn't match root of page
+      return technologyList.length === 1
+        && technologyList[0] === technology.title ? [] : technologyList;
+    },
   },
   methods: {
     normalizePath(path) {

src/components/DocumentationTopic/Summary/Availability.vue

@@ -10,6 +10,15 @@
 
 <template>
   <Section class="availability" role="complementary" aria-label="Availability">
+    <Badge
+      v-for="technology in technologies"
+      class="technology"
+      :key="technology"
+    >
+      <TechnologyIcon class="tech-icon" />
+      {{ technology }}
+    </Badge>
+
     <Badge
       v-for="platform in platforms"
       class="platform"
@@ -21,8 +30,8 @@
         :introducedAt="platform.introducedAt"
         :platformName="platform.name"
       />
-        <span v-if="platform.deprecatedAt" class="deprecated">Deprecated</span>
-        <span v-else-if="platform.beta" class="beta">Beta</span>
+      <span v-if="platform.deprecatedAt" class="deprecated">Deprecated</span>
+      <span v-else-if="platform.beta" class="beta">Beta</span>
     </Badge>
   </Section>
 </template>
@@ -31,6 +40,7 @@
 import Badge from 'docc-render/components/Badge.vue';
 import { ChangeTypes } from 'docc-render/constants/Changes';
 import { getAPIChanges } from 'docc-render/mixins/apiChangesHelpers';
+import TechnologyIcon from 'theme/components/Icons/TechnologyIcon.vue';
 import AvailabilityRange from './AvailabilityRange.vue';
 import Section from './Section.vue';
 
@@ -42,12 +52,17 @@ export default {
     Badge,
     AvailabilityRange,
     Section,
+    TechnologyIcon,
   },
   props: {
     platforms: {
       type: Array,
       required: true,
     },
+    technologies: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
@@ -98,6 +113,21 @@ export default {
   margin: 0;
 }
 
+.technology {
+  display: inline-flex;
+  align-items: center;
+}
+
+.tech-icon {
+  height: 12px;
+  padding-right: 5px;
+  fill: var(--badge-color);
+
+  .theme-dark & {
+    fill: var(--badge-color);
+  }
+}
+
 .beta {
   color: var(--color-badge-beta);
 

src/components/Icons/TechnologyIcon.vue

@@ -0,0 +1,24 @@
+<!--
+  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>
+  <SVGIcon viewBox="0 0 14 14" class="technology-icon">
+    <path d="M3.39,9l3.16,1.84.47.28.47-.28L10.61,9l.45.26,1.08.63L7,12.91l-5.16-3,1.08-.64L3.39,9M7,0,0,4.1,2.47,5.55,0,7,2.47,8.44,0,9.9,7,14l7-4.1L11.53,8.45,14,7,11.53,5.56,14,4.1ZM7,7.12,5.87,6.45l-1.54-.9L3.39,5,1.85,4.1,7,1.08l5.17,3L10.6,5l-.93.55-1.54.91ZM7,10,3.39,7.9,1.85,7,3.4,6.09,4.94,7,7,8.2,9.06,7,10.6,6.1,12.15,7l-1.55.9Z"/>
+  </SVGIcon>
+</template>
+
+<script>
+import SVGIcon from 'docc-render/components/SVGIcon.vue';
+
+export default {
+  name: 'TechnologyIcon',
+  components: { SVGIcon },
+};
+</script>

src/views/DocumentationTopic.vue

@@ -62,6 +62,7 @@
           :isSymbolDeprecated="isSymbolDeprecated"
           :isSymbolBeta="isSymbolBeta"
           :languagePaths="languagePaths"
+          :technology="technology"
         />
       </component>
     </template>
@@ -145,7 +146,6 @@ export default {
           url: identifier,
         },
         metadata: {
-          extends: extendsTechnology,
           conformance,
           modules,
           platforms,
@@ -187,7 +187,6 @@ export default {
         topicSections,
         seeAlsoSections,
         variantOverrides,
-        extendsTechnology,
         symbolKind,
         tags: tags.slice(0, 1), // make sure we only show the first tag
       };

tests/unit/components/DocumentationTopic.spec.js

@@ -26,7 +26,6 @@ const {
   Aside,
   Description,
   DownloadButton,
-  TechnologyList,
   LanguageSwitcher,
   PrimaryContent,
   Relationships,
@@ -107,7 +106,7 @@ const sampleCodeDownload = {
 
 const propsData = {
   abstract: [abstract],
-  conformance: { constraints: [], availabilityPrefx: [] },
+  conformance: { constraints: [], availabilityPrefix: [] },
   hierarchy: {
     paths: [
       [
@@ -121,6 +120,18 @@ const propsData = {
   symbolKind: TopicTypes.module,
   objcPath: 'documentation/objc',
   swiftPath: 'documentation/swift',
+  technology: { title: 'fookit' },
+  platforms: [
+    {
+      introducedAt: '1.0',
+      name: 'fooOS',
+    },
+    {
+      deprecatedAt: '2.0',
+      introducedAt: '1.0',
+      name: 'barOS',
+    },
+  ],
   primaryContentSections: [
     {
       kind: PrimaryContent.constants.SectionKind.content,
@@ -345,31 +356,9 @@ describe('DocumentationTopic', () => {
     });
 
     it('renders a `Availability` with platforms data', () => {
-      const platforms = [
-        {
-          introducedAt: '1.0',
-          name: 'fooOS',
-        },
-        {
-          deprecatedAt: '2.0',
-          introducedAt: '1.0',
-          name: 'barOS',
-        },
-      ];
-      wrapper.setProps({ platforms });
-
       const list = wrapper.find(Availability);
       expect(list.exists()).toBe(true);
-      expect(list.props('platforms')).toEqual(platforms);
-    });
-
-    it('renders a `TechnologyList` with technologies data', () => {
-      const modules = ['FooKit', 'BarKit'];
-      wrapper.setProps({ modules });
-
-      const list = wrapper.find(TechnologyList);
-      expect(list.exists()).toBe(true);
-      expect(list.props('technologies')).toEqual(modules);
+      expect(list.props('platforms')).toEqual(propsData.platforms);
     });
 
     it('renders a `LanguageSwitcher`', () => {
@@ -381,22 +370,6 @@ describe('DocumentationTopic', () => {
         swiftPath: propsData.languagePaths.swift[0],
       });
     });
-
-    it('renders an `TechnologyList` component', () => {
-      expect(wrapper.find('.extends-technology').exists()).toBe(false);
-      const extendsTechnology = 'FooTechnology';
-
-      wrapper.setProps({
-        extendsTechnology,
-      });
-
-      const technologyList = wrapper.find('.extends-technology');
-      expect(technologyList.exists()).toBe(true);
-      expect(technologyList.props()).toEqual({
-        technologies: [{ name: extendsTechnology }],
-        title: 'Extends',
-      });
-    });
   });
 
   it('renders `Topics` if there are topic sections', () => {