@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/atoms/MenuList/__tests__/MenuItem.test.tsx

@@ -0,0 +1,50 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
+import { MenuItem } from '../MenuItem'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MenuItem>) => {
+  return renderWithProviders(<MenuItem {...props} />)[0]
+}
+
+describe('MenuItem', () => {
+  let props: ComponentProps<typeof MenuItem>
+
+  beforeEach(() => {
+    props = {
+      children: 'mockMenuItem',
+      isAlert: false,
+    }
+  })
+
+  it('render button with styles', () => {
+    render(props)
+    const menuItem = screen.getByText('mockMenuItem')
+    expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(menuItem).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(menuItem)
+      .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
+    ${SPACING.spacing12}`)
+    expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+  })
+
+  it('render button with styles disabled', () => {
+    props = {
+      ...props,
+      disabled: true,
+    }
+    render(props)
+    const menuItem = screen.getByText('mockMenuItem')
+    expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(menuItem).toHaveStyle(`color: ${COLORS.grey40}`)
+    expect(menuItem)
+      .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
+    ${SPACING.spacing12}`)
+    expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+  })
+})

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

@@ -0,0 +1,37 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { MenuList } from '..'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MenuList>) => {
+  return renderWithProviders(<MenuList {...props} />)[0]
+}
+
+const mockBtn = <div key="fakeKey">mockBtn</div>
+
+describe('MenuList', () => {
+  let props: ComponentProps<typeof MenuList>
+  beforeEach(() => {
+    props = {
+      children: mockBtn,
+    }
+  })
+
+  it('renders a child not on device', () => {
+    render(props)
+    screen.getByText('mockBtn')
+  })
+  it('renders isOnDevice child, clicking background overlay calls onClick', () => {
+    props = {
+      ...props,
+      isOnDevice: true,
+      onClick: vi.fn(),
+    }
+    render(props)
+    fireEvent.click(screen.getByLabelText('BackgroundOverlay_ModalShell'))
+    expect(props.onClick).toHaveBeenCalled()
+  })
+})

package/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { OverflowBtn } from '../OverflowBtn'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof OverflowBtn>) => {
+  return renderWithProviders(<OverflowBtn {...props} />)[0]
+}
+
+describe('OverflowBtn', () => {
+  it('renders a clickable button', () => {
+    const handleClick = vi.fn()
+    render({
+      onClick: handleClick,
+    })
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders a hover state', () => {
+    render({
+      onClick: vi.fn(),
+    })
+    expect(screen.getByRole('button')).toHaveStyle(
+      `background-color: ${COLORS.transparent}`
+    )
+  })
+})

package/src/atoms/MenuList/index.tsx

@@ -0,0 +1,50 @@
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { ModalShell } from '../../modals'
+import { Flex } from '../../primitives'
+import {
+  DIRECTION_COLUMN,
+  JUSTIFY_CENTER,
+  POSITION_ABSOLUTE,
+} from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+
+import type { MouseEventHandler, ReactNode } from 'react'
+
+interface MenuListProps {
+  children: ReactNode
+  isOnDevice?: boolean
+  onClick?: MouseEventHandler
+}
+
+export const MenuList = (props: MenuListProps): JSX.Element | null => {
+  const { children, isOnDevice = false, onClick = null } = props
+  return isOnDevice && onClick != null ? (
+    <ModalShell
+      borderRadius={BORDERS.borderRadius16}
+      width="max-content"
+      onOutsideClick={onClick}
+    >
+      <Flex
+        boxShadow={BORDERS.shadowSmall}
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_CENTER}
+      >
+        {children}
+      </Flex>
+    </ModalShell>
+  ) : (
+    <Flex
+      borderRadius="4px 4px 0px 0px"
+      zIndex={10}
+      boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
+      position={POSITION_ABSOLUTE}
+      backgroundColor={COLORS.white}
+      top="2.6rem"
+      right={`calc(50% + ${SPACING.spacing4})`}
+      flexDirection={DIRECTION_COLUMN}
+      width="max-content"
+    >
+      {children}
+    </Flex>
+  )
+}

