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

package/src/molecules/CustomizeExpandButton/index.tsx

@@ -1,189 +0,0 @@
-import { memo } from 'react'
-import styled, { css } from 'styled-components'
-
-import { CheckboxField } from '../../atoms/CheckboxField'
-import { InputField } from '../../atoms/InputField'
-import { StyledText } from '../../atoms/StyledText'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
-import { CURSOR_POINTER, DIRECTION_COLUMN } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-
-import type {
-  ChangeEvent,
-  ChangeEventHandler,
-  MemoExoticComponent,
-  MouseEvent,
-} from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import type { StyleProps } from '../../primitives'
-
-export interface StackingProps {
-  onInputFieldChange: (e: ChangeEvent<HTMLInputElement>) => void
-  inputFieldValue: number
-  inputTitle: string
-  errorMessage: string
-  inputCaption: string
-  definition: LabwareDefinition2
-  onCheckboxChange?: () => void
-  checked?: boolean
-  checkboxCaption?: string
-}
-
-interface CustomizeExpandButtonProps extends StyleProps {
-  enableStackingFF: boolean
-  allowInputField: boolean
-  loadName: string
-  buttonText: string
-  buttonValue: string | number
-  onChange: ChangeEventHandler<HTMLInputElement>
-  stackingProps?: StackingProps
-  disabled?: boolean
-  isSelected?: boolean
-  id?: string
-}
-
-//  used for helix and as a child button to ListButtonAccordion
-export function CustomizeExpandButtonComponent(
-  props: CustomizeExpandButtonProps
-): JSX.Element {
-  const {
-    buttonText,
-    buttonValue,
-    isSelected = false,
-    onChange,
-    disabled = false,
-    id = buttonText,
-    stackingProps,
-    allowInputField,
-    loadName,
-    enableStackingFF,
-  } = props
-  const isLid =
-    stackingProps != null &&
-    stackingProps.definition.allowedRoles?.includes('lid')
-  const tcLidDef = loadName === 'opentrons_tough_pcr_auto_sealing_lid'
-
-  return (
-    <Flex
-      width="100%"
-      margin={SPACING.spacing4}
-      onClick={(e: MouseEvent) => {
-        e.stopPropagation()
-      }}
-    >
-      <SettingButton
-        checked={isSelected}
-        id={id}
-        disabled={disabled}
-        onChange={e => {
-          onChange(e)
-          e.stopPropagation()
-        }}
-        type="radio"
-        value={buttonValue}
-      />
-      <SettingButtonLabel
-        role="label"
-        isSelected={isSelected}
-        disabled={disabled}
-        htmlFor={id}
-      >
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-          <StyledText desktopStyle="bodyDefaultRegular">
-            {buttonText}
-          </StyledText>
-          {stackingProps != null && enableStackingFF && isSelected ? (
-            <Flex
-              flexDirection={DIRECTION_COLUMN}
-              backgroundColor={COLORS.blue10}
-              padding={`${SPACING.spacing16} ${SPACING.spacing20}`}
-              borderRadius={BORDERS.borderRadius4}
-            >
-              {isLid && !tcLidDef ? (
-                <CheckboxField
-                  onChange={e => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    stackingProps.onCheckboxChange?.()
-                  }}
-                  value={stackingProps.checked}
-                  label={stackingProps.checkboxCaption}
-                />
-              ) : null}
-              {stackingProps.definition.stackLimit != null &&
-              stackingProps.definition.stackLimit > 1 &&
-              allowInputField ? (
-                <InputField
-                  id="CustomizeExpandButton_inputField"
-                  title={stackingProps.inputTitle}
-                  onChange={e => {
-                    e.stopPropagation()
-                    stackingProps.onInputFieldChange(e)
-                  }}
-                  type="number"
-                  error={
-                    !stackingProps.inputFieldValue ||
-                    stackingProps.inputFieldValue >
-                      stackingProps.definition.stackLimit
-                      ? stackingProps.errorMessage
-                      : null
-                  }
-                  value={stackingProps.inputFieldValue}
-                  caption={stackingProps.inputCaption}
-                />
-              ) : null}
-            </Flex>
-          ) : null}
-        </Flex>
-      </SettingButtonLabel>
-    </Flex>
-  )
-}
-
-export const CustomizeExpandButton: MemoExoticComponent<
-  typeof CustomizeExpandButtonComponent
-> = memo(CustomizeExpandButtonComponent)
-
-const SettingButton = styled.input`
-  display: none;
-`
-
-const AVAILABLE_BUTTON_STYLE = css`
-  background: ${COLORS.white};
-  color: ${COLORS.black90};
-
-  &:hover {
-    background-color: ${COLORS.grey10};
-  }
-`
-
-const SELECTED_BUTTON_STYLE = css`
-  background: ${COLORS.blue50};
-  color: ${COLORS.white};
-
-  &:active {
-    background-color: ${COLORS.blue60};
-  }
-`
-
-const DISABLED_STYLE = css`
-  color: ${COLORS.grey40};
-  background-color: ${COLORS.grey10};
-`
-
-interface ButtonLabelProps {
-  isSelected: boolean
-  disabled: boolean
-}
-
-const SettingButtonLabel = styled.label<ButtonLabelProps>`
-  border-radius: ${BORDERS.borderRadius8};
-  cursor: ${CURSOR_POINTER};
-  padding: ${SPACING.spacing12};
-  width: 100%;
-
-  ${({ isSelected }) =>
-    isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-  ${({ disabled }) => disabled && DISABLED_STYLE}
-`

