feat(client,prospect): add warning variant to TextArea (#1803)

apps/apollo-stories/src/components/TextArea/TextArea.mdx

@@ -1,4 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/addon-docs";
+
 import * as TextAreaStories from "./TextArea.stories";
 
 <Meta of={TextAreaStories} name="TextArea" />
@@ -17,3 +18,13 @@ const MyComponent = () => <TextArea />;
 
 <Canvas of={TextAreaStories.TextAreaStory} sourceState="shown" />
 <Controls of={TextAreaStories.TextAreaStory} />
+
+## Warning
+
+Use `message` with `messageType="warning"` to display a warning state with orange border and warning icon.
+
+```tsx
+<TextArea label="Label" message="Warning Message" messageType="warning" />
+```
+
+<Canvas of={TextAreaStories.TextAreaWarningStory} />

apps/apollo-stories/src/components/TextArea/TextArea.stories.tsx

@@ -43,3 +43,12 @@ export default meta;
 export const TextAreaStory: StoryObj<typeof TextArea> = {
   name: "Playground",
 };
+
+export const TextAreaWarningStory: StoryObj<typeof TextArea> = {
+  name: "Warning",
+  args: {
+    error: "",
+    message: "Warning Message",
+    messageType: "warning",
+  },
+};

apps/look-and-feel-stories/src/components/Textarea/TextArea.mdx

@@ -1,4 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/addon-docs";
+
 import * as TextAreaStories from "./TextArea.stories";
 
 <Meta of={TextAreaStories} name="TextArea" />
@@ -17,3 +18,13 @@ const MyComponent = () => <TextArea />;
 
 <Canvas of={TextAreaStories.TextAreaStory} sourceState="shown" />
 <Controls of={TextAreaStories.TextAreaStory} />
+
+## Warning
+
+Use `message` with `messageType="warning"` to display a warning state with orange border and warning icon.
+
+```tsx
+<TextArea label="Label" message="Warning Message" messageType="warning" />
+```
+
+<Canvas of={TextAreaStories.TextAreaWarningStory} />

apps/look-and-feel-stories/src/components/Textarea/TextArea.stories.tsx

@@ -43,3 +43,12 @@ export default meta;
 export const TextAreaStory: StoryObj<typeof TextArea> = {
   name: "Playground",
 };
+
+export const TextAreaWarningStory: StoryObj<typeof TextArea> = {
+  name: "Warning",
+  args: {
+    error: "",
+    message: "Warning Message",
+    messageType: "warning",
+  },
+};

packages/canopee-css/src/prospect-client/Form/TextArea/TextAreaCommon.css

@@ -14,9 +14,14 @@
     var(--textarea-box-shadow-color) inset;
   outline: none;
 
-  &:is(:focus-visible, :hover, :active, :focus, [aria-invalid="true"]):not(
-      :disabled
-    ) {
+  &:is(
+      :focus-visible,
+      :hover,
+      :active,
+      :focus,
+      [aria-invalid="true"],
+      [class*="--warning"]
+    ):not(:disabled) {
     --textarea-box-shadow-width: 2px;
   }
 
@@ -28,4 +33,12 @@
     font-weight: 400;
     color: var(--textarea-placeholder-color);
   }
+
+  &[class*="--warning"] {
+    --textarea-box-shadow-color: var(--orange-1050);
+
+    &:is(:focus-visible, :hover, :active, :focus) {
+      --textarea-box-shadow-width: 3px;
+    }
+  }
 }

packages/canopee-react/src/prospect-client/Form/TextArea/TextAreaCommon.tsx

@@ -5,6 +5,7 @@ import {
   forwardRef,
   useId,
 } from "react";
+import { getClassName } from "../../utilities/getClassName";
 import type { GridContainerProps } from "../../utilities/types/GridContainerProps";
 import {
   ItemLabelCommon,
@@ -75,6 +76,13 @@ const TextAreaCommon = forwardRef<HTMLTextAreaElement, TextAreaCommonProps>(
 
     const hasError =
       (Boolean(message) && messageType === "error") || Boolean(error);
+    const hasWarning =
+      Boolean(message) && messageType === "warning" && !hasError;
+
+    const textareaClassName = getClassName({
+      baseClassName: "af-form__textarea",
+      modifiers: [hasWarning && "warning"],
+    });
 
     return (
       <div
@@ -94,10 +102,9 @@ const TextAreaCommon = forwardRef<HTMLTextAreaElement, TextAreaCommonProps>(
         >
           {label}
         </ItemLabelComponent>
-
         <textarea
           id={inputId}
-          className="af-form__textarea"
+          className={textareaClassName}
           ref={inputRef}
           aria-errormessage={hasError ? messageId : undefined}
           aria-describedby={helper ? helperId : undefined}
@@ -106,13 +113,11 @@ const TextAreaCommon = forwardRef<HTMLTextAreaElement, TextAreaCommonProps>(
           placeholder={placeholder}
           {...inputProps}
         />
-
         {helper ? (
           <span id={helperId} className="af-form__input-helper">
             {helper}
           </span>
         ) : null}
-
         <ItemMessageComponent
           id={messageId}
           message={message || error}