feat(protocol-designer): add TextAreaField component to protocol-designer (#17487)

* feat(protocol-designer): add TextAreaField component to protocol-designer

Author: koji

protocol-designer/src/molecules/TextAreaField/TextAreaField.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
+import { TextAreaField as TextAreaFieldComponent } from '.'
+
+import type { ComponentProps } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof TextAreaFieldComponent> = {
+  // ToDo (kk05/02/2024) this should be in Library but at this moment there is the same name component in components
+  // The unification for this component will be done when the old component is retired completely.
+  title: 'Protocol-Designer/Molecules/TextAreaField',
+  component: TextAreaFieldComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {},
+}
+
+export default meta
+type Story = StoryObj<typeof TextAreaFieldComponent>
+
+export const TextAreaField: Story = (
+  args: ComponentProps<typeof TextAreaFieldComponent>
+) => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <TextAreaFieldComponent
+        {...args}
+        value={value}
+        onChange={e => {
+          setValue(e.currentTarget.value)
+        }}
+      />
+    </Flex>
+  )
+}
+
+TextAreaField.args = {
+  title: 'TextAreaField',
+  height: '6.8125rem',
+  placeholder: 'Placeholder Text',
+}

protocol-designer/src/molecules/TextAreaField/__tests__/TextAreaField.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { screen, fireEvent } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../__testing-utils__'
+import { TextAreaField } from '../'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TextAreaField>) => {
+  return renderWithProviders(<TextAreaField {...props} />)
+}
+
+describe('TextAreaField', () => {
+  let props: ComponentProps<typeof TextAreaField>
+
+  beforeEach(() => {
+    props = {
+      title: 'TextAreaField',
+      placeholder: 'Enter text...',
+      value: '',
+      onChange: vi.fn(),
+    }
+  })
+
+  it('renders the TextAreaField component', () => {
+    render(props)
+    screen.getByText('TextAreaField')
+    expect(screen.getByTestId('TextAreaField')).toBeInTheDocument()
+  })
+
+  it('displays the correct placeholder text', () => {
+    render(props)
+    expect(screen.getByPlaceholderText('Enter text...')).toBeInTheDocument()
+  })
+
+  it('updates value when user types', () => {
+    render(props)
+    const textarea = screen.getByTestId('TextAreaField')
+
+    fireEvent.change(textarea, { target: { value: 'Hello, world!' } })
+
+    expect(props.onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables the textarea when disabled prop is true', () => {
+    props.disabled = true
+    render(props)
+    expect(screen.getByTestId('TextAreaField')).toBeDisabled()
+  })
+
+  it('displays an error message when error prop is provided', () => {
+    props.error = 'Error: Invalid input'
+    render(props)
+
+    expect(screen.getByText('Error: Invalid input')).toBeInTheDocument()
+  })
+
+  it('display an icon when tooltip prop is provided', () => {
+    props.tooltipText = 'ot-icon-check'
+    render(props)
+    screen.getByTestId('tooltip-icon')
+  })
+
+  it('display left icon when leftIcon prop is provided', () => {
+    props.leftIcon = 'information'
+    render(props)
+    screen.getByTestId('left-icon')
+  })
+})