Remove ability to override icons in "Topics" section (#774)

Due to limitations with remote SVG assets, there can be an issue where
the color of a custom icon may be present in multiple locations using
the same color, which results in a less than ideal experience.

Current known workarounds for this issue would necessitate server side
headers for cross origin resource sharing, which DocC-Render can't
control since it is a client-side only tool—with that in mind, it makes
more sense to remove the ability for overriding the icon here and
leaving it as something to customize in the hero element only for now.

Resolves: rdar://120670171

Author: mportiz08

src/components/DocumentationTopic/TopicLinkBlockIcon.vue

@@ -9,9 +9,8 @@
 -->
 
 <template>
-  <div class="topic-icon-wrapper" v-if="imageOverride || icon">
-    <OverridableAsset v-if="imageOverride" :imageOverride="imageOverride" class="topic-icon" />
-    <component v-else-if="icon" :is="icon" class="topic-icon" />
+  <div class="topic-icon-wrapper" v-if="icon">
+    <component :is="icon" class="topic-icon" />
   </div>
 </template>
 
@@ -25,7 +24,6 @@ import TechnologyIcon from 'theme/components/Icons/TechnologyIcon.vue';
 import TutorialIcon from 'theme/components/Icons/TutorialIcon.vue';
 import SVGIcon from 'docc-render/components/SVGIcon.vue';
 import { TopicRole } from 'docc-render/constants/roles';
-import OverridableAsset from 'docc-render/components/OverridableAsset.vue';
 
 const TopicRoleIcons = {
   [TopicRole.article]: ArticleIcon,
@@ -41,16 +39,12 @@ const TopicRoleIcons = {
 };
 
 export default {
-  components: { OverridableAsset, SVGIcon },
+  components: { SVGIcon },
   props: {
     role: {
       type: String,
       required: true,
     },
-    imageOverride: {
-      type: Object,
-      default: null,
-    },
   },
 
   computed: {

src/components/DocumentationTopic/TopicsLinkBlock.vue

@@ -20,7 +20,6 @@
       <TopicLinkBlockIcon
         v-if="topic.role && !change"
         :role="topic.role"
-        :imageOverride="references[iconOverride]"
       />
       <DecoratedTopicTitle v-if="topic.fragments" :tokens="topic.fragments" />
       <WordBreak v-else :tag="titleTag">{{ topic.title }}</WordBreak>

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

@@ -13,7 +13,6 @@ import { mount } from '@vue/test-utils';
 import { TopicRole } from '@/constants/roles';
 import ArticleIcon from '@/components/Icons/ArticleIcon.vue';
 import TechnologyIcon from '@/components/Icons/TechnologyIcon.vue';
-import OverridableAsset from '@/components/OverridableAsset.vue';
 
 const defaultProps = {
   role: TopicRole.article,
@@ -33,30 +32,9 @@ describe('TopicLinkBlockIcon', () => {
     expect(wrapper.find('.topic-icon').is(ArticleIcon)).toBe(true);
   });
 
-  it('renders an override icon from an image override', () => {
-    const imageOverride = {
-      variants: [{
-        url: '/foo/bar',
-        svgID: 'foo',
-      }],
-    };
+  it('renders nothing if no role', () => {
     const wrapper = createWrapper({
       propsData: {
-        imageOverride,
-      },
-    });
-    const icon = wrapper.find('.topic-icon');
-    expect(icon.is(ArticleIcon)).toBe(false);
-    expect(icon.is(OverridableAsset)).toBe(true);
-    expect(icon.props()).toMatchObject({
-      imageOverride,
-    });
-  });
-
-  it('renders nothing if no role or image override', () => {
-    const wrapper = createWrapper({
-      propsData: {
-        imageOverride: null,
         role: TopicRole.devLink, // no icon for this
       },
     });

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

@@ -32,22 +32,13 @@ describe('TopicsLinkBlock', () => {
   /** @type {import('@vue/test-utils').Wrapper} */
   let wrapper;
 
-  const iconOverride = {
-    type: 'icon',
-    identifier: 'icon-override',
-  };
-
-  const references = {
-    [iconOverride.identifier]: { foo: 'bar' },
-  };
-
   const store = {
     reset: jest.fn(),
     setAPIChanges: jest.fn(),
     state: {
       onThisPageSections: [],
       apiChanges: null,
-      references,
+      references: {},
     },
   };
 
@@ -135,18 +126,6 @@ describe('TopicsLinkBlock', () => {
     expect(link.props('role')).toBe(propsData.topic.role);
   });
 
-  it('renders a TopicLinkBlockIcon with an override', () => {
-    const icon = wrapper.find(TopicLinkBlockIcon);
-    expect(icon.props('imageOverride')).toBe(null);
-    wrapper.setProps({
-      topic: {
-        ...propsData.topic,
-        images: [iconOverride, { type: 'card', identifier: 'foo' }],
-      },
-    });
-    expect(icon.props('imageOverride')).toBe(references[iconOverride.identifier]);
-  });
-
   it('renders a normal `WordBreak` for the link text', () => {
     const wordBreak = wrapper.find('.link').find(WordBreak);
     expect(wordBreak.exists()).toBe(true);