regenerate vrt spec files

packages/react/src/ActionMenu/ActionMenu.visual.spec.ts

@@ -7,6 +7,13 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: ActionMenu', () => {
+  test('ActionMenu / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-actionmenu--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('ActionMenu / Single Selection', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-actionmenu-features--single-selection&viewMode=story',
@@ -121,11 +128,4 @@ test.describe('Visual Comparison: ActionMenu', () => {
     await page.waitForTimeout(1000)
     expect(await page.screenshot()).toMatchSnapshot()
   })
-
-  test('ActionMenu / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-actionmenu--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })

packages/react/src/AnchorNav/AnchorNav.visual.spec.ts

@@ -7,6 +7,20 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: AnchorNav', () => {
+  test('AnchorNav / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-anchornav--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('AnchorNav / Playground', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-anchornav--playground&viewMode=story')
+
+    await page.waitForTimeout(1000)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('AnchorNav / Fewer anchor links', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-anchornav-features--fewer-anchor-links&viewMode=story',
@@ -102,18 +116,4 @@ test.describe('Visual Comparison: AnchorNav', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
-
-  test('AnchorNav / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-anchornav--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
-
-  test('AnchorNav / Playground', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-anchornav--playground&viewMode=story')
-
-    await page.waitForTimeout(1000)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })

packages/react/src/Avatar/Avatar.visual.spec.ts

@@ -7,38 +7,38 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: Avatar', () => {
-  test('Avatar / Sizes', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar-features--sizes&viewMode=story')
+  test('Avatar / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar--default&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
-  test('Avatar / Shapes', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar-features--shapes&viewMode=story')
+  test('Avatar / Playground', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar--playground&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
-  test('Avatar / Responsive Sizes', async ({page}) => {
-    await page.goto(
-      'http://localhost:6006/iframe.html?args=&id=components-avatar-features--responsive-sizes&viewMode=story',
-    )
+  test('Avatar / Sizes', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar-features--sizes&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
-  test('Avatar / Playground', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar--playground&viewMode=story')
+  test('Avatar / Shapes', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar-features--shapes&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
-  test('Avatar / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-avatar--default&viewMode=story')
+  test('Avatar / Responsive Sizes', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-avatar-features--responsive-sizes&viewMode=story',
+    )
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()

packages/react/src/Bento/Bento.visual.spec.ts

@@ -7,6 +7,13 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: Bento', () => {
+  test('Bento / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-bento--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Bento / Layout Example 1', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-bento-features--layout-example-1&viewMode=story',
@@ -55,13 +62,6 @@ test.describe('Visual Comparison: Bento', () => {
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
-  test('Bento / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-bento--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
-
   test('Bento / Heading With Emphasized Text', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-bento-item--heading-with-emphasized-text&viewMode=story',

packages/react/src/Box/Box.visual.spec.ts

@@ -7,6 +7,13 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: Box', () => {
+  test('Box / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-box--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Box / Padding', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-box-features--padding&viewMode=story')
 
@@ -138,11 +145,4 @@ test.describe('Visual Comparison: Box', () => {
     await page.waitForTimeout(6000)
     expect(await page.screenshot()).toMatchSnapshot()
   })
-
-  test('Box / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-box--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })

packages/react/src/Breadcrumbs/Breadcrumbs.visual.spec.ts

@@ -7,6 +7,20 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: Breadcrumbs', () => {
+  test('Breadcrumbs / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-breadcrumbs--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Breadcrumbs / Playground', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-breadcrumbs--playground&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Breadcrumbs / Accent variant', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-breadcrumbs-features--accent&viewMode=story')
 
@@ -35,17 +49,4 @@ test.describe('Visual Comparison: Breadcrumbs', () => {
       expect(await page.screenshot()).toMatchSnapshot()
     })
   })
-  test('Breadcrumbs / Playground', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-breadcrumbs--playground&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
-
-  test('Breadcrumbs / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-breadcrumbs--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })

packages/react/src/Button/Button.visual.spec.ts

@@ -7,6 +7,20 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: Button', () => {
+  test('Button / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-button--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Button / Playground', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-button--playground&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Button / Primary', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-button-features--primary&viewMode=story')
 
@@ -192,18 +206,4 @@ test.describe('Visual Comparison: Button', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
-
-  test('Button / Playground', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-button--playground&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
-
-  test('Button / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-button--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })

packages/react/src/CTABanner/CTABanner.visual.spec.ts

@@ -7,6 +7,20 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: CTABanner', () => {
+  test('CTABanner / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-ctabanner--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('CTABanner / Playground', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-ctabanner--playground&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('CTABanner / With Border', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-ctabanner-features--with-border&viewMode=story',
@@ -51,18 +65,4 @@ test.describe('Visual Comparison: CTABanner', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
-
-  test('CTABanner / Playground', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-ctabanner--playground&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
-
-  test('CTABanner / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-ctabanner--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })

packages/react/src/CTAForm/CTAForm.visual.spec.ts

@@ -7,10 +7,8 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: CTAForm', () => {
-  test('CTAForm / With No Confirm', async ({page}) => {
-    await page.goto(
-      'http://localhost:6006/iframe.html?args=&id=components-ctaform-features--with-no-confirm&viewMode=story',
-    )
+  test('CTAForm / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-ctaform--default&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
@@ -23,8 +21,10 @@ test.describe('Visual Comparison: CTAForm', () => {
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
-  test('CTAForm / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-ctaform--default&viewMode=story')
+  test('CTAForm / With No Confirm', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-ctaform-features--with-no-confirm&viewMode=story',
+    )
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()

packages/react/src/Card/Card.visual.spec.ts

@@ -7,6 +7,20 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: Card', () => {
+  test('Card / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-card--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Card / Playground', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-card--playground&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Card / Minimal', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-card-features--minimal&viewMode=story')
 
@@ -119,18 +133,4 @@ test.describe('Visual Comparison: Card', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
-
-  test('Card / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-card--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
-
-  test('Card / Playground', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-card--playground&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })

packages/react/src/EyebrowBanner/EyebrowBanner.visual.spec.ts

@@ -7,6 +7,20 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: EyebrowBanner', () => {
+  test('EyebrowBanner / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-eyebrowbanner--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('EyebrowBanner / Playground', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-eyebrowbanner--playground&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('EyebrowBanner / Variations', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-eyebrowbanner-features--variations&viewMode=story',
@@ -69,18 +83,4 @@ test.describe('Visual Comparison: EyebrowBanner', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
-
-  test('EyebrowBanner / Playground', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-eyebrowbanner--playground&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
-
-  test('EyebrowBanner / Default', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-eyebrowbanner--default&viewMode=story')
-
-    await page.waitForTimeout(500)
-    expect(await page.screenshot()).toMatchSnapshot()
-  })
 })