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

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

@@ -1,105 +0,0 @@
-import * as React from 'react'
-
-import { Snackbar as SnackbarComponent } from '.'
-import { Flex, STYLE_PROPS } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  DIRECTION_ROW,
-  JUSTIFY_CENTER,
-} from '../../styles'
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { PrimaryButton } from '../buttons'
-import { StyledText } from '../StyledText'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof SnackbarComponent> = {
-  title: 'Helix/Atoms/Snackbar',
-  component: SnackbarComponent,
-  parameters: VIEWPORT.touchScreenViewport,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-    message: {
-      control: 'text',
-    },
-    duration: {
-      control: 'number',
-    },
-  },
-}
-
-// Define the render function as a React Functional Component
-const SnackbarRenderComponent: React.FC<
-  React.ComponentProps<typeof SnackbarComponent>
-> = args => {
-  const [isShowSnackbar, setIsShowSnackbar] = React.useState<boolean>(false)
-
-  const handleClick = (): void => {
-    setIsShowSnackbar(true)
-  }
-
-  return (
-    <>
-      <Flex
-        flexDirection={DIRECTION_ROW}
-        paddingY={SPACING.spacing16}
-        gap={SPACING.spacing8}
-      >
-        <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
-        <Flex flexDirection={DIRECTION_COLUMN}>
-          <StyledText
-            desktopStyle="bodyDefaultRegular"
-            oddStyle="level4HeaderRegular"
-          >
-            When clicking the button, the Snackbar shows up in the bottom.
-          </StyledText>
-          <StyledText
-            desktopStyle="bodyDefaultRegular"
-            oddStyle="level4HeaderRegular"
-          >
-            By default the Snackbar will disappear after 4 seconds.
-          </StyledText>
-        </Flex>
-      </Flex>
-      {isShowSnackbar && (
-        <Flex
-          alignItems={ALIGN_CENTER}
-          justifyContent={JUSTIFY_CENTER}
-          width="100%"
-          position="absolute"
-          bottom={SPACING.spacing40}
-          zIndex={1000}
-        >
-          <SnackbarComponent
-            {...args}
-            onClose={() => {
-              setIsShowSnackbar(false)
-            }}
-          />
-        </Flex>
-      )}
-    </>
-  )
-}
-
-const SnackbarTemplate: Story = {
-  render: args => <SnackbarRenderComponent {...args} />,
-}
-
-export default meta
-type Story = StoryObj<typeof SnackbarComponent>
-
-export const Snackbar: Story = {
-  ...SnackbarTemplate,
-  args: {
-    message: 'Short and sweet message',
-    duration: 4000,
-  },
-}

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

@@ -1,77 +0,0 @@
-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

