add animations and future colors

src/modules/feature/FeatureItem.vue

@@ -2,12 +2,15 @@
 import { Feature } from '@/modules/feature/feature'
 import { computed } from 'vue'
 
-const props = defineProps<{ feature: Feature }>()
+const props = withDefaults(
+  defineProps<{ feature: Feature; isLive?: boolean }>(),
+  { isLive: false }
+)
 const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
 </script>
 
 <template>
-  <div class="feature-item bin">
+  <div class="feature-item bin" :class="{ live: isLive }">
     <div>
       {{ feature.name }}
       <span class="numeric">({{ feature.complexity }})</span>
@@ -21,6 +24,16 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
 
 <style scoped lang="scss">
 .feature-item {
+  transition-property: opacity, visibility;
+  transition-duration: 0.8s;
+  transition-timing-function: ease-out;
+  transition-delay: 1s 2s;
+
+  &.live {
+    visibility: hidden;
+    opacity: 0;
+  }
+
   .red-bin {
     border: 2px solid #ff7979;
     padding: 0 0.5rem 0.1rem;

src/modules/feature/FeatureStep.vue

@@ -13,7 +13,9 @@ const featuresInProgress = computed(() =>
   props.features.filter((feature) => feature.status === 'doing')
 )
 const featuresDone = computed(() =>
-  props.features.filter((feature) => feature.status === 'done')
+  props.features
+    .filter((feature) => feature.status === 'done')
+    .sort((a, b) => (a.leadTime > b.leadTime ? -1 : 1))
 )
 
 const remainingBlueBuckets = computed(() =>
@@ -46,26 +48,30 @@ const isLive = computed(
     </section>
     <section class="done">
       <h5>📝✅ ({{ featuresDone.length }})</h5>
-      <div
-        v-for="blueBucket in remainingBlueBuckets"
-        :key="blueBucket"
-        class="bin blue-bin"
-      >
-        Blue bucket
-      </div>
-      <div v-if="isLive" class="live">
-        {{ featuresDone.length }} features live!
-      </div>
-      <ul class="done-list" v-else-if="hasFeaturesDone">
-        <li v-for="feature in featuresDone" :key="feature.name">
-          <Starport
-            :port="feature.name"
-            style="height: calc(var(--feature-item-height) + 0.2rem)"
+      <div>
+        <div class="blue-bin-container">
+          <div
+            v-for="blueBucket in remainingBlueBuckets"
+            :key="blueBucket"
+            class="bin blue-bin"
           >
-            <FeatureItem :feature="feature" />
-          </Starport>
-        </li>
-      </ul>
+            Blue bucket
+          </div>
+        </div>
+        <div v-if="isLive" class="live">
+          {{ featuresDone.length }} features live!
+        </div>
+        <ul class="done-list">
+          <li v-for="feature in featuresDone" :key="feature.name">
+            <Starport
+              :port="feature.name"
+              style="height: calc(var(--feature-item-height) + 0.2rem)"
+            >
+              <FeatureItem :feature="feature" :is-live="isLive" />
+            </Starport>
+          </li>
+        </ul>
+      </div>
     </section>
   </li>
 </template>

src/modules/feature/feature-steps.ts

@@ -21,9 +21,9 @@ export const featureSteps: FeatureStep[] = [
     blueBuckets: 2
   },
   {
-    title: 'UAT',
+    title: 'Test',
     stepIndex: 1,
-    blueBuckets: 3
+    blueBuckets: 2
   },
   {
     title: 'Release',

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.animal.dog()}", `)
+      console.log(`"${faker.color.hsl()}", `)
     }
   })
 })

src/modules/feature/feature.fixture.ts

@@ -1,209 +1,7 @@
+import { dogs } from '@/data/dog'
 import { Feature } from '@/modules/feature/feature'
 
