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

package/src/controls/ToggleButton.tsx

@@ -1,25 +1,69 @@
-// reusable toggle button with on off styling for connect to robot and opt in/out
-import cx from 'classnames'
-import { IconButton } from '../buttons'
-import styles from './styles.module.css'
+import { css } from 'styled-components'
 
-import type { ButtonProps } from '../buttons'
+import { COLORS } from '../helix-design-system'
+import { Icon } from '../icons'
+import { Btn, Flex } from '../primitives'
 
-export interface ToggleButtonProps extends ButtonProps {
+import type { MouseEvent } from 'react'
+import type { StyleProps } from '../primitives'
+
+const TOGGLE_DISABLED_STYLES = css`
+  color: ${COLORS.grey50};
+
+  &:hover {
+    color: ${COLORS.grey55};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:disabled {
+    color: ${COLORS.grey30};
+  }
+`
+
+const TOGGLE_ENABLED_STYLES = css`
+  color: ${COLORS.blue50};
+
+  &:hover {
+    color: ${COLORS.blue55};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:disabled {
+    color: ${COLORS.grey30};
+  }
+`
+
+interface ToggleButtonProps extends StyleProps {
   toggledOn: boolean
+  label?: string | null
+  disabled?: boolean | null
+  id?: string
+  onClick?: (e: MouseEvent) => void
 }
 
 export function ToggleButton(props: ToggleButtonProps): JSX.Element {
-  // TODO(mc, 2020-02-04): destructuring `name` to avoid flow error
-  // ButtonProps::name conflicts with IconProps::name, and IconButton
-  // has `name` prop to pass to Icon. IconButton will need to be redone
-  const { toggledOn, name, ...buttonProps } = props
-  const className = cx(styles.robot_item_icon, props.className, {
-    [styles.toggled_on]: toggledOn,
-    [styles.toggled_off]: !toggledOn,
-  })
-
-  const toggleIcon = toggledOn ? 'ot-toggle-switch-on' : 'ot-toggle-switch-off'
-
-  return <IconButton {...buttonProps} name={toggleIcon} className={className} />
+  const { label, toggledOn, disabled, size, ...buttonProps } = props
+  const iconName = toggledOn ? 'ot-toggle-input-on' : 'ot-toggle-input-off'
+
+  return (
+    <Btn
+      disabled={disabled ?? false}
+      role="switch"
+      aria-label={label}
+      aria-checked={toggledOn}
+      size={size ?? '2rem'}
+      css={props.toggledOn ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
+      {...buttonProps}
+    >
+      <Flex>
+        <Icon name={iconName} size="2rem" />
+      </Flex>
+    </Btn>
+  )
 }

package/src/controls/index.ts

@@ -3,7 +3,6 @@
 // belong in the please-refactor-these-to-use-primitives-and-styled-components
 // category). We should move them all.
 export * from './ToggleButton'
-export * from './LabeledToggle'
 export * from './LabeledButton'
 export * from './LabeledCheckbox'
 export * from './LabeledRadioGroup'

package/src/controls/styles.module.css

@@ -6,8 +6,8 @@
 
 /* Toggle Button */
 .toggled_on {
-  fill: #0ec9eb;
   color: #0ec9eb;
+  fill: #0ec9eb;
 }
 
 .toggled_off {
@@ -15,9 +15,9 @@
 }
 
 .labeled_control_wrapper {
+  display: block;
   width: 100%;
   padding: 1rem;
-  display: block;
 
   &:not(:last-child) {
     border-bottom: 1px solid var(--c-light-gray);
@@ -30,30 +30,30 @@
 
 .stacked_labeled_control {
   display: block;
-  margin-left: 1rem;
   margin-top: 0.5rem;
+  margin-left: 1rem;
 }
 
 .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;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
   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;
+  max-width: var(--mw-labeled-toggle);
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
   font-weight: var(--fw-semibold);
 }
 
 .labeled_toggle_button {
-  float: right;
   width: 2rem;
-  margin-right: 1rem;
   padding: 0;
+  margin-right: 1rem;
+  float: right;
 
   &:hover {
     background-color: transparent;
@@ -62,15 +62,15 @@
 
 .labeled_button,
 .labeled_select {
-  float: right;
   width: 9rem;
   margin-top: 0.5rem;
+  float: right;
 }
 
 .labeled_select {
+  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
   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 {
@@ -78,9 +78,9 @@
 }
 
 .stacked_control_info {
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   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;
@@ -90,10 +90,10 @@
 }
 
 .control_info {
+  max-width: var(--mw-labeled-toggle);
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   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;

package/src/forms/DeprecatedCheckboxField.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { DeprecatedCheckboxField as DeprecatedCheckboxComponent } from './DeprecatedCheckboxField'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Forms/Deprecated Checkbox Field',

package/src/forms/DeprecatedCheckboxField.tsx

@@ -1,10 +1,10 @@
 import cx from 'classnames'
-import { Icon } from '../icons'
-
-import type { ComponentProps, ChangeEventHandler } from 'react'
 
+import { Icon } from '../icons'
 import styles from './forms.module.css'
 
+import type { ChangeEventHandler, ComponentProps } from 'react'
+
 /**
  * Checkbox Field Properties.
  */

package/src/forms/FormGroup.stories.tsx

@@ -1,9 +1,8 @@
-import type * as React from 'react'
-
-import { FormGroup as FormGroupComponent } from './FormGroup'
 import { DeprecatedCheckboxField } from './DeprecatedCheckboxField.stories'
+import { FormGroup as FormGroupComponent } from './FormGroup'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Forms/Form Group',

package/src/forms/FormGroup.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 

package/src/forms/InputField.stories.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
+
 import { Box, SIZE_6 } from '@opentrons/components'
 
 import { LegacyInputField as InputFieldComponent } from './LegacyInputField'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Forms/Input Field',

package/src/forms/LegacyInputField.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 

package/src/forms/RadioGroup.stories.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
+
 import { Box, SIZE_6 } from '@opentrons/components'
 
 import { RadioGroup as RadioGroupComponent } from './RadioGroup'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Forms/Radio Group',

package/src/forms/RadioGroup.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 

package/src/forms/Select.module.css

@@ -12,18 +12,18 @@
   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;
+    display: flex;
+    height: 1.75rem;
     padding: 0.25rem 0;
-    outline: none;
+    border: none;
     border-radius: var(--bd-radius-form-field);
-    height: 1.75rem;
+    background-color: var(--c-light-gray);
     box-shadow: none;
+    color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+    font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+    font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+    outline: none;
   }
 
   & :global(.ot_select__control--menu-is-open) {
@@ -52,11 +52,11 @@
   }
 
   & :global(.ot_select__group-heading) {
+    margin-left: 0.5rem;
+    color: var(--c-med-gray); /* from legacy --font-form-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 */
     text-transform: uppercase;
-    margin-left: 0.5rem;
   }
 
   & :global(.ot_select__single-value) {
@@ -64,9 +64,9 @@
   }
 
   & :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;
+    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
+    margin-top: 0.25rem;
   }
 }
 
@@ -91,28 +91,28 @@
 }
 
 .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;
+  z-index: 99;
   top: 100%;
-  left: 0;
   right: 0;
-  z-index: 99;
+  left: 0;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
   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;
+  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
 }
 
 .menu_control_bridge {
   position: absolute;
-  background-color: var(--c-white);
+  z-index: 99;
   top: calc(100% - 2px);
-  left: 0;
   right: 0;
-  z-index: 99;
+  left: 0;
   height: 4px;
+  background-color: var(--c-white);
 }

package/src/forms/Select.stories.tsx

@@ -1,9 +1,8 @@
-import type * as React from 'react'
-
 import { Select } from './Select'
 import styles from './Select.module.css'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Forms/Select',

package/src/forms/Select.tsx

@@ -1,15 +1,15 @@
 import ReactSelect, { components as reactSelectComponents } from 'react-select'
-
 import cx from 'classnames'
 
 import { Icon } from '../icons'
 import styles from './Select.module.css'
+
 import type {
+  CSSObjectWithLabel,
   DropdownIndicatorProps,
-  Props as ReactSelectProps,
   MenuProps,
+  Props as ReactSelectProps,
   StylesConfig,
-  CSSObjectWithLabel,
 } from 'react-select'
 import type { POSITION_ABSOLUTE, POSITION_FIXED } from '../styles'
 

package/src/forms/SelectField.tsx

@@ -6,8 +6,8 @@ import styles from './SelectField.module.css'
 
 import type { ReactNode } from 'react'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
-import type { SelectProps } from './Select'
 import type { SelectOption } from '.'
+import type { SelectProps } from './Select'
 
 export interface SelectFieldProps {
   /** optional HTML id for container */

package/src/forms/ToggleField.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { ToggleField as ToggleFieldComponent } from './ToggleField'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 const Template: Story<
   React.ComponentProps<typeof ToggleFieldComponent>

package/src/forms/ToggleField.tsx

@@ -1,10 +1,10 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
+import styles from './forms.module.css'
 
 import type { ChangeEvent } from 'react'
 
-import styles from './forms.module.css'
-
 export interface ToggleFieldProps {
   /** change handler */
   onChange: (event: ChangeEvent<HTMLInputElement>) => unknown

package/src/forms/forms.module.css

@@ -3,20 +3,20 @@
 .accessibly_hidden {
   position: absolute;
   overflow: hidden;
-  clip: rect(0 0 0 0);
-  height: 1px;
   width: 1px;
-  margin: -1px;
+  height: 1px;
   padding: 0;
   border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 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;
+  color: var(--c-font-dark); /* from legacy --font-form-default */
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  font-weight: var(--fw-regular); /* from legacy --font-form-default */
   line-height: 1;
 }
 
@@ -30,10 +30,10 @@
 }
 
 .form_group_label {
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  margin-bottom: 0.15rem;
   color: var(--c-font-dark); /* from legacy --font-form-default */
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
   font-weight: var(--fw-semibold);
-  margin-bottom: 0.15rem;
   text-transform: capitalize;
 
   &::after {
@@ -42,21 +42,22 @@
 }
 
 .form_group_label_pipette_settings_slideout {
-  font-weight: var(--fw-semibold);
   margin-bottom: 0.5rem;
-  text-transform: capitalize;
-  font-size: 13px;
   color: #16212d;
+  font-size: 13px;
+  font-weight: var(--fw-semibold);
+  text-transform: capitalize;
 }
 
 .checkbox_icon {
+  display: flex;
+
   /* 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;
+  justify-content: center;
+  color: var(--c-font-dark);
 
   &:not(.checkbox_disabled):hover {
     cursor: pointer;
@@ -96,20 +97,20 @@
 .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;
+  border-radius: var(--bd-radius-form-field);
+  background-color: var(--c-light-gray);
 
   & 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;
+    flex: 1 1 auto;
+    border: none;
+    border-radius: inherit;
+    background-color: inherit;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
 
     /* 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.
@@ -133,20 +134,20 @@
   }
 
   & .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;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-semibold);
+    text-align: right;
   }
 }
 
 .input_caption {
+  color: var(--c-med-gray); /* from legacy --font-form-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 {
@@ -184,18 +185,18 @@
   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;
+    overflow: hidden;
+    width: 100%;
     height: 1.5rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
     border-radius: var(--bd-radius-form-field);
-    font-family: inherit;
-    width: 100%;
     appearance: none;
-    overflow: hidden;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-family: inherit;
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
+    outline: none;
 
     &:focus {
       background-color: var(--c-white);

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

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   fixture96Plate,
   fixtureTiprack1000ul,
@@ -17,9 +16,10 @@ import {
 import { BaseDeck as BaseDeckComponent } from './BaseDeck'
 
 import type { Meta, StoryObj } from '@storybook/react'
+import type * as React from 'react'
 import type {
   DeckConfiguration,
-  LabwareDefinition2,
+  LabwareDefinition,
 } from '@opentrons/shared-data'
 
 const meta: Meta<React.ComponentProps<typeof BaseDeckComponent>> = {
@@ -54,34 +54,34 @@ export const BaseDeck: Story = {
     labwareOnDeck: [
       {
         labwareLocation: { slotName: 'C2' },
-        definition: fixture96Plate as LabwareDefinition2,
+        definition: fixture96Plate as LabwareDefinition,
       },
       {
         labwareLocation: { slotName: 'C3' },
-        definition: fixtureTiprack1000ul as LabwareDefinition2,
+        definition: fixtureTiprack1000ul as LabwareDefinition,
       },
     ],
     modulesOnDeck: [
       {
         moduleLocation: { slotName: 'B1' },
         moduleModel: THERMOCYCLER_MODULE_V2,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
         innerProps: { lidMotorState: 'open' },
       },
       {
         moduleLocation: { slotName: 'D1' },
         moduleModel: TEMPERATURE_MODULE_V2,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
       },
       {
         moduleLocation: { slotName: 'B3' },
         moduleModel: HEATERSHAKER_MODULE_V1,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
       },
       {
         moduleLocation: { slotName: 'D2' },
         moduleModel: MAGNETIC_BLOCK_V1,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
       },
     ],
     darkFill: 'rebeccapurple',