@@ -1,102 +0,0 @@
-import { useEffect, 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;
-  `
-
-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
-
-  // Manages the snackbar closing sequencing
-  useEffect(() => {
-    if (duration == null || duration === 0) return
-
-    const closeTimer = setTimeout(() => {
-      // Trigger the closing animation
-      setIsClosed(true)
-
-      // Call onClose after animation completes, if it exists
-      onClose != null && setTimeout(onClose, SNACKBAR_ANIMATION_DURATION - 50)
-    }, duration)
-
-    return () => {
-      clearTimeout(closeTimer)
-    }
-  }, [duration, onClose])
-
-  return (
-    <Flex css={animationStyle} data-testid="Snackbar" {...styleProps}>
-      <StyledText
-        oddStyle="bodyTextSemiBold"
-        desktopStyle="bodyDefaultSemiBold"
-      >
-        {message}
-      </StyledText>
-    </Flex>
-  )
-}
-
-const COMMON_STYLE = css`
-  align-items: ${ALIGN_CENTER};
-  border-radius: ${BORDERS.borderRadius8};
-  box-shadow: ${BORDERS.shadowSmall};
-  background-color: ${COLORS.black90};
-  max-width: max-content;
-  padding: ${SPACING.spacing20} ${SPACING.spacing24};
-  color: ${COLORS.white};
-`
-
-const OPEN_STYLE = css`
-  ${COMMON_STYLE}
-  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`
-  ${COMMON_STYLE}
-  animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
-  animation-name: fadeout;
-  overflow: hidden;
-  ${ODD_ANIMATION_OPTIMIZATIONS}
-
-  @keyframes fadeout {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-`

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

@@ -1,45 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,107 +0,0 @@
-/* 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,
-  },
-}

package/src/atoms/StyledText/LegacyStyledText.tsx

@@ -1,96 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import { Text } from '../../primitives'
-import { RESPONSIVENESS, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { ComponentProps, ReactNode } from 'react'
-
-export interface LegacyProps extends ComponentProps<typeof Text> {
-  children?: ReactNode
-}
-
-const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
-  h1: css`
-    ${TYPOGRAPHY.h1Default};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.level1Header};
-    }
-  `,
-  h2: css`
-    ${TYPOGRAPHY.h2Regular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.level2HeaderRegular};
-    }
-  `,
-  h3: css`
-    ${TYPOGRAPHY.h3Regular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.level3HeaderRegular};
-    }
-  `,
-  h4: css`
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.level4HeaderRegular};
-    }
-  `,
-  h6: TYPOGRAPHY.h6Default,
-  p: css`
-    ${TYPOGRAPHY.pRegular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.bodyTextRegular}
-    }
-  `,
-  label: css`
-    ${TYPOGRAPHY.labelRegular}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.smallBodyTextRegular}
-    }
-  `,
-  h2SemiBold: css`
-    ${TYPOGRAPHY.h2SemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.level2HeaderSemiBold}
-    }
-  `,
-  h3SemiBold: css`
-    ${TYPOGRAPHY.h3SemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.level3HeaderSemiBold}
-    }
-  `,
-  h4SemiBold: TYPOGRAPHY.level4HeaderSemiBold,
-  h6SemiBold: TYPOGRAPHY.h6SemiBold,
-  pSemiBold: css`
-    ${TYPOGRAPHY.pSemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${TYPOGRAPHY.bodyTextSemiBold}
-    }
-  `,
-  labelSemiBold: css`
-    ${TYPOGRAPHY.labelSemiBold}
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      font-size: ${TYPOGRAPHY.fontSize20};
-      line-height: ${TYPOGRAPHY.lineHeight24};
-    }
-  `,
-  h2Bold: TYPOGRAPHY.level2HeaderBold,
-  h3Bold: TYPOGRAPHY.level3HeaderBold,
-  h4Bold: TYPOGRAPHY.level4HeaderBold,
-  pBold: TYPOGRAPHY.bodyTextBold,
-  labelBold: TYPOGRAPHY.smallBodyTextBold,
-}
-
-export const LegacyStyledText: (props: LegacyProps) => JSX.Element = styled(
-  Text
-)<LegacyProps>`
-  ${props => {
-    let fontWeight = ''
-    if (props.fontWeight === TYPOGRAPHY.fontWeightSemiBold) {
-      fontWeight = 'SemiBold'
-    } else if (props.fontWeight === TYPOGRAPHY.fontWeightBold) {
-      fontWeight = 'Bold'
-    }
-    return styleMap[`${props.as}${fontWeight}`]
-  }}
-`

package/src/atoms/StyledText/PlaceholderStyledText.tsx

@@ -1,46 +0,0 @@
-import clsx from 'clsx'
-
-import styles from './placeholderstyledtext.module.css'
-
-import type { ReactNode } from 'react'
-
-type StyleKey =
-  | 'headingSmallBold'
-  | 'captionBold'
-  | 'bodyDefaultSemiBold'
-  | 'smallBodyTextBold'
-
-interface PlaceholderStyledTextProps {
-  children: ReactNode
-  color?: string
-  desktopStyle?: string
-  oddStyle?: string
-}
-
-/**
- * @deprecated: NOTE: YOU SHOULD NOT BE USING THIS - THIS IS A TEMP COMPONENT
- * USED FOR PROTOCOL LIBRARY TO NOT USE STYLED-COMPONENTS. USE THIS
- * UNTIL WE MIGRATE STYLEDTEXT PROPERLY
- */
-export const PlaceholderStyledText = (
-  props: PlaceholderStyledTextProps
-): JSX.Element => {
-  const { children, color, desktopStyle, oddStyle } = props
-
-  const styleMap: Record<StyleKey, string> = {
-    headingSmallBold: styles.heading_small_bold,
-    captionBold: styles.caption_bold,
-    bodyDefaultSemiBold: styles.body_default_semi_bold,
-    smallBodyTextBold: styles.small_body_text_bold,
-  }
-  const combinedClassName = clsx(
-    desktopStyle != null ? styleMap[desktopStyle as StyleKey] : null,
-    oddStyle != null ? styleMap[oddStyle as StyleKey] : null
-  )
-
-  return (
-    <text className={combinedClassName} style={{ color: color ?? '' }}>
-      {children}
-    </text>
-  )
-}

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

@@ -1,47 +0,0 @@
-/* eslint-disable storybook/prefer-pascal-case */
-import { Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-import { HELIX_STYLES, ODD_STYLES, StyledText } from './index'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof StyledText> = {
-  title: 'Helix/Atoms/StyledText',
-  component: StyledText,
-  argTypes: {
-    oddStyle: {
-      control: {
-        type: 'select',
-      },
-      options: ODD_STYLES,
-    },
-    desktopStyle: {
-      control: {
-        type: 'select',
-      },
-      options: HELIX_STYLES,
-    },
-  },
-  decorators: [
-    Story => (
-      <Flex padding={SPACING.spacing16}>
-        <Story />
-      </Flex>
-    ),
-  ],
-}
-
-export default meta
-
-type Story = StoryObj<typeof StyledText>
-
-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 Example: Story = {
-  args: {
-    oddStyle: 'level1Header',
-    desktopStyle: 'displayBold',
-    children: dummyText,
-  },
-}