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

package/src/lists/lists.module.css

@@ -13,10 +13,10 @@
   background-color: transparent;
 
   & * {
+    background-color: transparent;
     color: var(--c-font-disabled);
-    outline-color: #eee;
     fill: var(--c-font-disabled);
-    background-color: transparent;
+    outline-color: #eee;
   }
 }
 
@@ -35,10 +35,10 @@
 }
 
 .header_text {
-  text-transform: uppercase;
+  color: var(--c-font-disabled);
   font-size: var(--fs-caption);
   font-weight: var(--fw-semibold);
-  color: var(--c-font-disabled);
+  text-transform: uppercase;
 }
 
 /*
@@ -50,19 +50,19 @@
 .title_bar {
   position: relative;
   display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
   flex-direction: column;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  text-decoration: none;
 }
 
 /* Specifically for TitledList */
 .titled_list_title_bar {
   position: relative;
   display: flex;
-  text-decoration: none;
-  padding: var(--list-padding-large) var(--list-padding-small);
   flex-direction: row;
   align-items: center;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  text-decoration: none;
 }
 
 .titled_list_selected {
@@ -77,9 +77,9 @@
 }
 
 .title {
+  margin: 0;
   font-size: var(--fs-body-2);
   font-weight: var(--fw-regular);
-  margin: 0;
   text-transform: uppercase;
 }
 
@@ -92,8 +92,8 @@
 }
 
 .title_bar_icon {
-  color: var(--c-font-dark);
   height: 1.5rem;
+  color: var(--c-font-dark);
 }
 
 .title_bar_error {
@@ -101,8 +101,8 @@
 }
 
 .icon_left_of_title {
-  margin-right: 0.5rem;
   height: 1.2rem;
+  margin-right: 0.5rem;
 }
 
 .icon_left_of_title_container {
@@ -113,8 +113,8 @@
 .title_bar_carat {
   position: absolute;
   top: 0;
-  bottom: 0;
   right: 0;
+  bottom: 0;
   padding: calc(var(--list-padding-small) - var(--bd-width-default));
   padding-top: 1rem;
 
@@ -124,22 +124,22 @@
 }
 
 .list {
-  list-style-type: none;
   padding-left: 0;
   margin: 0;
+  list-style-type: none;
 }
 
 .list_item {
-  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;
+  width: 100%;
   flex-direction: row;
   align-items: center;
-  width: 100%;
-  line-height: 1.25;
-  margin: 0;
   padding: var(--list-padding-small);
+  margin: 0;
+  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 */
+  line-height: 1.25;
 
   &:hover {
     background-color: var(--c-bg-hover);
@@ -155,17 +155,17 @@ a.list_item {
 }
 
 .list_alert {
-  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 */
   width: 100%;
   padding: var(--list-padding-small);
   background-color: var(--c-bg-light);
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
   font-style: italic;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
 }
 
 .item_icon {
-  flex: none;
   height: calc(1.25 * var(--fs-body-1));
+  flex: none;
   margin-right: 0.5rem;
 }

package/src/modals/modals.module.css

@@ -2,6 +2,9 @@
 @import '../index.module.css';
 
 .modal {
+  position: fixed;
+  z-index: 1;
+
   /* from legacy --absolute-fill */
   top: 0;
 
@@ -17,17 +20,15 @@
   /* from legacy --absolute-fill */
   display: flex;
 
-  /* from legacy --center-children */
-  justify-content: center;
-
   /* from legacy --center-children */
   align-items: center;
 
   /* from legacy --center-children */
 
   align-items: flex-start;
-  position: fixed;
-  z-index: 1;
+
+  /* from legacy --center-children */
+  justify-content: center;
   padding: 4rem;
 }
 
@@ -51,14 +52,14 @@
   display: flex;
 
   /* from legacy --flex-start */
-  justify-content: flex-start;
+
+  flex-direction: column;
 
   /* from legacy --flex-start */
   align-items: center;
 
   /* from legacy --flex-start */
-
-  flex-direction: column;
+  justify-content: flex-start;
   padding: 4.5rem 3rem 1rem 3rem;
 }
 
@@ -84,11 +85,11 @@
 
 .title_bar {
   position: absolute;
+  z-index: 3;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   width: 100%;
-  z-index: 3;
 }
 
 .modal_contents {
@@ -100,15 +101,15 @@
   /* from legacy --modal-contents */
   max-width: 38rem;
 
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
   /* from legacy --modal-contents */
   padding: 1rem;
 
   /* from legacy --modal-contents */
   border-radius: 0.5rem;
 
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
   /* from legacy --modal-contents */
 
   background-color: white;
@@ -122,37 +123,36 @@
 
   /* from legacy --modal-contents */
   max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
+  max-height: 100%;
 
   /* from legacy --modal-contents */
   padding: 1rem;
+  padding-top: 1rem;
 
   /* from legacy --modal-contents */
   border-radius: 0.5rem;
 
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
   /* from legacy --modal-contents */
 
   background-color: white;
-  max-height: 100%;
   overflow-y: auto;
-  padding-top: 1rem;
 }
 
 .modal_heading {
-  font-size: var(--fs-header);
-
   /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold);
+
+  margin-top: 0;
+  margin-bottom: 1rem;
 
   /* from legacy --font-header-dark */
   color: var(--c-font-dark);
+  font-size: var(--fs-header);
 
   /* from legacy --font-header-dark */
-
-  margin-top: 0;
-  margin-bottom: 1rem;
+  font-weight: var(--fw-semibold);
   text-transform: capitalize;
 }
 
@@ -172,36 +172,37 @@
 }
 
 .spinner_modal_contents {
+  z-index: 4;
+
   /* from legacy --modal-contents */
   width: 100%;
 
-  /* from legacy --modal-contents */
-  margin: 0 auto;
+  /* from legacy --font-body-2-light */
+
+  max-width: 30rem;
+  flex-direction: column;
 
   /* from legacy --modal-contents */
   padding: 1rem;
+  padding-top: 3rem;
 
   /* from legacy --modal-contents */
   border-radius: 0.5rem;
 
   /* from legacy --modal-contents */
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-light */
-  font-weight: var(--fw-regular);
+  margin: 0 auto;
+  background-color: transparent;
 
   /* from legacy --font-body-2-light */
   color: var(--c-font-light);
 
-  /* from legacy --font-body-2-light */
-
-  max-width: 30rem;
-  padding-top: 3rem;
-  background-color: transparent;
-  flex-direction: column;
+  /* from legacy --modal-contents */
+  font-size: var(--fs-body-2);
   font-style: italic;
+
+  /* from legacy --font-body-2-light */
+  font-weight: var(--fw-regular);
   text-align: center;
-  z-index: 4;
 }
 
 .spinner_modal_icon {
@@ -222,19 +223,18 @@
 }
 
 .alert_modal_contents {
-  font-size: var(--fs-body-2);
-
   /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular);
