@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

package/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx

@@ -1,50 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { DeckInfoLabel } from '..'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING } from '../../../ui-style-constants'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof DeckInfoLabel>) => {
-  return renderWithProviders(<DeckInfoLabel {...props} />)
-}
-
-describe('DeckInfoLabel', () => {
-  let props: ComponentProps<typeof DeckInfoLabel>
-
-  beforeEach(() => {
-    props = {
-      deckLabel: 'A1',
-    }
-  })
-
-  it('should render the proper styles - web style', () => {
-    render(props)
-    const deckInfoLabel = screen.getByTestId('DeckInfoLabel_A1')
-    expect(deckInfoLabel).toHaveStyle(
-      `padding: ${SPACING.spacing2} ${SPACING.spacing4}`
-    )
-    expect(deckInfoLabel).toHaveStyle(`height: ${SPACING.spacing20}`)
-    expect(deckInfoLabel).toHaveStyle('width: max-content')
-    expect(deckInfoLabel).toHaveStyle(`border: 1px solid ${COLORS.black90}`)
-    expect(deckInfoLabel).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-  })
-
-  it.todo('should render the proper styles - odd style')
-
-  it('should render deck label', () => {
-    render(props)
-    screen.getByText('A1')
-  })
-
-  it('should render an icon', () => {
-    props = {
-      iconName: 'ot-temperature-v2',
-    }
-    render(props)
-    screen.getByLabelText(props.iconName)
-  })
-})

package/src/molecules/DeckInfoLabel/index.tsx

@@ -1,95 +0,0 @@
-import styled from 'styled-components'
-
-import { StyledText } from '../../atoms'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-
-import type { IconName, ModuleIconName } from '../../icons'
-import type { StyleProps } from '../../primitives'
-
-interface DeckLabelProps extends StyleProps {
-  /** deck label to display */
-  deckLabel: string
-  iconName?: IconName
-}
-
-interface HardwareIconProps extends StyleProps {
-  /** hardware icon name */
-  iconName: ModuleIconName | 'stacked'
-  deckLabel?: string
-}
-
-// type union requires one of deckLabel or iconName, but not both
-export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & {
-  highlight?: boolean
-  svgSize?: string | number
-}
-
-export const DeckInfoLabel = styled(DeckInfoLabelComponent)`
-  align-items: ${ALIGN_CENTER};
-  background-color: ${props =>
-    props.highlight ?? false ? COLORS.blue50 : 'inherit'};
-  border: 1px solid
-    ${props => (props.highlight ?? false ? 'transparent' : COLORS.black90)};
-  width: ${props => props.width ?? 'max-content'};
-  padding: ${SPACING.spacing2} ${SPACING.spacing4};
-  border-radius: ${BORDERS.borderRadius8};
-  justify-content: ${JUSTIFY_CENTER};
-  height: ${props =>
-    props.height ?? SPACING.spacing20}; // prevents the icon from being squished
-
-  > svg {
-    height: ${props => props.svgSize ?? '0.875rem'};
-    width: ${props => props.svgSize ?? '0.875rem'};
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    border-width: 2px;
-    border-radius: ${BORDERS.borderRadius12};
-    height: ${props => props.height ?? SPACING.spacing32};
-    padding: ${SPACING.spacing4}
-      ${props =>
-        props.deckLabel != null ? SPACING.spacing8 : SPACING.spacing6};
-    > svg {
-      height: ${props => props.svgSize ?? '1.25rem'};
-      width: ${props => props.svgSize ?? '1.25rem'};
-    }
-  }
-`
-
-function DeckInfoLabelComponent({
-  deckLabel,
-  iconName,
-  highlight = false,
-  ...styleProps
-}: DeckInfoLabelProps): JSX.Element {
-  return (
-    <Flex
-      data-testid={
-        deckLabel != null
-          ? `DeckInfoLabel_${deckLabel}`
-          : `DeckInfoLabel_${iconName}`
-      }
-      {...styleProps}
-    >
-      {iconName != null ? (
-        <Icon
-          name={iconName}
-          color={highlight ? COLORS.white : COLORS.black90}
-          aria-label={iconName}
-        />
-      ) : (
-        <StyledText
-          desktopStyle="captionBold"
-          oddStyle="smallBodyTextBold"
-          color={highlight ? COLORS.white : COLORS.black90}
-        >
-          {deckLabel}
-        </StyledText>
-      )}
-    </Flex>
-  )
-}

package/src/molecules/DeckLabel/DeckLabel.stories.tsx

