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

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

@@ -0,0 +1,88 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fixture24Tuberack, fixture96Plate } from '@opentrons/shared-data'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { CustomizeExpandButton } from '../index'
+
+import type { ComponentProps } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const render = (props: ComponentProps<typeof CustomizeExpandButton>) =>
+  renderWithProviders(<CustomizeExpandButton {...props} />)
+
+const INPUT_FIELD_PROPS = {
+  onInputFieldChange: vi.fn(),
+  inputFieldValue: 1,
+  inputTitle: 'mock inputTitle',
+  errorMessage: 'mock errorMessage',
+  inputCaption: 'mock inputCaption',
+  definition: { ...fixture96Plate, stackLimit: 4 } as LabwareDefinition2,
+}
+
+describe('CustomizeExpandButton', () => {
+  let props: ComponentProps<typeof CustomizeExpandButton>
+
+  beforeEach(() => {
+    props = {
+      enableStackingFF: true,
+      buttonText: 'mock text',
+      buttonValue: 'mockValue',
+      onChange: vi.fn(),
+      allowInputField: false,
+      loadName: 'mockLoadName',
+    }
+  })
+
+  it('should render non nested accordion', () => {
+    render(props)
+    fireEvent.click(screen.getByText('mock text'))
+    expect(props.onChange).toHaveBeenCalled()
+  })
+  it('should render the input field', () => {
+    props = {
+      ...props,
+      allowInputField: true,
+      isSelected: true,
+      stackingProps: INPUT_FIELD_PROPS,
+    }
+    render(props)
+    screen.getByText('mock inputTitle')
+    screen.getByText('mock inputCaption')
+    const input = screen.getByTestId('CustomizeExpandButton_inputField')
+    fireEvent.change(input, { target: { value: 4 } })
+    expect(props.stackingProps?.onInputFieldChange).toHaveBeenCalled()
+  })
+  it('should show input field error', () => {
+    props = {
+      ...props,
+      allowInputField: true,
+      isSelected: true,
+      stackingProps: {
+        ...INPUT_FIELD_PROPS,
+        inputFieldValue: 5,
+      },
+    }
+    render(props)
+    screen.getByText('mock errorMessage')
+  })
+  it('should render the checkbox', () => {
+    props = {
+      ...props,
+      isSelected: true,
+      stackingProps: {
+        ...INPUT_FIELD_PROPS,
+        definition: {
+          ...fixture24Tuberack,
+          allowedRoles: ['lid'],
+        } as LabwareDefinition2,
+        onCheckboxChange: vi.fn(),
+        checked: false,
+        checkboxCaption: 'mock checkboxCaption',
+      },
+    }
+    render(props)
+    screen.getByText('mock checkboxCaption')
+  })
+})

package/src/molecules/CustomizeExpandButton/index.tsx

@@ -0,0 +1,189 @@
+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,7 +1,5 @@
 import { customViewports } from '../../../../.storybook/preview'
-import { Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-import { DeckInfoLabel } from '.'
+import { DeckInfoLabel } from './index'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
@@ -22,6 +20,12 @@ const meta: Meta<typeof DeckInfoLabel> = {
         'stacked',
       ],
     },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'large'],
