feat: Article item component (#5007)

app/javascript/dashboard/components/helpCenter/ArticleItem.stories.js

@@ -0,0 +1,63 @@
+import ArticleItemComponent from './ArticleItem.vue';
+const STATUS_LIST = {
+  published: 'published',
+  draft: 'draft',
+  archived: 'archived',
+};
+
+export default {
+  title: 'Components/Help Center',
+  component: ArticleItemComponent,
+  argTypes: {
+    title: {
+      defaultValue: 'Setup your account',
+      control: {
+        type: 'text',
+      },
+    },
+    readCount: {
+      defaultValue: 13,
+      control: {
+        type: 'number',
+      },
+    },
+    category: {
+      defaultValue: 'Getting started',
+      control: {
+        type: 'text',
+      },
+    },
+    status: {
+      defaultValue: 'Status',
+      control: {
+        type: 'select',
+        options: STATUS_LIST,
+      },
+    },
+    updatedAt: {
+      defaultValue: '1657255863',
+      control: {
+        type: 'number',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleItemComponent },
+  template:
+    '<article-item-component v-bind="$props" ></article-item-component>',
+});
+
+export const ArticleItem = Template.bind({});
+ArticleItem.args = {
+  title: 'Setup your account',
+  author: {
+    name: 'John Doe',
+  },
+  category: 'Getting started',
+  readCount: 12,
+  status: 'published',
+  updatedAt: 1657255863,
+};

app/javascript/dashboard/components/helpCenter/ArticleItem.vue

@@ -0,0 +1,116 @@
+<template>
+  <tbody>
+    <tr>
+      <td>
+        <div class="row--article-block">
+          <div class="article-block">
+            <h6 class="sub-block-title text-truncate">
+              <router-link class="article-name"> {{ title }} </router-link>
+            </h6>
+            <div class="author">
+              <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
+              <span class="name">{{ articleAuthorName }}</span>
+            </div>
+          </div>
+        </div>
+      </td>
+      <td>{{ category }}</td>
+      <td>{{ readCount }}</td>
+      <td>
+        <Label :title="status" color-scheme="success" />
+      </td>
+      <td>{{ lastUpdatedAt }}</td>
+    </tr>
+  </tbody>
+</template>
+<script>
+import Label from 'dashboard/components/ui/Label';
+import timeMixin from 'dashboard/mixins/time';
+export default {
+  components: {
+    Label,
+  },
+  mixins: [timeMixin],
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    author: {
+      type: Object,
+      default: () => {},
+    },
+    category: {
+      type: String,
+      default: '',
+    },
+    readCount: {
+      type: Number,
+      default: 0,
+    },
+    status: {
+      type: String,
+      default: 'draft',
+      values: ['archived', 'draft', 'archived'],
+    },
+    updatedAt: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    lastUpdatedAt() {
+      return this.dynamicTime(this.updatedAt);
+    },
+    articleAuthorName() {
+      return this.author.name;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+tbody {
+  width: 100%;
+  display: table;
+}
+td {
+  font-weight: var(--font-weight-normal);
+  color: var(--s-700);
+  font-size: var(--font-size-mini);
+}
+.row--article-block {
+  align-items: center;
+  display: flex;
+  text-align: left;
+
+  .article-block {
+    min-width: 0;
+  }
+
+  .sub-block-title {
+    margin-bottom: 0;
+  }
+
+  .article-name {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-default);
+    margin: 0;
+    text-transform: capitalize;
+    color: var(--s-900);
+  }
+  .author {
+    .by {
+      font-weight: var(--font-weight-normal);
+      color: var(--s-500);
+      font-size: var(--font-size-small);
+    }
+    .name {
+      font-weight: var(--font-weight-medium);
+      color: var(--s-600);
+      font-size: var(--font-size-mini);
+    }
+  }
+}
+</style>