Merge pull request #1825 from hackforla/dev

Dev

Author: sydneywalcoff

products/statement-generator/public/locales/en/translation.json

@@ -124,6 +124,15 @@
     "finalize": "My declaration letter",
     "completed": "Completed"
   },
+  "sections_helper_text": {
+    "job": "Current job(s) full-time, part-time, or self-employed",
+    "unemployment": "Looking for work and/or difficulty finding work",
+    "self_improvement": "Counseling, musical/art therapies, health and fitness, or treatment programs",
+    "education": "School, college, or certification",
+    "parenting": "Raising a child or children",
+    "community_service": "Volunteer work at a community organization",
+    "something_else": "Anything else you want to include"
+  },
   "introduction_form": {
     "fullName_input_label": "What is your full name?",
     "fullName_input_placeholder": "Firstname Lastname",
@@ -132,7 +141,7 @@
     "isVeteran_label": "Are you a veteran of the United States of America?"
   },
   "involvement_form": {
-    "checkboxgroup_label": "What have you been involved with since your conviction?\n\nCheck all that apply:",
+    "checkboxgroup_label": "What have you been involved with since your conviction?\n\nCheck all that apply. You will be able to add more details later.",
     "none_above": "None of the above"
   },
   "job_form": {

products/statement-generator/src/components/Checkbox.tsx

@@ -1,84 +1,73 @@
 import React from 'react';
 import { makeStyles, createStyles, Theme } from '@material-ui/core';
-import { teal } from '@material-ui/core/colors';
+import Box from '@material-ui/core/Box';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+import FormHelperText from '@material-ui/core/FormHelperText';
 
-interface ICheckboxStyle {
-  theme?: string;
-}
-
-const useStyles = makeStyles<Theme, ICheckboxStyle>(({ palette }) =>
+const useStyles = makeStyles<Theme>(({ palette }) =>
   createStyles({
     root: {
-      color: ({ theme }) => {
-        switch (theme) {
-          case 'teal':
-            return teal.A400;
-          case 'black':
-          default:
-            return palette.common.black;
-        }
-      },
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
 
-      // hacky because the component is adding the colorSecondary for some reason
-      '&.MuiCheckbox-colorSecondary.Mui-checked': {
-        color: ({ theme }) => {
-          switch (theme) {
-            case 'teal':
-              return teal.A400;
-            case 'black':
-            default:
-              return palette.common.black;
-          }
+      '& .MuiFormControlLabel-root': {
+        marginLeft: 0, // Undo default -11px styling
+        color: palette.primary.darker,
+
+        '& .MuiCheckbox-root': {
+          padding: '0px 8px 0px 0px', // 8px right padding on checkbox
+
+          // MUI v4 checkboxes default to secondary
+          '&.MuiCheckbox-colorSecondary': {
+            color: palette.primary.darker,
+            opacity: 0.3,
+            '&.Mui-checked': {
+              color: palette.success.main,
+              opacity: 1,
+            },
+          },
         },
       },
+
+      '& .MuiFormHelperText-root': {
+        marginTop: 0,
+        marginLeft: 32, // Padding to align with checkbox label
+        fontSize: '0.875rem',
+        lineHeight: '1rem',
+        color: palette.primary.darker,
+        opacity: 0.75,
+      },
     },
   })
 );
 
-interface IInnerCheckboxProps extends CheckboxProps {
-  checked: boolean;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  id?: string;
-  useTeal?: boolean;
-}
-
-const InnerCheckbox = React.forwardRef<HTMLInputElement, IInnerCheckboxProps>(
-  ({ checked, onChange, id, useTeal }, ref) => {
-    const classes = useStyles({ theme: useTeal ? 'teal' : 'black' });
-    return (
-      <Checkbox
-        classes={classes}
-        checked={checked}
-        onChange={onChange}
-        id={id}
-        inputRef={ref}
-      />
-    );
-  }
-);
-
-interface IWrapperCheckboxProps extends IInnerCheckboxProps {
+interface IWrapperCheckboxProps extends CheckboxProps {
   label: string;
+  helperText?: string;
 }
 
 const CheckboxLabels = React.forwardRef<
   HTMLInputElement,
   IWrapperCheckboxProps
->(({ label, checked, onChange, id, useTeal = false }, ref) => (
-  <FormControlLabel
-    control={
-      <InnerCheckbox
-        useTeal={useTeal}
-        id={id}
-        checked={checked}
-        onChange={onChange}
-        ref={ref}
+>(({ label, helperText = '', checked, onChange, id }, ref) => {
+  const classes = useStyles();
+  return (
+    <Box className={classes.root}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            id={id}
+            checked={checked}
+            onChange={onChange}
+            inputRef={ref}
+          />
+        }
+        label={label}
       />
-    }
-    label={label}
-  />
-));
-
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </Box>
+  );
+});
 export default CheckboxLabels;

products/statement-generator/src/pages-form/InvolvementInitialFlow.tsx

@@ -10,18 +10,18 @@ import FormStateContext from 'contexts/FormStateContext';
 import Checkbox from 'components/Checkbox';
 import FormFlowContainer from 'components-layout/FormFlowContainer';
 
-const useStyles = makeStyles<Theme>(({ palette, spacing }) =>
+const useStyles = makeStyles<Theme>(({ palette }) =>
   createStyles({
     checkboxGroup: {
+      gap: 24,
       '& .MuiFormLabel-root': {
-        color: palette.common.black,
+        color: palette.primary.darker,
       },
       '& .MuiFormLabel-root.Mui-focused': {
-        color: palette.common.black,
+        color: palette.primary.darker,
       },
-
-      '& .MuiFormLabel-root + .MuiFormGroup-root': {
-        marginTop: spacing(1),
+      '& .MuiFormGroup-root': {
+        gap: 16,
       },
     },
   })
@@ -79,57 +79,53 @@ function InvolvementInitialFlow() {
         </FormLabel>
         <FormGroup id="involvement-checkboxes">
           <Checkbox
-            useTeal
             id="isJobChecked"
             checked={isJobChecked}
             onChange={onCheckboxChange}
             label={t('sections.job')}
+            helperText={t('sections_helper_text.job')}
           />
           <Checkbox
-            useTeal
             id="isUnemploymentChecked"
             checked={isUnemploymentChecked}
             onChange={onCheckboxChange}
             label={t('sections.unemployment')}
+            helperText={t('sections_helper_text.unemployment')}
           />
           <Checkbox
-            useTeal
             id="isRecoveryChecked"
             checked={isRecoveryChecked}
             onChange={onCheckboxChange}
             label={t('sections.self_improvement')}
+            helperText={t('sections_helper_text.self_improvement')}
           />
-
           <Checkbox
-            useTeal
             id="isSchoolChecked"
             checked={isSchoolChecked}
             onChange={onCheckboxChange}
             label={t('sections.education')}
+            helperText={t('sections_helper_text.education')}
           />
-
           <Checkbox
-            useTeal
             id="isParentingChecked"
             checked={isParentingChecked}
             onChange={onCheckboxChange}
             label={t('sections.parenting')}
+            helperText={t('sections_helper_text.parenting')}
           />
-
           <Checkbox
-            useTeal
             id="isCommunityChecked"
             checked={isCommunityChecked}
             onChange={onCheckboxChange}
             label={t('sections.community_service')}
+            helperText={t('sections_helper_text.community_service')}
           />
-
           <Checkbox
-            useTeal
             id="isSomethingElseChecked"
             checked={isSomethingElseChecked}
             onChange={onCheckboxChange}
             label={t('sections.something_else')}
+            helperText={t('sections_helper_text.something_else')}
           />
         </FormGroup>
       </FormControl>