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

package/src/atoms/buttons/__tests__/SecondaryButton.test.tsx

@@ -1,54 +0,0 @@
-import type * as React from 'react'
-import { describe, it, beforeEach, expect } from 'vitest'
-import { screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-
-import { SecondaryButton } from '../SecondaryButton'
-
-const render = (props: React.ComponentProps<typeof SecondaryButton>) => {
-  return renderWithProviders(<SecondaryButton {...props} />)[0]
-}
-
-describe('SecondaryButton', () => {
-  let props: React.ComponentProps<typeof SecondaryButton>
-
-  beforeEach(() => {
-    props = {
-      children: 'secondary button',
-    }
-  })
-
-  it('renders primary button with text', () => {
-    render(props)
-    const button = screen.getByText('secondary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
-    )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-    expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
-    expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-    expect(button).toHaveStyle(
-      `text-transform: ${TYPOGRAPHY.textTransformNone}`
-    )
-    expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
-  })
-
-  it('renders secondary button with text and disabled', () => {
-    props.disabled = true
-    render(props)
-    const button = screen.getByText('secondary button')
-    expect(button).toBeDisabled()
-  })
-
-  it('renders secondary button with text and different background color', () => {
-    props.color = COLORS.red50
-    render(props)
-    const button = screen.getByText('secondary button')
-    expect(button).toHaveStyle(`color: ${COLORS.red50}`)
-  })
-})

package/src/buttons/buttons.module.css

@@ -1,428 +0,0 @@
-/* button styling */
-@import '../index.module.css';
-
-:root {
-  --button-pad: 0.5rem;
-
-  --button-inverted: {
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-    border-color: var(--c-font-light);
-
-    &:active {
-      font-weight: var(--fw-regular);
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-/* TODO(ka, 2017-2-14): standardize primary button vars */
-
-.button_primary {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  background: transparent;
-  border-radius: var(--bd-radius-default);
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 100%;
-  color: var(--c-font-light);
-  background-color: var(--c-bg-dark);
-
-  /* TODO(mc, 2017-12-07): pull shadows out to central file */
-  box-shadow:
-    0 0 2px rgba(0, 0, 0, 0.12),
-    0 2px 2px rgba(0, 0, 0, 0.24);
-
-  &:focus {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &:active {
-    font-weight: var(--fw-regular);
-    background-color: color-mod(var(--c-bg-dark) tint(30%));
-
-    /* TODO(mc, 2017-12-07): pull shadows out to central file */
-    box-shadow:
-      0 0 8px rgba(0, 0, 0, 0.12),
-      0 8px 8px rgba(0, 0, 0, 0.24);
-  }
-
-  &.inverted {
-    background-color: var(--c-bg-light);
-    color: var(--c-font-dark);
-
-    &:focus,
-    &:hover,
-    &.hover {
-      background-color: color-mod(var(--c-bg-light) shade(5%));
-    }
-
-    &:active {
-      background-color: color-mod(var(--c-bg-light) shade(10%));
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-
-    background-color: color-mod(var(--c-bg-dark) tint(70%));
-    box-shadow: none;
-    color: var(--c-font-disabled);
-  }
-}
-
-.button_flat {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
-
-  &:active {
-    font-weight: var(--fw-regular);
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-
-  &:focus {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-
-  &.inverted {
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-    border-color: var(--c-font-light);
-
-    &:active {
-      font-weight: var(--fw-regular);
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-    }
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-.button_outline {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
-
-  &:active {
-    font-weight: var(--fw-regular);
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-
-  &:focus {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  border: 1px solid var(--c-font-dark);
-
-  &.inverted {
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-    border-color: var(--c-font-light);
-
-    &:active {
-      font-weight: var(--fw-regular);
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-    }
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-/* style for IconButton */
-
-.button_icon {
-  width: auto;
-
-  & > * {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-
-  &.inverted {
-    color: white;
-    fill: white;
-
-    /* TODO(mc, 2019-03-29): Is this correct? Our icons use only fill */
-    stroke: white;
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-  }
-}
-
-/* style for the supplementary icon displayed by Button */
-.icon {
-  position: absolute;
-  top: var(--button-pad);
-  left: var(--button-pad);
-  height: calc(100% - 2 * var(--button-pad));
-}

package/src/controls/styles.module.css

@@ -1,103 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --mw-labeled-toggle: 25rem;
-}
-
-/* Toggle Button */
-.toggled_on {
-  fill: #0ec9eb;
-  color: #0ec9eb;
-}
-
-.toggled_off {
-  fill: var(--c-dark-gray);
-}
-
-.labeled_control_wrapper {
-  width: 100%;
-  padding: 1rem;
-  display: block;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--c-light-gray);
-  }
-}
-
-.labeled_control {
-  display: block;
-}
-
-.stacked_labeled_control {
-  display: block;
-  margin-left: 1rem;
-  margin-top: 0.5rem;
-}
-
-.stacked_labeled_control_label {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  display: inline-block;
-  font-weight: var(--fw-semibold);
-}
-
-.labeled_control_label {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  max-width: var(--mw-labeled-toggle);
-  display: inline-block;
-  font-weight: var(--fw-semibold);
-}
-
-.labeled_toggle_button {
-  float: right;
-  width: 2rem;
-  margin-right: 1rem;
-  padding: 0;
-
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.labeled_button,
-.labeled_select {
-  float: right;
-  width: 9rem;
-  margin-top: 0.5rem;
-}
-
-.labeled_select {
-  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 */
-}
-
-.labeled_checkbox {
-  float: right;
-}
-
-.stacked_control_info {
-  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 */
-
-  & > p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-}
-
-.control_info {
-  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 */
-  max-width: var(--mw-labeled-toggle);
-
-  & > p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-}

package/src/forms/Select.module.css

@@ -1,118 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-@import '../index.module.css';
-
-/* NOTE(mc, 2021-04-27): this class only used by storybook */
-.example_select_override {
-  & :global(.ot_select__control) {
-    background-color: blue;
-  }
-}
-
-.select {
-  position: relative;
-
-  & :global(.ot_select__control) {
-    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;
-    position: relative;
-    background-color: var(--c-light-gray);
-    border: none;
-    padding: 0.25rem 0;
-    outline: none;
-    border-radius: var(--bd-radius-form-field);
-    height: 1.75rem;
-    box-shadow: none;
-  }
-
-  & :global(.ot_select__control--menu-is-open) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  & :global(.ot_select__control--menu-is-open),
-  & :global(.ot_select__control--is-focused) {
-    background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  }
-
-  & :global(.ot_select__option) {
-    display: flex;
-    padding: 0.25rem 0.75rem;
-    cursor: default;
-  }
-
-  & :global(.ot_select__option--is-focused) {
-    background-color: var(--c-light-gray);
-  }
-
-  & :global(.ot_select__option--is-disabled) {
-    color: var(--c-font-disabled);
-  }
-
-  & :global(.ot_select__group-heading) {
-    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 */
-    text-transform: uppercase;
-    margin-left: 0.5rem;
-  }
-
-  & :global(.ot_select__single-value) {
-    display: flex;
-  }
-
-  & :global(.ot_select__group):not(:first-child) {
-    margin-top: 0.25rem;
-    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
-    padding-top: 0.25rem;
-  }
-}
-
-.dropdown_indicator {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  width: 1.25rem;
-  pointer-events: none;
-
-  & > svg {
-    color: var(--c-dark-gray);
-  }
-
-  &.flipped > svg {
-    transform: rotate(180deg);
-  }
-}
-
-.dropdown_indicator_icon {
-  width: 100%;
-}
-
-.menu {
-  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 */
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 99;
-  background-color: var(--c-white);
-  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  border-bottom-left-radius: var(--bd-radius-form-field);
-  border-bottom-right-radius: var(--bd-radius-form-field);
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.menu_control_bridge {
-  position: absolute;
-  background-color: var(--c-white);
-  top: calc(100% - 2px);
-  left: 0;
-  right: 0;
-  z-index: 99;
-  height: 4px;
-}

package/src/forms/SelectField.module.css

@@ -1,16 +0,0 @@
-@import '@opentrons/components/styles';
-
-.select_field.error {
-  & :global(.ot_select__control) {
-    background-color: var(--c-warning-light);
-  }
-}
-
-.select_caption {
-  font-size: var(--fs-caption);
-
-  &.error {
-    color: var(--c-warning-dark);
-    font-weight: var(--fw-semibold);
-  }
-}