export send button as an atom component

opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../__testing-utils__'
+
+import { SendButton } from '../index'
+
+const mockHandleClick = vi.fn()
+const render = (props: React.ComponentProps<typeof SendButton>) => {
+  return renderWithProviders(<SendButton {...props} />)
+}
+
+describe('SendButton', () => {
+  let props: React.ComponentProps<typeof SendButton>
+
+  beforeEach(() => {
+    props = {
+      handleClick: mockHandleClick,
+      disabled: true,
+      isLoading: false,
+    }
+  })
+  it('should render button with send icon and its initially disabled', () => {
+    render(props)
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    screen.getByTestId('SendButton_icon_send')
+  })
+
+  it('should render button and its not disabled when disabled false', () => {
+    props = { ...props, disabled: false }
+    render(props)
+    const button = screen.getByRole('button')
+    expect(button).not.toBeDisabled()
+    screen.getByTestId('SendButton_icon_send')
+  })
+
+  it('should render button with spinner icon when isLoading', () => {
+    props = { ...props, isLoading: true }
+    render(props)
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    screen.getByTestId('SendButton_icon_ot-spinner')
+  })
+
+  it('should call a mock function when clicking the button', () => {
+    props = { ...props, disabled: false }
+    render(props)
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+    expect(mockHandleClick).toHaveBeenCalled()
+  })
+})

opentrons-ai-client/src/atoms/SendButton/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { css } from 'styled-components'
+
+import {
+  ALIGN_CENTER,
+  BORDERS,
+  Btn,
+  COLORS,
+  DISPLAY_FLEX,
+  Icon,
+  JUSTIFY_CENTER,
+} from '@opentrons/components'
+
+interface SendButtonProps {
+  handleClick: () => void
+  disabled?: boolean
+  isLoading?: boolean
+}
+
+export function SendButton({
+  handleClick,
+  disabled = false,
+  isLoading = false,
+}: SendButtonProps): JSX.Element {
+  const playButtonStyle = css`
+    -webkit-tap-highlight-color: transparent;
+    &:focus {
+      background-color: ${COLORS.blue60};
+      color: ${COLORS.white};
+    }
+
+    &:hover {
+      background-color: ${COLORS.blue50};
+      color: ${COLORS.white};
+    }
+
+    &:focus-visible {
+      background-color: ${COLORS.blue50};
+    }
+
+    &:active {
+      background-color: ${COLORS.blue60};
+      color: ${COLORS.white};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.grey35};
+      color: ${COLORS.grey50};
+    }
+  `
+  return (
+    <Btn
+      alignItems={ALIGN_CENTER}
+      backgroundColor={disabled ? COLORS.grey35 : COLORS.blue50}
+      borderRadius={BORDERS.borderRadiusFull}
+      display={DISPLAY_FLEX}
+      justifyContent={JUSTIFY_CENTER}
+      width="4.25rem"
+      height="3.75rem"
+      disabled={disabled || isLoading}
+      onClick={handleClick}
+      aria-label="play"
+      css={playButtonStyle}
+    >
+      <Icon
+        color={disabled ? COLORS.grey50 : COLORS.white}
+        name={isLoading ? 'ot-spinner' : 'send'}
+        spin={isLoading}
+        size="2rem"
+        data-testid={`SendButton_icon_${isLoading ? 'ot-spinner' : 'send'}`}
+      />
+    </Btn>
+  )
+}

opentrons-ai-client/src/molecules/InputPrompt/index.tsx

@@ -1,22 +1,20 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import { useForm } from 'react-hook-form'
 import { useAtom } from 'jotai'
 
 import {
   ALIGN_CENTER,
   BORDERS,
-  Btn,
   COLORS,
   DIRECTION_ROW,
-  DISPLAY_FLEX,
   Flex,
-  Icon,
   JUSTIFY_CENTER,
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
+import { SendButton } from '../../atoms/SendButton'
 import { useFetch } from '../../resources/hooks'
 import { preparedPromptAtom, chatDataAtom } from '../../resources/atoms'
 
@@ -141,65 +139,3 @@ const StyledTextarea = styled.textarea`
     transform: translateY(-50%);
   }
 `
-
-interface SendButtonProps {
-  handleClick: () => void
-  disabled?: boolean
-  isLoading?: boolean
-}
-
-function SendButton({
-  handleClick,
-  disabled = false,
-  isLoading = false,
-}: SendButtonProps): JSX.Element {
-  const playButtonStyle = css`
-    -webkit-tap-highlight-color: transparent;
-    &:focus {
-      background-color: ${COLORS.blue60};
-      color: ${COLORS.white};
-    }
-
-    &:hover {
-      background-color: ${COLORS.blue50};
-      color: ${COLORS.white};
-    }
-
-    &:focus-visible {
-      background-color: ${COLORS.blue50};
-    }
-
-    &:active {
-      background-color: ${COLORS.blue60};
-      color: ${COLORS.white};
-    }
-
-    &:disabled {
-      background-color: ${COLORS.grey35};
-      color: ${COLORS.grey50};
-    }
-  `
-  return (
-    <Btn
-      alignItems={ALIGN_CENTER}
-      backgroundColor={disabled ? COLORS.grey35 : COLORS.blue50}
-      borderRadius={BORDERS.borderRadiusFull}
-      display={DISPLAY_FLEX}
-      justifyContent={JUSTIFY_CENTER}
-      width="4.25rem"
-      height="3.75rem"
-      disabled={disabled || isLoading}
-      onClick={handleClick}
-      aria-label="play"
-      css={playButtonStyle}
-      // type="submit"
-    >
-      <Icon
-        color={disabled ? COLORS.grey50 : COLORS.white}
-        name={isLoading ? 'ot-spinner' : 'send'}
-        spin={isLoading}
-        size="2rem"
-      />
-    </Btn>
-  )
-}