extract red bin to be used everywhere

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>

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>

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>