(Textarea): update markup for readOnly

Author: msmx-mnakagawa

src/scripts/Textarea.tsx

@@ -7,6 +7,7 @@ import React, {
   useRef,
 } from 'react';
 import classnames from 'classnames';
+import { Text } from './Text';
 import { FormElement, FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
 import { useEventCallback } from './hooks';
@@ -45,6 +46,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       textareaRef,
       onChange: onChange_,
       onValueChange,
+      readOnly,
       ...rprops
     } = props;
     const prevValueRef = useRef<string>();
@@ -55,7 +57,11 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
     });
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
     const taClassNames = classnames(className, 'slds-input');
-    const textareaElem = (
+    const textareaElem = readOnly ? (
+      <Text type='regular' category='body'>
+        {rprops.value}
+      </Text>
+    ) : (
       <textarea
         id={id}
         ref={textareaRef}
@@ -74,6 +80,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
         tooltip,
         tooltipIcon,
         elementRef,
+        readOnly,
       };
       return <FormElement {...formElemProps}>{textareaElem}</FormElement>;
     }