Using latest version of vue-statusicon to simplify types

Author: warrensplayer

packages/app/package.json

@@ -21,7 +21,7 @@
   "dependencies": {},
   "devDependencies": {
     "@cypress-design/vue-icon": "^0.12.1",
-    "@cypress-design/vue-statusicon": "0.1.4",
+    "@cypress-design/vue-statusicon": "0.2.0",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",

packages/app/src/debug/DebugPageHeader.vue

@@ -5,35 +5,35 @@
   >
     <div
       data-cy="debug-header"
-      class="flex grid items-center w-full overflow-hidden py-24px px-24px gap-y-2"
+      class="flex w-full grid py-24px px-24px gap-y-2 items-center overflow-hidden"
     >
       <ul
         data-cy="header-top"
-        class="flex flex-row items-center self-stretch gap-x-2 whitespace-nowrap"
+        class="flex flex-row gap-x-2 items-center self-stretch whitespace-nowrap"
       >
         <li
           v-if="debug?.commitInfo?.summary"
-          class="text-lg font-medium text-gray-900"
+          class="font-medium text-lg text-gray-900"
           data-cy="debug-test-summary"
         >
           {{ debug.commitInfo.summary }}
         </li>
         <li
           v-if="props.commitsAhead"
-          class="flex items-center h-6 text-sm border border-gray-100 rounded"
+          class="border rounded flex border-gray-100 h-6 text-sm items-center"
         >
           <span
             v-if="props.commitsAhead"
-            class="items-center px-2 mx-px font-normal text-orange-500"
+            class="font-normal mx-px px-2 text-orange-500 items-center"
             data-cy="debug-commitsAhead"
           >
             {{ t('debugPage.header.commitsAhead', props.commitsAhead) }}
           </span>
         </li>
-        <li class="text-lg text-gray-400 -mt-8px">
+        <li class="-mt-8px text-lg text-gray-400">
           .
         </li>
-        <li class="text-sm font-normal text-indigo-500">
+        <li class="font-normal text-sm text-indigo-500">
           <ExternalLink
             data-cy="debug-header-dashboard-link"
             :href="debug.url || '#'"
@@ -45,14 +45,14 @@
       </ul>
       <ul
         data-cy="metadata"
-        class="flex flex-wrap items-center text-sm font-normal text-gray-700 gap-x-2 whitespace-nowrap children:flex children:items-center"
+        class="flex flex-wrap font-normal text-sm text-gray-700 gap-x-2 items-center whitespace-nowrap children:flex children:items-center"
       >
         <li
-          class="flex flex-row items-center justify-center text-sm gap-x-2"
+          class="flex flex-row text-sm gap-x-2 items-center justify-center"
         >
           <div
             v-if="(debug.runNumber && debug.status)"
-            class="flex flex-row items-center justify-center h-6 px-2 font-semibold border border-gray-200 rounded bg-gray-50 gap-x-1"
+            class="border rounded flex flex-row font-semibold bg-gray-50 border-gray-200 h-6 px-2 gap-x-1 items-center justify-center"
             :data-cy="`debug-runNumber-${debug.status}`"
           >
             <SolidStatusIcon
@@ -116,8 +116,7 @@ import DebugResults from './DebugResults.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
 import type { DebugPageFragment, CloudRunStatus } from '../generated/graphql'
 import { IconTimeStopwatch } from '@cypress-design/vue-icon'
-import { SolidStatusIcon } from '@cypress-design/vue-statusicon'
-import type { statusTypes } from '@cypress-design/vue-statusicon/dist/StatusIcon/constants'
+import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
 import CommitIcon from '~icons/cy/commit_x14'
 import { gql } from '@urql/core'
 import { dayjs } from '../runs/utils/day.js'
@@ -153,7 +152,7 @@ const props = defineProps<{
 
 const debug = computed(() => props.gql)
 
-const ICON_MAP: Record<CloudRunStatus, { textColor: string, type: statusTypes }> = {
+const ICON_MAP: Record<CloudRunStatus, { textColor: string, type: StatusType }> = {
   PASSED: { textColor: 'text-jade-400', type: 'passed' },
   FAILED: { textColor: 'text-red-400', type: 'failed' },
   CANCELLED: { textColor: 'text-gray-500', type: 'cancelled' },

yarn.lock

@@ -2331,10 +2331,10 @@
   resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.14.0.tgz#c30cbb013b7a86700941677da661229d81493399"
   integrity sha512-wIXr00J7azl8Jl+3DLhSK8WkWXRUvfqDKUnLrEyxQjrzbwNIQIPL0bqgY30CZbx8xoPXCIewJDYXvhgbWZQOhQ==
 
-"@cypress-design/icon-registry@^0.15.0":
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.15.0.tgz#0fee4fd0e0565b169b1d352e04ee4e80035efb74"
-  integrity sha512-hpecktncQW+9oCNT43/fabBtEEmlB07Dvhv6an48596suuPdTdqGISLyfZeX1UkDDKLAoWZbyni/J33PlPgN2Q==
+"@cypress-design/icon-registry@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.16.0.tgz#5b3ae12373e568ebbe028ad87c8bcecc9bf941a8"
+  integrity sha512-9cYntpV2EDg8G+IN4P4FFXiQRAwZTbvMuyjf/Y3UxXevuvibfqN4riDowcUQIYncFUQ95ofb5hC0Ti8R1leLlg==
 
 "@cypress-design/vue-icon@^0.12.1":
   version "0.12.1"
@@ -2343,20 +2343,20 @@
   dependencies:
     "@cypress-design/icon-registry" "^0.14.0"
 
-"@cypress-design/vue-icon@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.13.0.tgz#837bde8fe3d052cde9a2e2bcf52567523826749a"
-  integrity sha512-S0+RZFy1hK1tKOAeYAjeIF3nF1MC7uB7dNqO2Sp3ZIEktcDRnWhodDUxNJ9TpMB2dIqJL6ATUhYTVJFEiPdPfg==
+"@cypress-design/vue-icon@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.14.0.tgz#25cfb39af69e9d2328732f3a13d2837f287795fe"
+  integrity sha512-dw3qrhzwe9s9ARA5UhmMNHM26QMZjmiIVcXNPGAZToG8vUIXUvCxBiuVXsWXjqJ7bfwM/F91X4RT0Ly3Y8Ncew==
   dependencies:
-    "@cypress-design/icon-registry" "^0.15.0"
+    "@cypress-design/icon-registry" "^0.16.0"
 
-"@cypress-design/vue-statusicon@0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.1.4.tgz#651947180b6fb0d17c85ff2659f27414ecd22b69"
-  integrity sha512-L7bl44XgZMkXFFQqr8ZQIzOoAgfkDXeGtm5/dyn8DWPdXAej4kw+nacPFW/qbxnfDQMWZ3KDoAihV5MZqXhv2g==
+"@cypress-design/vue-statusicon@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.2.0.tgz#77212db72d05c30e60e4de96374e8c77bcdb3478"
+  integrity sha512-azGf5JF94GepvE90fupAlMD4MHPKE18m3XkdziRxg6FTG3YiJKS5qsEO8FcXlI4Z9tOv95kpjSTSVVzG2TLLPQ==
   dependencies:
-    "@cypress-design/icon-registry" "^0.15.0"
-    "@cypress-design/vue-icon" "^0.13.0"
+    "@cypress-design/icon-registry" "^0.16.0"
+    "@cypress-design/vue-icon" "^0.14.0"
 
 "@cypress/commit-info@2.2.0":
   version "2.2.0"