fix: Refactor components in widget to show articles (#7874)

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -1,21 +1,27 @@
 <template>
-  <div class="py-2">
-    <h3 class="text-sm font-semibold text-slate-900 mb-0">{{ title }}</h3>
-    <article-list :articles="articles" />
+  <div>
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50 mb-0">
+      {{ title }}
+    </h3>
+    <article-list :articles="articles" @click="onArticleClick" />
     <button
-      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 justify-between items-center hover:bg-slate-25 see-articles"
-      @click="$emit('view-all-articles')"
+      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      :style="{ color: widgetColor }"
+      @click="$emit('view-all')"
     >
-      <span class="pr-2">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
       <fluent-icon icon="arrow-right" size="14" />
     </button>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import ArticleList from './ArticleList.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
 export default {
-  components: { ArticleList },
+  components: { FluentIcon, ArticleList },
   props: {
     title: {
       type: String,
@@ -25,9 +31,13 @@ export default {
       type: Array,
       default: () => [],
     },
-    categoryPath: {
-      type: String,
-      default: '',
+  },
+  computed: {
+    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+  },
+  methods: {
+    onArticleClick(link) {
+      this.$emit('view', link);
     },
   },
 };

app/javascript/widget/components/ArticleHero.vue

@@ -1,13 +1,10 @@
 <template>
-  <div>
-    <h2 class="text-base font-bold leading-6 text-slate-800 mb-0">
-      {{ $t('PORTAL.POPULAR_ARTICLES') }}
-    </h2>
-    <category-card
-      :articles="articles.slice(0, 4)"
-      @view-all-articles="$emit('view-all-articles')"
-    />
-  </div>
+  <category-card
+    :title="$t('PORTAL.POPULAR_ARTICLES')"
+    :articles="articles.slice(0, 4)"
+    @view-all="$emit('view-all')"
+    @view="onArticleClick"
+  />
 </template>
 
 <script>
@@ -24,6 +21,11 @@ export default {
       default: '',
     },
   },
+  methods: {
+    onArticleClick(link) {
+      this.$emit('view', link);
+    },
+  },
 };
 </script>
 

app/javascript/widget/components/ArticleList.vue

@@ -2,13 +2,14 @@
   <ul role="list" class="py-2">
     <article-list-item
       v-for="article in articles"
-      :key="article.id"
+      :key="article.slug"
       :link="article.link"
       :title="article.title"
       @click="onClick"
     />
   </ul>
 </template>
+
 <script>
 import ArticleListItem from './ArticleListItem';
 

app/javascript/widget/components/ArticleListItem.vue

@@ -1,20 +1,25 @@
 <template>
   <li
-    class="py-1 flex items-center justify-between  -mx-1 px-1 hover:bg-slate-25"
+    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-75 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900 "
+    @click="onClick"
   >
     <button
-      class="text-slate-700 hover:text-slate-900 underline-offset-2 text-sm leading-6"
+      class="underline-offset-2 text-sm leading-6 text-left"
       @click="onClick"
     >
       {{ title }}
     </button>
-    <span class="pl-1 text-slate-700 arrow">
+    <span class="pl-1 arrow">
       <fluent-icon icon="arrow-right" size="14" />
     </span>
   </li>
 </template>
+
 <script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
 export default {
+  components: { FluentIcon },
   props: {
     link: {
       type: String,