Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/assets/images/single_center_slot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/assets/images/single_left_slot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/assets/images/single_right_slot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions app/src/molecules/ODDFixtureOption/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import {
ALIGN_CENTER,
COLORS,
Flex,
JUSTIFY_FLEX_END,
JUSTIFY_SPACE_BETWEEN,
ListItem,
SPACING,
StyledText,
} from '@opentrons/components'

import { SmallButton } from '/app/atoms/buttons'

import type { MouseEventHandler } from 'react'

interface ODDFixtureOptionProps {
onClickHandler: MouseEventHandler
secondaryOnClickHandler?: MouseEventHandler
optionName: string
secondaryButtonText?: string
buttonText: string
}
export function ODDFixtureOption(props: ODDFixtureOptionProps): JSX.Element {
const {
onClickHandler,
optionName,
buttonText,
secondaryOnClickHandler,
secondaryButtonText,
} = props
return (
<ListItem
type="default"
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_SPACE_BETWEEN}
backgroundColor={COLORS.grey35}
>
<Flex gridGap={SPACING.spacing24}>
<StyledText oddStyle="bodyTextSemiBold">{optionName}</StyledText>
<Flex gridGap={SPACING.spacing16} justifyContent={JUSTIFY_FLEX_END}>
{secondaryOnClickHandler != null && secondaryButtonText != null ? (
<SmallButton
buttonType="secondary"
onClick={secondaryOnClickHandler}
data-testid={optionName}
buttonText={secondaryButtonText}
buttonCategory="rounded"
/>
) : null}
<SmallButton
onClick={onClickHandler}
data-testid={optionName}
buttonText={buttonText}
buttonCategory="rounded"
/>
</Flex>
</Flex>
</ListItem>
)
}
41 changes: 41 additions & 0 deletions app/src/molecules/ODDFixtureOption/tests/ODDFixtureOption.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { fireEvent, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'

import { renderWithProviders } from '/app/__testing-utils__'

import { ODDFixtureOption } from '..'

import type { ComponentProps } from 'react'

const render = (props: ComponentProps<typeof ODDFixtureOption>) => {
return renderWithProviders(<ODDFixtureOption {...props} />)
}

describe('ODDFixtureOption', () => {
let props: ComponentProps<typeof ODDFixtureOption>

it('should render text and buttons for desktop app', () => {
props = {
onClickHandler: vi.fn(),
optionName: 'mockOption',
buttonText: 'mockText',
}
render(props)
screen.getByText('mockOption')
screen.getByText('mockText')
fireEvent.click(screen.getByTestId('mockOption'))
expect(props.onClickHandler).toHaveBeenCalled()
})
it('should render text and buttons for odd', () => {
props = {
onClickHandler: vi.fn(),
optionName: 'mockOption',
buttonText: 'mockText',
}
render(props)
screen.getByText('mockOption')
screen.getByText('mockText')
fireEvent.click(screen.getByRole('button'))
expect(props.onClickHandler).toHaveBeenCalled()
})
})

This file was deleted.

Loading
Loading