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

package/src/atoms/Toast/index.tsx

@@ -1,434 +0,0 @@
-import { useState } from 'react'
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn, Flex, Link } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  DIRECTION_ROW,
-  JUSTIFY_SPACE_BETWEEN,
-  NO_WRAP,
-} from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { truncateString } from '../../utils'
-import { StyledText } from '../StyledText'
-
-import type {
-  DefaultTheme,
-  FlattenSimpleInterpolation,
-  ThemedCssFunction,
-} from 'styled-components'
-import type { IconName, IconProps } from '../../icons'
-import type { StyleProps } from '../../primitives'
-
-export const SUCCESS_TOAST: 'success' = 'success'
-export const WARNING_TOAST: 'warning' = 'warning'
-export const ERROR_TOAST: 'error' = 'error'
-export const INFO_TOAST: 'info' = 'info'
-
-export type ToastType =
-  | typeof SUCCESS_TOAST
-  | typeof WARNING_TOAST
-  | typeof ERROR_TOAST
-  | typeof INFO_TOAST
-
-export interface ToastProps extends StyleProps {
-  id: string
-  message: string
-  type: ToastType
-  icon?: IconProps
-  closeButton?: boolean
-  buttonText?: string
-  onClose?: () => void
-  disableTimeout?: boolean
-  duration?: number
-  heading?: string
-  displayType?: 'desktop' | 'odd'
-  exitNow?: boolean
-  linkText?: string
-  onLinkClick?: () => void
-}
-
-// TODO: (jh: 08/10/23) refactor toast component and render logic.
-
-export const TOAST_ANIMATION_DURATION = 500
-
-export function Toast(props: ToastProps): JSX.Element {
-  const {
-    buttonText,
-    message,
-    type,
-    icon,
-    closeButton,
-    onClose,
-    disableTimeout = false,
-    duration = 7000,
-    heading,
-    displayType,
-    exitNow = false,
-    linkText,
-    onLinkClick = () => null,
-    ...styleProps
-  } = props
-  const [isClosed, setIsClosed] = useState<boolean>(exitNow)
-
-  // We want to be able to storybook both the ODD and the Desktop versions,
-  // so let it (and unit tests, for that matter) be able to pass in a parameter
-  // that overrides the app's hardware selector.
-  let showODDStyle = false
-  if (displayType === 'desktop') {
-    showODDStyle = false
-  } else if (displayType === 'odd') {
-    showODDStyle = true
-  }
-
-  let closeText: string | null = null
-  if (buttonText != null) {
-    closeText = buttonText
-  } else if (closeButton) {
-    if (displayType === 'odd') {
-      closeText = 'Close'
-    } else {
-      closeText = ''
-    }
-  }
-
-  const ANIMATION_OVERFLOW = `
-  overflow: hidden;
-  `
-  const ODD_ANIMATION_OPTIMIZATIONS = `
-  backface-visibility: hidden;
-  perspective: 1000;
-  will-change: opacity, transform;
-  `
-  const DESKTOP_ANIMATION_SLIDE_UP_AND_IN = css`
-    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
-    animation-name: slidein;
-    ${ANIMATION_OVERFLOW}
-
-    @keyframes slidein {
-      from {
-        transform: translateX(100%);
-      }
-      to {
-        transform: translateX(0%);
-      }
-    }
-  `
-  const DESKTOP_ANIMATION_SLIDE_DOWN_AND_OUT = css`
-    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
-    animation-name: slideout;
-    ${ANIMATION_OVERFLOW}
-
-    @keyframes slideout {
-      from {
-        transform: translateX(0%);
-      }
-      to {
-        transform: translateX(100%);
-      }
-    }
-  `
-
-  const desktopAnimation = isClosed
-    ? DESKTOP_ANIMATION_SLIDE_DOWN_AND_OUT
-    : DESKTOP_ANIMATION_SLIDE_UP_AND_IN
-
-  const ODD_ANIMATION_SLIDE_UP_AND_IN = css`
-    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
-    animation-name: slideup;
-    ${ANIMATION_OVERFLOW}
-    ${ODD_ANIMATION_OPTIMIZATIONS}
-
-    @keyframes slideup {
-      from {
-        transform: translate3d(0%, 50%, 0);
-        filter: opacity(0);
-      }
-      to {
-        transform: translate3d(0%, 0%, 0);
-        filter: opacity(100%);
-      }
-    }
-  `
-  const ODD_ANIMATION_SLIDE_DOWN_AND_OUT = css`
-    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
-    animation-name: slidedown;
-    ${ANIMATION_OVERFLOW}
-    ${ODD_ANIMATION_OPTIMIZATIONS}
-
-    @keyframes slidedown {
-      from {
-        filter: opacity(100%);
-      }
-      to {
-        filter: opacity(0);
-      }
-    }
-  `
-  const ODD_ANIMATION_FADE_UP_AND_OUT = css`
-    animation-duration: ${TOAST_ANIMATION_DURATION}ms;
-    animation-name: fadeUpAndOut;
-    ${ANIMATION_OVERFLOW}
-    ${ODD_ANIMATION_OPTIMIZATIONS}
-
-    @keyframes fadeUpAndOut {
-      from {
-        filter: opacity(100%);
-      }
-      to {
-        filter: opacity(0%);
-      }
-    }
-  `
-
-  const ODD_ANIMATION_NONE = css``
-
-  let oddAnimation: FlattenSimpleInterpolation | ThemedCssFunction<DefaultTheme>
-
-  if (isClosed) {
-    if (exitNow) {
-      oddAnimation = ODD_ANIMATION_FADE_UP_AND_OUT
-    } else {
-      oddAnimation = ODD_ANIMATION_SLIDE_DOWN_AND_OUT
-    }
-  } else {
-    if (exitNow) {
-      oddAnimation = ODD_ANIMATION_NONE
-    } else {
-      oddAnimation = ODD_ANIMATION_SLIDE_UP_AND_IN
-    }
-  }
-
-  const toastStyleByType: {
-    [k in ToastType]: {
-      iconName: IconName
-      color: string
-      backgroundColor: string
-    }
-  } = {
-    [ERROR_TOAST]: {
-      iconName: 'ot-alert',
-      color: COLORS.red60,
-      backgroundColor: `${showODDStyle ? COLORS.red30 : COLORS.red20}`,
-    },
-    [INFO_TOAST]: {
-      iconName: 'information',
-      color: COLORS.blue60,
-      backgroundColor: `${showODDStyle ? COLORS.blue30 : COLORS.blue20}`,
-    },
-    [SUCCESS_TOAST]: {
-      iconName: 'ot-check',
-      color: COLORS.green60,
-      backgroundColor: `${showODDStyle ? COLORS.green30 : COLORS.green20}`,
-    },
-    [WARNING_TOAST]: {
-      iconName: 'ot-alert',
-      color: `${COLORS.yellow60}`,
-      backgroundColor: `${showODDStyle ? COLORS.yellow30 : COLORS.yellow20}`,
-    },
-  }
-
-  const headingText =
-    heading !== undefined
-      ? showODDStyle
-        ? truncateString(heading, 45, 40)
-        : heading
-      : ''
-
-  const calculatedDuration = (
-    message: string,
-    heading: string,
-    duration: number | undefined
-  ): number => {
-    const combinedDuration = (message.length + heading.length) * 50
-    if (exitNow) return 0
-    if (duration !== undefined) {
-      return duration
-    }
-    if (combinedDuration < 2000) {
-      return 2000
-    }
-    if (combinedDuration > 7000) {
-      return 7000
-    }
-    return combinedDuration
-  }
-
-  // Handle dismissal of toast when no timer is set.
-  const onCloseHandler = (): void => {
-    setIsClosed(true)
-    setTimeout(() => {
-      onClose?.()
-    }, TOAST_ANIMATION_DURATION - 50)
-  }
-
-  const isAutomaticAnimationExit = !disableTimeout || exitNow
-
-  if (isAutomaticAnimationExit) {
-    setTimeout(() => {
-      setIsClosed(true)
-      setTimeout(() => {
-        onClose?.()
-      }, TOAST_ANIMATION_DURATION - 50)
-    }, calculatedDuration(message, headingText, duration))
-  }
-
-  // Require intentional clicking if links and close button present on toast.
-  const toastClose = (): void => {
-    if (closeButton == null || linkText == null) onCloseHandler()
-  }
-
-  return (
-    <Flex
-      css={showODDStyle ? oddAnimation : desktopAnimation}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-      alignItems={ALIGN_CENTER}
-      borderRadius={
-        showODDStyle ? BORDERS.borderRadius8 : BORDERS.borderRadius4
-      }
-      borderColor={toastStyleByType[type].color}
-      borderWidth={showODDStyle ? BORDERS.borderRadius4 : '1px'}
-      border={BORDERS.styleSolid}
-      boxShadow={BORDERS.shadowBig}
-      backgroundColor={toastStyleByType[type].backgroundColor}
-      onClick={toastClose}
-      // adjust padding when heading is present and creates extra column
-      padding={
-        showODDStyle
-          ? `${SPACING.spacing16} ${SPACING.spacing24}`
-          : `${heading != null ? SPACING.spacing4 : SPACING.spacing8} ${
-              SPACING.spacing8
-            } ${heading != null ? SPACING.spacing4 : SPACING.spacing8} ${
-              SPACING.spacing12
-            }`
-      }
-      data-testid={`Toast_${type}`}
-      height={showODDStyle ? '5.76rem' : 'auto'}
-      maxWidth={showODDStyle ? '60rem' : '88%'}
-      minWidth={showODDStyle ? '60rem' : '24rem'}
-      {...styleProps}
-    >
-      <Flex
-        alignItems={ALIGN_CENTER}
-        flexDirection={DIRECTION_ROW}
-        gridGap={SPACING.spacing8}
-        overflow="hidden"
-        width="100%"
-      >
-        <Icon
-          name={icon?.name ?? toastStyleByType[type].iconName}
-          color={toastStyleByType[type].color}
-          maxWidth={showODDStyle ? SPACING.spacing32 : SPACING.spacing16}
-          minWidth={showODDStyle ? SPACING.spacing32 : SPACING.spacing16}
-          marginRight={showODDStyle ? SPACING.spacing8 : '0'}
-          spin={icon?.spin != null ? icon.spin : false}
-          aria-label={`icon_${type}`}
-        />
-        <Flex
-          flexDirection={showODDStyle ? DIRECTION_ROW : DIRECTION_COLUMN}
-          overflow="hidden"
-          width={showODDStyle ? 'auto' : '100%'}
-        >
-          {headingText.length > 0 ? (
-            <StyledText
-              oddStyle="bodyTextSemiBold"
-              desktopStyle="bodyDefaultRegular"
-              marginRight={showODDStyle ? SPACING.spacing4 : undefined}
-              maxWidth={showODDStyle ? '30.375rem' : 'auto'}
-              overflow="hidden"
-              textOverflow="ellipsis"
-              whiteSpace={NO_WRAP}
-            >
-              {headingText}
-            </StyledText>
-          ) : null}
-          <Flex alignItems={ALIGN_CENTER}>
-            <StyledText
-              oddStyle="bodyTextSemiBold"
-              desktopStyle="bodyDefaultRegular"
-              overflow="hidden"
-              text-overflow="ellipsis"
-              white-space="nowrap"
-            >
-              {message}
-            </StyledText>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      <Flex alignItems={ALIGN_CENTER}>
-        {linkText ? (
-          <Link
-            role="button"
-            onClick={() => {
-              onLinkClick()
-              onCloseHandler()
-            }}
-            marginLeft={SPACING.spacing4}
-            marginRight={SPACING.spacing8}
-          >
-            <StyledText
-              fontSize={
-                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-              }
-              fontWeight={
-                showODDStyle
-                  ? TYPOGRAPHY.fontWeightSemiBold
-                  : TYPOGRAPHY.fontWeightRegular
-              }
-              lineHeight={
-                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-              }
-              textDecoration={
-                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-              }
-              textTransform={TYPOGRAPHY.textTransformCapitalize}
-              whiteSpace={NO_WRAP}
-            >
-              {linkText}
-            </StyledText>
-          </Link>
-        ) : null}
-        {closeText ? (
-          <Link
-            role="button"
-            onClick={() => {
-              onCloseHandler()
-            }}
-            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-          >
-            <StyledText
-              oddStyle="bodyTextSemiBold"
-              desktopStyle="bodyDefaultRegular"
-              textDecoration={
-                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-              }
-              textTransform={TYPOGRAPHY.textTransformCapitalize}
-              whiteSpace={NO_WRAP}
-            >
-              {closeText}
-            </StyledText>
-          </Link>
-        ) : null}
-      </Flex>
-      {!closeText && closeButton ? (
-        <Btn
-          onClick={() => {
-            onCloseHandler()
-          }}
-        >
-          <Icon
-            width={SPACING.spacing24}
-            height={SPACING.spacing24}
-            marginTop={SPACING.spacing6}
-            name="close"
-            aria-label="close_icon"
-          />
-        </Btn>
-      ) : null}
-    </Flex>
-  )
-}

