chore: refactor

Author: Dobromir Hristov

src/components/DocumentationTopic/Topics.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { TopicStyles } from '@/constants/TopicStyles';
 import TopicsTable from './TopicsTable.vue';
 
 export default {
@@ -32,6 +33,7 @@ export default {
     topicStyle: {
       type: String,
       required: true,
+      validator: v => Object.hasOwnProperty.call(TopicStyles, v),
     },
   },
 };

src/components/DocumentationTopic/TopicsLinkCardGrid.vue

@@ -12,8 +12,8 @@
   <div class="TopicsLinkCardGrid">
     <Row :columns="compactCards ? 3 : 2">
       <Column
-        v-for="(item, index) in items"
-        :key="index"
+        v-for="item in items"
+        :key="item.title"
       >
         <TopicsLinkCardGridItem :item="item" :compact="compactCards" />
       </Column>
@@ -38,6 +38,7 @@ export default {
     topicStyle: {
       type: String,
       default: TopicStyles.compactGrid,
+      validator: v => v === TopicStyles.compactGrid || v === TopicStyles.detailedGrid,
     },
   },
   computed: {

src/components/DocumentationTopic/TopicsLinkCardGridItem.vue

@@ -15,10 +15,10 @@
     :image="imageReferences.card"
     :title="item.title"
     floating-style
-    :size="compact ? undefined: 'large'"
-    :link-text="compact? '': linkText"
+    :size="cardSize"
+    :link-text="linkText"
   >
-    <template #cover="{ classes }" v-if="!imageReferences.card">
+    <template v-if="!imageReferences.card" #cover="{ classes }">
       <div :class="classes" class="reference-card-grid-item__image">
         <TopicTypeIcon
           :type="item.role"
@@ -35,6 +35,7 @@
 import Card from 'docc-render/components/Card.vue';
 import TopicTypeIcon from 'docc-render/components/TopicTypeIcon.vue';
 import { TopicRole } from 'docc-render/constants/roles';
+import CardSize from 'docc-render/constants/CardSize';
 
 export const ROLE_LINK_TEXT = {
   [TopicRole.article]: 'Read article',
@@ -68,7 +69,8 @@ export default {
       all[current.type] = current.reference;
       return all;
     }, { icon: null, card: null }),
-    linkText: ({ item }) => ROLE_LINK_TEXT[item.role] || 'Learn more',
+    linkText: ({ compact, item }) => (compact ? '' : (ROLE_LINK_TEXT[item.role] || 'Learn more')),
+    cardSize: ({ compact }) => (compact ? undefined : CardSize.large),
   },
 };
 </script>

src/components/DocumentationTopic/TopicsTable.vue

@@ -27,13 +27,7 @@
       <template v-if="section.discussion" slot="discussion">
         <ContentNode :content="section.discussion.content" />
       </template>
-      <TopicsLinkCardGrid
-        v-if="!shouldRenderList"
-        :items="section.topics"
-        :topicStyle="topicStyle"
-        class="topic"
-      />
-      <template v-else>
+      <template v-if="shouldRenderList">
         <TopicsLinkBlock
           v-for="topic in section.topics"
           class="topic"
@@ -43,6 +37,12 @@
           :isSymbolBeta="isSymbolBeta"
         />
       </template>
+      <TopicsLinkCardGrid
+        v-else
+        :items="section.topics"
+        :topicStyle="topicStyle"
+        class="topic"
+      />
     </ContentTableSection>
   </ContentTable>
 </template>