refactor: in the frontend-shared package use the design system button

packages/app/cypress/e2e/specs_list_e2e.cy.ts

@@ -324,7 +324,7 @@ describe('App: Spec List (E2E)', () => {
 
         cy.contains('input', targetSpecFile).should('not.exist')
 
-        cy.get('button[aria-controls="reporter-inline-specs-list"]').click({ force: true })
+        cy.contains('header button', 'Specs').click({ force: true })
 
         cy.get('@searchField').should('be.visible').and('have.value', targetSpecFile)
 

packages/app/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "^0.10.2",
+    "@cypress-design/vue-button": "^0.11.6",
     "@cypress-design/vue-icon": "^0.26.0",
     "@cypress-design/vue-statusicon": "^0.5.0",
     "@cypress-design/vue-tabs": "^0.5.1",
@@ -85,4 +85,4 @@
       "@packages/graphql"
     ]
   }
-}
+}

packages/app/src/settings/project/ProjectId.vue

@@ -28,7 +28,7 @@
       />
       <CopyButton
         :text="props.gql.currentProject?.projectId"
-        variant="outline"
+        variant="outline-light"
       />
     </div>
   </SettingsSection>

packages/app/src/settings/project/RecordKey.vue

@@ -28,7 +28,7 @@
       />
       <CopyButton
         :text="recordKey"
-        variant="outline"
+        variant="outline-light"
       />
       <Button
         variant="outline"

packages/frontend-shared/package.json

@@ -20,7 +20,9 @@
   "dependencies": {},
   "devDependencies": {
     "@antfu/utils": "^0.7.0",
-    "@cypress-design/css": "^0.13.3",
+    "@cypress-design/css": "^0.17.1",
+    "@cypress-design/vue-button": "^0.10.2",
+    "@cypress-design/vue-icon": "^0.31.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify-json/logos": "1.1.42",
@@ -69,7 +71,7 @@
     "tailwindcss": "^3.3.1",
     "unplugin-icons": "0.13.2",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "4.5.2",
+    "vite": "4.3.2",
     "vite-plugin-components": "0.11.3",
     "vite-svg-loader": "4.0.0",
     "vue": "3.2.47",
@@ -103,4 +105,4 @@
       "@packages/graphql"
     ]
   }
-}
+}

packages/frontend-shared/src/components/NoResults.vue

@@ -18,20 +18,23 @@
     <Button
       data-cy="no-results-clear"
       class="mx-auto mt-[20px]"
-      size="lg"
-      variant="outline"
+      size="40"
+      variant="outline-light"
       @click="emit('clear')"
     >
-      <template #prefix>
-        <i-cy-delete_x12 class="w-[12px] icon-dark-gray-400" />
-      </template>
+      <IconActionDelete
+        stroke-color="gray-400"
+        class="w-[12px] mr-[8px]"
+      />
+
       {{ t('noResults.clearSearch') }}
     </Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from './Button.vue'
+import Button from '@cypress-design/vue-button'
+import { IconActionDelete } from '@cypress-design/vue-icon'
 import { useI18n } from '@cy/i18n'
 import NoResultsIllustration from '../assets/illustrations/no-results.svg'
 

packages/frontend-shared/src/components/ShikiHighlight.vue

@@ -60,7 +60,7 @@ shikiWrapperClasses computed property.
     >{{ trimmedCode }}</pre>
     <CopyButton
       v-if="copyButton"
-      variant="outline"
+      variant="outline-light"
       tabindex="-1"
       class="bg-white ml-auto mt-[-32px] sticky"
       :class="numberOfLines === 1 ? 'bottom-[5px] right-[5px]' : 'bottom-[8px] right-[8px]'"

packages/frontend-shared/src/components/Tooltip.cy.tsx

@@ -1,5 +1,5 @@
 import Tooltip from './Tooltip.vue'
