refactor(app): refactor banner component stories (#14894)

* refactor(app): refactor banner component stories

app/src/atoms/Banner/Banner.stories.tsx

@@ -1,36 +1,41 @@
 import * as React from 'react'
 import { StyledText, TYPOGRAPHY } from '@opentrons/components'
 import { Banner } from './index'
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof Banner> = {
   title: 'App/Atoms/Banner',
   component: Banner,
-} as Meta
+}
+
+export default meta
 
-const Template: Story<React.ComponentProps<typeof Banner>> = args => (
-  <Banner {...args}>{'Banner component'}</Banner>
-)
+type Story = StoryObj<typeof Banner>
 
-export const Primary = Template.bind({})
-Primary.args = {
-  title: 'title',
-  type: 'success',
+export const Primary: Story = {
+  args: {
+    children: 'Banner component',
+    type: 'success',
+  },
 }
-export const OverriddenIcon = Template.bind({})
-OverriddenIcon.args = {
-  type: 'warning',
-  title: 'Alert with overridden icon',
-  icon: { name: 'ot-hot-to-touch' },
+
+export const OverriddenIcon: Story = {
+  args: {
+    type: 'warning',
+    children: 'Banner component',
+    icon: { name: 'ot-hot-to-touch' },
+  },
 }
-export const OverriddenExitIcon = Template.bind({})
-OverriddenExitIcon.args = {
-  type: 'informing',
-  title: 'Alert with overriden exit icon',
-  onCloseClick: () => console.log('close'),
-  closeButton: (
-    <StyledText as="p" textDecoration={TYPOGRAPHY.textDecorationUnderline}>
-      {'Exit'}
-    </StyledText>
-  ),
+
+export const OverriddenExitIcon: Story = {
+  args: {
+    type: 'informing',
+    children: 'Banner component',
+    onCloseClick: () => console.log('close'),
+    closeButton: (
+      <StyledText as="p" textDecoration={TYPOGRAPHY.textDecorationUnderline}>
+        {'Exit'}
+      </StyledText>
+    ),
+  },
 }

app/src/atoms/Banner/__tests__/Banner.test.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { Banner } from '..'
-import { renderWithProviders } from '../../../__testing-utils__'
 
 const render = (props: React.ComponentProps<typeof Banner>) => {
   return renderWithProviders(<Banner {...props} />, {
@@ -21,69 +20,76 @@ describe('Banner', () => {
       children: 'TITLE',
     }
   })
+
   it('renders success banner', () => {
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_success')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_success')
+    screen.getByText('TITLE')
   })
+
   it('renders success banner with exit button and when click dismisses banner', () => {
     props = {
       type: 'success',
       children: 'TITLE',
       onCloseClick: vi.fn(),
     }
-    const { getByText, getByLabelText } = render(props)
-    getByText('TITLE')
-    const btn = getByLabelText('close_icon')
+    render(props)
+    screen.getByText('TITLE')
+    const btn = screen.getByLabelText('close_icon')
     fireEvent.click(btn)
     expect(props.onCloseClick).toHaveBeenCalled()
   })
+
   it('renders warning banner', () => {
     props = {
       type: 'warning',
       children: 'TITLE',
     }
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_warning')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_warning')
+    screen.getByText('TITLE')
   })
+
   it('renders error banner', () => {
     props = {
       type: 'error',
       children: 'TITLE',
     }
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_error')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_error')
+    screen.getByText('TITLE')
   })
+
   it('renders updating banner', () => {
     props = {
       type: 'updating',
       children: 'TITLE',
     }
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_updating')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_updating')
+    screen.getByText('TITLE')
   })
+
   it('renders custom icon banner', () => {
     props = {
       type: 'warning',
       children: 'TITLE',
       icon: { name: 'ot-hot-to-touch' },
     }
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_warning')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_warning')
+    screen.getByText('TITLE')
   })
+
   it('renders custom close', () => {
     props = {
       type: 'warning',
       children: 'TITLE',
       closeButton: 'close button',
       onCloseClick: vi.fn(),
     }
-    const { getByText } = render(props)
-    const btn = getByText('close button')
+    render(props)
+    const btn = screen.getByText('close button')
     fireEvent.click(btn)
     expect(props.onCloseClick).toHaveBeenCalled()
   })

app/src/atoms/Banner/index.tsx

@@ -8,13 +8,12 @@ import {
   DIRECTION_ROW,
   Flex,
   Icon,
-  IconProps,
   JUSTIFY_SPACE_BETWEEN,
   RESPONSIVENESS,
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import type { StyleProps } from '@opentrons/components'
+import type { IconProps, StyleProps } from '@opentrons/components'
 
 export type BannerType =
   | 'success'