package/src/atoms/Snackbar/Snackbar.stories.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  JUSTIFY_CENTER,
+  LegacyStyledText,
+  PrimaryButton,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
+
+import { Snackbar } from './index'
+
+import type { Meta, Story } from '@storybook/react'
+
+export default {
+  title: 'Helix/Atoms/Snackbar',
+  component: Snackbar,
+  parameters: VIEWPORT.touchScreenViewport,
+} as Meta
+
+const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
+  const [isShowSnackbar, setIsShowSnackbar] = React.useState<boolean>(false)
+
+  const handleClick = (): void => {
+    setIsShowSnackbar(true)
+  }
+
+  return (
+    <>
+      <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
+        <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
+        <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
+          <LegacyStyledText as="p">
+            When clicking the button, the Snackbar shows up in the bottom.
+          </LegacyStyledText>
+          <LegacyStyledText as="p">
+            By default the Snackbar will disappear after 4 seconds.
+          </LegacyStyledText>
+        </Flex>
+      </Flex>
+      {isShowSnackbar && (
+        <Flex
+          alignItems={ALIGN_CENTER}
+          justifyContent={JUSTIFY_CENTER}
+          width="100%"
+          position="absolute"
+          bottom={SPACING.spacing40}
+          zIndex={1000}
+        >
+          <Snackbar
+            {...args}
+            onClose={() => {
+              setIsShowSnackbar(false)
+            }}
+          />
+        </Flex>
+      )}
+    </>
+  )
+}
+
+export const SnackbarComponent = DefaultTemplate.bind({})
+SnackbarComponent.args = {
+  message: 'Short and sweet message',
+}

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

@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import '@testing-library/jest-dom/vitest'
+
+import { act, screen } from '@testing-library/react'
+
+import { Snackbar } from '..'
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Snackbar>) => {
+  return renderWithProviders(<Snackbar {...props} />)[0]
+}
+
+describe('Snackbar', () => {
+  let props: ComponentProps<typeof Snackbar>
+  beforeEach(() => {
+    props = {
+      message: 'test message',
+      onClose: vi.fn(),
+    }
+  })
+
+  it('renders correct message', () => {
+    render(props)
+    screen.getByText('test message')
+  })
+
+  it('should have proper styling', () => {
+    props = {
+      message: 'test message',
+    }
+    render(props)
+    const testSnackbar = screen.getByTestId('Snackbar')
+    expect(testSnackbar).toHaveStyle(`background-color: ${COLORS.black90}`)
+  })
+
+  it('after 4 seconds the snackbar should be closed automatically', async () => {
+    vi.useFakeTimers()
+    props = {
+      message: 'test message',
+      duration: 4000,
+      onClose: vi.fn(),
+    }
+    render(props)
+    screen.getByText('test message')
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(props.onClose).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(props.onClose).toHaveBeenCalled()
+  })
+
+  it('should stay more than 4 seconds when given a longer duration', async () => {
+    vi.useFakeTimers()
+    props = {
+      message: 'test message',
+      duration: 8000,
+      onClose: vi.fn(),
+    }
+    render(props)
+    screen.getByText('test message')
+    act(() => {
+      vi.advanceTimersByTime(4100)
+    })
+    expect(props.onClose).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(props.onClose).toHaveBeenCalled()
+  })
+})

