feat: New sidebar component for help-center (#5017)

* feat: New sidebar component for help-center

* chore: Review fixes

* chore: Minor fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Sivin Varghese 2022-07-18 11:16:36 +05:30 committed by GitHub
parent 21a8b79aa5
commit f004db3d26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 511 additions and 14 deletions

View file

@ -26,6 +26,9 @@
:class="{ 'text-truncate': shouldTruncate }"
>
{{ label }}
<span v-if="isHelpCenterSidebar && childItemCount" class="count-view">
{{ childItemCount }}
</span>
</span>
<span v-if="count" class="badge" :class="{ secondary: !isActive }">
{{ 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);
}
}
</style>