feat: Header for help-center pages (#4987)

app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.stories.js

@@ -0,0 +1,44 @@
+import { action } from '@storybook/addon-actions';
+import ArticleHeader from './ArticleHeader';
+
+export default {
+  title: 'Components/Help Center/Header',
+  component: ArticleHeader,
+  argTypes: {
+    headerTitle: {
+      defaultValue: 'All articles',
+      control: {
+        type: 'text',
+      },
+    },
+    count: {
+      defaultValue: 112,
+      control: {
+        type: 'number',
+      },
+    },
+    selectedValue: {
+      defaultValue: 'Status',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleHeader },
+  template:
+    '<article-header v-bind="$props" @openModal="openFilterModal" @open="openDropdown" @close="closeDropdown" ></article-header>',
+});
+
+export const ArticleHeaderView = Template.bind({});
+ArticleHeaderView.args = {
+  headerTitle: 'All articles',
+  count: 112,
+  selectedValue: 'Status',
+  openFilterModal: action('openedFilterModal'),
+  openDropdown: action('opened'),
+  closeDropdown: action('closed'),
+};

app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="header--wrap">
+    <div class="header-left--wrap">
+      <h3 class="page-title">{{ headerTitle }}</h3>
+      <span class="text-block-title count-view">{{ `(${count})` }}</span>
+    </div>
+    <div class="header-right--wrap">
+      <woot-button
+        class-names="article--buttons"
+        icon="filter"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="openFilterModal"
+      >
+        {{ $t('HELP_CENTER.HEADER.FILTER') }}
+      </woot-button>
+      <woot-button
+        class-names="article--buttons"
+        icon="arrow-sort"
+        color-scheme="secondary"
+        size="small"
+        variant="hollow"
+        @click="openDropdown"
+      >
+        {{ $t('HELP_CENTER.HEADER.SORT') }}
+        <span class="selected-value">
+          {{ selectedValue }}
+          <Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
+        </span>
+      </woot-button>
+      <div
+        v-if="showSortByDropdown"
+        v-on-clickaway="closeDropdown"
+        class="dropdown-pane dropdown-pane--open"
+      >
+        <woot-dropdown-menu>
+          <woot-dropdown-item>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="send-clock"
+            >
+              {{ 'Status' }}
+            </woot-button>
+          </woot-dropdown-item>
+          <woot-dropdown-item>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="dual-screen-clock"
+            >
+              {{ 'Created' }}
+            </woot-button>
+          </woot-dropdown-item>
+          <woot-dropdown-item>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="calendar-clock"
+            >
+              {{ 'Last edited' }}
+            </woot-button>
+          </woot-dropdown-item>
+        </woot-dropdown-menu>
+      </div>
+      <woot-button
+        v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
+        icon="settings"
+        class-names="article--buttons"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+      />
+      <woot-button
+        class-names="article--buttons"
+        size="small"
+        color-scheme="primary"
+      >
+        {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+export default {
+  components: {
+    FluentIcon,
+    WootDropdownItem,
+    WootDropdownMenu,
+  },
+  mixins: [clickaway],
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    selectedValue: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      showSortByDropdown: false,
+    };
+  },
+  methods: {
+    openFilterModal() {
+      this.$emit('openModal');
+    },
+    openDropdown() {
+      this.$emit('open');
+      this.showSortByDropdown = true;
+    },
+    closeDropdown() {
+      this.$emit('close');
+      this.showSortByDropdown = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.header--wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+  height: var(--space-larger);
+}
+.header-left--wrap {
+  display: flex;
+  align-items: center;
+}
+.header-right--wrap {
+  display: flex;
+  align-items: center;
+}
+.count-view {
+  margin-left: var(--space-smaller);
+}
+.selected-value {
+  display: inline-flex;
+  margin-left: var(--space-smaller);
+  color: var(--b-900);
+  align-items: center;
+}
+.dropdown-arrow {
+  margin-left: var(--space-smaller);
+}
+.article--buttons {
+  margin-left: var(--space-smaller);
+}
+</style>

app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.stories.js

@@ -0,0 +1,39 @@
+import { action } from '@storybook/addon-actions';
+import EditArticleHeader from './EditArticleHeader';
+
+export default {
+  title: 'Components/Help Center/Header',
+  component: EditArticleHeader,
+  argTypes: {
+    backButtonLabel: {
+      defaultValue: 'Articles',
+      control: {
+        type: 'text',
+      },
+    },
+    draftState: {
+      defaultValue: 'saving',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { EditArticleHeader },
+  template:
+    '<edit-article-header v-bind="$props" @back="onClickGoBack" @show="showPreview" @add="onClickAdd" @open="openSidebar" @close="closeSidebar" ></edit-article-header>',
+});
+
+export const EditArticleHeaderView = Template.bind({});
+EditArticleHeaderView.args = {
+  backButtonLabel: 'Articles',
+  draftState: 'saving',
+  onClickGoBack: action('goBack'),
+  showPreview: action('previewOpened'),
+  onClickAdd: action('added'),
+  openSidebar: action('openedSidebar'),
+  closeSidebar: action('closedSidebar'),
+};

app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="header--wrap">
+    <div class="header-left--wrap">
+      <woot-button
+        icon="chevron-left"
+        class-names="article--buttons"
+        variant="clear"
+        color-scheme="primary"
+        @click="onClickGoBack"
+      >
+        {{ backButtonLabel }}
+      </woot-button>
+    </div>
+    <div class="header-right--wrap">
+      <span v-if="showDraftStatus" class="draft-status">
+        {{ draftStatusText }}
+      </span>
+      <woot-button
+        class-names="article--buttons"
+        icon="globe"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="showPreview"
+      >
+        {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
+      </woot-button>
+      <woot-button
+        class-names="article--buttons"
+        icon="add"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="onClickAdd"
+      >
+        {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
+      </woot-button>
+      <woot-button
+        v-if="isSidebarOpen"
+        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
+        icon="pane-open"
+        class-names="article--buttons"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        @click="openSidebar"
+      />
+      <woot-button
+        v-else
+        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
+        icon="pane-close"
+        class-names="article--buttons"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        @click="closeSidebar"
+      />
+      <woot-button
+        class-names="article--buttons"
+        size="small"
+        color-scheme="primary"
+      >
+        {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    backButtonLabel: {
+      type: String,
+      default: '',
+    },
+    draftState: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isSidebarOpen: true,
+    };
+  },
+  computed: {
+    isDraftStatusSavingOrSaved() {
+      return this.draftState === 'saving' || 'saved';
+    },
+    draftStatusText() {
+      if (this.draftState === 'saving') {
+        return this.$t('HELP_CENTER.EDIT_HEADER.SAVING');
+      }
+      if (this.draftState === 'saved') {
+        return this.$t('HELP_CENTER.EDIT_HEADER.SAVED');
+      }
+      return '';
+    },
+    showDraftStatus() {
+      return this.isDraftStatusSavingOrSaved;
+    },
+  },
+  methods: {
+    onClickGoBack() {
+      this.$emit('back');
+    },
+    showPreview() {
+      this.$emit('show');
+    },
+    onClickAdd() {
+      this.$emit('add');
+    },
+    openSidebar() {
+      this.$emit('open');
+      this.isSidebarOpen = true;
+    },
+    closeSidebar() {
+      this.$emit('close');
+      this.isSidebarOpen = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.header--wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+  height: var(--space-larger);
+}
+.header-left--wrap {
+  display: flex;
+  align-items: center;
+}
+.header-right--wrap {
+  display: flex;
+  align-items: center;
+}
+.article--buttons {
+  margin-left: var(--space-smaller);
+}
+.draft-status {
+  margin-right: var(--space-smaller);
+  margin-left: var(--space-normal);
+  color: var(--s-400);
+  align-items: center;
+  font-size: var(--font-size-mini);
+}
+</style>

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -0,0 +1,19 @@
+{
+  "HELP_CENTER": {
+    "HEADER": {
+      "FILTER": "Filter by",
+      "SORT": "Sort by",
+      "SETTINGS_BUTTON": "Settings",
+      "NEW_BUTTON": "New Article"
+    },
+    "EDIT_HEADER": {
+      "PUBLISH_BUTTON": "Publish",
+      "PREVIEW": "Preview",
+      "ADD_TRANSLATION": "Add translation",
+      "OPEN_SIDEBAR": "Open sidebar",
+      "CLOSE_SIDEBAR": "Close sidebar",
+      "SAVING": "Draft saving...",
+      "SAVED": "Draft saved"
+    }
+  }
+}

app/javascript/dashboard/i18n/locale/en/index.js

@@ -23,6 +23,7 @@ import { default as _settings } from './settings.json';
 import { default as _signup } from './signup.json';
 import { default as _teamsSettings } from './teamsSettings.json';
 import { default as _whatsappTemplates } from './whatsappTemplates.json';
+import { default as _helpCenter } from './helpCenter.json';
 
 export default {
   ..._advancedFilters,
@@ -50,4 +51,5 @@ export default {
   ..._teamsSettings,
   ..._whatsappTemplates,
   ..._bulkActions,
+  ..._helpCenter,
 };