[F] Textarea question type

For JIRA: "EPO-8593 #IN-REVIEW #comment textarea question type"
lsst-epo · Oct 31, 2023 · 6769e8d · 6769e8d
1 parent c8d683a
commit 6769e8d
Show file tree

Hide file tree

Showing 8 changed files with 257 additions and 25 deletions.
diff --git a/components/factories/QuestionFactory/index.tsx b/components/factories/QuestionFactory/index.tsx
@@ -14,6 +14,7 @@ const Fragment = graphql(`
     }
     id
     questionText
+    widgetInstructions
     questionWidgetsBlock {
       __typename
       ... on questionWidgetsBlock_colorFilterToolBlock_BlockType {
@@ -31,12 +32,12 @@ export interface QuestionProps {
   number: number;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const QUESTION_MAP: Record<string, ComponentType<any>> = {
   text: SimpleQuestion,
   select: SimpleQuestion,
   tabular: TabularQuestion,
   widget: SimpleQuestion,
+  textarea: SimpleQuestion,
 };
 
 const QuestionFactory: FunctionComponent<QuestionProps> = ({
@@ -47,7 +48,9 @@ const QuestionFactory: FunctionComponent<QuestionProps> = ({
     answerType,
     id,
     questionWidgetsBlock = [],
-    ...data
+    answerOptions,
+    questionText,
+    widgetInstructions,
   } = useFragment(Fragment, props.data);
 
   if (!id || !answerType) return null;
@@ -60,8 +63,8 @@ const QuestionFactory: FunctionComponent<QuestionProps> = ({
     <Question
       id={id}
       type={answerType}
-      questionText={data.questionText}
-      options={data.answerOptions}
+      questionText={questionText || widgetInstructions}
+      options={answerOptions}
       widgetConfig={questionWidgetsBlock[0] || {}}
       number={number}
     />

diff --git a/components/questions/SimpleQuestion/Textarea/index.tsx b/components/questions/SimpleQuestion/Textarea/index.tsx
@@ -6,24 +6,27 @@ interface SimpleTextareaProps {
   value?: string;
   isDisabled?: boolean;
   onChangeCallback: (value: string) => void;
+  labelledById?: string;
 }
 
 const SimpleTextarea: FunctionComponent<SimpleTextareaProps> = ({
   id,
   value,
   isDisabled,
   onChangeCallback,
+  labelledById,
 }) => {
   return (
     <Styled.Textarea
-      id={id}
+      aria-labelledby={labelledById}
+      as="textarea"
+      rows={3}
       disabled={isDisabled}
       onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
         onChangeCallback && onChangeCallback(event.target.value)
       }
-    >
-      {value}
-    </Styled.Textarea>
+      {...{ id, value }}
+    />
   );
 };
 

diff --git a/components/questions/SimpleQuestion/Textarea/styles.ts b/components/questions/SimpleQuestion/Textarea/styles.ts
@@ -7,6 +7,9 @@ export const Textarea = styled(Input)`
   --input-border-color: var(--question-border-color);
   --input-color: var(--question-input-color);
 
+  height: auto;
+  max-width: 100%;
+
   &:disabled {
     --input-background-color: #f5f5f5;
     --input-border-color: #6a6e6e;

diff --git a/components/questions/SimpleQuestion/index.tsx b/components/questions/SimpleQuestion/index.tsx
@@ -54,10 +54,14 @@ const SimpleQuestion: FunctionComponent<SimpleQuestionProps> = ({
 
   return (
     <li value={number}>
-      <Styled.QuestionLabel
-        id={labelId}
-        dangerouslySetInnerHTML={{ __html: questionText }}
-      />
+      {type === "widget" ? (
+        <Styled.QuestionLabel
+          id={labelId}
+          dangerouslySetInnerHTML={{ __html: questionText }}
+        />
+      ) : (
+        <label htmlFor={id}>{questionText}</label>
+      )}
       <Input
         onChangeCallback={(value: any) =>
           onChangeCallback && onChangeCallback(value, id, storedAnswer?.id)