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

package/src/organisms/EndUserAgreementFooter/__tests__/EndUserAgreementFooter.test.tsx

@@ -1,21 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { EndUserAgreementFooter } from '../index'
-
-const render = () => {
-  return renderWithProviders(<EndUserAgreementFooter />)
-}
-
-describe('EndUserAgreementFooter', () => {
-  it('should render text and links', () => {
-    render()
-    screen.getByText('Copyright © 2024 Opentrons')
-    expect(
-      screen.getByRole('link', { name: 'privacy policy' })
-    ).toHaveAttribute('href', 'https://opentrons.com/privacy-policy')
-    expect(
-      screen.getByRole('link', { name: 'end user license agreement' })
-    ).toHaveAttribute('href', 'https://opentrons.com/eula')
-  })
-})

package/src/organisms/Toolbox/__tests__/Toolbox.test.tsx

@@ -1,35 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { Toolbox } from '../index'
-
-const render = (props: React.ComponentProps<typeof Toolbox>) => {
-  return renderWithProviders(<Toolbox {...props} />)
-}
-
-describe('Toolbox', () => {
-  let props: React.ComponentProps<typeof Toolbox>
-
-  it('should render text and buttons', () => {
-    props = {
-      title: <div>mock header</div>,
-      children: <div>mock children</div>,
-      confirmButtonText: 'done',
-      onCloseClick: vi.fn(),
-      closeButton: <div>exit</div>,
-      onConfirmClick: vi.fn(),
-      secondaryHeaderButton: <div>mock secondary header button</div>,
-    }
-    render(props)
-    screen.getByText('mock header')
-    screen.getByText('done')
-    fireEvent.click(screen.getByTestId('Toolbox_confirmButton'))
-    expect(props.onConfirmClick).toHaveBeenCalled()
-    screen.getByText('mock children')
-    screen.getByText('exit')
-    fireEvent.click(screen.getByTestId('Toolbox_closeButton'))
-    expect(props.onCloseClick).toHaveBeenCalled()
-    screen.getByText('mock secondary header button')
-  })
-})

package/src/primitives/__tests__/Box.test.tsx

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

package/src/primitives/__tests__/Btn.test.tsx

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

package/src/primitives/__tests__/Flex.test.tsx

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

package/src/primitives/__tests__/Link.test.tsx

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

package/src/primitives/__tests__/Svg.test.tsx

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

package/src/primitives/__tests__/Text.test.tsx

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

package/src/primitives/__tests__/primitives.test.tsx

@@ -1,4 +0,0 @@
-import { describe, it } from 'vitest'
-describe('primitive components with style props', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/primitives/__tests__/style-props.test.tsx

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

package/src/slotmap/__tests__/OT2SlotMap.test.tsx

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

package/src/slotmap/styles.module.css

@@ -1,18 +0,0 @@
-@import '../index.module.css';
-
-.slot_rect {
-  stroke: var(--c-med-gray);
-  fill: none;
-}
-
-.slot_occupied {
-  fill: var(--c-light-gray);
-}
-
-.slot_occupied.slot_error {
-  fill: var(--c-warning-light);
-}
-
-.collision_icon {
-  color: var(--c-med-gray);
-}

package/src/structure/Pill.module.css

@@ -1,16 +0,0 @@
-@import '../index.module.css';
-
-.pill {
-  border-radius: var(--bd-radius-pill);
-  color: var(--c-white);
-  padding: 0.5em;
-}
-
-.pill:empty::before {
-  /* zero width space to give empty pill the same line height */
-  content: "\200b";
-}
-
-.invert_text {
-  color: var(--c-black);
-}

package/src/structure/Splash.module.css

@@ -1,16 +0,0 @@
-@import '@opentrons/components/styles';
-
-.splash {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  color: var(--c-light-gray);
-
-  & > * {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-height: 100%;
-  }
-}

package/src/structure/structure.module.css

@@ -1,114 +0,0 @@
-/* TitleBar styles */
-@import '../index.module.css';
-
-.title_bar {
-  display: flex;
-  align-items: center;
-  height: 3rem;
-  text-transform: uppercase;
-  background-color: var(--c-dark-gray);
-}
-
-.title_bar,
-.title_bar a {
-  color: white;
-}
-
-.title,
-.subtitle,
-.separator {
-  font-size: var(--fs-header);
-  margin: 0;
-}
-
-.title,
-.separator {
-  font-weight: var(--fw-semibold);
-}
-
-.title {
-  white-space: nowrap; /* from legacy --truncate */
-  overflow: hidden; /* from legacy --truncate */
-  text-overflow: ellipsis; /* from legacy --truncate */
-  min-width: 0; /* from legacy --truncate */
-  padding: 0 1.5rem;
-}
-
-.subtitle {
-  padding: 0 1.5rem;
-  font-weight: normal;
-}
-
-.title.right {
-  margin-left: auto;
-}
-
-.title_button {
-  flex: none;
-}
-
-.page_tabs {
-  width: 100%;
-  text-align: center;
-}
-
-.tab_link {
-  display: inline-block;
-  width: 50%;
-  padding: 0.25rem 0;
-  font-size: var(--fs-huge);
-  opacity: 0.2;
-  background-color: var(--c-med-gray);
-  color: white;
-  text-transform: uppercase;
-}
-
-.active_tab_link {
-  opacity: 1;
-}
-
-.tab_title {
-  font-weight: normal;
-}
-
-.active_tab_link .tab_title {
-  font-weight: var(--fw-bold);
-}
-
-.disabled {
-  pointer-events: none;
-  background-color: transparent;
-
-  & * {
-    color: var(--c-font-disabled);
-    fill: var(--c-font-disabled);
-    background-color: transparent;
-  }
-}
-
-.labeled_value {
-  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 */
-  line-height: 1.5;
-
-  & svg {
-    height: var(--fs-body-2);
-  }
-}
-
-.labeled_value_label {
-  font-weight: var(--fw-semibold);
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-}
-
-.labeled_value_value {
-  margin: 0;
-}
-
-.right_node {
-  display: flex;
-  justify-content: flex-end;
-  margin-left: auto;
-}

package/src/styles/borders.module.css

@@ -1,20 +0,0 @@
-@import './colors.module.css';
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}

