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

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

@@ -1,28 +1,44 @@
 import * as React from 'react'
 
+import { Snackbar as SnackbarComponent } from '.'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
-  Flex,
   JUSTIFY_CENTER,
-  LegacyStyledText,
-  PrimaryButton,
-  SPACING,
-  VIEWPORT,
-} from '@opentrons/components'
+} from '../../styles'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { PrimaryButton } from '../buttons'
+import { StyledText } from '../StyledText'
 
-import { Snackbar } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
 
-import type { Meta, Story } from '@storybook/react'
-
-export default {
+const meta: Meta<typeof SnackbarComponent> = {
   title: 'Helix/Atoms/Snackbar',
-  component: Snackbar,
+  component: SnackbarComponent,
   parameters: VIEWPORT.touchScreenViewport,
-} as Meta
+  argTypes: {
+    // Disable all StyleProps
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+    message: {
+      control: 'text',
+    },
+    duration: {
+      control: 'number',
+    },
+  },
+}
 
-const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
+// 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 => {
@@ -31,15 +47,25 @@ const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
 
   return (
     <>
-      <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
+      <Flex
+        flexDirection={DIRECTION_ROW}
+        paddingY={SPACING.spacing16}
+        gap={SPACING.spacing8}
+      >
         <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
-        <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
-          <LegacyStyledText as="p">
+        <Flex flexDirection={DIRECTION_COLUMN}>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            oddStyle="level4HeaderRegular"
+          >
             When clicking the button, the Snackbar shows up in the bottom.
-          </LegacyStyledText>
-          <LegacyStyledText as="p">
+          </StyledText>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            oddStyle="level4HeaderRegular"
+          >
             By default the Snackbar will disappear after 4 seconds.
-          </LegacyStyledText>
+          </StyledText>
         </Flex>
       </Flex>
       {isShowSnackbar && (
@@ -51,7 +77,7 @@ const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
           bottom={SPACING.spacing40}
           zIndex={1000}
         >
-          <Snackbar
+          <SnackbarComponent
             {...args}
             onClose={() => {
               setIsShowSnackbar(false)
@@ -63,7 +89,17 @@ const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
   )
 }
 
-export const SnackbarComponent = DefaultTemplate.bind({})
-SnackbarComponent.args = {
-  message: 'Short and sweet message',
+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/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { css } from 'styled-components'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
@@ -16,14 +16,59 @@ export interface SnackbarProps extends StyleProps {
 }
 
 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;
@@ -40,6 +85,7 @@ const OPEN_STYLE = css`
 `
 
 const CLOSE_STYLE = css`
+  ${COMMON_STYLE}
   animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
   animation-name: fadeout;
   overflow: hidden;
@@ -54,39 +100,3 @@ const CLOSE_STYLE = css`
     }
   }
 `
-
-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/StyledText/PlaceholderStyledText.tsx

@@ -0,0 +1,46 @@
+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/index.ts

@@ -1,2 +1,3 @@
 export * from './StyledText'
 export * from './LegacyStyledText'
+export * from './PlaceholderStyledText'

package/src/atoms/StyledText/placeholderstyledtext.module.css

@@ -0,0 +1,25 @@
+.heading_small_bold {
+  @media not (height: 600px) and (width: 1024px) {
+    font: var(--font-weight-bold) 1.125rem/var(--line-height-24);
+  }
+}
+
+.caption_bold {
+  @media not (height: 600px) and (width: 1024px) {
+    font: var(--font-weight-bold) var(--font-size-h4)/var(--line-height-16);
+  }
+}
+
+.body_default_semi_bold {
+  @media not (height: 600px) and (width: 1024px) {
+    font: var(--font-weight-semi-bold) var(--font-size-h3)/var(--line-height-20);
+  }
+}
+
+.small_body_text_bold {
+  @media (height: 600px) and (width: 1024px) {
+    font-size: var(--font-size-20);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-height-24);
+  }
+}

package/src/atoms/buttons/BasicButton.tsx

@@ -0,0 +1,100 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER } from '../../styles'
+import { CURSOR_NOT_ALLOWED, CURSOR_POINTER } from '../../styles/cursor'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText/StyledText'
+
+import type { MouseEvent } from 'react'
+import type { IconName } from '../../icons'
+
+interface BasicButtonProps {
+  children: string // Content of basic button
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void // Function to handle button click events
+  isDisabled?: boolean // Optional prop to control button aria-disabled
+  underLine?: boolean // Optional prop to control underline styling
+  tabIndex?: number // Optional prop for tab index
+  iconName?: IconName // Optional prop for icon
+}
+
+export function BasicButton({
+  children,
+  onClick,
+  isDisabled = false,
+  underLine = false,
+  tabIndex = 0,
+  iconName,
+  ...props
+}: BasicButtonProps): JSX.Element {
+  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>): void => {
+    if (isDisabled) {
+      event.preventDefault()
+      return
+    }
+    if (onClick != null) {
+      onClick(event)
+    }
+  }
+
+  return (
+    <StyledButton
+      data-testid={`basic_button_${children}`}
+      onClick={handleButtonClick}
+      aria-disabled={isDisabled}
+      underLine={underLine}
+      tabIndex={tabIndex}
+      {...props}
+    >
+      {iconName != null ? (
+        <Flex alignItems={ALIGN_CENTER} gap={SPACING.spacing8}>
+          <Icon
+            name={iconName}
+            size="1.25rem"
+            data-testid={`basic_button_${iconName}`}
+          />
+          <StyledText desktopStyle="bodyDefaultRegular">{children}</StyledText>
+        </Flex>
+      ) : (
+        <StyledText desktopStyle="bodyDefaultRegular">{children}</StyledText>
+      )}
+    </StyledButton>
+  )
+}
+
+const StyledButton = styled.button<{
+  underLine?: boolean
+  'aria-disabled'?: boolean
+}>`
+  background: none;
+  border: none;
+  padding: ${SPACING.spacing4};
+
+  color: ${props => (props['aria-disabled'] ? COLORS.grey40 : COLORS.black90)};
+  cursor: ${props =>
+    props['aria-disabled'] ? CURSOR_NOT_ALLOWED : CURSOR_POINTER};
+
+  text-decoration: ${props =>
+    props.underLine ? TYPOGRAPHY.textDecorationUnderline : 'none'};
+
+  ${props =>
+    !props['aria-disabled']
+      ? `
+        &:hover {
+          color: ${COLORS.blue50};
+        }
+
+        &:focus-visible {
+          color: ${COLORS.blue50};
+          outline: 2px solid ${COLORS.blue50};
+          outline-offset: ${SPACING.spacing4};
+        }
+      `
+      : undefined}
+
+  &[aria-disabled="true"] {
+    outline: none;
+  }
+`

package/src/atoms/buttons/SecondaryButton.tsx

@@ -13,8 +13,7 @@ interface SecondaryButtonProps extends StyleProps {
   'aria-disabled'?: boolean
 }
 export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
-  shouldForwardProp: p =>
-    isntStyleProp(p) && p !== 'isDangerous' && p !== 'aria-disabled',
+  shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous',
 })<SecondaryButtonProps>`
   appearance: none;
   cursor: ${props =>
@@ -92,3 +91,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
 
   ${styleProps}
 `
+
+SecondaryButton.defaultProps = {
+  'aria-disabled': false,
+}

package/src/atoms/buttons/__tests__/BasicButton.test.tsx

@@ -0,0 +1,87 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { COLORS } from '../../../helix-design-system'
+import { CURSOR_NOT_ALLOWED, CURSOR_POINTER } from '../../../styles/cursor'
+import { renderWithProviders } from '../../../testing/utils'
+import { TYPOGRAPHY } from '../../../ui-style-constants'
+import { BasicButton } from '../BasicButton'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof BasicButton>) => {
+  return renderWithProviders(<BasicButton {...props} />)
+}
+
+describe('BasicButton', () => {
+  let props: ComponentProps<typeof BasicButton>
+
+  beforeEach(() => {
+    props = {
+      children: 'basic button',
+      onClick: vi.fn(),
+      isDisabled: false,
+      underLine: false,
+    }
+  })
+
+  it('renders basic button with text', async () => {
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveAttribute('aria-disabled', 'false')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
+    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(button).toHaveStyle(`text-decoration: none`)
+  })
+
+  it('renders basic button with icon', async () => {
+    props.iconName = 'alert'
+    render(props)
+    screen.getByTestId('basic_button_alert')
+    screen.getByRole('button', { name: 'basic button' })
+  })
+
+  // TODO: need to update '@testing-library/user-event' v14+
+  // it('has hover styles when not disabled', async () => {
+  //   render(props)
+  //   const button = screen.getByRole('button', { name: 'basic button' })
+  //   await userEvent.hover(button)
+  //   expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
+  // })
+
+  it('calls onClick when clicked', () => {
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    fireEvent.click(button)
+    expect(props.onClick).toHaveBeenCalled()
+  })
+
+  it('renders basic button with text and aria-disabled', () => {
+    props.isDisabled = true
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveAttribute('aria-disabled', 'true')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_NOT_ALLOWED}`)
+    expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
+  })
+
+  it('renders basic button with text and underline', () => {
+    props.underLine = true
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveAttribute('aria-disabled', 'false')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
+    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(button).toHaveStyle(
+      `text-decoration: ${TYPOGRAPHY.textDecorationUnderline}`
+    )
+  })
+
+  it('has hover styles when not disabled', () => {
+    render(props)
+    const button = screen.getByRole('button', { name: 'basic button' })
+    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(button).toHaveAttribute('aria-disabled', 'false')
+    expect(button).toHaveStyle(`cursor: ${CURSOR_POINTER}`)
+  })
+})

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

