1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_stats.vue b/app/assets/javascripts/diffs/components/diff_stats.vue
new file mode 100644
index 00000000000..2e5855380af
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_stats.vue
@@ -0,0 +1,52 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import { n__ } from '~/locale';
+
+export default {
+  components: { Icon },
+  props: {
+    addedLines: {
+      type: Number,
+      required: true,
+    },
+    removedLines: {
+      type: Number,
+      required: true,
+    },
+    diffFilesLength: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    filesText() {
+      return n__('File', 'Files', this.diffFilesLength);
+    },
+    isCompareVersionsHeader() {
+      return Boolean(this.diffFilesLength);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="diff-stats"
+    :class="{
+      'is-compare-versions-header d-none d-lg-inline-flex': isCompareVersionsHeader,
+      'd-inline-flex': !isCompareVersionsHeader,
+    }"
+  >
+    <div v-if="diffFilesLength !== null" class="diff-stats-group">
+      <icon name="doc-code" class="diff-stats-icon text-secondary" />
+      <strong>{{ diffFilesLength }} {{ filesText }}</strong>
+    </div>
+    <div class="diff-stats-group cgreen">
+      <icon name="file-addition" class="diff-stats-icon" /> <strong>{{ addedLines }}</strong>
+    </div>
+    <div class="diff-stats-group cred">
+      <icon name="file-deletion" class="diff-stats-icon" /> <strong>{{ removedLines }}</strong>
+    </div>
+  </div>
+</template>