feat(app): add ListItem component (#13128)

* feat(app): add ListItem component

app/src/atoms/ListItem/ListItem.stories.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components'
+import { StyledText } from '../text'
+import { ListItem } from '.'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'ODD/Atoms/ListItem',
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['error', 'noActive', 'success', 'warning'],
+      },
+    },
+  },
+} as Meta
+
+const ListItemTemplate: Story<React.ComponentProps<typeof ListItem>> = args => (
+  <ListItem {...args} />
+)
+
+export const Item = ListItemTemplate.bind({})
+Item.args = {
+  type: 'noActive',
+  children: (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <StyledText as="p">
+        Slot Component: Replace me using the component panel.
+      </StyledText>
+      <StyledText as="p">
+        Slot Component: Replace me using the component panel.
+      </StyledText>
+      <StyledText as="p">
+        Slot Component: Replace me using the component panel.
+      </StyledText>
+    </Flex>
+  ),
+}

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

@@ -0,0 +1,68 @@
+import * as React from 'react'
+
+import {
+  BORDERS,
+  COLORS,
+  renderWithProviders,
+  SPACING,
+} from '@opentrons/components'
+
+import { ListItem } from '..'
+
+const render = (props: React.ComponentProps<typeof ListItem>) =>
+  renderWithProviders(<ListItem {...props} />)
+
+describe('ListItem', () => {
+  let props: React.ComponentProps<typeof ListItem>
+
+  beforeEach(() => {
+    props = {
+      type: 'error',
+      children: <div>mock listitem content</div>,
+    }
+  })
+
+  it('should render correct style - error', () => {
+    const [{ getByText, getByTestId }] = render(props)
+    getByText('mock listitem content')
+    const listItem = getByTestId('ListItem_error')
+    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red3}`)
+    expect(listItem).toHaveStyle(
+      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
+    )
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+  })
+  it('should render correct style - noActive', () => {
+    props.type = 'noActive'
+    const [{ getByText, getByTestId }] = render(props)
+    getByText('mock listitem content')
+    const listItem = getByTestId('ListItem_noActive')
+    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.light1}`)
+    expect(listItem).toHaveStyle(
+      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
+    )
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+  })
+  it('should render correct style - success', () => {
+    props.type = 'success'
+    const [{ getByText, getByTestId }] = render(props)
+    getByText('mock listitem content')
+    const listItem = getByTestId('ListItem_success')
+    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green3}`)
+    expect(listItem).toHaveStyle(
+      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
+    )
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+  })
+  it('should render correct style - warning', () => {
+    props.type = 'warning'
+    const [{ getByText, getByTestId }] = render(props)
+    getByText('mock listitem content')
+    const listItem = getByTestId('ListItem_warning')
+    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow3}`)
+    expect(listItem).toHaveStyle(
+      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
+    )
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+  })
+})

app/src/atoms/ListItem/index.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+
+import { BORDERS, COLORS, Flex, SPACING } from '@opentrons/components'
+
+import type { StyleProps } from '@opentrons/components'
+
+export type ListItemType = 'error' | 'noActive' | 'success' | 'warning'
+
+interface ListItemProps extends StyleProps {
+  /** ListItem state type */
+  type: ListItemType
+  /** ListItem contents */
+  children: React.ReactNode
+}
+
+const LISTITEM_PROPS_BY_TYPE: Record<
+  ListItemType,
+  { backgroundColor: string }
+> = {
+  error: {
+    backgroundColor: COLORS.red3,
+  },
+  noActive: {
+    backgroundColor: COLORS.light1,
+  },
+  success: {
+    backgroundColor: COLORS.green3,
+  },
+  warning: {
+    backgroundColor: COLORS.yellow3,
+  },
+}
+
+export function ListItem(props: ListItemProps): JSX.Element {
+  const { type, children, ...styleProps } = props
+  const listItemProps = LISTITEM_PROPS_BY_TYPE[type]
+
+  return (
+    <Flex
+      data-testid={`ListItem_${type}`}
+      width="100%"
+      height="max-content"
+      padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+      backgroundColor={listItemProps.backgroundColor}
+      borderRadius={BORDERS.borderRadiusSize3}
+      {...styleProps}
+    >
+      {children}
+    </Flex>
+  )
+}

app/src/organisms/EstopModal/EstopPressedModal.tsx

@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
-  BORDERS,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -17,6 +16,7 @@ import {
 
 import { Banner } from '../../atoms/Banner'
 import { Chip } from '../../atoms/Chip'
+import { ListItem } from '../../atoms/ListItem'
 import { SmallButton } from '../../atoms/buttons'
 import { StyledText } from '../../atoms/text'
 import { LegacyModal } from '../../molecules/LegacyModal'
@@ -72,10 +72,8 @@ function TouchscreenModal({
         <StyledText as="p" fontWeight>
           {t('estop_pressed_description')}
         </StyledText>
-        <Flex
-          backgroundColor={isEngaged ? COLORS.red3 : COLORS.green3}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-          borderRadius={BORDERS.borderRadiusSize3}
+        <ListItem
+          type={isEngaged ? 'error' : 'success'}
           flexDirection={DIRECTION_ROW}
           justifyContent={JUSTIFY_SPACE_BETWEEN}
           alignItems={ALIGN_CENTER}
@@ -89,7 +87,7 @@ function TouchscreenModal({
             iconName="connection-status"
             background={false}
           />
-        </Flex>
+        </ListItem>
         <SmallButton
           data-testid="Estop_pressed_button"
           width="100%"