init 5S article and refacto pull system

src/modules/pull-system/feature/FeatureItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import QualityIssue from '@/modules/pull-system/feature/QualityIssue.vue'
+import { Feature } from '@/modules/pull-system/feature/feature'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{ feature: Feature; isLive?: boolean }>(),
+  { isLive: false }
+)
+const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
+</script>
+
+<template>
+  <div class="feature-item bin" :class="{ live: isLive }">
+    <div>
+      <span class="numeric">({{ feature.complexity }})</span> {{ feature.name }}
+    </div>
+    <div class="numeric">
+      {{ feature.leadTime }}d
+      <QualityIssue
+        v-if="hasQualityIssues"
+        :quality-issue="feature.qualityIssue"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.feature-item {
+  transition-property: opacity, visibility;
+  transition-duration: 0.9s;
+  transition-timing-function: ease-out;
+  transition-delay: 1s 2s;
+
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  justify-content: space-around;
+
+  &.live {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+</style>