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

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,
-}

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

@@ -1,80 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import '@testing-library/jest-dom/vitest'
-
-import { screen } from '@testing-library/react'
-
-import { Tooltip } from '..'
-import { COLORS } from '../../../helix-design-system'
-import { POSITION_ABSOLUTE } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { TOOLTIP_TOP } from '../../../tooltips'
-import { SPACING } from '../../../ui-style-constants'
-
-import type { ComponentProps, ReactNode } from 'react'
-
-const render = (props: ComponentProps<typeof Tooltip>) => {
-  return renderWithProviders(<Tooltip {...props} />)[0]
-}
-
-const placement = TOOLTIP_TOP
-const id = 'Tooltip_123'
-const tooltipRef = vi.fn()
-const tooltipStyle = {
-  position: POSITION_ABSOLUTE,
-  left: SPACING.spacing4,
-} as const
-const arrowRef = vi.fn()
-const arrowStyle = {
-  position: POSITION_ABSOLUTE,
-  left: SPACING.spacing8,
-} as const
-
-const MockTooltipProps = {
-  id: id,
-  placement: placement,
-  arrowStyle: arrowStyle,
-  arrowRef: arrowRef,
-  visible: true,
-  ref: tooltipRef,
-  style: tooltipStyle,
-}
-
-describe('Tooltip', () => {
-  let props: ComponentProps<typeof Tooltip>
-
-  beforeEach(() => {
-    props = {
-      children: 'mock children' as ReactNode,
-      tooltipProps: MockTooltipProps,
-      key: 'mock key',
-    }
-  })
-
-  it('renders correct children when the tooltip is visible', () => {
-    render(props)
-    const tooltip = screen.getByText('mock children')
-    expect(tooltip).toBeInTheDocument()
-    expect(tooltip).toHaveStyle('position: absolute')
-    expect(tooltip).toHaveStyle('left: 0.25rem')
-    expect(tooltip).toHaveStyle(`background: ${COLORS.black90}`)
-    expect(tooltip).toHaveStyle(`color: ${COLORS.white}`)
-    expect(tooltip).toHaveStyle('max-width: 8.75rem')
-    expect(tooltip).toHaveStyle('font-size: 0.625rem')
-    expect(tooltip).toHaveAttribute('role', 'tooltip')
-  })
-
-  it('renders correct children when the tooltip is visible with a specific with', () => {
-    props = { ...props, width: '3rem' }
-    render(props)
-    const tooltip = screen.getByText('mock children')
-    expect(tooltip).toHaveStyle('width: 3rem')
-  })
-
-  it('does not render children when the tooltip is invisible', () => {
-    MockTooltipProps.visible = false
-    render(props)
-    const tooltip = screen.queryByText('mock children')
-    expect(tooltip).not.toBeInTheDocument()
-  })
-})

package/src/atoms/Tooltip/index.tsx

@@ -1,37 +0,0 @@
-import { COLORS } from '../../helix-design-system'
-import { FLEX_MAX_CONTENT } from '../../styles'
-import { LegacyTooltip } from '../../tooltips'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
-import type { UseTooltipResultTooltipProps } from '../../tooltips'
-
-export interface TooltipProps extends StyleProps {
-  children: ReactNode
-  tooltipProps: UseTooltipResultTooltipProps & { visible: boolean }
-  key?: string
-}
-
-export function Tooltip(props: TooltipProps): JSX.Element {
-  const {
-    children,
-    tooltipProps,
-    width = FLEX_MAX_CONTENT,
-    maxWidth = '8.75rem',
-    ...styleProps
-  } = props
-
-  return (
-    <LegacyTooltip
-      {...tooltipProps}
-      backgroundColor={COLORS.black90}
-      fontSize={TYPOGRAPHY.fontSizeCaption}
-      width={width}
-      maxWidth={maxWidth}
-      {...styleProps}
-    >
-      {children}
-    </LegacyTooltip>
-  )
-}

