@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.17

package/src/molecules/Tabs/index.tsx

@@ -0,0 +1,94 @@
+import { css } from 'styled-components'
+import { TYPOGRAPHY, SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { POSITION_RELATIVE, DIRECTION_ROW } from '../../styles'
+import { Btn, Flex } from '../../primitives'
+
+const DEFAULT_TAB_STYLE = css`
+  ${TYPOGRAPHY.pSemiBold}
+  background-color: ${COLORS.purple30};
+  border-radius: ${BORDERS.borderRadius8};
+  padding: ${SPACING.spacing8} ${SPACING.spacing16};
+  position: ${POSITION_RELATIVE};
+
+  &:hover {
+    background-color: ${COLORS.purple35};
+  }
+
+  &:focus-visible {
+    outline-offset: 2px;
+    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+
+    &:hover {
+      background-color: ${COLORS.grey30};
+    }
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadius16};
+    box-shadow: none;
+    font-size: ${TYPOGRAPHY.fontSize22};
+    font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+    line-height: ${TYPOGRAPHY.lineHeight28};
+    padding: ${SPACING.spacing16} ${SPACING.spacing24};
+    text-transform: ${TYPOGRAPHY.textTransformNone};
+
+    &:focus-visible {
+      outline-offset: 3px;
+      outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+    }
+  }
+`
+const CURRENT_TAB_STYLE = css`
+  ${DEFAULT_TAB_STYLE}
+  color: ${COLORS.white};
+  background-color: ${COLORS.purple50};
+
+  &:hover {
+    background-color: ${COLORS.purple55};
+  }
+`
+const DEFAULT_CONTAINER_STYLE = css`
+  grid-gap: ${SPACING.spacing4};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    grid-gap: ${SPACING.spacing8};
+  }
+`
+
+export interface TabProps {
+  text: string
+  onClick: () => void
+  isActive?: boolean
+  disabled?: boolean
+}
+
+export interface TabsProps {
+  tabs: TabProps[]
+}
+
+export function Tabs(props: TabsProps): JSX.Element {
+  const { tabs } = props
+
+  return (
+    <Flex flexDirection={DIRECTION_ROW} css={DEFAULT_CONTAINER_STYLE}>
+      {tabs.map((tab, index) => (
+        <Btn
+          data-testid={`tab_${index}_${tab.text}`}
+          key={index}
+          onClick={() => {
+            tab.onClick()
+          }}
+          css={tab.isActive === true ? CURRENT_TAB_STYLE : DEFAULT_TAB_STYLE}
+          disabled={tab.disabled}
+        >
+          {tab.text}
+        </Btn>
+      ))}
+    </Flex>
+  )
+}

package/src/molecules/index.ts

@@ -0,0 +1,8 @@
+export * from './Banner'
+export * from './DeckInfoLabel'
+export * from './DeckLabel'
+export * from './DropdownMenu'
+export * from './InfoScreen'
+export * from './LiquidIcon'
+export * from './ParametersTable'
+export * from './Tabs'

package/src/nav/SidePanel.module.css

@@ -0,0 +1,34 @@
+@import '../index.module.css';
+
+:root {
+  --sidebar-width: 18.25rem;
+}
+
+.panel {
+  flex-shrink: 0;
+  overflow: visible;
+  border-right: var(--bd-light);
+  background-color: var(--c-bg-light);
+  position: relative;
+  padding: 0 4px;
+}
+
+.title_bar {
+  display: flex;
+  align-items: center;
+  width: var(--sidebar-width);
+}
+
+.title {
+  font-size: var(--fs-header); /* from legacy --font-header-dark */
+  font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
+  color: var(--c-font-dark); /* from legacy --font-header-dark */
+  margin: 1rem auto;
+}
+
+.panel_contents {
+  width: var(--sidebar-width);
+  height: calc(100vh - 3.5rem);
+  overflow-x: hidden;
+  overflow-y: auto;
+}

package/src/nav/SidePanel.stories.tsx

@@ -0,0 +1,29 @@
+import type * as React from 'react'
+import { SidePanel as SidePanelComponent } from './SidePanel'
+import { Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Side Panel',
+  decorators: [
+    Story => (
+      <Flex>
+        <Story />
+      </Flex>
+    ),
+  ],
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof SidePanelComponent>
+> = args => <SidePanelComponent {...args} />
+export const SidePanel = Template.bind({})
+SidePanel.args = {
+  title: 'Title goes here',
+  children: (
+    <Flex justifyContent={JUSTIFY_CENTER} alignItems={ALIGN_CENTER}>
+      <Text>Side Panel Children</Text>
+    </Flex>
+  ),
+}

package/src/nav/SidePanel.tsx

@@ -0,0 +1,21 @@
+// collapsable side panel
+import type * as React from 'react'
+import styles from './SidePanel.module.css'
+
+export interface SidePanelProps {
+  title?: string
+  children?: React.ReactNode
+}
+
+export function SidePanel(props: SidePanelProps): JSX.Element {
+  return (
+    <div className={styles.panel}>
+      {props.title != null ? (
+        <div className={styles.title_bar}>
+          <h2 className={styles.title}>{props.title}</h2>
+        </div>
+      ) : null}
+      <div className={styles.panel_contents}>{props.children}</div>
+    </div>
+  )
+}

package/src/nav/index.ts

@@ -0,0 +1,2 @@
+// navigational components
+export * from './SidePanel'

package/src/organisms/DeckLabelSet/DeckLabelSet.stories.tsx

@@ -0,0 +1,46 @@
+import { BORDERS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+
+import { DeckLabelSet as DeckLabelSetComponent } from '.'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const mockDeckLabels = [
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+  },
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+  },
+]
+
+const meta: Meta<typeof DeckLabelSetComponent> = {
+  title: 'Library/Organisms/DeckLabelSet',
+  component: DeckLabelSetComponent,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof DeckLabelSetComponent>
+
+export const DeckLabel: Story = {
+  args: {
+    // width and height from Figma
+    deckLabels: mockDeckLabels,
+    width: 31.9375,
+    height: 5.75,
+    x: 0,
+    y: 0,
+  },
+}

package/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx

@@ -0,0 +1,49 @@
+import type * as React from 'react'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { DeckLabel } from '../../../molecules/DeckLabel'
+import { DeckLabelSet } from '..'
+
+vi.mock('../../../molecules/DeckLabel')
+
+const mockDeckLabels = [
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+  },
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+  },
+]
+
+const render = (props: React.ComponentProps<typeof DeckLabelSet>) => {
+  return renderWithProviders(<DeckLabelSet {...props} />)
+}
+describe('DeckLabelSet', () => {
+  let props: React.ComponentProps<typeof DeckLabelSet>
+
+  beforeEach(() => {
+    props = {
+      x: 1,
+      y: 1,
+      width: 50,
+      height: 50,
+      deckLabels: mockDeckLabels,
+    }
+    vi.mocked(DeckLabel).mockReturnValue(<div>mock DeckLabels</div>)
+  })
+
+  it('should render blue border and DeckLabel', () => {
+    render(props)
+    expect(screen.getAllByText('mock DeckLabels').length).toBe(2)
+    const deckLabelSet = screen.getByTestId('DeckLabeSet')
+    expect(deckLabelSet).toHaveStyle(`border: 1.5px solid ${COLORS.blue50}`)
+    expect(deckLabelSet).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
+  })
+})

