[#360] [#110] add textarea atom/ form for GAs

IntersectMBO · Mar 5, 2024 · bcbd293 · bcbd293
1 parent 3dc6c6b
commit bcbd293
Show file tree

Hide file tree

Showing 21 changed files with 578 additions and 33 deletions.
diff --git a/govtool/frontend/src/components/atoms/FormHelpfulText.tsx b/govtool/frontend/src/components/atoms/FormHelpfulText.tsx
@@ -0,0 +1,23 @@
+import { Typography } from "@mui/material";
+
+import { FormHelpfulTextProps } from "./types";
+
+export const FormHelpfulText = ({
+  helpfulText,
+  helpfulTextStyle,
+}: FormHelpfulTextProps) => {
+  return (
+    helpfulText && (
+      <Typography
+        color="#9792B5"
+        data-testid={`${helpfulText.replace(/\s+/g, "-").toLowerCase()}-error`}
+        fontSize={12}
+        fontWeight={400}
+        sx={{ mt: 0.5 }}
+        {...helpfulTextStyle}
+      >
+        {helpfulText}
+      </Typography>
+    )
+  );
+};
diff --git a/govtool/frontend/src/components/atoms/InfoText.tsx b/govtool/frontend/src/components/atoms/InfoText.tsx
@@ -0,0 +1,9 @@
+import { InfoTextProps, Typography } from ".";
+
+export const InfoText = ({ label, sx }: InfoTextProps) => {
+  return (
+    <Typography color="#FF833B" sx={sx} variant="body1">
+      {label.toLocaleUpperCase()}
+    </Typography>
+  );
+};
diff --git a/govtool/frontend/src/components/atoms/Input.tsx b/govtool/frontend/src/components/atoms/Input.tsx
@@ -41,12 +41,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         inputProps={{ "data-testid": dataTestId }}
         inputRef={inputRef}
         sx={{
-          backgroundColor: errorMessage ? "inputRed" : "transparent",
+          backgroundColor: errorMessage ? "inputRed" : "white",
           border: 1,
           borderColor: errorMessage ? "red" : "secondaryBlue",
           borderRadius: 50,
           padding: "8px 16px",
           width: "100%",
+          "& input.Mui-disabled": {
+            WebkitTextFillColor: "#4C495B",
+          },
+          "&.Mui-disabled": {
+            backgroundColor: "#F5F5F8",
+            borderColor: "#9792B5",
+          },
           ...sx,
         }}
         {...rest}

diff --git a/govtool/frontend/src/components/atoms/TextArea.tsx b/govtool/frontend/src/components/atoms/TextArea.tsx
@@ -0,0 +1,70 @@
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { TextareaAutosize, styled } from "@mui/material";
+
+import { useScreenDimension } from "@hooks";
+
+import { TextAreaProps } from "./types";
+
+const TextAreaBase = styled(TextareaAutosize)(
+  () => `
+  font-family: "Poppins";
+  font-size: 16px;
+  font-weight: 400;
+    ::placeholder {
+      font-family: "Poppins";
+      font-size: 16px;
+      font-weight: 400;
+      color: #a6a6a6;
+    }
+    `
+);
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ errorMessage, maxLength = 500, onBlur, onFocus, ...props }, ref) => {
+    const { isMobile } = useScreenDimension();
+    const textAraeRef = useRef<HTMLTextAreaElement>(null);
+
+    const handleFocus = useCallback(
+      (e: React.FocusEvent<HTMLTextAreaElement>) => {
+        onFocus?.(e);
+        textAraeRef.current?.focus();
+      },
+      []
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLTextAreaElement>) => {
+        onBlur?.(e);
+        textAraeRef.current?.blur();
+      },
+      []
+    );
+
+    useImperativeHandle(
+      ref,
+      () =>
+        ({
+          focus: handleFocus,
+          blur: handleBlur,
+          ...textAraeRef.current,
+        } as unknown as HTMLTextAreaElement),
+      [handleBlur, handleFocus]
+    );
+
+    return (
+      <TextAreaBase
+        style={{
+          border: `1px solid ${errorMessage ? "red" : "#6F99FF"}`,
+          borderRadius: "24px",
+          height: isMobile ? "104px" : "128px",
+          outline: "none",
+          padding: "12px 14px",
+          resize: "none",
+        }}
+        maxLength={maxLength}
+        ref={textAraeRef}
+        {...props}
+      />
+    );
+  }
+);
diff --git a/govtool/frontend/src/components/atoms/index.ts b/govtool/frontend/src/components/atoms/index.ts
@@ -6,7 +6,9 @@ export * from "./ClickOutside";
 export * from "./CopyButton";
 export * from "./DrawerLink";
 export * from "./FormErrorMessage";
