All files / app/assets/javascripts/vue_merge_request_widget/components mr_widget_expandable_section.vue

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import { GlButton, GlCollapse, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
 
/**
 * Renders header section with icon and expand button
 * Renders expanable content section with grey background
 */
export default {
  name: 'MrWidgetExpanableSection',
  components: {
    GlButton,
    GlCollapse,
    GlIcon,
  },
  props: {
    iconName: {
      type: String,
      required: false,
      default: 'status_warning',
    },
  },
  data() {
    return {
      contentIsVisible: false,
    };
  },
  computed: {
    collapseButtonText() {
      Iif (this.contentIsVisible) {
        return __('Collapse');
      }
 
      return __('Expand');
    },
  },
  methods: {
    updateContentVisibility() {
      this.contentIsVisible = !this.contentIsVisible;
    },
  },
};
</script>
 
<template>
  <div>
    <div class="mr-widget-body gl-display-flex">
      <span
        class="gl-display-flex gl-align-items-center gl-justify-content-center gl-mr-3 gl-align-self-start gl-mt-1"
      >
        <gl-icon :name="iconName" :size="24" />
      </span>
 
      <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column gl-md-flex-direction-row">
        <slot name="header"></slot>
 
        <div>
          <gl-button @click="updateContentVisibility">
            {{ collapseButtonText }}
          </gl-button>
        </div>
      </div>
    </div>
 
    <gl-collapse
      :visible="contentIsVisible"
      class="gl-bg-gray-10 gl-border-t-solid gl-border-gray-100 gl-border-1"
    >
      <slot name="content"></slot>
    </gl-collapse>
  </div>
</template>