From 43f46e96d432d76274d9fdb04563b335d6c53824 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 8 Jul 2022 21:19:19 +0530
Subject: [PATCH] feat: Header for help-center pages (#4987)

---
 .eslintrc.js                                  |   7 +-
 .storybook/preview.js                         |   2 +
 .../Header/ArticleHeader.stories.js           |  44 +++++
 .../helpCenter/Header/ArticleHeader.vue       | 169 ++++++++++++++++++
 .../Header/EditArticleHeader.stories.js       |  39 ++++
 .../helpCenter/Header/EditArticleHeader.vue   | 152 ++++++++++++++++
 .../dashboard/i18n/locale/en/helpCenter.json  |  19 ++
 .../dashboard/i18n/locale/en/index.js         |   2 +
 .../CustomerSatisfaction.stories.js           |   4 +-
 .../FluentIcon/dashboard-icons.json           |   4 +
 .../ui/label/LabelDropdownItem.stories.js     |   4 +-
 package.json                                  |  13 +-
 12 files changed, 448 insertions(+), 11 deletions(-)
 create mode 100644 app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.stories.js
 create mode 100644 app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.vue
 create mode 100644 app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.stories.js
 create mode 100644 app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.vue
 create mode 100644 app/javascript/dashboard/i18n/locale/en/helpCenter.json

diff --git a/.eslintrc.js b/.eslintrc.js
index e699f0fd4..0fae1bc44 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,10 @@
 module.exports = {
-  extends: ['airbnb-base/legacy', 'prettier', 'plugin:vue/recommended'],
+  extends: [
+    'airbnb-base/legacy',
+    'prettier',
+    'plugin:vue/recommended',
+    'plugin:storybook/recommended',
+  ],
   parserOptions: {
     parser: 'babel-eslint',
     ecmaVersion: 2020,
diff --git a/.storybook/preview.js b/.storybook/preview.js
index e0c27a1ac..e553e514a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 import WootUiKit from '../app/javascript/dashboard/components';
 import i18n from '../app/javascript/dashboard/i18n';
@@ -15,6 +16,7 @@ Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
 Vue.component('multiselect', Multiselect);
+Vue.component('fluent-icon', FluentIcon);
 
 const store = new Vuex.Store({});
 const i18nConfig = new VueI18n({
diff --git a/app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.stories.js b/app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.stories.js
new file mode 100644
index 000000000..8de3d12b6
--- /dev/null
+++ b/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'),
+};
diff --git a/app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.vue b/app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.vue
new file mode 100644
index 000000000..d106bd93c
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.stories.js b/app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.stories.js
new file mode 100644
index 000000000..56e0f8770
--- /dev/null
+++ b/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'),
+};
diff --git a/app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.vue b/app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.vue
new file mode 100644
index 000000000..83f2bf987
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
new file mode 100644
index 000000000..041ed6a04
--- /dev/null
+++ b/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"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 9b8773a64..9f880ea92 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/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,
 };
diff --git a/app/javascript/shared/components/CustomerSatisfaction.stories.js b/app/javascript/shared/components/CustomerSatisfaction.stories.js
index 6f50dd7aa..1636835c9 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.stories.js
+++ b/app/javascript/shared/components/CustomerSatisfaction.stories.js
@@ -13,7 +13,7 @@ const Template = (args, { argTypes }) => ({
   template: '<customer-satisfaction />',
 });
 
-export const item = Template.bind({});
-item.args = {
+export const Item = Template.bind({});
+Item.args = {
   onClick: action('Selected'),
 };
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index ebee314fa..3f9572c2c 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -12,6 +12,7 @@
   "arrow-swap-outline": "m14.783 2.22 4.495 4.494a.75.75 0 0 1 .073.976l-.072.085-4.495 4.504a.75.75 0 0 1-1.135-.975l.073-.084 3.217-3.223H5.243A.75.75 0 0 1 4.5 7.35l-.007-.101a.75.75 0 0 1 .648-.743l.102-.007 11.697-.001-3.218-3.217a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.495 4.494-4.495-4.494ZM19.5 16.65l.006.1a.75.75 0 0 1-.648.744l-.102.007L7.063 17.5l3.22 3.22a.75.75 0 0 1 .074.976l-.073.084a.75.75 0 0 1-.976.073l-.085-.072-4.5-4.497a.75.75 0 0 1-.073-.976l.073-.084 4.5-4.504a.75.75 0 0 1 1.134.976l-.073.084L7.066 16h11.692a.75.75 0 0 1 .743.65l.006.1-.006-.1Z",
   "arrow-trending-lines-outline": "M16.749 2h4.554l.1.014.099.028.06.026c.08.034.153.085.219.15l.04.044.044.057.054.09.039.09.019.064.014.064.009.095v4.532a.75.75 0 0 1-1.493.102l-.007-.102V4.559l-6.44 6.44a.75.75 0 0 1-.976.073L13 11 9.97 8.09l-5.69 5.689a.75.75 0 0 1-1.133-.977l.073-.084 6.22-6.22a.75.75 0 0 1 .976-.072l.084.072 3.03 2.91L19.438 3.5h-2.69a.75.75 0 0 1-.742-.648l-.007-.102a.75.75 0 0 1 .648-.743L16.75 2ZM3.75 17a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Zm5.75-3.25a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM13.75 15a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5a.75.75 0 0 1 .75-.75Zm5.75-4.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Z",
   "arrow-up-outline": "M4.21 10.733a.75.75 0 0 0 1.086 1.034l5.954-6.251V20.25a.75.75 0 0 0 1.5 0V5.516l5.955 6.251a.75.75 0 0 0 1.086-1.034l-7.067-7.42a.995.995 0 0 0-.58-.3.754.754 0 0 0-.29.001.995.995 0 0 0-.578.3L4.21 10.733Z",
+  "arrow-sort-outline": "m6.288 4.293-3.995 4-.084.095a1 1 0 0 0 .084 1.32l.095.083a1 1 0 0 0 1.32-.084L6 7.41V19l.007.117a1 1 0 0 0 .993.884l.117-.007A1 1 0 0 0 8 19V7.417l2.293 2.29.095.084a1 1 0 0 0 1.319-1.499l-4.006-4-.094-.083a1 1 0 0 0-1.32.084ZM17 4.003l-.117.007a1 1 0 0 0-.883.993v11.58l-2.293-2.29-.095-.084a1 1 0 0 0-1.319 1.498l4.004 4 .094.084a1 1 0 0 0 1.32-.084l3.996-4 .084-.095a1 1 0 0 0-.084-1.32l-.095-.083a1 1 0 0 0-1.32.084L18 16.587V5.003l-.007-.116A1 1 0 0 0 17 4.003Z",
   "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
   "autocorrect-outline": "M13.461 4.934c.293.184.548.42.752.698l.117.171 2.945 4.696H21.5a.75.75 0 0 1 .743.649l.007.102a.75.75 0 0 1-.75.75l-3.284-.001.006.009-.009-.01a4.75 4.75 0 1 1-3.463-1.5h.756L13.059 6.6a1.25 1.25 0 0 0-2.04-.112l-.078.112-7.556 12.048a.75.75 0 0 1-1.322-.699l.052-.098L9.67 5.803a2.75 2.75 0 0 1 3.791-.869ZM14.751 12a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z",
   "automation-outline": [
@@ -71,6 +72,7 @@
   "file-upload-outline": "M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6Zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7ZM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9Zm2.354-4.854a.5.5 0 1 1-.708.708L6 13.707V16.5a.5.5 0 0 1-1 0v-2.793l-1.146 1.147a.5.5 0 1 1-.708-.707l2-2A.5.5 0 0 1 5.497 12h.006a.498.498 0 0 1 .348.144l.003.003l2 2Z",
   "flash-on-outline": "m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Zm4.745-5.487a.75.75 0 0 0 .711.987h3.74l-8.824 9.196 1.316-5.264a.75.75 0 0 0-.727-.932h-2.51l2.57-9h5.394l-1.67 5.013Z",
   "folder-outline": "M8.207 4c.46 0 .908.141 1.284.402l.156.12L12.022 6.5h7.728a2.25 2.25 0 0 1 2.229 1.938l.016.158.005.154v9a2.25 2.25 0 0 1-2.096 2.245L19.75 20H4.25a2.25 2.25 0 0 1-2.245-2.096L2 17.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h3.957Zm1.44 5.979a2.25 2.25 0 0 1-1.244.512l-.196.009-4.707-.001v7.251c0 .38.282.694.648.743l.102.007h15.5a.75.75 0 0 0 .743-.648l.007-.102v-9a.75.75 0 0 0-.648-.743L19.75 8h-7.729L9.647 9.979ZM8.207 5.5H4.25a.75.75 0 0 0-.743.648L3.5 6.25v2.749L8.207 9a.75.75 0 0 0 .395-.113l.085-.06 1.891-1.578-1.89-1.575a.75.75 0 0 0-.377-.167L8.207 5.5Z",
+  "globe-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999ZM14.939 16.5H9.06c.652 2.414 1.786 4.002 2.939 4.002s2.287-1.588 2.939-4.002Zm-7.43 0H4.785a8.532 8.532 0 0 0 4.094 3.411c-.522-.82-.953-1.846-1.27-3.015l-.102-.395Zm11.705 0h-2.722c-.324 1.335-.792 2.5-1.373 3.411a8.528 8.528 0 0 0 3.91-3.127l.185-.283ZM7.094 10H3.735l-.005.017a8.525 8.525 0 0 0-.233 1.984c0 1.056.193 2.067.545 3h3.173a20.847 20.847 0 0 1-.123-5Zm8.303 0H8.603a18.966 18.966 0 0 0 .135 5h6.524a18.974 18.974 0 0 0 .135-5Zm4.868 0h-3.358c.062.647.095 1.317.095 2a20.3 20.3 0 0 1-.218 3h3.173a8.482 8.482 0 0 0 .544-3c0-.689-.082-1.36-.236-2ZM8.88 4.09l-.023.008A8.531 8.531 0 0 0 4.25 8.5h3.048c.314-1.752.86-3.278 1.583-4.41ZM12 3.499l-.116.005C10.62 3.62 9.396 5.622 8.83 8.5h6.342c-.566-2.87-1.783-4.869-3.045-4.995L12 3.5Zm3.12.59.107.175c.669 1.112 1.177 2.572 1.475 4.237h3.048a8.533 8.533 0 0 0-4.339-4.29l-.291-.121Z",
   "globe-desktop-outline": "M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z",
   "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
   "image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
@@ -134,6 +136,8 @@
   "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
   "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
   "drag-outline": "M15 3.707V8.5a.5.5 0 0 0 1 0V3.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.499.499 0 0 0-.708 0l-2 2a.5.5 0 0 0 .708.708L15 3.707ZM2 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm.5 4.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6ZM15 16.293V11.5a.5.5 0 0 1 1 0v4.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L15 16.293Z",
+  "pane-open-outline": "M14.807 9.249a.75.75 0 0 0-1.059-.056l-2.5 2.25a.75.75 0 0 0 0 1.114l2.5 2.25a.75.75 0 0 0 1.004-1.115l-1.048-.942h3.546a.75.75 0 1 0 0-1.5h-3.546l1.048-.942a.75.75 0 0 0 .055-1.059ZM2 17.251A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75A2.75 2.75 0 0 0 2 6.75v10.5Zm2.75 1.25c-.69 0-1.25-.56-1.25-1.25V6.749c0-.69.56-1.25 1.25-1.25h3.254V18.5H4.75Zm4.754 0V5.5h9.746c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9.504Z",
+  "pane-close-outline": "M9.193 9.249a.75.75 0 0 1 1.059-.056l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 0 1-1.004-1.115l1.048-.942H6.75a.75.75 0 1 1 0-1.5h3.546l-1.048-.942a.75.75 0 0 1-.055-1.06ZM22 17.25A2.75 2.75 0 0 1 19.25 20H4.75A2.75 2.75 0 0 1 2 17.25V6.75A2.75 2.75 0 0 1 4.75 4h14.5A2.75 2.75 0 0 1 22 6.75v10.5Zm-2.75 1.25c.69 0 1.25-.56 1.25-1.25V6.749c0-.69-.56-1.25-1.25-1.25h-3.254V18.5h3.254Zm-4.754 0V5.5H4.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h9.746Z",
   "chevron-left-solid": "M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z",
   "chevron-right-solid": "M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z"
 }
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js b/app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js
index e5e7cf4af..178f05fa9 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js
+++ b/app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js
@@ -33,7 +33,7 @@ const Template = (args, { argTypes }) => ({
     '<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
 });
 
-export const item = Template.bind({});
-item.args = {
+export const Item = Template.bind({});
+Item.args = {
   onClick: action('Selected'),
 };
diff --git a/package.json b/package.json
index 703f364fd..b4567cabe 100644
--- a/package.json
+++ b/package.json
@@ -83,12 +83,12 @@
     "@babel/core": "7.13.16",
     "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/preset-env": "7.13.15",
-    "@storybook/addon-actions": "6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/addons": "6.2.9",
-    "@storybook/vue": "6.2.9",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/addons": "6.5.9",
+    "@storybook/vue": "6.5.9",
     "@vue/test-utils": "1.1.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
@@ -106,6 +106,7 @@
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-storybook": "^0.5.13",
     "eslint-plugin-vue": "^6.2.2",
     "expect-more-jest": "^2.4.2",
     "husky": "^7.0.0",