+export * from "./FormHelpfulText";
 export * from "./HighlightedText";
+export * from "./InfoText";
 export * from "./Input";
 export * from "./Link";
 export * from "./LoadingButton";
@@ -19,6 +21,7 @@ export * from "./ScrollToManage";
 export * from "./ScrollToTop";
 export * from "./Spacer";
 export * from "./StakeRadio";
+export * from "./TextArea";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./VotePill";

diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
@@ -4,6 +4,8 @@ import {
   CheckboxProps as MUICheckboxProps,
   InputBaseProps,
   TypographyProps as MUITypographyProps,
+  TextareaAutosizeProps,
+  SxProps,
 } from "@mui/material";
 
 export type ButtonProps = Omit<MUIButtonProps, "size"> & {
@@ -55,3 +57,17 @@ export type FormErrorMessageProps = {
   errorMessage?: string;
   errorStyles?: MUITypographyProps;
 };
+
+export type FormHelpfulTextProps = {
+  helpfulText?: string;
+  helpfulTextStyle?: MUITypographyProps;
+};
+
+export type TextAreaProps = TextareaAutosizeProps & {
+  errorMessage?: string;
+};
+
+export type InfoTextProps = {
+  label: string;
+  sx?: SxProps;
+};
diff --git a/govtool/frontend/src/components/molecules/Field/Input.tsx b/govtool/frontend/src/components/molecules/Field/Input.tsx
@@ -1,7 +1,12 @@
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { Box } from "@mui/material";
 
-import { FormErrorMessage, Input as InputBase, Typography } from "@atoms";
+import {
+  FormErrorMessage,
+  FormHelpfulText,
+  Input as InputBase,
+  Typography,
+} from "@atoms";
 
 import { InputFieldProps } from "./types";
 
@@ -10,6 +15,8 @@ export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
     {
       errorMessage,
       errorStyles,
+      helpfulText,
+      helpfulTextStyle,
       label,
       labelStyles,
       layoutStyles,
@@ -45,11 +52,20 @@ export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
     return (
       <Box sx={{ width: "100%", ...layoutStyles }}>
         {label && (
-          <Typography fontWeight={400} variant="body2" {...labelStyles}>
+          <Typography
+            fontWeight={400}
+            sx={{ mb: 0.5 }}
+            variant="body2"
+            {...labelStyles}
+          >
             {label}
           </Typography>
         )}
         <InputBase errorMessage={errorMessage} {...rest} ref={inputRef} />
+        <FormHelpfulText
+          helpfulText={helpfulText}
+          helpfulTextStyle={helpfulTextStyle}
+        />
         <FormErrorMessage
           errorMessage={errorMessage}
           errorStyles={errorStyles}

diff --git a/govtool/frontend/src/components/molecules/Field/TextArea.tsx b/govtool/frontend/src/components/molecules/Field/TextArea.tsx
@@ -0,0 +1,97 @@
+import { Box } from "@mui/material";
+
+import {
+  FormErrorMessage,
+  FormHelpfulText,
+  TextArea as TextAreaBase,
+  Typography,
+} from "@atoms";
+
+import { TextAreaFieldProps } from "./types";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
+  (
+    {
+      errorMessage,
+      errorStyles,
+      helpfulText,
+      helpfulTextStyle,
+      label,
+      labelStyles,
+      layoutStyles,
+      maxLength = 500,
+      onBlur,
+      onFocus,
+      ...props
+    },
+    ref
+  ) => {
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+    const handleFocus = useCallback(
+      (e: React.FocusEvent<HTMLTextAreaElement>) => {
+        onFocus?.(e);
+        textAreaRef.current?.focus();
+      },
+      []
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLTextAreaElement>) => {
+        onBlur?.(e);
+        textAreaRef.current?.blur();
+      },
+      []
+    );
+
+    useImperativeHandle(
+      ref,
+      () =>
+        ({
+          focus: handleFocus,
+          blur: handleBlur,
+          ...textAreaRef.current,
+        } as unknown as HTMLTextAreaElement),
+      [handleBlur, handleFocus]
+    );
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          position: "relative",
+          ...layoutStyles,
+        }}
+      >
+        {label && (
+          <Typography
+            fontWeight={400}
+            sx={{ mb: 0.5 }}
+            variant="body2"
+            {...labelStyles}
+          >
+            {label}
+          </Typography>
+        )}
+        <TextAreaBase maxLength={maxLength} {...props} ref={textAreaRef} />
+        <FormHelpfulText
+          helpfulText={helpfulText}
+          helpfulTextStyle={helpfulTextStyle}
+        />
+        <FormErrorMessage
+          errorMessage={errorMessage}
+          errorStyles={errorStyles}
+        />
+        <Typography
+          color="#8E908E"
+          sx={{ bottom: 35, position: "absolute", right: 15 }}
+          variant="caption"
+        >
+          {props?.value?.toString()?.length ?? 0}/{maxLength}
+        </Typography>
+      </Box>
+    );
+  }
+);
diff --git a/govtool/frontend/src/components/molecules/Field/index.tsx b/govtool/frontend/src/components/molecules/Field/index.tsx
@@ -2,10 +2,12 @@ import React, { PropsWithChildren } from "react";
 
 import { Checkbox } from "./Checkbox";
 import { Input } from "./Input";
