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

package/src/atoms/MenuList/MenuItem.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+import { COLORS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { ALIGN_CENTER } from '../../styles'
+import type { StyleProps } from '../../primitives'
+
+interface ButtonProps extends StyleProps {
+  /** optional isAlert boolean to turn the background red, only seen in ODD */
+  isAlert?: boolean
+}
+export const MenuItem = styled.button<ButtonProps>`
+  text-align: ${TYPOGRAPHY.textAlignLeft};
+  font-size: ${TYPOGRAPHY.fontSizeP};
+  background-color: ${COLORS.transparent};
+  color: ${COLORS.black90};
+  padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
+    ${SPACING.spacing12};
+  border: ${props => (props.border != null ? props.border : 'inherit')};
+  border-radius: ${props =>
+    props.borderRadius != null ? props.borderRadius : 'inherit'};
+
+  &:hover {
+    background-color: ${COLORS.blue10};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.transparent};
+    color: ${COLORS.grey40};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    align-items: ${ALIGN_CENTER};
+    text-align: ${TYPOGRAPHY.textAlignCenter};
+    font-size: ${TYPOGRAPHY.fontSize28};
+    background-color: ${({ isAlert }) =>
+      isAlert != null ? COLORS.red50 : COLORS.transparent};
+    color: ${({ isAlert }) =>
+      isAlert != null ? COLORS.white : COLORS.black90};
+    padding: ${SPACING.spacing24};
+    height: 5.5rem;
+    line-height: ${TYPOGRAPHY.lineHeight36};
+    &:hover,
+    &:active {
+      background-color: ${({ isAlert }) =>
+        isAlert != null ? COLORS.red50 : COLORS.grey35};
+    }
+
+    &:disabled {
+      background-color: ${({ isAlert }) =>
+        isAlert != null ? COLORS.red50 : COLORS.transparent};
+      color: ${({ isAlert }) =>
+        isAlert != null ? COLORS.white : COLORS.grey50};
+    }
+  }
+`

package/src/atoms/MenuList/MenuList.stories.tsx

@@ -0,0 +1,31 @@
+import { action } from '@storybook/addon-actions'
+import { MenuList as MenuListComponent } from './index'
+import { MenuItem } from './MenuItem'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const menuBtn = 'example menu btn'
+
+const meta: Meta<typeof MenuListComponent> = {
+  title: 'Library/Atoms/MenuList',
+  component: MenuListComponent,
+  args: {
+    onClick: action('clicked'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof MenuListComponent>
+
+export const MenuList: Story = {
+  args: {
+    children: (
+      <>
+        <MenuItem>{menuBtn}</MenuItem>
+        <MenuItem>{menuBtn}</MenuItem>
+        <MenuItem>{menuBtn}</MenuItem>
+      </>
+    ),
+  },
+}

package/src/atoms/MenuList/OverflowBtn.stories.tsx

@@ -0,0 +1,17 @@
+import { OverflowBtn as OverflowBtnComponent } from './OverflowBtn'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof OverflowBtnComponent> = {
+  title: 'Library/Atoms/OverflowBtn',
+  component: OverflowBtnComponent,
+}
+export default meta
+
+type Story = StoryObj<typeof OverflowBtnComponent>
+
+export const OverflowBtn: Story = {
+  args: {
+    title: 'overflow btn with all the states',
+  },
+}

package/src/atoms/MenuList/OverflowBtn.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { css } from 'styled-components'
+
+import { Btn } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
+
+interface OverflowBtnProps extends React.ComponentProps<typeof Btn> {
+  fillColor?: string
+}
+export const OverflowBtn: (
+  props: OverflowBtnProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) => React.ReactNode = React.forwardRef(
+  (
+    props: OverflowBtnProps,
+    ref: React.ForwardedRef<HTMLInputElement>
+  ): 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}
+      >
+        <svg
+          width="19"
+          height="31"
+          viewBox="0 0 19 31"
+          fill={fillColor ?? COLORS.grey50}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="9.5" cy="9.5" r="1.5" />
+          <circle cx="9.5" cy="15.5" r="1.5" />
+          <circle cx="9.5" cy="21.5" r="1.5" />
+        </svg>
+      </Btn>
+    )
+  }
+)

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

@@ -0,0 +1,50 @@
+import type * as React from 'react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { COLORS } from '../../../helix-design-system'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
+
+import { MenuItem } from '../MenuItem'
+
+const render = (props: React.ComponentProps<typeof MenuItem>) => {
+  return renderWithProviders(<MenuItem {...props} />)[0]
+}
+
+describe('MenuItem', () => {
+  let props: React.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,36 @@
+import type * as React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { MenuList } from '..'
+
+const render = (props: React.ComponentProps<typeof MenuList>) => {
+  return renderWithProviders(<MenuList {...props} />)[0]
+}
+
+const mockBtn = <div key="fakeKey">mockBtn</div>
+
+describe('MenuList', () => {
+  let props: React.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,33 @@
+import type * as React from 'react'
+import { vi, it, expect, describe } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { OverflowBtn } from '../OverflowBtn'
+
+const render = (props: React.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 type * as React from 'react'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import {
+  DIRECTION_COLUMN,
+  JUSTIFY_CENTER,
+  POSITION_ABSOLUTE,
+} from '../../styles'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { ModalShell } from '../../modals'
+
+interface MenuListProps {
+  children: React.ReactNode
+  isOnDevice?: boolean
+  onClick?: React.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,67 @@
+import * as React from 'react'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  JUSTIFY_CENTER,
+  PrimaryButton,
+  SPACING,
+  LegacyStyledText,
+  VIEWPORT,
+} from '@opentrons/components'
+
+import { Snackbar } from './index'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/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,73 @@
+import type * as React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { screen, act } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { Snackbar } from '..'
+import { COLORS } from '../../../helix-design-system'
+
+const render = (props: React.ComponentProps<typeof Snackbar>) => {
+  return renderWithProviders(<Snackbar {...props} />)[0]
+}
+
+describe('Snackbar', () => {
+  let props: React.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,91 @@
+import { useState } from 'react'
+import { css } from 'styled-components'
+import { ALIGN_CENTER } from '../../styles'
+import { Flex } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+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/index.tsx

@@ -0,0 +1,53 @@
+import { css } from 'styled-components'
+import { Box } from '../../primitives'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
+
+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
+  }%`
+
+  const StepMeterContainer = css`
+    position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
+    height: ${SPACING.spacing4};
+    background-color: ${COLORS.grey30};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      height: ${SPACING.spacing12};
+    }
+  `
+  const StepMeterBar = 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;
+  `
+
+  return (
+    <Box
+      data-testid="StepMeter_StepMeterContainer"
+      css={StepMeterContainer}
+      {...styleProps}
+    >
+      <Box data-testid="StepMeter_StepMeterBar" css={StepMeterBar} />
+    </Box>
+  )
+}