@kaizen/components 0.0.0-canary-generic-tile-testing-2-20250815051607 → 0.0.0-canary-test-v1-codemod-runner-20250821061337

package/codemods/migrateV2NextToCurrent/migrateV2NextToCurrent.spec.ts

@@ -500,7 +500,7 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
   describe('Module path transformations', () => {
     it('should transform react-aria module path', () => {
       const inputAst = parseJsx(`import { Button } from "@kaizen/components/v3/react-aria"`)
-      const expectedAst = parseJsx(`import { Button } from "@kaizen/components/react-aria"`)
+      const expectedAst = parseJsx(`import { Button } from "@kaizen/components/libs/react-aria"`)
 
       const result = transformComponents(inputAst)
       expect(result).toBe(printAst(expectedAst))
@@ -511,7 +511,7 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
         `import { TextField } from "@kaizen/components/v3/react-aria-components"`,
       )
       const expectedAst = parseJsx(
-        `import { TextField } from "@kaizen/components/react-aria-components"`,
+        `import { TextField } from "@kaizen/components/libs/react-aria-components"`,
       )
 
       const result = transformComponents(inputAst)
@@ -520,7 +520,9 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
 
     it('should handle multiple imports from react-aria modules', () => {
       const inputAst = parseJsx(`import { Button, Link } from "@kaizen/components/v3/react-aria"`)
-      const expectedAst = parseJsx(`import { Button, Link } from "@kaizen/components/react-aria"`)
+      const expectedAst = parseJsx(
+        `import { Button, Link } from "@kaizen/components/libs/react-aria"`,
+      )
 
       const result = transformComponents(inputAst)
       expect(result).toBe(printAst(expectedAst))
@@ -531,7 +533,7 @@ import type { Menu as KZMenu, MenuItem as KZMenuItem } from "@kaizen/components"
         `import { Button as AriaButton } from "@kaizen/components/v3/react-aria"`,
       )
       const expectedAst = parseJsx(
-        `import { Button as AriaButton } from "@kaizen/components/react-aria"`,
+        `import { Button as AriaButton } from "@kaizen/components/libs/react-aria"`,
       )
 
       const result = transformComponents(inputAst)
@@ -545,7 +547,7 @@ import { Button } from "@kaizen/components/v3/react-aria"
 `)
       const expectedAst = parseJsx(`
 import { Menu } from "@kaizen/components"
-import { Button } from "@kaizen/components/react-aria"
+import { Button } from "@kaizen/components/libs/react-aria"
 `)
 
       const result = transformComponents(inputAst)

package/codemods/migrateV2NextToCurrent/migrateV2NextToCurrent.ts

@@ -49,8 +49,8 @@ const componentGroups: ComponentGroup[] = [
 const renameMap = createRenameMapFromGroups(componentGroups)
 
 const modulePathMap = new Map([
-  ['@kaizen/components/v3/react-aria', '@kaizen/components/react-aria'],
-  ['@kaizen/components/v3/react-aria-components', '@kaizen/components/react-aria-components'],
+  ['@kaizen/components/v3/react-aria', '@kaizen/components/libs/react-aria'],
+  ['@kaizen/components/v3/react-aria-components', '@kaizen/components/libs/react-aria-components'],
 ])
 
 export const migrateV2NextToCurrent =

package/codemods/runV1Codemods/README.md

@@ -0,0 +1,65 @@
+# runV1Codemods
+
+A comprehensive codemod that runs all V1 migration codemods in the correct sequence.
+
+## Overview
+
+This codemod executes all 17 V1 migration codemods in the order as pre-work to migrate to `kaizen/component@2.0.0` Kaizen components. After this you will still need to run the `migrateV2NextToCurrent` and `renameV2ComponentImportsAndUsages` after upgrading to `kaizen/component@2.0.0`
+
+This codemod runner handles the following:
+
+- Icon upgrades (`upgradeIconV1`)
+- Button migrations (`upgradeV1Buttons`)
+- GuidanceBlock actions migration (`migrateGuidanceBlockActionsToActionsSlot`)
+- Mood to variant migrations for multiple components
+- Variant to color migrations
+- Type to variant migrations for notifications
+- Removal of deprecated props
+
+## Usage
+
+```bash
+pnpm kaizen-codemod {target-directory} runV1Codemods
+```
+
+## Example
+
+```bash
+pnpm kaizen-codemod src runV1Codemods
+```
+
+## What it does
+
+The codemod runs the following transformations in sequence:
+
+1. **upgradeIconV1** - Migrates V1 Icon components to next Icon
+2. **upgradeV1Buttons** - Migrates V1 Button and IconButton to next Button/LinkButton
+3. **migrateGuidanceBlockActionsToActionsSlot** - Migrates GuidanceBlock actions prop to actionsSlot
+4. **migrateBrandMomentMoodToVariant** - Changes `mood` prop to `variant` on BrandMoment
+5. **migrateCardVariantToColor** - Changes `variant` prop to `color` on Card
+6. **migrateConfirmationModalMoodsToVariant** - Changes `mood` prop to `variant` on ConfirmationModal
+7. **migrateEmptyStateIllustrationTypeToVariant** - Changes `illustrationType` prop to `variant` on EmptyState
+8. **migrateGlobalNotificationTypeToVariant** - Changes `type` prop to `variant` on GlobalNotification
+9. **migrateInformationTileMoodToVariant** - Changes `mood` prop to `variant` on InformationTile
+10. **migrateInlineNotificationTypeToVariant** - Changes `type` prop to `variant` on InlineNotification
+11. **migrateMultiActionTileMoodToVariant** - Changes `mood` prop to `variant` on MultiActionTile
+12. **migrateNotificationTypeToVariant** - Changes `type` prop to `variant` on Notification
+13. **migrateProgressBarMoodToColor** - Changes `mood` prop to `color` on ProgressBar
+14. **migrateToastNotificationTypeToVariant** - Changes `type` prop to `variant` on ToastNotification
+15. **migrateWellVariantToColor** - Changes `variant` prop to `color` on Well
+16. **removeInputEditModalMood** - Removes deprecated `mood` prop from InputEditModal
+17. **removePopoverVariant** - Removes deprecated `variant` and `customIcon` props from Popover
+
+## Error Handling
+
+- If any individual codemod fails, the process continues with the remaining codemods
+- Detailed logging shows the start and completion status of each codemod
+- A summary is provided at the end showing successful vs failed codemods
+
+## Cautions and caveats
+
+This will create a lot of diffs and changes to your components as the codemod will traverse an entire directory.
+
+To reduce the scope, consider either running this on component or page directories or running the mode incrementally, ie:
+
+`pnpm kaizen-codemod src/components/MockComponent runV1Codemods`

package/codemods/runV1Codemods/index.ts

@@ -0,0 +1,218 @@
+import { transformBrandMomentMoodToVariant } from '../migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant'
+import { transformCardVariantToColor } from '../migrateCardVariantToColor/transformCardVariantToColor'
+import { transformConfirmationModalMoodsToVariant } from '../migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant'
+import { transformEmptyStateIllustrationTypeToVariant } from '../migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant'
+import { migrateGuidanceBlockActionsToActionsSlot } from '../migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot'
+import { transformInformationTileMoodToVariant } from '../migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant'
+import { transformMultiActionTileMoodToVariant } from '../migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant'
+import { transformNotificationTypeToVariant } from '../migrateNotificationTypeToVariant/migrateNotificationTypeToVariant'
+import { transformProgressBarMoodToColor } from '../migrateProgressBarMoodToColor/transformProgressBarMoodToColor'
+import { transformWellVariantToColor } from '../migrateWellVariantToColor/transformWellVariantToColor'
+import { removeInputEditModalMood } from '../removeInputEditModalMood/removeInputEditModalMood'
+import { removePopoverVariant } from '../removePopoverVariant/removePopoverVariant'
+import { upgradeIconV1 } from '../upgradeIconV1/upgradeIconV1'
+import { upgradeV1Buttons } from '../upgradeV1Buttons/upgradeV1Buttons'
+import { transformComponentsInDir, transformComponentsInDirByPattern } from '../utils'
+
+interface CodemodConfig {
+  name: string
+  runner: (targetDir: string) => void
+}
+
+const run = (): void => {
+  console.log('🚀 Running all V1 codemods in sequence')
+  console.log('')
+  console.log('This will run the following codemods in order:')
+  console.log('1. upgradeIconV1')
+  console.log('2. upgradeV1Buttons')
+  console.log('3. migrateGuidanceBlockActionsToActionsSlot')
+  console.log('4. migrateBrandMomentMoodToVariant')
+  console.log('5. migrateCardVariantToColor')
+  console.log('6. migrateConfirmationModalMoodsToVariant')
+  console.log('7. migrateEmptyStateIllustrationTypeToVariant')
+  console.log('8. migrateGlobalNotificationTypeToVariant')
+  console.log('9. migrateInformationTileMoodToVariant')
+  console.log('10. migrateInlineNotificationTypeToVariant')
+  console.log('11. migrateMultiActionTileMoodToVariant')
+  console.log('12. migrateNotificationTypeToVariant')
+  console.log('13. migrateProgressBarMoodToColor')
+  console.log('14. migrateToastNotificationTypeToVariant')
+  console.log('15. migrateWellVariantToColor')
+  console.log('16. removeInputEditModalMood')
+  console.log('17. removePopoverVariant')
+  console.log('')
+
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    console.error('Error: Target directory is required')
+    process.exit(1)
+  }
+
+  const codemods: CodemodConfig[] = [
+    {
+      name: 'upgradeIconV1',
+      runner: (dir) => {
+        transformComponentsInDirByPattern(dir, 'Icon$', (tagNames) => [upgradeIconV1(tagNames)])
+      },
+    },
+    {
+      name: 'upgradeV1Buttons',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['IconButton', 'Button'], (tagNames) => [
+          upgradeV1Buttons(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateGuidanceBlockActionsToActionsSlot',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['GuidanceBlock'], (tagNames) => [
+          migrateGuidanceBlockActionsToActionsSlot(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateBrandMomentMoodToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['BrandMoment'], (tagNames) => [
+          transformBrandMomentMoodToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateCardVariantToColor',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['Card'], (tagNames) => [
+          transformCardVariantToColor(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateConfirmationModalMoodsToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['ConfirmationModal'], (tagNames) => [
+          transformConfirmationModalMoodsToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateEmptyStateIllustrationTypeToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['EmptyState'], (tagNames) => [
+          transformEmptyStateIllustrationTypeToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateGlobalNotificationTypeToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['GlobalNotification'], (tagNames) => [
+          transformNotificationTypeToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateInformationTileMoodToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['InformationTile'], (tagNames) => [
+          transformInformationTileMoodToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateInlineNotificationTypeToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['InlineNotification'], (tagNames) => [
+          transformNotificationTypeToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateMultiActionTileMoodToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['MultiActionTile'], (tagNames) => [
+          transformMultiActionTileMoodToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateNotificationTypeToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['Notification'], (tagNames) => [
+          transformNotificationTypeToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateProgressBarMoodToColor',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['ProgressBar'], (tagNames) => [
+          transformProgressBarMoodToColor(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateToastNotificationTypeToVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['ToastNotification'], (tagNames) => [
+          transformNotificationTypeToVariant(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'migrateWellVariantToColor',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['Well'], (tagNames) => [
+          transformWellVariantToColor(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'removeInputEditModalMood',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['InputEditModal'], (tagNames) => [
+          removeInputEditModalMood(tagNames),
+        ])
+      },
+    },
+    {
+      name: 'removePopoverVariant',
+      runner: (dir) => {
+        transformComponentsInDir(dir, ['Popover'], (tagNames) => [removePopoverVariant(tagNames)])
+      },
+    },
+  ]
+
+  console.log(`📝 Running ${codemods.length} codemods on directory: ${targetDir}`)
+  console.log('')
+
+  let successCount = 0
+  let errorCount = 0
+
+  for (const codemod of codemods) {
+    try {
+      console.log(`🔄 Starting codemod: ${codemod.name}`)
+      codemod.runner(targetDir)
+      console.log(`✅ Completed codemod: ${codemod.name}`)
+      successCount++
+    } catch (error) {
+      console.error(`❌ Error in codemod: ${codemod.name}`)
+      console.error(error)
+      errorCount++
+    }
+    console.log('')
+  }
+
+  console.log('📊 Summary:')
+  console.log(`✅ Successful codemods: ${successCount}`)
+  console.log(`❌ Failed codemods: ${errorCount}`)
+  console.log(`🎯 Total codemods: ${codemods.length}`)
+
+  if (errorCount > 0) {
+    console.log('\n⚠️  Some codemods failed. Please review the errors above.')
+  } else {
+    console.log('\n🎉 All codemods completed successfully!')
+  }
+}
+
+run()

package/codemods/runV1Codemods/runV1Codemods.ts

@@ -0,0 +1,151 @@
+import { transformBrandMomentMoodToVariant } from '../migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant'
+import { transformCardVariantToColor } from '../migrateCardVariantToColor/transformCardVariantToColor'
+import { transformConfirmationModalMoodsToVariant } from '../migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant'
+import { transformEmptyStateIllustrationTypeToVariant } from '../migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant'
+import { migrateGuidanceBlockActionsToActionsSlot } from '../migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot'
+import { transformInformationTileMoodToVariant } from '../migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant'
+import { transformMultiActionTileMoodToVariant } from '../migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant'
+import { transformNotificationTypeToVariant } from '../migrateNotificationTypeToVariant/migrateNotificationTypeToVariant'
+import { transformProgressBarMoodToColor } from '../migrateProgressBarMoodToColor/transformProgressBarMoodToColor'
+import { transformWellVariantToColor } from '../migrateWellVariantToColor/transformWellVariantToColor'
+import { removeInputEditModalMood } from '../removeInputEditModalMood/removeInputEditModalMood'
+import { removePopoverVariant } from '../removePopoverVariant/removePopoverVariant'
+import { upgradeIconV1 } from '../upgradeIconV1/upgradeIconV1'
+import { upgradeV1Buttons } from '../upgradeV1Buttons/upgradeV1Buttons'
+import { transformComponentsInDir, transformComponentsInDirByPattern } from '../utils'
+
+interface CodemodConfig {
+  name: string
+  runner: (targetDir: string) => void
+}
+
+export const codemods: CodemodConfig[] = [
+  {
+    name: 'upgradeIconV1',
+    runner: (dir) => {
+      transformComponentsInDirByPattern(dir, 'Icon$', (tagNames) => [upgradeIconV1(tagNames)])
+    },
+  },
+  {
+    name: 'upgradeV1Buttons',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['IconButton', 'Button'], (tagNames) => [
+        upgradeV1Buttons(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateGuidanceBlockActionsToActionsSlot',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['GuidanceBlock'], (tagNames) => [
+        migrateGuidanceBlockActionsToActionsSlot(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateBrandMomentMoodToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['BrandMoment'], (tagNames) => [
+        transformBrandMomentMoodToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateCardVariantToColor',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Card'], (tagNames) => [transformCardVariantToColor(tagNames)])
+    },
+  },
+  {
+    name: 'migrateConfirmationModalMoodsToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['ConfirmationModal'], (tagNames) => [
+        transformConfirmationModalMoodsToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateEmptyStateIllustrationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['EmptyState'], (tagNames) => [
+        transformEmptyStateIllustrationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateGlobalNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['GlobalNotification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateInformationTileMoodToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['InformationTile'], (tagNames) => [
+        transformInformationTileMoodToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateInlineNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['InlineNotification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateMultiActionTileMoodToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['MultiActionTile'], (tagNames) => [
+        transformMultiActionTileMoodToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Notification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateProgressBarMoodToColor',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['ProgressBar'], (tagNames) => [
+        transformProgressBarMoodToColor(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateToastNotificationTypeToVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['ToastNotification'], (tagNames) => [
+        transformNotificationTypeToVariant(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'migrateWellVariantToColor',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Well'], (tagNames) => [transformWellVariantToColor(tagNames)])
+    },
+  },
+  {
+    name: 'removeInputEditModalMood',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['InputEditModal'], (tagNames) => [
+        removeInputEditModalMood(tagNames),
+      ])
+    },
+  },
+  {
+    name: 'removePopoverVariant',
+    runner: (dir) => {
+      transformComponentsInDir(dir, ['Popover'], (tagNames) => [removePopoverVariant(tagNames)])
+    },
+  },
+]

package/dist/styles.css

@@ -7,12 +7,22 @@
 }
 
 @layer kz-components {
-  .ListSection-module_listSectionHeader__bptHg {
-    font-family: var(--typography-heading-5-font-family);
-    font-weight: var(--typography-heading-5-font-weight);
-    font-size: var(--typography-heading-5-font-size);
-    line-height: var(--typography-heading-5-line-height);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
+  .Trigger-module_button__giSqA {
+    anchor-name: var(--anchor-name);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-12);
+    min-height: var(--spacing-48);
+    min-width: var(--spacing-200);
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: 1px solid var(--color-gray-500);
   }
 }
 
@@ -34,22 +44,12 @@
 }
 
 @layer kz-components {
-  .Trigger-module_button__giSqA {
-    anchor-name: var(--anchor-name);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-family: var(--typography-paragraph-body-font-family);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    font-size: var(--typography-paragraph-body-font-size);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-    padding: var(--spacing-12);
-    min-height: var(--spacing-48);
-    min-width: var(--spacing-200);
-    background-color: var(--color-white);
-    border-radius: var(--spacing-8);
-    border: 1px solid var(--color-gray-500);
+  .ListSection-module_listSectionHeader__bptHg {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-generic-tile-testing-2-20250815051607",
+  "version": "0.0.0-canary-test-v1-codemod-runner-20250821061337",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -20,12 +20,17 @@ type Story = StoryObj<typeof GenericTile>
 export const Flip: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
+    const buttonWithInfoLabel = await canvas.findByRole('button', {
+      name: 'View more information: Title',
+    })
 
     await step('initial render complete', async () => {
+      expect(buttonWithInfoLabel).toBeInTheDocument()
+    })
+
+    await step('Can focus to button', async () => {
       await waitFor(() => {
-        canvas.getByRole('button', {
-          name: 'View more information: Title',
-        })
+        buttonWithInfoLabel.click()
       })
     })