+
+  width: 100%;
+  max-height: 100%;
+  padding: 1rem;
 
   /* from legacy --font-body-2-dark */
   color: var(--c-font-dark);
+  font-size: var(--fs-body-2);
 
   /* from legacy --font-body-2-dark */
-
-  width: 100%;
-  max-height: 100%;
-  padding: 1rem;
+  font-weight: var(--fw-regular);
 
   & > p {
     padding-bottom: 1rem;
@@ -242,22 +242,22 @@
 }
 
 .alert_modal_heading {
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-
-  /* from legacy --font-header-dark */
-
-  font-weight: normal;
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   display: flex;
   align-items: center;
   padding: 1rem;
   background-color: #e0e0e0;
+
+  /* from legacy --font-header-dark */
+  color: var(--c-font-dark);
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+
+  font-weight: normal;
 }
 
 .alert_modal_icon {
@@ -266,10 +266,10 @@
 }
 
 .alert_modal_buttons {
-  float: right;
   margin-top: 1rem;
+  float: right;
 }
 
 .alert_button {
   margin-left: 1rem;
-}
+}

package/src/molecules/CustomizeExpandButton/__tests__/CustomizeExpandButton.test.tsx

@@ -0,0 +1,88 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fixture24Tuberack, fixture96Plate } from '@opentrons/shared-data'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { CustomizeExpandButton } from '../index'
+
+import type { ComponentProps } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const render = (props: ComponentProps<typeof CustomizeExpandButton>) =>
+  renderWithProviders(<CustomizeExpandButton {...props} />)
+
+const INPUT_FIELD_PROPS = {
+  onInputFieldChange: vi.fn(),
+  inputFieldValue: 1,
+  inputTitle: 'mock inputTitle',
+  errorMessage: 'mock errorMessage',
+  inputCaption: 'mock inputCaption',
+  definition: { ...fixture96Plate, stackLimit: 4 } as LabwareDefinition2,
+}
+
+describe('CustomizeExpandButton', () => {
+  let props: ComponentProps<typeof CustomizeExpandButton>
+
+  beforeEach(() => {
+    props = {
+      enableStackingFF: true,
+      buttonText: 'mock text',
+      buttonValue: 'mockValue',
+      onChange: vi.fn(),
+      allowInputField: false,
+      loadName: 'mockLoadName',
+    }
+  })
+
+  it('should render non nested accordion', () => {
+    render(props)
+    fireEvent.click(screen.getByText('mock text'))
+    expect(props.onChange).toHaveBeenCalled()
+  })
+  it('should render the input field', () => {
+    props = {
+      ...props,
+      allowInputField: true,
+      isSelected: true,
+      stackingProps: INPUT_FIELD_PROPS,
+    }
+    render(props)
+    screen.getByText('mock inputTitle')
+    screen.getByText('mock inputCaption')
+    const input = screen.getByTestId('CustomizeExpandButton_inputField')
+    fireEvent.change(input, { target: { value: 4 } })
+    expect(props.stackingProps?.onInputFieldChange).toHaveBeenCalled()
+  })
+  it('should show input field error', () => {
+    props = {
+      ...props,
+      allowInputField: true,
+      isSelected: true,
+      stackingProps: {
+        ...INPUT_FIELD_PROPS,
+        inputFieldValue: 5,
+      },
+    }
+    render(props)
+    screen.getByText('mock errorMessage')
+  })
+  it('should render the checkbox', () => {
+    props = {
+      ...props,
+      isSelected: true,
+      stackingProps: {
+        ...INPUT_FIELD_PROPS,
+        definition: {
+          ...fixture24Tuberack,
+          allowedRoles: ['lid'],
+        } as LabwareDefinition2,
+        onCheckboxChange: vi.fn(),
+        checked: false,
+        checkboxCaption: 'mock checkboxCaption',
+      },
+    }
+    render(props)
+    screen.getByText('mock checkboxCaption')
+  })
+})

