diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue new file mode 100644 index 00000000000..ee81f0950a8 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue @@ -0,0 +1,68 @@ +<script> +import { GlSafeHtmlDirective } from '@gitlab/ui'; +import { EXTENSION_ICONS } from '../../constants'; +import { generateText } from '../extensions/utils'; +import StatusIcon from './status_icon.vue'; + +export default { + components: { + StatusIcon, + }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + props: { + level: { + type: Number, + required: true, + validator: (value) => value === 2 || value === 3, + }, + statusIconName: { + type: String, + default: '', + required: false, + validator: (value) => value === '' || Object.keys(EXTENSION_ICONS).includes(value), + }, + widgetName: { + type: String, + required: true, + }, + header: { + type: [String, Array], + default: '', + required: false, + }, + }, + computed: { + generatedHeader() { + return generateText(Array.isArray(this.header) ? this.header[0] : this.header); + }, + generatedSubheader() { + return Array.isArray(this.header) && this.header[1] ? generateText(this.header[1]) : ''; + }, + }, +}; +</script> +<template> + <div + class="gl-w-full gl-display-flex mr-widget-content-row gl-align-items-baseline" + :class="{ 'gl-border-t gl-py-3 gl-pl-7': level === 2 }" + > + <status-icon v-if="statusIconName" :level="2" :name="widgetName" :icon-name="statusIconName" /> + <div> + <slot name="header"> + <div v-if="header" class="gl-mb-2"> + <strong v-safe-html="generatedHeader" class="gl-display-block"></strong + ><span + v-if="generatedSubheader" + v-safe-html="generatedSubheader" + class="gl-display-block" + ></span> + </div> + </slot> + <div class="gl-display-flex gl-align-items-baseline gl-w-full"> + <slot name="body"></slot> + </div> + </div> + </div> +</template> |