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

package/src/forms/__tests__/DeprecatedCheckboxField.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('DeprecatedCheckboxField', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/forms/__tests__/DropdownField.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('DropdownField', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/forms/__tests__/InputField.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('InputField', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/forms/__tests__/Select.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('Select', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/forms/__tests__/SelectField.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('SelectField', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/forms/__tests__/ToggleField.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('ToggleField', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/forms/forms.module.css

@@ -1,239 +0,0 @@
-@import '../index.module.css';
-
-.accessibly_hidden {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-}
-
-.form_field {
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  font-weight: var(--fw-regular); /* from legacy --font-form-default */
-  color: var(--c-font-dark); /* from legacy --font-form-default */
-  display: flex;
-  align-items: center;
-  line-height: 1;
-}
-
-.label_text {
-  flex: 0 0 auto;
-  padding: 0 0.5rem;
-
-  &:empty {
-    padding: 0;
-  }
-}
-
-.form_group_label {
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  color: var(--c-font-dark); /* from legacy --font-form-default */
-  font-weight: var(--fw-semibold);
-  margin-bottom: 0.15rem;
-  text-transform: capitalize;
-
-  &::after {
-    content: ':';
-  }
-}
-
-.form_group_label_pipette_settings_slideout {
-  font-weight: var(--fw-semibold);
-  margin-bottom: 0.5rem;
-  text-transform: capitalize;
-  font-size: 13px;
-  color: #16212d;
-}
-
-.checkbox_icon {
-  /* Icon for radiobutton and for checkbox */
-  width: 1.25rem;
-  min-width: 1.25rem;
-  color: var(--c-font-dark);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:not(.checkbox_disabled):hover {
-    cursor: pointer;
-  }
-
-  &.error {
-    color: var(--c-warning-dark);
-  }
-}
-
-.checkbox_icon.checked {
-  color: var(--c-blue);
-}
-
-.toggle_icon {
-  /* Icon for radiobutton and for checkbox */
-  display: block;
-  width: 2rem;
-  min-width: 2rem;
-  color: var(--c-font-dark);
-
-  &:not(.toggle_disabled):hover {
-    cursor: pointer;
-  }
-}
-
-.dropdown_disabled,
-.checkbox_disabled,
-.toggle_disabled {
-  opacity: 0.5;
-}
-
-.input_field_container {
-  width: 100%;
-}
-
-.input_field {
-  display: flex;
-  flex: 1 1;
-  background-color: var(--c-light-gray);
-  border-radius: var(--bd-radius-form-field);
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-
-  & input {
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    background-color: inherit;
-    border-radius: inherit;
-    border: none;
-    flex: 1 1 auto;
-    width: 100%;
-    height: 1rem;
-
-    /* TODO: Ian 2018-09-14 Firefox has 1px padding on input element,
-    * but I can't figure out how to fix it in Firefox without breaking it in Chrome.
-    * Better CSS reset for inputs needed?
-    */
-
-    /* padding: 1px; */
-  }
-
-  & input:focus {
-    outline: none;
-  }
-
-  & input::placeholder {
-    color: var(--c-med-gray);
-  }
-
-  &:focus-within {
-    background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  }
-
-  & .suffix {
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    font-weight: var(--fw-semibold);
-    display: inline-block;
-    flex: 1 0;
-    text-align: right;
-    align-self: center;
-  }
-}
-
-.input_caption {
-  font-size: var(--fs-caption); /* from legacy --font-form-caption */
-  font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
-  color: var(--c-med-gray); /* from legacy --font-form-caption */
-  line-height: 1.2;
-
-  & .right {
-    float: right;
-  }
-}
-
-.inline {
-  display: flex;
-
-  & .label_text {
-    padding-right: 1.5rem;
-  }
-}
-
-.inline_item {
-  flex: 1;
-}
-
-.error div,
-.error span {
-  color: var(--c-warning-dark);
-}
-
-.error select,
-.error .input_field {
-  background-color: var(--c-warning-light);
-}
-
-.dropdown {
-  background-color: var(--c-light-gray);
-}
-
-.dropdown_field {
-  position: relative;
-
-  & select {
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    border: 0;
-    padding: 0.25rem 0.5rem;
-    outline: none;
-    height: 1.5rem;
-    border-radius: var(--bd-radius-form-field);
-    font-family: inherit;
-    width: 100%;
-    appearance: none;
-    overflow: hidden;
-
-    &:focus {
-      background-color: var(--c-white);
-      box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-    }
-  }
-
-  & .dropdown_icon {
-    position: absolute;
-    top: 0.2rem;
-    right: 0.25rem;
-    width: 1.25rem;
-    pointer-events: none;
-
-    & svg {
-      color: var(--c-dark-gray);
-    }
-  }
-}
-
-.error_icon {
-  display: inline-block;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  padding-right: 0.5rem;
-}
-
-.disabled {
-  /* Disable mouse interaction. NOTE: User can still tab to focus a field */
-  pointer-events: none;
-
-  & .form_group_label {
-    color: var(--c-light-gray);
-  }
-
-  /* stylelint-disable no-descending-specificity */
-  & input,
-  & .suffix {
-    color: var(--c-med-gray);
-  }
-}

package/src/hardware-sim/Labware/__tests__/Labware.test.tsx

@@ -1,43 +0,0 @@
-import { describe, it, vi, beforeEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { fixture12Trough } from '@opentrons/shared-data'
-import {
-  LabwareOutline,
-  LabwareWellLabelsComponent as LabwareWellLabels,
-} from '../labwareInternals'
-import { Labware } from '../Labware'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-vi.mock('../labwareInternals')
-
-const troughFixture12 = fixture12Trough as LabwareDefinition2
-
-describe('Labware', () => {
-  beforeEach(() => {
-    vi.mocked(LabwareOutline).mockReturnValue(<div>mock labware outline</div>)
-  })
-
-  it('should render a labware outline', () => {
-    const props = { definition: troughFixture12 }
-    render(
-      <svg>
-        <Labware {...props} />
-      </svg>
-    )
-    screen.getByText('mock labware outline')
-  })
-  it('should render well labels', () => {
-    const props = {
-      definition: troughFixture12,
-      showLabels: true,
-    }
-    vi.mocked(LabwareWellLabels).mockReturnValue(<div>mock well labels</div>)
-    render(
-      <svg>
-        <Labware {...props} />
-      </svg>
-    )
-    screen.getByText('mock well labels')
-  })
-})

package/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx

@@ -1,54 +0,0 @@
-import { describe, it, vi, beforeEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { fixture12Trough } from '@opentrons/shared-data'
-import {
-  StaticLabwareComponent as StaticLabware,
-  WellLabelsComponent as WellLabels,
-  StrokedWellsComponent as StrokedWells,
-} from '../labwareInternals'
-import { LabwareRender, WELL_LABEL_OPTIONS } from '../LabwareRender'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-vi.mock('../labwareInternals')
-
-const troughFixture12 = fixture12Trough as LabwareDefinition2
-
-describe('LabwareRender', () => {
-  beforeEach(() => {
-    vi.mocked(StaticLabware).mockReturnValue(<div>mock static labware</div>)
-  })
-
-  it('should render a static labware component', () => {
-    const props = { definition: troughFixture12 }
-    render(
-      <svg>
-        <LabwareRender {...props} />
-      </svg>
-    )
-    screen.getByText('mock static labware')
-  })
-  it('should render stroked wells', () => {
-    const props = { definition: troughFixture12, wellStroke: { A1: 'blue' } }
-    vi.mocked(StrokedWells).mockReturnValue(<div>mock stroked wells</div>)
-    render(
-      <svg>
-        <LabwareRender {...props} />
-      </svg>
-    )
-    screen.getByText('mock stroked wells')
-  })
-  it('should render well labels', () => {
-    const props = {
-      definition: troughFixture12,
-      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
-    }
-    vi.mocked(WellLabels).mockReturnValue(<div>mock well labels</div>)
-    render(
-      <svg>
-        <LabwareRender {...props} />
-      </svg>
-    )
-    screen.getByText('mock well labels')
-  })
-})

package/src/hardware-sim/Labware/labwareInternals/__tests__/LabwareWellLabels.test.tsx

@@ -1,66 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { fixture12Trough as _fixture12Trough } from '@opentrons/shared-data'
-import { LabwareWellLabels } from '../LabwareWellLabels'
-
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-const troughFixture12 = _fixture12Trough as LabwareDefinition2
-
-describe('LabwareWellLabels', () => {
-  it('should render well labels', () => {
-    const props = {
-      definition: troughFixture12,
-    }
-    render(
-      <svg>
-        <LabwareWellLabels {...props} />
-      </svg>
-    )
-
-    screen.getByText('A')
-    new Array(12)
-      .fill(null)
-      .forEach((_, index) => screen.getByText(`${index + 1}`))
-  })
-  it('should highlight the well labels with the given color', () => {
-    expect.assertions(13) // there should be 13 highlighted well labels
-    const props = {
-      definition: troughFixture12,
-      highlightedWellLabels: {
-        wells: Object.keys(troughFixture12.wells as Record<string, unknown>),
-        color: 'blue',
-      },
-    }
-    render(
-      <svg>
-        <LabwareWellLabels {...props} />
-      </svg>
-    )
-    const letterWellLabel = screen.getByText('A')
-    expect(letterWellLabel.getAttribute('fill')).toBe('blue')
-    new Array(12).fill(null).forEach((_, index) => {
-      const numberWellLabel = screen.getByText(`${index + 1}`)
-      expect(numberWellLabel.getAttribute('fill')).toBe('blue')
-    })
-  })
-  it('should color the well labels', () => {
-    expect.assertions(13) // there should be 13 well labels
-    const props = {
-      definition: troughFixture12,
-      wellLabelColor: 'red',
-    }
-    render(
-      <svg>
-        <LabwareWellLabels {...props} />
-      </svg>
-    )
-    const letterWellLabel = screen.getByText('A')
-    expect(letterWellLabel.getAttribute('fill')).toBe('red')
-    new Array(12).fill(null).forEach((_, index) => {
-      const numberWellLabel = screen.getByText(`${index + 1}`)
-      expect(numberWellLabel.getAttribute('fill')).toBe('red')
-    })
-  })
-})

package/src/hardware-sim/Labware/labwareInternals/__tests__/StrokedWells.test.tsx

@@ -1,31 +0,0 @@
-import { describe, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { fixture12Trough } from '@opentrons/shared-data'
-import { StrokedWells } from '../StrokedWells'
-import { WellComponent as Well } from '../Well'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-vi.mock('../Well')
-
-const troughFixture12 = fixture12Trough as LabwareDefinition2
-
-describe('StrokedWells', () => {
-  it('should render a series of wells with the given stroke', () => {
-    vi.mocked(Well).mockImplementation(({ stroke, wellName }) =>
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      {
-        return <div>{`well ${wellName} with stroke ${stroke}`}</div>
-      }
-    )
-
-    render(
-      <StrokedWells
-        definition={troughFixture12}
-        strokeByWell={{ A1: 'blue', A2: 'blue' }}
-      />
-    )
-    screen.getByText('well A1 with stroke blue')
-    screen.getByText('well A2 with stroke blue')
-  })
-})

package/src/hardware-sim/Labware/labwareInternals/__tests__/WellLabels.test.tsx

@@ -1,91 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { fixture12Trough as _fixture12Trough } from '@opentrons/shared-data'
-import { WellLabels } from '../WellLabels'
-import { WELL_LABEL_OPTIONS } from '../../LabwareRender'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-const troughFixture12 = _fixture12Trough as LabwareDefinition2
-
-describe('WellLabels', () => {
-  it('should render well labels outside of the labware', () => {
-    expect.assertions(14)
-    const props = {
-      definition: troughFixture12,
-      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
-    }
-    render(
-      <svg>
-        <WellLabels {...props} />
-      </svg>
-    )
-    const wellLabels = screen.getAllByTestId('WellsLabels_show_inside')
-    expect(wellLabels.length).toBe(13) // 1 label for the single "A" row + 12 labels for the trough columns
-    expect(wellLabels[0]).toHaveTextContent('A')
-    // assertions for each of the numbered columns, skipping the first well label which has the letter row
-    new Array(12)
-      .fill(null)
-      .forEach((_, index) =>
-        expect(wellLabels[index + 1]).toHaveTextContent(`${index + 1}`)
-      )
-  })
-  it('should render well labels inside of the labware', () => {
-    expect.assertions(14)
-    const props = {
-      definition: troughFixture12,
-      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE,
-    }
-    render(
-      <svg>
-        <WellLabels {...props} />
-      </svg>
-    )
-    const wellLabels = screen.getAllByTestId('WellsLabels_show_outside')
-    expect(wellLabels.length).toBe(13) // 1 label for the single "A" row + 12 labels for the trough columns
-    expect(wellLabels[0]).toHaveTextContent('A')
-    // assertions for each of the numbered columns, skipping the first well label which has the letter row
-    new Array(12)
-      .fill(null)
-      .forEach((_, index) =>
-        expect(wellLabels[index + 1]).toHaveTextContent(`${index + 1}`)
-      )
-  })
-  it('should highlight the well labels with the given color', () => {
-    expect.assertions(13) // there should be 13 highlighted well labels
-    const props = {
-      definition: troughFixture12,
-      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE,
-      highlightedWellLabels: {
-        wells: Object.keys(troughFixture12.wells),
-        color: 'blue',
-      },
-    }
-    render(
-      <svg>
-        <WellLabels {...props} />
-      </svg>
-    )
-    const wellLabels = screen.getAllByTestId('WellsLabels_show_outside')
-    wellLabels.forEach(wellLabel =>
-      expect(wellLabel.getAttribute('fill')).toBe('blue')
-    )
-  })
-  it('should color the well labels', () => {
-    expect.assertions(13) // there should be 13 highlighted well labels
-    const props = {
-      definition: troughFixture12,
-      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE,
-      wellLabelColor: 'red',
-    }
-    render(
-      <svg>
-        <WellLabels {...props} />
-      </svg>
-    )
-    const wellLabels = screen.getAllByTestId('WellsLabels_show_outside')
-    wellLabels.forEach(wellLabel =>
-      expect(wellLabel.getAttribute('fill')).toBe('red')
-    )
-  })
-})

package/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx

@@ -1,16 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render } from '@testing-library/react'
-import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
-import { EmanatingNozzle } from '../EmanatingNozzle'
-
-vi.mock('../EmanatingNozzle')
-
-describe('EightEmanatingNozzles', () => {
-  beforeEach(() => {
-    vi.mocked(EmanatingNozzle).mockReturnValue(<div>mock emanating nozzle</div>)
-  })
-  it('should render eight emanating nozzles', () => {
-    render(<EightEmanatingNozzles cx={5} initialCy={10} />)
-    expect(EmanatingNozzle).toHaveBeenCalledTimes(8)
-  })
-})

package/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx

@@ -1,67 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { C_SELECTED_DARK, C_TRANSPARENT } from '../../../styles'
-import { EmanatingNozzle } from '../EmanatingNozzle'
-import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from '../constants'
-
-describe('EmanatingNozzle', () => {
-  it('should render an small origin circle', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const originCircle = screen.getByTestId('origin_circle')
-    expect(originCircle).toHaveAttribute('cx', '5')
-    expect(originCircle).toHaveAttribute('cy', '10')
-    expect(originCircle).toHaveAttribute('r', '0.5')
-    expect(originCircle).toHaveAttribute('stroke', C_SELECTED_DARK)
-    expect(originCircle).toHaveAttribute('fill', C_SELECTED_DARK)
-  })
-  it('should render a medium sized animating circle', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const emanatingCircle = screen.getByTestId('emanating_circle')
-    expect(emanatingCircle).toHaveAttribute('cx', '5')
-    expect(emanatingCircle).toHaveAttribute('cy', '10')
-    expect(emanatingCircle).toHaveAttribute('r', '0.5')
-    expect(emanatingCircle).toHaveAttribute('stroke', C_SELECTED_DARK)
-    expect(emanatingCircle).toHaveAttribute('fill', C_TRANSPARENT)
-  })
-  it('should render a medium sized animating circle that grows', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const radiusAnimation = screen.getByTestId('radius_animation')
-    expect(radiusAnimation).toHaveAttribute('attributeName', 'r')
-    expect(radiusAnimation).toHaveAttribute('from', '5')
-    expect(radiusAnimation).toHaveAttribute(
-      'to',
-      (SINGLE_CHANNEL_PIPETTE_HEIGHT / 2).toString()
-    )
-    expect(radiusAnimation).toHaveAttribute('begin', '0')
-    expect(radiusAnimation).toHaveAttribute('dur', '1.1')
-    expect(radiusAnimation).toHaveAttribute('calcMode', 'ease-out')
-    expect(radiusAnimation).toHaveAttribute('repeatCount', 'indefinite')
-  })
-  it('should render a medium sized animating circle that fades out', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const opacityAnimation = screen.getByTestId('opacity_animation')
-    expect(opacityAnimation).toHaveAttribute('attributeName', 'opacity')
-    expect(opacityAnimation).toHaveAttribute('from', '0.7')
-    expect(opacityAnimation).toHaveAttribute('to', '0')
-    expect(opacityAnimation).toHaveAttribute('begin', '0')
-    expect(opacityAnimation).toHaveAttribute('dur', '1.1')
-    expect(opacityAnimation).toHaveAttribute('calcMode', 'linear')
-    expect(opacityAnimation).toHaveAttribute('repeatCount', 'indefinite')
-  })
-})