-import Button from './Button.vue'
+import Button from '@cypress-design/vue-button'
 
 const slotContents = (x: number) => ({
   popper: () => <span>Tooltip {x}</span>,

packages/frontend-shared/src/gql-components/Auth.vue

@@ -4,7 +4,7 @@
     class="flex gap-[16px]"
   >
     <Button
-      size="lg"
+      size="40"
       @click="handleTryAgain"
     >
       <template
@@ -17,8 +17,8 @@
       {{ t('topNav.login.actionTryAgain') }}
     </Button>
     <Button
-      variant="outline"
-      size="lg"
+      variant="outline-light"
+      size="40"
       @click="handleCancel"
     >
       {{ t('topNav.login.actionCancel') }}
@@ -35,43 +35,40 @@
   <div v-else>
     <Button
       v-if="loginMutationIsPending"
-      size="lg"
-      variant="pending"
+      size="40"
+      variant="disabled"
       aria-live="polite"
-      :disabled="true"
+      disabled
     >
-      <template
-        #prefix
-      >
-        <i-cy-loading_x16
-          class="animate-spin icon-dark-white icon-light-gray-400"
-        />
-      </template>
+      <IconLoading
+        stroke-color="white"
+        fill-color="gray-400"
+        class="animate-spin mr-[8px]"
+      />
       {{ browserOpened ? t('topNav.login.actionWaiting') : t('topNav.login.actionOpening') }}
     </Button>
     <Button
       v-else
       ref="loginButtonRef"
-      size="lg"
-      variant="primary"
+      size="40"
       aria-live="polite"
       :disabled="!cloudViewer && !isOnline"
-      :prefix-icon="buttonPrefixIcon"
       @click="handleLoginOrContinue"
     >
+      <IconObjectChainLink class="mr-[8px]" />
       {{ buttonText }}
     </Button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { IconObjectChainLink, IconLoading } from '@cypress-design/vue-icon'
+import Button from '@cypress-design/vue-button'
 import { gql } from '@urql/core'
 import { useMutation } from '@urql/vue'
 import { useOnline } from '@vueuse/core'
 import { getUtmSource } from '@packages/frontend-shared/src/utils/getUtmSource'
-import ChainIcon from '~icons/cy/chain-link_x16.svg'
-
 import {
   Auth_LoginDocument,
   Auth_LogoutDocument,
@@ -80,7 +77,7 @@ import {
 import type {
   AuthFragment,
 } from '../generated/graphql'
-import Button from '@cy/components/Button.vue'
+
 import { useI18n } from '@cy/i18n'
 import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
@@ -251,8 +248,4 @@ const buttonText = computed(() => {
   return strings.login
 })
 
-const buttonPrefixIcon = computed(() => {
-  return showConnectButton.value ? ChainIcon : undefined
-})
-
 </script>

packages/frontend-shared/src/gql-components/ChooseExternalEditorModal.vue

@@ -52,13 +52,15 @@
       <div class="flex space-x-4">
         <Button
           :disabled="!preferredEditor?.length"
+          size="32"
           @click="selectEditor"
         >
           {{ t("globalPage.saveChanges") }}
         </Button>
 
         <Button
-          variant="outline"
+          variant="outline-light"
+          size="32"
           @click="close"
         >
           {{ t("globalPage.cancel") }}
@@ -71,11 +73,11 @@
 <script lang="ts" setup>
 import { useI18n } from '@cy/i18n'
 import { gql } from '@urql/core'
+import Button from '@cypress-design/vue-button'
 import { ref } from 'vue'
 import { useMutation } from '@urql/vue'
 import ChooseExternalEditor from './ChooseExternalEditor.vue'
 import StandardModal from '../components/StandardModal.vue'
-import Button from '../components/Button.vue'
 import type { ChooseExternalEditorModalFragment } from '../generated/graphql'
 import { ChooseExternalEditorModal_SetPreferredEditorBinaryDocument } from '../generated/graphql'
 

packages/frontend-shared/src/gql-components/CopyButton.vue

@@ -5,18 +5,11 @@
     data-cy="copy-button"
     @click="copyToClipboard"
   >
-    <template
+    <IconGeneralClipboard
       v-if="!noIcon"
-      #prefix
-    >
-      <i-cy-copy-clipboard_x16
-        class="h-[16px] w-[16px]"
-        :class="{
-          'icon-dark-indigo-500': variant === 'tertiary',
-          'icon-dark-gray-500': variant === 'outline'
-        }"
-      />
-    </template>
+      class="mr-[8px]"
+      :stroke-color="copyIconColor"
+    />
     <TransitionQuickFade mode="out-in">
       <span v-if="!copied">{{ t('clipboard.copy') }}</span>
       <span v-else>{{ t('clipboard.copied') }}</span>
@@ -25,21 +18,32 @@
 </template>
 
 <script setup lang="ts">
-import { useClipboard } from './useClipboard'
 import { useI18n } from '@cy/i18n'
-import type { ButtonSizes, ButtonVariants } from '@cy/components/Button.vue'
-import Button from '@cy/components/Button.vue'
+import Button, { type SizeClassesTable, type VariantClassesTable } from '@cypress-design/vue-button'
 import TransitionQuickFade from '@cy/components/transitions/TransitionQuickFade.vue'
+import { useClipboard } from './useClipboard'
+import { IconGeneralClipboard } from '@cypress-design/vue-icon'
+import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
   text: string
   noIcon?: boolean
-  variant?: ButtonVariants
-  size?: ButtonSizes
+  variant?: keyof typeof VariantClassesTable
+  size?: keyof typeof SizeClassesTable
 }>(), {
   noIcon: false,
-  variant: 'tertiary',
-  size: 'md',
+  variant: 'indigo-light',
+  size: '32',
+})
+
+const copyIconColor = computed(() => {
+  /**
+   * <wind-keep stroke-color="indigo-500" stroke-color="gray-500" />
+   */
+  return props.variant === 'indigo-light'
+    ? 'indigo-500' :
+    props.variant === 'outline-light'
+      ? 'gray-500' : undefined
 })
 
 const { copy, copied } = useClipboard({ copiedDuring: 2000 })

packages/frontend-shared/src/gql-components/error/BaseError.vue

@@ -20,22 +20,26 @@
           class="font-medium w-full pt-[12px] gap-4 inline-flex justify-center "
         >
           <Button
-            variant="outline"
+            size="32"
+            variant="outline-light"
             data-testid="error-retry-button"
-            :prefix-icon="RestartIcon"
-            prefix-icon-class="icon-dark-indigo-500"
             @click="emit('retry', baseError.id)"
           >
+            <IconActionRestart stroke-color="indigo-500" />
             {{ t('launchpadErrors.generic.retryButton') }}
           </Button>
 
           <Button
-            variant="outline"
+            size="32"
+            variant="outline-light"
             data-testid="error-docs-button"
-            :prefix-icon="BookIcon"
-            prefix-icon-class="icon-dark-indigo-500 group-hocus:icon-dark-indigo-500 group-hocus:icon-light-indigo-50"
             :href="t(`launchpadErrors.generic.docsButton.${docsType}.link`)"
           >
+            <IconObjectBook
+              stroke-color="indigo-500"
+              hocus-stroke-color="indigo-500"
+              hocus-fill-color="indigo-50"
+            />
             {{ t(`launchpadErrors.generic.docsButton.${docsType}.text`) }}
           </Button>
         </div>
@@ -111,16 +115,15 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { gql } from '@urql/vue'
-import Button from '@cy/components/Button.vue'
+import Button from '@cypress-design/vue-button'
+import { IconObjectBook, IconActionRestart } from '@cypress-design/vue-icon'
 import { useI18n } from '@cy/i18n'
 import type { BaseErrorFragment } from '../../generated/graphql'
 import Alert from '@cy/components/Alert.vue'
 import Collapsible from '@cy/components/Collapsible.vue'
 import { useMarkdown } from '../../composables/useMarkdown'
-import RestartIcon from '~icons/cy/restart_x16.svg'
 import ErrorOutlineIcon from '~icons/cy/status-errored-outline_x16.svg'
 import ErrorCodeFrame from './ErrorCodeFrame.vue'
-import BookIcon from '~icons/cy/book_x16'
 
 gql`
 fragment BaseError on ErrorWrapper {