All files / app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue label_item.vue

88.89% Statements 8/9
100% Branches 0/0
50% Functions 1/2
88.89% Lines 8/9

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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83  22x                                       9x   9x                   9x                   9x                   9x   9x                         9x                            
<script>
import { GlLink, GlIcon } from '@gitlab/ui';
 
export default {
  functional: true,
  props: {
    label: {
      type: Object,
      required: true,
    },
    isLabelSet: {
      type: Boolean,
      required: true,
    },
    highlight: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  render(h, { props, listeners }) {
    const { label, highlight, isLabelSet } = props;
 
    const labelColorBox = h('span', {
      class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3',
      style: {
        backgroundColor: label.color,
      },
      attrs: {
        'data-testid': 'label-color-box',
      },
    });
 
    const checkedIcon = h(GlIcon, {
      class: {
        'gl-mr-3 gl-flex-shrink-0': true,
        hidden: !isLabelSet,
      },
      props: {
        name: 'mobile-issue-close',
      },
    });
 
    const noIcon = h('span', {
      class: {
        'gl-mr-5 gl-pr-3': true,
        hidden: isLabelSet,
      },
      attrs: {
        'data-testid': 'no-icon',
      },
    });
 
    const labelTitle = h('span', label.title);
 
    const labelLink = h(
      GlLink,
      {
        class: 'gl-display-flex gl-align-items-center label-item gl-text-body',
        on: {
          click: () => {
            listeners.clickLabel(label);
          },
        },
      },
      [noIcon, checkedIcon, labelColorBox, labelTitle],
    );
 
    return h(
      'li',
      {
        class: {
          'gl-display-block': true,
          'gl-text-left': true,
          'is-focused': highlight,
        },
      },
      [labelLink],
    );
  },
};
</script>