refactor: use Cypress design system icons in the SideBar (#22807)

* update alert icons

* update icons package

* use updated icons

* update icon package

* fix sidebar navigation icons

* remove old windi package

* fix test on NavigationRow

* update design system

* make clearer that iconColor is not a class

* update tsc

* rollback package updates

* fix types

* remove all changes from alert (another PR)

* fix: apply suggestions from code review

stylistic changes I can't argue with.

Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>

* remove icons that are not used anymore

* avoid installing unused packages

Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>

Author: Barthélémy Ledoux

packages/app/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@cypress-design/vue-icon": "^0.4.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",
@@ -63,7 +64,6 @@
     "vite-plugin-components": "0.11.3",
     "vite-plugin-pages": "0.18.1",
     "vite-plugin-vue-layouts": "0.6.0",
-    "vite-plugin-windicss": "1.2.4",
     "vite-svg-loader": "3.1.2",
     "vue": "3.2.31",
     "vue-i18n": "9.2.0-beta.7",

packages/app/src/navigation/SidebarNavigation.vue

@@ -93,9 +93,11 @@ import { computed, ref, watchEffect } from 'vue'
 import { gql, useMutation, useQuery } from '@urql/vue'
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
 import KeyboardBindingsModal from './KeyboardBindingsModal.vue'
-import CodeIcon from '~icons/cy/code-editor_x24'
-import RunsIcon from '~icons/cy/runs_x24'
-import SettingsIcon from '~icons/cy/settings_x24'
+import {
+  IconTechnologyCodeEditor,
+  IconTechnologyTestResults,
+  IconObjectGear,
+} from '@cypress-design/vue-icon'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import HideDuringScreenshot from '../runner/screenshot/HideDuringScreenshot.vue'
 import { SideBarNavigationDocument, SideBarNavigation_SetPreferencesDocument } from '../generated/graphql'
@@ -108,10 +110,10 @@ import { useWindowSize } from '@vueuse/core'
 const { t } = useI18n()
 
 const navigation = [
-  { name: 'Specs', icon: CodeIcon, href: '/specs' },
-  { name: 'Runs', icon: RunsIcon, href: '/runs' },
-  { name: 'Settings', icon: SettingsIcon, href: '/settings' },
-]
+  { name: 'Specs', icon: IconTechnologyCodeEditor, href: '/specs' },
+  { name: 'Runs', icon: IconTechnologyTestResults, href: '/runs' },
+  { name: 'Settings', icon: IconObjectGear, href: '/settings' },
+] as const
 
 gql`
 fragment SidebarNavigation on Query {

packages/app/src/navigation/SidebarNavigationRow.cy.tsx

@@ -1,20 +1,22 @@
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
-import BookIcon from '~icons/cy/book_x24'
-import SettingsIcon from '~icons/cy/settings_x24'
-import TestResultsIcon from '~icons/cy/test-results_x24'
-import PlaceholderIcon from '~icons/cy/placeholder_x24'
+import {
+  IconTechnologyCodeEditor,
+  IconTechnologyTestResults,
+  IconObjectGear,
+  IconGeneralPlaceholder,
+} from '@cypress-design/vue-icon'
 
 describe('SidebarNavigationRow', () => {
   it('renders something', () => {
     cy.mount(() => (<div>
       <div
-        class="resize-x overflow-auto space-y-4 h-500px w-256px bg-gray-900"
+        class="space-y-4 bg-gray-900 h-500px w-256px resize-x overflow-auto"
       >
         <h2 class="text-white text-sm uppercase truncate">Tab Style</h2>
-        <SidebarNavigationRow icon={BookIcon} name="book" active isNavBarExpanded/>
-        <SidebarNavigationRow icon={SettingsIcon} name="settings" isNavBarExpanded/>
-        <SidebarNavigationRow icon={TestResultsIcon} name="test-results" isNavBarExpanded/>
-        <SidebarNavigationRow icon={PlaceholderIcon} name="placeholder" isNavBarExpanded/>
+        <SidebarNavigationRow icon={IconTechnologyCodeEditor} name="book" active isNavBarExpanded/>
+        <SidebarNavigationRow icon={IconTechnologyTestResults} name="settings" isNavBarExpanded/>
+        <SidebarNavigationRow icon={IconObjectGear} name="test-results" isNavBarExpanded/>
+        <SidebarNavigationRow icon={IconGeneralPlaceholder} name="placeholder" isNavBarExpanded/>
       </div>
     </div>))
   })

packages/app/src/navigation/SidebarNavigationRow.vue

@@ -23,9 +23,24 @@
     >
       <component
         :is="icon"
-        :class="active ? 'icon-dark-indigo-300 icon-light-indigo-700' : 'icon-dark-gray-500 icon-light-gray-900 group-hover:(icon-dark-gray-300 icon-light-gray-800) group-focus:(icon-dark-gray-300 icon-light-gray-800)'"
-        class="flex-shrink-0 h-24px m-12px w-24px
-              children:transition children:duration-300"
+        v-if="active"
+        size="24"
+        stroke-color="indigo-300"
+        fill-color="indigo-700"
+        class="flex-shrink-0 h-24px m-12px w-24px children:transition children:duration-300"
+      />
+      <component
+        :is="icon"
+        v-else
+        size="24"
+        stroke-color="gray-500"
+        fill-color="gray-900"
+        hover-stroke-color="gray-300"
+        hover-fill-color="gray-800"
+        focus-stroke-color="gray-300"
+        focus-fill-color="gray-800"
+        interactive-colors-on-group
+        class="flex-shrink-0 h-24px m-12px w-24px children:transition children:duration-300"
       />
       <span
         :class="[active ? 'text-indigo-300' : 'text-gray-500 group-hocus:text-gray-300']"
@@ -45,7 +60,7 @@ import type { FunctionalComponent, SVGAttributes } from 'vue'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 
 withDefaults(defineProps <{
-  icon: FunctionalComponent<SVGAttributes, {}>
+  icon: FunctionalComponent<SVGAttributes>
   name: string
   // Currently active row (generally the current route)
   active?: boolean

packages/frontend-shared/package.json

@@ -19,7 +19,7 @@
   "dependencies": {},
   "devDependencies": {
     "@antfu/utils": "^0.3.0",
-    "@cypress-design/css": "0.4.1",
+    "@cypress-design/css": "^0.5.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/json": "1.1.368",
@@ -67,7 +67,6 @@
     "unplugin-vue-components": "^0.15.4",
     "vite": "3.0.3",
     "vite-plugin-components": "0.11.3",
-    "vite-plugin-windicss": "^1.4.7",
     "vite-svg-loader": "3.1.2",
     "vue": "3.2.31",
     "vue-eslint-parser": "7.11.0",

packages/frontend-shared/src/assets/icons/book_x24.svg

@@ -64,7 +64,6 @@
     "vite-plugin-components": "0.11.3",
     "vite-plugin-optimize-persist": "0.0.5",
     "vite-plugin-package-config": "0.0.3",
-    "vite-plugin-windicss": "1.2.4",
     "vite-svg-loader": "3.1.2",
     "vue": "3.2.31",
     "vue-i18n": "9.2.0-beta.7",

packages/frontend-shared/src/assets/icons/placeholder_x24.svg

@@ -109,13 +109,6 @@
     execa "^5.1.1"
     find-up "^5.0.0"
 
-"@antfu/utils@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.2.4.tgz#c7d33fc6faa0d3a6fcc2555673f5e9b19c0fbc15"
-  integrity sha512-2bZNkVfL9IZESmvE26UKi8SzyvSoaIsGXDcnbHFMtmGMqUiB1fXpAJ1ijGf+tSqKRQ5yagck2U1Qk0p+705/kw==
-  dependencies:
-    "@types/throttle-debounce" "^2.1.0"
-
 "@antfu/utils@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.3.0.tgz#6306c43b52a883bd8e973e3ed8dd64248418bcc4"
@@ -2438,16 +2431,31 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
-"@cypress-design/css@0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.4.1.tgz#40c73462a1b8a04a2d045cef43d5e2480c3bbf2f"
-  integrity sha512-ycyrNcqm9Cy0+IrhVa7Ef9dSv+B/p69T0Sw6zhLDxHwq4S0YxtFgE4zf8R7O4SbR8vlU/YpV5GSQhaXCFLsQXg==
+"@cypress-design/css@^0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.5.2.tgz#bcb43bb2d6f872de8691d6acb546680b335ea757"
+  integrity sha512-ZuHdhbcCgEfKuggGYS4AkSGfkB2ZCsWewBYUNH/U+oYnkhDITgaSMKp0RWfBWrnqqyhD2mTYx8gNRWCNQ7tw8w==
   dependencies:
     "@windicss/plugin-interaction-variants" "^1.0.0"
+    lodash "^4.17.21"
     vite-plugin-windicss "^1.8.4"
     windicss "^3.5.1"
     windicss-webpack-plugin "^1.6.10"
 
+"@cypress-design/icon-registry@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.4.2.tgz#bc2d913208acb33b5dfb1d8f6d7929b153e32ba0"
+  integrity sha512-iyH5xFc2abpwVPTEjoJ2ILIQy79DaR6ata76HAk9NHPWVUwG/yUPEzvp3m2T8IqgebNEuTtl4mBHM/u+jycxng==
+  dependencies:
+    camelcase "^6.3.0"
+
+"@cypress-design/vue-icon@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.4.2.tgz#3574a749efbdaf83f48251108c016c3d383160bd"
+  integrity sha512-i7YWizC/c1LFdxVZSbyTIOrj4LeiIxypemCXdygacmvogQS2buBC+CovqCMFAzKqnfBZUBGiQajMWWM5rzIduw==
+  dependencies:
+    "@cypress-design/icon-registry" "^0.4.2"
+
 "@cypress/browserify-preprocessor@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@cypress/browserify-preprocessor/-/browserify-preprocessor-3.0.0.tgz#2d1fa6a96ed7130a1b172c540448a5955cbc1264"
@@ -8223,15 +8231,6 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@windicss/config@1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.2.4.tgz#24b36d30c1698fff14a9bacaebc93afaf2fe9019"
-  integrity sha512-81oah5NF7m/ltHrP2VpKu12qejP03erelNckH9ho86vuItsSd/tNehW3oJqOThZYsbuROCzIU55QDfe7MBd+Iw==
-  dependencies:
-    debug "^4.3.2"
-    jiti "^1.10.1"
-    windicss "^3.1.4"
-
 "@windicss/config@1.8.4":
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.8.4.tgz#090c7f48cb86b6cba1bd97742a2f012852026d3c"
@@ -8246,19 +8245,6 @@
   resolved "https://registry.yarnpkg.com/@windicss/plugin-interaction-variants/-/plugin-interaction-variants-1.0.0.tgz#11e412c6fd653899f6cced4e4f7b402eb5456981"
   integrity sha512-jk0kvJEwphPlzjgCASxi0yCrLIrMPBHKTjPB1vF2LZsmWVaIPhKQRfpJW6+G093ipDos1E2BkevDrh/R2Ln8gg==
 
-"@windicss/plugin-utils@1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.2.4.tgz#b319355d6e9b4e529c965b5a55af6d57679e417f"
-  integrity sha512-0G0zPx+gLfnP2isVMrsY+C0BDXASgFwtiT7g+YL+0LCTxjPxGOMnu5lCaAoYq+1LAskliPagqnu5mgKUYMyf2Q==
-  dependencies:
-    "@antfu/utils" "^0.2.4"
-    "@windicss/config" "1.2.4"
-    debug "^4.3.2"
-    fast-glob "^3.2.6"
-    magic-string "^0.25.7"
-    micromatch "^4.0.4"
-    windicss "^3.1.4"
-
 "@windicss/plugin-utils@1.8.4", "@windicss/plugin-utils@^1.1.1", "@windicss/plugin-utils@^1.8.4":
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.8.4.tgz#fba74b6eb29276e24b9d09931bc22808fd7230d7"
@@ -11698,7 +11684,7 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0, camelcase@^6.2.0:
+camelcase@^6.0.0, camelcase@^6.2.0, camelcase@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
@@ -21716,7 +21702,7 @@ jimp@^0.2.21:
     tinycolor2 "^1.1.2"
     url-regex "^3.0.0"
 
-jiti@^1.10.1, jiti@^1.13.0:
+jiti@^1.13.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.13.0.tgz#3cdfc4e651ca0cca4c62ed5e47747b5841d41a8e"
   integrity sha512-/n9mNxZj/HDSrincJ6RP+L+yXbpnB8FybySBa+IjIaoH9FIxBbrbRT5XUbe8R7zuVM2AQqNMNDDqz0bzx3znOQ==
@@ -35043,17 +35029,7 @@ vite-plugin-vue-layouts@0.6.0:
     debug "^4.3.2"
     fast-glob "^3.2.7"
 
-vite-plugin-windicss@1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.2.4.tgz#b9ea60482dd8b6ba4fbc717ff5a9d17dedb0683b"
-  integrity sha512-U+mW8AiPRgC5wbUqjtvEIbZR3LzOwhNU0wnYQueT2SjjTfjlP74vcQg37yrULxycKibpdTYVHZuDuW4QkglPng==
-  dependencies:
-    "@windicss/plugin-utils" "1.2.4"
-    chalk "^4.1.1"
-    debug "^4.3.2"
-    windicss "^3.1.4"
-
-vite-plugin-windicss@^1.4.7, vite-plugin-windicss@^1.8.4:
+vite-plugin-windicss@^1.8.4:
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.4.tgz#98430706691d54d6b9bf43ac0e3c74dd26b10664"
   integrity sha512-LSZAO8BZn3x406GRbYX5t5ONXXJVdqiQtN1qrznLA/Dy5/NzZVhfcrL6N1qEYYO7HsCDT4pLAjTzObvDnM9Y8A==
@@ -35992,7 +35968,7 @@ windicss-webpack-plugin@^1.6.10:
     webpack-virtual-modules "^0.4.3"
     windicss "^3.5.1"
 
-windicss@^3.1.4, windicss@^3.5.1:
+windicss@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.5.1.tgz#5e279c21179dbc122122d0b3a3a2651511249241"
   integrity sha512-E1hYZATcZFci/XhGS0sJAMRxULjnK+glNukE78Ku7xeb3jxgMY55fFOdIrav+GjQCsgR+IZxPq9/DwmO6eyc4Q==