feat: Components to render articles in widget home (#7596)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="py-2">
+    <h3 class="text-sm font-semibold text-slate-900 mb-0">{{ title }}</h3>
+    <article-list :articles="articles" />
+    <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')"
+    >
+      <span class="pr-2">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <fluent-icon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>
+
+<script>
+import ArticleList from './ArticleList.vue';
+export default {
+  components: { ArticleList },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+    categoryPath: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.see-articles {
+  color: var(--brand-textButtonClear);
+  svg {
+    color: var(--brand-textButtonClear);
+  }
+}
+</style>

app/javascript/widget/components/ArticleHero.vue

@@ -0,0 +1,30 @@
+<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>
+</template>
+
+<script>
+import CategoryCard from './ArticleCategoryCard.vue';
+export default {
+  components: { CategoryCard },
+  props: {
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+    categoryPath: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style></style>

app/javascript/widget/components/ArticleList.vue

@@ -0,0 +1,34 @@
+<template>
+  <ul role="list" class="py-2">
+    <article-list-item
+      v-for="article in articles"
+      :key="article.id"
+      :link="article.link"
+      :title="article.title"
+      @click="onClick"
+    />
+  </ul>
+</template>
+<script>
+import ArticleListItem from './ArticleListItem';
+
+export default {
+  components: {
+    ArticleListItem,
+  },
+  props: {
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onClick(link) {
+      this.$emit('click', link);
+    },
+  },
+};
+</script>

app/javascript/widget/components/ArticleListItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <li
+    class="py-1 flex items-center justify-between  -mx-1 px-1 hover:bg-slate-25"
+  >
+    <button
+      class="text-slate-700 hover:text-slate-900 underline-offset-2 text-sm leading-6"
+      @click="onClick"
+    >
+      {{ title }}
+    </button>
+    <span class="pl-1 text-slate-700 arrow">
+      <fluent-icon icon="arrow-right" size="14" />
+    </span>
+  </li>
+</template>
+<script>
+export default {
+  props: {
+    link: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onClick() {
+      this.$emit('click', this.link);
+    },
+  },
+};
+</script>

app/javascript/widget/components/ArticleSearch.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+      <kbd
+        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+      >
+        ⌘K
+      </kbd>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from '@chatwoot/utils';
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  methods: {
+    handleInput: debounce(
+      () => {
+        this.$emit('search', this.searchQuery);
+      },
+      500,
+      true
+    ),
+  },
+};
+</script>

app/javascript/widget/components/SearchArticle.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
+      <kbd
+        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+      >
+        ⌘K
+      </kbd>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from '@chatwoot/utils';
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  methods: {
+    handleInput: debounce(
+      () => {
+        this.$emit('search', this.searchQuery);
+      },
+      500,
+      true
+    ),
+  },
+};
+</script>

app/javascript/widget/components/stories/ArticleHero.stories.js

@@ -0,0 +1,30 @@
+import { action } from '@storybook/addon-actions';
+import ArticleHero from '../ArticleHero.vue'; // adjust this path to match your file's location
+
+export default {
+  title: 'Components/Widgets/ArticleHero',
+  component: ArticleHero,
+  argTypes: {
+    articles: { control: 'array', description: 'Array of articles' },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleHero },
+  template:
+    '<article-hero v-bind="$props" @view-all-articles="viewAllArticles" />',
+  methods: {
+    viewAllArticles: action('view-all-articles'),
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  articles: [
+    { title: 'Article 1', content: 'This is article 1.' },
+    { title: 'Article 2', content: 'This is article 2.' },
+    { title: 'Article 3', content: 'This is article 3.' },
+    { title: 'Article 4', content: 'This is article 4.' },
+  ],
+};

app/javascript/widget/i18n/locale/en.json

@@ -105,5 +105,9 @@
       "CLICK_HERE_TO_JOIN": "Click here to join",
       "LEAVE_THE_ROOM": "Leave the call"
     }
+  },
+  "PORTAL": {
+    "POPULAR_ARTICLES": "Popular Articles",
+    "VIEW_ALL_ARTICLES": "View all articles"
   }
 }