Add a story with a long source title

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

@@ -12,6 +12,13 @@ export const Template = (args) => ({
   template: `<div class="wrapper w-full p-2"><VCollectionHeader v-bind="args"/></div>`,
   components: { VCollectionHeader },
   setup() {
+    const collectionId = args.id || "tag"
+    const defaultCollectionArgs = collections.find((c) => c.id === collectionId)
+    for (let key of ["collection", "title", "url", "resultsLabel"]) {
+      if (args[key] === undefined) {
+        args[key] = defaultCollectionArgs[key]
+      }
+    }
     return { args }
   },
 })
@@ -36,8 +43,8 @@ export const AllCollectionsTemplate = (args) => ({
   title="Components/VCollectionHeader"
   component={VCollectionHeader}
   argTypes={{
-    collection: {
-      options: ["tag", "source", "creator"],
+    id: {
+      options: ["tag", "source", "creator", "source-with-long-name"],
       control: { type: "select" },
     },
     title: {
@@ -51,31 +58,40 @@ export const AllCollectionsTemplate = (args) => ({
     },
   }}
   args={{
-    collection: "source",
-    title: "Metropolitan Museum of Art",
-    url: "https://www.metmuseum.org/",
-    resultsLabel: "10000 images from the Metropolitan Museum of Art",
+    id: "source-with-long-name",
   }}
 />
 
 export const collections = [
   {
+    id: "tag",
     collection: "tag",
     title: "cat",
     resultsLabel: "10000 audio files with the selected tag",
   },
   {
+    id: "source",
     collection: "source",
     title: "Metropolitan Museum of Art",
     url: "https://www.metmuseum.org/",
     resultsLabel: "10000 images from the Metropolitan Museum of Art",
   },
   {
+    id: "creator",
     collection: "creator",
     title: "iocyoungreporters",
     url: "https://www.flickr.com/photos/126018610@N05",
     resultsLabel: "10000 images from iocyoungreporters",
   },
+  {
+    id: "source-with-long-name",
+    collection: "source",
+    title:
+      "Smithsonian Institution: National Museum of African American History and Culture",
+    url: "https://nmaahc.si.edu",
+    resultsLabel:
+      "10000 images from the Smithsonian Institution: National Museum of African American History and Culture",
+  },
 ]
 
 # VCollectionHeader

frontend/test/storybook/visual-regression/v-collection-header.spec.ts

@@ -5,10 +5,15 @@ import breakpoints from "~~/test/playwright/utils/breakpoints"
 test.describe("VCollectionHeader", () => {
   breakpoints.describeMobileAndDesktop(({ expectSnapshot }) => {
     for (const languageDirection of ["ltr", "rtl"]) {
-      for (const collection of ["tag", "creator", "source"]) {
+      for (const collection of [
+        "tag",
+        "creator",
+        "source",
+        "source-with-long-name",
+      ]) {
         test(`${collection}-${languageDirection}`, async ({ page }) => {
           await page.goto(
-            `/iframe.html?id=components-vcollectionheader--default-story&args=collection:${collection}`
+            `/iframe.html?id=components-vcollectionheader--default-story&args=id:${collection}`
           )
           await expectSnapshot(
             `VCollectionHeader=${collection}-${languageDirection}`,