chore(launchpad): launchpad UI tweaks

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

@@ -1,13 +1,12 @@
 <template>
   <button
     style="width: fit-content"
-    class="flex items-center border rounded-sm gap-8px focus:border-indigo-600 focus:outline-transparent"
+    class="flex items-center border rounded gap-8px hocus-default"
     :class="classes"
   >
     <span
       v-if="prefixIcon || $slots.prefix"
-      :class="iconClasses"
-      class="justify-self-start"
+      class="justify-self-start flex items-center"
     >
       <slot name="prefix">
         <Icon
@@ -21,8 +20,7 @@
     </span>
     <span
       v-if="suffixIcon || $slots.suffix"
-      :class="iconClasses"
-      class="justify-self-end"
+      class="justify-self-start flex items-center"
     >
       <slot name="suffix">
         <Icon
@@ -52,29 +50,23 @@ import { computed, useAttrs } from 'vue'
 import type { ButtonHTMLAttributes, FunctionalComponent, SVGAttributes } from 'vue'
 
 const VariantClassesTable = {
-  primary: 'border-indigo-600 bg-indigo-600 text-white',
-  outline: 'border-gray-200 text-indigo-600 bg-white',
+  primary: 'border-indigo-500 bg-indigo-600 text-white',
+  outline: 'border-gray-100 text-indigo-600',
   link: 'border-transparent text-indigo-600',
   text: 'border-0',
 }
 
 const SizeClassesTable = {
-  sm: 'px-1 py-1 text-xs',
-  md: 'px-2 py-1 text-sm',
-  lg: 'px-4 py-2 text-sm',
-  xl: 'px-6 py-3 text-lg',
-}
-
-const IconClassesTable = {
-  md: 'min-h-1.25em min-w-1.25em max-h-1.25em max-w-1.25em',
-  lg: 'min-h-2em min-w-2em max-h-2em max-w-2em',
-  xl: 'min-h-2.5em min-w-2.5em max-w-2.5em max-h-2.5em ',
+  sm: 'px-6px py-2px text-14px',
+  md: 'px-12px py-6px text-14px',
+  lg: 'px-16px py-8px',
+  'lg-wide': 'px-32px py-8px',
 }
 
 const props = defineProps<{
   prefixIcon?: FunctionalComponent<SVGAttributes>
   suffixIcon?: FunctionalComponent<SVGAttributes>
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  size?: 'sm' | 'md' | 'lg' | 'lg-wide'
   variant?: 'primary' | 'outline' | 'link' | 'text'
   prefixIconClass?: string
   suffixIconClass?: string
@@ -85,8 +77,6 @@ const attrs = useAttrs() as ButtonHTMLAttributes
 const variantClasses = VariantClassesTable[props.variant || 'primary']
 const sizeClasses = SizeClassesTable[props.size || 'md']
 
-const iconClasses = ['flex', 'items-center', IconClassesTable[props.size || 'md']]
-
 const classes = computed(() => {
   return [
     variantClasses,

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

@@ -4,17 +4,20 @@
       <span
         v-show="showCopied"
         class="mx-3"
+        role="status"
       >{{ t('clipboard.copied') }}</span>
     </transition>
     <button
-      class="bg-gray-50 px-3 py-1 rounded text-indigo-600"
+      tabindex="1"
+      class="bg-gray-50 text-14px px-2 py-1 rounded text-indigo-600 border-1 border-transparent hocus-default"
       @click="copyToClipboard"
     >
       {{ t('clipboard.copy') }}
     </button>
   </div>
   <textarea
     ref="textElement"
+    tabindex="-1"
     :value="text"
     class="absolute -top-96"
   />

packages/frontend-shared/src/components/Switch.spec.tsx

@@ -7,11 +7,13 @@ describe('<Switch />', () => {
 
     cy.mount(() => (
       <div class="p-6">
+        <label for="test-switch">Switch</label>
         <Switch
           // @ts-ignore
           value={valueRef.value}
           // @ts-ignore
           onUpdate={(newVal) => (valueRef.value = newVal)}
+          name="test-switch"
         />
       </div>
     ))

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

@@ -1,37 +1,52 @@
 <template>
   <button
-    class="rounded-md h-3 w-6 relative focus:outline-transparent"
-    :class="value ? 'bg-green-600' : 'bg-gray-600'"
+    :id="name"
+    class="rounded-50px relative hocus-default border-transparent border-1"
+    :class="[value ? 'bg-jade-400' : 'bg-gray-300', sizeClasses[size].container]"
+    role="switch"
+    :aria-checked="value"
     @click="$emit('update', !value)"
   >
     <span
-      class="absolute block toggle border border-1 border-gray-300 rounded-md bg-white"
-      :class="value ? 'toggle-on' : ''"
+      class="block toggle transform rounded-50px bg-white transition-transform duration-200 ease-out"
+      :class="[{ [sizeClasses[size].translate]: value }, sizeClasses[size].indicator]"
     />
   </button>
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  value: {
-    type: Boolean,
-    default: false,
-  },
-})
 
-defineEmits(['update'])
-</script>
+withDefaults(defineProps<{
+  value: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  name: string // required for an id so that an external <label> can be associated with the switch
+}>(), {
+  value: false,
+  size: 'lg',
+})
 
-<style scoped>
-.toggle {
-  left: 1px;
-  top: 1px;
-  height: 10px;
-  width: 10px;
-  transition: left 0.2s;
+const sizeClasses = {
+  'sm': {
+    container: 'w-16px h-10px',
+    indicator: 'w-6px h-6px ml-2px',
+    translate: 'translate-x-6px',
+  },
+  'md': {
+    container: 'w-24px h-12px',
+    indicator: 'w-8px h-8px ml-2px',
+    translate: 'translate-x-12px',
+  },
+  'lg': {
+    container: 'w-32px h-16px',
+    indicator: 'w-12px h-12px ml-2px',
+    translate: 'translate-x-14px',
+  },
+  'xl': {
+    container: 'w-48px h-24px',
+    indicator: 'w-16px h-16px ml-4px',
+    translate: 'translate-x-24px',
+  },
 }
 
-.toggle-on {
-  left: 13px;
-}
-</style>
+defineEmits(['update'])
+</script>

packages/frontend-shared/src/locales/en-US.json

@@ -58,6 +58,9 @@
     },
     "openBrowser": {
       "launch": "Launch"
+    },
+    "configFile": {
+      "createManually": "Create file manually"
     }
   },
   "globalPage": {

packages/frontend-shared/windi.config.ts

@@ -26,6 +26,10 @@ export default defineConfig({
     InteractionVariants,
     IconDuotoneColorsPlugin,
   ],
+  shortcuts: {
+    'focus-default': 'focus:border focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 focus:outline-transparent transition transition-colors duration-100 disabled:hover:ring-0 disabled:hover:border-0',
+    'hocus-default': 'hocus:border hover:border-indigo-100 focus:border-indigo-300 hocus:ring-2 hocus:ring-indigo-100 hocus:outline-transparent transition transition-colors duration-100 disabled:ring-0 disabled:border-0',
+  },
   extract: {
     // accepts globs and file paths relative to project root
     include: ['index.html', '**/*.{vue,html,tsx}', '../frontend-shared/**/*.{vue,html,tsx}'],

packages/launchpad/src/components/select/SelectBundler.vue

@@ -23,7 +23,7 @@
       "
       :class="disabledClass
         + (isOpen ? ' border-indigo-600' : ' border-gray-200')
-        + (props.disabled ? ' bg-gray-300 text-gray-600' : '')"
+        + (props.disabled ? ' bg-gray-100 text-gray-800' : '')"
       :disabled="props.disabled"
       @click="
         if (!props.disabled) {

packages/launchpad/src/components/select/SelectFramework.vue

@@ -2,32 +2,23 @@
   <div class="text-left relative">
     <label
       class="text-gray-800 text-sm my-3 block"
-      :class="disabledClass"
-    >{{
-      props.name
-    }}</label>
+      :class="{ 'opacity-50': disabled }"
+    >
+      {{
+        name
+      }}
+    </label>
     <button
       v-click-outside="() => (isOpen = false)"
-      class="
-        h-10
-        text-left
-        flex
-        justify-between
-        items-center
-        border-1
-        px-2
-        py-1
-        rounded
-        w-full
-        focus:border-indigo-600 focus:outline-transparent
-      "
+      class="h-10 text-left flex justify-between items-center border-1 px-2 py-1 rounded w-full focus:border-indigo-600 focus:outline-transparent"
       data-cy="select-framework"
-      :class="disabledClass
-        + (isOpen ? ' border-indigo-600' : ' border-gray-200')
-        + (props.disabled ? ' bg-gray-300 text-gray-600' : '')"
-      :disabled="props.disabled"
+      :class="
+        [isOpen ? ' border-indigo-600' : ' border-gray-100',
+         { 'bg-gray-100 text-gray-800 opacity-50': disabled }]
+      "
+      :disabled="disabled"
       @click="
-        if (!props.disabled) {
+        if (!disabled) {
           isOpen = !isOpen;
         }
       "
@@ -37,35 +28,22 @@
           :src="FrameworkBundlerLogos[selectedOptionObject.type]"
           class="w-5 h-5 mr-3"
         >
-        <span>
-          {{ selectedOptionObject.name }}
-        </span>
+        <span>{{ selectedOptionObject.name }}</span>
       </template>
       <span
         v-else
         class="text-gray-400"
-      >
-        {{ props.placeholder }}
-      </span>
+      >{{ placeholder }}</span>
       <span class="flex-grow" />
       <i-fa-angle-down />
     </button>
     <ul
       v-if="isOpen"
-      class="
-        w-full
-        absolute
-        bg-white
-        border-1 border-indigo-600 border-t-1 border-t-gray-100
-        rounded-b
-        flex flex-col
-        gap-0
-        z-10
-      "
+      class="w-full absolute bg-white border-1 border-indigo-600 border-t-1 border-t-gray-100 rounded-b flex flex-col gap-0 z-10"
       style="margin-top: -3px"
     >
       <li
-        v-for="opt in props.options"
+        v-for="opt in options"
         :key="opt.id"
         focus="1"
         class="cursor-pointer flex items-center py-1 px-2 hover:bg-gray-10"
@@ -75,9 +53,7 @@
           :src="FrameworkBundlerLogos[opt.type]"
           class="w-5 h-5 mr-3"
         >
-        <span>
-          {{ opt.name }}
-        </span>
+        <span>{{ opt.name }}</span>
       </li>
     </ul>
   </div>
@@ -121,5 +97,4 @@ const selectOption = (opt: FrontendFrameworkEnum) => {
   emit('select', opt)
 }
 
-const disabledClass = computed(() => props.disabled ? 'opacity-50' : undefined)
 </script>

packages/launchpad/src/setup/ButtonBar.spec.tsx

@@ -1,4 +1,7 @@
 import ButtonBar from './ButtonBar.vue'
+import { defaultMessages } from '@cy/i18n'
+
+const { next: nextLabel, back: backLabel } = defaultMessages.setupPage.step
 
 describe('<ButtonBar />', () => {
   let nextFn: ReturnType<typeof cy.stub>
@@ -10,21 +13,21 @@ describe('<ButtonBar />', () => {
   })
 
   it('playground', () => {
-    cy.mount(() => <ButtonBar next="Next Step" back="Back" nextFn={nextFn} backFn={backFn} />)
+    cy.mount(() => <ButtonBar next={nextLabel} back={backLabel} nextFn={nextFn} backFn={backFn} />)
   })
 
   it('should trigger the next function', () => {
-    cy.mount(() => <ButtonBar next="Next Step" back="Back" nextFn={nextFn} backFn={backFn} canNavigateForward={true} />)
-    cy.contains('Next Step')
+    cy.mount(() => <ButtonBar next={nextLabel} back={backLabel} nextFn={nextFn} backFn={backFn} canNavigateForward={true} />)
+    cy.contains(nextLabel)
     .click()
     .then(() => {
       expect(nextFn).to.have.been.calledOnce
     })
   })
 
   it('should trigger the back function', () => {
-    cy.mount(() => <ButtonBar next="Next Step" back="Back" nextFn={nextFn} backFn={backFn} />)
-    cy.contains('Back')
+    cy.mount(() => <ButtonBar next={nextLabel} back={backLabel} nextFn={nextFn} backFn={backFn} />)
+    cy.contains(backLabel)
     .click()
     .then(() => {
       expect(backFn).to.have.been.calledOnce
@@ -35,10 +38,10 @@ describe('<ButtonBar />', () => {
     const altFunction = cy.spy()
 
     cy.mount(() => (
-      <ButtonBar next="Next Step" back="Back" nextFn={nextFn} backFn={backFn} altFn={altFunction} alt="Install manually" />
+      <ButtonBar next={nextLabel} back={backLabel} nextFn={nextFn} backFn={backFn} altFn={altFunction} alt="Install manually" />
     ))
 
-    cy.contains('Install manually')
+    cy.findAllByLabelText('Install manually')
     .click()
     .then(() => {
       expect(altFunction).to.have.been.calledOnce

packages/launchpad/src/setup/ButtonBar.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="px-5 py-5 flex gap-3 bg-gray-50 border-t border-t-1 border-t-gray-200 rounded-b">
+  <div class="px-5 py-5 flex gap-3 bg-gray-50 border-t border-t-1 border-t-gray-100 rounded-b">
     <slot>
       <Button
         v-if="showNext"
+        size="lg"
         :disabled="!canNavigateForward"
         @click="nextFn"
       >
         {{ next }}
       </Button>
       <Button
+        size="lg"
         variant="outline"
         @click="backFn"
       >
@@ -20,10 +22,13 @@
         class="flex items-center px-3"
       >
         <label
+          for="altFn"
           class="text-gray-500 px-3"
           @click="handleAlt"
         >{{ alt }}</label>
         <Switch
+          size="lg"
+          name="altFn"
           :value="altValue"
           @update="handleAlt"
         />