@@ -1,31 +0,0 @@
-import { DeckLabel as DeckLabelComponent } from '.'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof DeckLabelComponent> = {
-  title: 'Helix/Molecules/DeckLabel',
-  component: DeckLabelComponent,
-  argTypes: {
-    isSelected: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    isLast: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-}
-export default meta
-
-type Story = StoryObj<typeof DeckLabelComponent>
-
-export const DeckLabel: Story = {
-  args: {
-    text: 'Label',
-    isSelected: false,
-    isLast: true,
-  },
-}

package/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx

@@ -1,71 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { DeckLabel } from '..'
-import { COLORS } from '../../../helix-design-system'
-import { FLEX_MAX_CONTENT } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING } from '../../../ui-style-constants'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof DeckLabel>) => {
-  return renderWithProviders(<DeckLabel {...props} />)
-}
-
-describe('DeckLabel', () => {
-  let props: ComponentProps<typeof DeckLabel>
-
-  beforeEach(() => {
-    props = {
-      text: 'mock DeckLabel text',
-      isSelected: false,
-      isLast: true,
-      isZoomed: true,
-    }
-  })
-
-  it('should render text and styles isSelected - false', () => {
-    render(props)
-    screen.getByText('mock DeckLabel text')
-    const deckLabel = screen.getByTestId('DeckLabel_UnSelected')
-    expect(deckLabel).toHaveStyle(`padding: ${SPACING.spacing2}`)
-    expect(deckLabel).toHaveStyle(`width: ${FLEX_MAX_CONTENT}`)
-    expect(deckLabel).toHaveStyle(`color: ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-right: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-bottom: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-left: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`background-color: ${COLORS.white}`)
-  })
-
-  it('should render text and styles isSelected - false not last', () => {
-    props = {
-      ...props,
-      isLast: false,
-    }
-    render(props)
-    screen.getByText('mock DeckLabel text')
-    const deckLabel = screen.getByTestId('DeckLabel_UnSelected')
-    expect(deckLabel).toHaveStyle(`padding: ${SPACING.spacing2}`)
-    expect(deckLabel).toHaveStyle(`width: ${FLEX_MAX_CONTENT}`)
-    expect(deckLabel).toHaveStyle(`color: ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-right: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-left: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`background-color: ${COLORS.white}`)
-  })
-
-  it('should render text and styles isSelected - true', () => {
-    props = {
-      ...props,
-      isSelected: true,
-    }
-    render(props)
-    screen.getByText('mock DeckLabel text')
-    const deckLabel = screen.getByTestId('DeckLabel_Selected')
-    expect(deckLabel).toHaveStyle(`padding: ${SPACING.spacing2}`)
-    expect(deckLabel).toHaveStyle(`width: ${FLEX_MAX_CONTENT}`)
-    expect(deckLabel).toHaveStyle(`color: ${COLORS.white}`)
-    expect(deckLabel).toHaveStyle(`border: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`background-color: ${COLORS.blue50}`)
-  })
-})

package/src/molecules/DeckLabel/index.tsx

@@ -1,84 +0,0 @@
-import { css } from 'styled-components'
-
-import { getModuleType } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms'
-import { COLORS } from '../../helix-design-system'
-import { ModuleIcon } from '../../icons'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER, FLEX_MAX_CONTENT } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { ModuleModel } from '@opentrons/shared-data'
-
-export interface DeckLabelProps {
-  isZoomed: boolean
-  text: string
-  isSelected: boolean
-  moduleModel?: ModuleModel
-  maxWidth?: string
-  labelBorderRadius?: string
-  isLast?: boolean
-}
-
-export function DeckLabel({
-  text,
-  isSelected,
-  labelBorderRadius,
-  moduleModel,
-  maxWidth = FLEX_MAX_CONTENT,
-  isLast = false,
-  isZoomed,
-}: DeckLabelProps): JSX.Element {
-  const DECK_LABEL_BASE_STYLE = (
-    labelBorderRadius?: string
-  ): FlattenSimpleInterpolation => css`
-    width: ${FLEX_MAX_CONTENT};
-    max-width: ${maxWidth};
-    padding: ${SPACING.spacing2};
-    border-radius: ${labelBorderRadius ?? '0'};
-  `
-  const DECK_LABEL_SELECTED_STYLE = (
-    labelBorderRadius?: string
-  ): FlattenSimpleInterpolation => css`
-    ${DECK_LABEL_BASE_STYLE(labelBorderRadius)}
-    color: ${COLORS.white};
-    border: 1.5px solid ${COLORS.blue50};
-    background-color: ${COLORS.blue50};
-  `
-
-  const DECK_LABEL_UNSELECTED_STYLE = (
-    labelBorderRadius?: string,
-    isLast?: boolean
-  ): FlattenSimpleInterpolation => css`
-    ${DECK_LABEL_BASE_STYLE(labelBorderRadius)}
-    color: ${COLORS.blue50};
-    border-right: 1.5px solid ${COLORS.blue50};
-    border-bottom: 1.5px solid ${COLORS.blue50};
-    border-left: 1.5px solid ${COLORS.blue50};
-    background-color: ${COLORS.white};
-    border-radius: ${isLast ? labelBorderRadius : '0'};
-  `
-
-  return (
-    <Flex
-      fontSize={isZoomed ? '6px' : '18px'}
-      data-testid={`DeckLabel_${isSelected ? 'Selected' : 'UnSelected'}`}
-      css={
-        isSelected
-          ? DECK_LABEL_SELECTED_STYLE(labelBorderRadius)
-          : DECK_LABEL_UNSELECTED_STYLE(labelBorderRadius, isLast)
-      }
-    >
-      <Flex gridGap={SPACING.spacing2} alignItems={ALIGN_CENTER}>
-        {moduleModel != null && isZoomed ? (
-          <ModuleIcon size="0.5rem" moduleType={getModuleType(moduleModel)} />
-        ) : null}
-        <StyledText color={isSelected ? COLORS.white : COLORS.blue50}>
-          {text}
-        </StyledText>
-      </Flex>
-    </Flex>
-  )
-}

package/src/molecules/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,30 +0,0 @@
-import { DropdownMenu as DropdownMenuComponent } from '.'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import type { DropdownOption } from '.'
-
-function createMockOptions(): DropdownOption[] {
-  const options: DropdownOption[] = []
-  for (let i = 1; i <= 100; i++) {
-    options.push({ name: `option ${i}`, value: `${i}` })
-  }
-  return options
-}
-
-const mockOptions: DropdownOption[] = createMockOptions()
-
-const meta: Meta<typeof DropdownMenuComponent> = {
-  title: 'Helix/Molecules/DropdownMenu',
-  component: DropdownMenuComponent,
-}
-export default meta
-
-type Story = StoryObj<typeof DropdownMenuComponent>
-
-export const DropdownMenu: Story = {
-  args: {
-    filterOptions: mockOptions,
-    onClick: () => {},
-    currentOption: mockOptions[0],
-  },
-}

package/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx

@@ -1,86 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { DropdownMenu } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-import type { DropdownOption } from '..'
-
-const mockOptions: DropdownOption[] = [
-  { name: 'Option 1', value: 'option1' },
-  { name: 'Option 2', value: 'option2' },
-  { name: 'Option 3', value: 'option3' },
-]
-
-const mockOnClick = vi.fn()
-
-const render = (props: ComponentProps<typeof DropdownMenu>) => {
-  return renderWithProviders(<DropdownMenu {...props} />)
-}
-
-describe('DropdownMenu', () => {
-  let props: ComponentProps<typeof DropdownMenu>
-
-  beforeEach(() => {
-    props = {
-      filterOptions: mockOptions,
-      onClick: mockOnClick,
-      currentOption: mockOptions[0],
-    }
-  })
-
-  it('renders with default props', () => {
-    render(props)
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-  })
-
-  it('renders with custom props', () => {
-    props = {
-      filterOptions: mockOptions,
-      onClick: mockOnClick,
-      currentOption: mockOptions[0],
-      dropdownType: 'neutral',
-      title: 'Custom Dropdown',
-      caption: 'Select an option',
-      tooltipText: 'This is a tooltip',
-    }
-    render(props)
-
-    expect(screen.getByText('Custom Dropdown')).toBeInTheDocument()
-    expect(screen.getByText('Select an option')).toBeInTheDocument()
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-  })
-
-  it('opens dropdown menu on click', () => {
-    render(props)
-    fireEvent.click(screen.getByText('Option 1'))
-    expect(screen.getByText('Option 2')).toBeInTheDocument()
-    expect(screen.getByText('Option 3')).toBeInTheDocument()
-  })
-
-  it('calls onClick when an option is selected', () => {
-    render(props)
-    fireEvent.click(screen.getByText('Option 1'))
-    fireEvent.click(screen.getByText('Option 2'))
-
-    expect(mockOnClick).toHaveBeenCalledWith('option2')
-  })
-
-  // ToDo (kk:08/13/2024) activate when jsdom is updated
-  //   it('renders tooltip when tooltipText is provided', () => {
-  //     props = {
-  //       filterOptions: mockOptions,
-  //       onClick: mockOnClick,
-  //       currentOption: mockOptions[0],
-  //       title: 'With Tooltip',
-  //       tooltipText: 'Tooltip content',
-  //     }
-  //     render(props)
-
-  //     expect(screen.getByText('With Tooltip')).toBeInTheDocument()
-  //     const infoIcon = screen.getByTestId('information_icon')
-  //     fireEvent.mouseOver(infoIcon)
-  //     expect(screen.getByText('Tooltip content')).toBeInTheDocument()
-  //   })
-})