Prepare VButton for updates

frontend/src/components/VButton.vue

@@ -2,16 +2,17 @@
   <Component
     :is="as"
     :type="typeRef"
-    class="group flex appearance-none items-center justify-center rounded-sm no-underline ring-offset-1 transition-shadow duration-100 ease-linear focus:outline-none"
+    class="group/button flex appearance-none items-center justify-center rounded-sm no-underline"
     :class="[
       $style.button,
       $style[variant],
-      isConnected && $style[`connection-${connections}`],
-      isActive && $style[`${variant}-pressed`],
       $style[`size-${size}`],
-      isPlainDangerous
-        ? ''
-        : 'border border-tx focus-visible:ring focus-visible:ring-pink',
+      {
+        [$style[`${variant}-pressed`]]: isActive,
+        [$style[`connection-${connections}`]]: isConnected,
+        'border border-tx ring-offset-1 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink':
+          !isPlainDangerous,
+      },
     ]"
     :aria-pressed="pressed"
     :aria-disabled="ariaDisabledRef"
@@ -111,7 +112,7 @@ const VButton = defineComponent({
      */
     size: {
       type: String as PropType<ButtonSize>,
-      default: "medium",
+      default: "medium-old",
     },
     /**
      * Whether the button is disabled. Used alone this will only
@@ -242,15 +243,13 @@ export default VButton
   @apply cursor-not-allowed;
 }
 
-.size-small {
+.size-small-old {
   @apply py-1 px-2;
 }
-
-.size-medium {
+.size-medium-old {
   @apply py-2 px-4;
 }
-
-.size-large {
+.size-large-old {
   @apply py-6 px-8;
 }
 

frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue

@@ -6,7 +6,7 @@
   >
     <template #default="{ iconSize }">
       <span
-        class="relative flex flex-shrink-0 flex-grow-0 items-center justify-center rounded-sm group-focus-visible:ring group-focus-visible:ring-pink group-active:ring group-active:ring-pink"
+        class="relative flex flex-shrink-0 flex-grow-0 items-center justify-center rounded-sm group-focus-visible/button:ring group-focus-visible/button:ring-pink group-active/button:ring group-active/button:ring-pink"
         :class="[`h-${innerSize} w-${innerSize}`, innerAreaClasses]"
       >
         <VIcon

frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue

@@ -35,7 +35,7 @@
       :variant="isHomeRoute ? 'primary' : 'plain'"
       class="h-full w-14 flex-shrink-0 transition-none rounded-s-none sm:w-16"
       :class="{
-        'search-button border-black p-0.5px ps-1.5px hover:bg-pink hover:text-white focus:border-tx focus-visible:bg-pink focus-visible:text-white group-focus-within:border-tx group-focus-within:bg-pink group-focus-within:text-white group-focus-within:hover:bg-dark-pink group-hover:border-tx group-hover:bg-pink group-hover:text-white group-focus:border-tx':
+        'search-button border border-black p-0.5px ps-1.5px hover:bg-pink hover:text-white focus:border-tx focus-visible:bg-pink focus-visible:text-white group-focus-within:border-tx group-focus-within:bg-pink group-focus-within:text-white group-focus-within:hover:bg-dark-pink group-hover:border-tx group-hover:bg-pink group-hover:text-white group-focus:border-tx':
           !isHomeRoute,
       }"
     >

frontend/src/components/VLoadMore.vue

@@ -1,7 +1,7 @@
 <template>
   <VButton
     v-show="canLoadMore"
-    size="large"
+    size="large-old"
     variant="full"
     :disabled="isFetching"
     data-testid="load-more"

frontend/src/components/VTabs/VTab.vue

@@ -7,7 +7,7 @@
     size="disabled"
     variant="plain--avoid"
     v-bind="tabProps"
-    class="rounded-none border-0 bg-white focus-visible:shadow-[0_0_0_1.5px_#c52b9b_inset]"
+    class="rounded-none bg-white focus-slim-tx"
     :class="[
       $style[variant],
       $style[`size-${size}`],

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

@@ -0,0 +1,181 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs"
+import {
+  buttonForms,
+  buttonSizes as allButtonSizes,
+  buttonVariants as allButtonVariants,
+} from "~/types/button"
+import VButton from "~/components/VButton.vue"
+import { capital } from "case"
+
+<Meta title="Components/VButtonOld" components={VButton} />
+
+export const buttonVariants = allButtonVariants.filter(
+  (variant) =>
+    !variant.startsWith("filled-") &&
+    !variant.startsWith("bordered-") &&
+    !variant.startsWith("transparent-")
+)
+export const buttonSizes = allButtonSizes.filter(
+  (size) => size.endsWith("-old") || size === "disabled"
+)
+
+export const Template = (args) => ({
+  template: `
+    <VButton v-bind="args" @click="onClick" href="/">
+      Code is Poetry
+    </VButton>
+  `,
+  components: { VButton },
+  methods: {
+    onClick() {
+      window.alert("hello!")
+    },
+  },
+  setup() {
+    return { args }
+  },
+})
+
+# VButton
+
+<Description of={VButton} />
+
+<ArgsTable of={VButton} />
+
+<Canvas>
+  <Story
+    name="VButton"
+    parameters={{
+      viewport: { defaultViewport: "sm" },
+    }}
+    argTypes={{
+      as: {
+        options: buttonForms,
+        control: { type: "radio" },
+      },
+      variant: {
+        options: buttonVariants,
+        control: { type: "select" },
+      },
+      pressed: { control: "boolean" },
+      size: {
+        options: buttonSizes,
+        control: { type: "radio" },
+      },
+      disabled: { control: "boolean" },
+      focusableWhenDisabled: { control: "boolean" },
+      type: { control: "text" },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+export const VariantsTemplate = (args) => ({
+  template: `
+<div class="flex gap-4 flex-wrap">
+<VButton v-for="variant in args.variants"
+    :variant="variant"
+    :key="variant"
+    class="caption-bold"
+    v-bind="args">
+    {{ capitalize(variant) }}
+    </VButton>
+  </div>`,
+  components: { VButton },
+  methods: {
+    capitalize(str) {
+      return capital(str)
+    },
+  },
+  setup() {
+    return { args }
+  },
+})
+
+## Button variants
+
+### Primary
+
+The style used for Call-to-action buttons, such as the 'Search' button or 'Get
+this media item' buttons. It is a pink button.
+
+<Canvas>
+  <Story
+    name="primary"
+    args={{ variants: ["primary"] }}
+    argTypes={{
+      pressed: { control: "boolean" },
+      size: {
+        options: buttonSizes,
+        control: { type: "radio" },
+      },
+      disabled: { control: "boolean" },
+    }}
+  >
+    {VariantsTemplate.bind({})}
+  </Story>
+</Canvas>
+
+### Secondary
+
+The styles used for other buttons.
+
+There are three variants of secondary buttons: filled, bordered and text
+(without border).
+
+<Canvas>
+  <Story
+    name="secondary"
+    args={{ variants: ["secondary-bordered", "secondary-filled", "secondary"] }}
+    argTypes={{
+      pressed: { control: "boolean" },
+      size: {
+        options: buttonSizes,
+        control: { type: "radio" },
+      },
+      disabled: { control: "boolean" },
+    }}
+  >
+    {VariantsTemplate.bind({})}
+  </Story>
+</Canvas>
+
+### Action-menu
+
+The styles used for header 'action-menu' buttons.
+
+'action-menu' also has no border and no background. On hover, there is a light
+border. It is used in the desktop header buttons and for the content type
+switcher inside the searchbar.
+
+'action-menu-bordered' has a border but no background. It is used in the desktop
+header buttons when the (old) header is scrolled.
+
+'action-menu-muted' has a light charcoal background. It is used for filters when
+some filters are applied.
+
+<Canvas>
+  <Story
+    name="action-menu"
+    args={{
+      variants: ["action-menu", "action-menu-bordered", "action-menu-muted"],
+    }}
+    argTypes={{
+      pressed: { control: "boolean" },
+      size: {
+        options: buttonSizes,
+        control: { type: "radio" },
+      },
+      disabled: { control: "boolean" },
+    }}
+  >
+    {VariantsTemplate.bind({})}
+  </Story>
+</Canvas>

frontend/src/pages/image/_id/index.vue

@@ -32,7 +32,7 @@
         as="VLink"
         :href="image.foreign_landing_url"
         class="description-bold md:heading-6 mb-4 w-full flex-initial self-center md:mb-0 md:w-max"
-        size="large"
+        size="large-old"
       >
         {{ $t("image-details.weblink") }}
         <VIcon

frontend/src/types/button.ts

@@ -22,7 +22,15 @@ export const buttonVariants = [
 ] as const
 export type ButtonVariant = typeof buttonVariants[number]
 
-export const buttonSizes = ["large", "medium", "small", "disabled"] as const
+export const buttonSizes = [
+  "large",
+  "medium",
+  "small",
+  "disabled",
+  "large-old",
+  "medium-old",
+  "small-old",
+] as const
 export type ButtonSize = typeof buttonSizes[number]
 
 export const buttonTypes = ["button", "submit", "reset"] as const

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

@@ -8,9 +8,15 @@ const buttonLocator = "text=Code is Poetry"
 
 test.describe.configure({ mode: "parallel" })
 
+const oldButtonVariants = buttonVariants.filter(
+  (name) =>
+    !name.startsWith("filled-") &&
+    !name.startsWith("bordered-") &&
+    !name.startsWith("transparent-")
+)
 test.describe("VButton", () => {
-  const gotoWithArgs = makeGotoWithArgs("components-vbutton--v-button")
-  const nonPressedVariants = buttonVariants.filter(
+  const gotoWithArgs = makeGotoWithArgs("components-vbuttonold--v-button")
+  const nonPressedVariants = oldButtonVariants.filter(
     (name) => !name.endsWith("pressed")
   )
   for (const variant of nonPressedVariants) {