package/src/organisms/DeckLabelSet/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import { Box } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignDiv } from '../../hardware-sim'
+
+import { DeckLabel } from '../../molecules/DeckLabel'
+import { SPACING } from '../../ui-style-constants'
+
+import type { DeckLabelProps } from '../../molecules/DeckLabel'
+
+interface DeckLabelSetProps {
+  deckLabels: DeckLabelProps[]
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const DeckLabelSetComponent = (
+  props: DeckLabelSetProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+): JSX.Element => {
+  const { deckLabels, x, y, width, height } = props
+
+  return (
+    <RobotCoordsForeignDiv x={x} y={y}>
+      <StyledBox width={width} height={height} data-testid="DeckLabeSet" />
+      <LabelContainer ref={ref}>
+        {deckLabels.length > 0
+          ? deckLabels.map((deckLabel, index) => (
+              <DeckLabel
+                key={`DeckLabel_${index}`}
+                maxWidth={`calc(${width}px - ${SPACING.spacing16})`}
+                {...deckLabel}
+                isLast={deckLabels.length - 1 === index}
+              />
+            ))
+          : null}
+      </LabelContainer>
+    </RobotCoordsForeignDiv>
+  )
+}
+
+export const DeckLabelSet = React.forwardRef<HTMLDivElement, DeckLabelSetProps>(
+  DeckLabelSetComponent
+)
+
+const StyledBox = styled(Box)`
+  border-radius: ${BORDERS.borderRadius4};
+  border: 1.5px solid ${COLORS.blue50};
+`
+
+const LabelContainer = styled.div`
+  padding-left: ${SPACING.spacing12};
+  & > *:not(:first-child):not(:last-child) {
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+    border-top-right-radius: ${BORDERS.borderRadius4};
+  }
+
+  & > *:first-child {
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+  }
+
+  & > *:last-child {
+    border-bottom-left-radius: ${BORDERS.borderRadius4};
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+  }
+`

package/src/organisms/EndUserAgreementFooter/__tests__/EndUserAgreementFooter.test.tsx

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { EndUserAgreementFooter } from '../index'
+
+const render = () => {
+  return renderWithProviders(<EndUserAgreementFooter />)
+}
+
+describe('EndUserAgreementFooter', () => {
+  it('should render text and links', () => {
+    render()
+    screen.getByText('Copyright © 2024 Opentrons')
+    expect(
+      screen.getByRole('link', { name: 'privacy policy' })
+    ).toHaveAttribute('href', 'https://opentrons.com/privacy-policy')
+    expect(
+      screen.getByRole('link', { name: 'end user license agreement' })
+    ).toHaveAttribute('href', 'https://opentrons.com/eula')
+  })
+})

package/src/organisms/EndUserAgreementFooter/index.tsx

@@ -0,0 +1,49 @@
+import { StyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
+import { Flex, Link } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  TEXT_DECORATION_UNDERLINE,
+} from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+
+const PRIVACY_POLICY_URL = 'https://opentrons.com/privacy-policy'
+const EULA_URL = 'https://opentrons.com/eula'
+
+export function EndUserAgreementFooter(): JSX.Element {
+  return (
+    <Flex
+      backgroundColor={COLORS.grey10}
+      padding={SPACING.spacing24}
+      width="100%"
+      alignItems={ALIGN_CENTER}
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing8}
+    >
+      <StyledText desktopStyle="captionRegular">
+        By continuing, you agree to the Opentrons{' '}
+        <Link
+          external
+          href={PRIVACY_POLICY_URL}
+          color={COLORS.black90}
+          textDecoration={TEXT_DECORATION_UNDERLINE}
+        >
+          privacy policy
+        </Link>{' '}
+        and{' '}
+        <Link
+          external
+          href={EULA_URL}
+          color={COLORS.black90}
+          textDecoration={TEXT_DECORATION_UNDERLINE}
+        >
+          end user license agreement
+        </Link>
+      </StyledText>
+      <StyledText desktopStyle="captionRegular">
+        Copyright © 2024 Opentrons
+      </StyledText>
+    </Flex>
+  )
+}

