@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.18

package/src/molecules/DeckInfoLabel/index.tsx

@@ -0,0 +1,95 @@
+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 { ModuleIconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+interface DeckLabelProps extends StyleProps {
+  /** deck label to display */
+  deckLabel: string
+  iconName?: undefined
+}
+
+interface HardwareIconProps extends StyleProps {
+  /** hardware icon name */
+  iconName: ModuleIconName | 'stacked'
+  deckLabel?: undefined
+}
+
+// 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

@@ -0,0 +1,31 @@
+import { DeckLabel as DeckLabelComponent } from '.'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof DeckLabelComponent> = {
+  title: 'Library/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

@@ -0,0 +1,69 @@
+import type * as React from 'react'
+import { screen } from '@testing-library/react'
+import { describe, it, beforeEach, expect } from 'vitest'
+
+import { COLORS } from '../../../helix-design-system'
+import { SPACING } from '../../../ui-style-constants'
+import { FLEX_MAX_CONTENT } from '../../../styles'
+import { renderWithProviders } from '../../../testing/utils'
+import { DeckLabel } from '..'
+
+const render = (props: React.ComponentProps<typeof DeckLabel>) => {
+  return renderWithProviders(<DeckLabel {...props} />)
+}
+
+describe('DeckLabel', () => {
+  let props: React.ComponentProps<typeof DeckLabel>
+
+  beforeEach(() => {
+    props = {
+      text: 'mock DeckLabel text',
+      isSelected: false,
+      isLast: 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

@@ -0,0 +1,80 @@
+import { css } from 'styled-components'
+import { getModuleType } from '@opentrons/shared-data'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, FLEX_MAX_CONTENT } from '../../styles'
+import { COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
+import { StyledText } from '../../atoms'
+import { ModuleIcon } from '../../icons'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ModuleModel } from '@opentrons/shared-data'
+
+export interface DeckLabelProps {
+  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,
+}: 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="6px"
+      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 ? (
+          <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

@@ -0,0 +1,30 @@
+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: 'App/Atoms/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

@@ -0,0 +1,85 @@
+import type * as React from 'react'
+import { screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { DropdownMenu } from '..'
+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: React.ComponentProps<typeof DropdownMenu>) => {
+  return renderWithProviders(<DropdownMenu {...props} />)
+}
+
+describe('DropdownMenu', () => {
+  let props: React.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()
+  //   })
+})