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

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/forms/index.ts

@@ -1,7 +0,0 @@
-export * from './DeprecatedCheckboxField'
-export * from './FormGroup'
-export * from './LegacyInputField'
-export * from './RadioGroup'
-export * from './Select'
-export * from './SelectField'
-export * from './ToggleField'

package/src/hardware-sim/BaseDeck/BaseDeck.stories.tsx

@@ -1,94 +0,0 @@
-import {
-  fixture96Plate,
-  fixtureTiprack1000ul,
-  FLEX_ROBOT_TYPE,
-  HEATERSHAKER_MODULE_V1,
-  MAGNETIC_BLOCK_V1,
-  TEMPERATURE_MODULE_V2,
-  THERMOCYCLER_MODULE_V2,
-} from '@opentrons/shared-data'
-
-import {
-  EXTENDED_DECK_CONFIG_FIXTURE,
-  STANDARD_SLOT_DECK_CONFIG_FIXTURE,
-  WASTE_CHUTE_DECK_CONFIG_FIXTURE,
-} from './__fixtures__'
-import { BaseDeck as BaseDeckComponent } from './BaseDeck'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import type * as React from 'react'
-import type {
-  DeckConfiguration,
-  LabwareDefinition2,
-} from '@opentrons/shared-data'
-
-const meta: Meta<React.ComponentProps<typeof BaseDeckComponent>> = {
-  component: BaseDeckComponent,
-  title: 'Library/Molecules/Simulation/BaseDeck',
-  argTypes: {
-    deckConfig: {
-      options: ['single slot deck', 'staging area deck', 'waste chute deck'],
-      control: { type: 'radio' },
-    },
-  },
-} as Meta
-
-export default meta
-type Story = StoryObj<React.ComponentProps<typeof BaseDeckComponent>>
-
-const getDeckConfig = (args: any): DeckConfiguration => {
-  switch (args.deckConfig) {
-    case 'staging area deck':
-      return EXTENDED_DECK_CONFIG_FIXTURE
-    case 'waste chute deck':
-      return WASTE_CHUTE_DECK_CONFIG_FIXTURE
-    default:
-      return STANDARD_SLOT_DECK_CONFIG_FIXTURE
-  }
-}
-
-export const BaseDeck: Story = {
-  args: {
-    robotType: FLEX_ROBOT_TYPE,
-    deckConfig: EXTENDED_DECK_CONFIG_FIXTURE,
-    labwareOnDeck: [
-      {
-        labwareLocation: { slotName: 'C2' },
-        definition: fixture96Plate as LabwareDefinition2,
-      },
-      {
-        labwareLocation: { slotName: 'C3' },
-        definition: fixtureTiprack1000ul as LabwareDefinition2,
-      },
-    ],
-    modulesOnDeck: [
-      {
-        moduleLocation: { slotName: 'B1' },
-        moduleModel: THERMOCYCLER_MODULE_V2,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
-        innerProps: { lidMotorState: 'open' },
-      },
-      {
-        moduleLocation: { slotName: 'D1' },
-        moduleModel: TEMPERATURE_MODULE_V2,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
-      },
-      {
-        moduleLocation: { slotName: 'B3' },
-        moduleModel: HEATERSHAKER_MODULE_V1,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
-      },
-      {
-        moduleLocation: { slotName: 'D2' },
-        moduleModel: MAGNETIC_BLOCK_V1,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
-      },
-    ],
-    darkFill: 'rebeccapurple',
-    lightFill: 'lavender',
-  },
-  render: args => {
-    const deckConfig = getDeckConfig(args)
-    return <BaseDeckComponent {...args} deckConfig={deckConfig} />
-  },
-}