package/src/atoms/buttons/AlertPrimaryButton.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
-  background-color: ${COLORS.red50};
-  border-radius: ${BORDERS.borderRadius8};
-  padding-left: ${SPACING.spacing16};
-  padding-right: ${SPACING.spacing16};
-  text-transform: ${TYPOGRAPHY.textTransformNone};
-  box-shadow: 0 0 0;
-  ${TYPOGRAPHY.pSemiBold}
-
-  ${styleProps}
-
-  &:hover {
-    box-shadow: 0 0 0;
-    background-color: ${COLORS.red55};
-  }
-
-  &:disabled {
-    background-color: ${COLORS.grey30};
-    color: ${COLORS.grey40};
-  }
-`

package/src/atoms/buttons/AltPrimaryButton.tsx

@@ -1,31 +0,0 @@
-import styled from 'styled-components'
-
-import { PrimaryButton } from '../..'
-import { COLORS } from '../../helix-design-system'
-import { styleProps } from '../../primitives'
-
-export const AltPrimaryButton = styled(PrimaryButton)`
-  background-color: ${COLORS.grey30};
-  color: ${COLORS.black90};
-
-  ${styleProps}
-
-  &:focus {
-    background-color: ${COLORS.grey35};
-    box-shadow: none;
-  }
-
-  &:active {
-    background-color: ${COLORS.grey40};
-  }
-
-  &:hover {
-    box-shadow: 0 0 0;
-    background-color: ${COLORS.grey35};
-  }
-
-  &:disabled {
-    background-color: ${COLORS.grey30};
-    color: ${COLORS.grey40};
-  }
-`

package/src/atoms/buttons/EmptySelectorButton.stories.tsx

@@ -1,37 +0,0 @@
-import { Box } from '../../primitives'
-import { EmptySelectorButton as EmptySelectorButtonComponent } from './EmptySelectorButton'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof EmptySelectorButtonComponent> = {
-  title: 'Helix/Atoms/Buttons/EmptySelectorButton',
-  component: EmptySelectorButtonComponent,
-  argTypes: {
-    textAlignment: {
-      controls: {
-        type: 'select',
-        options: ['left', 'middle'],
-      },
-      defaultValue: 'left',
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <Box width="39.25rem" height="8.5rem">
-        <Story id="content" />
-      </Box>
-    ),
-  ],
-}
-export default meta
-
-type Story = StoryObj<typeof EmptySelectorButtonComponent>
-
-export const EmptySelectorButton: Story = {
-  args: {
-    text: 'mock text',
-    iconName: 'plus',
-    textAlignment: 'left',
-    onClick: () => {},
-  },
-}

package/src/atoms/buttons/EmptySelectorButton.tsx

@@ -1,89 +0,0 @@
-import styled from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import {
-  ALIGN_CENTER,
-  CURSOR_DEFAULT,
-  CURSOR_POINTER,
-  Icon,
-  JUSTIFY_CENTER,
-  JUSTIFY_START,
-  SPACING,
-  StyledText,
-} from '../../index'
-import { Flex } from '../../primitives'
-
-import type { IconName } from '../../index'
-
-interface EmptySelectorButtonProps {
-  onClick: () => void
-  text: string
-  textAlignment: 'left' | 'middle'
-  iconName?: IconName
-  disabled?: boolean
-}
-
-//  used for helix and Opentrons Ai
-export function EmptySelectorButton(
-  props: EmptySelectorButtonProps
-): JSX.Element {
-  const { onClick, text, iconName, textAlignment, disabled = false } = props
-
-  return (
-    <StyledButton
-      onClick={onClick}
-      disabled={disabled}
-      data-testid="EmptySelectorButton_click"
-    >
-      <Flex
-        gridGap={SPACING.spacing4}
-        padding={SPACING.spacing12}
-        color={disabled ? COLORS.grey40 : COLORS.black90}
-        border={`2px dashed ${disabled ? COLORS.grey40 : COLORS.blue50}`}
-        borderRadius={BORDERS.borderRadius8}
-        width="100%"
-        height="100%"
-        alignItems={ALIGN_CENTER}
-        data-testid="EmptySelectorButton_container"
-        justifyContent={
-          textAlignment === 'middle' ? JUSTIFY_CENTER : JUSTIFY_START
-        }
-      >
-        {iconName != null ? (
-          <Icon
-            name={iconName}
-            size="1.25rem"
-            data-testid={`EmptySelectorButton_${iconName}`}
-          />
-        ) : null}
-        <StyledText desktopStyle="bodyDefaultSemiBold">{text}</StyledText>
-      </Flex>
-    </StyledButton>
-  )
-}
-
-interface ButtonProps {
-  disabled: boolean
-}
-
-const StyledButton = styled.button<ButtonProps>`
-  border: none;
-  width: 100%;
-  height: 100%;
-  cursor: ${CURSOR_POINTER};
-  background-color: ${COLORS.blue30};
-  border-radius: ${BORDERS.borderRadius8};
-
-  &:focus-visible {
-    outline: 2px solid ${COLORS.white};
-    box-shadow: 0 0 0 4px ${COLORS.blue50};
-    border-radius: ${BORDERS.borderRadius8};
-  }
-  &:hover {
-    background-color: ${COLORS.blue35};
-  }
-  &:disabled {
-    background-color: ${COLORS.grey20};
-    cursor: ${CURSOR_DEFAULT};
-  }
-`

package/src/atoms/buttons/LargeButton.stories.tsx

@@ -1,106 +0,0 @@
-import { COLORS } from '../../helix-design-system'
-import { ICON_DATA_BY_NAME } from '../../icons'
-import { Box, STYLE_PROPS } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-import { LargeButton } from './LargeButton'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof LargeButton> = {
-  title: 'Helix/Atoms/Buttons/LargeButton',
-  component: LargeButton,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-    onClick: { action: 'clicked' },
-    iconName: {
-      control: {
-        type: 'select',
-      },
-      options: Object.keys(ICON_DATA_BY_NAME),
-    },
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'Touchscreen',
-    },
-    pseudo: {
-      rootSelector: '#content',
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <Box
-        width={'fit-content'}
-        padding={SPACING.spacing32}
-        backgroundColor={
-          ['alertStroke', 'alertAlt'].includes(context.args.buttonType)
-            ? COLORS.black90
-            : COLORS.white
-        }
-      >
-        <Story id={'content'} />
-      </Box>
-    ),
-  ],
-}
-
-export default meta
-
-type Story = StoryObj<typeof LargeButton>
-
-export const Primary: Story = {
-  args: {
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'play-round-corners',
-  },
-}
-export const Secondary: Story = {
-  args: {
-    buttonText: 'Button text',
-    buttonType: 'secondary',
-    disabled: false,
-    iconName: 'build',
-  },
-}
-export const Alert: Story = {
-  args: {
-    buttonText: 'Button text',
-    buttonType: 'alert',
-    disabled: false,
-    iconName: 'reset',
-  },
-}
-
-export const AlertStroke: Story = {
-  args: {
-    buttonType: 'alertStroke',
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'ot-alert',
-  },
-}
-
-export const AlertAlt: Story = {
-  args: {
-    buttonType: 'alertAlt',
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'ot-check',
-  },
-}
-
-export const Stroke: Story = {
-  args: {
-    buttonType: 'stroke',
-    buttonText: 'Button text',
-    disabled: false,
-    iconName: 'ot-check',
-  },
-}