package/src/atoms/Snackbar/index.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER } from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+import type { StyleProps } from '../../primitives'
+
+export interface SnackbarProps extends StyleProps {
+  message: string
+  onClose?: () => void
+  duration?: number
+}
+
+const SNACKBAR_ANIMATION_DURATION = 500
+
+const ODD_ANIMATION_OPTIMIZATIONS = `
+  backface-visibility: hidden;
+  perspective: 1000;
+  will-change: opacity;
+  `
+
+const OPEN_STYLE = css`
+  animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
+  animation-name: fadein;
+  overflow: hidden;
+  ${ODD_ANIMATION_OPTIMIZATIONS}
+
+  @keyframes fadein {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`
+
+const CLOSE_STYLE = css`
+  animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
+  animation-name: fadeout;
+  overflow: hidden;
+  ${ODD_ANIMATION_OPTIMIZATIONS}
+
+  @keyframes fadeout {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+`
+
+export function Snackbar(props: SnackbarProps): JSX.Element {
+  const { message, onClose, duration = 4000, ...styleProps } = props
+  const [isClosed, setIsClosed] = useState<boolean>(false)
+
+  const animationStyle = isClosed ? CLOSE_STYLE : OPEN_STYLE
+
+  setTimeout(() => {
+    setIsClosed(true)
+    setTimeout(() => {
+      onClose?.()
+    }, SNACKBAR_ANIMATION_DURATION - 50)
+  }, duration)
+
+  return (
+    <Flex
+      css={animationStyle}
+      alignItems={ALIGN_CENTER}
+      borderRadius={BORDERS.borderRadius8}
+      boxShadow={BORDERS.shadowSmall}
+      backgroundColor={COLORS.black90}
+      maxWidth="max-content"
+      padding={`${SPACING.spacing20} ${SPACING.spacing24}`}
+      data-testid="Snackbar"
+      color={COLORS.white}
+      {...styleProps}
+    >
+      <StyledText
+        oddStyle="bodyTextSemiBold"
+        desktopStyle="bodyDefaultSemiBold"
+      >
+        {message}
+      </StyledText>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { StepMeter } from '../'
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const renderer = (props: ComponentProps<typeof StepMeter>) => {
+  return renderWithProviders(<StepMeter {...props} />)
+}
+
+describe('StepMeter', () => {
+  let props: ComponentProps<typeof StepMeter>
+
+  beforeEach(() => {
+    props = {
+      totalSteps: 10,
+      currentStep: 5,
+    }
+  })
+
+  it('should render StepMeterContainer', () => {
+    renderer(props)
+
+    const stepMeterContainer = screen.getByTestId(
+      'StepMeter_StepMeterContainer'
+    )
+    expect(stepMeterContainer).toHaveStyle({
+      height: '0.25rem',
+      backgroundColor: COLORS.grey30,
+    })
+  })
+  it('should render StepMeterBar 50%', () => {
+    renderer(props)
+
+    const stepMeterBar = screen.getByTestId('StepMeter_StepMeterBar')
+    expect(stepMeterBar).toHaveStyle({
+      width: '50%',
+      height: '100%',
+      backgroundColor: COLORS.blue50,
+    })
+  })
+})

package/src/atoms/StepMeter/index.tsx

@@ -0,0 +1,62 @@
+import { css } from 'styled-components'
+
+import { COLORS } from '../../helix-design-system'
+import { Box } from '../../primitives'
+import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { StyleProps } from '../../primitives'
+
+interface StepMeterProps extends StyleProps {
+  totalSteps: number
+  currentStep: number | null
+}
+
+export const StepMeter = (props: StepMeterProps): JSX.Element => {
+  const { totalSteps, currentStep, ...styleProps } = props
+  const progress = currentStep != null ? currentStep : 0
+  const percentComplete = `${
+    //    this logic puts a cap at 100% percentComplete which we should never run into
+    currentStep != null && currentStep > totalSteps
+      ? 100
+      : (progress / totalSteps) * 100
+  }%`
+
+  return (
+    <Box
+      data-testid="StepMeter_StepMeterContainer"
+      css={StepMeterContainer(styleProps)}
+      {...styleProps}
+    >
+      <Box
+        data-testid="StepMeter_StepMeterBar"
+        css={StepMeterBar(percentComplete)}
+      />
+    </Box>
+  )
+}
+
+const StepMeterContainer = (
+  styleProps: StyleProps
+): FlattenSimpleInterpolation => css`
+  position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
+  height: ${SPACING.spacing4};
+  background-color: ${COLORS.grey30};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    height: ${SPACING.spacing12};
+  }
+`
+const StepMeterBar = (
+  percentComplete: string
+): FlattenSimpleInterpolation => css`
+  position: ${POSITION_ABSOLUTE};
+  top: 0;
+  height: 100%;
+  background-color: ${COLORS.blue50};
+  width: ${percentComplete};
+  webkit-transition: width 0.5s ease-in-out;
+  moz-transition: width 0.5s ease-in-out;
+  o-transition: width 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out;
+`

package/src/atoms/StyledText/LegacyStyledText.stories.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable storybook/prefer-pascal-case */
+import { Flex } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { LegacyStyledText } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof LegacyStyledText> = {
+  title: 'Library/Atoms/LegacyStyledText',
+  component: LegacyStyledText,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof LegacyStyledText>
+
+const dummyText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus sapien nunc dolor, aliquet nibh placerat et nisl, arcu. Pellentesque blandit sollicitudin vitae morbi morbi vulputate cursus tellus. Amet proin donec proin id aliquet in nullam.'
+
+export const h1: Story = {
+  args: {
+    as: 'h1',
+    children: dummyText,
+  },
+}
+
+export const h2: Story = {
+  args: {
+    as: 'h2',
+    children: dummyText,
+  },
+}
+
+export const h3: Story = {
+  args: {
+    as: 'h3',
+    children: dummyText,
+  },
+}
+
+export const h6: Story = {
+  args: {
+    as: 'h6',
+    children: dummyText,
+  },
+}
+
+export const p: Story = {
+  args: {
+    as: 'p',
+    children: dummyText,
+  },
+}
+
+export const label: Story = {
+  args: {
+    as: 'label',
+    children: dummyText,
+  },
+}
+
+export const h2SemiBold: Story = {
+  args: {
+    as: 'h2',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const h3SemiBold: Story = {
+  args: {
+    as: 'h3',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const h6SemiBold: Story = {
+  args: {
+    as: 'h6',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const pSemiBold: Story = {
+  args: {
+    as: 'p',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const labelSemiBold: Story = {
+  args: {
+    as: 'label',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}