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

package/src/legacy-hardware-sim/ModuleItem.module.css

@@ -1,98 +0,0 @@
-@import '@opentrons/components/styles';
-
-.module {
-  color: var(--c-black);
-  background-color: var(--c-black);
-  opacity: 0.9;
-  border-radius: 6px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.module_review_icon {
-  color: var(--c-white);
-  margin: 0 0.25rem 0 0;
-  height: 12px;
-  width: 12px;
-}
-
-.module_review_icon_missing {
-  color: var(--c-red);
-}
-
-.module_review_icon_present {
-  color: var(--c-green);
-}
-
-.module_review_text {
-  fill: currentColor;
-  font-size: 0.55rem;
-  font-weight: var(--fw-semibold);
-  color: var(--c-white);
-  text-transform: capitalize;
-  white-space: pre;
-  margin-bottom: 0.75rem;
-}
-
-.module_name_overlay {
-  color: var(--c-black);
-  opacity: 0.7;
-}
-
-.module_connect_info_wrapper {
-  display: flex;
-  flex-direction: row;
-  font-size: 0.5rem;
-  color: var(--c-white);
-}
-
-.module_port_text {
-  fill: currentColor;
-  color: var(--c-white);
-  font-size: 0.65rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.module_port_text_na {
-  fill: currentColor;
-  color: var(--c-med-gray);
-  font-size: 0.65rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.module_wrapper {
-  display: flex;
-  width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.flipped_module_wrapper {
-  display: flex;
-  width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.module_name_text {
-  fill: currentColor;
-  color: var(--c-white);
-  font-size: 0.5rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.flipped {
-  transform: rotate(180deg);
-}
-
-.right_icon {
-  margin: 0 0 0 1rem;
-}

package/src/lists/lists.module.css

@@ -1,171 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --list-padding-large: 1rem;
-  --list-padding-small: 0.75rem;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.disabled {
-  background-color: transparent;
-
-  & * {
-    color: var(--c-font-disabled);
-    outline-color: #eee;
-    fill: var(--c-font-disabled);
-    background-color: transparent;
-  }
-}
-
-.panel_group,
-.titled_list,
-.list_item {
-  background-color: white;
-}
-
-.panel_group {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-}
-
-.hover_border {
-  outline: var(--bd-width-default) solid var(--c-highlight);
-}
-
-.header_text {
-  text-transform: uppercase;
-  font-size: var(--fs-caption);
-  font-weight: var(--fw-semibold);
-  color: var(--c-font-disabled);
-}
-
-/*
-  TODO(IL, 2021-07-30): when consumers of this class are migrated to CSS-in-JS, keep in mind
-  the meaning of .title_bar is vague, it is widely used by several unrelated components.
-  Also, it's almost the same as .titled_list_title_bar -- they are the same
-  except for flex-related rules.
-*/
-.title_bar {
-  position: relative;
-  display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  flex-direction: column;
-}
-
-/* Specifically for TitledList */
-.titled_list_title_bar {
-  position: relative;
-  display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  flex-direction: row;
-  align-items: center;
-}
-
-.titled_list_selected {
-  & .title_bar {
-    background-color: var(--c-bg-selected);
-
-    & * {
-      color: var(--c-selected-dark);
-      font-weight: var(--fw-semibold);
-    }
-  }
-}
-
-.title {
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-regular);
-  margin: 0;
-  text-transform: uppercase;
-}
-
-.title_enabled {
-  color: var(--c-font-dark);
-}
-
-.title_disabled {
-  color: var(--c-font-disabled);
-}
-
-.title_bar_icon {
-  color: var(--c-font-dark);
-  height: 1.5rem;
-}
-
-.title_bar_error {
-  background-color: var(--c-error-light);
-}
-
-.icon_left_of_title {
-  margin-right: 0.5rem;
-  height: 1.2rem;
-}
-
-.icon_left_of_title_container {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.title_bar_carat {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  padding: calc(var(--list-padding-small) - var(--bd-width-default));
-  padding-top: 1rem;
-
-  &:hover {
-    background-color: color-mod(var(--c-black) alpha(5%));
-  }
-}
-
-.list {
-  list-style-type: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-.list_item {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  line-height: 1.25;
-  margin: 0;
-  padding: var(--list-padding-small);
-
-  &:hover {
-    background-color: var(--c-bg-hover);
-  }
-
-  &.active {
-    background-color: var(--c-bg-selected);
-  }
-}
-
-a.list_item {
-  text-decoration: none;
-}
-
-.list_alert {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  width: 100%;
-  padding: var(--list-padding-small);
-  background-color: var(--c-bg-light);
-  font-style: italic;
-}
-
-.item_icon {
-  flex: none;
-  height: calc(1.25 * var(--fs-body-1));
-  margin-right: 0.5rem;
-}

package/src/modals/__tests__/Modal.test.tsx

@@ -1,65 +0,0 @@
-//
-import type * as React from 'react'
-import '@testing-library/jest-dom/vitest'
-import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../testing/utils'
-import { COLORS } from '../../helix-design-system'
-import { Modal } from '../Modal'
-
-const render = (props: React.ComponentProps<typeof Modal>) => {
-  return renderWithProviders(<Modal {...props} />)
-}
-
-describe('Modal', () => {
-  let props: React.ComponentProps<typeof Modal>
-
-  beforeEach(() => {
-    props = {
-      type: 'info',
-      title: 'mock info modal',
-      children: <div>mock modal content</div>,
-    }
-  })
-
-  it('should render modal without header icon when type is info', () => {
-    render(props)
-    expect(screen.queryByTestId('Modal_header_icon')).not.toBeInTheDocument()
-    screen.getByText('mock info modal')
-    expect(screen.getByTestId('Modal_header')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('should render modal with orange header icon when type is warning', () => {
-    props.type = 'warning'
-    render(props)
-    const headerIcon = screen.getByTestId('Modal_header_icon')
-    expect(headerIcon).toBeInTheDocument()
-    expect(headerIcon).toHaveStyle(`color: ${COLORS.yellow50}`)
-    expect(screen.getByTestId('Modal_header')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('should render modal with red header icon when type is error', () => {
-    props.type = 'error'
-    render(props)
-    const headerIcon = screen.getByTestId('Modal_header_icon')
-    expect(headerIcon).toBeInTheDocument()
-    expect(headerIcon).toHaveStyle(`color: ${COLORS.red50}`)
-    expect(screen.getByTestId('Modal_header')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('should supply a default margin to account for the sidebar, aligning the modal in the center of the app', () => {
-    render(props)
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'width: 31.25rem'
-    )
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'margin-left: 5.656rem'
-    )
-  })
-})

package/src/modals/__tests__/ModalHeader.test.tsx

@@ -1,73 +0,0 @@
-import type * as React from 'react'
-import { screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-
-import { renderWithProviders } from '../../testing/utils'
-import { ModalHeader } from '../ModalHeader'
-import { COLORS } from '../../helix-design-system'
-import { SPACING } from '../../ui-style-constants'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-
-const mockClose = vi.fn()
-
-const render = (props: React.ComponentProps<typeof ModalHeader>) => {
-  return renderWithProviders(<ModalHeader {...props} />)
-}
-
-describe('ModalHeader', () => {
-  let props: React.ComponentProps<typeof ModalHeader>
-
-  beforeEach(() => {
-    props = {
-      onClose: mockClose,
-      title: 'mock modal header title',
-      backgroundColor: COLORS.white,
-      color: COLORS.black90,
-    }
-  })
-
-  it('should render text and close icon', () => {
-    render(props)
-    const title = screen.getByText('mock modal header title')
-    expect(title).toHaveStyle(`color: ${COLORS.black90}`)
-    screen.getByTestId('ModalHeader_icon_close_mock modal header title')
-  })
-
-  it('should render text, icon, and close icon', () => {
-    props.icon = {
-      name: 'ot-alert',
-      color: COLORS.black90,
-      size: '1.25rem',
-      marginRight: SPACING.spacing8,
-    }
-    render(props)
-    expect(screen.getByTestId('Modal_header_icon')).toHaveStyle(
-      `color: ${COLORS.black90}`
-    )
-    expect(screen.getByTestId('Modal_header_icon')).toHaveStyle(
-      `width: 1.25rem`
-    )
-    expect(screen.getByTestId('Modal_header_icon')).toHaveStyle(
-      `height: 1.25rem`
-    )
-    expect(screen.getByTestId('Modal_header_icon')).toHaveStyle(
-      `margin-right: ${SPACING.spacing8}`
-    )
-  })
-
-  it('should call a mock function when clicking close icon', () => {
-    render(props)
-    const closeIcon = screen.getByTestId(
-      'ModalHeader_icon_close_mock modal header title'
-    )
-    expect(closeIcon).toHaveStyle('width: 1.625rem')
-    expect(closeIcon).toHaveStyle('height: 1.625rem')
-    expect(closeIcon).toHaveStyle('display: flex')
-    expect(closeIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
-    expect(closeIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
-    expect(closeIcon).toHaveStyle('border-radius: 0.875rem')
-    fireEvent.click(closeIcon)
-    expect(mockClose).toHaveBeenCalled()
-  })
-})

package/src/modals/__tests__/ModalShell.test.tsx

@@ -1,45 +0,0 @@
-import type * as React from 'react'
-import '@testing-library/jest-dom/vitest'
-import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../testing/utils'
-import { ModalShell } from '../ModalShell'
-
-const render = (props: React.ComponentProps<typeof ModalShell>) => {
-  return renderWithProviders(<ModalShell {...props} />)
-}
-
-describe('ModalShell', () => {
-  let props: React.ComponentProps<typeof ModalShell>
-
-  beforeEach(() => {
-    props = {
-      children: <div>mock modal shell</div>,
-      fullPage: false,
-    }
-  })
-
-  it('should render content', () => {
-    render(props)
-    screen.getByText('mock modal shell')
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'height: auto'
-    )
-  })
-
-  it('should render full size modal when fullSize is true', () => {
-    props.fullPage = true
-    render(props)
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'height: 100%'
-    )
-  })
-
-  it('should render header and footer', () => {
-    props.header = <div>mock header</div>
-    props.footer = <div>mock footer</div>
-    render(props)
-    screen.getByText('mock header')
-    screen.getByText('mock footer')
-  })
-})

package/src/modals/modals.module.css

@@ -1,275 +0,0 @@
-/* common styling for modals */
-@import '../index.module.css';
-
-.modal {
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-  display: flex;
-
-  /* from legacy --center-children */
-  justify-content: center;
-
-  /* from legacy --center-children */
-  align-items: center;
-
-  /* from legacy --center-children */
-
-  align-items: flex-start;
-  position: fixed;
-  z-index: 1;
-  padding: 4rem;
-}
-
-.modal_page {
-  position: absolute;
-
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-
-  display: flex;
-
-  /* from legacy --flex-start */
-  justify-content: flex-start;
-
-  /* from legacy --flex-start */
-  align-items: center;
-
-  /* from legacy --flex-start */
-
-  flex-direction: column;
-  padding: 4.5rem 3rem 1rem 3rem;
-}
-
-.overlay {
-  position: absolute;
-
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-
-  background-color: rgba(0, 0, 0, 0.9);
-}
-
-.title_bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 3;
-}
-
-.modal_contents {
-  z-index: 1;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-
-  background-color: white;
-}
-
-.modal_page_contents {
-  z-index: 1;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-
-  background-color: white;
-  max-height: 100%;
-  overflow-y: auto;
-  padding-top: 1rem;
-}
-
-.modal_heading {
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold);
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-
-  /* from legacy --font-header-dark */
-
-  margin-top: 0;
-  margin-bottom: 1rem;
-  text-transform: capitalize;
-}
-
-.alert_modal_wrapper {
-  position: relative;
-  max-height: 100%;
-  padding-top: 4rem;
-  border-radius: 0;
-}
-
-.alert_modal_heading.no_icon_heading {
-  padding-left: 2rem;
-}
-
-.no_alert_header {
-  padding-top: 1.5rem;
-}
-
-.spinner_modal_contents {
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-light */
-  font-weight: var(--fw-regular);
-
-  /* from legacy --font-body-2-light */
-  color: var(--c-font-light);
-
-  /* from legacy --font-body-2-light */
-
-  max-width: 30rem;
-  padding-top: 3rem;
-  background-color: transparent;
-  flex-direction: column;
-  font-style: italic;
-  text-align: center;
-  z-index: 4;
-}
-
-.spinner_modal_icon {
-  width: 7.5rem;
-  margin-bottom: 3rem;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.alert_modal {
-  z-index: 10;
-}
-
-.alert_modal_overlay {
-  background-color: rgba(115, 115, 115, 0.9);
-}
-
-.alert_modal_contents {
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular);
-
-  /* from legacy --font-body-2-dark */
-  color: var(--c-font-dark);
-
-  /* from legacy --font-body-2-dark */
-
-  width: 100%;
-  max-height: 100%;
-  padding: 1rem;
-
-  & > p {
-    padding-bottom: 1rem;
-  }
-}
-
-.alert_modal_heading {
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-
-  /* from legacy --font-header-dark */
-
-  font-weight: normal;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  background-color: #e0e0e0;
-}
-
-.alert_modal_icon {
-  height: 1.125rem;
-  margin-right: 0.75rem;
-}
-
-.alert_modal_buttons {
-  float: right;
-  margin-top: 1rem;
-}
-
-.alert_button {
-  margin-left: 1rem;
-}