package/src/organisms/Toolbox/Toolbox.stories.tsx

@@ -0,0 +1,23 @@
+import { Toolbox as ToolboxComponent } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ToolboxComponent> = {
+  title: 'Library/Organisms/Toolbox',
+  component: ToolboxComponent,
+  decorators: [Story => <Story />],
+}
+
+export default meta
+type Story = StoryObj<typeof ToolboxComponent>
+
+export const Toolbox: Story = {
+  args: {
+    title: 'Header',
+    children: <div>Slot Component: Replace me using the component panel.</div>,
+    confirmButtonText: 'Done',
+    onCloseClick: () => {},
+    titleIconName: 'swap-horizontal',
+    closeButtonText: 'Text link',
+    onConfirmClick: () => {},
+  },
+}

package/src/organisms/Toolbox/__tests__/Toolbox.test.tsx

@@ -0,0 +1,35 @@
+import type * as React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { Toolbox } from '../index'
+
+const render = (props: React.ComponentProps<typeof Toolbox>) => {
+  return renderWithProviders(<Toolbox {...props} />)
+}
+
+describe('Toolbox', () => {
+  let props: React.ComponentProps<typeof Toolbox>
+
+  it('should render text and buttons', () => {
+    props = {
+      title: <div>mock header</div>,
+      children: <div>mock children</div>,
+      confirmButtonText: 'done',
+      onCloseClick: vi.fn(),
+      closeButton: <div>exit</div>,
+      onConfirmClick: vi.fn(),
+      secondaryHeaderButton: <div>mock secondary header button</div>,
+    }
+    render(props)
+    screen.getByText('mock header')
+    screen.getByText('done')
+    fireEvent.click(screen.getByTestId('Toolbox_confirmButton'))
+    expect(props.onConfirmClick).toHaveBeenCalled()
+    screen.getByText('mock children')
+    screen.getByText('exit')
+    fireEvent.click(screen.getByTestId('Toolbox_closeButton'))
+    expect(props.onCloseClick).toHaveBeenCalled()
+    screen.getByText('mock secondary header button')
+  })
+})

