All files / app/assets/javascripts/notifications/components notifications_dropdown_item.vue

100% Statements 3/3
100% Branches 0/0
100% Functions 2/2
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49  1x                                                     210x           639x                            
<script>
import { GlDropdownItem } from '@gitlab/ui';
 
export default {
  name: 'NotificationsDropdownItem',
  components: {
    GlDropdownItem,
  },
  props: {
    level: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: true,
    },
    notificationLevel: {
      type: String,
      required: true,
    },
  },
  computed: {
    isActive() {
      return this.notificationLevel === this.level;
    },
  },
};
</script>
 
<template>
  <gl-dropdown-item
    is-check-item
    :is-checked="isActive"
    :class="{ 'is-active': isActive }"
    data-testid="notification-item"
    @click="$emit('item-selected', level)"
  >
    <div class="gl-display-flex gl-flex-direction-column">
      <span class="gl-font-weight-bold">{{ title }}</span>
      <span class="gl-text-gray-500">{{ description }}</span>
    </div>
  </gl-dropdown-item>
</template>