@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

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

@@ -0,0 +1,133 @@
+import * as React from 'react'
+
+import { ListButton as ListButtonComponent } from './index'
+import {
+  ListButtonAccordion,
+  ListButtonAccordionContainer,
+  ListButtonRadioButton,
+} from './ListButtonChildren/index'
+import { StyledText } from '../..'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ListButtonComponent> = {
+  title: 'Library/Atoms/ListButton',
+  component: ListButtonComponent,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['noActive', 'success', 'warning'],
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ListButtonComponent>
+type ListButtonComponentProps = React.ComponentProps<typeof ListButtonComponent>
+
+const Template = (args: ListButtonComponentProps): JSX.Element => {
+  const [containerExpand, setContainerExpand] = React.useState<boolean>(false)
+  const [buttonValue, setButtonValue] = React.useState<string | null>(null)
+  const [nestedButtonValue, setNestedButtonValue] = React.useState<
+    string | null
+  >(null)
+
+  return (
+    <ListButtonComponent
+      {...args}
+      onClick={() => {
+        setContainerExpand(!containerExpand)
+      }}
+    >
+      <ListButtonAccordion
+        key="main"
+        mainHeadline="Main heading, click to expand accordion"
+        headline="accordion heading"
+        isExpanded={containerExpand}
+      >
+        <ListButtonAccordionContainer id="mainAccordionContainer">
+          <>
+            <ListButtonRadioButton
+              key="buttonNested"
+              isSelected={buttonValue === 'radio button nested'}
+              buttonValue="radio button nested"
+              buttonText="Radio button, click to expand nested accordion"
+              onChange={e => {
+                e.stopPropagation()
+                setButtonValue('radio button nested')
+              }}
+            />
+
+            {buttonValue === 'radio button nested' ? (
+              <ListButtonAccordionContainer id="nestedAccordionContainer">
+                <ListButtonAccordion
+                  key="child"
+                  isNested
+                  headline="nested accordion heading"
+                  isExpanded={buttonValue === 'radio button nested'}
+                >
+                  <>
+                    <ListButtonRadioButton
+                      isSelected={nestedButtonValue === 'radio button1'}
+                      buttonValue="radio button1"
+                      buttonText="nested button"
+                      onChange={() => {
+                        setNestedButtonValue('radio button1')
+                      }}
+                    />
+                    {nestedButtonValue === 'radio button1' ? (
+                      <StyledText desktop="bodyDefaultRegular">
+                        Nested button option
+                      </StyledText>
+                    ) : null}
+                  </>
+                  <ListButtonRadioButton
+                    isSelected={nestedButtonValue === 'radio button2'}
+                    buttonValue="radio button2"
+                    buttonText="nested button 2"
+                    onChange={() => {
+                      setNestedButtonValue('radio button2')
+                    }}
+                  />
+                  <ListButtonRadioButton
+                    isSelected={nestedButtonValue === 'radio button3'}
+                    buttonValue="radio button3"
+                    buttonText="nested button 3"
+                    onChange={() => {
+                      setNestedButtonValue('radio button3')
+                    }}
+                  />
+                </ListButtonAccordion>
+              </ListButtonAccordionContainer>
+            ) : null}
+          </>
+          <>
+            <ListButtonRadioButton
+              key="buttonNonNested"
+              isSelected={buttonValue === 'radio button non nest'}
+              buttonValue="radio button non nest"
+              buttonText="Radio button without nested"
+              onChange={() => {
+                setButtonValue('radio button non nest')
+              }}
+            />
+
+            {buttonValue === 'radio button non nest' ? (
+              <StyledText desktop="bodyDefaultRegular">
+                Non nested button option
+              </StyledText>
+            ) : null}
+          </>
+        </ListButtonAccordionContainer>
+      </ListButtonAccordion>
+    </ListButtonComponent>
+  )
+}
+export const ListButton: Story = {
+  render: Template,
+  args: {
+    type: 'noActive',
+  },
+}

package/src/atoms/ListButton/ListButtonChildren/ListButtonAccordion.tsx

@@ -0,0 +1,65 @@
+import type * as React from 'react'
+import { Flex } from '../../../primitives'
+import { DIRECTION_COLUMN } from '../../../styles'
+import { SPACING } from '../../../ui-style-constants'
+import { StyledText } from '../../StyledText'
+
+interface ListButtonAccordionProps {
+  children: React.ReactNode
+  // determines if the accordion is expanded or not
+  isExpanded?: boolean
+  // is it nested into another accordion?
+  isNested?: boolean
+  // optional main headline for the top level accordion
+  mainHeadline?: string
+  headline?: string
+}
+
+/*
+    To be used with ListButton, ListButtonAccordion and ListButtonRadioButton
+    This is the accordion component to use both as just an accordion or nested accordion
+**/
+export function ListButtonAccordion(
+  props: ListButtonAccordionProps
+): JSX.Element {
+  const {
+    headline,
+    children,
+    mainHeadline,
+    isExpanded = false,
+    isNested = false,
+  } = props
+
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} width="100%">
+      {mainHeadline != null ? (
+        <Flex
+          marginBottom={
+            isExpanded && headline != null ? SPACING.spacing40 : '0'
+          }
+        >
+          <StyledText desktopStyle="bodyDefaultSemiBold">
+            {mainHeadline}
+          </StyledText>
+        </Flex>
+      ) : null}
+      {isExpanded ? (
+        <Flex
+          marginTop={isNested ? SPACING.spacing4 : '0'}
+          flexDirection={DIRECTION_COLUMN}
+          gridGap={SPACING.spacing4}
+          marginLeft={isNested ? SPACING.spacing40 : '0'}
+        >
+          {headline != null ? (
+            <Flex marginBottom={SPACING.spacing4}>
+              <StyledText desktopStyle="bodyDefaultSemiBold">
+                {headline}
+              </StyledText>
+            </Flex>
+          ) : null}
+          <Flex flexDirection={DIRECTION_COLUMN}>{children}</Flex>
+        </Flex>
+      ) : null}
+    </Flex>
+  )
+}