-const featureNames = [
-  'Dachshund',
-  'Jagdterrier',
-  'Chesapeake Bay Retriever',
-  'Cretan Hound',
-  'Bulldog',
-  'Lapponian Herder',
-  'Vizsla',
-  'Norwegian Elkhound',
-  'Rat Terrier',
-  'Kangal Shepherd Dog',
-  'English Foxhound',
-  'Kanni',
-  'Finnish Spitz',
-  'Bloodhound',
-  'Siberian Husky',
-  'Paisley Terrier',
-  'Cairn Terrier',
-  'Chortai',
-  'Bucovina Shepherd Dog',
-  'German Longhaired Pointer',
-  'Portuguese Water Dog',
-  'Aidi',
-  'Dunker',
-  'Slovenský Kopov',
-  'Kokoni',
-  'Pembroke Welsh Corgi',
-  'English Mastiff',
-  'Papillon',
-  'Blue Picardy Spaniel',
-  'Cursinu',
-  'Coton de Tulear',
-  'Akita',
-  'King Charles Spaniel',
-  'Mudhol Hound',
-  'Serrano Bulldog',
-  'Telomian',
-  'Komondor',
-  'Chinese Crested Dog',
-  'Banjara Hound',
-  'Jagdterrier',
-  'Australian Cattle Dog',
-  'Afghan Hound',
-  'King Shepherd',
-  'Boykin Spaniel',
-  'Hamiltonstövare',
-  'Bull Arab',
-  'Basque Shepherd Dog',
-  'East Siberian Laika',
-  'Australian Cattle Dog',
-  'German Hound',
-  'Scottish Terrier',
-  'Volpino Italiano',
-  'Sussex Spaniel',
-  'Kanni',
-  'Otterhound',
-  'Kintamani',
-  'Mudi',
-  'Pastore della Lessinia e del Lagorai',
-  'Danish-Swedish Farmdog',
-  'Basset Hound',
-  'McNab dog',
-  'Pungsan Dog',
-  'Bouvier des Flandres',
-  'Westphalian Dachsbracke',
-  'Slovenský Cuvac',
-  'Portuguese Water Dog',
-  'American English Coonhound',
-  'Old Croatian Sighthound',
-  'Affenpinscher',
-  'Karakachan dog',
-  'Hierran Wolfdog',
-  'Samoyed',
-  'Magyar agár',
-  'Sarabi dog',
-  'Cane Corso',
-  "Braque d'Auvergne",
-  'Volpino Italiano',
-  'Newfoundland',
-  'Chow Chow',
-  'East Siberian Laika',
-  'Shih Tzu',
-  'English Springer Spaniel',
-  'Ratonero Bodeguero Andaluz',
-  'Australian Kelpie',
-  'New Zealand Heading Dog',
-  'Burgos Pointer',
-  'German Wirehaired Pointer',
-  'Serrano Bulldog',
-  'King Shepherd',
-  'Norwegian Lundehund',
-  'Lagotto Romagnolo',
-  'Basset Bleu de Gascogne',
-  'Vikhan',
-  'Clumber Spaniel',
-  'Field Spaniel',
-  'Greater Swiss Mountain Dog',
-  'Boerboel',
-  'Basenji',
-  'Thai Ridgeback',
-  'Rottweiler',
-  'Slovakian Wirehaired Pointer',
-  'Brittany',
-  'Welsh Sheepdog',
-  'Tosa',
-  'Olde English Bulldogge',
-  'Galgo Español',
-  'Mudi',
-  'Smooth Fox Terrier',
-  'Bedlington Terrier',
-  'Picardy Spaniel',
-  'Chien Français Blanc et Orange',
-  'Kokoni',
-  'Gull Terrier',
-  'Redbone Coonhound',
-  'Rajapalayam',
-  'Perro de Presa Canario',
-  'Austrian Pinscher',
-  'Saluki',
-  'Kintamani',
-  'Galician Shepherd Dog',
-  'Standard Schnauzer',
-  'Cão de Gado Transmontano',
-  'American Staffordshire Terrier',
-  'Wirehaired Pointing Griffon',
-  'Galician Shepherd Dog',
-  'Transylvanian Hound',
-  'Chien Français Blanc et Noir',
-  'Taigan',
-  'Kombai',
-  'Saint Hubert Jura Hound',
-  'Swedish Vallhund',
-  'Dogo Sardesco',
-  'German Shorthaired Pointer',
-  'Pražský Krysařík',
-  'Airedale Terrier',
-  'Chortai',
-  'Bernese Mountain Dog',
-  'Drever',
-  'Estonian Hound',
-  'Dutch Smoushond',
-  'Wire Fox Terrier',
-  'Neapolitan Mastiff',
-  'Bearded Collie',
-  'Telomian',
-  'English Cocker Spaniel',
-  'Airedale Terrier',
-  'Mountain Feist',
-  'Treeing Tennessee Brindle',
-  'Garafian Shepherd',
-  'Grand Griffon Vendéen',
-  'Gull Terrier',
-  'Villano de Las Encartaciones',
-  'Russian Spaniel',
-  'Yakutian Laika',
-  'Curly-Coated Retriever',
-  'Rajapalayam',
-  'Sabueso Español',
-  'Hovawart',
-  'Peruvian Inca Orchid',
-  'Pekingese',
-  'Icelandic Sheepdog',
-  'Cairn Terrier',
-  'Glen of Imaal Terrier',
-  'Australian Shepherd',
-  'Dunker',
-  'Briquet Griffon Vendéen',
-  'Scottish Deerhound',
-  'Mudhol Hound',
-  'Danish-Swedish Farmdog',
-  'Australian Terrier',
-  'Chinese Chongqing Dog',
-  'Irish Red and White Setter',
-  'Podenco Valenciano',
-  "Cirneco dell'Etna",
-  'German Shepherd Dog',
-  'Levriero Sardo',
-  'Romanian Mioritic Shepherd Dog',
-  'Finnish Hound',
-  'Segugio Maremmano',
-  'Andalusian Hound',
-  'Swedish White Elkhound',
-  'Tenterfield Terrier',
-  'Wirehaired Pointing Griffon',
-  'Cão Fila de São Miguel',
-  'Italian Greyhound',
-  'Jindo',
-  'Pyrenean Mountain Dog',
-  'Field Spaniel',
-  'Alaskan Klee Kai',
-  'Lupo Italiano',
-  'Silken Windhound',
-  'Cavalier King Charles Spaniel',
-  'Spanish Mastiff',
-  'Sinhala Hound',
-  'Grand Griffon Vendéen',
-  'Shiloh Shepherd',
-  'Sarabi dog',
-  'Cane Corso',
-  'Japanese Spitz',
-  'Dogue de Bordeaux'
-]
-
-export const features: Feature[] = featureNames.map((name) => ({
+export const features: Feature[] = dogs.map((name) => ({
   name,
   complexity: Math.floor(Math.random() * 6),
   leadTime: 0,