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

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

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { screen } from '@testing-library/react'
+
+import { COLORS } from '../../../helix-design-system'
+import { TOOLTIP_TOP } from '../../../tooltips'
+import { SPACING } from '../../../ui-style-constants'
+import { POSITION_ABSOLUTE } from '../../../styles'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { Tooltip } from '..'
+
+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

@@ -0,0 +1,37 @@
+import { COLORS } from '../../helix-design-system'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { LegacyTooltip } from '../../tooltips'
+import { FLEX_MAX_CONTENT } from '../../styles'
+
+import type { ReactNode } from 'react'
+import type { UseTooltipResultTooltipProps } from '../../tooltips'
+import type { StyleProps } from '../../primitives'
+
+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

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
+
+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

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../helix-design-system'
+import { styleProps } from '../../primitives'
+import { PrimaryButton } from '../..'
+
+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

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

@@ -0,0 +1,82 @@
+import styled from 'styled-components'
+import { Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  CURSOR_DEFAULT,
+  CURSOR_POINTER,
+  Icon,
+  JUSTIFY_CENTER,
+  JUSTIFY_START,
+  SPACING,
+  StyledText,
+} from '../../index'
+import { BORDERS, COLORS } from '../../helix-design-system'
+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}>
+      <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

@@ -0,0 +1,106 @@
+import { ICON_DATA_BY_NAME } from '../../icons'
+import { SPACING } from '../../ui-style-constants'
+import { Box, STYLE_PROPS } from '../../primitives'
+import { COLORS } from '../../helix-design-system'
+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',
+  },
+}