package/src/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.tsx

@@ -0,0 +1,23 @@
+import type * as React from 'react'
+import { Flex } from '../../../primitives'
+import { DIRECTION_COLUMN } from '../../../styles'
+
+interface ListButtonAccordionContainerProps {
+  children: React.ReactNode
+  id: string
+}
+/*
+    To be used with ListButtonAccordion to stop propagation since multiple
+    layers have a CTA
+**/
+export function ListButtonAccordionContainer(
+  props: ListButtonAccordionContainerProps
+): JSX.Element {
+  const { id, children } = props
+
+  return (
+    <Flex key={id} flexDirection={DIRECTION_COLUMN} width="100%">
+      {children}
+    </Flex>
+  )
+}

package/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx

@@ -0,0 +1,108 @@
+import styled, { css } from 'styled-components'
+import { SPACING } from '../../../ui-style-constants'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { Flex } from '../../../primitives'
+import { StyledText } from '../../StyledText'
+import { CURSOR_POINTER } from '../../../styles'
+
+import type { ChangeEventHandler, MouseEvent } from 'react'
+import type { StyleProps } from '../../../primitives'
+
+interface ListButtonRadioButtonProps extends StyleProps {
+  buttonText: string
+  buttonValue: string | number
+  onChange: ChangeEventHandler<HTMLInputElement>
+  setNoHover?: () => void
+  setHovered?: () => void
+  disabled?: boolean
+  isSelected?: boolean
+  id?: string
+}
+
+//  used for helix and as a child button to ListButtonAccordion
+export function ListButtonRadioButton(
+  props: ListButtonRadioButtonProps
+): JSX.Element {
+  const {
+    buttonText,
+    buttonValue,
+    isSelected = false,
+    onChange,
+    disabled = false,
+    setHovered,
+    setNoHover,
+    id = buttonText,
+  } = props
+
+  return (
+    <Flex
+      width="100%"
+      margin={SPACING.spacing4}
+      onClick={(e: MouseEvent) => {
+        e.stopPropagation()
+      }}
+    >
+      <SettingButton
+        checked={isSelected}
+        id={id}
+        disabled={disabled}
+        onChange={onChange}
+        type="radio"
+        value={buttonValue}
+      />
+      <SettingButtonLabel
+        role="label"
+        isSelected={isSelected}
+        disabled={disabled}
+        htmlFor={id}
+        onMouseEnter={setHovered}
+        onMouseLeave={setNoHover}
+      >
+        <StyledText desktopStyle="bodyDefaultRegular">{buttonText}</StyledText>
+      </SettingButtonLabel>
+    </Flex>
+  )
+}
+
+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: 14px ${SPACING.spacing12};
+  width: 100%;
+
+  ${({ isSelected }) =>
+    isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
+  ${({ disabled }) => disabled && DISABLED_STYLE}
+`

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

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

package/src/atoms/ListButton/index.tsx

@@ -0,0 +1,72 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { CURSOR_POINTER } from '../../styles'
+import type { StyleProps } from '../../primitives'
+
+export * from './ListButtonChildren/index'
+
+export type ListButtonType = 'noActive' | 'connected' | 'notConnected'
+
+interface ListButtonProps extends StyleProps {
+  type: ListButtonType
+  children: React.ReactNode
+  disabled?: boolean
+  onClick?: () => void
+}
+
+const LISTBUTTON_PROPS_BY_TYPE: Record<
+  ListButtonType,
+  { backgroundColor: string; hoverBackgroundColor: string }
+> = {
+  noActive: {
+    backgroundColor: COLORS.grey30,
+    hoverBackgroundColor: COLORS.grey35,
+  },
+  connected: {
+    backgroundColor: COLORS.green30,
+    hoverBackgroundColor: COLORS.green35,
+  },
+  notConnected: {
+    backgroundColor: COLORS.yellow30,
+    hoverBackgroundColor: COLORS.yellow35,
+  },
+}
+
+/*
+  ListButton is used in helix 
+  TODO(ja, 8/12/24): shuld be used in ODD as well and need to add
+  odd stylings
+**/
+export function ListButton(props: ListButtonProps): JSX.Element {
+  const { type, children, disabled, onClick, ...styleProps } = props
+  const listButtonProps = LISTBUTTON_PROPS_BY_TYPE[type]
+
+  const LIST_BUTTON_STYLE = css`
+    cursor: ${CURSOR_POINTER};
+    background-color: ${disabled
+      ? COLORS.grey35
+      : listButtonProps.backgroundColor};
+    max-width: 26.875rem;
+    padding: ${styleProps.padding ??
+    `${SPACING.spacing20} ${SPACING.spacing24}`};
+    border-radius: ${BORDERS.borderRadius8};
+
+    &:hover {
+      background-color: ${listButtonProps.hoverBackgroundColor};
+    }
+  `
+
+  return (
+    <Flex
+      data-testid={`ListButton_${type}`}
+      onClick={onClick}
+      css={LIST_BUTTON_STYLE}
+      {...styleProps}
+    >
+      {children}
+    </Flex>
+  )
+}

package/src/atoms/ListItem/ListItem.stories.tsx

@@ -0,0 +1,96 @@
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { DIRECTION_COLUMN } from '../../styles'
+import { Flex } from '../../primitives'
+import { LegacyStyledText } from '../StyledText'
+import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor'
+import { ListItem as ListItemComponent, ListItemCustomize } from '.'
+import exampleImage from '../../images/labware/measurement-guide/images/spacing/spacing-well-rectangular@3x.png'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { DropdownMenuProps } from '../../molecules'
+
+const meta: Meta<typeof ListItemComponent> = {
+  title: 'Library/Atoms/ListItem',
+  component: ListItemComponent,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['error', 'noActive', 'success', 'warning'],
+      },
+    },
+  },
+  parameters: VIEWPORT.touchScreenViewport,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ListItemComponent>
+
+export const ListItem: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+        <LegacyStyledText as="p">
+          Slot Component: Replace me using the component panel.
+        </LegacyStyledText>
+        <LegacyStyledText as="p">
+          Slot Component: Replace me using the component panel.
+        </LegacyStyledText>
+        <LegacyStyledText as="p">
+          Slot Component: Replace me using the component panel.
+        </LegacyStyledText>
+      </Flex>
+    ),
+  },
+}
+
+export const ListItemDescriptorDefault: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <ListItemDescriptor
+        type="large"
+        content={<div>mock content</div>}
+        description={<div>mock description</div>}
+      />
+    ),
+  },
+}
+
+export const ListItemDescriptorMini: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <ListItemDescriptor
+        type="default"
+        content={<div>mock content</div>}
+        description={<div>mock description</div>}
+      />
+    ),
+  },
+}
+const dropdownProps: DropdownMenuProps = {
+  filterOptions: [
+    { name: '1', value: '1' },
+    { name: '2', value: '2' },
+  ],
+  onClick: () => {},
+  currentOption: { name: '1', value: '1' },
+  dropdownType: 'neutral',
+}
+export const ListItemCustomizeImage: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <ListItemCustomize
+        header="Header"
+        leftHeaderItem={<img width="60px" height="60px" src={exampleImage} />}
+        linkText="Link text"
+        label="Label"
+        dropdown={dropdownProps}
+        onClick={() => {}}
+      />
+    ),
+  },
+}

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

@@ -0,0 +1,78 @@
+import { css } from 'styled-components'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
+import { COLORS } from '../../../helix-design-system'
+import { Flex, Link } from '../../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
+import { StyledText } from '../../StyledText'
+import { DropdownMenu } from '../../../molecules/DropdownMenu'
+import { Tag } from '../../Tag/index'
+import type { DropdownMenuProps } from '../../../molecules/DropdownMenu'
+import type { TagProps } from '../../Tag/index'
+interface ListItemCustomizeProps {
+  header: string
+  //  this is either an image or an icon
+  leftHeaderItem?: JSX.Element
+  onClick?: () => void
+  linkText?: string
+  //  these are the middle prop options
+  label?: string
+  dropdown?: DropdownMenuProps
+  tag?: TagProps
+  /** optional placement of the menu */
+  menuPlacement?: 'auto' | 'top' | 'bottom'
+}
+
+export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
+  const {
+    header,
+    leftHeaderItem,
+    onClick,
+    label,
+    linkText,
+    dropdown,
+    tag,
+    menuPlacement = 'auto',
+  } = props
+  return (
+    <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
+      <Flex gridGap={SPACING.spacing16} width="50%" alignItems={ALIGN_CENTER}>
+        {leftHeaderItem != null ? (
+          <Flex size="3.75rem">{leftHeaderItem}</Flex>
+        ) : null}
+        <StyledText desktopStyle="bodyDefaultSemiBold">{header}</StyledText>
+      </Flex>
+      <Flex
+        width={onClick != null && linkText != null ? '40%' : '50%'}
+        gridGap={SPACING.spacing8}
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_CENTER}
+      >
+        {label != null ? (
+          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+            {label}
+          </StyledText>
+        ) : null}
+        {dropdown != null ? (
+          <DropdownMenu {...dropdown} menuPlacement={menuPlacement} />
+        ) : null}
+        {tag != null ? <Tag {...tag} /> : null}
+      </Flex>
+      {onClick != null && linkText != null ? (
+        <Link
+          role="button"
+          onClick={onClick}
+          css={css`
+            width: 10%;
+            text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+            color: ${COLORS.grey60};
+            &:hover {
+              color: ${COLORS.grey40};
+            }
+          `}
+        >
+          <StyledText desktopStyle="bodyDefaultRegular">{linkText}</StyledText>
+        </Link>
+      ) : null}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { Flex } from '../../../primitives'
+import {
+  ALIGN_FLEX_START,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  JUSTIFY_FLEX_START,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../../styles'
+import { SPACING } from '../../../ui-style-constants'
+
+interface ListItemDescriptorProps {
+  type: 'default' | 'large'
+  description: JSX.Element
+  content: JSX.Element
+  changeFlexDirection?: boolean
+}
+
+export const ListItemDescriptor = (
+  props: ListItemDescriptorProps
+): JSX.Element => {
+  const { description, content, type, changeFlexDirection = false } = props
+  let justifyContent = 'none'
+  if (type === 'default' && changeFlexDirection) {
+    justifyContent = JUSTIFY_FLEX_START
+  } else if (type === 'default') {
+    justifyContent = JUSTIFY_SPACE_BETWEEN
+  }
+
+  return (
+    <Flex
+      flexDirection={changeFlexDirection ? DIRECTION_COLUMN : DIRECTION_ROW}
+      gridGap={SPACING.spacing8}
+      width="100%"
+      alignItems={ALIGN_FLEX_START}
+      justifyContent={justifyContent}
+      padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
+    >
+      {description}
+      {content}
+    </Flex>
+  )
+}

package/src/atoms/ListItem/ListItemChildren/index.ts

@@ -0,0 +1,2 @@
+export * from './ListItemCustomize'
+export * from './ListItemDescriptor'