diff options
Diffstat (limited to 'app/assets/javascripts/super_sidebar/components/counter.vue')
-rw-r--r-- | app/assets/javascripts/super_sidebar/components/counter.vue | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue new file mode 100644 index 00000000000..d790e61ca31 --- /dev/null +++ b/app/assets/javascripts/super_sidebar/components/counter.vue @@ -0,0 +1,48 @@ +<script> +import { GlIcon } from '@gitlab/ui'; + +export default { + components: { + GlIcon, + }, + props: { + count: { + type: Number, + required: true, + }, + href: { + type: String, + required: false, + default: '', + }, + icon: { + type: String, + required: true, + }, + label: { + type: String, + required: true, + }, + }, + computed: { + ariaLabel() { + return `${this.label} ${this.count}`; + }, + component() { + return this.href ? 'a' : 'button'; + }, + }, +}; +</script> + +<template> + <component + :is="component" + :aria-label="ariaLabel" + :href="href" + class="counter gl-relative gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-black-normal gl-border gl-border-gray-a-08 gl-font-sm gl-font-weight-bold" + > + <gl-icon aria-hidden="true" :name="icon" /> + <span aria-hidden="true">{{ count }}</span> + </component> +</template> |