feat(design): HCD Design Changes (#873)

react-app/src/components/ActionForm/ActionFormAttachments.tsx

@@ -1,14 +1,14 @@
-import { useFormContext } from "react-hook-form";
-import { z } from "zod";
 import {
-  SectionCard,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   RequiredIndicator,
+  SectionCard,
   Upload,
 } from "@/components";
+import { useFormContext } from "react-hook-form";
+import { z } from "zod";
 
 import { Fragment } from "react/jsx-runtime";
 import {
@@ -52,7 +52,7 @@ export const ActionFormAttachments = ({
         </>
       }
     >
-      <div className="text-gray-700 font-light">
+      <div>
         {callout && (
           <>
             <p className="font-medium">{callout}</p>
@@ -74,7 +74,7 @@ export const ActionFormAttachments = ({
             name={`attachments.${key}.files`}
             render={({ field }) => (
               <FormItem>
-                <FormLabel data-testid={`${key}-label`}>
+                <FormLabel className="font-bold" data-testid={`${key}-label`}>
                   {value.shape.label._def.defaultValue()}{" "}
                   {value.shape.files instanceof z.ZodOptional ? null : <RequiredIndicator />}
                 </FormLabel>

react-app/src/components/ActionForm/AdditionalInformation.tsx

@@ -1,25 +1,19 @@
+import { ControllerRenderProps, FieldPath } from "react-hook-form";
 import { z } from "zod";
 import { SchemaWithEnforcableProps } from ".";
 import { FormDescription, FormItem, FormLabel, Textarea } from "../Inputs";
-import { ControllerRenderProps, FieldPath } from "react-hook-form";
 
 type AdditionalInformationProps<Schema extends SchemaWithEnforcableProps> = {
   label: string;
   field: ControllerRenderProps<z.TypeOf<Schema>, FieldPath<z.TypeOf<Schema>>>;
 };
 
-export const AdditionalInformation = <
-  Schema extends SchemaWithEnforcableProps,
->({
+export const AdditionalInformation = <Schema extends SchemaWithEnforcableProps>({
   label,
   field,
 }: AdditionalInformationProps<Schema>) => (
   <FormItem>
-    <FormLabel
-      htmlFor="additional-info"
-      data-testid="addl-info-label"
-      className="font-normal"
-    >
+    <FormLabel htmlFor="additional-info" data-testid="addl-info-label" className="font-normal">
       {label}
     </FormLabel>
     <Textarea
@@ -37,6 +31,7 @@ export const AdditionalInformation = <
         id="character-count"
         aria-label="character-count"
         aria-live="polite"
+        className="text-neutral-500"
       >
         {`${4000 - (field?.value?.length || 0)} characters remaining`}
       </span>

react-app/src/components/ActionForm/actionForm.components.tsx

@@ -5,7 +5,7 @@ import { z } from "zod";
 export const AttachmentFileFormatInstructions = () => (
   <p>
     We accept the following file formats:{" "}
-    <strong>.doc, .docx, .pdf, .jpg, .xlsx, and more. </strong>{" "}
+    <span className="font-bold">.doc, .docx, .pdf, .jpg, .xlsx, and more. </span>{" "}
     <Link
       to={"/faq/acceptable-file-formats"}
       target={FAQ_TAB}
@@ -18,15 +18,11 @@ export const AttachmentFileFormatInstructions = () => (
   </p>
 );
 
-export const AttachmentFAQInstructions = ({
-  faqLink,
-}: {
-  faqLink?: string;
-}) => (
+export const AttachmentFAQInstructions = ({ faqLink }: { faqLink?: string }) => (
   <p data-testid="attachments-instructions">
-    Maximum file size of 80 MB per attachment. You can add multiple files per
-    attachment type. Read the description for each of the attachment types on
-    the{" "}
+    Maximum file size of 80 MB per attachment.{" "}
+    <span className="font-bold">You can add multiple files per attachment type.</span> Read the
+    description for each of the attachment types on the{" "}
     <Link
       to={faqLink || "/faq"}
       target={FAQ_TAB}
@@ -40,16 +36,9 @@ export const AttachmentFAQInstructions = ({
 );
 
 const isZodArrayDef = (def: unknown): def is z.ZodArrayDef =>
-  def &&
-  typeof def === "object" &&
-  "typeName" in def &&
-  def.typeName === "ZodArray";
+  def && typeof def === "object" && "typeName" in def && def.typeName === "ZodArray";
 
-export const AttachmentInstructions = ({
-  fileValidation,
-}: {
-  fileValidation: z.ZodArray<any>;
-}) => {
+export const AttachmentInstructions = ({ fileValidation }: { fileValidation: z.ZodArray<any> }) => {
   if (isZodArrayDef(fileValidation)) {
     const { maxLength, minLength } = fileValidation;
 

react-app/src/components/Form/content/ContentWrappers.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, ReactNode } from "react";
-import { Info } from "lucide-react";
 import { Alert, RequiredIndicator, SectionCard } from "@/components";
 import clsx from "clsx";
+import { Info } from "lucide-react";
+import { ReactElement, ReactNode } from "react";
 
 export const FormSectionCard = ({
   children,
@@ -31,16 +31,11 @@ export const FormSectionCard = ({
 
 export const RequiredFieldDescription = () => (
   <>
-    <RequiredIndicator />{" "}
-    <em className="font-light">Indicates a required field.</em>
+    <RequiredIndicator /> <em className="text-neutral-500">Indicates a required field.</em>
   </>
 );
 
-export const ProgressLossReminder = ({
-  className = "",
-}: {
-  className?: string;
-}) => (
+export const ProgressLossReminder = ({ className = "" }: { className?: string }) => (
   <p className={clsx("font-bold", className)}>
     If you leave this page, you will lose your progress on this form.
   </p>
@@ -54,7 +49,7 @@ export const ActionFormDescription = ({
   boldReminder?: boolean;
 }) => {
   return (
-    <div className="mt-4 text-gray-700 font-light">
+    <div className="mt-4">
       {children}
       {boldReminder && <ProgressLossReminder />}
     </div>

react-app/src/components/Form/content/PackageSection.tsx

@@ -33,11 +33,11 @@ export const PackageSection = () => {
   return (
     <section className="flex flex-col mb-8 space-y-8">
       <div>
-        <p>{getIdLabel(authority)}</p>
+        <p className="font-bold">{getIdLabel(authority)}</p>
         <p className="text-xl">{id}</p>
       </div>
       <div>
-        <p>Authority</p>
+        <p className="font-bold">Authority</p>
         <p className="text-xl">{getAuthorityLabel(authority)}</p>
       </div>
     </section>

react-app/src/components/Form/old-content.tsx

@@ -1,12 +1,12 @@
-import { Link } from "react-router-dom";
-import { Info } from "lucide-react";
 import {
-  Alert,
-  RequiredFieldDescription,
   ActionFormDescription,
+  Alert,
   ProgressLossReminder,
+  RequiredFieldDescription,
 } from "@/components";
 import { FAQ_TAB } from "@/router";
+import { Info } from "lucide-react";
+import { Link } from "react-router-dom";
 
 type FormIntroTextProps = {
   hasProgressLossReminder?: boolean;
@@ -37,10 +37,8 @@ export const FormIntroTextForAppK = () => (
 
 export const SpaIdFormattingDesc = () => (
   <>
-    <p className="text-gray-800 font-light">
-      Must follow the format SS-YY-NNNN or SS-YY-NNNN-XXXX.
-    </p>
-    <p className="text-gray-500 font-light">
+    <p>Must follow the format SS-YY-NNNN or SS-YY-NNNN-XXXX.</p>
+    <p className="text-neutral-500">
       Reminder - CMS recommends that all SPA numbers start with the year in which the package is
       submitted.
     </p>
@@ -56,9 +54,12 @@ export const AttachmentsSizeTypesDesc = ({
 }) => (
   <div className="text-gray-700 font-light">
     <p>
-      Maximum file size of 80 MB per attachment. You can add multiple files per attachment type
-      {includeCMS179 && ", except for the CMS Form 179."}. Read the description for each of the
-      attachment types on the{" "}
+      Maximum file size of 80 MB per attachment.{" "}
+      <span className="font-bold">
+        You can add multiple files per attachment type
+        {includeCMS179 && ", except for the CMS Form 179."}.
+      </span>{" "}
+      Read the description for each of the attachment types on the{" "}
       {
         <Link
           to={faqAttLink}

react-app/src/features/forms/new-submission/Medicaid.tsx

@@ -1,19 +1,19 @@
-import { Link } from "react-router-dom";
 import {
+  DatePicker,
   FormControl,
   FormField,
-  FormLabel,
   FormItem,
-  RequiredIndicator,
-  DatePicker,
+  FormLabel,
   FormMessage,
   Input,
+  RequiredIndicator,
   SpaIdFormattingDesc,
 } from "@/components";
 import { ActionForm } from "@/components/ActionForm";
+import { AttachmentFileFormatInstructions } from "@/components/ActionForm/actionForm.components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { AttachmentFileFormatInstructions } from "@/components/ActionForm/actionForm.components";
+import { Link } from "react-router-dom";
 
 export const MedicaidForm = () => (
   <ActionForm
@@ -81,8 +81,11 @@ export const MedicaidForm = () => (
     attachments={{
       instructions: [
         <p data-testid="attachments-instructions">
-          Maximum file size of 80 MB per attachment. You can add multiple files per attachment type
-          except for the CMS Form 179. Read the description for each of the attachment types on the{" "}
+          Maximum file size of 80 MB per attachment.{" "}
+          <span className="font-bold">
+            You can add multiple files per attachment type except for the CMS Form 179.
+          </span>{" "}
+          Read the description for each of the attachment types on the{" "}
           <Link
             to="/faq/medicaid-spa-attachments"
             target={FAQ_TAB}

react-app/src/features/forms/waiver/app-k/index.tsx

@@ -1,20 +1,20 @@
 import {
   ActionForm,
   DatePicker,
-  Input,
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  Input,
   RequiredIndicator,
   Textarea,
 } from "@/components";
-import { Authority } from "shared-types";
 import { formSchemas } from "@/formSchemas";
-import { Link } from "react-router-dom";
 import { FAQ_TAB } from "@/router";
+import { Link } from "react-router-dom";
+import { Authority } from "shared-types";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 export const AppKAmendmentForm = () => (
@@ -25,11 +25,9 @@ export const AppKAmendmentForm = () => (
     fields={(form) => (
       <>
         <div>
-          <p className="mt-4 text-gray-700 font-light">
-            <span className="font-bold">
-              If your Appendix K submission is for more than one waiver number, please enter one of
-              the applicable waiver numbers. You do not need to create multiple submissions.
-            </span>
+          <p className="mt-4 font-bold">
+            If your Appendix K submission is for more than one waiver number, please enter one of
+            the applicable waiver numbers. You do not need to create multiple submissions.
           </p>
         </div>
         <FormField
@@ -80,7 +78,7 @@ export const AppKAmendmentForm = () => (
                   What is my waiver amendment number?
                 </Link>
               </div>
-              <p className="text-gray-500 font-light" id="waiver-number-format">
+              <p className="text-neutral-500" id="waiver-number-format">
                 The Waiver Number must be in the the format SS-####.R##.## or SS-#####.R##.##. For
                 amendments, the last two digits start with '01' and ascends.
               </p>

react-app/src/features/forms/waiver/capitated/Amendment.tsx

@@ -50,7 +50,7 @@ export const AmendmentForm = ({ waiverId }: AmendmentFormProps) => {
                   <FormLabel className="font-semibold" data-testid="existing-waiver-label">
                     Existing Waiver Number to Amend <RequiredIndicator />
                   </FormLabel>
-                  <p className="text-gray-500 font-light">
+                  <p className="text-neutral-500">
                     Enter the existing waiver number you are seeking to amend in the format it was
                     approved, using a dash after the two character state abbreviation.
                   </p>
@@ -84,7 +84,7 @@ export const AmendmentForm = ({ waiverId }: AmendmentFormProps) => {
                     What is my 1915(b) Waiver Amendment Number?
                   </Link>
                 </div>
-                <p className="text-gray-500 font-light">
+                <p className="text-neutral-500">
                   The Waiver Number must be in the format of SS-####.R##.## or SS-#####.R##.##. For
                   amendments, the last two digits start with {"'01'"} and ascends.
                 </p>

react-app/src/features/forms/waiver/capitated/Initial.tsx

@@ -1,7 +1,17 @@
-import { ActionForm, FormControl, FormField, FormItem, FormLabel, FormMessage, RequiredIndicator, Input, DatePicker } from "@/components";
-import { Link } from "react-router-dom";
+import {
+  ActionForm,
+  DatePicker,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  RequiredIndicator,
+} from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
+import { Link } from "react-router-dom";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 export const InitialForm = () => (
@@ -25,18 +35,30 @@ export const InitialForm = () => (
           render={({ field }) => (
             <FormItem>
               <div className="flex gap-4">
-                <FormLabel className="text-lg font-semibold mr-1" data-testid="1915b-waiver-initial-label">
+                <FormLabel
+                  className="text-lg font-semibold mr-1"
+                  data-testid="1915b-waiver-initial-label"
+                >
                   Initial Waiver Number <RequiredIndicator />
                 </FormLabel>
-                <Link to={"/faq/initial-waiver-id-format"} target={FAQ_TAB} rel="noopener noreferrer" className="text-blue-900 underline">
+                <Link
+                  to={"/faq/initial-waiver-id-format"}
+                  target={FAQ_TAB}
+                  rel="noopener noreferrer"
+                  className="text-blue-900 underline"
+                >
                   What is my Initial Waiver Number?
                 </Link>
               </div>
-              <p className="text-gray-500 font-light" id="waiver-number-format">
+              <p className="text-neutral-500" id="waiver-number-format">
                 Must be a new initial number with the format SS-####.R00.00 or SS-#####.R00.00
               </p>
               <FormControl className="max-w-sm">
-                <Input ref={field.ref} value={field.value} onChange={(e) => field.onChange(e.currentTarget.value.toUpperCase())} />
+                <Input
+                  ref={field.ref}
+                  value={field.value}
+                  onChange={(e) => field.onChange(e.currentTarget.value.toUpperCase())}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>