diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js new file mode 100644 index 000000000..245eded8b --- /dev/null +++ b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js @@ -0,0 +1,134 @@ +import { action } from '@storybook/addon-actions'; +import Sidebar from './Sidebar'; +import Thumbnail from 'dashboard/components/widgets/Thumbnail'; + +export default { + title: 'Components/Help Center/Sidebar', + component: { Sidebar, Thumbnail }, + argTypes: { + thumbnailSrc: { + defaultValue: '', + control: { + type: 'text', + }, + }, + headerTitle: { + defaultValue: '', + control: { + type: 'text', + }, + }, + subTitle: { + defaultValue: '', + control: { + type: 'text', + }, + }, + accessibleMenuItems: [], + additionalSecondaryMenuItems: [], + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { Sidebar }, + template: '', +}); + +export const HelpCenterSidebarView = Template.bind({}); +HelpCenterSidebarView.args = { + onSearch: action('search'), + thumbnailSrc: '', + headerTitle: 'Help Center', + subTitle: 'English', + accessibleMenuItems: [ + { + icon: 'book', + label: 'HELP_CENTER.ALL_ARTICLES', + key: 'helpcenter_all', + count: 199, + toState: 'accounts/1/articles/all', + toolTip: 'All Articles', + toStateName: 'helpcenter_all', + }, + { + icon: 'pen', + label: 'HELP_CENTER.MY_ARTICLES', + key: 'helpcenter_mine', + count: 112, + toState: 'accounts/1/articles/mine', + toolTip: 'My articles', + toStateName: 'helpcenter_mine', + }, + { + icon: 'draft', + label: 'HELP_CENTER.DRAFT', + key: 'helpcenter_draft', + count: 32, + toState: 'accounts/1/articles/draft', + toolTip: 'Draft', + toStateName: 'helpcenter_draft', + }, + { + icon: 'archive', + label: 'HELP_CENTER.ARCHIVED', + key: 'helpcenter_archive', + count: 10, + toState: 'accounts/1/articles/archived', + toolTip: 'Archived', + toStateName: 'helpcenter_archive', + }, + ], + additionalSecondaryMenuItems: [ + { + icon: 'folder', + label: 'HELP_CENTER.CATEGORY', + hasSubMenu: true, + key: 'category', + children: [ + { + id: 1, + label: 'Getting started', + count: 12, + truncateLabel: true, + toState: 'accounts/1/articles/categories/new', + }, + { + id: 2, + label: 'Channel', + count: 19, + truncateLabel: true, + toState: 'accounts/1/articles/categories/channel', + }, + { + id: 3, + label: 'Feature', + count: 24, + truncateLabel: true, + toState: 'accounts/1/articles/categories/feature', + }, + { + id: 4, + label: 'Advanced', + count: 8, + truncateLabel: true, + toState: 'accounts/1/articles/categories/advanced', + }, + { + id: 5, + label: 'Mobile app', + count: 3, + truncateLabel: true, + toState: 'accounts/1/articles/categories/mobile-app', + }, + { + id: 6, + label: 'Others', + count: 39, + truncateLabel: true, + toState: 'accounts/1/articles/categories/others', + }, + ], + }, + ], +}; diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue new file mode 100644 index 000000000..2f8fdd2fd --- /dev/null +++ b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue new file mode 100644 index 000000000..a68ea6b63 --- /dev/null +++ b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue new file mode 100644 index 000000000..8af29af17 --- /dev/null +++ b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue index 812871ad7..de10dda4a 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue @@ -26,6 +26,9 @@ :class="{ 'text-truncate': shouldTruncate }" > {{ label }} + + {{ childItemCount }} + {{ count }} @@ -73,6 +76,14 @@ export default { type: String, default: '', }, + isHelpCenterSidebar: { + type: Boolean, + default: false, + }, + childItemCount: { + type: Number, + default: 0, + }, }, computed: { showIcon() { @@ -155,4 +166,19 @@ $label-badge-size: var(--space-slab); color: var(--s-600); font-weight: var(--font-weight-bold); } + +.count-view { + background: var(--s-50); + border-radius: var(--border-radius-normal); + color: var(--s-600); + font-size: var(--font-size-micro); + font-weight: var(--font-weight-bold); + margin-left: var(--space-smaller); + padding: var(--space-zero) var(--space-smaller); + + &.is-active { + background: var(--w-50); + color: var(--w-500); + } +} diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue index 1fcde8948..e89a1ab51 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue @@ -1,8 +1,14 @@