package/src/styles/colors.module.css

@@ -1,57 +0,0 @@
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: color-mod(var(--c-blue) lightness(85%));
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: color-mod(var(--c-highlight) alpha(0.3));
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}

package/src/styles/index.module.css

@@ -1,8 +0,0 @@
-.clickable {
-  cursor: pointer;
-}
-
-.rotated {
-  transform-origin: center;
-  transform: rotate(180deg);
-}

package/src/styles/typography.module.css

@@ -1,22 +0,0 @@
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}

package/src/tooltips/__tests__/Tooltip.test.tsx

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

package/src/tooltips/__tests__/useHoverTooltip.test.tsx

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

package/src/tooltips/__tests__/usePopper.test.tsx

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

package/src/tooltips/__tests__/useTooltip.test.tsx

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

package/src/tooltips/tooltips.module.css

@@ -1,72 +0,0 @@
-/* common styling for tooltips */
-@import '../index.module.css';
-
-.tooltip_box {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-light */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-light */
-  color: var(--c-font-light); /* from legacy --font-body-1-light */
-  background-color: var(--c-bg-dark);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
-  padding: 8px;
-  cursor: pointer;
-  z-index: 9001;
-}
-
-.arrow {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  margin-bottom: -0.5em;
-  width: 1em;
-  height: 0.5em;
-
-  &::before {
-    border-width: 0.5em 0.5em 0 0.5em;
-    content: '';
-    margin: auto;
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-color: var(--c-bg-dark) transparent transparent transparent;
-  }
-}
-
-.arrow.bottom {
-  top: 0;
-  left: 0;
-  margin-top: -0.5em;
-  width: 1em;
-  height: 0.5em;
-
-  &::before {
-    border-width: 0 0.5em 0.5em 0.5em;
-    border-color: transparent transparent var(--c-bg-dark) transparent;
-  }
-}
-
-.arrow.right {
-  top: 0;
-  left: 0;
-  margin-left: -0.5em;
-  height: 1em;
-  width: 0.5em;
-
-  &::before {
-    border-width: 0.5em 0.5em 0.5em 0;
-    border-color: transparent var(--c-bg-dark) transparent transparent;
-  }
-}
-
-.arrow.left {
-  top: 0;
-  right: 0;
-  margin-right: -0.5em;
-  height: 1em;
-  width: 0.5em;
-
-  &::before {
-    border-width: 0.5em 0 0.5em 0.5em;
-    border-color: transparent transparent transparent var(--c-bg-dark);
-  }
-}