Args fix

frontend/shared/constants/banners.ts

@@ -1,2 +1,5 @@
 export const bannerNature = ["info", "success", "warning", "error"] as const
 export type BannerNature = (typeof bannerNature)[number]
+
+export const bannerVariant = ["regular", "dark"] as const
+export type BannerVariant = (typeof bannerVariant)[number]

frontend/src/components/VBanner/VNotificationBanner.vue

@@ -5,7 +5,7 @@
  */
 import { computed } from "vue"
 
-import { BannerNature } from "#shared/constants/banners"
+import type { BannerNature, BannerVariant } from "#shared/constants/banners"
 import type { BannerId } from "#shared/types/banners"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -22,7 +22,7 @@ const props = withDefaults(
      * the color variant of the banner; The dark variant is intended for use on
      * bg-complementary pages.
      */
-    variant?: "regular" | "dark"
+    variant?: BannerVariant
     /**
      * the unique ID of the banner
      */

frontend/src/components/VBanner/meta/VNotificationBanner.stories.ts → frontend/src/components/VBanner/meta/VNotificationBanner.stories.js

@@ -4,49 +4,35 @@ import { bannerNature } from "#shared/constants/banners"
 
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
-import type { StoryObj } from "@storybook/vue3"
-
 const meta = {
   title: "Components/VNotificationBanner",
   component: VNotificationBanner,
 
   argTypes: {
-    nature: { control: "select", options: [...bannerNature] },
-    variant: { control: "select", options: ["regular", "dark"] },
+    sNature: { control: "select", options: [...bannerNature] },
+    sVariant: { control: "select", options: ["regular", "dark"] },
     onClose: { action: "close" },
   },
   args: {
-    nature: "info",
-    variant: "regular",
+    sNature: "info",
+    sVariant: "regular",
     id: "banner",
   },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
-type StoryTemplate = Omit<Story, "args">
 
 const text =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo eget felis facilisis fermentum."
 
-const Template: StoryTemplate = {
+const Template = {
   render: (args) => ({
     components: { VNotificationBanner },
     setup() {
-      const urlParams = new URLSearchParams(window.location.search)
-      const urlArgs =
-        urlParams
-          .get("args")
-          ?.split(";")
-          .map((arg) => arg.split(":")) ?? []
-      const storyArgs = { ...args } as Record<string, unknown>
-      for (const [key, value] of urlArgs) {
-        storyArgs[key] = value
-      }
       return () =>
         h(
           VNotificationBanner,
-          { ...(storyArgs as typeof args) },
+          { ...args, variant: args.sVariant, nature: args.sNature },
           { default: () => text }
         )
     },
@@ -57,8 +43,8 @@ export const Default = {
   name: "Default",
 
   args: {
-    nature: "success",
-    variant: "regular",
+    sNature: "success",
+    sVariant: "regular",
   },
 }
 
@@ -67,7 +53,7 @@ export const Dark = {
   name: "Dark",
 
   args: {
-    nature: "info",
-    variant: "dark",
+    sNature: "info",
+    sVariant: "dark",
   },
 }

frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js

@@ -14,13 +14,13 @@ const meta = {
   },
 
   argTypes: {
-    size: { options: ["small", "medium"], control: { type: "select" } },
+    sSize: { options: ["small", "medium"], control: { type: "select" } },
 
     useLinks: { control: { type: "boolean" } },
   },
 
   args: {
-    size: "medium",
+    sSize: "medium",
     useLinks: false,
     additionalTypes: false,
   },
@@ -32,24 +32,14 @@ export const Default = {
   render: (args) => ({
     components: { VSearchTypes },
     setup() {
-      const urlParams = new URLSearchParams(window.location.search)
-      const urlArgs =
-        urlParams
-          .get("args")
-          ?.split(";")
-          .map((arg) => arg.split(":")) ?? []
-      const storyArgs = { ...args }
-      for (const [key, value] of urlArgs) {
-        storyArgs[key] = value
-      }
       return () =>
         h(
           "div",
           {
-            style: storyArgs.size === "small" ? "width: max-content;" : "",
+            style: args.sSize === "small" ? "width: max-content;" : "",
             class: "wrapper p-2",
           },
-          [h(VSearchTypes, storyArgs)]
+          [h(VSearchTypes, { ...args, size: args.sSize })]
         )
     },
   }),

frontend/src/components/VImageResult/meta/VImageResult.stories.ts → frontend/src/components/VImageResult/meta/VImageResult.stories.js

@@ -4,34 +4,20 @@ import { image } from "~~/test/unit/fixtures/image"
 
 import VImageResult from "~/components/VImageResult/VImageResult.vue"
 
-import type { Meta, StoryObj } from "@storybook/vue3"
-
 const meta = {
   title: "Components/VImageResult",
   component: VImageResult,
-} satisfies Meta<typeof VImageResult>
-
+}
 export default meta
-type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default = {
   render: (args) => ({
     components: { VImageResult },
     setup() {
-      const urlParams = new URLSearchParams(window.location.search)
-      const urlArgs =
-        urlParams
-          .get("args")
-          ?.split(";")
-          .map((arg) => arg.split(":")) ?? []
-      const storyArgs = { ...args } as Record<string, unknown>
-      for (const [key, value] of urlArgs) {
-        storyArgs[key] = value
-      }
       return () =>
         h("div", { class: "p-4 image-wrapper max-w-80" }, [
           h("ol", { class: "flex flex-wrap gap-4" }, [
-            h(VImageResult, storyArgs as typeof args),
+            h(VImageResult, { ...args, aspectRatio: args.sAspectRatio }),
           ]),
         ])
     },
@@ -43,15 +29,15 @@ export const Default: Story = {
   },
 
   argTypes: {
-    aspectRatio: {
+    sAspectRatio: {
       options: ["square", "intrinsic"],
       control: { type: "select" },
     },
     image: { control: { type: "object" } },
   },
 
   args: {
-    aspectRatio: "intrinsic",
+    sAspectRatio: "intrinsic",
     kind: "search",
     searchTerm: "test",
     relatedTo: "fake-uuid",

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

@@ -27,19 +27,15 @@ export default {
   },
   argTypes: {
     as: { options: buttonForms, control: { type: "radio" } },
-
-    variant: { options: buttonVariants, control: { type: "select" } },
-
+    // Use the name that's different from the prop name to hotfix
+    // the storybook bug when the prop with a custom type is not updated when
+    // the value is set in the URL.
+    sVariant: { options: buttonVariants, control: { type: "select" } },
+    sSize: { options: buttonSizes, control: { type: "select" } },
     pressed: { control: "boolean" },
-
-    size: { options: buttonSizes, control: { type: "select" } },
-
     disabled: { control: "boolean" },
-
     focusableWhenDisabled: { control: "boolean" },
-
     type: { control: "text" },
-
     onClick: { action: "click" },
     onMouseDown: { action: "mousedown" },
     onKeydown: { action: "keydown" },
@@ -51,16 +47,6 @@ export default {
 const Template = (args) => ({
   components: { VButton },
   setup() {
-    const urlParams = new URLSearchParams(window.location.search)
-    const urlArgs =
-      urlParams
-        .get("args")
-        ?.split(";")
-        .map((arg) => arg.split(":")) ?? []
-    const storyArgs = { ...args }
-    for (const [key, value] of urlArgs) {
-      storyArgs[key] = value
-    }
     return () =>
       h("div", { class: "flex" }, [
         h(
@@ -69,7 +55,7 @@ const Template = (args) => ({
             id: "wrapper",
             class: [
               "px-4 h-16 flex items-center justify-center",
-              args.variant.startsWith("transparent")
+              args.buttonVariant.startsWith("transparent")
                 ? "bg-surface"
                 : "bg-default",
             ],
@@ -80,7 +66,9 @@ const Template = (args) => ({
               {
                 class: "description-bold",
                 href: "/",
-                ...storyArgs,
+                ...args,
+                variant: args.sVariant,
+                size: args.sSize,
               },
               () => "Code is Poetry"
             ),
@@ -97,19 +85,27 @@ const TemplateWithIcons = (args) => ({
       h("div", { class: "flex flex-col items-center gap-4 flex-wrap" }, [
         h(
           VButton,
-          { variant: args.variant, size: args.size, "has-icon-start": true },
+          {
+            variant: args.sVariant,
+            size: args.sSize,
+            "has-icon-start": true,
+          },
           () => [h(VIcon, { name: "replay" }), "Button"]
         ),
         h(
           VButton,
-          { variant: args.variant, size: args.size, "has-icon-end": true },
+          {
+            variant: args.sVariant,
+            size: args.sSize,
+            "has-icon-end": true,
+          },
           () => ["Button", h(VIcon, { name: "external-link" })]
         ),
         h(
           VButton,
           {
-            variant: args.variant,
-            size: args.size,
+            variant: args.sVariant,
+            size: args.sSize,
             "has-icon-start": true,
             "has-icon-end": true,
           },
@@ -139,6 +135,7 @@ const VariantsTemplate = (args) => ({
               key: variant,
               class: "description-bold",
               ...buttonArgs,
+              size: buttonArgs.sSize,
             },
             () => capitalCase(variant)
           )
@@ -184,16 +181,13 @@ export const Icons = {
   name: "icons",
 
   args: {
-    variant: "bordered-dark",
+    sVariant: "bordered-dark",
   },
 
   argTypes: {
     pressed: { control: "boolean" },
-
-    size: { options: buttonSizes, control: { type: "radio" } },
-
-    variant: { options: buttonVariants },
-
+    sSize: { options: buttonSizes, control: { type: "radio" } },
+    sVariant: { options: buttonVariants },
     disabled: { control: "boolean" },
   },
 }

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

@@ -16,7 +16,7 @@ test.describe("VButton", () => {
   )
   for (const variant of nonPressedVariants) {
     test(`${variant} resting`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await expectSnapshot(
         page,
         `${variant}-resting`,
@@ -25,7 +25,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} hovered`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.hover(buttonLocator)
       await expectSnapshot(
         page,
@@ -35,7 +35,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} focused`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.focus(buttonLocator)
       await expectSnapshot(
         page,
@@ -45,7 +45,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} focused hovered`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.focus(buttonLocator)
       await page.hover(buttonLocator)
       await expectSnapshot(

frontend/test/storybook/visual-regression/v-image-result.spec.ts

@@ -25,7 +25,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} loaded`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
         await expectSnapshot(
           page,
           `v-image-result-${ratio}-loaded`,
@@ -34,7 +34,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} focused`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
 
         await page.focus(imageCell)
 
@@ -46,7 +46,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} hovered`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
 
         await page.hover(imageCell)
 
@@ -58,7 +58,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} focused hovered`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
 
         await page.focus(imageCell)
         await page.hover(imageCell)