package/src/molecules/CustomizeExpandButton/index.tsx

@@ -0,0 +1,189 @@
+import { memo } from 'react'
+import styled, { css } from 'styled-components'
+
+import { CheckboxField } from '../../atoms/CheckboxField'
+import { InputField } from '../../atoms/InputField'
+import { StyledText } from '../../atoms/StyledText'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { CURSOR_POINTER, DIRECTION_COLUMN } from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  MemoExoticComponent,
+  MouseEvent,
+} from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { StyleProps } from '../../primitives'
+
+export interface StackingProps {
+  onInputFieldChange: (e: ChangeEvent<HTMLInputElement>) => void
+  inputFieldValue: number
+  inputTitle: string
+  errorMessage: string
+  inputCaption: string
+  definition: LabwareDefinition2
+  onCheckboxChange?: () => void
+  checked?: boolean
+  checkboxCaption?: string
+}
+
+interface CustomizeExpandButtonProps extends StyleProps {
+  enableStackingFF: boolean
+  allowInputField: boolean
+  loadName: string
+  buttonText: string
+  buttonValue: string | number
+  onChange: ChangeEventHandler<HTMLInputElement>
+  stackingProps?: StackingProps
+  disabled?: boolean
+  isSelected?: boolean
+  id?: string
+}
+
+//  used for helix and as a child button to ListButtonAccordion
+export function CustomizeExpandButtonComponent(
+  props: CustomizeExpandButtonProps
+): JSX.Element {
+  const {
+    buttonText,
+    buttonValue,
+    isSelected = false,
+    onChange,
+    disabled = false,
+    id = buttonText,
+    stackingProps,
+    allowInputField,
+    loadName,
+    enableStackingFF,
+  } = props
+  const isLid =
+    stackingProps != null &&
+    stackingProps.definition.allowedRoles?.includes('lid')
+  const tcLidDef = loadName === 'opentrons_tough_pcr_auto_sealing_lid'
+
+  return (
+    <Flex
+      width="100%"
+      margin={SPACING.spacing4}
+      onClick={(e: MouseEvent) => {
+        e.stopPropagation()
+      }}
+    >
+      <SettingButton
+        checked={isSelected}
+        id={id}
+        disabled={disabled}
+        onChange={e => {
+          onChange(e)
+          e.stopPropagation()
+        }}
+        type="radio"
+        value={buttonValue}
+      />
+      <SettingButtonLabel
+        role="label"
+        isSelected={isSelected}
+        disabled={disabled}
+        htmlFor={id}
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <StyledText desktopStyle="bodyDefaultRegular">
+            {buttonText}
+          </StyledText>
+          {stackingProps != null && enableStackingFF && isSelected ? (
+            <Flex
+              flexDirection={DIRECTION_COLUMN}
+              backgroundColor={COLORS.blue10}
+              padding={`${SPACING.spacing16} ${SPACING.spacing20}`}
+              borderRadius={BORDERS.borderRadius4}
+            >
+              {isLid && !tcLidDef ? (
+                <CheckboxField
+                  onChange={e => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    stackingProps.onCheckboxChange?.()
+                  }}
+                  value={stackingProps.checked}
+                  label={stackingProps.checkboxCaption}
+                />
+              ) : null}
+              {stackingProps.definition.stackLimit != null &&
+              stackingProps.definition.stackLimit > 1 &&
+              allowInputField ? (
+                <InputField
+                  id="CustomizeExpandButton_inputField"
+                  title={stackingProps.inputTitle}
+                  onChange={e => {
+                    e.stopPropagation()
+                    stackingProps.onInputFieldChange(e)
+                  }}
+                  type="number"
+                  error={
+                    !stackingProps.inputFieldValue ||
+                    stackingProps.inputFieldValue >
+                      stackingProps.definition.stackLimit
+                      ? stackingProps.errorMessage
+                      : null
+                  }
+                  value={stackingProps.inputFieldValue}
+                  caption={stackingProps.inputCaption}
+                />
+              ) : null}
+            </Flex>
+          ) : null}
+        </Flex>
+      </SettingButtonLabel>
+    </Flex>
+  )
+}
+
+export const CustomizeExpandButton: MemoExoticComponent<
+  typeof CustomizeExpandButtonComponent
+> = memo(CustomizeExpandButtonComponent)
+
+const SettingButton = styled.input`
+  display: none;
+`
+
+const AVAILABLE_BUTTON_STYLE = css`
+  background: ${COLORS.white};
+  color: ${COLORS.black90};
+
+  &:hover {
+    background-color: ${COLORS.grey10};
+  }
+`
+
+const SELECTED_BUTTON_STYLE = css`
+  background: ${COLORS.blue50};
+  color: ${COLORS.white};
+
+  &:active {
+    background-color: ${COLORS.blue60};
+  }
+`
+
+const DISABLED_STYLE = css`
+  color: ${COLORS.grey40};
+  background-color: ${COLORS.grey10};
+`
+
+interface ButtonLabelProps {
+  isSelected: boolean
+  disabled: boolean
+}
+
+const SettingButtonLabel = styled.label<ButtonLabelProps>`
+  border-radius: ${BORDERS.borderRadius8};
+  cursor: ${CURSOR_POINTER};
+  padding: ${SPACING.spacing12};
+  width: 100%;
+
+  ${({ isSelected }) =>
+    isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
+  ${({ disabled }) => disabled && DISABLED_STYLE}
+`