@@ -1,78 +1,114 @@
-import { Flex } from '../../primitives'
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import { DIRECTION_ROW } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
-import { AlertPrimaryButton } from './AlertPrimaryButton'
-import { AltPrimaryButton } from './AltPrimaryButton'
-import { PrimaryButton } from './PrimaryButton'
-import { SecondaryButton } from './SecondaryButton'
+import { AlertPrimaryButton as AlertPrimaryButtonComponent } from './AlertPrimaryButton'
+import { AltPrimaryButton as AltPrimaryButtonComponent } from './AltPrimaryButton'
+import { BasicButton as BasicButtonComponent } from './BasicButton'
+import { PrimaryButton as PrimaryButtonComponent } from './PrimaryButton'
+import { SecondaryButton as SecondaryButtonComponent } from './SecondaryButton'
 
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta = {
   title: 'Helix/Atoms/Buttons',
-} as Meta
-
-const PrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof PrimaryButton>
-> = args => {
-  const { children } = args
-  return (
-    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <PrimaryButton>{children}</PrimaryButton>
-    </Flex>
-  )
+  argTypes: {
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    'aria-disabled': {
+      control: {
+        type: 'boolean',
+      },
+    },
+    isDangerous: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
 }
 
-export const Primary = PrimaryButtonTemplate.bind({})
-Primary.args = {
-  children: 'primary button',
-}
+export default meta
 
-const SecondaryButtonTemplate: Story<
-  React.ComponentProps<typeof SecondaryButton>
-> = args => {
-  const { children } = args
-  return (
+export const PrimaryButton: StoryObj<typeof PrimaryButtonComponent> = {
+  args: {
+    children: 'primary button',
+  },
+  render: args => (
     <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <SecondaryButton>{children}</SecondaryButton>
+      <PrimaryButtonComponent {...args} />
     </Flex>
-  )
+  ),
 }
 
-export const Secondary = SecondaryButtonTemplate.bind({})
-Secondary.args = {
-  children: 'secondary button',
+export const SecondaryButton: StoryObj<typeof SecondaryButtonComponent> = {
+  args: {
+    children: 'secondary button',
+  },
+  render: args => (
+    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
+      <SecondaryButtonComponent {...args} />
+    </Flex>
+  ),
 }
 
-const AlertPrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof AlertPrimaryButton>
-> = args => {
-  const { children } = args
-  return (
+export const AlertPrimaryButton: StoryObj<
+  typeof AlertPrimaryButtonComponent
+> = {
+  args: {
+    children: 'alert tertiary button',
+  },
+  render: args => (
     <Flex>
-      <AlertPrimaryButton>{children}</AlertPrimaryButton>
+      <AlertPrimaryButtonComponent {...args} />
     </Flex>
-  )
-}
-
-export const AlertPrimary = AlertPrimaryButtonTemplate.bind({})
-AlertPrimary.args = {
-  children: 'alert tertiary button',
+  ),
 }
 
-const AltPrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof AltPrimaryButton>
-> = args => {
-  const { children } = args
-  return (
+export const AltPrimaryButton: StoryObj<typeof AltPrimaryButtonComponent> = {
+  args: {
+    children: 'alt primary button',
+  },
+  render: args => (
     <Flex>
-      <AltPrimaryButton>{children}</AltPrimaryButton>
+      <AltPrimaryButtonComponent {...args} />
     </Flex>
-  )
+  ),
 }
 
-export const AltPrimary = AltPrimaryButtonTemplate.bind({})
-AltPrimary.args = {
-  children: 'alt primary button',
+export const BasicButton: StoryObj<typeof BasicButtonComponent> = {
+  args: {
+    children: 'basic button',
+  },
+  argTypes: {
+    underLine: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Toggles the underline style for the button text (BasicButton only).',
+    },
+    iconName: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+      description:
+        'Optional icon to display alongside the button text (BasicButton only).',
+    },
+  },
+  render: args => (
+    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
+      <BasicButtonComponent {...args} />
+    </Flex>
+  ),
 }