Remove pressed variants

frontend/src/components/VButton.vue

@@ -335,52 +335,33 @@ a.button {
 }
 
 .filled-pink {
-  @apply border-0 bg-pink text-white focus-slim-filled hover:bg-dark-pink hover:text-white;
-}
-.filled-pink-pressed {
-  @apply bg-dark-pink;
+  @apply bg-pink text-white hover:bg-dark-pink hover:text-white;
 }
 
 .filled-dark {
-  @apply bg-dark-charcoal text-white focus-slim-filled hover:bg-dark-charcoal-80 hover:text-white;
-}
-.filled-dark-pressed {
-  @apply bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90;
+  @apply bg-dark-charcoal text-white hover:bg-dark-charcoal-80 hover:text-white;
 }
 
 .filled-gray {
   @apply bg-dark-charcoal-10 text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
 }
-.filled-gray-pressed {
-  @apply bg-dark-charcoal-90 text-white hover:border-tx hover:bg-dark-charcoal-80;
-}
 
 .filled-white {
-  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal-10;
-}
-.filled-white-pressed {
-  @apply bg-dark-charcoal-10 text-dark-charcoal;
+  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
 }
 
 .bordered-white {
   @apply border border-white bg-white text-dark-charcoal hover:border-dark-charcoal-20;
 }
-.bordered-white-pressed {
-  @apply border;
-}
 
 .bordered-gray {
   @apply border border-dark-charcoal-20 bg-white text-dark-charcoal hover:border-dark-charcoal;
 }
-.bordered-gray-pressed {
-  @apply border-tx bg-dark-charcoal-10 text-dark-charcoal;
-}
-
 .transparent-gray {
-  @apply bg-tx text-dark-charcoal hover:bg-dark-charcoal-10;
+  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal-10;
 }
 .transparent-dark {
-  @apply bg-tx text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
+  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
 }
 
 .primary {

frontend/src/components/meta/VButton.stories.mdx

@@ -31,9 +31,11 @@ export const buttonSizes = allButtonSizes.filter(
 
 export const Template = (args) => ({
   template: `
+    <div id="wrapper" class="w-40 h-16 flex items-center justify-center bg-white">
     <VButton v-bind="args" @click="onClick" href="/">
       Code is Poetry
     </VButton>
+    </div>
   `,
   components: { VButton },
   methods: {

frontend/src/types/button.ts

@@ -20,21 +20,13 @@ export const buttonVariants = [
   "dropdown-label",
   "dropdown-label-pressed",
   "filled-pink",
-  "filled-pink-pressed",
   "filled-dark",
-  "filled-dark-pressed",
   "filled-gray",
-  "filled-gray-pressed",
   "filled-white",
-  "filled-white-pressed",
   "bordered-white",
-  "bordered-white-pressed",
   "bordered-gray",
-  "bordered-gray-pressed",
   "transparent-gray",
-  "transparent-gray-pressed",
   "transparent-dark",
-  "transparent-dark-pressed",
 ] as const
 export type ButtonVariant = typeof buttonVariants[number]
 

frontend/test/storybook/playwright.config.ts

@@ -20,7 +20,7 @@ const config: PlaywrightTestConfig = {
     baseURL: "http://localhost:54000",
     trace: "retain-on-failure",
   },
-  timeout: 2 * 60 * 1e3,
+  timeout: 60 * 1e3, // 1 minute
   expect: {
     toMatchSnapshot: {
       // To avoid flaky tests, we allow a small amount of pixel difference.

frontend/test/storybook/visual-regression/v-button.spec.ts

@@ -5,6 +5,7 @@ import { makeGotoWithArgs } from "~~/test/storybook/utils/args"
 import { buttonVariants } from "~/types/button"
 
 const buttonLocator = "text=Code is Poetry"
+const wrapperLocator = "#wrapper"
 
 test.describe.configure({ mode: "parallel" })
 
@@ -23,40 +24,25 @@ test.describe("VButton", () => {
   for (const variant of nonPressedVariants) {
     test(`${variant} resting`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
-      expect(await page.locator(buttonLocator).screenshot()).toMatchSnapshot({
+      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
         name: `${variant}-resting.png`,
       })
     })
 
     test(`${variant} hovered`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
       await page.hover(buttonLocator)
-      expect(await page.locator(buttonLocator).screenshot()).toMatchSnapshot({
+      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
         name: `${variant}-hovered.png`,
       })
     })
 
-    test(`${variant} pressed`, async ({ page }) => {
-      await gotoWithArgs(page, { variant, pressed: true })
-      expect(await page.locator(buttonLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-pressed.png`,
-      })
-    })
-
-    test(`${variant} pressed hovered`, async ({ page }) => {
+    test(`${variant} focused`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
-      await page.hover(buttonLocator)
-      expect(await page.locator(buttonLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-pressed-hovered.png`,
+      await page.focus(buttonLocator)
+      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
+        name: `${variant}-focused.png`,
       })
     })
-    if (variant.startsWith("action")) {
-      test(`${variant} disabled`, async ({ page }) => {
-        await gotoWithArgs(page, { variant, disabled: true })
-        expect(await page.locator(buttonLocator).screenshot()).toMatchSnapshot({
-          name: `${variant}-disabled.png`,
-        })
-      })
-    }
   }
 })