From b41e8257970c6ccb30f7baae143b9720b97c324b Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:02:26 -0500
Subject: [PATCH] feat(protocol-designer): comment tools move over from old
 code (#16678)

closes AUTH-814
---
 .../StepForm/StepTools/CommentTools/index.tsx | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/CommentTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/CommentTools/index.tsx
index 72688f43146..a6956cd342d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/CommentTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/CommentTools/index.tsx
@@ -1,3 +1,50 @@
-export function CommentTools(): JSX.Element {
-  return <div>TODO: wire this up</div>
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+import {
+  BORDERS,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  StyledText,
+  TYPOGRAPHY,
+} from '@opentrons/components'
+import type { ChangeEvent } from 'react'
+import type { StepFormProps } from '../../types'
+
+export function CommentTools(props: StepFormProps): JSX.Element {
+  const { t, i18n } = useTranslation('form')
+  const { propsForFields } = props
+
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing4}
+      padding={SPACING.spacing16}
+    >
+      <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+        {i18n.format(t('step_edit_form.field.comment.label'), 'capitalize')}
+      </StyledText>
+      <StyledTextArea
+        value={propsForFields.message.value as string}
+        onChange={(e: ChangeEvent<any>) => {
+          propsForFields.message.updateValue(e.currentTarget.value)
+        }}
+      />
+    </Flex>
+  )
 }
+
+//  TODO: use TextArea component when we make it
+const StyledTextArea = styled.textarea`
+  width: 100%;
+  height: 7rem;
+  box-sizing: border-box;
+  border: 1px solid ${COLORS.grey50};
+  border-radius: ${BORDERS.borderRadius4};
+  padding: ${SPACING.spacing8};
+  font-size: ${TYPOGRAPHY.fontSizeH4};
+  line-height: ${TYPOGRAPHY.lineHeight16};
+  font-weight: ${TYPOGRAPHY.fontWeightRegular};
+  resize: none;
+`