refactor(client,prospect): use getClassName in TextArea and mutualize warning CSS

Author: Debaerdm

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

@@ -25,12 +25,4 @@
       --textarea-box-shadow-width: 3px;
     }
   }
-
-  &[class*="--warning"] {
-    --textarea-box-shadow-color: var(--orange-1050);
-
-    &:is(:focus-visible, :hover, :active, :focus) {
-      --textarea-box-shadow-width: 3px;
-    }
-  }
 }

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

@@ -33,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-css/src/prospect-client/Form/TextArea/TextAreaLF.css

@@ -25,12 +25,4 @@
       --textarea-box-shadow-width: 3px;
     }
   }
-
-  &[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,
@@ -16,6 +17,7 @@ import {
 } from "../ItemMessage/ItemMessageCommon";
 
 export type TextAreaProps = ComponentPropsWithRef<"textarea"> & {
+  classModifier?: string;
   label?: ItemLabelProps["children"];
   helper?: string;
   /**
@@ -47,6 +49,7 @@ const TextAreaCommon = forwardRef<HTMLTextAreaElement, TextAreaCommonProps>(
     {
       id,
       className,
+      classModifier = "",
       label,
       description,
       helper,
@@ -78,12 +81,10 @@ const TextAreaCommon = forwardRef<HTMLTextAreaElement, TextAreaCommonProps>(
     const hasWarning =
       Boolean(message) && messageType === "warning" && !hasError;
 
-    const textareaClassName = [
-      "af-form__textarea",
-      hasWarning ? "af-form__textarea--warning" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
+    const textareaClassName = getClassName({
+      baseClassName: "af-form__textarea",
+      modifiers: [...classModifier.split(" "), hasWarning && "warning"],
+    });
 
     return (
       <div
@@ -103,7 +104,6 @@ const TextAreaCommon = forwardRef<HTMLTextAreaElement, TextAreaCommonProps>(
         >
           {label}
         </ItemLabelComponent>
-
         <textarea
           id={inputId}
           className={textareaClassName}
@@ -115,13 +115,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}