From 34a7790f0632d28261add8eac12c3831ed37130d Mon Sep 17 00:00:00 2001
From: Jareth Whitney <jareth.whitney@gov.bc.ca>
Date: Wed, 2 Oct 2024 13:43:02 -0700
Subject: [PATCH] feature/deseng695: Updated contact create/edit form, minor
 styling update to image picker.

---
 CHANGELOG.MD                                  |  2 +-
 .../WhoIsListening/AddContactDrawer.tsx       | 82 ++++++++++---------
 .../WhoIsListening/WhoIsListeningForm.tsx     |  1 +
 met-web/src/components/imageUpload/index.tsx  | 11 ++-
 4 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 7f52779c4..1d8fa65a7 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -6,6 +6,7 @@
 	- Added option to enter widget description text (below title, above contacts)
 	- Adjusted CSS to accomodate multiple viewports
 	- Added ARIA labels for accessibility
+	- Updated contact create/edit form
 
 - **Feature** New Video Widget front end [🎟️ DESENG-692](https://citz-gdx.atlassian.net/browse/DESENG-692)
 	- Changed icon colour from yellow to white to accomodate company branding requests
@@ -22,7 +23,6 @@
 ## September 25, 2024
 
 - **Feature** New Video Widget front end [🎟️ DESENG-692](https://citz-gdx.atlassian.net/browse/DESENG-692)
-
   - Removed unneeded tables from db
   - Updated all other met_api and met_web logic to accomodate this
 
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx
index 6b6e1dbb6..9c5d3db3c 100644
--- a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx
+++ b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx
@@ -143,7 +143,7 @@ const AddContactDrawer = () => {
 
     return (
         <Drawer anchor="right" open={addContactDrawerOpen} onClose={handleCloseDrawer}>
-            <Box sx={{ width: '40vw', paddingTop: '7em' }} role="presentation">
+            <Box sx={{ width: '45vw', paddingTop: '7em' }} role="presentation">
                 <FormProvider {...methods}>
                     <Grid
                         container
@@ -157,9 +157,10 @@ const AddContactDrawer = () => {
                             <MetHeader3 bold>{contactToEdit ? 'Edit' : 'Add'} Contact</MetHeader3>
                             <Divider sx={{ marginTop: '1em' }} />
                         </Grid>
-                        <Grid item xs={12} lg={4}>
+                        <Grid item xs={12} lg={5} sx={{ minHeight: '14rem' }}>
                             <MetLabel sx={{ marginBottom: '2px' }}>Profile Picture</MetLabel>
                             <ImageUpload
+                                height="17.813rem"
                                 data-testid="contact/image-upload"
                                 handleAddFile={handleAddAvatarImage}
                                 savedImageUrl={contactToEdit?.avatar_url}
@@ -167,11 +168,12 @@ const AddContactDrawer = () => {
                                 helpText={'Drop an image here or click to select one.'}
                             />
                         </Grid>
-                        <Grid item xs={12} lg={8} container direction="row" spacing={2}>
+                        <Grid item xs={12} lg={7} container direction="row" spacing={2}>
                             <Grid item xs={12}>
-                                <MetLabel sx={{ marginBottom: '2px' }}>Name *</MetLabel>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Name (Required)</MetLabel>
                                 <ControlledTextField
                                     name="name"
+                                    aria-label="Name: required."
                                     id="contact-name"
                                     data-testid="contact-form/name"
                                     variant="outlined"
@@ -184,9 +186,10 @@ const AddContactDrawer = () => {
                                 />
                             </Grid>
                             <Grid item xs={12}>
-                                <MetLabel sx={{ marginBottom: '2px' }}>Title</MetLabel>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Title (Optional)</MetLabel>
                                 <ControlledTextField
                                     id="contact-title"
+                                    aria-label="Title: optional."
                                     data-testid="contact-form/title"
                                     variant="outlined"
                                     InputLabelProps={{
@@ -197,42 +200,46 @@ const AddContactDrawer = () => {
                                     size="small"
                                 />
                             </Grid>
+                            <Grid item xs={12}>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Phone (Optional)</MetLabel>
+                                <ControlledTextField
+                                    id="contact-phone"
+                                    data-testid="contact-form/phone"
+                                    aria-label="Phone: optional."
+                                    variant="outlined"
+                                    label=" "
+                                    InputLabelProps={{
+                                        shrink: false,
+                                    }}
+                                    fullWidth
+                                    name="phone_number"
+                                    size="small"
+                                />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Email (Required)</MetLabel>
+                                <ControlledTextField
+                                    id="contact-email"
+                                    data-testid="contact-form/email"
+                                    aria-label="Email: optional."
+                                    variant="outlined"
+                                    label=" "
+                                    InputLabelProps={{
+                                        shrink: false,
+                                    }}
+                                    fullWidth
+                                    name="email"
+                                    size="small"
+                                />
+                            </Grid>
                         </Grid>
-                        <Grid item xs={12} lg={4}>
-                            <MetLabel sx={{ marginBottom: '2px' }}>Phone</MetLabel>
-                            <ControlledTextField
-                                id="contact-phone"
-                                data-testid="contact-form/phone"
-                                variant="outlined"
-                                label=" "
-                                InputLabelProps={{
-                                    shrink: false,
-                                }}
-                                fullWidth
-                                name="phone_number"
-                                size="small"
-                            />
-                        </Grid>
-                        <Grid item xs={12} lg={8}>
-                            <MetLabel sx={{ marginBottom: '2px' }}>Email *</MetLabel>
-                            <ControlledTextField
-                                id="contact-email"
-                                data-testid="contact-form/email"
-                                variant="outlined"
-                                label=" "
-                                InputLabelProps={{
-                                    shrink: false,
-                                }}
-                                fullWidth
-                                name="email"
-                                size="small"
-                            />
-                        </Grid>
+
                         <Grid item xs={12}>
-                            <MetLabel sx={{ marginBottom: '2px' }}>Address</MetLabel>
+                            <MetLabel sx={{ marginBottom: '2px' }}>Address (Optional)</MetLabel>
                             <ControlledTextField
                                 id="contact-address"
                                 data-testid="contact-form/address"
+                                aria-label="Address: optional."
                                 variant="outlined"
                                 label=" "
                                 InputLabelProps={{
@@ -244,10 +251,11 @@ const AddContactDrawer = () => {
                             />
                         </Grid>
                         <Grid item xs={12}>
-                            <MetLabel sx={{ marginBottom: '2px' }}>Bio</MetLabel>
+                            <MetLabel sx={{ marginBottom: '2px' }}>Biography (Optional)</MetLabel>
                             <ControlledTextField
                                 id="contact-bio"
                                 data-testid="contact-form/bio"
+                                aria-label="Biography: optional."
                                 variant="outlined"
                                 label=" "
                                 InputLabelProps={{
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx
index 819122343..bf4fc9fe3 100644
--- a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx
+++ b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx
@@ -140,6 +140,7 @@ const WhoIsListeningForm = () => {
                             <TextField
                                 {...params}
                                 label=" "
+                                aria-label="Select an existing contact."
                                 InputLabelProps={{
                                     shrink: false,
                                 }}
diff --git a/met-web/src/components/imageUpload/index.tsx b/met-web/src/components/imageUpload/index.tsx
index 3639137d9..674d70845 100644
--- a/met-web/src/components/imageUpload/index.tsx
+++ b/met-web/src/components/imageUpload/index.tsx
@@ -42,10 +42,17 @@ export const ImageUpload = ({
         >
             <Uploader height={height} accept={accept}>
                 <FontAwesomeIcon icon={faCloudUpload} size="2x" color={colors.surface.blue[90]} />
-                <BodyText bold size="small" sx={{ color: colors.surface.blue[90], textAlign: 'center' }}>
+                <BodyText
+                    bold
+                    size="small"
+                    sx={{ color: colors.surface.blue[90], textAlign: 'center', pl: '1rem', pr: '1rem' }}
+                >
                     {helpText}
                 </BodyText>
-                <BodyText size="small" sx={{ color: colors.surface.gray[80] }}>
+                <BodyText
+                    size="small"
+                    sx={{ color: colors.surface.gray[80], textAlign: 'center', pl: '1rem', pr: '1rem' }}
+                >
                     Supported formats: JPG, PNG, WEBP
                 </BodyText>
                 <Button id="select-file-button" variant="secondary" size="small" sx={{ mt: '1.5em' }}>