package/src/organisms/Toolbox/index.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from 'react'
+import { Box, Btn, Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
+  NO_WRAP,
+  POSITION_FIXED,
+} from '../../styles'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
+import { PrimaryButton } from '../../atoms'
+import { textDecorationUnderline } from '../../ui-style-constants/typography'
+
+export interface ToolboxProps {
+  title: JSX.Element
+  children: React.ReactNode
+  disableCloseButton?: boolean
+  width?: string
+  height?: string
+  confirmButtonText?: string
+  onConfirmClick?: () => void
+  confirmButton?: JSX.Element
+  onCloseClick?: () => void
+  closeButton?: JSX.Element
+  side?: 'left' | 'right'
+  horizontalSide?: 'top' | 'bottom'
+  titlePadding?: string
+  childrenPadding?: string
+  subHeader?: JSX.Element | null
+  secondaryHeaderButton?: JSX.Element
+  position?: string
+}
+
+export function Toolbox(props: ToolboxProps): JSX.Element {
+  const {
+    title,
+    children,
+    confirmButtonText,
+    onCloseClick,
+    onConfirmClick,
+    closeButton,
+    height = '100%',
+    disableCloseButton = false,
+    width = '19.5rem',
+    side = 'right',
+    horizontalSide = 'bottom',
+    confirmButton,
+    titlePadding = SPACING.spacing16,
+    childrenPadding = SPACING.spacing16,
+    subHeader,
+    secondaryHeaderButton,
+    position = POSITION_FIXED,
+  } = props
+
+  const slideOutRef = useRef<HTMLDivElement>(null)
+  const [isScrolledToBottom, setIsScrolledToBottom] = useState<boolean>(false)
+  const handleScroll = (): void => {
+    if (slideOutRef.current == null) return
+    const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current
+    if (scrollTop + clientHeight === scrollHeight) {
+      setIsScrolledToBottom(true)
+    } else {
+      setIsScrolledToBottom(false)
+    }
+  }
+
+  useEffect(() => {
+    handleScroll()
+  }, [slideOutRef])
+
+  const positionStyles =
+    position === POSITION_FIXED
+      ? {
+          ...(side === 'right' && { right: '0' }),
+          ...(side === 'left' && { left: '0' }),
+          ...(horizontalSide === 'bottom' && { bottom: '0' }),
+          ...(horizontalSide === 'top' && { top: '5rem' }),
+          zIndex: 10,
+        }
+      : {}
+  return (
+    <Flex
+      cursor="auto"
+      backgroundColor={COLORS.white}
+      boxShadow="0px 3px 6px rgba(0, 0, 0, 0.23)"
+      height={height}
+      {...positionStyles}
+      borderRadius={BORDERS.borderRadius8}
+      width={width}
+      flex="0"
+    >
+      <Flex
+        width={width}
+        height="100%"
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+      >
+        <Flex
+          padding={titlePadding}
+          flexDirection={DIRECTION_COLUMN}
+          borderBottom={`1px solid ${COLORS.grey30}`}
+        >
+          {subHeader != null ? subHeader : null}
+          <Flex
+            justifyContent={JUSTIFY_SPACE_BETWEEN}
+            alignItems={ALIGN_CENTER}
+            gridGap={SPACING.spacing12}
+          >
+            {title}
+            <Flex gridGap={SPACING.spacing4}>
+              {secondaryHeaderButton != null ? secondaryHeaderButton : null}
+              {onCloseClick != null && closeButton != null ? (
+                <Btn
+                  disabled={disableCloseButton}
+                  onClick={onCloseClick}
+                  textDecoration={textDecorationUnderline}
+                  data-testid="Toolbox_closeButton"
+                  whiteSpace={NO_WRAP}
+                >
+                  {closeButton}
+                </Btn>
+              ) : null}
+            </Flex>
+          </Flex>
+        </Flex>
+        <Box
+          padding={childrenPadding}
+          flex="1 1 auto"
+          overflowY="auto"
+          ref={slideOutRef}
+          onScroll={handleScroll}
+        >
+          {children}
+        </Box>
+        {(onConfirmClick != null && confirmButtonText != null) ||
+        confirmButton != null ? (
+          <Box
+            padding={SPACING.spacing16}
+            boxShadow={isScrolledToBottom ? 'none' : '0px -4px 12px #0000001a'}
+            width="100%"
+            borderTop={`1px solid ${COLORS.grey30}`}
+            alignItems={ALIGN_CENTER}
+          >
+            {onConfirmClick != null && confirmButtonText != null ? (
+              <PrimaryButton
+                width="100%"
+                data-testid="Toolbox_confirmButton"
+                onClick={onConfirmClick}
+              >
+                {confirmButtonText}
+              </PrimaryButton>
+            ) : null}
+            {confirmButton != null ? confirmButton : null}
+          </Box>
+        ) : null}
+      </Flex>
+    </Flex>
+  )
+}

package/src/organisms/index.ts

@@ -0,0 +1,3 @@
+export * from './DeckLabelSet'
+export * from './EndUserAgreementFooter'
+export * from './Toolbox'

package/src/primitives/Box.stories.tsx

@@ -0,0 +1,25 @@
+import { COLORS, BORDERS } from '../helix-design-system'
+import { SPACING } from '../ui-style-constants'
+import { Box as BoxComponent } from './Box'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof BoxComponent> = {
+  title: 'Library/Atoms/Box',
+  component: BoxComponent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof BoxComponent>
+
+export const Box: Story = {
+  args: {
+    children:
+      'This is a simple box atom that accepts all primitive styling props.',
+    backgroundColor: COLORS.grey60,
+    border: `1px ${BORDERS.styleSolid} black`,
+    padding: SPACING.spacing16,
+    maxWidth: '20rem',
+  },
+}