From 89e8d87b2859a71198b73de31bceefe75fb3f836 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Mon, 31 Jul 2023 14:31:48 +0200
Subject: [PATCH] extract red bin to be used everywhere

---
 src/modules/article/FlowSetup.vue    | 11 +++++++++--
 src/modules/feature/FeatureItem.vue  | 15 +++++----------
 src/modules/feature/QualityIssue.vue | 20 ++++++++++++++++++++
 3 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/feature/QualityIssue.vue

diff --git a/src/modules/article/FlowSetup.vue b/src/modules/article/FlowSetup.vue
index f2067a1..c3bd08d 100644
--- a/src/modules/article/FlowSetup.vue
+++ b/src/modules/article/FlowSetup.vue
@@ -4,6 +4,7 @@ import PullSystemIcon from '@/icons/PullSystemIcon.vue'
 import PushSystemIcon from '@/icons/PushSystemIcon.vue'
 import FeatureItem from '@/modules/feature/FeatureItem.vue'
 import FlowControls from '@/modules/feature/FlowControls.vue'
+import QualityIssue from '@/modules/feature/QualityIssue.vue'
 import { Feature } from '@/modules/feature/feature'
 
 const feature: Feature = {
@@ -36,8 +37,8 @@ const feature: Feature = {
       number and deliver as fast as possible.
     </p>
     <p>
-      <span class="numeric">{{ feature.qualityIssue }}</span> are the number of
-      defects the feature had during the flow.
+      <QualityIssue class="inline" :quality-issue="feature.qualityIssue" />
+      are the number of defects the feature had during the flow.
     </p>
     <p>
       You have 20 features to deliver, and each day you can choose between 3
@@ -97,3 +98,9 @@ const feature: Feature = {
     </p>
   </div>
 </template>
+
+<style scoped>
+.inline {
+  display: inline;
+}
+</style>
diff --git a/src/modules/feature/FeatureItem.vue b/src/modules/feature/FeatureItem.vue
index fd3c269..95595d4 100644
--- a/src/modules/feature/FeatureItem.vue
+++ b/src/modules/feature/FeatureItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import QualityIssue from '@/modules/feature/QualityIssue.vue'
 import { Feature } from '@/modules/feature/feature'
 import { computed } from 'vue'
 
@@ -16,9 +17,10 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
     </div>
     <div class="numeric">
       {{ feature.leadTime }}d
-      <div v-if="hasQualityIssues" class="red-bin">
-        {{ feature.qualityIssue }}
-      </div>
+      <QualityIssue
+        v-if="hasQualityIssues"
+        :quality-issue="feature.qualityIssue"
+      />
     </div>
   </div>
 </template>
@@ -39,12 +41,5 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
     visibility: hidden;
     opacity: 0;
   }
-
-  .red-bin {
-    --warning-color: #ca0e0e;
-    border: 2px solid var(--warning-color);
-    padding: 0 0.5rem 0.1rem;
-    color: var(--warning-color);
-  }
 }
 </style>
diff --git a/src/modules/feature/QualityIssue.vue b/src/modules/feature/QualityIssue.vue
new file mode 100644
index 0000000..8677040
--- /dev/null
+++ b/src/modules/feature/QualityIssue.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  qualityIssue: number
+}>()
+</script>
+
+<template>
+  <div class="quality-issue red-bin numeric">{{ qualityIssue }}</div>
+</template>
+
+<style scoped lang="scss">
+.quality-issue {
+  &.red-bin {
+    --warning-color: #ca0e0e;
+    border: 2px solid var(--warning-color);
+    padding: 0 0.5rem 0.1rem;
+    color: var(--warning-color);
+  }
+}
+</style>