Address PR comments

CONTRIBUTING.md

@@ -96,3 +96,6 @@ Examples of when to Request Changes
   - `FormStep`: A wrapper around a form component that accepts a completion criteria and displays the user's progress. Accepts a `step` prop that is a number (from 1 to 9) that represents the current step in the form. This will be rendered as an icon with a checkmark if the step is complete, and a number if it's the current step or if it's incomplete.
   - `SystemMessage`: An informational message that can be displayed to the user. Accepts a `type` prop that can be "error", "warning", "info", or "success", which affects the display of the message.
   - `WidgetPicker`: A modular widget picker component that can be placed anywhere in the engagement editing area. In order to align widgets in the backend with the frontend, a "location" prop is required. Add new locations to the `WidgetLocation` enum.
+  - `ErrorMessage`: A styled error message that can be displayed to the user. Accepts a `message` prop that is the error message to display.
+  - `TextInput`: A styled text input that can be used in forms. Accepts a `placeholder` and all other props that a normal MUI TextField would accept.
+  - `TextField`: A convenience wrapper around `TextInput` that includes a label, requirement decorations, and helper/error text. Error text is internally rendered by `ErrorMessage`.

met-web/src/components/common/Typography/Body.tsx

@@ -51,9 +51,7 @@ export const BodyText = ({
 };
 
 export const ErrorMessage = ({ error }: { error?: string }) => {
-    if (!error) {
-        return <></>;
-    }
+    if (!error) return null;
     return (
         <BodyText bold size="small" sx={{ color: colors.notification.error.shade, lineHeight: '24px' }}>
             <FontAwesomeIcon

met-web/src/components/engagement/admin/create/authoring/AuthoringContext.tsx

@@ -142,11 +142,20 @@ export const AuthoringContext = () => {
         }
     }, [fetcher.data]);
     const pageName = useMatch('/engagements/:engagementId/details/authoring/:page')?.params.page;
+    // Set the form resolver based on the page name
+    const resolver = useMemo(() => {
+        switch (pageName) {
+            case 'banner':
+                return yupResolver(authoringTemplateSchema);
+            default:
+                return undefined;
+        }
+    }, [pageName]);
     const engagementUpdateForm = useForm<EngagementUpdateData>({
         defaultValues: useMemo(() => defaultValues, [defaultValues]),
         mode: 'onSubmit',
         reValidateMode: 'onChange',
-        resolver: pageName === 'banner' ? yupResolver(authoringTemplateSchema) : undefined,
+        resolver: resolver,
     });
     const onSubmit = async (data: EngagementUpdateData) => {
         const savedImageDetails = data.image_file

met-web/src/components/engagement/admin/create/authoring/AuthoringFeedback.tsx

@@ -9,7 +9,6 @@ import { Palette } from 'styles/Theme';
 
 const AuthoringFeedback = () => {
     const [sectionHeading, setSectionHeading] = useState('');
-    // const [bodyText, setBodyText] = useState('');
     const [editorState, setEditorState] = useState<EditorState>();
     const [surveyButtonText, setSurveyButtonText] = useState('');
     const [thirdPartyCtaText, setThirdPartyCtaText] = useState('');
@@ -78,8 +77,6 @@ const AuthoringFeedback = () => {
 
     const handleEditorChange = (newEditorState: EditorState) => {
         setEditorState(newEditorState);
-        // const plainText = newEditorState.getCurrentContent().getPlainText();
-        // setBodyText(plainText);
     };
 
     const handleWidgetChange = (event: SelectChangeEvent<string>) => {