+    },
     deckLabel: {
       control: {
         type: 'text',
@@ -31,7 +35,7 @@ const meta: Meta<typeof DeckInfoLabel> = {
   },
   component: DeckInfoLabel,
   parameters: {
-    controls: { include: ['highlight', 'iconName', 'deckLabel'] },
+    controls: { include: ['highlight', 'iconName', 'deckLabel', 'size'] },
     viewport: {
       viewports: customViewports,
       defaultViewport: 'onDeviceDisplay',
@@ -39,9 +43,9 @@ const meta: Meta<typeof DeckInfoLabel> = {
   },
   decorators: [
     Story => (
-      <Flex padding={SPACING.spacing16} width="15rem" height="5rem">
+      <div style={{ padding: '16px', width: '15rem', height: '5rem' }}>
         <Story />
-      </Flex>
+      </div>
     ),
   ],
 }

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

@@ -1,10 +1,8 @@
-import { describe, it, beforeEach, expect } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
 import { screen } from '@testing-library/react'
-import { SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-import { DeckInfoLabel } from '..'
+import { renderWithProviders } from '../../../testing/utils'
+import { DeckInfoLabel } from '../index'
 
 import type { ComponentProps } from 'react'
 
@@ -24,13 +22,9 @@ describe('DeckInfoLabel', () => {
   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}`)
+    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')
@@ -45,6 +39,16 @@ describe('DeckInfoLabel', () => {
       iconName: 'ot-temperature-v2',
     }
     render(props)
-    screen.getByLabelText(props.iconName)
+    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

@@ -0,0 +1,42 @@
+.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,95 +1,69 @@
-import styled from 'styled-components'
+import clsx from 'clsx'
 
-import { StyledText } from '../../atoms'
-import { BORDERS, COLORS } from '../../helix-design-system'
+import { PlaceholderStyledText } from '../../atoms'
+import { 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 styles from './deckinfolabel.module.css'
 
-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'
+export interface DeckInfoLabelProps {
   deckLabel?: string
-}
-
-// type union requires one of deckLabel or iconName, but not both
-export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & {
+  iconName?: string
   highlight?: boolean
+  size?: 'large' | 'default'
+  height?: string | number
+  width?: string | number
   svgSize?: string | number
+  transform?: string
 }
 
-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({
+export function DeckInfoLabel({
   deckLabel,
   iconName,
   highlight = false,
-  ...styleProps
+  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 (
-    <Flex
+    <div
+      className={labelClass}
+      style={{ height, width, transform }}
       data-testid={
         deckLabel != null
           ? `DeckInfoLabel_${deckLabel}`
           : `DeckInfoLabel_${iconName}`
       }
-      {...styleProps}
     >
       {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}
         />
       ) : (
-        <StyledText
-          desktopStyle="captionBold"
+        <PlaceholderStyledText
+          desktopStyle={size === 'large' ? 'headingSmallBold' : 'captionBold'}
           oddStyle="smallBodyTextBold"
           color={highlight ? COLORS.white : COLORS.black90}
         >
           {deckLabel}
-        </StyledText>
+        </PlaceholderStyledText>
       )}
-    </Flex>
+    </div>
   )
 }

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

@@ -1,11 +1,11 @@
 import { screen } from '@testing-library/react'
-import { describe, it, beforeEach, expect } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
+import { DeckLabel } from '..'
 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 '..'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/DeckLabel/index.tsx

@@ -1,11 +1,13 @@
 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 { 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'

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

@@ -1,8 +1,8 @@
-import { screen, fireEvent } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { DropdownMenu } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 import type { DropdownOption } from '..'

package/src/molecules/DropdownMenu/index.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useEffect, useRef, useState } from 'react'
-import type { FocusEventHandler } from 'react'
 import { css } from 'styled-components'
-import type { FlattenSimpleInterpolation } from 'styled-components'
+
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { StyledText } from '../../atoms/StyledText'
 import { LegacyStyledText } from '../../atoms/StyledText/LegacyStyledText'
@@ -27,6 +26,9 @@ import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { DeckInfoLabel } from '../DeckInfoLabel'
 import { LiquidIcon } from '../LiquidIcon'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { FocusEventHandler } from 'react'
+
 export interface DropdownOption {
   /** dropdown option name */
   name: string
@@ -290,6 +292,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
           onFocus={onFocus}
           onBlur={onBlur}
           css={DROPDOWN_STYLE}
+          data-testid="dropdownMenu"
           tabIndex={tabIndex}
         >
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
@@ -307,12 +310,14 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                   : TYPOGRAPHY.pRegular};
               `}
             >
-              <StyledText
-                desktopStyle="captionRegular"
-                css={LINE_CLAMP_TEXT_STYLE(1)}
-              >
-                {currentOption.name}
-              </StyledText>
+              {currentOption.deckLabel !== currentOption.name ? (
+                <StyledText
+                  desktopStyle="captionRegular"
+                  css={LINE_CLAMP_TEXT_STYLE(1)}
+                >
+                  {currentOption.name}
+                </StyledText>
+              ) : null}
             </Flex>
           </Flex>
           <Icon
@@ -360,12 +365,14 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                       flexDirection={DIRECTION_COLUMN}
                       gridGap={option.subtext != null ? SPACING.spacing4 : '0'}
                     >
-                      <StyledText
-                        desktopStyle="captionRegular"
-                        css={LINE_CLAMP_TEXT_STYLE(3, true)}
-                      >
-                        {option.name}
-                      </StyledText>
+                      {option.deckLabel !== option.name ? (
+                        <StyledText
+                          desktopStyle="captionRegular"
+                          css={LINE_CLAMP_TEXT_STYLE(3, true)}
+                        >
+                          {option.name}
+                        </StyledText>
+                      ) : null}
                       <StyledText
                         desktopStyle="captionRegular"
                         color={COLORS.grey60}

package/src/molecules/InfoScreen/InfoScreen.stories.tsx

@@ -1,8 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import * as React from 'react-remove-scroll'
+
+import { COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { InfoScreen as InfoScreenComponent } from './index'
 
 import type { Meta, StoryObj } from '@storybook/react'

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

@@ -1,9 +1,9 @@
 import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
 import { InfoScreen } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'