package/src/molecules/DeckInfoLabel/DeckInfoLabel.stories.tsx

@@ -1,69 +0,0 @@
-import { customViewports } from '../../../../.storybook/preview'
-import { DeckInfoLabel } from './index'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof DeckInfoLabel> = {
-  title: 'Helix/Molecules/DeckInfoLabel',
-  argTypes: {
-    iconName: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'ot-magnet-v2',
-        'ot-heater-shaker',
-        'ot-temperature-v2',
-        'ot-magnet-v2',
-        'ot-thermocycler',
-        'ot-absorbance',
-        'stacked',
-      ],
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['default', 'large'],
-    },
-    deckLabel: {
-      control: {
-        type: 'text',
-      },
-      defaultValue: 'A1',
-    },
-  },
-  component: DeckInfoLabel,
-  parameters: {
-    controls: { include: ['highlight', 'iconName', 'deckLabel', 'size'] },
-    viewport: {
-      viewports: customViewports,
-      defaultViewport: 'onDeviceDisplay',
-    },
-  },
-  decorators: [
-    Story => (
-      <div style={{ padding: '16px', width: '15rem', height: '5rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-}
-export default meta
-type Story = StoryObj<typeof DeckInfoLabel>
-
-export const DisplaySlot: Story = {
-  args: {
-    deckLabel: 'A1',
-    iconName: undefined,
-    highlight: false,
-  },
-}
-
-export const DisplayIcon: Story = {
-  args: {
-    deckLabel: undefined,
-    iconName: 'ot-temperature-v2',
-    highlight: false,
-  },
-}

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

@@ -1,54 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { DeckInfoLabel } from '../index'
-
-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.className).toContain('label')
-    expect(deckInfoLabel.className).toContain('deck_info_label_no_highlight')
-    expect(deckInfoLabel.className).toContain('default')
-  })
-
-  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('ot-temperature-v2')
-  })
-
-  it('should render an icon large', () => {
-    props = {
-      iconName: 'ot-temperature-v2',
-      size: 'large',
-    }
-    render(props)
-    const deckInfoLabelIcon = screen.getByLabelText('ot-temperature-v2')
-    expect(deckInfoLabelIcon).toHaveStyle('height: 1.5rem')
-  })
-})

package/src/molecules/DeckInfoLabel/deckinfolabel.module.css

@@ -1,42 +0,0 @@
-.label {
-  display: inline-flex;
-  width: max-content;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-2) var(--spacing-4);
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--border-radius-8);
-  background-color: inherit;
-}
-
-.deck_info_label_highlight {
-  border-color: transparent;
-  background-color: var(--color-blue50);
-}
-
-.deck_info_label_no_highlight {
-  border-color: var(--color-black90);
-}
-
-.large {
-  height: 1.75rem;
-  border-width: 2px;
-}
-
-.default {
-  height: 1.25rem;
-}
-
-@media (height: 600px) and (width: 1024px) {
-  .label {
-    height: var(--spacing-32);
-    padding: var(--spacing-4) var(--spacing-6);
-    border-width: 2px;
-    border-radius: var(--border-radius-12);
-  }
-
-  .has_deck_label {
-    padding-right: var(--spacing-8);
-  }
-}

package/src/molecules/DeckInfoLabel/index.tsx

@@ -1,69 +0,0 @@
-import clsx from 'clsx'
-
-import { PlaceholderStyledText } from '../../atoms'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import styles from './deckinfolabel.module.css'
-
-export interface DeckInfoLabelProps {
-  deckLabel?: string
-  iconName?: string
-  highlight?: boolean
-  size?: 'large' | 'default'
-  height?: string | number
-  width?: string | number
-  svgSize?: string | number
-  transform?: string
-}
-
-export function DeckInfoLabel({
-  deckLabel,
-  iconName,
-  highlight = false,
-  size = 'default',
-  height,
-  width,
-  transform,
-  svgSize,
-}: DeckInfoLabelProps): JSX.Element {
-  const labelClass = clsx(
-    styles.label,
-    highlight
-      ? styles.deck_info_label_highlight
-      : styles.deck_info_label_no_highlight,
-    styles[size],
-    {
-      [styles.has_deck_label]: deckLabel != null,
-    }
-  )
-
-  return (
-    <div
-      className={labelClass}
-      style={{ height, width, transform }}
-      data-testid={
-        deckLabel != null
-          ? `DeckInfoLabel_${deckLabel}`
-          : `DeckInfoLabel_${iconName}`
-      }
-    >
-      {iconName != null ? (
-        <Icon
-          name={iconName}
-          height={svgSize ?? (size === 'large' ? '1.5rem' : '0.875rem')}
-          width={svgSize ?? (size === 'large' ? '1.5rem' : '0.875rem')}
-          color={highlight ? COLORS.white : COLORS.black90}
-          aria-label={iconName}
-        />
-      ) : (
-        <PlaceholderStyledText
-          desktopStyle={size === 'large' ? 'headingSmallBold' : 'captionBold'}
-          oddStyle="smallBodyTextBold"
-          color={highlight ? COLORS.white : COLORS.black90}
-        >
-          {deckLabel}
-        </PlaceholderStyledText>
-      )}
-    </div>
-  )
-}

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],
-  },
-}