+import { TextArea } from "./TextArea";
 
 type FieldComposition = React.FC<PropsWithChildren> & {
   Input: typeof Input;
   Checkbox: typeof Checkbox;
+  TextArea: typeof TextArea;
 };
 
 const Field: FieldComposition = ({ children }) => {
@@ -14,6 +16,7 @@ const Field: FieldComposition = ({ children }) => {
 
 Field.Checkbox = Checkbox;
 Field.Input = Input;
+Field.TextArea = TextArea;
 
 export { Field };
 

diff --git a/govtool/frontend/src/components/molecules/Field/types.ts b/govtool/frontend/src/components/molecules/Field/types.ts
@@ -1,10 +1,17 @@
 import { BoxProps, TypographyProps as MUITypographyProps } from "@mui/material";
 
-import { CheckboxProps, InputProps, TypographyProps } from "@atoms";
+import {
+  CheckboxProps,
+  InputProps,
+  TextAreaProps,
+  TypographyProps,
+} from "@atoms";
 
 export type InputFieldProps = InputProps & {
   errorMessage?: string;
   errorStyles?: MUITypographyProps;
+  helpfulText?: string;
+  helpfulTextStyle?: MUITypographyProps;
   label?: string;
   labelStyles?: TypographyProps;
   layoutStyles?: BoxProps;
@@ -17,3 +24,13 @@ export type CheckboxFieldProps = CheckboxProps & {
   labelStyles?: TypographyProps;
   layoutStyles?: BoxProps;
 };
+
+export type TextAreaFieldProps = TextAreaProps & {
+  errorMessage?: string;
+  errorStyles?: MUITypographyProps;
+  helpfulText?: string;
+  helpfulTextStyle?: MUITypographyProps;
+  label?: string;
+  labelStyles?: TypographyProps;
+  layoutStyles?: BoxProps;
+};
diff --git a/govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx b/govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx
@@ -34,15 +34,15 @@ export const ChooseGovernanceActionType = ({
     return GOVERNANCE_ACTION_TYPES.map((type, index) => {
       const isChecked = getValues("type") === type;
       return (
-        <>
+        <div key={type}>
           <ActionRadio
             isChecked={isChecked}
             onChange={onChangeType}
             title={type}
             value={type}
           />
           {index + 1 < GOVERNANCE_ACTION_TYPES.length ? <Spacer y={2} /> : null}
-        </>
+        </div>
       );
     });
   };