package/src/atoms/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react'
-
-import { ToggleGroup as ToggleGroupComponent } from './index'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof ToggleGroupComponent> = {
-  title: 'Library/Atoms/ToggleGroup',
-  component: ToggleGroupComponent,
-}
-
-export default meta
-
-type Story = StoryObj<typeof ToggleGroupComponent>
-type ToggleGroupComponentProps = React.ComponentProps<
-  typeof ToggleGroupComponent
->
-
-const Template = (args: ToggleGroupComponentProps): JSX.Element => {
-  const [value, setValue] = React.useState<'left' | 'right'>('left')
-
-  return (
-    <ToggleGroupComponent
-      {...args}
-      leftClick={() => {
-        setValue('left')
-      }}
-      rightClick={() => {
-        setValue('right')
-      }}
-      selectedValue={value === 'left' ? 'left button' : 'right button'}
-    />
-  )
-}
-export const ToggleGroup: Story = {
-  render: Template,
-  args: {
-    leftText: 'left button',
-    rightText: 'right button',
-  },
-}

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

@@ -1,30 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { ToggleGroup } from '../index'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ToggleGroup>) => {
-  return renderWithProviders(<ToggleGroup {...props} />)
-}
-
-describe('ToggleGroup', () => {
-  let props: ComponentProps<typeof ToggleGroup>
-
-  it('should render text and buttons', () => {
-    props = {
-      leftText: 'mock leftText',
-      rightText: 'mock rightText',
-      leftClick: vi.fn(),
-      rightClick: vi.fn(),
-      selectedValue: 'mock leftText',
-    }
-    render(props)
-    fireEvent.click(screen.getByText('mock leftText'))
-    expect(props.leftClick).toHaveBeenCalled()
-    fireEvent.click(screen.getByText('mock rightText'))
-    expect(props.rightClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/ToggleGroup/index.tsx

@@ -1,91 +0,0 @@
-import { css } from 'styled-components'
-
-import { PrimaryButton } from '../../atoms/buttons/PrimaryButton'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
-import { spacing8 } from '../../ui-style-constants/spacing'
-import { StyledText } from '../StyledText'
-
-interface ToggleGroupProps {
-  leftText: string
-  rightText: string
-  leftClick: () => void
-  rightClick: () => void
-  selectedValue: string
-}
-
-export const ToggleGroup = (props: ToggleGroupProps): JSX.Element => {
-  const { leftText, rightText, leftClick, rightClick, selectedValue } = props
-
-  return (
-    <Flex css={BUTTON_GROUP_STYLES} key="toggleGroup">
-      <PrimaryButton
-        css={selectedValue === leftText ? ACTIVE_STYLE : DEFAULT_STYLE}
-        key={leftText}
-        onClick={leftClick}
-        data-testid="toggleGroup_leftButton"
-      >
-        <StyledText desktopStyle="bodyDefaultRegular">{leftText}</StyledText>
-      </PrimaryButton>
-      <PrimaryButton
-        css={selectedValue === rightText ? ACTIVE_STYLE : DEFAULT_STYLE}
-        key={rightText}
-        onClick={rightClick}
-        data-testid="toggleGroup_rightButton"
-      >
-        <StyledText desktopStyle="bodyDefaultRegular">{rightText}</StyledText>
-      </PrimaryButton>
-    </Flex>
-  )
-}
-
-const BUTTON_GROUP_STYLES = css`
-  border-radius: ${BORDERS.borderRadius8};
-  width: fit-content;
-
-  button {
-    height: 2.25rem;
-    width: auto;
-    box-shadow: none;
-    padding: ${spacing8};
-    &:focus {
-      box-shadow: none;
-      color: ${COLORS.white};
-      background-color: ${COLORS.blue50};
-    }
-
-    &:hover {
-      background-color: ${COLORS.grey10};
-      color: ${COLORS.black90};
-      box-shadow: 0 0 0;
-    }
-
-    &.active {
-      background-color: ${COLORS.blue50};
-      color: ${COLORS.white};
-    }
-  }
-
-  button:first-child {
-    border-radius: ${BORDERS.borderRadius8} 0 0 ${BORDERS.borderRadius8};
-    border-right: none;
-  }
-
-  button:last-child {
-    border-radius: 0 ${BORDERS.borderRadius8} ${BORDERS.borderRadius8} 0;
-    border-left: none;
-  }
-`
-
-const ACTIVE_STYLE = css`
-  background-color: ${COLORS.blue50};
-  color: ${COLORS.white};
-  pointer-events: none;
-  border: 1px ${COLORS.blue50} solid;
-`
-
-const DEFAULT_STYLE = css`
-  background-color: ${COLORS.white};
-  color: ${COLORS.black90};
-  border: 1px ${COLORS.grey30} solid;
-`

package/src/atoms/Tooltip/Tooltip.stories.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react'
-
-import { COLORS } from '../../helix-design-system'
-import { Flex, Link } from '../../primitives'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import {
-  TOOLTIP_AUTO,
-  TOOLTIP_TOP_START,
-  useHoverTooltip,
-} from '../../tooltips'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { PrimaryButton } from '../buttons'
-import { Tooltip } from './index'
-
-import type { Meta, Story } from '@storybook/react'
-
-export default {
-  title: 'App/Atoms/Tooltip',
-  decorators: [
-    Story => (
-      <Flex
-        justifyContent={JUSTIFY_CENTER}
-        alignItems={ALIGN_CENTER}
-        height="8rem"
-        width="100%"
-        backgroundColor={COLORS.grey10}
-      >
-        <Story />
-      </Flex>
-    ),
-  ],
-} as Meta
-
-// WithHover: Disabled button with tooltip app's general use case
-const WithHoverTemplate: Story<React.ComponentProps<typeof Tooltip>> = args => {
-  const { key, children, placement } = args
-  const [targetProps, tooltipProps] = useHoverTooltip({ placement })
-  return (
-    <>
-      <PrimaryButton disabled={true} {...targetProps}>
-        Hover me
-      </PrimaryButton>
-      <Tooltip key={key} tooltipProps={tooltipProps}>
-        {children}
-      </Tooltip>
-    </>
-  )
-}
-
-export const WithHoverTooltip = WithHoverTemplate.bind({})
-WithHoverTooltip.args = {
-  key: 'tooltipKey',
-  children: 'tooltip text',
-  placement: TOOLTIP_AUTO,
-}
-
-const WithClickTemplate: Story<React.ComponentProps<typeof Tooltip>> = args => {
-  const { key, children, width, placement } = args
-  const [showToolTip, setShowToolTip] = React.useState<boolean>(false)
-  const [targetProps, tooltipProps] = useHoverTooltip({
-    placement,
-  })
-
-  const handleCopy = async (): Promise<void> => {
-    setShowToolTip(true)
-  }
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      setShowToolTip(false)
-    }, 2000)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [showToolTip])
-
-  return (
-    <Link
-      fontSize={TYPOGRAPHY.fontSizeP}
-      onClick={handleCopy}
-      role="button"
-      {...targetProps}
-    >
-      Click me
-      {showToolTip && (
-        <Tooltip key={key} width={width} tooltipProps={tooltipProps}>
-          {children}
-        </Tooltip>
-      )}
-    </Link>
-  )
-}
-
-export const WithClickTooltip = WithClickTemplate.bind({})
-WithClickTooltip.args = {
-  key: 'tooltipKey',
-  children: 'tooltip text',
-  width: '5rem',
-  placement: TOOLTIP_TOP_START,
-}