(Textarea): add htmlReadOnly prop and a corresponding story, following Input

Author: msmx-mnakagawa

src/scripts/Textarea.tsx

@@ -27,6 +27,8 @@ export type TextareaProps = {
   elementRef?: Ref<HTMLDivElement>;
   textareaRef?: Ref<HTMLTextAreaElement>;
   onValueChange?: (value: string, prevValue?: string) => void;
+  readOnly?: boolean;
+  htmlReadOnly?: boolean;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 /**
@@ -48,6 +50,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       onChange: onChange_,
       onValueChange,
       readOnly,
+      htmlReadOnly,
       ...rprops
     } = props;
     const prevValueRef = useRef<string>();
@@ -68,6 +71,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
         id={id}
         ref={textareaRef}
         className={taClassNames}
+        readOnly={htmlReadOnly}
         {...rprops}
         onChange={onChange}
         aria-describedby={error ? errorId : undefined}

stories/Textarea.stories.tsx

@@ -123,6 +123,26 @@ export const ReadOnly: ComponentStoryObj<typeof Textarea> = {
   },
 };
 
+/**
+ *
+ */
+export const ReadOnlyHtml: ComponentStoryObj<typeof Textarea> = {
+  name: 'Read only (HTML)',
+  args: {
+    label: 'Input Label',
+    value: 'Textarea Only',
+    htmlReadOnly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Textarea control with readOnly status (passsed to HTML &lt;input&gt; element)',
+      },
+    },
+  },
+};
+
 /**
  *
  */