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'