From 3e9314ee691fbb495ec71a0f4efa8027b558646e Mon Sep 17 00:00:00 2001 From: Jethary Alcid <66035149+jerader@users.noreply.github.com> Date: Fri, 9 Aug 2024 09:22:10 -0400 Subject: [PATCH] feat(components, app): move ListItem and create a ListItem child (#15902) closes AUTH-623 AUTH-628 --- .../EmergencyStop/EstopPressedModal.tsx | 6 +-- .../IncompatibleModuleODDModalBody.tsx | 6 +-- .../organisms/QuickTransferFlow/Overview.tsx | 10 ++--- .../BaseSettings.tsx | 18 ++++---- .../QuickTransferAdvancedSettings/index.tsx | 33 +++++++-------- .../QuickTransferFlow/TipManagement/index.tsx | 16 +++---- .../src/atoms/ListItem/ListItem.stories.tsx | 42 +++++++++++++++---- .../ListItemChildren/ListItemDescriptor.tsx | 36 ++++++++++++++++ .../ListItem/__tests__/ListItem.test.tsx | 28 +++++-------- .../src/atoms/ListItem/index.tsx | 32 ++++++++++---- components/src/atoms/index.ts | 1 + 11 files changed, 148 insertions(+), 80 deletions(-) rename {app => components}/src/atoms/ListItem/ListItem.stories.tsx (55%) create mode 100644 components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx rename {app => components}/src/atoms/ListItem/__tests__/ListItem.test.tsx (78%) rename {app => components}/src/atoms/ListItem/index.tsx (54%) diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx index 0c7d190e172..0047f3c9dee 100644 --- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx +++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx @@ -13,10 +13,11 @@ import { Icon, JUSTIFY_FLEX_END, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, + ListItem, + Modal, PrimaryButton, SPACING, - Modal, - LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -24,7 +25,6 @@ import { useAcknowledgeEstopDisengageMutation } from '@opentrons/react-api-clien import { getTopPortalEl } from '../../App/portal' import { Banner } from '../../atoms/Banner' -import { ListItem } from '../../atoms/ListItem' import { SmallButton } from '../../atoms/buttons' import { OddModal } from '../../molecules/OddModal' import { getIsOnDevice } from '../../redux/config' diff --git a/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx b/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx index a54f63268fe..4b84490f83a 100644 --- a/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx +++ b/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx @@ -4,14 +4,14 @@ import capitalize from 'lodash/capitalize' import { DIRECTION_COLUMN, Flex, - SPACING, LegacyStyledText, - TYPOGRAPHY, + ListItem, OVERFLOW_SCROLL, + SPACING, + TYPOGRAPHY, } from '@opentrons/components' import { getModuleDisplayName } from '@opentrons/shared-data' import { OddModal } from '../../molecules/OddModal' -import { ListItem } from '../../atoms/ListItem' import type { AttachedModule } from '@opentrons/api-client' import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types' export interface IncompatibleModuleODDModalBodyProps { diff --git a/app/src/organisms/QuickTransferFlow/Overview.tsx b/app/src/organisms/QuickTransferFlow/Overview.tsx index a71bf2004f6..5840e745f77 100644 --- a/app/src/organisms/QuickTransferFlow/Overview.tsx +++ b/app/src/organisms/QuickTransferFlow/Overview.tsx @@ -1,16 +1,16 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { + COLORS, + DIRECTION_COLUMN, Flex, + JUSTIFY_SPACE_BETWEEN, LegacyStyledText, + ListItem, SPACING, - TYPOGRAPHY, - DIRECTION_COLUMN, - JUSTIFY_SPACE_BETWEEN, - COLORS, TEXT_ALIGN_RIGHT, + TYPOGRAPHY, } from '@opentrons/components' -import { ListItem } from '../../atoms/ListItem' import { CONSOLIDATE, DISTRIBUTE } from './constants' import type { QuickTransferSummaryState } from './types' diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx index 84de0e472a5..9f300b335ad 100644 --- a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx +++ b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx @@ -1,19 +1,19 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { - Flex, - StyledText, - SPACING, - TYPOGRAPHY, - DIRECTION_COLUMN, - JUSTIFY_SPACE_BETWEEN, + ALIGN_CENTER, COLORS, - TEXT_ALIGN_RIGHT, + DIRECTION_COLUMN, + Flex, Icon, + JUSTIFY_SPACE_BETWEEN, + ListItem, SIZE_2, - ALIGN_CENTER, + SPACING, + StyledText, + TEXT_ALIGN_RIGHT, + TYPOGRAPHY, } from '@opentrons/components' -import { ListItem } from '../../../atoms/ListItem' import { FlowRateEntry } from './FlowRate' import { PipettePath } from './PipettePath' diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx index 34a36d2d4fb..2521cc900ca 100644 --- a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx +++ b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx @@ -1,27 +1,26 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { - Flex, - SPACING, - DIRECTION_COLUMN, - JUSTIFY_SPACE_BETWEEN, - TYPOGRAPHY, ALIGN_CENTER, COLORS, - TEXT_ALIGN_RIGHT, - StyledText, + DIRECTION_COLUMN, + Flex, Icon, + JUSTIFY_SPACE_BETWEEN, + ListItem, SIZE_2, + SPACING, + StyledText, TEXT_ALIGN_LEFT, + TEXT_ALIGN_RIGHT, + TYPOGRAPHY, } from '@opentrons/components' - -import type { - QuickTransferSummaryAction, - QuickTransferSummaryState, -} from '../types' +import { + TRASH_BIN_ADAPTER_FIXTURE, + WASTE_CHUTE_FIXTURES, +} from '@opentrons/shared-data' import { ACTIONS } from '../constants' import { useToaster } from '../../../organisms/ToasterOven' -import { ListItem } from '../../../atoms/ListItem' import { FlowRateEntry } from './FlowRate' import { PipettePath } from './PipettePath' import { TipPositionEntry } from './TipPosition' @@ -30,11 +29,11 @@ import { Delay } from './Delay' import { TouchTip } from './TouchTip' import { AirGap } from './AirGap' import { BlowOut } from './BlowOut' -import { - TRASH_BIN_ADAPTER_FIXTURE, - WASTE_CHUTE_FIXTURES, -} from '@opentrons/shared-data' +import type { + QuickTransferSummaryAction, + QuickTransferSummaryState, +} from '../types' interface QuickTransferAdvancedSettingsProps { state: QuickTransferSummaryState dispatch: React.Dispatch diff --git a/app/src/organisms/QuickTransferFlow/TipManagement/index.tsx b/app/src/organisms/QuickTransferFlow/TipManagement/index.tsx index 72510c9fd02..adbd698bc5a 100644 --- a/app/src/organisms/QuickTransferFlow/TipManagement/index.tsx +++ b/app/src/organisms/QuickTransferFlow/TipManagement/index.tsx @@ -1,20 +1,20 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { + ALIGN_CENTER, + COLORS, + DIRECTION_COLUMN, Flex, + Icon, + JUSTIFY_SPACE_BETWEEN, LegacyStyledText, + ListItem, + SIZE_2, SPACING, - TYPOGRAPHY, - DIRECTION_COLUMN, - JUSTIFY_SPACE_BETWEEN, - COLORS, TEXT_ALIGN_RIGHT, - Icon, - SIZE_2, - ALIGN_CENTER, + TYPOGRAPHY, } from '@opentrons/components' import { TRASH_BIN_ADAPTER_FIXTURE } from '@opentrons/shared-data' -import { ListItem } from '../../../atoms/ListItem' import { ChangeTip } from './ChangeTip' import { TipDropLocation } from './TipDropLocation' diff --git a/app/src/atoms/ListItem/ListItem.stories.tsx b/components/src/atoms/ListItem/ListItem.stories.tsx similarity index 55% rename from app/src/atoms/ListItem/ListItem.stories.tsx rename to components/src/atoms/ListItem/ListItem.stories.tsx index 658dd3f283e..7a0656af415 100644 --- a/app/src/atoms/ListItem/ListItem.stories.tsx +++ b/components/src/atoms/ListItem/ListItem.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react' -import { - DIRECTION_COLUMN, - Flex, - SPACING, - LegacyStyledText, - VIEWPORT, -} from '@opentrons/components' + +import { SPACING, VIEWPORT } from '../../ui-style-constants' +import { DIRECTION_COLUMN } from '../../styles' +import { Flex } from '../../primitives' +import { LegacyStyledText } from '../StyledText' +import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor' import { ListItem as ListItemComponent } from '.' + import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { - title: 'ODD/Atoms/ListItem', + title: 'Library/Atoms/ListItem', component: ListItemComponent, argTypes: { type: { @@ -45,3 +45,29 @@ export const ListItem: Story = { ), }, } + +export const ListItemDescriptorDefault: Story = { + args: { + type: 'noActive', + children: ( + mock content} + description={
mock description
} + /> + ), + }, +} + +export const ListItemDescriptorMini: Story = { + args: { + type: 'noActive', + children: ( + mock content} + description={
mock description
} + /> + ), + }, +} diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx new file mode 100644 index 00000000000..a6512a895fe --- /dev/null +++ b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx @@ -0,0 +1,36 @@ +import * as React from 'react' +import { Flex } from '../../../primitives' +import { + DIRECTION_ROW, + FLEX_AUTO, + JUSTIFY_SPACE_BETWEEN, +} from '../../../styles' +import { SPACING } from '../../../ui-style-constants' + +interface ListItemDescriptorProps { + type: 'default' | 'mini' + description: JSX.Element + content: JSX.Element +} + +export const ListItemDescriptor = ( + props: ListItemDescriptorProps +): JSX.Element => { + const { description, content, type } = props + return ( + + {description} + {content} + + ) +} diff --git a/app/src/atoms/ListItem/__tests__/ListItem.test.tsx b/components/src/atoms/ListItem/__tests__/ListItem.test.tsx similarity index 78% rename from app/src/atoms/ListItem/__tests__/ListItem.test.tsx rename to components/src/atoms/ListItem/__tests__/ListItem.test.tsx index bad57f423aa..ed8ffcee095 100644 --- a/app/src/atoms/ListItem/__tests__/ListItem.test.tsx +++ b/components/src/atoms/ListItem/__tests__/ListItem.test.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import { vi, describe, it, expect, beforeEach } from 'vitest' import '@testing-library/jest-dom/vitest' import { fireEvent, screen } from '@testing-library/react' -import { BORDERS, COLORS, SPACING } from '@opentrons/components' -import { renderWithProviders } from '../../../__testing-utils__' +import { renderWithProviders } from '../../../testing/utils' +import { BORDERS, COLORS } from '../../../helix-design-system' import { ListItem } from '..' @@ -26,10 +26,8 @@ describe('ListItem', () => { screen.getByText('mock listitem content') const listItem = screen.getByTestId('ListItem_error') expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red35}`) - expect(listItem).toHaveStyle( - `padding: ${SPACING.spacing16} ${SPACING.spacing24}` - ) - expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`) + expect(listItem).toHaveStyle(`padding: 0`) + expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`) }) it('should render correct style - noActive', () => { props.type = 'noActive' @@ -37,10 +35,8 @@ describe('ListItem', () => { screen.getByText('mock listitem content') const listItem = screen.getByTestId('ListItem_noActive') expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey35}`) - expect(listItem).toHaveStyle( - `padding: ${SPACING.spacing16} ${SPACING.spacing24}` - ) - expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`) + expect(listItem).toHaveStyle(`padding: 0`) + expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`) }) it('should render correct style - success', () => { props.type = 'success' @@ -48,10 +44,8 @@ describe('ListItem', () => { screen.getByText('mock listitem content') const listItem = screen.getByTestId('ListItem_success') expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green35}`) - expect(listItem).toHaveStyle( - `padding: ${SPACING.spacing16} ${SPACING.spacing24}` - ) - expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`) + expect(listItem).toHaveStyle(`padding: 0`) + expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`) }) it('should render correct style - warning', () => { props.type = 'warning' @@ -59,10 +53,8 @@ describe('ListItem', () => { screen.getByText('mock listitem content') const listItem = screen.getByTestId('ListItem_warning') expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow35}`) - expect(listItem).toHaveStyle( - `padding: ${SPACING.spacing16} ${SPACING.spacing24}` - ) - expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`) + expect(listItem).toHaveStyle(`padding: 0`) + expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`) }) it('should call on click when pressed', () => { render(props) diff --git a/app/src/atoms/ListItem/index.tsx b/components/src/atoms/ListItem/index.tsx similarity index 54% rename from app/src/atoms/ListItem/index.tsx rename to components/src/atoms/ListItem/index.tsx index 1628c19eb2b..8ff88ac0b9d 100644 --- a/app/src/atoms/ListItem/index.tsx +++ b/components/src/atoms/ListItem/index.tsx @@ -1,8 +1,10 @@ import * as React from 'react' - -import { BORDERS, COLORS, Flex, SPACING } from '@opentrons/components' - -import type { StyleProps } from '@opentrons/components' +import { css } from 'styled-components' +import { Flex } from '../../primitives' +import { RESPONSIVENESS, SPACING } from '../../ui-style-constants' +import { BORDERS, COLORS } from '../../helix-design-system' +import { FLEX_MAX_CONTENT } from '../../styles' +import type { StyleProps } from '../../primitives' export type ListItemType = 'error' | 'noActive' | 'success' | 'warning' @@ -32,19 +34,31 @@ const LISTITEM_PROPS_BY_TYPE: Record< }, } +/* + ListItem is used in ODD and helix +**/ export function ListItem(props: ListItemProps): JSX.Element { const { type, children, onClick, ...styleProps } = props const listItemProps = LISTITEM_PROPS_BY_TYPE[type] + const LIST_ITEM_STYLE = css` + background-color: ${listItemProps.backgroundColor}; + width: 100%; + height: ${FLEX_MAX_CONTENT}; + padding: 0; + border-radius: ${BORDERS.borderRadius4}; + + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + padding: ${SPACING.spacing16} ${SPACING.spacing24}; + border-radius: ${BORDERS.borderRadius12}; + } + ` + return ( {children} diff --git a/components/src/atoms/index.ts b/components/src/atoms/index.ts index a4f5ef8f3fc..ee324d2e07e 100644 --- a/components/src/atoms/index.ts +++ b/components/src/atoms/index.ts @@ -2,6 +2,7 @@ export * from './buttons' export * from './Checkbox' export * from './CheckboxField' export * from './Chip' +export * from './ListItem' export * from './StepMeter' export * from './StepMeter' export * from './StyledText'