stuff

src/modules/feature/FeatureItem.vue

@@ -13,11 +13,15 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
   <div class="feature-item bin" :class="{ live: isLive }">
     <div>
       {{ feature.name }}
-      <span class="numeric">({{ feature.complexity }})</span>
     </div>
-    <div class="lead-time numeric">{{ feature.leadTime }} days</div>
-    <div v-if="hasQualityIssues" class="red-bin numeric">
-      {{ feature.qualityIssue }} 🔴
+    <div class="numeric">
+      ({{ feature.complexity }})
+      <div class="indicator">
+        <div class="lead-time numeric">{{ feature.leadTime }} days</div>
+        <div v-if="hasQualityIssues" class="red-bin">
+          {{ feature.qualityIssue }} 🔴
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -29,11 +33,24 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
   transition-timing-function: ease-out;
   transition-delay: 1s 2s;
 
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+
   &.live {
     visibility: hidden;
     opacity: 0;
   }
 
+  .indicator {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 0.2rem;
+    flex-wrap: wrap;
+  }
+
   .red-bin {
     border: 2px solid #ff7979;
     padding: 0 0.5rem 0.1rem;

src/modules/feature/FeatureStep.vue

@@ -24,7 +24,6 @@ const remainingBlueBuckets = computed(() =>
 const hasFeaturesInProgress = computed(
   () => featuresInProgress.value.length > 0
 )
-const hasFeaturesDone = computed(() => featuresDone.value.length > 0)
 const isLive = computed(
   () => props.step.title.toLocaleLowerCase() === 'release'
 )
@@ -86,6 +85,9 @@ const isLive = computed(
 }
 
 .feature-step {
+  display: flex;
+  flex-direction: column;
+
   header {
     padding: 0.5rem;
     border: solid 2px var(--background-color);
@@ -103,7 +105,7 @@ const isLive = computed(
   }
 
   h5 {
-    margin-bottom: 0;
+    margin: 0;
     background-color: var(--background-color);
     padding: 0.35rem;
     text-align: center;

src/modules/feature/feature.fixture.test.ts

@@ -4,7 +4,7 @@ import { describe, it } from 'vitest'
 describe('feature fixture', () => {
   it('creates lots of animals', () => {
     for (let i = 0; i < 200; i++) {
-      console.log(`"${faker.color.hsl()}", `)
+      console.log(`"${faker.animal.bird()}", `)
     }
   })
 })

src/modules/feature/feature.fixture.ts

@@ -1,7 +1,7 @@
-import { dogs } from '@/data/dog'
+import { birds } from '@/data/bird'
 import { Feature } from '@/modules/feature/feature'
 
-export const features: Feature[] = dogs.map((name) => ({
+export const features: Feature[] = birds.map((name) => ({
   name,
   complexity: Math.floor(Math.random() * 6),
   leadTime: 0,

src/modules/feature/store.ts

@@ -0,0 +1,15 @@
+import { Feature } from '@/modules/feature/feature'
+import { FeatureStep } from '@/modules/feature/feature-steps'
+import { defineStore } from 'pinia'
+
+type State = {
+  steps: FeatureStep[]
+  features: Feature[]
+}
+
+export const featureStore = defineStore('feature', {
+  state: (): State => ({
+    steps: [],
+    features: []
+  })
+})