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

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.7-alpha.1",
+  "version": "0.2.0-alpha.0",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
   "style": "src/index.module.css",
   "main": "src/index.ts",
   "module": "src/index.ts",
+  "exports": {
+    "./styles": "./src/styles/global.css"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Opentrons/opentrons.git"
@@ -22,7 +25,7 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.7-alpha.1",
+    "@opentrons/shared-data": "0.2.0-alpha.0",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -40,7 +43,7 @@
     "react-remove-scroll": "2.4.3",
     "react-select": "5.4.0",
     "react-viewport-list": "6.3.0",
-    "redux": "4.0.5",
+    "redux": "5.0.1",
     "styled-components": "5.3.6"
   },
   "devDependencies": {

package/src/alerts/alerts.module.css

@@ -12,8 +12,8 @@
 .title_bar {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   padding: 0.5rem 1rem;
   font-weight: var(--fw-semibold);
 }
@@ -79,8 +79,8 @@
   background-color: white;
 
   & a {
-    text-decoration: underline;
     color: inherit;
+    text-decoration: underline;
   }
 
   &:empty {

package/src/assets/localization/en/deck_configuration.json

@@ -0,0 +1,12 @@
+{
+  "flex_stacker_display_name": "Stacker",
+  "flex_stacker_waste_chute_display_name": "Stacker + Waste chute",
+  "absorbance": "Absorbance",
+  "heater_Shaker": "Heater-Shaker",
+  "mag_block": "Mag",
+  "staging_area": "Stage",
+  "temperature": "Temperature",
+  "thermocycler": "Thermocycler",
+  "trash_bin": "Trash bin",
+  "waste": "Waste"
+}

package/src/assets/localization/en/index.ts

@@ -1,3 +1,4 @@
+import deck_configuration from './deck_configuration.json'
 import protocol_command_text from './protocol_command_text.json'
 
 // i18n files needed for unit testing. this is the quick fix for now until we figure out
@@ -5,4 +6,5 @@ import protocol_command_text from './protocol_command_text.json'
 // translation across multiple projects
 export const en = {
   protocol_command_text,
+  deck_configuration,
 }

package/src/assets/localization/en/protocol_command_text.json

@@ -60,7 +60,7 @@
   "move_to_addressable_area_drop_tip": "Moving to {{addressable_area}}",
   "move_to_coordinates": "Moving to (X: {{x}}, Y: {{y}}, Z: {{z}})",
   "move_to_slot": "Moving to Slot {{slot_name}}",
-  "move_to_well": "Moving to well {{well_name}} of {{labware}} in {{labware_location}}",
+  "move_to_well": "Moving to X {{xOffset}} Y {{yOffset}} Z {{zOffset}} relative to {{positionRelative}} of well {{wellName}} of {{labware}} in {{displayLocation}}",
   "multiple": "multiple",
   "notes": "notes",
   "off_deck": "off deck",

package/src/atoms/AnimationVideo/__tests__/AnimationVideo.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { AnimationVideo } from '..'
+
+describe('AnimationVideo', () => {
+  it('should have default props', () => {
+    render(<AnimationVideo data-testid="subject" />)
+    const videoNode = screen.getByTestId('subject')
+    expect(videoNode).toHaveAttribute('autoplay')
+    expect(videoNode).toHaveAttribute('loop')
+    expect(videoNode).not.toHaveAttribute('controls')
+    expect(videoNode).toHaveAttribute('disableRemotePlayback')
+    expect(videoNode).toHaveAttribute('disablePictureInPicture')
+    expect((videoNode as HTMLVideoElement).muted).toBeTruthy()
+  })
+
+  it('should merge default props with custom props', () => {
+    render(<AnimationVideo data-testid="subject" preload="auto" loop={false} />)
+    const videoNode = screen.getByTestId('subject')
+    expect(videoNode).toHaveAttribute('autoplay')
+    expect(videoNode).not.toHaveAttribute('loop') // Default overridden by custom.
+    expect(videoNode).not.toHaveAttribute('controls')
+    expect(videoNode).toHaveAttribute('disableRemotePlayback')
+    expect(videoNode).toHaveAttribute('disablePictureInPicture')
+    expect((videoNode as HTMLVideoElement).muted).toBeTruthy()
+    expect(videoNode).toHaveAttribute('preload', 'auto') // Custom-only.
+  })
+
+  it('should render children', () => {
+    render(
+      <AnimationVideo>
+        <source data-testid="source1"></source>
+        <source data-testid="source2"></source>
+      </AnimationVideo>
+    )
+    screen.getByTestId('source1')
+    screen.getByTestId('source2')
+  })
+})

package/src/atoms/AnimationVideo/index.tsx

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'react'
+
+export type AnimationVideoProps = ComponentProps<'video'>
+
+/**
+ * A `<video>` tag with default props for showing a looping animation.
+ *
+ * @example
+ * ```jsx
+ * <AnimationVideo>
+ *   <source src="foo.webm" />
+ * </AnimationVideo>
+ * ```
+ */
+export function AnimationVideo(props: AnimationVideoProps): JSX.Element {
+  const {
+    autoPlay = true,
+    loop = true,
+    // Our animations don't have audio, but we apparently need to pass `muted` anyway.
+    // It prevents the browser from trying to play audio on connected Bluetooth
+    // headphones, which would interrupt audio coming from other devices.
+    //
+    // Because of some React nonsense, the rendered DOM node will not have a `muted`
+    // attribute, but its `muted` property will be true, which is good enough.
+    // https://github.com/facebook/react/issues/10389
+    muted = true,
+    controls = false,
+    disableRemotePlayback = true,
+    disablePictureInPicture = true,
+    ...restProps
+  } = props
+  return (
+    <video
+      autoPlay={autoPlay}
+      loop={loop}
+      muted={muted}
+      controls={controls}
+      disableRemotePlayback={disableRemotePlayback}
+      disablePictureInPicture={disablePictureInPicture}
+      {...restProps}
+      // Child <source>s rendered via {...restProps} spreading above.
+    />
+  )
+}

package/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx

@@ -42,7 +42,6 @@ describe('CheckboxField', () => {
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
 
     // INNER_STYLE_NO_VALUE
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
@@ -77,7 +76,6 @@ describe('CheckboxField', () => {
     props.value = true
     render(props)
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.blue50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
@@ -90,7 +88,6 @@ describe('CheckboxField', () => {
     props.value = undefined
     render(props)
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)

package/src/atoms/CheckboxField/index.tsx

@@ -65,7 +65,7 @@ export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
         <Icon
           css={value ?? false ? INNER_STYLE_VALUE : INNER_STYLE_NO_VALUE}
           name={value ?? false ? 'ot-checkbox' : 'checkbox-blank-outline'}
-          width="100%"
+          width="1.25rem"
           data-testid="CheckboxField_icon"
         />
       )}

package/src/atoms/InlineNotification/index.tsx

@@ -13,6 +13,7 @@ import {
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { MouseEventHandler } from 'react'
 import type { IconProps } from '../../icons'
 import type { StyleProps } from '../../primitives'
@@ -23,7 +24,7 @@ export interface InlineNotificationProps extends StyleProps {
   /** name constant of the icon to display */
   type: InlineNotificationType
   /** InlineNotification contents */
-  heading: string
+  heading?: string
   message?: string
   /** Optional dynamic width based on contents */
   hug?: boolean
@@ -79,46 +80,16 @@ export function InlineNotification(
     color: INLINE_NOTIFICATION_PROPS_BY_TYPE[type].color,
     size: '100%',
   }
+  const backgroundColor =
+    INLINE_NOTIFICATION_PROPS_BY_TYPE[type].backgroundColor
+
   return (
     <Flex
-      alignItems={ALIGN_CENTER}
-      backgroundColor={INLINE_NOTIFICATION_PROPS_BY_TYPE[type].backgroundColor}
       data-testid={`InlineNotification_${type}`}
-      flexDirection={DIRECTION_ROW}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-      width={hug ? 'max-content' : '100%'}
-      css={css`
-        gap: ${SPACING.spacing8};
-        border-radius: ${BORDERS.borderRadius4};
-        padding: ${SPACING.spacing8} ${SPACING.spacing12};
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-          gap: ${SPACING.spacing12};
-          border-radius: ${BORDERS.borderRadius8};
-          padding: ${SPACING.spacing12} ${SPACING.spacing16};
-        }
-      `}
+      css={INLINE_NOTIFICATION_WRAPPER_STYLES(backgroundColor, hug)}
     >
-      <Flex
-        justifyContent={JUSTIFY_FLEX_START}
-        alignItems={ALIGN_CENTER}
-        flexDirection={DIRECTION_ROW}
-        css={css`
-          gap: ${SPACING.spacing8};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-            gap: ${SPACING.spacing12};
-          }
-        `}
-      >
-        <Box
-          css={css`
-            width: ${SPACING.spacing16};
-            height: ${SPACING.spacing16};
-            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-              width: 1.75rem;
-              height: 1.75rem;
-            }
-          `}
-        >
+      <Flex css={INLINE_NOTIFICATION_FLEX_STYLE}>
+        <Box css={INLINE_NOTIFICATION_BOX_STYLE}>
           <Icon {...iconProps} aria-label={`icon_${type}`} />
         </Box>
         <Flex flex="1" alignItems={ALIGN_CENTER}>
@@ -126,22 +97,26 @@ export function InlineNotification(
             oddStyle="bodyTextRegular"
             desktopStyle="bodyDefaultRegular"
           >
-            <span
-              css={`
-                font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
-              `}
-            >
-              {fullHeading}
-            </span>
-            {/* this break is because the desktop wants this on two lines, but also wants/
-              inline text layout on ODD. Soooo here you go */}
-            <br
-              css={`
-                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-                  display: none;
-                }
-              `}
-            />
+            {heading != null && (
+              <>
+                <span
+                  css={`
+                    font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+                  `}
+                >
+                  {fullHeading}
+                </span>
+                {/* this break is because the desktop wants this on two lines, but also wants/
+                  inline text layout on ODD. Soooo here you go */}
+                <br
+                  css={`
+                    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                      display: none;
+                    }
+                  `}
+                />
+              </>
+            )}
             {message != null && fullmessage}
           </StyledText>
         </Flex>
@@ -166,28 +141,13 @@ export function InlineNotification(
           <Btn
             data-testid="InlineNotification_close-button"
             onClick={onCloseClick}
-            css={css`
-              width: 28px;
-              height: 28px;
-              @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-                width: ${SPACING.spacing48};
-                height: ${SPACING.spacing48};
-              }
-            `}
-            width=""
+            css={INLINE_NOTIFICATION_CLOSE_BUTTON_STYLE}
             height="fit-content"
           >
             <Icon
               aria-label="close_icon"
               name="close"
-              css={css`
-                width: 28px;
-                height: 28px;
-                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-                  width: ${SPACING.spacing48};
-                  height: ${SPACING.spacing48};
-                }
-              `}
+              css={INLINE_NOTIFICATION_ICON_STYLE}
             />
           </Btn>
         )}
@@ -195,3 +155,59 @@ export function InlineNotification(
     </Flex>
   )
 }
+
+const INLINE_NOTIFICATION_WRAPPER_STYLES = (
+  backgroundColor: string,
+  hug: boolean
+): FlattenSimpleInterpolation => css`
+  background-color: ${backgroundColor};
+  align-items: ${ALIGN_CENTER};
+  flex-direction: ${DIRECTION_ROW};
+  justify-content: ${JUSTIFY_SPACE_BETWEEN};
+  width: ${hug ? 'max-content' : '100%'};
+  gap: ${SPACING.spacing8};
+  border-radius: ${BORDERS.borderRadius4};
+  padding: ${SPACING.spacing8} ${SPACING.spacing12};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    gap: ${SPACING.spacing12};
+    border-radius: ${BORDERS.borderRadius8};
+    padding: ${SPACING.spacing12} ${SPACING.spacing16};
+  }
+`
+
+const INLINE_NOTIFICATION_FLEX_STYLE = css`
+  justify-content: ${JUSTIFY_FLEX_START};
+  align-items: ${ALIGN_CENTER};
+  flex-direction: ${DIRECTION_ROW};
+  gap: ${SPACING.spacing8};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    gap: ${SPACING.spacing12};
+  }
+`
+
+const INLINE_NOTIFICATION_BOX_STYLE = css`
+  width: 1rem;
+  height: 1rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+`
+
+const INLINE_NOTIFICATION_CLOSE_BUTTON_STYLE = css`
+  width: 1.75rem;
+  height: 1.75rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 3rem;
+    height: 3rem;
+  }
+`
+
+const INLINE_NOTIFICATION_ICON_STYLE = css`
+  width: 1.75rem;
+  height: 1.75rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 3rem;
+    height: 3rem;
+  }
+`

package/src/atoms/ListButton/ListButton.stories.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
 
-import { StyledText } from '../..'
+import { CustomizeExpandButton, StyledText } from '../..'
 import { STYLE_PROPS } from '../../primitives'
 import { ListButton as ListButtonComponent } from './index'
 import {
   ListButtonAccordion,
   ListButtonAccordionContainer,
-  ListButtonRadioButton,
 } from './ListButtonChildren/index'
 
 import type { Meta, StoryObj } from '@storybook/react'
@@ -58,8 +57,11 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
       >
         <ListButtonAccordionContainer id="mainAccordionContainer">
           <>
-            <ListButtonRadioButton
+            <CustomizeExpandButton
+              enableStackingFF={false}
               key="buttonNested"
+              allowInputField={false}
+              loadName="mockloadname0"
               isSelected={buttonValue === 'radio button nested'}
               buttonValue="radio button nested"
               buttonText="Radio button, click to expand nested accordion"
@@ -78,7 +80,10 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
                   isExpanded={buttonValue === 'radio button nested'}
                 >
                   <>
-                    <ListButtonRadioButton
+                    <CustomizeExpandButton
+                      enableStackingFF={false}
+                      allowInputField={false}
+                      loadName="mockloadname1"
                       isSelected={nestedButtonValue === 'radio button1'}
                       buttonValue="radio button1"
                       buttonText="nested button"
@@ -92,7 +97,10 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
                       </StyledText>
                     ) : null}
                   </>
-                  <ListButtonRadioButton
+                  <CustomizeExpandButton
+                    enableStackingFF={false}
+                    allowInputField={false}
+                    loadName="mockloadname2"
                     isSelected={nestedButtonValue === 'radio button2'}
                     buttonValue="radio button2"
                     buttonText="nested button 2"
@@ -100,7 +108,10 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
                       setNestedButtonValue('radio button2')
                     }}
                   />
-                  <ListButtonRadioButton
+                  <CustomizeExpandButton
+                    enableStackingFF={false}
+                    allowInputField={false}
+                    loadName="mockloadname3"
                     isSelected={nestedButtonValue === 'radio button3'}
                     buttonValue="radio button3"
                     buttonText="nested button 3"
@@ -113,8 +124,11 @@ const Template = (args: ListButtonComponentProps): JSX.Element => {
             ) : null}
           </>
           <>
-            <ListButtonRadioButton
+            <CustomizeExpandButton
+              enableStackingFF={false}
               key="buttonNonNested"
+              allowInputField={false}
+              loadName="mockloadname4"
               isSelected={buttonValue === 'radio button non nest'}
               buttonValue="radio button non nest"
               buttonText="Radio button without nested"

package/src/atoms/ListButton/ListButtonChildren/index.ts

@@ -1,3 +1,2 @@
 export * from './ListButtonAccordion'
 export * from './ListButtonAccordionContainer'
-export * from './ListButtonRadioButton'

package/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '../../../primitives'
 import {
-  ALIGN_FLEX_START,
+  ALIGN_CENTER,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   JUSTIFY_FLEX_START,
@@ -35,7 +35,7 @@ export const ListItemDescriptor = (
       flexDirection={changeFlexDirection ? DIRECTION_COLUMN : DIRECTION_ROW}
       gridGap={SPACING.spacing8}
       width="100%"
-      alignItems={ALIGN_FLEX_START}
+      alignItems={ALIGN_CENTER}
       justifyContent={justifyContent}
       padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >

package/src/atoms/MenuList/OverflowBtn.tsx

@@ -20,47 +20,7 @@ export const OverflowBtn: (
   ): JSX.Element => {
     const { fillColor, ...restProps } = props
     return (
-      <Btn
-        css={css`
-          border-radius: ${BORDERS.borderRadius4};
-          max-height: ${SPACING.spacing32};
-
-          &:hover {
-            background-color: ${COLORS.grey30};
-          }
-          &:hover circle {
-            fill: ${COLORS.grey55};
-          }
-
-          &:active,
-          &:focus {
-            background-color: ${COLORS.grey35};
-          }
-
-          &:active circle,
-          &:focus circle {
-            fill: ${COLORS.grey60};
-          }
-
-          &:focus-visible {
-            box-shadow: ${`0 0 0 3px ${COLORS.yellow50}`};
-            background-color: ${'transparent'};
-          }
-
-          &:focus-visible circle {
-            fill: ${COLORS.grey60};
-          }
-
-          &:disabled circle {
-            fill: ${COLORS.grey40};
-          }
-          &:disabled {
-            background-color: transparent;
-          }
-        `}
-        {...restProps}
-        ref={ref}
-      >
+      <Btn css={OVERFLOW_MENU_BUTTON_STYLE} {...restProps} ref={ref}>
         <svg
           width="19"
           height="31"
@@ -76,3 +36,41 @@ export const OverflowBtn: (
     )
   }
 )
+
+const OVERFLOW_MENU_BUTTON_STYLE = css`
+  border-radius: ${BORDERS.borderRadius4};
+  max-height: ${SPACING.spacing32};
+
+  &:hover {
+    background-color: ${COLORS.grey30};
+  }
+  &:hover circle {
+    fill: ${COLORS.grey55};
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${COLORS.grey35};
+  }
+
+  &:active circle,
+  &:focus circle {
+    fill: ${COLORS.grey60};
+  }
+
+  &:focus-visible {
+    box-shadow: ${`0 0 0 3px ${COLORS.yellow50}`};
+    background-color: ${COLORS.transparent};
+  }
+
+  &:focus-visible circle {
+    fill: ${COLORS.grey60};
+  }
+
+  &:disabled circle {
+    fill: ${COLORS.grey40};
+  }
+  &:disabled {
+    background-color: ${COLORS.transparent};
+  }
+`