add sotry to ListItemcustomize

components/src/atoms/ListItem/ListItem.stories.tsx

@@ -4,10 +4,9 @@ import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { DIRECTION_COLUMN } from '../../styles'
 import { Flex } from '../../primitives'
 import { LegacyStyledText } from '../StyledText'
-import { ListItemDescriptor, ListItemCustomize } from './ListItemChildren'
-import { ListItem as ListItemComponent } from './index'
-import sampleImg from '../../images/labware/measurement-guide/images/depth/[email protected]'
-
+import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor'
+import { ListItem as ListItemComponent, ListItemCustomize } from '.'
+import exampleImage from '../../images/labware/measurement-guide/images/spacing/[email protected]'
 import type { Meta, StoryObj } from '@storybook/react'
 import type { DropdownMenuProps } from '../../molecules'
 
@@ -73,28 +72,26 @@ export const ListItemDescriptorMini: Story = {
     ),
   },
 }
-
-const exampleDropDown: DropdownMenuProps = {
-  dropdownType: 'neutral',
-  onClick: () => {},
-  currentOption: { name: 'option 1', value: '1' },
+const dropdownProps: DropdownMenuProps = {
   filterOptions: [
-    { name: 'option 1', value: '1' },
-    { name: 'option 2', value: '2' },
+    { name: '1', value: '1' },
+    { name: '2', value: '2' },
   ],
+  onClick: () => {},
+  currentOption: { name: '1', value: '1' },
+  dropdownType: 'neutral',
 }
-
-export const ListItemCustomizeDefault: Story = {
+export const ListItemCustomizeImage: Story = {
   args: {
     type: 'noActive',
     children: (
       <ListItemCustomize
         header="Header"
-        onClick={() => {}}
-        dropdown={exampleDropDown}
+        leftHeaderItem={<img width="60px" height="60px" src={exampleImage} />}
+        linkText="Link text"
         label="Label"
-        image={<img src={sampleImg} height="60px" width="60px" />}
-        linkText="Text"
+        dropdown={dropdownProps}
+        onClick={() => {}}
       />
     ),
   },

components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -5,35 +5,54 @@ import { Flex, Link } from '../../../primitives'
 import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { StyledText } from '../../StyledText'
 import { DropdownMenu } from '../../../molecules/DropdownMenu'
+import { Tag } from '../../Tag/index'
 import type { DropdownMenuProps } from '../../../molecules/DropdownMenu'
+import type { TagProps } from '../../Tag/index'
 interface ListItemCustomizeProps {
   header: string
-  image?: JSX.Element
-  label?: string
-  linkText?: string
+  //  this is either an image or an icon
+  leftHeaderItem?: JSX.Element
   onClick?: () => void
+  linkText?: string
+  //  these are the middle prop options
+  label?: string
   dropdown?: DropdownMenuProps
+  tag?: TagProps
 }
 
 export const ListItemCustomize = (
   props: ListItemCustomizeProps
 ): JSX.Element => {
-  const { header, image, onClick, label, linkText, dropdown } = props
+  const {
+    header,
+    leftHeaderItem,
+    onClick,
+    label,
+    linkText,
+    dropdown,
+    tag,
+  } = props
   return (
     <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
       <Flex gridGap={SPACING.spacing8} width="50%" alignItems={ALIGN_CENTER}>
-        {image != null ? <Flex size="3.75rem">{image}</Flex> : null}
+        {leftHeaderItem != null ? (
+          <Flex size="3.75rem">{leftHeaderItem}</Flex>
+        ) : null}
         <StyledText desktopStyle="bodyDefaultSemiBold">{header}</StyledText>
       </Flex>
       <Flex
         width={onClick != null && linkText != null ? '40%' : '50%'}
         gridGap={SPACING.spacing8}
         alignItems={ALIGN_CENTER}
+        justifyContent="center"
       >
-        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-          {label}
-        </StyledText>
+        {label != null ? (
+          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+            {label}
+          </StyledText>
+        ) : null}
         {dropdown != null ? <DropdownMenu {...dropdown} /> : null}
+        {tag != null ? <Tag {...tag} /> : null}
       </Flex>
       {onClick != null && linkText != null ? (
         <Flex width="10%" textDecoration={TYPOGRAPHY.textDecorationUnderline}>

components/src/atoms/Tag/index.tsx

@@ -11,7 +11,7 @@ import type { IconName } from '../../icons'
 
 export type TagType = 'default' | 'interactive' | 'branded'
 
-interface TagProps {
+export interface TagProps {
   /** Tag content */
   text: string
   /** name constant of the text color and the icon color to display */

protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx

@@ -92,7 +92,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
                     )
                   }}
                   header={t(`${ae}`)}
-                  image={
+                  leftHeaderItem={
                     <AdditionalEquipmentDiagram additionalEquipment={ae} />
                   }
                 />

protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx

@@ -244,7 +244,7 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
                           setValue('modules', updatedModules)
                         }}
                         header={getModuleDisplayName(module.model)}
-                        image={
+                        leftHeaderItem={
                           <ModuleDiagram
                             type={module.type}
                             model={module.model}