package/src/molecules/DeckInfoLabel/DeckInfoLabel.stories.tsx

@@ -1,7 +1,5 @@
-import { DeckInfoLabel } from '.'
 import { customViewports } from '../../../../.storybook/preview'
-import { Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
+import { DeckInfoLabel } from './index'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
@@ -22,6 +20,12 @@ const meta: Meta<typeof DeckInfoLabel> = {
         'stacked',
       ],
     },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'large'],
+    },
     deckLabel: {
       control: {
         type: 'text',
@@ -31,7 +35,7 @@ const meta: Meta<typeof DeckInfoLabel> = {
   },
   component: DeckInfoLabel,
   parameters: {
-    controls: { include: ['highlight', 'iconName', 'deckLabel'] },
+    controls: { include: ['highlight', 'iconName', 'deckLabel', 'size'] },
     viewport: {
       viewports: customViewports,
       defaultViewport: 'onDeviceDisplay',
@@ -39,9 +43,9 @@ const meta: Meta<typeof DeckInfoLabel> = {
   },
   decorators: [
     Story => (
-      <Flex padding={SPACING.spacing16} width="15rem" height="5rem">
+      <div style={{ padding: '16px', width: '15rem', height: '5rem' }}>
         <Story />
-      </Flex>
+      </div>
     ),
   ],
 }