fix(Textarea): show 'readOnly' as 'disabled' visually

This commit ensures the same background color and text color for
the 'disabled' state apply to Textarea in 'readOnly' mode.

We keep the normal cursor in 'readOnly' (as it's intended the
user should be able to interact with the textarea and select the
value for example).

Slack: https://skypicker.slack.com/archives/C7T7QG7M5/p1693824510622729

Jira: FEPLT-1737

packages/orbit-components/src/Textarea/Textarea.stories.tsx

@@ -108,6 +108,7 @@ export const Playground = () => {
   const help = text("Help", "");
   const error = text("Error", "Something went wrong.");
   const disabled = boolean("Disabled", false);
+  const readOnly = boolean("Read-only", false);
   const resize = select("resize", Object.values(RESIZE_OPTIONS), RESIZE_OPTIONS.VERTICAL);
   const maxLength = number("maxLength", Infinity);
   const dataTest = text("dataTest", "test");
@@ -127,6 +128,7 @@ export const Playground = () => {
       rows={rows}
       required={required}
       disabled={disabled}
+      readOnly={readOnly}
       maxLength={maxLength}
       resize={resize}
       onChange={action("change")}

packages/orbit-components/src/Textarea/index.tsx

@@ -74,7 +74,7 @@ interface StyledTextAreaProps extends Partial<Props> {
 }
 
 const StyledTextArea = styled.textarea<StyledTextAreaProps>`
-  ${({ theme, resize, fullHeight, error, disabled }) => css`
+  ${({ theme, resize, fullHeight, error, disabled, readOnly }) => css`
     appearance: none;
     box-sizing: border-box;
     display: block;
@@ -83,10 +83,12 @@ const StyledTextArea = styled.textarea<StyledTextAreaProps>`
     padding: ${getPadding};
     box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput}
       ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput};
-    background-color: ${disabled
+    background-color: ${disabled || readOnly
       ? theme.orbit.backgroundInputDisabled
       : theme.orbit.backgroundInput};
-    color: ${disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput};
+    color: ${disabled || readOnly
+      ? theme.orbit.colorTextInputDisabled
+      : theme.orbit.colorTextInput};
     font-size: ${getFontSize};
     line-height: ${getLineHeight};
     cursor: ${disabled ? "not-allowed" : "text"};
@@ -110,7 +112,7 @@ const StyledTextArea = styled.textarea<StyledTextAreaProps>`
     }
 
     &:hover {
-      box-shadow: ${!disabled &&
+      box-shadow: ${!(disabled || readOnly) &&
       css`inset 0 0 0 ${theme.orbit.borderWidthInput} ${
         error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover
       }`};